表單日常設計規范大致思路，增加對表單的認識~

全篇閱讀大概需要15min，對表單設計不熟悉的同學看完后肯定會有不少的收獲~~~

說到表單其實在生活中可以接觸到各種各樣的表單，主要目的就是讓用戶填寫來「收集用戶信息」。

初看這些表單，你可能覺得很簡單，就是一些標簽、非?；A的小組件，但是在實際業務中，想要將這些小組件組合拼裝成合適的表單卻需要推敲非常多的細節，常常會讓設計師陷入無限的糾結中，比如：

• 文字標簽是左對齊還是右對齊？
• 確定按鈕是放左邊還是右邊？
• 控件顆粒長度是整齊劃一還是與輸入預期一樣錯落有致？反饋內容怎么顯示……等等

所以針對這些問題，我從「框架」>「細節」的邏輯與大家一起探討「如何設計一份體驗好的表單」。

表單拆分

在UX Collective，作者Taras Bakusevych 進行了詳細的闡述，對表單的組成部分進行了詳細的拆解與說明 ↓ ↓ ↓

1. 標簽：

標簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項。

2. 占位提示：

直接展示在輸入項中，采用弱提示文本對所需信息描述、示意，當用戶輸入信息時即消失。

3. 校驗：

對輸入項進行驗證，并給出反饋提示，如：用戶未填寫，格式錯誤、內容錯誤等

△ 常見的校驗類型

4. 基礎組件：

可交互輸入的區域，是構成表單的核心內容，主要有：輸入框、單（復）選框、上傳、時間選擇器、開關……

5. 提示：

描述該輸入項需要的輸入類型，如：上傳的文件類型

 6. 按鈕：

用戶完成輸入后，點擊按鈕進行提交、進入下一步等，按鈕一般是跟隨的最后一個輸入項后面，若輸入項超出一屏顯示，則按鈕懸浮固定在底部；按鈕“確定”放左、右統一即可，沒必要過分糾結。

表單類型

看了很多文章，對表單類型的劃分主要是：基礎表單、分步表單、高級表單（分組表單）[1]

基礎表單：常見于輸入項較少的表單場景，如：登錄、注冊。

分步表單：常用于輸入項較多，業務本身具有流程化特性（如：轉賬）

為了提高用戶填寫效率，減少用戶心理負擔，將一個冗長或用戶不熟悉的表單任務拆分成多個步驟，一步步指導用戶完成。

分步表單可以緩解用戶需要填寫較多內容時候的抵觸情緒，并且通過拆分步驟，聚焦于每次填寫的內容，提升用戶在不同模塊間的瀏覽效率。

△ 來源：Ant Design Pro

高級表單（分組表單）：主要用于需要一次性輸入、提交大批量數據的場景。高級表單與分步表單有點類似，都是為了減輕用戶填寫壓力，將填寫內容進行分塊。不同的點在于，分步表單的流程化明顯，后一步填寫的內容都是基于前一步來填寫、是前一步反饋。

△ 站酷上傳作品

但是以上說的基礎表單、分步表單、高級表單都是基于業務需要而進行選擇，但是實際在設計時，往往還需要考慮的是：這些表單應該是以什么承載結構展示？

• 是整頁展示、彈窗展示、側邊欄展示？
• 表單內部布局方式，一定是平鋪的一欄么，是否可以增加側邊目錄？

這些都是設計師需要進行全盤考慮的問題，所以在設計表單的時候需要先確定這些框架，由外>內，層層深入，再對細節進行處理。所以接下來我會針對如何由外>內設計表單進行詳細的陳述。

表單頁設計步驟

在詳細闡述如何設計表單頁前，先明確下我對于表單頁的劃分 ↓ ↓ ↓

我將表單頁大體劃分成「頁面框架」和「表單內容區」

這樣劃分是出于我對 AJAX之父Jesse James Garrett在2007年出版了一本名為《用戶體驗要素》的書，提出了從5個要素自下而上的建設用戶體驗，即：戰略層、范圍層、結構層、框架層、表現層，這種逐層的思考邏輯對于設計表單是十分必要的，因為在設計表單的時候，常常需要考慮這個表單頁所需承載的業務訴求（戰略上）基礎上去做后面的優化體驗，所以在設計表單的時候應：明確該表單的業務類型，因為不同的業務訴求的表單在設計中的展現形式會有不同，即“頁面框架”會有不同（這也是我上面為何將表單頁分成頁面框架和表單內容區的原因）

在確定頁面框架后，就要對表單需展示的內容進行明確的劃分，如：表單的內容是否要展示流程進度？表單內容是否有不同層級的導航？確定了這些后，我們表單內容的大致布局框架就可以確定下來，我們才能進入下一步（內容區具體的陳列方式）的設計；

表單內容區主要是對輸入項的陳列方式，對齊方式，進行體驗優化；

最后對所有輸入項進行統一整理，檢查是否與用戶預期一致？與其他輸入項的關系是否清晰等。

整體而言可以分為以下四步：

STEP1：確定「頁面框架」

這里的頁面框架指的是承載著整個表單頁的頁面框架，即：整頁式（新頁面）、彈窗式、側邊欄式。因為其頁面面積大小不一樣，所以使用情境有所不同。[2]

整頁式：最常用方式，適用于絕大部分的表單，可以支持構建復雜的表單。

彈窗式：通過小面積的彈窗進行輕量化的編輯，方便快速進行增、刪、改、查；輸入項較少，一般不會有滾動條。

側邊欄式：與彈窗式相似，通過小面積的側邊欄進行編輯；可承載比彈窗更復雜一些的表單內容，可以有滾動條。

以上這些就是常見的表單頁面框架，我們在考慮采用何種樣式時需要綜合以下幾個因素考慮：

內容多少 —— 內容較多不適合使用彈窗式

與原頁面關系強度 —— 需與原頁面保留強關聯建議使用彈窗式、側邊欄式

表單內容區復雜程度 —— 一般高級表單、分組表單、分步驟表單、有表格聚合的表單、聯動表單等都建議采用整頁式的框架來展現。

STEP2：確定「表單內容區布局」

如上圖所示，一個正常的表單內容區主要有：標題區、二級導航區、主內容區

其中標題區是必須要有的，標題區可以讓用戶快速明白該表單是需要收集什么內容

二級導航可以根據業務需要進行配置

主內容區則是表單填寫的主區域，通常我們直接將這個區域稱之為“表單內容區”，該區域布局樣式可以分為三種：

• 通欄式，即：在頁面中居中顯示，從上到下直接平鋪控件顆粒。
• 左右式，即：在表單域內容區左邊放置導航欄、或在右側放置輔助信息欄（如：流程節點展示）。
• 左中右式，即：分別在表單域內容區左側放置導航欄，右側放置輔助信息欄。

以上三種樣式就是常見的表單內容區的布局，采用哪種布局，可以綜合以下幾個因素考慮：

內容多少——如果內容很多導致頁面很長，則可以考慮將內容分類，作為左側導航欄，采用左右式布局。

內容類型——導航作用內容必須放置左側（有些分步驟的表單也會將步驟條放置左側），而輔助信息的內容建議放在右側（因為人眼瀏覽習慣都是從 左 > 右，所以信息重要度建議按照該視線路徑放置）

STEP3：確定「表單內容排列方式」

在該步驟中，主要確定表單內容區控件顆粒的排列方式，單列布局 or 多列布局。

在輸入項不多的情況下，建議采用單列布局，因為單列布局，用戶填寫的路徑就是從上>下的一條直線，十分符合用戶的視覺動線，能夠提高用戶瀏覽與填寫的效率。

多列布局的表單會導致用戶的視覺路徑變長，用戶需以 Z 字形的視覺動線掃描表單，會提高瀏覽與填寫的效率，并且多列表單容易造成用戶填寫時的混亂，易填錯，體驗差。

但是有時部分業務訴求和某些特性的場景要求，會需要在有限的空間上放入更多的控件顆粒來收集用戶的信息，這時就不得不使用多列布局的樣式，因為多列能夠省縱向空間。

so 根據單列布局、多列布局的優劣勢，結合實際業務需要來選擇：

單列布局

• 優：視覺路徑清晰，填寫效率高，體驗好；
• 劣：占用縱向空間。

多列布局

• 優：省空間，能夠放置更多的控件顆粒；
• 劣：視覺路徑模糊，填寫成本高，填寫易出錯。

在這個環節中，除了需要考慮單列式布局還是多列式布局，還有一個也是需要全盤考慮的——標簽的對齊方式

在設計時，到底是采用左對齊、右對齊還是頂部對齊呢？

這篇文章有對標簽不同的方式優劣勢進行了說明。[3][4]

后續在這塊糾結的時候，則可以對照上面表格進行評估了，其中詳細原理你也可以點擊下方鏈接進行查看：UX Collective

STEP4：確定「表單內容顆粒」

最后一步只需要按照收集信息類型的需要，選擇正確的控件顆粒，如：如果是要收集用戶購買數量，則可以直接使用“數字步進器”、“輸入框”。

在選用控件顆粒時，需要注意的是：

• 選用的控件顆粒應是用戶可以最快輸入的，能點擊完成就別輸入完成
• 表單中同個信息類型的控件顆粒應統一
• 指意不明確的表單應搭配占位提示，占位提示應是完整的陳述句

重要信息的輸入項應該有錯誤提示校驗，這種一般用于錯誤率較高的情況，避免用戶反復填寫。如：在登錄注冊時，我們填寫手機號如果不滿11位數，就會報錯。

特定的輸入型顆?？丶枰鶕斎胄畔⒌奶厥庑越o與格式的提示與限制，如：郵箱 @http://qq.com，這樣有助于幫助用戶提前感知，減少表單填寫錯誤。

表單顆粒的寬度應該暗示填寫內容的長度，與輸入預期成正比，在Ant Design 4.0 系列分享的文章[5]分析結論是：

錯落有致的排版比整齊劃一更舒適，因為在視覺上我們更容易將下方有圖的空間和內容視為一個和諧的整體，但左圖過度的對齊導致暗示隱性的截斷，我們會感覺表單列右側空間缺了一大塊。

寫在最后

本篇文章從表單所在的頁面形式 > 表單框架 > 表單內容區逐層對表單進行剝離拆解，幫助大家更加全面的認知表單，并總結了日常工作中設計師常常會遇到的表單類型和布局，設計師可結合文章中給出的建議參考并靈活應用。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

編輯導讀：隨著5G技術的發展和AI的不斷進步，自動駕駛產業迎來了發展的快速時期。而車聯網作為自動駕駛產業鏈上的關鍵一環，吸引了包括百度阿里騰訊華為等巨頭的注意，紛紛投入資金和精力，希望在市場中搶占先機。本文作者總結車聯網2020年的發展，與你分享。

在5G應用加快落地、AI技術不斷進步之時，自動駕駛產業迎來了發展的快速時期。特別是在傳統汽車行業進入“新四化”的大趨勢中，車聯網更是成為自動駕駛產業鏈上的關鍵一環。

2020年“車聯網”作為汽車行業技術發展研究中的一個重要領域，已經成為國內外新一輪科技創新和產業發展的熱點?；仡櫿麄€2020年，國內車聯網領域的發展也是穩步向前。

01 商業落地：BAT加速“上車”，互聯生態量產車持續增長

近些年，在汽車產業“新四化”的推動下，“聯網化”已經被當成汽車真正成為智能化終端的基礎，并且據業內人士估算，車聯網技術如果得到充分應用，將能夠降低20%的能源消耗和25%～30%的尾氣排放；緩解60%的交通擁堵，提高現有道路通行能力2～3倍；減少80%的車輛事故率和30%～70%的死亡人數，其重要性不言而喻。

日前，IHSMarkit發布了的《2020年中國智能網聯市場發展趨勢報告》報告顯示，中國搭載智能網聯功能的汽車市場規模預計將在未來持續增長，并在2025年超過75%，高于全球水平。

也正因如此，車聯網已經成為這些年巨頭們在互聯網下半場競逐的主要賽道，從市場競爭方面來看，百度入局，多年時間在自動駕駛賽道殫精竭慮；阿里搶入其中，聯手上汽打造斑馬智行；騰訊當然也沒坐以待斃，更是打造出騰訊車聯、蘑菇車聯、梧桐車聯三張牌；在BAT之后，華為也不甘示弱，成立了智能汽車解決方案事業部，攜鴻蒙OS籌建自身朋友圈；今年車聯網賽道戰事再升級，京東、字節跳動也先后宣布加入混戰，至此巨頭云集的車聯網迎來“大割據時代”。

巨頭混戰同樣也在加速車聯網商業化進程，有專家表示“智能駕駛下的車聯網是未來，3到5年可以全面實現?！倍袌鰯祿瑯右苍谟∽C這一說法。

在《2020年中國智能網聯市場發展趨勢報告》中，公布了今年BAT車聯網系統的上車情況，具體來看，今年1-7月的新車銷量市場占比中，百度實際搭載新車銷量占比高達49%，騰訊占比35%，阿里占比16%。

而2020年全年當前市場搭載車型數量預估來看，百度預計將有61款搭載小度車載的車型上市，大大領先于阿里的32款及騰訊的26款，截止目前百度合作上市車型已超過600余款。

另外，在合作品牌方面，2020年也迎來了較大突破，BAT車聯網合作汽車品牌在今年都有所增加，截止今年8月，百度Apollo智能車聯已與奔馳、寶馬、奧迪、福特、別克、凱迪拉克、雷克薩斯、吉利、長城、奇瑞、現代、起亞等汽車品牌達成合作；阿里方面則有福特、斯柯達、名爵、榮威、觀致、寶駿等上汽品牌；騰訊合作方則有哈佛、吉利、長安、福特、奧迪、寶馬、Jeep、瑪莎拉蒂等品牌。

從品牌數量上能看出，依舊是百度遙遙領先，并且更大的優勢在于百度Apollo智能車聯不僅合作車企數量多，同時全面覆蓋各大車系。除了自主品牌外，與德系、美系、韓系、日系的眾多汽車品牌也在保持緊密合作，而這正是騰訊與阿里所缺乏的。

值得一提的是，在前不久的百度Apollo生態大會上百度提出了“領先一代”的概念和內容，其中“領先一代商業模式”就是重點之一，所謂領先一代商業模式是指，通過小度助手汽車版將為整成廠商提供從賣硬件到賣軟件與服務的轉型，為整車廠商開拓更寬廣的增長引擎，將車聯網從成本中心直接變成利潤中心，并打造“會呼吸、有生命、可進化”的載體驗，幫助整車伙伴業務持續升級，并且小度助手汽車版將通過高度集成的新運營工具集，賦能車企全周期用戶運營。

2020年已被不少人視為5G車聯網商用的拐點，在“軟件定義汽車”的共識下，無論是軟件企業還是整車品牌都在越跑越快，在百度Apollo生態大會上百度Apollo智能車聯事業部總經理蘇坦就表示：“汽車行業正在經歷著前所未有的變革，軟件正在定義著硬件，智能也在定義著性能，而車已經開始有了靈魂，這靈魂正在定義著車的形態?！?

從軟件到服務、到智能硬件支持、再到整體解決方案，車聯網產業鏈上的每一個環節都蘊藏這巨大商機，而百度們正在加速開啟。

02 技術底座：高舉“開放”，誰能成為真正底座？

當下車聯網技術層面的競爭，包括BAT在內玩家都在宣傳自家的車聯網方案都是一個開放的生態，都在建立一個開源的“技術底座”，但其中也存在不少差異。

例如，百度依托Apollo這個當下全球最大的自動駕駛開放平臺，集成了包括車輛平臺、硬件平臺、軟件平臺和云端數據服務，再通過小度車載OS為智能網聯系統，將能力集中對軟硬件平臺以云端數據平臺進行管控，以此成就了百度Apollo智能車聯的車載場景解決方案。

阿里旗下的斑馬網絡則是通過與YUNOS重組，形成了具備貫穿端、邊、云、網能力的整體系統，使其達成在整車電子電氣架構智能化、車機硬件與軟件、車機內底層操作系統、上層應用形成四個層面的技術閉環，而AliOS則是鏈接樞紐。

騰訊車聯網則是由五大基礎框架構成，包括大數據、云計算、人工智能、安全能力和內容平臺，像旗下三張牌之一的蘑菇車聯就推出了“蘑菇OS+AI云+智能終端+傳感器“的解決方案。日前，梧桐車聯基于TINNOVE OpenOS技術，也推出了TINNOVE 3.0解決方案。

在外人看來，三家的車聯網技術解決方案好像非常接近，只是形式和對概念的表述方式有所差異，其實不然內核區別非常大，簡單來講百度Apollo智能網聯其覆蓋了包括車聯網、V2X、自動駕駛全領域的布局，而斑馬，騰訊的解決方案主要僅覆蓋于智能網聯領域。

再來要弄清楚，車聯網領域到底需要怎樣的“技術底座”，是需要滿足不同的車型，為汽車產品提供標準化解決方案?還是需要具備多場景應用生態，可以為行業提供豐富的可兼容性軟件工具？答案是都要具備。

再來對比三大玩家，也是因為解決方案本質上覆蓋領域的不同，目前而言能夠滿足這一要求的還只有百度。今年成都、北京的幾大車展上，百度都展現出了這方面的能力，像全新推出的小度車載2021，基于五大基座滿足了為汽車產品提供標準化解決方案；在多場景應用生態方面，依托強大的AI能力，百度車載OS集成了語音、搜索、小程序、地圖導航等百度AI能力。

并且從當下市場數據中我們能看到，百度Apollo智能車聯大規模上車，無論是合作車企品牌，還是搭載車型數量均位于行業第一，之前就提到已經與70多家汽車企業合作，合作上市車型超過600余款，這便是最好的證明。

在今年生態大會上，百度更是提出“領先一代的共贏關系”，對于開發者而言，依托小度助手汽車版推出首個車規級生態底座，并通過低代碼量的小程序開發框架和標準組件，讓更多車企與海量小程序對接，并開放豐富的車機流量入口，通過接入豐富成熟的運營?具，形成獨特的跨聯盟超級APP流量交換。助力開發者快速達成AI能力閉環，實現一次開發，多屏、多車型適配搭載，讓開發者快速上車，同時通過豐富的車機流量，承接豐富成熟的運營工具，形成獨特的跨聯盟超級APP流量交換，引領開發者實現共贏。

除此之外，智能汽車已進入“人機共駕”新時代，如何打造人與車之間的全方位流暢交互，也成為汽車智能化行業的核心問題之一，為此百度地圖汽版迎來再次進化，推出了智能領航系統，成為了最懂駕駛的下一代智能座艙地圖，面向車企百度地圖汽車版2021提供了三橫一縱全方位地圖解決方案，讓車企量產更加簡單，百度也將這稱之為“領先一代的車載地圖”。百度正的實現“開放”，而這些方面是現階段阿里與騰訊無法比擬的。

2020年百度已經成為大部分車廠的技術底座已是事實，至于未來這個位置是否會發生變化，還要看百度能否一步快步步快。

03 生態溢出：朋友圈持續擴大，生態已成勝負手

最后，隨著車聯網滲透率越來越高，汽車的駕乘體驗不再局限于駕駛感受、靜音舒適這類硬件機械層面的體驗，而延伸到車機交互、LBS服務等基于技術能力和內容生態方面的體驗感受。

而2020年正是車載內容生態爆發的一年，“車內大生態”這一概念也被提出，BAT依然是這方面的佼佼者。

百度方面，車載生態一直都是強項。比如LBS，百度已經打造了中國車載領域最豐富的LBS服務基礎設施；數據基座方面，同樣建立起了一套完整的專為汽車和出行服務的數據平臺，通過對車內車外云端數據整合和大數據分析，實現數據驅動變革；至于生態伙伴方面，截至目前Apollo已引入喜馬拉雅、QQ音樂、蜻蜓FM等頭部生態伙伴超300家，并且囊括了全球所有主流汽車制造商、一級零部件供應商、芯片公司、傳感器公司、交通集成商、出行企業等等，覆蓋了從硬件到軟件的完整產業鏈?！败浻布媸韧饧嫘蕖笔前俣仍谲嚶摼W內容生態方面路徑。

阿里在車聯網生態方面則有著不小的麻煩，“自生態閉環”遭到不少質疑，所謂“自生態閉環”即AliOS系統所搭載軟件均為“阿里系”APP，地圖一律用高德，音樂為蝦米，每個都裝有支付寶，若安裝車載微信等第三方軟件，需要將斑馬系統破解。特別是當下“反壟斷”成為熱點后，阿里車聯網生態也在遭受質疑，有行業人士認為“閉環說白了就是壟斷，客戶的選擇有排他性，上面搭載的軟件不管好不好用，都得用它的?！?

在大方向上，騰訊與阿里一樣也有著自己的“生態閉環”，但今年騰訊在車載內容生態上的布局并非以內容為主，像今年推出的騰訊生態車聯網3.0作用在 “上車速度”方面，用騰訊的話來說，其搭建了一個適合車載的應用框架——“小場景”，可以通過云端統一發送，減少了對車輛硬件的占用，但同時又更容易上車?，F階段騰訊內容生態主要包含了微信車載版、愛趣聽、小場景、云小微語音助手、騰訊地圖等程序，并且已落地到部分車型。

三家對比可以發現，無論是數量上還是質量上，百度都有著較大的優勢，其一百度擁有更多的第三方軟件來源，也是因為企業屬性，百度需要更多來自外界的助力；其二，在內容生態層面同樣是百度更加開放，不同于阿里、騰訊的“自生態閉環”，像支付環節，小度車載OS提供的支付渠道中，不但有百度的度小滿，還有銀聯、支付寶和微信支付等渠道也都可由用戶自行選擇。

更重要的是，百度還推出了“領先一代的智能車內體驗”，像小度助手汽車版就是專門為車而生的車載Killer App，帶來領先一代的智能化體驗。例如，在交互方面小度助手汽車版創新發布專屬虛擬助手形象，用戶只需上傳一張自己的照片，就可以得到一個投射在車機中的虛擬形象，成為自己專屬的虛擬助手，從新交互、新智能、新場景、新生態四方面引領全新的用戶體驗；又比如在車載地圖方面，面向用戶，百度地圖汽車版2021導航將更加智能，包括融合定位、多屏聯動導航、電動車出行服務化、場景出行服務化等，像提前感知可輔助駕駛路段，幫助用戶提前決策、實現全行程的規劃和安全引導等等。之外，小度助手汽車版還搭建了全新Feed流式交互框架、全雙工多模融合交互、SMLTA離在線語音模型等多種全新的交互方式，讓用戶擁有更加便利、快捷的交互體驗。

當然，目前也不是終點，即便BAT暫時領先，但包括華為在內的新選擇都在躍躍欲試，像百度現在雖然有著顯著的領先優勢，但也無法掉以輕心。

04 總結

回到智能汽車發展層面，雖然現階段整個行業仍然處于起步階段，但從“車聯網”這些局部區域也大致能進行一些判斷。

透過車聯網我們能看到，百度自身的技術和生態基礎已經足夠強大，且作為中國自動駕駛道路測試牌照最多、專利申請數量最多、生態最龐大的玩家，百度各方面都處于領先。但智能駕駛無法一蹴而就，百度也還有較大的上升空間。

特別是今年百度已經實現在智能汽車“增量供應商”的競爭中提前占位，而“領先一代”概念和內容的提出更是讓百度在車聯網乃至智能駕駛領域登上了更高的山峰，同時在商業化、技術、生態等方面的全面推動下，不得不說百度已是國內智能駕駛領域當之無愧的“頭號玩家”。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

引人注目的UX設計背后的心理學

前言

在這艱難又魔幻的2020年的尾聲，有必要系統匯總下關于UI/UX的設計發展方向，為接下來的2021的開篇帶個好頭。本文在了解這些趨勢的同時，分析特點并舉例落地實例，來幫助大家啟發創意設計工作的思考切入點。

流行趨勢跟人們所處的環境密切相關，從最初的方塊馬賽克——>追求極度寫實——>扁平風——>到現在的質感擬物，扁平設計霸屏的這幾年，設計風又向更立體、豐富、更有層次感的方向發展，所以說趨勢就是一個輪回。設計風格沒有絕對的好壞，在審美達到一定疲勞時，就會開始出現新的設計風格。每一個新風格都值得設計師去拆解、思考，本質都是為了提升更好的交互體驗。 

而在進入下一個十年的過程中，我們對數字產品和體驗的依賴將日益增長，預測真正勝出的將會是3D動畫和用戶界面/用戶體驗設計的結合設計，5G技術的發展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創意、鼓舞人心的發展階段。在這里讓我們來看看未來那些不可忽視的設計趨勢吧。

（注:圖片來自網絡，均標明出處及作者，若有侵權請告知刪除）

1、3D與UI結合

隨著且易用的3d軟件工具的出現，3D 元素已經開始變得越來越受歡迎，而在這之前，UI界面一直被平面設計所主導。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動效、電商到平面視覺，在所有的設計類型中都能找到它，3D現實主義已是各個領域的大勢。

圈中也出現了很多免費或付費的3D預設元素及場景組件，幫助3D小白更快地搭建出具有沖擊力的視覺組合。

特點：

? 直觀感受；

? 立體真實；

? 形態豐富；

▲Izmahsa

▲Mike

▲Tran Mau Tri Tam ?

▲Vikiiing

▲https://www.awwwards.com/inspiration/3d-hover-number-reveal

實例應用：

各大廠都開始紛紛嘗試在產品中加入3D元素，將自家IP立體化，植入到各個品牌靜態頁面，加深品牌印象滲入。3D技術雖然已經出現有一段時間了，但是為了保證速度和性能表現，較少應用到產品中，隨著軟件技術的提升，立體渲染產品將開始慢慢運用到更多的界面交互、H5活動中。

▲閑魚、QQ、花椒直播的3D啟動頁

▲得物（毒）的3D空間動效

網易云音樂每年的音樂總結報告都追隨著的設計潮流，今年還可以自由選擇人物形象，增強了用戶的主觀代入感，以下是每年的設計風格變化：

▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景

▲2020-總結陳詞H5

▲總結報告Banner的動效

其中IP立體化最多的當屬K12教育領域，除了制作IP周邊外，3D效果能適應豐富的運營場景，高度還原現實世界，給小朋友帶來最真實的學習互動體驗。

▲洪恩識字（3D學習場景）、騰訊開心鼠英語ABCmouse

▲IP在播放兒歌時的互動

值得一提的是今年蘋果發布的macOS Big Sur除了玻璃擬態的變化，圖標還加入了3D維度的擬物視覺層次。

蘋果的 mac OS 的人機交互指南中也明確指出：“圖標不僅是裝飾性的，而且在與用戶交流中起著至關重要的作用，它應該傳達應用程序的主要目的并暗示用戶體驗?！边@次扁平化和擬物化的結合，將又要引領一波設計趨勢。

2、軟漸變（Soft gradients）

過于強烈的漸變不再是趨勢，大多數設計師都開始喜歡使用非常簡單和微妙的漸變，如果產品的目標用戶人群需要輕松溫和的視覺環境，那么此風格再適合不過。

軟漸變包括背景、陰影、反光，常與線條平面圖形結合，應用于界面、網站、圖標、icon等設計中。

特點：

? 低調溫和

? 微妙漸變

? 清新愉悅

2.1、柔和背景

在設計網站中我們已經看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來創造多彩的模糊背景。它使設計看起來非?，F代、不打擾、清新而令人愉悅，其中畫面內容是主要視覺焦點。

▲Vladimir Gruev

▲Sajon

▲Anton Mikhaltsov

▲Ghani Pradita

實例應用：

▲咔咔、美柚

▲https://takearecess.com/

2.2、柔和陰影

柔和的彩色陰影使UI有了更微妙的深度變化，在圖標設計中經常需要漸變或陰影來塑造物體，柔陰影使設計元素更豐富立體，并且它們有助于區分內容之間的層次結構。

▲Ghani Pradita

▲Sèrgi Mi

▲Taro Huang

實例應用：

▲有道數學（已下架）

▲Uki

3、玻璃擬態（Glassmorphism）

去年新擬態掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會出現問題，新擬態更適合用在局部的少量元素點綴，無法完整地使用在整套應用程序中。

▲Alexander Plyut

伴隨著今年蘋果發布的 MacOS Big Sur 操作系統的發布，新的擬物風格正式回歸大眾視野，整體風格應用了新擬態（Neumorphism）的設計思路，利用大量的毛玻璃質感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur的圖標也加入了 3D 質感設計，設計語言更為時尚簡潔。蘋果設計師 Alan Dye 在發布會上也提到了設計風格轉變的原因，主要是希望「降低視覺的復雜度，讓用戶能夠將注意力集中在內容上」。

而的玻璃擬態則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質感，模糊的邊界有細微的淺色邊框，整體效果就是讓元素之間有虛實結合的特殊空間。毛玻璃運用在界面中對關鍵信息起到強調作用，用戶可以看到物體間的層次關系，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。

特點：

? 透氣磨砂

? 層級空間

? 簡潔擬物

▲引領新擬態風格的Alexander的作品也朝著玻璃擬態變化

▲Kostia Varhatiuk

▲Ghani Pradita

▲Ibrahim emran

▲Queble

實例運用：▲毛玻璃視覺可追溯到2007年發售的Windows Vista，而當時的 OS X Yosemite 也大量使用了這種設計語言

▲的MacOS Big Sur操作系統

▲圖標的變化

4、暗黑模式

暗黑模式是白色界面的相反版本，適用于午夜時分。之前用了很長時間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。

 暗黑模式和之前經常提到的夜間模式是有區別的，簡單來說暗黑模式可以在任何場景下使用，并沒有降低對比亮度；夜間模式則專為夜間場景設計，重在降低對比度，以降低在暗光環境下屏幕對人眼的刺激。

特點：

? 突出內容

? 減輕干擾

? 沉浸體驗

▲Tom Koszyk

▲Victa Wille

▲Golo

▲https://www.awwwards.com/inspiration/3d-hover-number-reveal

▲Tran Mau Tri Tam ?

實例應用：

▲有道詞典

▲愛范兒（ifanr）

最常使用暗黑模式的車載系統：

▲小度車載

暗黑模式的靈感最早引起大家注意的應該是抖音，在這之前大部分的應用都是白色為主，抖音整體黑色界面帶來的沉浸以及輕打擾體驗還是很棒的，在這之后也相繼出現了以黑色為主的APP設計：

▲MOO音樂(可手動切換顏色模式)

▲Space FM

5、多彩高對比度界面

受Material Design調色板的影響，2020年用戶界面趨勢的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡約的界面中明亮大膽且對比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風格，我個人就非常喜歡熒光色，現在要是談到該風格的受眾主力軍可是90后啊。

顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風格已經成為清新、酷炫、數字時代的代名詞，而在2021一趨勢還將會繼續影響UI、平面、廣告、插畫等領域。

特點：

? 活潑大膽

? 對比鮮明

? 潮流科技

▲Amy Martino

▲Halo Mobile

▲Anastasia

▲Paolo Spazzini

在網站設計中的應用：

▲https://www.theartcenter.nyc/

▲https://www.squadeasy.com/en/

▲https://takeboost.com/

實例應用：

▲GoFun出行

▲開言英語

6、抽象幾何元素

從上世紀初開始，抽象構成中的簡單幾何形狀就已經用于視覺藝術中，多用于主背景主題或色彩細節，使用鋼筆工具編輯最簡單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設計看起來既規則又有趣。

幾何圖形可以運用到UI設計中 ，將它們混合在一起以創建馬賽克的效果，形成具有品牌意向符號的記憶點。

特點：

? 規則組合

? 品牌印象

? 重復記憶

▲Johnny Nova

▲Vladimir Gruev

實例應用：

最近看到的一組原色視覺剛好融合了高對比度+幾何這兩種風格，那就是SHINee的正規六輯合輯《‘The Story of Light’》，采用紅黃藍三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。

▲專輯的主視覺

當然，幾何形狀不止用于色彩圖案細節，在UI界面布局中經常使用大塊面圖形，這種設計方法受到越來越多的關注。

7、極簡風

極簡設計的前身是2010年代中期精巧又花哨的設計，這種設計已經存在很長一段時間了，但在2020年，人們每天需要消化的信息量越來越多，所以現在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會選擇更簡潔專一的界面。

特點

? 專注信息

? 清晰易用

? 簡單操作

▲RonDesignLab

▲Quan

▲BAOLIN

▲Gregory Loshakov

▲https://snp.agency/en

談到極簡主義，就不可避免會涉及到無鍵趨勢，因為按鍵越少就意味著設計越簡潔，而這種簡化過的設計將讓手勢操作和語音交互更為流行。

▲Taras Migulko

▲Gleb Kuznetsov?

實例應用：

▲夸克瀏覽器的夸克寶寶

8、將視頻應用到UI中

在 2020 年，信息的觸達的速度將會變得更快，而視頻是很好的載體，各個年齡段的用戶都喜歡觀看引人入勝的動畫，無論是選擇通過短視頻還是電影的方式來推廣產品，都很好地灌輸品牌理念，建立與受眾群體的關系，加強用戶忠誠信任感。

特點：

? 營造氛圍

? 類型多樣

? 品牌調性

▲Fireart Studio

▲Ehsan Rahimi

實例應用：

▲moo音樂登錄頁

▲蝦米音樂歡迎頁

9、插畫與3D的界線越來越模糊

藝術插圖從2017年開始到現在仍然很流行，幾乎適用于任何類型的設計行業，是設計領域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產品背后的故事，為了把故事講好，我們可以創造出一個品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產品問題。這是在產品設計中講好故事的基礎，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。 

在2018年的蜘蛛俠平行宇宙中我們就已經看到了3D與插畫的結合，藝術家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細節和質感都放大到了熒幕上，在劇中還采用對比強烈的大色塊擴大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術家們是怎么把片子做得這么酷！

▲3D人物的畫筆觸感

▲畫面光源處由波普圓點組成的背景

▲紙本漫畫書中的“聲音詞”

▲漫畫經典線條

▲Entei Ryu在3D建模使用插畫質感

▲Minh Pham ?在ui界面中的嘗試

實例應用：

騰訊旗下音樂平臺JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個風格之間來回切換，給我們帶來了一個多元的音樂世界。各大視頻網站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關注微信視頻號“UoU_Studio”觀看完整視頻。

在3D開始迅速發展的階段，二維與三維之間的界限變得越來越模糊，插畫作品也可以具備強互動性，而3D插畫與動效的結合提供了一種奇妙的新方法，希望能夠看到未來插畫更多的可能性。

10、更多的微交互動效

最后一點，還是要強調動效在UI中的的作用，微交互最早出現在 2018 年，讓用戶更好地理解系統如何工作，并在引導其獲得更好的體驗方面扮演著非常重要的角色。它們在 UI 設計中決定了一個 App 或網站是普通還是優秀，從點擊反饋、加載等待、導航交互等等，為用戶界面設計增加了動態性，交互性和直觀性。

動效起到的作用：

? 引起人們對應該做什么或接下來將要發生的事情的關注；

? 創造流暢和視覺愉悅的過渡；

? 帶給使用者美觀的享受；

? 指導我們進行復雜的操作；

? 確認用戶使用旅程中的操作。

▲Jakub Antalik

▲Forever D.

▲Kingyo

▲Eugene Paryhin

▲Leo Natsume

▲Taras Migulko

實例應用：

▲GoFun選擇車輛后的頁面轉場動效

結尾：

2020的趨勢在滿足用戶的美學要求上，側重內容和感情表達，還會根據不同設備載體、新的技術而變化，為用戶提供的豐富體驗。

借用Adobe設計副總裁 Jamie Myrold 的一句話：如今設計師要思考的，絕不僅僅是設計一款App、網站或設計工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設計。

設計趨勢還在快速增長變化，有些趨勢總能長期霸屏，未來還將迎來更多新技術，每個設計人員都可以找到自己喜歡的方向，不管哪種趨勢，最重要的是如何學習并合理地運用到產品中，以產生最大的設計商業價值。

文章來源：UI中國   作者：_阿丹a_

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

2020年結束，此時正是一個很好的時間節點，我們共同探尋2021年即將擁有怎樣的未來。本文將帶你發現，即將在2021年流行的十種移動用戶體驗設計趨勢。

前文的原子設計中我曾經講過，原子是構成所有元素的最小單元，沒有辦法再被細分。它通常對應著產品設計中的通用樣式及構成組件的最小顆粒。而顏色，作為整個設計系統中極為重要的原子之一，在心智模型中占據了關鍵的地位。

我們看到紅色能夠感受到熱情、興奮和危險，看到綠色時往往就感受到安全、自然和平靜?？梢哉f，顏色調動我們的情緒只需要一瞬間，而且它在我們的記憶中可以停留更久。

接下來，我結合公司目前的業務CROV Dropshipping（以下簡稱DS），來進行色彩體系的探索，以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點啟發。

大綱走起：

• 業務背景
• 為什么我們需要色彩體系
• 如何創造一套色彩體系
• WCAG無障礙測試

業務背景

CROV DS是針對美國市場的線上一件代發平臺（類似阿里巴巴的一件代發業務），屬于跨境電商B2C行業。平臺幫助用戶無需任何初始成本、無需囤貨即可順利開展電商之路，時間靈活可控，讓用戶專注于銷售本身。

為什么我們需要色彩體系？

1. 對于業務

目前CROV DS業務日益繁雜，但是除了品牌色之外，輔助色的定義過于隨意。而且隨著業務場景的擴展，臨時增加的顏色很容易被遺漏在某個不知名角落的畫板中，導致一次性用色的風險。（tips：一次性即前一篇我所講到的用完即扔、未被復用的設計）

而且用色本身的隨意也導致研發還原結果的不統一，一處地方色彩各異的現象比比皆是。

因此，我們需要基于我們自身的業務特征來產出一套足夠完善的色彩體系，讓業務從用色上達成基本的一致統一。

2. 對于設計師

我們設計師在定義顏色時，更多的是直接在色板上進行取色，但這樣的取色方法存在諸多弊端。

增加決策

可能很多設計師選色時會有這種情況，一會覺得這個顏色臟了，一會又覺得那個顏色太刺眼了，有時候完美主義作祟，為了得到一個滿意的顏色甚至花上大半天。這種情況尤其在多色搭配時更為嚴重。

其實這和不用網格系統來布局是一個道理。（注：網格系統是一種能夠極大提升布局效率的方法，后面會講～）

色板中取色的范圍趨近于無窮。如果將HSB模式下的單個H、S和B作為一個最小單元格，那么我們可以選擇的格子高達數百萬個。顆粒度過細的情況（其實根本就沒有顆粒度）導致我們在取色時往往會被迫進行反復的微調和嘗試。

缺乏秩序和邏輯性

直接在色板中取色主要依賴的是”直覺“這種相對感性的存在。

比如一個按鈕的狀態可以包括normal、hover、pressed、disable等多個狀態，如果我們僅僅靠自己的直覺自由調整明度和飽和度，最后的配色方案其實缺乏內在的邏輯性和秩序性。

難以復用

對于B端這些偏后臺工具、場景復雜的業務，顏色運用得往往也比較廣泛，如果我們沒有一套完善的色彩體系，那每次一遇到新的項目及業務場景需要用到新的顏色時，之前定義的顏色難以復用，導致我們需要重新定義顏色。而且這種相對主觀的方法也缺乏說服力，難以體現專業度。

而如果設計師提前定義好一套色彩體系，一方面只需要在對應的色板中選擇即可，大大減少了設計決策。另一方面色彩體系所提供的不同色彩梯度也便于各個需求、業務場景的復用。而且色彩體系富有邏輯和秩序，因此從中挑選的顏色也同樣是這樣，顯著降低設計師依賴”直覺“所帶來的主觀和不可控。

如何創建一套色彩體系？

Alipay Design團隊提過：

以同色系配色為主導，多色搭配為輔。

同色系為統一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業務的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設定不同的任務屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運用在業務的各個場景中，具有非常好的延展性。

接下來我以DS項目為例進行色彩體系探索——

首先，所有的色彩模型統一采用HSB模型進行，正如Ant Design設計團隊說的那樣，這個模型利于調整色彩時對顏色有明確的心理預期，同時便于團隊溝通。

這里再簡單普及下HSB模型。H指的是色相（Hue），S指飽和度（Saturation），B指明度（Brightness）。S控制顏色混入白色的量，S值越高，意味著混入白色的量越少，顏色也就越“純”。B控制顏色混入黑色的量，B值越高，意味著混入黑色的量越少，顏色也就越“亮”。（通俗點說，它們分別代表了明色區域和暗色區域）

1. 品牌色

Crov Dropshipping基于其時間自由靈活、可兼職副業、成本風險低的業務特征，使得對應的用戶群越來越多的集中在年輕一代的e-tailer（線上零售商）當中。他們不同于我們常規認知里那類傳統的retailer（線下實體零售商），大部分的DSer擁有自己的事業和工作，為了賺取外快，將其當做自己的副業。因此，年輕化是這類用戶群的主要標簽。

所以，我們采用了高飽和度、偏向藍色色相的紫色，來作為crov dropshipping的品牌色。它的HSB值是 （250，80，100）。

2. 基于品牌色生成24色“彩帶”

為了覆蓋掉Crov DS本身復雜的前后臺業務場景，需要額外搭配各類型的輔助色。我們想要提取24類色相，所以直接通過360/24得出了色環中每類色相的基本角度15°。

因此，這里以品牌色色相為基礎，在HSB 360°色環中，對色相（H）正向和反向各自±15°，飽和度（S）和明度（B）保持不變，得到24色的色環彩帶。

后續我們的顏色體系就在彩帶上的24個顏色上面進行提取。

3. 品牌色同色系配色

品牌色同色系是指，根據品牌色不同的飽和度和明度變化，生成不同深淺、不同明暗的一組顏色。同色系配色不僅傳達了品牌性，多個梯度的變化也能夠適應及通用盡可能多的業務場景，也便于多信息的層級劃分。

而同色系配色的輸出則遵循了antDesign發明的tint/shade 色彩系統算法，說人話，就是在顏色中分別加入一定比例的黑色或者白色來更科學地生成色階。

sketch中可以直接將這套算法可視化處理，便于設計師直接生成所有顏色的色階。需要注意的是明色區（就是上方橫向的那塊取色區域，白色至純色時S由0過渡至100）和暗色區（右側縱向的取色區域，純色至黑色時B由100過渡至0）遵循了兩種不同的規則，具體規則見下：

當S飽和度變化時（明色區域），S值以S/5的結果值為一個增量進行遞減，B值以(100-B)/5的結果值為一個增量進行遞增。我們品牌色的S和B分別是80和100，所以這里的兩個增量分別是16和0。

品牌色在明色區的下兩個色階對應的HSB參數就是（250，64，100），（250，48，100），以此類推。

而當B明度產生變化時（暗色區域），S值以(100-S)/5的結果值為一個增量進行遞增，而B值以B/5的結果值為一個增量進行遞減。得出的兩個增量分別為4和20。

品牌色在暗色區的下兩個顏色對應的HSB參數即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。

根據這兩個定義規則推導出全部不同梯度的色階，我們就可以將其作為品牌色同色系配色。

4. 定義輔助色

我們使用品牌色來傳達品牌價值，還需要輔助色來滿足多樣化業務場景的需要，對用戶進行不同的情緒引導，同時也可以緩解用戶對單一主色產生的視覺疲勞。

輔助色的定義就可以直接用到我們之前基于品牌色所衍生出的24色“彩帶”了。我們通過色環形式，來迅速得出品牌色的同類色、類似色、鄰近色、中差色、對比色和互補色。

結果見下：

首先，由于相差15°的同類色與品牌色差距過小，色相對比感微弱，傳遞的調性過于相似，所以這里直接pass。而鄰近色生成的粉色和青色在界面中基本不會作為功能色使用，這里同樣直接舍棄。

類似色

類似色即色相差在30度左右的顏色，屬于較弱對比色。我們基于品牌色的色相各自±30得出類似色。由于H280的類似色調性與品牌色類似，并且色彩體系中需要一個典型的冷色來覆蓋一些場景，所以這里使用了H220的顏色作為冷系的輔助色。

中差色

中差色即色相相差90度左右的顏色，屬于中等對比色。H340偏粉，與常規紅色相差過多，所以這里借鑒了alipay的輔助色校正原則“色相差值不能超過15”，對H340進行了色相校正，調整至H355。

對比色

對比色即色相相差120度左右的顏色，屬于強對比色。最后得出的H130調性與中差色的H160過于類似，直接舍棄。H10與H340調性類似，但是可以向橙色系發展，所以微調到同類色進行色相校正。

互補色

互補色即色相相差180度左右的顏色，屬于高強度對比色。最后得出的H70偏綠，這里同樣進行了色相校正，將其調整為H55。

最后，得出了共計5種輔助色。不過這些輔助色并不能直接使用，還需要進行感官明度的校正。

5. 感官明度校正

感官明度校正方法來自支付寶設計團隊，這是是確認輔助色的最后關鍵一環。每種顏色都有屬于自己的“感官明度”，即發光度。品牌色即輔助色的發光度不一致，就會導致視覺上會有明顯的明暗差別。所以，我們需要通過發光度來進行最終的顏色校正。

明度較高的灰色意味著高發光度，明度較低則意味著低發光度。保持品牌色發光度不變，我們對其他輔助色進行微調。

我們只需要將那些視覺明暗差距明顯的顏色進行調整。注意，并非所有的顏色都要調整到品牌色的感官明度，這些值僅僅是一個參考。最終的校正依然取決于我們的視覺！比如黃色感官明度本身很高，但是視覺緩和、不像綠色那么刺激，所以基本無需校正。

最后得到校正后的如下輔助色。藍色、綠色、黃色以及紅色在界面中可以作為功能色使用，可以分別代表常規、成功、警告和報錯狀態。而橙色則可以用作突出類的提示信息，它比bold字重要高出一個層級。

6. 輔助色的同色系配色

與品牌色一樣，使用tint/shade規則推導出全部輔助色不同梯度的色階。具體過程不再贅述～

7. 定義文本色

CROV DS的文本色并非純粹的中性色，我們通過加入一點點品牌色來讓文本呈現色彩傾向，以此提升頁面的活力及年輕感，同時也可以讓界面更加耐看，減緩B端產品長期使用時的視覺疲勞。

具體方法就是，分別在#222、#555、#888、#b3b3b3的一、二、三級中性文本色代表的色塊上，覆蓋一層10%透明度的品牌色。最后得出了四個層次的文本色。當然，中性文本色你也可以參考antDesign中通過透明度進行定義的方法，不一定需要按照某個具體色值來。

WCAG無障礙測試

我們必須要承認的現實是，設計師所定義出的色彩在mac上看上去是很出彩，但是這并不能代表所有用戶。也許在用戶中依然有一部分人群，他們的顯示器配置低和老舊。而且我們無法判斷用戶們的使用環境，有可能是在刺眼的陽光下、有可能是在昏暗的環境中。如果色彩不去做可用性測試，在很多的情況下存在體驗降低的風險。

而WCAG（Web Content Accessibility Guideline，Web內容無障礙指南）解決的正是這些障礙問題。WCAG中的POUR無障礙原則包括了：易于感知的（Perceivable）、便于操作的（Operable）、穩定理解的（Understandable）、穩定耐用的（Robust）。

而顏色則正是對應了易于感知的這一無障礙原則。網站中的文字和圖像應該具備足夠高的色彩對比度，使之更易被用戶感知識別。

WCAG顏色對比度無障礙的兩個標準分別為：「1.4.3條例：最小對比度標準」和「1.4.6條例：加強對比度標準」，分別對應著AA級和AAA級。

AA級的定義為：普通文本的視覺呈現與背景至少要有4.5：1的對比度，大文本與背景至少有3：1的對比度

AAA級的定義為：普通文本的視覺呈現與背景至少要有7：1的對比度，大文本與背景至少有4.5：1的對比度

（這里的大文本即≥18pt常規字重的文本或者≥14pt加粗字重的文本）

這兩個條例被大廠們廣泛運用到了產品的顏色標準當中。

比如MD規范中的文本移動性規范標準中的數據就是來自WCAG的1.4.3條例標準。

同樣，阿里巴巴在前不久發布的B-Design中的無障礙色acs指標和WCAG本質上也是一樣。

1. 顏色對比度驗證

那該如何驗證我們的顏色符合這倆標準呢？

easy。這里直接上個網址，https://contrast-ratio.com/#%23373247-on-%23fff

我們分別在背景及文本錄入色值，即可得到最終的對比度數據。比如我錄入了白色和一級文本色數值，最后的12.28即兩者的對比度，嗯，達到了AAA級標準。

一樣的步驟，分別測試了其他文本色的對比度（產品無暗色模式，所以此處僅驗證白色背景下的顏色對比度），分別達到了7.59、4.71和2.38。可以看出除了2.38外，其他文本色的對比度均符合可見度標準。

不過WCAG中指出，一些特殊情況下的文本無對比度的限制，其中就包含了表單字段的占位符（placeholder）。而2.38對比度對應的文本色主要用于暗提示，因此這種情況就可以無視掉了~

最后

色彩體系的初步探索到此結束了，不過篇幅原因并沒有面面俱到，比如漸變色、實際落地效果等等。另外，一些地方我自己也在摸索階段，因此很多分析也可能存在不足，文章僅作參考。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

作為UI設計師，雖然現在做了很多項目，但是實際上每一次想要做好，過程都還是很痛苦的。尤其是前段時間，身心俱疲，時間、心情、精力都不在線。但恰恰接到的又是一個重頭的急活，產品方也不清楚自己想要什么效果，所以一開始改版的心路很渺茫。

不過也由于這次的經歷也讓我更加明白設計方法的重要性，越是短時間內，越需要理性分析。在實際工作中，產品有時候因為項目急需上線，給我們的時間會非常有限，根本沒有太多的時間去給你思考，就比如我這次，只有半天時間去思考設計。那么如此短的時間，如何提出有效的設計方案呢？

搞清楚需求來自哪里，具體是什么

以這次為例，學習圈頁面剛上線不久，當時也是設計了許多方案，都被pass了，如下：

產品方提出頁面上方的發布按鈕需要重新設計，那我就要搞清楚具體是誰提出的意見，為什么要重新設計，這樣才不會讓自己處于完全被動狀態。

由于項目剛上線，數據庫也因為某些原因還不能檢測點擊和轉化量，無法得知哪種按鈕點擊量高。產品方也不清楚想要什么效果，需求方向不明確就著急去動手設計，那對于設計師來說無疑是效的，問明白需求后再通過競品分析、產品體驗、用戶喜好等方式去突破。

所以接下來需要我們主動出擊引導產品方，得出一些需求具體的方向。那怎么去引導？反向思維法，既然需要改動的是不確定的，那么我們可以確定那些不需要改動的地方——通過排除不需要改動的，來確定需要改動。

需要排除的是：整體頁面排版布局、按鈕設計方向（扁平、立體、簡潔、卡通等方向）、動效方向、背景（顏色元素）。

通過溝通后明確的是：

• 整體布局沒有問題，所以這塊不需要有改動
• 按鈕點擊感不強，產品用戶群體是6～14歲的學生，根據用戶審美偏好，所以主要方向就是立體、卡通
• 動效不夠明顯，需要更明顯有趣一些
• 整體顏色太冷靜，所以背景顏色和元素細節需要修改

在第一版時已經對相關競品做了分析，基本是一個純色背景上加一個具象化大按鈕，發布功能使用加號、筆、照相機等元素來制作按鈕，原則：按鈕凸顯，背景元素比較少。其實按鈕如果用照相機這種結構復雜點的元素去設計會更有方向，但是我們左上角會有拍米幣的功能，用相機會更直接一些，而加號筆畫過于簡單，可延展性不強，所以改版的話最終決定還是使用鉛筆作為圖標設計元素。

關于整體顏色方向，上一版顏色設計原理是背景用產品主色（藍色）+白色按鈕，不過產品方提出太過冷靜，一開始我想用色肯定要跟整個app的主色相關呀，就跳不出藍色背景的思維，后來決定先跳出來，配色思維反過來，背景不局限在主色，按鈕及周邊裝飾元素可使用產品的主色。

時間緊急，當時想到的是常用的太空元素（有空間感、好延展、符合用戶喜好），于是背景就選了藍紫色（據研究，紫色也是小學生最喜歡的顏色，性別傾向相對偏弱，在色環上是藍色的鄰近色，協調又會有對比。）

想明白要嘗試的方向

在設計前，我先在心里大致分了兩個設計方向：

• 常規大按鈕樣式
• 非常規按鈕樣式

以下便是常規大按鈕設計稿：

非常規按鈕設計稿

在嘗試的這期間，對于有疑問的地方一定要跟需求方及時溝通，及時反饋，確保自己的設計在功能上沒有遺漏。比如我這次，是通過詢問一個產品經理，才得知，按鈕上需要加文字，才在后面加上了。

善于運用對比進行排除

大體方案出來后，通過優缺點分析對比，同產品方選出最適合的方案。

1. 常規按鈕設計稿

優點：容易被用戶所熟知，用戶的學習成本低，更容易點擊

缺點：對于小學生來說吸引力不夠，形狀上偏規矩，不夠活潑，另外上方第一個元素稍微有一點搶主角的光環

2. 非常規按鈕設計稿

優點：配合動效會更有吸引力一些

缺點：用戶的學習成本比較高

通過對比，大家一致傾向非常規按鈕，那就在氣泡與星球這兩者中選出最終方案。在APP的任務頁面也有星球的按鈕，用戶已經對星球有了一定的點擊感知，減少了學習成本，最終選擇了星球。

細節優化

優化方向：

• 顏色調整
• 細節元素調整
• 添加動效

1. 顏色調整

現在看著球跟背景區分不是很明顯，整體偏灰，需要加強對比，球的顏色需要調亮調純。我們看下色環：

90度以內的鄰近色，搭配在一起和諧又不失活潑。所以可以嘗試將球的顏色改為背景藍紫色的鄰近色：紅色或者天藍色，如圖：

紅色的球雖然跟背景拉開了對比，但是過于鮮艷，大家反應有點類似于心臟。

所以相對來說藍色的球比較適合，也跟APP的主色相呼應。

2. 細節元素調整

球的環境色過于明顯，需弱化一些；周邊增加幾個小球，四周邊緣的球太搶，也需要弱化 ；文字“寫一寫”由常規字體改為大一點的手寫字體：

3. 添加動效

鑒于上線版本的動效反饋說不明顯，按鈕點擊感偏弱，所以這次動效優化點需要凸顯星球本身。第一想到的就是呼吸效果，但是只有一個呼吸有點單一，周邊可以添加一些社交鼓勵的元素，如鮮花、笑臉、太陽，動效一開始想著是從球兩邊飛出來，但是經過對比就參考了直播送獎勵的形式，相對來說輔助性稍微好一些，視覺上不會過于太搶主角，如下最終呈現結果：

如果有限時間內想要讓需求方得到滿意方案，所以以下兩點我覺得是挺重要的：

• 對比排除法是一個很好的工作方法；一個西瓜到底好不好，拿另一個進行比較就知道了。
• 及時反饋：很多時候什么結果并不是一開始就知道，所以在做的過程中需要不斷理順想法。此時很重要的一點就是，跟需求方及時反饋，無論是正向的還是負向的，否則結果不是老板所期望的，自己也會陷入無限的苦惱中。

好啦，文章寫到這里，如果大家有更好地意見也歡迎留言

文章來源：優設網     作者：麥芽糖

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

為什么要建立Banner組件庫

在互聯網公司中，運營Banner往往是由不同的運營團隊去完成，甚至在一些跨國企業，運營Banner是由不同國家的運營團隊完成的。那么如何保證大家輸出的運營Banner在保證視覺沖擊力的同時，還能輸出以及體現統一的設計語言呢？甚至不用設計師也能輕松替換Banner組件？想要解決這種難題的最好方法就是設計Banner組件庫，Banner組件庫的四大優點能夠完美解決以上的問題。

Banner組件庫的類別

根據設計師個人及每個公司業務的不同需求，我一共把Banner組件庫分為兩大類別：

1. 設計師及設計團隊操作的Banner組件庫：

這類組件庫面向的操作人群是設計師，僅有設計師才對其有操作權限：

案例部分效果演示：

2. 非設計師操作的Banner組件庫：

這類組件庫面向的操作人群是非設計師人員（運營、銷售、子公司員工等），是設計師根據運營的需求特制的Banner組件庫。

我當時制作這個組件庫的原由是因為母、子公司經常都會有相同的模板化設計界面替換，而每次替換都需要花費設計師很多零碎的時間，所以我們干脆就直接設定好Banner組件庫，讓運營人員自行替換，我們先教會母公司的主運營操作流程，主運營再去負責子公司的操作流程培訓，這樣一套下來省去了運營人員與設計師的溝通及修改過程，運營人員可直接輸出成品，從而提升了整個團隊的生產力，也讓設計師專注于設計上的創意與用戶體驗。

案例部分效果演示：

Banner組件庫的四大知識要點

不管是建立哪一類別的Banner組件庫，想要設計好它，那么首先就要清楚的了解Banner中的基本構成以及設計原則，從底層邏輯出發去構建Banner組件庫，我構建Banner組件庫的思路主要依據以下四大知識點：

1. Banner的層級拆分

Banner層級拆分的主要目的是為了組件的設定，我們通過層級拆分可以有規律的把每一個層級都設置為可替換選項，在Banner組件庫中可分為5個層級：

• 背景層：可替換背景顏色、背景樣式
• 文案層：可替換字體、顏色
• 標簽層：可替換標簽、顯示隱藏標簽、標簽顏色
• 點綴層：可替換點綴元素、元素顏色
• 產品配圖：可替換顯示圖片、也可更換為插畫元素

案例：

2. 合理運用Banner中的點線面

在組件化的Banner設定中，我們可以用點、線、面來劃分畫面的整體層面，我們要羅列出哪些層級是用點來表達，哪些層級是用線或面來表達，這樣不僅有利于組件庫的快速建立，也有利于Banner整體畫面的視覺表達。

點、線、面是相對存在的，點可能在畫面中成為線、面，線也可能在畫面中成為點、面。

“點”越大就可能會變成“面”，“點”發生規律性變化也可能成為“線”。

當“線”在畫面上顯得短小時，可以把它看成“點”，當把“線”加粗一定程度，那么我們就會把它看成“面”。

當“面”成為未封閉狀態時就會成為“線”，當“面”在畫面中的比例縮小時我們可以把它看成“點”。

我們在組件Banner時要事先把層級的點線面歸納好，這樣才不會在我們設計相同元素時出現雜亂的現象，層級與點線面的常規關系圖如下（這樣的常規組合關系有利于建立組件庫）：

需要注意的是在Banner組件庫中點綴層與標簽層并非一定要存在于Banner中。

3. Banner組件庫常用版式

Banner的版式復雜多樣，而我們的組件庫想要達到輕量化，所以更適用于下面三種常規的版式，如下：

4. Banner設計五大原則

組件庫的建立必須遵循Banner設計五大原則：對齊、統一、對比、留白、結構平衡。

對齊

Banner的內容都要有一個對齊的準則，特別是文案層面，每個元素都有自己應該處于的位置，要有秩序化，才有舒適感。常見的對齊方式有左對齊、右對齊、居中對齊，建議一個板式只使用其中一種對齊方式。一個小小的Banner版面，如果使用了多種對齊方式，實際上在用戶看來這些信息都是零散的，增加了認知成本。

統一

字體以及字體顏色最好不超過兩種，內容元素設計風格也必須一致，太多容易導致內容雜亂，干擾過強。

對比

了解各項信息的權重大小，重要的信息要加強顯示，次要信息可以弱化。

留白

要為Banner留出一定空間，讓Banner多一些呼吸感，這樣也更容易聚焦重要信息。

降噪原則

在Banner設計中不要使用過多的字體、顏色或者過于復雜的圖形，這種不斷做“乘法”的行為，實際上是在增加用戶認知的“噪音”。

組件庫制作流程及案例展示

1. 制作前提：設計規范（字體/顏色/版式說明）

字體使用規范

在字體的使用中，我們要確定字體類型以及字體的大小。

顏色使用規范

為了保證Banner擁有較強的適應性，我們可以不規定精準顏色，用顏色明度的使用區間來代替。(顏色規范僅限于主色調，并不包含特殊用色：如標簽、點綴元素)

版式說明

制定版式的整體尺寸、元素間距、排版、字數限制。

2. 設計師應用版制作流程：

設計師應用的Banner組件庫可以用Sketch制作，也可以用Figma制作。

如果是用于外包設計或公司設計師僅有一人，那么建議用Sketch制作；如果設計團隊人數較多，那么建議用Figma，我這里就用SKetch給大家講解一下制作流程。

第一步：根據層級與點線面設計Banner中的元素

第二步：把每一層級的元素組件化

在Sketch中只用選擇想要組件的圖層（或組），點擊按鈕即可立即生成組件，如下圖：

在組件層級時我們需要注意從哪里開始，到哪里結束。例如我做的這個寵物Banner案例，第一層是Banner樣式切換，接著才是樣式里面的層級切換，并不是把內部所有層級都組件完后就結束了，可能層級中還存在更多的小組件切換，比如在樣式2中我沒有把點綴層合成一個組件切換，而是分為三個組件切換，甚至在三個切換里你還可以設置它們的顏色切換，全部設置完后這樣才算真正的組件結束，下面是我組件的層級圖：

第三步：設計可替換組件

在完成元素組件化后，我們就可以在組件庫里添加更多可替換組件的樣式，添加方式如下圖：

當把可替換的組件全部設計完后就可以使用了，如果發現內容不夠用還可以往內部再次添加，下面是Banner樣式1的切換效果展示：

Banner樣式2的效果展示：

注意要點：

• Banner組件庫的內部層數不宜過多，盡量輕量化。
• 組件庫內部的相同元素可以同時使用，例如樣式1與樣式2的文案部分，都可以用一個組件，不用再單獨設置。
• 命名要清晰，層級之間用“/”隔開，以免發生組件庫內部的調取錯亂。
• 因SKetch的組件機制，組件的尺寸大小要有區分，如果出現相同大小的組件請任意修改一個。（增加1px）
• 想要快速得到組件，可以把左側的圖層面板更換為組件面板，直接可拖取內部組件。

3. 運營人員應用版制作流程：

運營人員應用的Banner組件庫的建立需要用到的軟件是PS與Excel。

在設計這類組件庫時我們一定要多從操作人員的角度出發去設計，最簡單化，下面案例來自于之前在老東家做的PS組件。

第一步：根據層級與點線面設計Banner中的元素

第二步：設計可替換元素組件

在設定前我們需要了解以下幾點知識：

• PS做組件庫用到的是圖像-變量屬性。
• 我們進行所有的元素替換都不在PS內部，而是在Excel操作替換，若有圖片替換，圖片則與源文件存在同一文件夾內。
• 可設置所有元素的顯示和隱藏。

通過以上4點可以得知我們需要設計的元素僅僅只有背景圖片，而其他元素可以通過變量來達到效果，下面是設計的4張不同顏色的背景替換圖：

第三步：定義變量元素

只是給需要變量的元素打標簽，具體該如何變量在第四步

定量步驟：選擇想要定量的圖層-圖像-變量-定義

注：PS會自動識別定量元素，如果是組，那么只有可見性選項（可見性選項的意思就是可顯示可隱藏）；如果是圖片，則會多出像素替換（替換圖片）；如果是文字則會有文字替換（替換文字）

在定義時為了避免操作錯誤，定義名稱就為圖層名稱，定義完成一個就按“下一個”按鈕，直到全部定義完成再按“確認”按鈕，案例中的Banner一共定義了6個元素，分別為商品圖（像素替換）、商品名（文字替換）、原價（文字替換）、優惠價（文字替換）、特價標（可見性）背景圖（像素替換）

第四步：制作Excel表格

我們所有的數據修改都是在Excel里面進行的，Excel表格制作非常簡單，第一排為定義的名稱，我們只需把剛才定義好的6個名稱輸入到表格的第一排。

如上圖，建議大家多加入一個編號定義，在PS里把編號定義的圖層隱藏就行了，目的是為了選取數據組時更直觀，操作如下：

除了第一排，下面的排列都是輸入性定義，如果要改變商品名的文字，就可以在下方輸入修改的文字；

如果要替換圖片，就要輸入替換圖片的名字及后綴，僅支持png與jpg格式的圖片，并且圖片必須與源文件在一個文件夾內。

如果要顯示或隱藏某個元素，那么就可以輸入大寫的“TRUE”或“FALSE”。

當把表格信息都填完后，最后一步就是把表格存為.csv格式。（注：.csv文件必須與PS源文件、圖片文件存在于同一文件夾內）

第五步：導入操作

當全部設定完后，我們就可以在PS內導入切換不同的數據應用。

操作路徑：圖像-變量-數據組-導入數據組-選擇數據-應用-確定

這五步下來我們的Banner組件庫就順利完成了！

特別提醒：避免運營人員操作失誤，建議把PS內部的所有圖層鎖定。

第六步：培訓運營人員

通過上面的組件建立，運營人員只需添加Excel文件的子列表，并在PS選中導出即可完成操作，可以讓運營人員把PS看成圖片導出工具，可以非常輕松的完成。（機械化流程）

因為考慮到運營人員可能無法理解設計邏輯，所以很可能會出現操作失誤或不知道怎么操作的情況，所以建議通過直播以及視頻文件、PDF文件、GIF文件來引導運營人員操作。

• 直播優勢：直播在線操作，不懂可以及時詢問，能讓運營人員快速上手。
• 文件優勢：主要用于操作者忘記操作或操作失誤時的提醒。
• 特別提醒：給予運營人員文件中必須包含：操作文件（PS源文件、背景圖片、Excel表格）、字體包（PS中用到的字體）、操作提示文檔（視頻、PDF、GIF）

下面是員工PDF操作步驟圖示：

案例源文件提取

Sketch組件庫源文件：

PS、Excel組件庫源文件：

下載鏈接：https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取碼：e3li

文章來源：優設網     作者：黑獅力

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

顏色的本質

當今是色彩的世界，物體顏色的不同，帶給我們的情緒也截然不同。想要掌握顏色，首先就要研究顏色的本質。

顏色分為光學三原色和顏料三原色。

1. 光學三原色

光學三原色由：紅、綠、藍組成。

色值分別是：

• 紅（red ）：#FF0000 RGB（255，0，0）
• 綠（green）：#00FF00 RGB（0，255，0）
• 藍（blue）：#0000FF RGB（0，0，255）

2. 顏料三原色

顏料三原色由：品紅、黃、青組成。

色值分別是：

• 品紅（magenta）：#FF00FF CMYK（42，64，0，0）
• 黃（yellow）：#F8F400 CMYK（0，11，92，0）
• 青（cyan）：#00FFFF00FFFF CMYK（38，0，16，0）

理論上，原色可以調制出絕大部分的其他色，而其他色都調不出原色。

那么，這兩種有什么區別呢？

3. 區別

光學三原色和顏料三原色最主要的區別就是他們的混合原理不同，分為相加混色和相減混色。

光學三原色為相加混色（可以理解為光的疊加），混合后顏色的明度提高，三色混合即為白色。

相反，顏料三原色采用相減混色（可以理解為光的吸收），混合后顏色的明度和純度都會下降，三個混合即為黑色。

在設計中我們可以區分為 RGB（光學三原色）和 CMYK（顏料三原色）。

RGB 模式本質上與 CMYK 模式沒有區別，只是產生顏色的方式不同。顯示器采用RGB模式，就是因為顯示器是電子光束轟擊熒光屏上的熒光材料發出亮光從而產生顏色，當沒有光的時候為黑色，光線加到最大時為白色。而打印機呢？它的油墨不會自己發出光線。因而只有采用吸收特定光波而反射其它光的顏色，所以需要用減色法來解決。

運用場景：

• 光學三原色：RGB模式，燈光色彩中；
• 顏料三原色：CMYK模式，繪畫和印刷領域。

冷暖色調

冷暖色由三種原色、三種間色和六種復色組成的系統就稱為十二色環，從紫色至黃綠為冷色，黃色至紫色為暖色。

冷色可以讓人聯想到海洋、天空、雨雪等，讓人產生理智、寒冷、沉寂的感覺。

暖色可以讓人聯想到火焰、太陽等，讓人產生溫暖、熱情、開放的感覺。

實際案例中，冷暖色調的搭配，直接決定了觀賞者的第一感官。觀賞者第一眼的情緒感觸，就由此而來。

顏色的三個屬性

顏色的三個屬性分別為：色相（Hue）、明度（Brightness）、飽和度（Saturation）。

1. 色相

色相指的是這些不同波長的色的情況。波長最長的是紅色，最短的是紫色。

色彩是由于物體上的物理性的光反射到人眼視神經上所產生的感覺。色的不同是由光的波長的長短差別所決定的。把紅、橙、黃、綠、藍、紫和處在它們各自之間的紅橙、黃橙、黃綠、藍綠、藍紫、紅紫這 6 種中間色——共計 12 種色作為色相環。在色相環上排列的色是純度高的色，被稱為純色。

2. 明度

明度是表示色所具有的亮度和暗度。計算明度的基準是灰度測試卡。黑色為 0，白色為 10，在 0~10 之間等間隔的排列為 9 個階段。

色彩可以分為有彩色和無彩色，但后者仍然存在著明度。作為有彩色，每種色各自的亮度、暗度在灰度測試卡上都具有相應的位置值。彩度高的色對明度有很大的影響，不太容易辨別。在明亮的地方鑒別色的明度比較容易的，在暗的地方就難以鑒別。

3. 飽和度

飽和度是用數值表示色的鮮艷或鮮明的程度。

飽和度為 0 時，就是黑白灰。有彩色的各種色都具有彩度值，無彩色的色的彩度值為0，對于有彩色的色的彩度（純度）的高低，區別方法是根據這種色中含灰色的程度來計算的。

顏色搭配

1. 單色

單色指的是某個顏色純度的變化，就是在原有色上疊加 10%~90% 的白色/黑色得到的一個顏色。

這種方法運用到產品中，會給人一種樸素、低調干凈的感覺；同時，也會給人一種單調的感覺。單色的顏色搭配適合沉浸式的產品中使用，不會因為色彩而打亂用戶的體驗。

產品案例：MUJI

2. 互補色

互補色是指在色相環上對立（180°）的兩個顏色。

色彩中的互補色有紅色與綠色互補，藍色與橙色互補，紫色與黃色互補。

補色并列時，會引起強烈對比的色覺，會感到紅的更紅、綠的更綠。

互補色是很難把控的一種色彩搭配。由于色彩沖擊力極強，用好了可以達到視覺峰值，反之則會很“村氣”

3. 鄰近色

鄰近色是指在色環上相鄰的兩三個顏色，在色相環上相距 60°

它們色相彼此相近，冷暖性質一致、色調統一和諧、感情特性一致。鄰近色是選擇相近色彩時很不錯的方法，可以在同一個色調中制造豐富的質感和層次。一些效果不錯的色彩組合有藍綠色、藍色和藍紫色，還有黃綠色、黃色和橘黃色等。

4. 對比色

對比色是人的視覺感官所產生的一種生理現象，是視網膜對色彩的平衡作用。指在相環上相距 120° 到 180° 之間的兩種顏色。

對比色能使色彩效果表現更明顯，形式多樣，極富表現力。需要注意的是，互補色一定是對比色，但是對比色不一定是互補色。

色彩的視覺呈現

1. 光源色

物體只有在光的照射下我們才能看到他們的顏色。

發光體發出的光，形成了不同的色彩，我們將這些色光稱之為光源色。

2. 固有色

固有色就是我們平時看到物體的顏色。

比如在正常光照下我們看到一個物體是紅色，那他的固有色就是紅色。

3. 環境色

環境色是物體周圍環境的顏色。

環境色對我們看到物體顏色的影響非常大。大家平時肯定也遇到過一個物體在不同的光照下，呈現出來的物體顏色也不盡相同。比如，一個在藍色天空下的蘋果會呈現部分淡藍色，就是環境色的影響。

色彩格式

1. RGB

RGB 色彩模式是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB 即是代表紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。

2. HSB

在 HSB 模式中，H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示明度。

3. HSL

在 HSL 模式中，H(hues)表示色相，S(saturation)表示飽和度，L（Lightness）表示明度。

4. HSB 和 HSL 的區別

HSB 和 HSL 都是表示色相、飽和度和明度，不同的點在于應用開發中，不同開發語言下可調節的明度值名詞不同，所以這兩個格式不用過于糾結哪個用的更多，具體使用中就是需要哪個用哪個。

不同顏色的感受

1. 黑色

黑色代表著品質、權威、嚴肅、穩重、高級。它是所有顏色中最有力量的，黑色+金色凸顯高貴感，黑色+紅色凸顯時尚感。

黑色是永不過時的顏色。

2. 白色

白色代表純潔、信任、樸素、簡單。黑色和白色經常會被用作無色，這兩個顏色沒有色彩傾向，屬于中性色，所以常常被忽略掉。在界面設計中，白色常常被用作背景色，提高畫面明度，凸顯其他內容，提高文字的易讀性。

3. 紅色

紅色代表喜慶、熱情、奔放、自由、歡樂。它是很強勢的顏色，一出現就會使人熱血沸騰，常常出現在電商活動中，讓人有購物的沖動。同時，紅色也有一種警告的含義。一些產品高危操作的 Button，都是用紅色來提醒用戶。

4. 藍色

藍色代表冷靜、商務、未來、科技、安全，它是一種比較理智的顏色，在色彩心理學的測試中發現，幾乎沒有人對藍色反感。主色調用藍色的太多了：知乎、Twitter、Behance、釘釘等，藍色的運用給用戶一直安全、放心的感覺。

5. 黃色

黃色代表輝煌、高貴、信心。它的明度極高，雖然沒有紅色給人那么強烈的感官，但是黃色給人一種警示的意思。黃色經常會以高貴的含義被用到：網站的 VIP。

6. 綠色

綠色代表健康、活力、生命、安全、和平、寧靜。綠色可以治愈心靈，當你不開心的時候，看一下綠色的東西，會讓你的愉悅值增加。它在生活中用到最多的含義是安全：綠色通道、綠燈等。

7. 紫色

紫色代表浪漫、時尚、性感、夢幻、創造力。紫色+粉色經常在女性化妝品被用到，紫色在自然生活中很少看到，所以也有一種稀有、高貴的感覺。

色彩在設計中的應用

1. 數量

一個頁面中盡量不要超過 3 種顏色（黑白除外），顏色過多會讓用戶的興奮值上升，不易長期查看。

2. 統一性

每一個產品都有自己的主色調，所有的頁面的色彩搭配都要和主色調呼應，主色調的合理運用直接關系到用戶對產品的信任值。同一組件、場景中，顏色使用要保持一致，切忌“自由發揮”，毫無規范可言。

3. 60-30-10原則

60%、30%、10% 的原則，是達到色彩平衡的最佳比例。在 60% 的空間使用主色，可以運用到導航欄、按鈕、圖標等關鍵的元素中，使之成為整個 App 的視覺焦點和色彩關系；30% 的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10% 的空間為點綴色，可以用在一些不太重要的元素又需要區分的時候。6:3:1 原則構建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。

4. 顏色禁忌

禁用純黑、純灰，純黑和純灰會使用戶陷入負面情緒中，可以在黑色和灰色中加入一些色調，讓顏色看上去更柔和，另外純黑色看時間久了會使人疲憊，在實際產品中，也很少有用純黑的。

5. 文字中的使用

超鏈接顏色用藍色，為什么呢？

最早期電腦中用的是深灰色背景+黑色字，那時候能用非黑色最深的顏色就是藍色，所以這個習慣一直延續至今。這種用戶習慣非常一致的情況下，盡量不要去改顏色，因為改成別的顏色就會顛覆用戶認知，學習成本就會增加。

6. 卡片陰影

一定不要用純黑色陰影，陰影的顏色會受到環境色和固有色的影響，對于有顏色卡片的背景，盡量使用比卡片更深的同色系顏色來調陰影，會使得陰影更干凈、整潔。

配色網站推薦

1. Wbgradients

網站鏈接：https://webgradients.com/

Wbgradients 是一個在線調整漸變色的網站 ，可以根據你想要的調整效果，同時支持復制 CSS 代碼，可以更好的與開發對接。

2. Grabient

網站鏈接：https://www.grabient.com/

Grabient 是一個非常漂亮且實用的漸變配色網站，支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。設計師可以在色塊下方自由添加和調整漸變的色系、以及線性漸變方向。

3. Color Grid

網站鏈接：https://www.0to255.com/740941

該網站隨意選色值，它自動換算出已選色值的 32 種明度色值，簡單易用。

4. Eva Design System

網站鏈接：https://colors.eva.design/

Eva Design System 是一個基于深度學習算法的配色網站。適用于給我們的產品或品牌生成一個系統的配色方案。右上角可以切換淺色模式和深色模式的對比。

5. Color Hunt

網站鏈接：https://colorhunt.co/

Color Hunt 是開放的調色板集合，可以添加到 chrome 瀏覽器，方便隨時隨地使用。

文章來源：優設網     作者：友設青年

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務