? ? ? ?說實話矗积，作為一個交互設計師棘捣，色彩搭配這塊我并不是很在行休建。在實際工作中我都是找視覺設計師幫忙來完成UI的色彩搭配测砂，畢竟與我相比他們更能完美地搭配色彩。但是在原型構(gòu)建的時候我還是會嘗試和驗證我的一些想法呜投，下面是我在實踐過程中獲得的關于基色仑荐、輔助色纵东、明暗與色調(diào)的選擇以及對比度的16個小經(jīng)驗偎球，和大家一起分享一下啊材原。

基色

這里所說的“基”色指的是無處不在的色彩猫牡，包括品牌色、中性色以及交互視覺中最常用的藍色乃戈。

1症虑、盡快確立基色

每一個品牌都會有一到兩個核心色調(diào)归薛，像是魅力紅、深沉藍逛球、活力橙之類的苫昌。盡管在選取基色的時候都會有一定的標準祟身，但是在實際操作中并不能很好的搭配，最后只能不斷地更換基色氯葬。

Tips：盡快把基色確定下來帚称，不要等到完稿的時候還在討論基色的事兒秽澳。

2肝集、深入了解品牌（在調(diào)整品牌顏色的時候）

藍色會不會太冷淡杏瞻？紅色會不會太嗨衙荐？當你沒有經(jīng)過同意就修改品牌顏色忧吟，這對于品牌方來說簡直是一致褻瀆。

Tips：品牌顏色是品牌的重要組成部分讹俊，所以在變動的時候和品牌方商量一下仍劈，必要的時候用自己的力量說服他們寡壮。

3、不要同時使用多種中性色

無論是炭黑色還是亮絨灰组民，中性色應用在UI中時都像是一種過渡色臭胜。不過如果在UI中都使用中性色的話整個界面看上去會非绸校“渾濁”否纬。此外，既不深又不淺的顏色在灰色背景上看上去多少會有些障礙睛驳。

Tips：搭配一些深灰或深黑來形成對比乏沸，同時要考慮到背景顏色等因素爪瓜。

4铆铆、避免沖突

我在過去設計過的五個項目中都是以高飽和度的藍色作為按鈕和鏈接的標準色薄货，也許當?shù)谝粋€瀏覽器問世的時候鏈接就是藍色的了谅猾。這種在鏈接和可以點擊的元素上廣泛應用的“科技”藍在任何一個配色方案中有著不可或缺的地位。

Tips：當（而非如果）你設定你的“科技藍”時坐搔，選擇一種易于識別的顏色概行，并且確保不會和品牌主色調(diào)相沖突谤绳。

顏色的色調(diào)與明暗

配色的時候選擇幾種顏色未免也太單調(diào)了，所以需要在合理范圍內(nèi)對顏色進行適當?shù)恼{(diào)整堡称。

5却紧、對每個顏色設定色調(diào)與明暗區(qū)間

設定區(qū)間時標注出色號等信息胎撤，在檢索的時候會方便許多伤提。

Tips：區(qū)間中的顏色要符合色相，并且要把區(qū)間作為視覺指導手冊中的重要部分對待介汹。

6嘹承、以亮度命名

記得之前我們在做一個項目的時候用普通的序號對區(qū)間中的顏色進行分類叹卷，然而當我們想要添加另一個色調(diào)的時候不知道放在哪里好骤竹。

Tips：以亮度為單位對顏色進行區(qū)分，比如$color-gray-05或者$color-gray-92哟楷，這樣做的目的是能夠有一個明暗的大概范圍瘤载，在調(diào)整變更的時候也會更快捷一些。

7卖擅、限制單個色彩區(qū)間的數(shù)量

無止盡的選項是交互設計中最要避免的，在色彩搭配中也是同樣的道理墨技。不像Material Design那樣要考慮到所有應用的普適性惩阶，大部分交互設計中并不需要那么多的顏色選項。選項越多扣汪，搭配就越困難。

Tips：色彩區(qū)間中只保留那些必要的顏色崭别，在與界面搭配時會更得心應手冬筒。

8恐锣、根據(jù)不同需求選擇色彩轉(zhuǎn)換方式

諸如SASS、Stylus等生產(chǎn)工具都帶有根據(jù)亮度來自動轉(zhuǎn)換顏色的明暗程度的功能舞痰，在你設計懸停按鈕或者分層導航時這種功能可以幫助你實現(xiàn)色彩上的細微對比土榴。但是有時候這種轉(zhuǎn)換也是一件麻煩事，有時候它會變得更亮响牛，有時候會變得更暗玷禽。

Tips：合理選擇色彩轉(zhuǎn)換方式，比如適當提高5~10%的亮度或者在極端情況下提高10~20%的亮度呀打。如果這種轉(zhuǎn)換需要避免矢赁，那么簡潔地說明一下。

輔助色

除了品牌顏色及其衍生色贬丛，還需要考慮到不同場景下的多種顏色撩银，這是色彩搭配中必不可少的。

9豺憔、設定意義明確的反饋顏色

大部分色彩搭配中都會設定特定的顏色與特定的場景搭配蜒蕾，比如提示錯誤時的紅色，提示成功的綠色焕阿，警示用的黃色以及提示信息時用的藍色咪啡。這種意義明確的反饋顏色也能幫助產(chǎn)品部門快速發(fā)現(xiàn)問題并解決。

Tips：廣泛搜集素材并設定標準反饋顏色暮屡，確保其與整體相協(xié)調(diào)撤摸。

10、標注出色彩主題

在部分設計中色彩會與特定的產(chǎn)品褒纲、部件或是品牌相關聯(lián)准夷，比如特定的母品牌與子品牌的色彩關聯(lián)或者是一些主題皮膚。因此在色彩搭配時需要描述出色彩的使用場景莺掠，可以幫助你更好地進行分類搭配衫嵌。

Tips：表述出應用場景的范圍，在特定段落中設定適用邊界彻秆。

11楔绞、定義顏色的使用場景

僅僅標注出色彩主題并不行，一個色彩主題可能會應用在按鈕背景或者標簽背景唇兑。然而在一些場景下酒朵，比如長段落中，色彩主題可能并不適用扎附。

Tips：明確顏色可以使用的場景蔫耽，具體到特定的UI元素上。

12留夜、避免完稿時還在討論色彩混合

Google’sMDL Color Customizer是我最喜歡的設計工具之一匙铡，它可以有效地將主色與輔色結(jié)合在一起图甜，形成可搭配的新顏色。然而我所在的團隊里沒有一個人想用或者沒時間去關心如何解決色彩混合的問題鳖眼。

Tips：不要過于在意色彩混合黑毅，除非這件事對整個設計影響較大。大部分情況下設計師會利用專業(yè)工具或者手動進行混合具帮，與其考慮每一種混合的可能性不如給他們信心博肋，畢竟設計就是一種實驗。

對比度以及無障礙性

易識別的顏色對比應該是色彩搭配中的核心蜂厅，然而在實際操作過程中這一點往往被忽視匪凡。

13、盡早檢查對比度

在產(chǎn)品上線的前幾天才有人注意到色彩對比度有問題掘猿，這種事情經(jīng)常發(fā)生病游。很多時候設計團隊壓根就沒把這事兒放在心上，也不會去管是不是符合Web內(nèi)容無障礙指南稠通。所以上線前幾天依舊在修改也不見得奇怪了衬衬。

Tips：任何一個對色彩負責的設計個人或團隊都應該熟悉Web內(nèi)容無障礙指南里的每一項內(nèi)容，并利用工具（比如Tanaguru）來測試色彩對比度的搭配改橘。

14滋尉、在既定范圍里選擇無障礙色彩搭配

Web內(nèi)容無障礙指南的一大弊端就是要求的太死板了，這對顏色要么可以使用要么不能使用飞主。更糟糕的是它都沒有說為什么不能使用狮惜，有多少需要改進。

Tips：在選擇無障礙色彩搭配的時候先給定一個大致的選擇范圍碌识，這樣能幫助團隊盡快通過無障礙測試碾篡。

15、解決強對比背景下的搭配問題

在色彩搭配過程中僅僅測試無障礙性是不行的筏餐，還需要考慮到強對比背景下的搭配問題开泽。在亮背景下搭配暗色文字是很常見的做法，然而在涉及到中性背景搭配或者另外一種主色輔色搭配的時候卻亂了套魁瞪。

Tips：通過排列選擇對比度明顯的搭配穆律。

16、利用色彩引發(fā)無障礙性意識

色彩是設計中的基礎要素佩番，易于識別的色彩對比是色彩搭配中的基礎众旗。將這種意識灌輸?shù)皆O計流程中，品牌經(jīng)理趟畏、設計主管、開發(fā)者以及高層都會對此加以重視滩租。

Tips：抓住機會倡導無障礙性赋秀，把這種意識不斷地加深應用利朵。

文章轉(zhuǎn)自火星時代--WWW.HXSD.COM