如何做好網(wǎng)站色彩的搭配
2022-10-18 分類： 網(wǎng)站建設(shè)
1、色不過三
經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色，不管是做平面也好，還是網(wǎng)頁，或是做APP等設(shè)計(jì)，都需要遵守這個(gè)基本的道理。怎樣才算是不超過三種顏色的搭配呢？
在這里很多人都會認(rèn)為就是不要超過三種不同的顏色值。其實(shí)不然，不超過三種顏色的搭配，是指不超過三種色相的搭配。在單個(gè)色相中可以運(yùn)用顏色明度或飽和度做色彩的豐富性，而色相不要過三！
那是不是越簡潔的顏色就好？
那咱就只用一種顏色得了。下圖中單一顏色和多種色相顏色配色下的對比，我們可以看到在單一顏色下的設(shè)計(jì)更為統(tǒng)一，畫面更為和諧。在多種顏色下界面中的功能模塊更為明確，區(qū)分性更強(qiáng)，所以說在使用多種顏色的時(shí)候還需要考慮產(chǎn)品的內(nèi)容與核心。
三色搭配，只要控制在不超過三種色相的范圍即可。學(xué)過畫畫的商業(yè)設(shè)計(jì)師，應(yīng)該都清楚知道顏色的明度、暗度、飽和度。
運(yùn)用單色的設(shè)計(jì)，會顯得單調(diào)乏味。而整體顏色飽和度過低會導(dǎo)致畫面沉悶而不透氣。明快的顏色和明暗的色彩搭配能使畫面顯得層次感豐富而又有朝氣。
做精致的顏色，提煉格調(diào)
在界面設(shè)計(jì)中，色彩是設(shè)計(jì)中的重中之重，是否正確和完整的表現(xiàn)出產(chǎn)品氣質(zhì)至關(guān)重要。單一的色相，豐富的明度和飽和度能使界面看的有層次感和豐富性。而精簡的色，處理器來也會跟容易統(tǒng)一和把控。在用色時(shí)，顏色越少越好，但要保證正確的傳達(dá)出需要表現(xiàn)的功能和元素為前提。在我們每添加一種顏色的時(shí)候都需要好好的考慮一下，有沒有必要。因?yàn)樵購?fù)雜的設(shè)計(jì)，也不會多個(gè)三種主色彩。
2、確定主色
在運(yùn)用色彩進(jìn)行設(shè)計(jì)的時(shí)候，心里要有數(shù)。色彩的主次關(guān)系能定作品的性。優(yōu)秀的作品色彩就是那么的清晰，記住色彩功能的劃分：主要色、輔助色、裝點(diǎn)色。
主色的魅力：主色決定設(shè)計(jì)的風(fēng)格。
在設(shè)計(jì)中色彩充當(dāng)了重要的情感元素，那主色就是作品的文化方向。我們在設(shè)計(jì)初期需要對項(xiàng)目有明確的了解后提煉選擇出最為貼切的主色進(jìn)行定位。
每種顏色承載的文化都是不同的，會領(lǐng)導(dǎo)了整個(gè)界面設(shè)計(jì)的方向。
網(wǎng)頁設(shè)計(jì)、移動界面設(shè)計(jì)、banner設(shè)計(jì)、平面設(shè)計(jì)……不同的媒介，主色的運(yùn)用規(guī)律各不相同。網(wǎng)頁設(shè)計(jì)和界面設(shè)計(jì)，通常主色運(yùn)用在結(jié)構(gòu)和裝飾。而Banner和海報(bào)為了更為醒目，主色通常運(yùn)用在背景顏色上。
在界面設(shè)計(jì)中常將品牌LOGO的顏色定為主色彩，并且在不同的界面中主色彩出現(xiàn)的面積也會隨之變化。
大家都知道，大眾點(diǎn)評、百度外賣、美團(tuán)應(yīng)用都將產(chǎn)品LOGO的顏色進(jìn)行了延續(xù)，將logo顏色定義為主色彩，有效的統(tǒng)一了產(chǎn)品的傳播性。
他們的產(chǎn)品界面設(shè)計(jì)主色面積使用也是非常一致。首頁都是使用的主色彩面積較大，導(dǎo)航條全部填充了主色。在二級頁面中則使用的面積較少，將主色點(diǎn)綴到界面中。
我們可以這樣去理解，在用戶使用產(chǎn)品時(shí)，更希望用戶記憶產(chǎn)品。而在用戶進(jìn)入了信息頁面時(shí)則更注重易用性，希望用戶能找到自己需要的東西。所以主色在首頁使用的面積較多，而二級頁面使用在關(guān)鍵的操作點(diǎn)上。從產(chǎn)品角度出發(fā)，我們在使用主色的時(shí)候要考慮頁面的內(nèi)容關(guān)系，理解界面的層次與功能性質(zhì)。從視覺出發(fā)，選擇了飽和度較高的色彩做為主色時(shí)，要考慮因?yàn)轭伾娣e過多而造成的視覺疲勞。
在banner和海報(bào)的設(shè)計(jì)中主色的面積一般會運(yùn)用在背景色中，相對面積較大?？芍^是直奔主題式。
3、從對比色中找輔助色
通常大家覺得只要色彩面積最多就是主色。其實(shí)不然，人們的閱讀心理是有差異的，如果顏色飽和度較低容易被相對面積少的高飽和度顏色搶眼，所以在定義界面主色的時(shí)候要選飽和度（純度）高的顏色作為主色會比較的穩(wěn)定。
在界面設(shè)計(jì)匯總使用互補(bǔ)色彩的對比是最為強(qiáng)烈的。這種色彩能使用戶的視覺產(chǎn)生強(qiáng)烈的刺激，情感濃烈，給人留下鮮明的印象。這種方式是最易于傳播的。適合在夸張的、張揚(yáng)的場景下使用。但這種顏色用的太過于平凡容易造成用戶的視覺疲勞。給人一種不安定的感覺。那么在使用這樣的搭配方式時(shí)需要控制使用的位置和信息的面積了，核心的地方可以這樣去使用。
主要的三對互補(bǔ)色：紅綠、藍(lán)橙、黃紫
我們可以看到很多APP的icon為了吸引用戶的注意就用到了強(qiáng)烈對比的互補(bǔ)色
色彩中還會運(yùn)用到冷暖對比
冷暖對比色是自然平衡的規(guī)律，可以在設(shè)計(jì)中大量使用，這樣的配色會使作品非常的出彩，不顯單調(diào)。
在設(shè)計(jì)中，冷色與暖色的對比是界面設(shè)計(jì)中最為廣泛的使用方法，效果也非常的出眾。
色彩好比就是陰陽太極，冷與暖的兩級平衡還原了生活中的和諧。用這樣的配色效果讓用戶感覺舒服平和。
冷暖色彩搭配的方法基本沒有啥缺點(diǎn)，使用在設(shè)計(jì)中，技巧性比較多，對設(shè)計(jì)的細(xì)膩感受要求比較高。
雖然支付寶的主圖標(biāo)發(fā)生了改變，變成了簡潔的藍(lán)色支付寶，但主頁面中還是利用到了冷色與暖色的搭配，很好的區(qū)分了分類，并且讓頁面中豐富的分類變得不是那么得零散。很多設(shè)計(jì)師每次碰到滿版分類圖標(biāo)的時(shí)候很頭大，處理的時(shí)候容易把頁面搞花了，建議使用冷暖的方式去調(diào)整，將頁面平衡好。
當(dāng)前名稱：如何做好網(wǎng)站色彩的搭配
文章網(wǎng)址：http://jinyejixie.com/news/206068.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、域名注冊
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 制作手機(jī)網(wǎng)站如何提高訪客滿意度 2022-10-18
- 怎么樣制作網(wǎng)站才能被人喜歡 2022-10-18
- 網(wǎng)頁設(shè)計(jì)師的六脈神劍 2022-10-18
- 怎么樣粘住你的用戶 2022-10-17
- 建設(shè)網(wǎng)站要有充分的準(zhǔn)備方可萬無一失 2022-10-17
- 網(wǎng)站重新制作乃事出有因 2022-10-17
- 怎么搭建網(wǎng)站才能擁有快的速度 2022-10-17
- 營銷型網(wǎng)站怎么做才能起到理想作用 2022-10-17
- 怎么樣制作網(wǎng)站能夠不被人惡意的攻擊 2022-10-18
- 創(chuàng)建網(wǎng)站時(shí)有哪些值得探討的訣竅 2022-10-18
- 網(wǎng)站做好之后如何運(yùn)營企業(yè)官網(wǎng)？ 2022-10-17
- 為什么UX設(shè)計(jì)會影響網(wǎng)站流量 2022-10-17
- 優(yōu)化網(wǎng)站時(shí)有沒有必要特意加sitemap？ 2022-10-17
- 怎樣制作一個(gè)網(wǎng)站可以利于轉(zhuǎn)化 2022-10-17
- 7個(gè)常見的應(yīng)用程序設(shè)計(jì)錯誤將扼殺您的項(xiàng)目 2022-10-17
- 企業(yè)建網(wǎng)站導(dǎo)致成為擺設(shè)的因素有哪些 2022-10-17
- 通過什么方式增加制作網(wǎng)站的外觀評分？ 2022-10-17
- 網(wǎng)站設(shè)計(jì)上的3個(gè)理由事項(xiàng) 2022-10-17
- 管理系統(tǒng)如何分類？兩種方式帶你了解管理系統(tǒng)主要類別 2022-10-17