2021-9-9 資深UI設(shè)計(jì)者
編輯導(dǎo)語(yǔ)：交互設(shè)計(jì)中配色問(wèn)題是設(shè)計(jì)師經(jīng)常會(huì)碰到的問(wèn)題，其中色彩應(yīng)當(dāng)如何搭配以實(shí)現(xiàn)設(shè)計(jì)的美觀與和諧呢？作者在這篇文章里為我們分享了交互設(shè)計(jì)中關(guān)于配色的干貨，推薦正在從事交互設(shè)計(jì)或者對(duì)色彩搭配感興趣的小伙伴閱讀，一起來(lái)看。
交互設(shè)計(jì)中經(jīng)常會(huì)遇到配色問(wèn)題，比如設(shè)計(jì)師是如何確定以下這張頁(yè)面中的卡片配色的？又或者：這些卡片的色塊是如何挑選以保證色彩和諧的？
豆瓣App電影榜單卡片
顏色的搭配其實(shí)是一個(gè)非常值得研究的問(wèn)題。深入剖析的話內(nèi)容也會(huì)很多，本文會(huì)告訴你，顏色如何挑選會(huì)更有規(guī)律，并保證基本和諧。
想要做好色彩的搭配，需了解一些色彩學(xué)概念。色彩學(xué)將顏色分為：同類色、類似色、鄰近色、中差色、對(duì)比色、互補(bǔ)色。這幾種顏色通過(guò)色相環(huán)的角度進(jìn)行取色，如下圖所示：
任意顏色都可以作為基色，每一個(gè)基色都有其相對(duì)應(yīng)的同類色、對(duì)比色、互補(bǔ)色等等。
通常情況下，相鄰的兩個(gè)顏色，選擇基色和鄰近色之間的顏色，也就是與基色之間的角度 ≤ 60° 的顏色，會(huì)讓頁(yè)面的顏色顯得和諧統(tǒng)一。
△ 得到 App 服務(wù)內(nèi)容卡片
△ QQ 音樂(lè) App 榜單卡片
如果選用對(duì)比色和互補(bǔ)色，則需要控制顏色的面積，比如以紅色為主的頁(yè)面中可以出現(xiàn)藍(lán)色，但藍(lán)色的面積占比最好不要超過(guò) 20%。
除了色相上的變化，顏色還有明度和純度上的變化，對(duì)于顏色的影響也至關(guān)重要。這三個(gè)詞匯的概念如下：
色相、純度、明度三者構(gòu)成了色立體的概念，讓色相環(huán)由二維變成了三維的概念。
RGB 和 CMYK 是我們較為熟知的色彩模式。而根據(jù)上文提到過(guò)的色彩學(xué)概念，在實(shí)際工作中我們也可以借鑒HSB 色彩模式進(jìn)行調(diào)色和選擇顏色。
在 sketch 和 PS 的 HSB 色板界面如下圖：
其中：
由于純度 Saturation (S) 和明度 Brightness (B) 之間的數(shù)值都是在 0-100 之間，因此兩者具備一定的對(duì)應(yīng)關(guān)系。這些數(shù)值可以為你在選擇顏色時(shí)提供依據(jù)。
具體怎么使用這些數(shù)值，我們用案例來(lái)說(shuō)明：
某 PC 端產(chǎn)品功能卡片需要做配色設(shè)計(jì)：
已知產(chǎn)品的品牌色是以下兩個(gè)顏色，其 HSB 色值如下圖所示：
因此卡片的衍生色我們可以使用：藍(lán)色調(diào) + 臨近色，且臨近色的顏色最好介于藍(lán)色和紫色之間，會(huì)使產(chǎn)品頁(yè)面顏色的搭配更加和諧統(tǒng)一。
于是我們可以先根據(jù)品牌主色：
顏色 A：H=233，S=74，B=100
來(lái)確定初步顏色，我們只改變色相（H）的數(shù)值，分別在 233 的基礎(chǔ)上進(jìn)行 +10 和 -10，由此可以得到三個(gè)顏色 A1、A2、A3，呈現(xiàn)效果如下圖：
現(xiàn)在的卡片顏色略顯單薄，我們可以再給每一張卡片加一個(gè)顏色，做出過(guò)渡色效果。于是我們?cè)跀?shù)值 A1、A2、A3的基礎(chǔ)上，保持色相（H）不變，只改變這三個(gè)數(shù)值的明度（B）和純度（S）的數(shù)值。以顏色A1 為例：
顏色 A1：H=253，S=74，B=100
現(xiàn)在，我們想要得到一個(gè)比 A1 更深一點(diǎn)的顏色 A1-1，根據(jù)色彩學(xué)理論，我們可以降低明度（B）的數(shù)值，這樣顏色會(huì)變深，同時(shí)增加純度（S）的數(shù)值，這樣顏色會(huì)更沉穩(wěn)純正，為了保證數(shù)值可控，我們將明度（B）降低 26，將純度（S）提高 26，所以可以得到顏色 A1-1的色值：
顏色 A1-1：H=253，S=100，B=74
A1 和 A1-1的顏色效果如下圖：
按照此方法，我們可以得到兩組顏色和其數(shù)值：
所以我們的卡片可以使用漸變色：
這樣卡片的顏色就基本確定下來(lái)了，我們可以再調(diào)整下卡片的細(xì)節(jié)，比如增加相關(guān)的背景插圖，調(diào)整卡片上的文字排版等等，這組 PC 端卡片最后的效果如下圖：
一個(gè)頁(yè)面中元素的色彩選擇有很多影響因素，比如：產(chǎn)品的品牌色、頁(yè)面的功能、頁(yè)面的內(nèi)容、氛圍等等，所以還是要具體情況具體分析，綜合考慮選擇顏色。
當(dāng)然，以上提出的這些數(shù)值只是參考，為的是給你的顏色選擇提供理論支撐。在實(shí)際應(yīng)用中，也還是需要設(shè)計(jì)師根據(jù)具體情況，以及人眼視覺(jué)感知的效果，酌情做顏色上的優(yōu)化處理。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn