色彩一直是我們學(xué)習(xí)UI設(shè)計(jì)或是APP設(shè)計(jì)的重要知識(shí)點(diǎn)。嚴(yán)格的色彩規(guī)范和色彩搭配是保證優(yōu)質(zhì)UI作品的保障。

同樣的布局，同樣的內(nèi)容，如果采用失敗的色彩規(guī)范或是錯(cuò)誤的色彩搭配方案，那么這個(gè)ui設(shè)計(jì)項(xiàng)目就是失敗的。

之前，25學(xué)堂跟大家分享了《手機(jī)APP界面設(shè)計(jì)規(guī)范之標(biāo)準(zhǔn)色彩規(guī)范》和《APP色彩搭配方案是由主色、輔助色和點(diǎn)綴色構(gòu)成》等優(yōu)秀的文章。

今天繼續(xù)跟大家聊聊APP設(shè)計(jì)規(guī)范當(dāng)中的色彩規(guī)范。

第一個(gè)知識(shí)點(diǎn)：色彩模式 ??

色彩模式是數(shù)字世界中表示顏色的一種算法。我們UI設(shè)計(jì)師常用的色彩模式就是RGB色彩模式。是目前屏幕顯示使用的最廣泛的模式，這個(gè)名字也很鄉(xiāng)土 ??RedGreenBlue。主要適用于顯示器、投影儀、掃描儀、數(shù)碼相機(jī)等。

與之對(duì)應(yīng)的還有一個(gè)印刷模式： CMYK模式。

RGB色彩模式就是我們天天調(diào)色時(shí)候出現(xiàn)的調(diào)色板。如下圖：

為什么要使用色彩？ ?可以通過(guò)色彩傳遞設(shè)計(jì)師的感情，同時(shí)也可以是品牌的文化和情感。用色彩的驚艷吸引用戶(hù)，讓用戶(hù)著迷的來(lái)使用的我們產(chǎn)品。也就是說(shuō)UI設(shè)計(jì)是我們項(xiàng)目當(dāng)中不可缺少的一部分。

還有常見(jiàn)的色彩摸式有HSB, LAB、灰度模式、位圖模式等。

第二個(gè)知識(shí)點(diǎn)：顏色使用恰當(dāng)，遵循對(duì)比原則?

?1：統(tǒng)一色調(diào)，針對(duì)軟件類(lèi)型以及用戶(hù)工作環(huán)境選擇恰當(dāng)色調(diào)?

如：安全軟件，根據(jù)工業(yè)標(biāo)準(zhǔn)，可以選取黃色，綠色體現(xiàn)環(huán)保，藍(lán)色表現(xiàn)時(shí)尚、紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺(jué)得累等

2：如果沒(méi)有自己的系列界面，采用標(biāo)準(zhǔn)界面則可以少考慮此方面，做到與操作系統(tǒng)統(tǒng)一，讀取系統(tǒng)標(biāo)準(zhǔn)色表

3：色盲、色弱用戶(hù)，即使使用了特殊顏色表示重點(diǎn)或者特別的東西，也應(yīng)該使用特殊指示符，?quot;!，?著重號(hào)，以及圖標(biāo)等

4：顏色方案也需要測(cè)試，常常由于顯示器、顯卡的問(wèn)題，色彩表現(xiàn)每臺(tái)機(jī)器都不一樣，應(yīng)該經(jīng)過(guò)嚴(yán)格測(cè)試，不同機(jī)器進(jìn)行顏色測(cè)試

5：遵循對(duì)比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍(lán)色文字以白色背景容易識(shí)別，而在紅色背景則不易分辨，原因是紅色和藍(lán)色沒(méi)有足夠反差，而藍(lán)色和白色反差很大。除非特殊場(chǎng)合，杜絕使用對(duì)比強(qiáng)烈，讓人產(chǎn)生憎惡感的顏色。

6：整個(gè)界面色彩盡量少的使用類(lèi)別不同的顏色 ，一般情況不超過(guò)3種。

安卓的最新設(shè)計(jì)語(yǔ)言是：Material Design

Material Design 設(shè)計(jì)規(guī)范當(dāng)中就指出，必須使用符合Google 官方色表：Color - Style的色彩方案。如下圖：

iOS的色彩使用規(guī)范到?jīng)]有，取決了設(shè)計(jì)師自己的決斷。自從ios7以后，設(shè)計(jì)界就倡導(dǎo)扁平設(shè)計(jì)風(fēng)格啦！

再說(shuō)蘋(píng)果自身每一代產(chǎn)品都是采用了不同的色彩規(guī)范。也是通過(guò)不同的色彩方案來(lái)給用戶(hù)新的變化感覺(jué)。

iOS并沒(méi)有提倡用使用低調(diào)或鮮明的顏色，它只希望設(shè)計(jì)師們用色時(shí)要注意溫柔細(xì)膩的質(zhì)感。選擇一種顏色作為基準(zhǔn)色后，需要確保應(yīng)用中的其它顏色不會(huì)與它發(fā)生沖突（更別使用補(bǔ)色了）。

在此，25學(xué)堂的小編也倡導(dǎo)大家學(xué)會(huì)去建立每一個(gè)UI項(xiàng)目的色彩標(biāo)準(zhǔn)卡。這樣有利于你對(duì)色彩的使用和增強(qiáng)你對(duì)色彩的識(shí)別度。

擴(kuò)展閱讀：

1、APP色彩搭配基礎(chǔ)知識(shí)：色彩的術(shù)語(yǔ)、屬性和色輪

2、最佳設(shè)計(jì)配色教程：臨摹app界面設(shè)計(jì)色彩搭配

3、草根視覺(jué)設(shè)計(jì)成長(zhǎng)之路【設(shè)計(jì)學(xué)堂：色彩搭配】