一 色彩的基礎知識

　　配色、排版、字體是視覺設計中重要的三大要素。三個要素都能夠影響到視覺設計的出現(xiàn)。

　　在設計中，色彩是整個畫面中最能影響用戶體會情感的元素之一，一起來體會色彩的國際。

　　1 色彩的基本知識

　　在設計與繪畫藝術中，將冷暖色分為三種色彩：

　　1 暖色彩：赤色、橙色、黃色。

　　2 冷色彩：青色、藍色。

　　3 中性色彩：紫色和綠色相對中性色彩。

　　冷暖色在設計中的應留意其份額、輕重、色環(huán)的位置，四海方城威客網(wǎng)為大家解析最后的視覺出現(xiàn)要契合人們視覺上和心理上的舒適感。

　　冷色會讓人想到大海、冰雪等，讓人發(fā)生寬廣、安靜、冷的感覺；暖色則會讓人聯(lián)想到太陽、篝火等，讓人發(fā)生了溫暖、熱心的感覺。

　　三原色

　　傳統(tǒng)美術色彩的三原色是：紅，黃，藍。簡稱 RGB，R（紅Red）、G（綠Green）、B（藍Blue）。原色的色彩純度最高、最純真，也最艷麗，能夠調配出絕大多數(shù)色彩，是一種加色模型。而其他色彩則不能調配出三原色。

　　間色是兩種原色配組成的色彩。如紅和黃配組成的橙色，黃和藍配組成的綠色，紅和藍配組成的紫色。

　　橙、綠、紫三種色彩又叫“三間色”。

　　復色是用原色與間色相調或用間色與間色相調而成的"三次色"。復色是最豐厚的色彩宗族。復色包含了除原色和間色以外的所有色彩。因含有三原色,所以含有黑色成分,純度低,復色品種繁多,千變萬化。比如：赤色和紫色混合而成紫赤色，黃色和橙色混合而成得到橙黃色。

　　互補色/同類色/比照色

　　1.互補色是色相環(huán)中呈180度角的兩種色彩，如赤色與綠色、藍色與橙色、黃色與紫色等。

　　互補色能補充色彩情感表達的缺失感，調理互補色的明度和飽和度能改動情感的走向。

　　2. 同類色是同一色相中不同傾向的系列色彩，如黃色系里的橘黃色、中黃、淡黃色等色彩。色相環(huán)內是15°以內。

　　3. 比照色是色相環(huán)中呈120度至150度的任意兩種色彩，如赤色與藍色等。

　　冷色/暖色/無五顏六色

　　冷暖色(Cool/Cold & Warm colour) 指色彩心理上的冷熱感覺。

　　色彩的冷暖感覺又被稱為冷暖特點。色彩的冷暖感覺是相對的，色彩的冷暖感覺都是相對存在的。比如說紫色和黃色，紫色中的紅紫色較暖，而藍紫色則較冷。

　　無五顏六色（achromatic color）指除了五顏六色以外的其它色彩，常見的有黑、白、灰。明度從0改動到100，而飽和度很小接近于0。

　　無五顏六色是指金、銀、黑、白、灰。試將純黑逐步加白，使其由黑、深灰、中灰、淺灰直到純白，分為11個階梯，成為明度突變，做成一個明度色標（也可用于有五顏六色系），凡明度在0°～3°的色彩稱為低調色，4°～6°的色彩稱為中調色，7°～10°的色彩稱為高調色。

　　素：色相/純度/明度

　　色相是指不同的色彩的容顏，與亮度、飽和度無關。在通常的運用中，色相由色彩的稱號標識，如赤色、橙色或綠色等色相。

　　純度通常是指色彩的艷麗的飽和程度。色彩含有色成分的份額越大，則純度越高。含有色成分的份額越小，純度越低。當一種色彩摻入白色時，純度就會降低。

　　明度是指色彩的明暗程度。

　　四海方城威客網(wǎng)指出同一色彩在強光照射下顯得較亮堂，而在弱光照射下顯得較灰暗、模糊。針對同一種色彩，深化不同的黑色或白色后，會發(fā)生不同的明暗層次感。

　　黃色明度最高，藍紫色明度最低，赤色和綠色的明度中等。一起，一般純度發(fā)生改動時，明度也會隨之改動。

　　色彩在界面設計中的作用

　　五顏六色文字會告訴用戶能夠點擊的文字鏈接，而灰色的按鈕則會讓用戶認為此按鈕不行點擊。

　　全體思考色彩在設計中的構成元素

　　圖形化用戶界面，用戶在看到一個界面時，是一個由布景色、矩形按鈕及圖標ICON 設計、卡片等設計元素構成的。在設計界面時，借助色彩能夠直觀的展示布景色、導航欄、狀態(tài)欄和操作按鈕等構成的設計元素，并讓產(chǎn)品設計的界面的邏輯架構和信息層級得到很好的展示。

　　明確視覺層級聯(lián)系

　　產(chǎn)品界面設計中，不同的內容應該出現(xiàn)出不同的層級聯(lián)系。例如，使命與背包間的同級聯(lián)系，螞蟻森林與內容間的叢屬聯(lián)系等。

　　利用同色系、色彩之間的色相差異可十分直觀的區(qū)別內容的層級聯(lián)系，一起還能夠經(jīng)過色彩間的強比照杰出關鍵內容。如圖所示，螞蟻森林經(jīng)過色彩的強弱區(qū)別視覺層級，綠色在視覺上層級最高，重要按鈕與文字運用綠色，能夠讓畫面內容的層級聯(lián)系更明晰明確。

　　杰出產(chǎn)品風格

　　色彩的調配能夠直接反映出這種產(chǎn)品的風格和產(chǎn)品特點。例如，金融類 App 界面中常用的藍色，東西類App 界面中常用的藍色等。如圖所示。左面金融 App 界面中的藍色與右邊美團買菜App界面中的多色圖標的設計，都是經(jīng)過色彩來營建產(chǎn)品氣氛的，提高用戶體會設計感，展示產(chǎn)品設計中的功用。

　　色彩的比照

　　色相比照

　　（1）同類色比照

　　運用同類色比照的優(yōu)點是，能夠營建出和諧統(tǒng)一的界面作用；

　　在界面設計中，一些品牌風格比較明顯的產(chǎn)品一般都運用同類色比照。

　?。?）互補色比照

　　運用互補色比照的優(yōu)點是，能夠讓畫面更具張力，營建出視覺上的反差，吸引用戶關注。常見的互補色有赤色與綠色、黃色與紫色、以及橙色與藍色等。因而，在運用互補色比照時，設計師通常需求遵從大諧和，小比照的準則，即將一種色彩大面積運用，然后將其比照色部分運用。一起，將明度相同、彩度很高的等量互補色調配在一起，能夠使界面看起來明顯，如赤色配綠色等。黃色與紫色因為明度距離較大，不會發(fā)生刺眼的作用，因而黃色與紫色的比照調配方式也經(jīng)常被用到。

　　純度比照

　　運用純度比照的優(yōu)點是，讓頁面分清主次。若將比較重要的元素設置為純度較高的色彩，則能夠被人優(yōu)先留意到。

　　在純色調配中，純度比照越弱，畫面沖擊力也越弱，畫面作用較溫文，適合長期和近距離觀看；純度比照越強，畫面越明朗富有生氣，畫面表達越直觀。

　　明度比照

　　明度比照是指色彩的明暗程度的比照，也指色彩的黑白灰的比照。在心理學中，明度比照也稱明暗比照或亮度比照。物體受不同明度布景的影響，能夠發(fā)生不同的視覺感觸。灰色卡在白色布景下感覺變暗。在黑色布景下，感覺變亮了。

　　在明度比照中，黑色和白色是最強的比照組合，而黑色與深灰色、白色與淺灰色是較弱的比照組合。在同一色相、同一純度的色彩中混入的黑色越多，明度就越低；在同一色相、同一純度的色彩中混入的白色越多，明度就越高。利用明度比照，可展示出色彩的前后空間感、畫面的層次感、體積感等。

　　明度比照合理，能夠讓信息層級展示更明晰和直觀，提高用戶的閱讀功率和愉悅感。

　　視覺設計心理學，明度越低的物體越往后，明度越高的物體越靠前。在進行界面設計時，一般不能將深色卡片懸浮在淺色布景上，不契合用戶的視覺體會設計習氣。

　　面積比照

　　藍色和黃色 1:1 的調配，視覺感官不舒暢。但是大面積的藍色調配一點黃色，就會有不錯的視覺作用。

　　色彩調配時，調整出合理的色彩面積比。色彩上的層次感，添加了節(jié)奏感，給用戶帶來畫面的視覺沖擊感。

　　界面設計中的用色，運用精約設計的風格，文字運用無五顏六色，要點的按鈕等運用有五顏六色設計。

　　配色時，只需求側重考慮-不同色相的面積比照就能夠了。

　　色彩的性情

　　冷色與暖色的運用

　　在界面設計中，冷色會讓用戶發(fā)生安靜、安全、高科技的感觸，因而在人工智能和交際類產(chǎn)品的界面設計中較常用。暖色會讓用戶發(fā)生活潑、喜慶、美食的感觸，因而在美食類、母嬰類等產(chǎn)品界面設計中常用。電商類 App界面 中運用的暖橙色給界面營建出一種活潑、生動和歡樂的視覺氣氛。東西類 App 界面中運用的藍色給界面營建出一種鎮(zhèn)定的視覺氣氛感，是一種配色的設計規(guī)則。

　　不同色彩賦予產(chǎn)品的不同性情

　　（1） 白色的運用

　　白色代表著純真、神圣、信賴和安靜、樸素、典雅，是一種充溢純真的色彩。白色被稱為無五顏六色，它與任何色彩進行和諧的調配。

　　（2）藍色的運用

　　藍色代表著寬廣的天空、鎮(zhèn)定、誠實、期望與科技、視覺上很舒暢的色彩。藍色給人自在和安靜的感覺。在科技資訊、職場等類別的產(chǎn)品界面設計中運用較多，如：36Kr、釘釘 等東西類產(chǎn)品。

　　（3）赤色的運用

　　赤色標志著熱心、喜慶、自信、斗志、能量，是一種充溢能量的色彩，在電商類、新聞資訊類等需求營建活潑氣氛的產(chǎn)品界面較常運用。

　　（4）橙色的運用

　　橙色給人感覺很親切、很有生機。橙色有添加食欲和激發(fā)消費愿望的作用，橙色代表著溫暖、陽光、健康、歡樂，因而在社會服務類、電商類的產(chǎn)品界面設計中較常運用，如淘寶產(chǎn)品、安全、滴滴出行、大眾點評等產(chǎn)品。

　　（5）黃色的運用

　　黃色代表著期望、溫暖、青春、生機和樂觀，明度高，是一種生機色彩。在旅游類或目標用戶為年輕人的產(chǎn)品界面設計中較常運用，如馬蜂窩、OFO 共享單車圖標、好好學習 等產(chǎn)品設計。

　　（6）綠色的運用

　　綠色代表著健康、安全、生命力、青春，給人一種充溢期望的溫文色彩。因而綠色強調安全感。如 拉勾 圖標、種子習氣、醫(yī)鹿等產(chǎn)品。

　　（7）紫色的運用

　　“紫色，標志高貴的色彩。略帶種憂郁而富有魅力的色彩，代表聲望、深入和典雅。中國傳統(tǒng)中紫色代表圣人，帝王之氣。如北京故宮又稱為“紫禁城”。這都是源于古代對北極星的崇拜。在西方，紫色亦代表顯貴，常成為貴族所愛用的色彩。這源于古羅馬帝國蒂爾人，常用的紫色染料僅供貴族穿著?！?/span>

　　界面設計中，紫色由溫暖的赤色和鎮(zhèn)定的藍色混合而成的色彩，是極佳的影響色。網(wǎng)頁運用紫色為主色彩，魅力十足，十分契合這個網(wǎng)頁設計的定位。