-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當前位置：首頁 > 創(chuàng)意學院 > 空間設(shè)計 > 專題列表 > 正文
暖色調(diào)：紅色、橙色、黃色；
冷色調(diào)：青色、藍色；
中性色調(diào)：紫色和綠色相對中性色調(diào)。
互補色是色相環(huán)中呈180度角的兩種顏色，如紅色與綠色、藍色與橙色、黃色與紫色等?；パa色能補充色彩情感表達的缺失感，調(diào)節(jié)互補色的明度和飽和度能改變情感的走向。
同類色是同一色相中不同傾向的系列顏色，如黃色系里的橘黃色、中黃、淡黃色等顏色。色相環(huán)內(nèi)是15°以內(nèi)。
對比色是色相環(huán)中呈120度至150度的任意兩種顏色，如紅色與藍色等。
內(nèi)容呈現(xiàn)；
應用場景與信息層級優(yōu)化；
設(shè)計的排版；
色彩與細節(jié)的設(shè)計。
- 色彩是一個平衡的鏡頭，透過它我們體驗自然與數(shù)碼的實境，活珊瑚橘色尤其如此。消費者渴望人際互動與社交關(guān)系，歡樂的活珊瑚橘呈現(xiàn)出人性化、振奮人心的特質(zhì)，打動人們的心弦。
系統(tǒng)級色彩體系主要定義了螞蟻中臺設(shè)計中的基礎(chǔ)色板、中性色板和數(shù)據(jù)可視化色板。
產(chǎn)品級色彩體系則是在具體設(shè)計過程中，基于系統(tǒng)色彩進一步定義符合產(chǎn)品調(diào)性以及功能訴求的顏色。
UI設(shè)計三要素（ui設(shè)計三大原則）_1
發(fā)布時間：2023-04-28 01:10:02
稿源：
創(chuàng)意嶺 閱讀：
289
大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于UI設(shè)計三要素的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務客戶遍布全國，設(shè)計相關(guān)業(yè)務請撥打175-8598-2043，或微信：1454722008
本文目錄:
計三要素（ui設(shè)計三大原則）.jpg)
一、web前端開發(fā)技術(shù)三要素的含義和功能
web前端開發(fā)技術(shù)包括三個要素：HTML、CSS和JavaScript，想要系統(tǒng)學習web前端開發(fā)技術(shù)可以去千鋒教育，教學水平高，保障每位學子學到真才實學。
HTML、CSS、JavaScript這三個是前端開發(fā)中最基本也是最必須的三個技能。前端的開發(fā)中，在頁面的布局時， HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現(xiàn)相應的效果和交互。雖然表面看起來很簡單，但這里面需要掌握的東西絕對不會少。在進行開發(fā)前，需要對這些概念弄清楚、弄明白，這樣在開發(fā)的過程中才會得心應手。
想要了解更多有關(guān)web前端的相關(guān)信息，推薦咨詢千鋒教育。千鋒教育成立教研學科中心，推出貼近企業(yè)需求的線下技能培訓課程。課程包含HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python人工智能+數(shù)據(jù)分析培訓、全鏈路UI/UE設(shè)計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、網(wǎng)絡安全培訓、區(qū)塊鏈培訓、影視剪輯包裝培訓、游戲原畫培訓、全媒體運營培訓。采用全程面授高品質(zhì)、高體驗培養(yǎng)模式，非常值得選擇。
二、ui設(shè)計學出來好嗎，在重慶哪里學好呢？
學設(shè)計不如學【視頻剪輯】。理由很簡單，容易學（不像其它行業(yè)學習成本高，難度大），適合短期3-4個月短期學習，而且行業(yè)缺口非常大，無論是找工作還是自己在家里接私單，月收入輕松過萬，兩三萬也是稀松平常?！军c擊進入】免費“短視頻剪輯后期”學習網(wǎng)址：
www.huixueba.net/web/AppWebClient/AllCourseAndResourcePage?type=1&tagid=313&zdhhr-11y17r-1368478978262353939
因為現(xiàn)在【短視頻】的崛起，任何企業(yè)，任何工作室或者個人都需要制作剪輯大量的短視頻來包裝品牌，發(fā)抖音，發(fā)朋友圈，發(fā)淘寶等自媒體渠道做展示。因為每天都要更新并發(fā)布新內(nèi)容，所以剪輯師根本招不夠，，供需失衡就造成了剪輯師高薪水。
而且剪輯這個技術(shù)并不需要高超的電腦技術(shù)，也不需要美術(shù)音樂造詣，基本都是固定套路，要什么風格的片要什么節(jié)奏，經(jīng)過三四個月的培訓都可以輕松掌握。但凡有點電腦基礎(chǔ)會用鼠標拖拽，會點擊圖標，會保存除非自己不想學，沒有學不會的。但是要學好學精，就一定要找專業(yè)負責的培訓機構(gòu)了，推薦這個領(lǐng)域的老大——【王氏教育】
在“短視頻剪輯/短視頻運營/視頻特效”處理這塊，【王氏教育】是國內(nèi)的老大，每個城市都是總部直營校區(qū)。跟很多其它同類型大機構(gòu)不一樣的是：王氏教育每個校區(qū)都是實體面授，老師是手把手教，而且有專門的班主任從早盯到晚，爆肝式的學習模式，提升會很快，特別適合0基礎(chǔ)的學生。王氏教育全國直營校區(qū)面授課程試聽【復制后面鏈接在瀏覽器也可打開】： www.huixueba.com.cn/school/yingshi?type=2&zdhhr-11y17r-1368478978262353939
大家可以先把【繪學霸】APP下載到自己手機，方便碎片時間學習——繪學霸APP下載： www.huixueba.com.cn/Scripts/download.html
三、色彩知識系列——色彩三要素
隨著生活水平的提高，我們對生活中美的追求也越來越高。
隨著經(jīng)濟的發(fā)展，各行業(yè)都誕生了專業(yè)的設(shè)計師，例如UI設(shè)計師、平面設(shè)計師、室內(nèi)設(shè)計師等。各行業(yè)的設(shè)計工作都有一項基礎(chǔ)的硬技能，而這個技能正是辨別設(shè)計師水平高低的辦法之一。
它就是——色彩。
所以今天開始向各位設(shè)計師小伙伴系統(tǒng)的分享一些色彩方面的專業(yè)知識。也期望能幫助到剛進入設(shè)計行業(yè)的同學系統(tǒng)的提升自己的色彩能力。
色彩是人腦識別反射光的強弱和不同波長所產(chǎn)生的差異感覺，生活中看到的所有“色彩”都不是物體本身的顏色，并且人類肉眼所能看見的光只是光譜中的很小一部分，人類所能感知的色彩稱為“可見光”，可見光是電磁波譜中人眼可以感知的部分，一般在380納米到780納米波長范圍內(nèi)，包括從紫色到紅色的所有色彩的光。不少生物能看見的光波范圍和人類不一樣，例如蜜蜂能看到紫外線波段，便于尋找花蜜。
以下說的色彩的概念是人眼可感知的”可見光“。
色彩大體上可以分為“有彩色”（擁有色彩三屬性的全部色彩）和“無彩色”（指黑、白和各種明度的灰色，這三種色彩沒有色相和純度屬性）兩類。
色彩三屬性：色相、明度、純度。
色相：顏色的相貌，是顏色間彼此區(qū)分的明顯特征。指物理學或心理學上能區(qū)別的基本顏色“紅、橙、黃、綠、青、藍、紫”，黑白灰沒有色相屬性。
色相帶給人的感受大體分為三種：冷色系（藍色、藍綠色等）、暖色系（紅色、橙色、黃色等）、中間色系（紫色系和綠色系），中間色基本上不能單獨營造冷暖印象。
明度：色彩的明亮程度，添加白色會使明度升高，添加黑色則使明度下降。明度也是決定文字可讀性和物體外觀的重要元素。明度分為兩種：1.相同色相的不同明度 2.不同色相的不同明度。
在有彩色中明度最高的是黃色，明度最低的是紫色。明度越高，色彩越白越亮，反之則越暗。
純度：又稱色彩的飽和程度或鮮艷程度，色彩的純度越高，顏色越鮮艷，就更容易形成強勁有力、充滿朝氣的印象，而純度越低，顏色越蒼白，就更容易形成成熟、穩(wěn)重的印象。
總結(jié)一下，這次主要講了色彩三要素：色相、明度、純度的概念，以及他們之間變化時對色彩的影響。
四、三原色與三間色換一副四季主題作品？
編輯導語：一款好的產(chǎn)品不止需要隨著市場背景和用戶需求進行更新迭代，符合產(chǎn)品定位、美觀且舒適的產(chǎn)品設(shè)計也尤為重要。而對產(chǎn)品設(shè)計的色彩把握可能便是設(shè)計的基礎(chǔ)之一。本篇文章里，作者就對產(chǎn)品設(shè)計中的色彩運用進行了詳細的介紹和梳理，相信讀完之后會對你有所幫助。
一幅優(yōu)秀作品，用對顏色、顏色用好，提升品質(zhì)感。
界面設(shè)計中，色彩的搭配比例，使得界面信息層級準確，方便用戶閱讀。
一、色彩的基礎(chǔ)知識
配色、排版、字體是視覺設(shè)計中重要的三大因素。三個因素都可以影響到視覺設(shè)計的呈現(xiàn)。
在設(shè)計中，色彩是整個畫面中最能影響用戶體驗情感的元素之一，一起來體驗色彩的世界。
1. 色彩的基本知識
在設(shè)計與繪畫藝術(shù)中，將冷暖色分為三種色調(diào)：
冷暖色
在設(shè)計中的應注意其比例、輕重、色環(huán)的位置，最后的視覺呈現(xiàn)要符合人們視覺上和心理上的舒適感。
冷色會讓人想到大海、冰雪等，讓人產(chǎn)生廣闊、平靜、冷的感覺；暖色則會讓人聯(lián)想到太陽、篝火等，讓人產(chǎn)生了溫暖、熱情的感覺。
三原色
傳統(tǒng)美術(shù)色彩的三原色是：紅，黃，藍。簡稱 RGB，R（紅Red）、G（綠Green）、B（藍Blue）。原色的色彩純度最高、最純凈，也最鮮艷，可以調(diào)配出絕大多數(shù)色彩，是一種加色模型。而其他顏色則不能調(diào)配出三原色。
間色是兩種原色配合成的顏色。如紅和黃配合成的橙色，黃和藍配合成的綠色，紅和藍配合成的紫色。
橙、綠、紫三種顏色又叫“三間色”。
復色是用原色與間色相調(diào)或用間色與間色相調(diào)而成的”三次色”。
復色是最豐富的色彩家族。復色包括了除原色和間色以外的所有顏色。因含有三原色，所以含有黑色成分，純度低，復色種類繁多，千變?nèi)f化。比如：紅色和紫色混合而成紫紅色，黃色和橙色混合而成得到橙黃色。
互補色/同類色/對比色
互補色、同類色與對比色，如下圖所示。
冷色/暖色/無彩色
冷暖色(Cool/Cold & Warm colour) 指色彩心理上的冷熱感覺。
色彩的冷暖感覺又被稱為冷暖屬性。色彩的冷暖感覺是相對的，色彩的冷暖感覺都是相對存在的。比如說紫色和黃色，紫色中的紅紫色較暖，而藍紫色則較冷。
無彩色（achromatic color）指除了彩色以外的其它顏色，常見的有黑、白、灰。明度從0變化到100，而飽和度很小接近于0。
無彩色是指金、銀、黑、白、灰。試將純黑逐漸加白，使其由黑、深灰、中灰、淺灰直到純白，分為11個階梯，成為明度漸變，做成一個明度色標（也可用于有彩色系），凡明度在0°～3°的色彩稱為低調(diào)色，4°～6°的色彩稱為中調(diào)色，7°～10°的色彩稱為高調(diào)色。
暖色和冷色的視覺感受，如下圖所示。
色彩三要素：色相/純度/明度
色相是指不同的顏色的相貌，與亮度、飽和度無關(guān)。在通常的使用中，色相由顏色的名稱標識，如紅色、橙色或綠色等色相。
純度通常是指色彩的鮮艷的飽和程度。色彩含有色成分的比例越大，則純度越高。含有色成分的比例越小，純度越低。當一種顏色摻入白色時，純度就會降低。
明度是指色彩的明暗程度。
同一顏色在強光照射下顯得較明亮，而在弱光照射下顯得較灰暗、模糊。針對同一種顏色，深入不同的黑色或白色后，會產(chǎn)生不同的明暗層次感。
黃色明度最高，藍紫色明度最低，紅色和綠色的明度中等。同時，一般純度發(fā)生改變時，明度也會隨之改變。
色相、純度和明度。如下圖所示。
2. 色彩在界面設(shè)計中的作用
彩色文字會告訴用戶可以點擊的文字鏈接，而灰色的按鈕則會讓用戶認為此按鈕不可點擊。
1）整體思考色彩在設(shè)計中的構(gòu)成元素
圖形化用戶界面，用戶在看到一個界面時，是一個由背景色、矩形按鈕及圖標ICON 設(shè)計、卡片等設(shè)計元素構(gòu)成的。在設(shè)計界面時，借助色彩可以直觀的展示背景色、導航欄、狀態(tài)欄和操作按鈕等構(gòu)成的設(shè)計元素，并讓產(chǎn)品設(shè)計的界面的邏輯架構(gòu)和信息層級得到很好地展現(xiàn)。
如圖所示，明確的模塊內(nèi)容和色彩，可以讓用戶更好地閱讀內(nèi)容，同時信息層級明確、排版都會很不錯。
2）明確視覺層級關(guān)系
產(chǎn)品界面設(shè)計中，不同的內(nèi)容應該呈現(xiàn)出不同的層級關(guān)系。例如，任務與背包間的同級關(guān)系，螞蟻森林與內(nèi)容間的叢屬關(guān)系等。
利用同色系、色彩之間的色相差異可非常直觀的區(qū)分內(nèi)容的層級關(guān)系，同時還可以通過色彩間的強對比突出關(guān)鍵內(nèi)容。
如圖所示，螞蟻森林通過色彩的強弱區(qū)分視覺層級，綠色在視覺上層級最高，重要按鈕與文字使用綠色，可以讓畫面內(nèi)容的層級關(guān)系更清晰明確。
3）突出產(chǎn)品風格
色彩的搭配可以直接反映出這種產(chǎn)品的風格和產(chǎn)品屬性。
例如，金融類App 界面中常用的藍色，工具類App 界面中常用的藍色等。
如圖所示。左邊金融App界面中的藍色與右邊美團買菜App界面中的多色圖標的設(shè)計，都是通過色彩來營造產(chǎn)品氛圍的，提升用戶體驗設(shè)計感，展示產(chǎn)品設(shè)計中的功能。
3. 色彩的對比
在界面設(shè)計中，色彩的對比形式豐富多彩。
1）色相對比
同類色對比
使用同類色對比的優(yōu)點是，可以營造出和諧統(tǒng)一的界面效果。
在界面設(shè)計中，一些品牌格調(diào)比較鮮明的產(chǎn)品一般都使用同類色對比。
如下圖所示，產(chǎn)品設(shè)計的界面效果，整個界面基本貫穿使用了綠色這一種色相，并且僅通過調(diào)整綠色的明度和純度來適應不同的場景需求，產(chǎn)品格調(diào)令人記憶深刻。
互補色對比
使用互補色對比的優(yōu)點是，可以讓畫面更具張力，營造出視覺上的反差，吸引用戶關(guān)注。
常見的互補色有紅色與綠色、黃色與紫色、以及橙色與藍色等。
因此，在使用互補色對比時，設(shè)計師通常需要遵循大調(diào)和、小對比的原則，即將一種顏色大面積使用，然后將其對比色局部使用。
同時，將明度相同、彩度很高的等量互補色搭配在一起，可以使界面看起來鮮明，如紅色配綠色等。
黃色與紫色由于明度差距較大，不會產(chǎn)生刺眼的效果，因此黃色與紫色的對比搭配方式也經(jīng)常被用到。
如圖所示，App的界面設(shè)計的效果，在主色為紫色的情況下，將一些按鈕設(shè)置為黃色，可以提升按鈕的視覺層級，增強用戶的點擊欲望。
2）純度對比
使用純度對比的優(yōu)點是，讓頁面分清主次。若將比較重要的元素設(shè)置為純度較高的顏色，則可以被人優(yōu)先注意到。
如圖所示為，不同純度下 “小米金融” App設(shè)計，品類區(qū)的圖標設(shè)計效果的對比。圖標的顏色純度都較高，界面信息層級都很明確。
在純色搭配中，純度對比越弱，畫面沖擊力也越弱，畫面效果較溫和，適合長時間和近距離觀看；純度對比越強，畫面越明朗富有生氣，畫面表達越直觀。
如圖所示為：純度強對比在插畫中的應用效果。通過純度的強對比表現(xiàn)，可以強化畫面視覺的前后關(guān)系和主次關(guān)系，平衡畫面的視覺感受，突出主體物的表達。
3）明度對比
明度對比是指色彩的明暗程度的對比，也指色彩的黑白灰的對比。在心理學中，明度對比也稱明暗對比或亮度對比。物體受不同明度背景的影響，可以產(chǎn)生不同的視覺感受。灰色卡在白色背景下感覺變暗。在黑色背景下，感覺變亮了。
在明度對比中，黑色和白色是最強的對比組合，而黑色與深灰色、白色與淺灰色是較弱的對比組合。
在同一色相、同一純度的顏色中混入的黑色越多，明度就越低；在同一色相、同一純度的顏色中混入的白色越多，明度就越高。利用明度對比，可展現(xiàn)出色彩的前后空間感、畫面的層次感、體積感等。
明度對比越強，光感越強，界面的表達越明確主題。如下圖所示。
明度對比合理，可以讓信息層級展現(xiàn)更清晰和直觀，提升用戶的閱讀效率和愉悅感。
視覺設(shè)計心理學，明度越低的物體越往后，明度越高的物體越靠前。在進行界面設(shè)計時，一般不能將深色卡片懸浮在淺色背景上，不符合用戶的視覺體驗設(shè)計習慣。
如圖所示，將白色卡片放在灰色背景上時，會感覺到灰色背景上的白色卡片，界面層次感很明確；微信讀書的白色卡片的內(nèi)容在界面上屬于最高層級，而灰色背景給人以后退的感覺。
4）面積對比
藍色和黃色 1:1 的搭配，視覺感官不舒服。但是大面積的藍色搭配一點黃色，就會有不錯的視覺效果。
色彩搭配時，調(diào)整出合理的色彩面積比。色彩上的層次感，增加了節(jié)奏感，給用戶帶來畫面的視覺沖擊感。
如圖所示，左邊界面背景顏色中，藍色面積占比比較大，主色調(diào)明顯，黃色為輔助色，界面視覺較和諧舒適感。
界面設(shè)計中的用色，運用簡約設(shè)計的風格，文字運用無彩色，重點的按鈕等運用有彩色設(shè)計。
配色時，只需要著重考慮不同色相的面積對比就可以了。例如：導航欄的面積較大，會用到品牌主題色。
4. 色彩的性格
1）冷色與暖色的運用
在界面設(shè)計中，冷色會讓用戶產(chǎn)生平靜、安全、高科技的感受，因此在人工智能和社交類產(chǎn)品的界面設(shè)計中較常用。暖色會讓用戶產(chǎn)生積極、喜慶、美食的感受，因此在美食類、母嬰類等產(chǎn)品界面設(shè)計中常用。
電商類App界面中使用的暖橙色給界面營造出一種積極、活潑和歡樂的視覺氛圍。
工具類App 界面中使用的藍色給界面營造出一種冷靜的視覺氛圍感，是一種配色的設(shè)計規(guī)律。
2）不同色彩賦予產(chǎn)品的不同性格
白色的運用
白色代表著純潔、神圣、信任和安靜、樸素、雅致，是一種充滿純凈的顏色。白色被稱為無彩色，它與任何色彩進行和諧的搭配。大多數(shù)的背景使用的是純粹的白色，如下圖所示。
藍色的運用
藍色代表著廣闊的天空、冷靜、誠實、希望與科技、視覺上很舒服的色彩。藍色給人自由和平靜的感覺。在科技資訊、職場等類別的產(chǎn)品界面設(shè)計中使用較多，如：36Kr、釘釘?shù)裙ぞ哳惍a(chǎn)品，如下圖所示。
紅色的運用
紅色象征著熱情、喜慶、自信、斗志、能量，是一種充滿能量的顏色，在電商類、新聞資訊類等需要營造活躍氛圍的產(chǎn)品界面較常使用，如圖所示。
橙色的運用
橙色給人感覺很親切、很有活力。橙色有增加食欲和激發(fā)消費欲望的作用，橙色代表著溫暖、陽光、健康、歡樂，因此在社會服務類、電商類的產(chǎn)品界面設(shè)計中較常使用，如淘寶產(chǎn)品、平安、滴滴出行、大眾點評等產(chǎn)品。如圖所示。
黃色的運用
黃色代表著希望、溫暖、青春、活力和樂觀，明度高，是一種活力顏色。在旅游類或目標用戶為年輕人的產(chǎn)品界面設(shè)計中較常使用，如馬蜂窩、OFO 共享單車圖標、好好學習等產(chǎn)品設(shè)計，如圖所示。
綠色的運用
綠色代表著健康、安全、生命力、青春，給人一種充滿希望的溫和色彩。因此綠色強調(diào)安全感。如拉勾圖標、種子習慣、醫(yī)鹿等產(chǎn)品，如圖所示。
紫色的運用
“紫色，象征高貴的顏色。略帶種憂郁而富有魅力的色彩，代表聲望、深刻和高雅。
中國傳統(tǒng)中紫色代表圣人，帝王之氣。如北京故宮又稱為“紫禁城”。這都是源于古代對北極星的崇拜。
在西方，紫色亦代表尊貴，常成為貴族所愛用的顏色。這源于古羅馬帝國蒂爾人，常用的紫色染料僅供貴族穿著。
界面設(shè)計中，紫色由溫暖的紅色和冷靜的藍色混合而成的顏色，是極佳的刺激色。網(wǎng)頁運用紫色為主色調(diào)，魅力十足，非常符合這個網(wǎng)頁設(shè)計的定位。
5. 色彩的重量
1）色彩的重量
一般由明度決定，明度較高的顏色的給人較輕的感覺，明度較低的顏色給人以重的感覺。
美國心理學家戴爾·卡耐基 教授，經(jīng)過多種復雜的實驗后得出結(jié)論；各種顏色在人的大腦里代表一定的重量，并且由重到輕可排列成黑、紅、紫、綠、黃、白。
在界面設(shè)計中，針對一些含有較多圖片的界面，其導航欄就可以使用淺色。
如圖所示，B站視頻App的界面 由于含有大量圖片，因此其他控件的顏色就會淡雅了很多。
2）不同色彩的應用場景
色彩搭配原則：6：3：1的設(shè)計原則，主色、輔助色、點綴色在界面設(shè)計中的應用。有彩色一般被應用在按鈕、圖標等提示性的元素上，而無彩色一般應用在字體上、分割線和背景色上。
主題品牌色的使用
主題品牌色是一款產(chǎn)品給用戶留下的第一印象的顏色。針對產(chǎn)品的主圖標、標題欄、底部導航按鈕，產(chǎn)品標簽和標簽文字等需要色相呈現(xiàn)的控件上，主題色占60%左右。
如圖所示，京東金融App的設(shè)計，其主題品牌色為紅色，并且應用在按鈕、底部導航按鈕和選中狀態(tài)的文字。
輔助色的使用
當界面中需要被提示的內(nèi)容不止一種時，就可以用輔助色加以區(qū)分。當界面中主題色占比過大，需要使用輔助色讓視覺達到平衡。輔助色與主題色的色相差距通常不會太大，并且在產(chǎn)品中用色不超過30%。
如下圖所示，作業(yè)幫App界面，品牌主色在滾動符等圖標、卡片上有所區(qū)分時，輔助色青綠色、黃色等可以更好地展示品類區(qū)的功能圖標等。
點綴色的使用
點綴色的出現(xiàn)可以滿足主題色與輔助色滿足不了的視覺要求。 點綴色可以起到平衡畫面冷暖的作用。與此同時，由于點綴色與主題色一般色相差距較大，因此點綴色通常出現(xiàn)的頻率較低，并且占據(jù)產(chǎn)品內(nèi)有彩色的比例一般不會超過 10%。
補充一下，界面設(shè)計的操作順序：
二、UI 界面設(shè)計色彩的運用技巧
色彩對于人的大腦的沖擊力大于造型。比如淘寶，我們會記憶起淘寶的主色是橙色。
色彩是影響人類視覺思維的重要因素，色彩能直觀地體現(xiàn)產(chǎn)品的性格和氣質(zhì)，運用好色彩對UI設(shè)計師很重要。
1）色調(diào)一致
互聯(lián)網(wǎng)App設(shè)計，色調(diào)一般由主色、輔助色、點綴色為基準來搭配的。一致性的色調(diào)界面設(shè)計，能給用戶始終如一的視覺體驗。
2）60-30-10原則
空間色彩設(shè)計的搭配原則一般是3種，界面中60%是主色，可以運用到導航欄、按鈕、圖標、標題等關(guān)鍵元素中，使之成為整個App的視覺焦點和色彩聯(lián)系；30%為輔助色，可以避免界面單一的主色而單調(diào)；10%為點綴色，用在一些不太重要的元素。
色彩層次、鄰近色的應用，讓界面看上去和諧和平衡。360金融將綠色的主色運用到導航欄、圖標和插畫上，黃色的輔助色運用到按鈕上，主次關(guān)系處理的非常清晰明確。
3）遵循色彩心理學
色彩對于人類的情緒和行為的影響，紅色讓人聯(lián)想到生命、熱情、自信、力量。綠色讓人聯(lián)想到健康、生命、青春、自然，藍色會讓人聯(lián)想到科技、未來。了解到色彩心理學知識，有助于我們在進行App設(shè)計時提供依據(jù)。
例如： 網(wǎng)頁使用藍色作為主色，傳遞給一種年輕、親切、感性的色調(diào)感。
4）從大自然中獲得靈感
大自然擁有世界上最美麗的風景，藍色的天空、紅色的朝霞、金黃的麥穗，還有姹紫嫣紅的花朵。提取色彩運用到設(shè)計中，完美的搭配呈現(xiàn)出來的和諧的美感，就能瞬間打動人心。
5）良好的可讀性
一個有著好的可讀性的界面設(shè)計為用戶提供主次分明、層次清晰的內(nèi)容瀏覽。確保界面瀏覽的可讀性，需要界面設(shè)計中色彩搭配的對比，例如在淺色背景上使用深色文字，在深色背景上使用淺色文字。
蝦米音樂的主要功能入口、標簽欄圖標、按鈕都使用了高純度的橙色，與界面中的灰色文字形成很好的對比，提升了界面中內(nèi)容的易讀性。列表中，圖標和文字組合讓用戶瀏覽直觀和高效。
6）控制色彩數(shù)量
色彩影響著用戶的情緒和行為，講究主次之分和情緒影響用戶的想法。
設(shè)計中流傳著：色不過三。即在一個界面中不要使用超過 3 種顏色搭配，可以有主色、輔助色、點綴色。
色彩本身，可以調(diào)整出三種色彩的飽和度、明度的變化用來搭配更豐富的色彩。比如：ANT DESIGN，文章中第四部分會談到。
7）色彩運用盡量不使用純黑色和純灰色
黑白強烈的對比，會讓用戶感覺很生硬。但是在白色上加上一點藍色等色調(diào)的色彩，那就感覺畫面很通透。
感受黑白無彩色之外的插畫色彩的魅力價值，插畫更好的觸動人內(nèi)心的感受，滿足人性的情感需求的插畫。
和諧的色彩搭配，讓界面看上去生動、和諧。
8）柔和集中的配色
從用戶的心理學角度思考，界面可以選擇使用一些柔和的色彩，調(diào)整其色相、飽和度、明度就能搭配出和諧的色彩。比如：首頁核心功能圖標，使用了不同的色彩，呈現(xiàn)了產(chǎn)品設(shè)計的年輕感、時尚感、律動感。
多種色彩來搭配，又保證了整體色彩搭配的和諧、統(tǒng)一感。
9）背景色和白色卡片的色彩的對比
背景色為了襯托內(nèi)容，因此藍色的背景色，白色作為背景的對比色，區(qū)分畫面的視覺層次。
整個界面呈現(xiàn)出一種柔和的、舒適的色彩設(shè)計感。
10）漸變色的使用等優(yōu)秀配色案例設(shè)計拆解
大自然中有很多美麗的漸變色，比如晴空萬里的藍色漸變，大自然中提取美麗的漸變色彩，不要超過90度的漸變，畫面感比較和諧、有美感。
在APP設(shè)計中，常見的 UI 配色有，即單色搭配、鄰近色搭配、互補色搭配等色彩搭配。
單色搭配
單色搭配是指單一色系的搭配，它運用色彩的飽和度、明度而形成視覺的層次關(guān)系，將同一色彩貫穿App的始終，通常這個色彩來自品牌色。單色搭配的視覺風格，整體感好。因此呈現(xiàn)給用戶統(tǒng)一的感覺。
比如微信讀書的產(chǎn)品設(shè)計，主色應用在關(guān)鍵元素上看，帶給用戶友好的品質(zhì)體驗感。
鄰近色搭配
鄰近色搭配是由主色和鄰近色的色系組成的搭配，可以在同一個色調(diào)中構(gòu)建出豐富的視覺層次感和質(zhì)感。
例如：京東健康選擇與綠色臨近的黃色和藍色作為輔助色，賦予不同的功能含義，信息表達明確，和諧統(tǒng)一感很好，視覺上的趣味性，顏色的搭配顯得很柔和。
互補色搭配
互補色是由主色和其互補色的兩個色彩的搭配，該色彩可以為鄰近色，例如：藍色和黃色、橙色的搭配。
這種搭配既能保持互補色搭配強烈的對比度，區(qū)分關(guān)鍵信息，次要信息，又能增加視覺上的趣味性，色彩看上去豐富多彩。
例如：36 Kr 將藍色作為主色，互補色黃色作為輔助色應用在圖標、標簽上，再選擇黃色的鄰近色橙色作為另外一個輔助色，應用在不同的關(guān)鍵信息上，有助于用戶更好的閱讀產(chǎn)品的功能和內(nèi)容。
不同模式背景下的界面設(shè)計
用戶體驗中運用了夜間模式這功能，用戶喜歡深夜使用手機這種場景。比如：閱讀資訊類產(chǎn)品，金融產(chǎn)品等也會選擇夜晚進行閱讀和使用。
當需要沉浸式地專注工作內(nèi)容時，建議使用暗黑模式，可以幫助使用者更關(guān)注凸顯出來的內(nèi)容和操作。
比如：百度網(wǎng)盤的界面設(shè)計，白天和夜晚的使用場景很豐富，因此支持夜間模式很有必要，保證使用者的體驗上的舒適感。
和諧的漸變色，美麗舒服，畫面豐富，層次感好，可以應用到圖標設(shè)計上，導航背板上。
漸變色搭配的網(wǎng)站推薦：https://webgradients.com/
網(wǎng)站的特色不僅可以提供漂亮的漸變配色，而且還有更多格式選擇，比如 PSD、Sketch、PNG 以及可直接復制成一段 CSS 漸變代碼，設(shè)計師們就可以很方便的使用這個配色方案。
扁平化設(shè)計配色網(wǎng)站推薦：http://flatuicolors.com/
這個網(wǎng)站會定期更新一些扁平化設(shè)計中很受歡迎的色彩組合，里面的配色都很棒。
可生成一套色板的網(wǎng)站推薦：http://www.colorfavs.com/
上傳一張你最喜歡的圖片，然后根據(jù)這張圖片自動生成一套色板，非常具有實用性。
三、近兩年來的流行色欣賞
權(quán)威趨勢預測機構(gòu)WGSN發(fā)布了2020年春夏流行色。
萬物復蘇的春日，枝繁葉茂的夏季，如果要用一個顏色來形容這兩個季節(jié)，那么一定是綠色。
綠色代表著自然、清新、朝氣、蓬勃。
綠色是生命的顏色。而綠色大家族中的薄荷綠尤以小清新定位，個性獨特，辨識度極高。
追波的：Hydroponic Plant App，如下圖。
在移動端 UI 界面設(shè)計中，綠色在移動端產(chǎn)品設(shè)計的應用上。
近日，潘通發(fā)布了19年的流行色——樂觀和愉悅珊瑚橘。
Pantone 選出了這款極具生命力的 Living Coral——「活力珊瑚橘」 作為2019年的潘通年度流行色。
PANTONE 16-1546 活珊瑚，還代表了現(xiàn)代生活的融合，是自然環(huán)境中出現(xiàn)的一種滋養(yǎng)色，同時也在社交媒體中的生動呈現(xiàn)。
潘通色彩研究中心的執(zhí)行董事 Leatrice Eiseman 在聲明當中提到：
在移動端 UI 的界面設(shè)計中，橙色也是一種超級飽和、充滿活力的選擇，可以在任何社交媒體上流行——因為橙色是在自然界中發(fā)現(xiàn)的一種美麗的色彩。
四、阿里 ANT DESIGN的官網(wǎng)的配色學習
Ant Design 色彩體系解讀成兩個層面：系統(tǒng)級色彩體系和產(chǎn)品級色彩體系。
1. 系統(tǒng)級色彩體系
Ant Design 系統(tǒng)級色彩體系同樣源于「自然」的設(shè)計價值觀。設(shè)計師通過對自然場景的抽象捕捉，結(jié)合螞蟻的技術(shù)基因，形成了特有的 12 色。
進一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規(guī)律，借助美術(shù)中素描的思路，對 12 個顏色進行了衍生。
在中性色板的定義上，則是平衡了可讀性、美感以及可用性得出來的。
1）基礎(chǔ)色板
Ant Design 的基礎(chǔ)色板共計 120 個顏色，包含 12 個主色以及衍生色。這些顏色基本可以滿足中后臺設(shè)計中對于顏色的需求。
Ant Design 的色板還具備進一步拓展的能力。經(jīng)過設(shè)計師和程序員的精心調(diào)制，結(jié)合了色彩自然變化的規(guī)律，我們得出了一套色彩生成工具，當有進一步色彩設(shè)計需求時，設(shè)計者只需按照一定規(guī)則，定義好主色，便可以自動獲得一系列完整的衍生色。
2）中性色板
中性色包含了黑、白、灰。在螞蟻中后臺的網(wǎng)頁設(shè)計中被大量使用到，合理地選擇中性色能夠令頁面信息具備良好的主次關(guān)系，助力閱讀體驗。Ant Design 的中性色板一共包含了從白到黑的 13 個顏色。
2. 產(chǎn)品級色彩體系
品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一。
在色彩選取時，需要先明確品牌色在界面中的使用場景及范圍。在基礎(chǔ)色板中選擇主色，我們建議選擇色板從淺至深的第六個顏色作為主色。
Ant Design 的品牌色取自基礎(chǔ)色板的藍色，應用場景包括：關(guān)鍵行動點、操作狀態(tài)、重要信息高亮、圖形化等場景。
功能色代表了明確的信息以及狀態(tài)，比如成功、出錯、失敗、提醒、鏈接等。
功能色的選取需要遵守用戶對色彩的基本認知。
我們建議在一套產(chǎn)品體系下，功能色盡量保持一致。Ant Design 的功能色板如圖：
Ant Design 的中性色主要被大量的應用在界面的文字部分，此外背景、邊框、分割線、等場景中也非常常見。產(chǎn)品中性色的定義需要考慮深色背景以及淺色背景的差異，同時結(jié)合 WCAG 2.0 標準。
Ant Design 的中性色在落地的時候是按照透明度的方式實現(xiàn)的，具體色板如圖：
3. 企業(yè)級產(chǎn)品設(shè)計中的色彩應用
色彩在使用時更多的是基于信息傳遞、操作引導和交互反饋等目的。理性的選擇顏色是關(guān)鍵。
企業(yè)級產(chǎn)品設(shè)計體系，創(chuàng)造高效愉悅的工作體驗。
參考文獻和網(wǎng)址：
《規(guī)律與邏輯》
《進階版UI設(shè)計師》
《ANT DESIGN 官網(wǎng)》
《百度百科》等。
作者：峻溪POINTVISION
原文鏈接：https://www.zcool.com.cn/article/ZMTE5OTU0MA==.html
本文由 @峻溪POINTVISION 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議
以上就是關(guān)于UI設(shè)計三要素相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。
推薦閱讀：
贛公網(wǎng)安備 50019002502384號
