顏色是所有設(shè)計(jì)系統(tǒng)中的一個關(guān)鍵要素晌姚。在網(wǎng)站或應(yīng)用程序中沪曙，可以通過多種方式使用顏色邑蒋。有時通過對比或?qū)㈩伾拗圃谶x定范圍姓蜂，可以利用顏色創(chuàng)建焦點(diǎn)；顏色還有助于建立層次結(jié)構(gòu)寺董，并影響用戶的視角覆糟。

在本文中刻剥，我們將討論如何策略性地使用顏色遮咖。

1. 通過配比創(chuàng)建焦點(diǎn)

顏色配比的一個典范是Viporte的設(shè)計(jì)。向下滾動其主頁時造虏，你會發(fā)現(xiàn)每個部分的中心部位都有一個大字母御吞。在該部分加入動畫前麦箍，該字母就涂滿漂亮的顏色。不同動畫圖像的顏色與字母的顏色有關(guān)陶珠。焦點(diǎn)是各部分的中心最毋庸置疑的內(nèi)容挟裂，這在某種程度上要?dú)w功于顏色的集中使用。配比變化——有時只有幾種顏色揍诽，有時有很多種顏色诀蓉。無論采用哪種方式，配比都是用于吸引注意力并形成焦點(diǎn)暑脆。如果每個部分都充斥著比較明顯的顏色渠啤，焦點(diǎn)就不會那么清晰了。

2. 通過對比引起注意

此外添吗，通過顏色可以巧妙地進(jìn)行對比沥曹。如果整體設(shè)計(jì)的顏色趨于平靜或柔和，添加對比色會讓圖像更引人關(guān)注碟联。

Thinx的設(shè)計(jì)便是如此妓美。在其主頁上，界面的整體配色方案實(shí)際上采用的是黑白色鲤孵。然而壶栋，該設(shè)計(jì)在很大程度上依賴于數(shù)量龐大的照片。尤其是在主頁頂部普监，內(nèi)衣圖片以暗紅色為背景委刘。與頁面上的其它內(nèi)容相比，這相當(dāng)大膽鹰椒。

毫無疑問锡移，這里凸顯的是暗紅色。紅色與黑白配色方案形成高度對比漆际。我喜歡列舉Thinx的例子淆珊，因?yàn)檫@行之有效，這表明明亮的霓虹色不是通過對比而引人注目的唯一顏色奸汇。這的確是協(xié)調(diào)兩種顏色的一種舉措施符，能夠切實(shí)凸顯其中的一種顏色。

3. 使用顏色來創(chuàng)建UX設(shè)計(jì)模式

?

創(chuàng)建視覺模式的最佳方法是通過連貫性擂找。反過來戳吝，模式創(chuàng)建了用戶習(xí)以為常的聯(lián)系。同理贯涎，用戶習(xí)慣于將某些圖標(biāo)與某些行為聯(lián)系起來听哭，比如垃圾桶意味著刪除。顏色更是因人而異，因?yàn)槊總€網(wǎng)站或應(yīng)用程序都可以從其自身角度賦予顏色意義陆盘。

讓我們來探討下Underbelly產(chǎn)品網(wǎng)站上藍(lán)色的運(yùn)用普筹。這個簡單的例子能充分支持我的觀點(diǎn)。Underbelly網(wǎng)站上所有可以點(diǎn)擊打開的地方都是藍(lán)色的隘马。登陸該網(wǎng)址幾秒鐘后太防，你很快會發(fā)現(xiàn)其鏈接都是藍(lán)色的。這便是通過顏色創(chuàng)建模式的方法酸员。模式行之有效蜒车，因?yàn)槟Ｊ侥軌蜃層脩艉驮L問者輕易地悟出某些含義。然而幔嗦，越容易悟徹醇王，啟發(fā)人們進(jìn)行的思考就越少；現(xiàn)在我們都知道這讓Steve Krug有多開心崭添。

4. 通過顏色搭建層次結(jié)構(gòu)

?

顏色還擅長搭建層次結(jié)構(gòu)寓娩。在Skore的產(chǎn)品頁面，幾乎所有部分都含有綠色元素呼渣。綠色的重復(fù)使用創(chuàng)建了可以識別的模式棘伴，還有助于區(qū)分給定部分的重要內(nèi)容。通常屁置，很容易通過大泻缚洹（例如字體大小）來說明層次結(jié)構(gòu)蓝角。但利用顏色的強(qiáng)度阱穗，以及添加使用的顏色，都可以很好地搭建出層次結(jié)構(gòu)使鹅。

在Skore的例子中揪阶，綠色與灰色文本和白色背景形成了很好的對比，因而引人注目患朱。此外鲁僚，其配色方案并不是依賴其它重點(diǎn)色將綠色凸顯出來。所有這些都有助于各部分顯示層次結(jié)構(gòu)裁厅。因此冰沙，綠色有助于引導(dǎo)用戶關(guān)注重要內(nèi)容，前提是各部分都有很好的層次結(jié)構(gòu)执虹。綠色元素告知用戶首先要看向哪里拓挥。

5. 利用顏色的相似性

設(shè)計(jì)人員利用顏色實(shí)現(xiàn)不同的目標(biāo)，但大多是利用和重復(fù)利用顏色保持設(shè)計(jì)內(nèi)容的連貫性袋励。我們來看看InVision年底的登錄頁面侥啤。頁面頂部是粉色和紫色漸變背景圖像当叭。頁面下方，按鈕的顏色也采用了紅色和紫色愿棋。

此外，登錄頁面再次使用了粉色和紫色作為背景均牢，背景之上使用了白色糠雨。頁面還再次使用了黑色和灰色文本，背景為白色徘跪。如果每次都使用不同的顏色甘邀，頁面看上去就不會那么棒了。

我們來看看Co-motion垮庐。在其主頁上松邪，創(chuàng)意團(tuán)隊(duì)使用了幾種不同的顏色。這幾種顏色在色調(diào)上非常相似哨查，看上去協(xié)調(diào)而流暢逗抑，但并不凸顯任何內(nèi)容，這也是個不錯的設(shè)計(jì)寒亥。在這種情況下邮府，對顏色的強(qiáng)調(diào)是通過頁面良好的協(xié)調(diào)性和流暢性實(shí)現(xiàn)的，你想讓用戶對頁面感興趣并滾動頁面讀取內(nèi)容溉奕。

結(jié)論

顏色是非常棒的工具褂傀，它能幫助你實(shí)現(xiàn)各種設(shè)計(jì)目標(biāo)。顏色有助于明確和搭建層次結(jié)構(gòu)并明晰焦點(diǎn)加勤。顏色強(qiáng)調(diào)形式多種多樣仙辟。無論哪種方式，設(shè)計(jì)時使用顏色將其樂無窮鳄梅。在策略性配色方案的幫助下叠国，將可輕松影響訪問者或用戶的視角。

------------------------------------------------------------

非特殊說明戴尸，本文版權(quán)歸原作者所有煎饼，轉(zhuǎn)載請注明出處

本文圖片未注明來源均來自網(wǎng)絡(luò)，版權(quán)歸作者所有

微信公眾號：qduckcn 校赤，趣達(dá)愛設(shè)計(jì)

原文出處：www.webdesignerdepot.com

原文作者：?Paula Borowska