網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)站選對(duì)色彩很重要

新聞 2023-09-08編輯：深圳網(wǎng)站建設(shè)閱讀（）標(biāo)簽： 很重要 設(shè)計(jì)網(wǎng)站

深圳網(wǎng)站建設(shè)公司 幫助企業(yè)提升網(wǎng)站形象,彰顯公司實(shí)力,PC+手機(jī)+微信+小程序
【模板網(wǎng)站的價(jià)格】國(guó)際域名+阿里1G空間+備案 一條龍服務(wù)
【定制網(wǎng)站的功能】SEO精準(zhǔn)營(yíng)銷系統(tǒng)+城市分站+W3C標(biāo)準(zhǔn)
【營(yíng)銷網(wǎng)站的效果】重長(zhǎng)尾，重優(yōu)化，提權(quán)重，擴(kuò)收錄，提排名
【量身訂制的設(shè)計(jì)】據(jù)據(jù)需求量身定制。設(shè)計(jì)到滿意為止
【專屬VIP的服務(wù)】24RX365 為您提供1對(duì)1的專屬VIP服務(wù)

　　配色確實(shí)是一件難搞的事情。它牽涉到文化背景，受到方方面面的影響，在情感含義上的理解又因人而異，設(shè)計(jì)師所面對(duì)的問題往往是選擇太多，而非太少。

　　配色的方法很多，輔助工具也不少，但是令人印象深刻的，往往是一些頗為有意思的技巧。今天，小編給大家分享一個(gè)配色大師 Patrick Multani 的色彩搭配技巧。也許這10個(gè)技巧，會(huì)成為你的配色體系的可靠補(bǔ)充~

　　謹(jǐn)記配色策略

　　開始著手挑選配色之前，我常常會(huì)翻看 Dustin Senos 關(guān)于設(shè)計(jì)原則的短文。他在文章中，闡述設(shè)計(jì)原則的方式非常有意思，干練而有趣，“方向優(yōu)于選擇”，“合適優(yōu)于一致”，“發(fā)展性優(yōu)于總結(jié)”。其實(shí)如果借用這種句式來總結(jié)配色也不錯(cuò)：“白色優(yōu)于灰色”，“和諧優(yōu)于錯(cuò)位”，“沉靜優(yōu)于熱烈”。當(dāng)我在工作的時(shí)候，我會(huì)時(shí)刻謹(jǐn)記這些配色策略，它們更像是一種感覺上的規(guī)范，就像用戶角色引導(dǎo)UX設(shè)計(jì)師來設(shè)計(jì)體驗(yàn)一樣。

　　取色一條線

　　當(dāng)我在調(diào)色板上選擇色彩的時(shí)候，我會(huì)傾向于沿著直線路徑來挑選色彩，從左到右，從上到下，或者沿著對(duì)角線來選取色彩。這樣所獲得的一套配色可以兼顧到不同的按鈕狀態(tài)(可用/不可用，活動(dòng)/非活動(dòng))，兼顧到視覺主體和邊框，背景等。我們也可以在取色器的同一個(gè)位置取色，調(diào)整色調(diào)，獲得的一組色度接近色調(diào)不同但是高度協(xié)調(diào)的色彩組合。上圖中，中間那個(gè)就是。

　　保持敏感，小幅調(diào)整

　　調(diào)配這這么多配色方案，給我最深刻的經(jīng)驗(yàn)教訓(xùn)就是：哪怕輕微的色彩調(diào)整，都會(huì)對(duì)整個(gè)配色方案帶來巨大的影響。所以，我覺得在配色的時(shí)候，要保持敏感，小幅度調(diào)整和改變。你可以試著挑選偏冷或偏暖的灰色，運(yùn)用到你的配色方案中，你會(huì)發(fā)現(xiàn)它們會(huì)不同程度地調(diào)和整個(gè)配色方案的協(xié)調(diào)度。根據(jù)這樣的策略，你可以挑選出一大堆色彩作為備選，反復(fù)迭代，變得對(duì)于微妙的色彩變化更加敏感。

　　善用疊加模式

                                                                                                      網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)站

　　如果你能善用混合模式，就能創(chuàng)造出令人著迷的配色方案。通過簡(jiǎn)單的疊加兩個(gè)色塊，選擇“Multiply”(乘法)混合模式，就能得到匹配的第三種色彩。在白色背景上，我們還能通過調(diào)整透明度來快速調(diào)整色彩的明暗。不過我始終覺得在黑色背景上來調(diào)整色彩更有意思，搭配混合模式來探索色彩的可能性，總能創(chuàng)造新的搭配。這種同色彩的交互方式，為許多經(jīng)驗(yàn)豐富的設(shè)計(jì)師所使用。

　　沉靜而集中的配色

　　選好色彩是一回事，在視覺設(shè)計(jì)中有效地運(yùn)用它們是另外一回事。有的配色方案非常漂亮，但是一旦運(yùn)用在特定的設(shè)計(jì)項(xiàng)目當(dāng)中，整個(gè)視覺就崩壞了。盡量讓配色方案中色彩不要那么龐雜，讓整個(gè)設(shè)計(jì)更加沉靜。比如，文本、圖標(biāo)和邊框采用不同類型的藍(lán)色，能讓整個(gè)設(shè)計(jì)顯得協(xié)調(diào)。當(dāng)你想要高亮突出什么東西的時(shí)候，可以采用這種方法。

　　在不同的背景下查看配色

　　我記得之前參與過一個(gè)可拓展的色彩系統(tǒng)項(xiàng)目，當(dāng)時(shí)我挑選了大量微妙而接近的色彩，當(dāng)我仔細(xì)審視它們的時(shí)候發(fā)現(xiàn)很難區(qū)分彼此。這個(gè)時(shí)候，我將這些色彩復(fù)制了一份，然后添加了一個(gè)黑色的背景，這個(gè)時(shí)候，色彩和色彩之間的區(qū)別就變得明晰了，讓我能夠更好的作出選擇。

　　明艷的色彩更吸引人

                                                                                                                網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)站

　　在取色器的右上角取色能夠找到更加安全、更加吸引人的色彩，供你運(yùn)用在配色方案中。色彩越靠左、靠下，色彩上所疊加的灰度和黑色就越多，色彩本身的重量就越重，而過重的色調(diào)會(huì)在潛意識(shí)上給人以壓力。所以，我更傾向于使用清晰明亮的色調(diào)來進(jìn)行設(shè)計(jì)。

　　疊加圖層調(diào)色

　　想象有一張半透明的紙，當(dāng)我們將它置于色彩上方的時(shí)候，它能夠從視覺上“消減”色度。我們可以在PS和Sketch中來模擬這樣的“紙”，新建形狀，通過調(diào)整透明度和混合模式，或者搭配使用來實(shí)現(xiàn)不同的效果，我們還可以調(diào)整紙張本身為白色或者黑色，在疊加混合模式下，能對(duì)色彩的飽和度產(chǎn)生不同的影響。在有的UI設(shè)計(jì)項(xiàng)目當(dāng)中，會(huì)借助這樣的技術(shù)來暫時(shí)調(diào)整整個(gè)區(qū)域的敏感色度，這比改色更加輕松，還保持了色彩之間的協(xié)調(diào)度。

　　上圖中的三種效果：

　　黑色圖層，疊加混合模式，不透明度50%(增加飽和度)

　　白色圖層，正常混合模式，不透明度50%(變亮)

　　黑色圖層，正?；旌夏Ｊ?，不透明度50%(變暗)

　　根據(jù)前景色來挑選背景色

　　當(dāng)我選取背景色的時(shí)候，我更喜歡根據(jù)前景色來搭配，吸取前景色，調(diào)亮或者變暗，而不是選擇純粹的中性灰色。這樣的方式會(huì)讓背景色是或冷或暖的淺灰，給人一種協(xié)調(diào)的感覺。

　　色彩的明暗與前后

　　最后，我們應(yīng)該始終謹(jǐn)記色彩的明暗所帶來的視覺深度原理。在較深的背景下，淺色會(huì)顯得更靠前，而在較淺的背景下，深色會(huì)顯得突出而靠前。

• 上一章：網(wǎng)頁(yè)設(shè)計(jì)帶來的商業(yè)機(jī)會(huì)
• 下一章：全面的移動(dòng)WEB設(shè)計(jì)訣竅分享