7秒的消費決策中，67%的決策取決于色彩。
色彩是我們感知世界的重要媒介，在設計中僅次于功能的另一要素。色彩與我們的生活息息相關，怎樣科學配色、靈活用色成了絕大部分設計師的難題。
作為一名擁有多年擰螺絲經驗的設計師，不免每天都會和色彩打交道，在配色的過程中，你是否也曾遇到過以下困擾：每次做項目隨便吸色？
盲目運用色卡？
配色總是看起來不舒服？
色感差，天天被老板和同事Diss？
…
接下來，請你花幾分鐘看看谷歌等其他大廠，都在用的系統配色方案。以下以船長BI為例，做品牌色彩的規范引導。
船長BI：
深圳船奇科技有限公司-是中國專業的跨境電商SAAS系統服務企業。旗下船長BI，專注亞馬遜精細化運營與大數據分析，為不同階段、不同規模的企業提供全場景多維度分析，一站式精準推廣和全鏈路供應鏈協同管理，幫助企業實現數智化運營。同是船奇科技也是亞馬遜SPN服務商。
01
1-1 設計主張
船長BI系統是亞馬遜精準化運營及大數據下鉆分析的高效化共同體。從單功能運作到多功能融合，再到大數據多元化產品下鉆、閉環及溯源，打破了亞馬遜跨境運營服務商單點運作的局限。我們希望新的品牌色，能夠為船長BI在跨境企業中營造更加權威、高效向數智化轉型的視覺感知。
船長BI 設計語言：英文Captain BI Design Language簡稱CapDesign。
經過團隊的諸多調研到佐證,我們將品牌標準色太平洋藍(Pacific Blue)，升級為更加科學、權威、智略的明亮立體的黑綠松石色(Dark Turquoise)。黑綠松石色在跨境電商行業中具有更多神秘的數智化意味，在實際應用中隱含著更多的生機和信任，表明了船長對進入數智化運營新挑戰的氣魄。同時，品牌色的升級能夠快速區別于競品，形成船長BI獨特的色彩感知，通過色彩感知形成品牌記憶。
色彩命名源自潘通Pantone。
1-2 創建調色板
人的視覺系統在辨別顏色時，不會把色光分解成RGB或者CMYK幾種單獨顏色，而是按照色相度、純度和明度來判斷的，也就是HSB。HSB模式可以完美固定HSB中的某一個參數，只對其他兩個參數做改變或者只改動其中的一個參數，符合人對色彩差異幅度的感知，而RGB、CMYK都是牽一發動全身的節奏。↗
我們以CapDesign品牌基準色#2AC5D4（H=185\ S=80\ B=83) 為起始點，S飽和度、B明度保持不變，H色相以185°為起點，以15°為增量或減量標準，生成24色色板。這個色板是我們選取輔助色的重要依據。
02
拓展豐富的輔助色
2-1 以鄰近色、互補色、對比色為原則，選擇絢麗多彩的輔助色↗
為了保有更多CapDesign 的品牌基調，我們選擇了相對較多的鄰近色，以保證整體色韻的清爽感和數智科技化意味。并利用對比色及互補色擴展色相，選擇更加豐富多元的輔助色，使其色相對比鮮明，以保證能色彩夠滿足各種復雜場景。
Q：色相位到底選擇多少個合適？
A：有的產品選擇7個色相位，有的產品選擇10幾個色相位，都是允許的，選擇的依據取決于：
1.色彩對比明顯，選擇色相數少；色彩對比柔和，選擇色相數多；
2.產品功能的場景簡單，選擇色相數少；產品功能的場景復雜，選擇色相數多；
Captain BI 是亞馬遜運營與大數據集成，功能交叉比對及數據可視場景復雜，為迎合業務發展需要，CapColor選擇的色相位為13個。
2-2 校正輔助色(波長和振幅)
雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合適的色相，但由于每個色相的波長各不相同，導致色彩在感官感受上存在差異。
在可見光波譜當中，波長越長其穿透力就越強；紅色的波長是最長，穿透力就最強，感知度最高。↗
為了讓不同色相在視覺感官上看起來更加協調，需要對色板的明度和飽和度進行反復的校驗，以保證視覺感官更加和諧舒適。
校正原則
A.色相最好維系在同類色(色相環中15°夾角內的顏色)↗
B.色相感官保持平衡(明度和飽和度)
C.保證視障群體的識別度(WCAG 對比度)
調色的技巧
淺灰色調: 飽和度減少(S↓)，明度增加(B↑)
深色色調: 飽和度減少(S↑)，明度增加(B↓)
使用HSB調色模式時，可以參考以上規律，能讓快速調和想要的顏色。校正后得到了以下色域清晰、對比明顯的主色及輔助色。并且針對視障群體進行了色彩測試。
2-3 拓展梯度色譜
校正主色和輔助色后，我們需建立完整的梯度色板，來滿足不同場景下顏色的應用。建立色彩層級，以提升品牌感知，達到信息傳達辨識、強化界面層級等作用。
在梯度色板系統中，很多配色產品都是使用Tints and shades系統：通過在原有色相的基礎上增加白色或者增加黑色，來改變它的明度和飽和度，形成梯度色板。但這種方法得到的調色板往往比較刻板生硬。CapColor在Material Design-Color的基礎上進行了細化，構建更有層次感、空間感、立體感的梯度色板。
CapColor梯度色板：
1.在Primary的基礎上，使用Tints and shades系統找到Light和Dark：
Light=(White+primary) 95%疊色；
Dark=Black 60%疊色；
Primary=原色相。
2.結合Material Design-Color實踐，得到CapDesign梯度色板及相應的參數。
CapColor選擇10階梯度，對比穩健，更能凸顯船長系列產品權威和成熟的形象；9階梯度相對生硬跳躍，12階梯度過于柔和平滑。
有的色相穿透性強、飽和度高，所以還需要進一步的校驗，如藍色 RYB：
運用以上的方法，得到CapDesign豐富的調色板，為后期業務做支撐：
03
易用的中性灰色
Captain BI系統大部分是由容器、面板、列表、卡片等其他組件及元素構成。中性色為系統銳化布局、表達邊界、建立信息層次起到決定性作用。
3-1 中性色
中性色的搭建同時滿足暗黑模式、換膚及印刷等諸多場景，故在實現時按照透明度的呈現方式。
3-2 黑綠松石灰色
中性黑綠松石灰色解決更多復雜的場景，如表格和表單雙底色、圖標的顏色等。中性黑綠松石灰色增強布局、區別背景，起到強化信息層次的作用。
黑綠松石灰在中性灰色的基礎上增加色相和飽和度，這樣得到的藍灰色還是有些許生硬，還需要對飽和度和明度進行微調，讓顏色更有層次感。
中性黑綠松石灰的方法：
在配色模式HSB中：
H=185(Brand Color)；
S=3(必要時微調)；
B=保持不變。
3-3 WCAG 2.1測試
為保證視障用戶的使用，保證足夠的對比度，CapDesign 遵守 WCAG 2.1 的標準，對調色板對比度進行了可用性測試，為后期靈活用色奠定基礎。以中性灰色為例：
WCAG 2.1中規范了A、AA、AAA的對比值范圍及使用場景，感興趣的朋友可以前往WCAG 2.1官網詳細了解，在這不在贅述。
3-4 場景案列
實踐是檢驗真理的唯一標準，以下通表格的微交互對中性色進行完美的詮釋：左邊的表頭和表格背景粘連到一起，視覺及信息識別困難。通過交叉運用中性灰色，明顯右邊的表格結構、信息層級得到強化，視覺更聚焦。
結語
主觀情感的取色，一開始可能沒遇到什么大問題，但隨著產品不斷完善，主觀取色往往不能滿足業務發展訴求?？茖W的系統配色，真正滿足和服務設計；同時對設計一致性及提升團隊效率起到肯定的作用。
通過這個漫長的配色過程，你是否重新審視過去設計中的配色方法？希望對配色困擾的你有所幫助。
色彩系統中的系統配色部分已經完成，接下來我們將死熬，續更系統配色在實際項目中的應用，做到科學配色、靈活用色。
作者：楚焱UX
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
矩形色塊為背景色，圓形色塊為畫面中圖片元素或文字使用的顏色。根據需要可以把其中的某些純色轉變為單色漸變，或者也可以把某些單色漸變轉化為純色。另外，在不包含黑白灰的色彩組合里，仍可以根據需要自行加入黑白灰，比如用于填充文字的顏色。
1. 高端
視覺調性高端的色彩，通常具有明度低、飽和度低、顏色數量少等特點，所以很多高端的設計都會以深色作為背景色，因為深色更顯低調、更具神秘感，所以給人的感覺更高貴。然后以亞金色、銀色、桔紅色、白色等作為輔助色。
2.科技
想要表現科技感，色彩的整體調性通常會偏冷色系，明暗對比要強，且通常會使用漸變色。比如以深藍色到藍色的漸變作為背景色，然后用高飽和度、高亮度的青色和紫色作為輔助色，這時這些輔助色就會非常的跳躍，具有一種發光的效果。
3.時尚
其實所有調性的配色都應該要盡量時尚一點，即使是想表現復古，也不能太土，所以這里所說的時尚特指偏向年輕、潮流的時尚。這種色彩通常具有飽和度高、明度適中、色相對比較大等特點。蔥爺這里概括了兩類，一類是以純色作為背景，這種色彩比較適合于品牌設計、網頁設計、畫冊設計等；一類是以漸變色作為背景，這種色彩比較適合于電商設計、廣告設計等。
4.酷炫
酷炫是指那種視覺效果特別張揚、甚至是極具個性的色彩搭配，比如近幾年比較火的蒸汽波風格、酸性風格、賽博朋克風格、故障風格，其色彩就屬于酷炫類的。該類設計通常也是以深色作為背景，圖片元素會使用高飽和度且對比很強的漸變色，色彩相對較多。
5.好吃
即讓人感覺很有食欲的色彩搭配，這種色彩通常以暖色為主，比如紅色、橙色、黃色。飽和度較高、明度較低的組合方式通常用于餐飲行業；而飽和度較低、明度較高的色彩組合通常用于甜點、飲料等行業。
6.夏天
目前正值火熱的夏季，所以蔥爺專門整理了一些適合表現夏季的好看色彩，該類色彩通常會以藍色、青色、綠色這種冷色系最為主要顏色，然后以黃色或紅色、白色作為輔助色，這種色彩組合會給人清涼、快樂的感覺。
7.清新
小清新的視覺感受為輕松、柔和、淡雅，要達到這樣的效果，顏色的明度通常是比較高的，飽和度偏低，常用的顏色有淺青色、淺綠色、淺黃色、粉紅色等，在奶茶、女性護膚品的相關設計中比較常見。
8.快樂
快樂是張揚的、是活潑的，所以快樂的色彩飽和度較高、明度不會太低、色彩的種類會比較多，通常也是以暖色為主，但是會搭配冷色一起使用。黃色具有很強的快樂、陽光屬性，所以想要表達快樂，黃色通常是少不了的。
9.可愛
跟兒童、年輕女性相關的設計，通常需要表現出可愛的調性，這類色彩通常是用冷色和暖色相互組合，顏色的明度同樣不會太低，否則會有壓抑的感覺，另外飽和度也不要過高，飽和度稍低一點效果會更柔和一些。
10.健康
想到健康我們立馬就會想藍天白云、青山、綠色的草地和樹葉，還有黃色的小野花等等，所以藍色、綠色、青色、黃色、白色都是常用于表現健康的色彩，紅色也可以偶爾作為點綴色加進來。由于健康的調性也是要給人一種舒適、輕松的感覺，所以整體的顏色明度不要太低。
11.運動
要想讓色彩動起來，對比一定要強，可以是色相對比、也可以是明度對比和飽和度對比。橙色和黃色是兩個很具活力的的顏色，所以常用于表現運動的設計里。
12.科幻
這是一些科幻電影、機動游戲的海報設計常用的色彩搭配組合，給人的視覺感受是穩重而大氣，科技感和神秘感并存，所以背景色通常也比較暗，喜歡用青色和黃色這種比較亮的顏色作為點綴。
13.喜慶
在設計節日海報或促銷海報時，通常需要表現出喜慶的調性，有些設計師會局限在大紅色、黃色、和橙色里，這樣搭配出來的色彩容易土，而想要解決這個問題，一方面可以加入冷色搭配使用，另一方面顏色的飽和度和亮度也不要過高。
14.復古
這類色彩的特點是顏色的飽和度會相對低一點，而且大多數情況下，整體的明度通常也不會太高，常用類比色搭配和對比色搭配。
15.中國風
具有中國風特色的顏色和色彩組合有很多，蔥爺這里僅列舉了8個組合。這類色彩同樣飽和度不會達到最高，有點復古和充滿文化氣息的感覺。胭脂（暗紅色）、緗色（中黃）、紺青（深藍色）、黛（褐色）等是中國風常用的顏色。
16.夢幻
夢幻具有奇妙和神秘的感覺，好像在黑暗中找到了一點曙光，奇遇了驚喜一般，所以大多數情況下，背景色會使用從深色到亮色的漸變。顏色相對會比較豐富，而且以漸變色居多。
17.女性
女性是溫柔的，是感性的，所以該類色彩組合通常為類比色，偶爾會用一點對比色作為點綴，以增加畫面的活潑氣息，顏色的明度和飽和度都不能太低，當然飽和度最好也不要過高，粉色、紫色是常用于表現女性的色彩。
18.優雅
優雅可以理解為低調、高級、溫和、安靜，所以這類色彩的對比通常不會太強，飽和度也會比較低，整體的色彩調性會偏中性，常用卡其色、麻色，還有單色組合及類比色組合。
19.經典色彩組合
除了以上十八大調性，蔥爺還給大家推薦一些經典的配色，很難把它們具體歸為哪一類，但是我們在做很多設計時，用上這種配色總能得到不錯的效果，比如紅黃黑、紅白藍、黃綠黑、等等，在很多平面海報設計中經常能看到。
做b端產品的設計師都知道，為了提升開發效率，我們的前端在投入開發前，一般會選擇一種第三方前端框架作為底層來進行組件封裝。所以開始內容前，我想先聊一聊第三方的UI框架。
目前國內主流UI框架且個人工作過程中接觸使用過的有：
其他不太常用的框架我自己了解不多，如果有了解的朋友，歡迎在留言區討論。
我個人比較喜歡使用【Ant design】，一方面最先接觸Ant design，另一方面資源很全，下載的源文件基本能滿足大部分通用功能，很多控件（比如：各類選擇器、穿梭框等）的視覺與交互體驗也相對較好，可直接復制組件粘貼至設計稿中。
但前端同學更傾向于【Element】，我目前做的幾個項目都是基于Element組件封裝的，據前端同學說他的組件封裝簡單容易修改，對于沒接觸過框架的同學也方便上手無障礙。所以基于此，為了提升開發效率，兼顧全局，我們的項目都是采用的【Element】，我也是花了一些時間專門熟悉新的組件。
1.1UI樣式對比：
截取各官網中 Table 的基礎界面樣式，如下圖：
兩個產品示例出的默認組件樣式有些許區別，【Element】直接列出了不同的樣式類型， 而【Ant design】是結合功能綜合展示的。樣式皆可根據相對應的參數進行修改，前端同學在開發過程中可直接按照設計稿的標注進行修改樣式即可。如果風格一致，直接使用組件默認樣式也是可行的。
如果是數據信息平鋪且單一的項目，直接使用第三方組件庫表格的基礎用法，視覺與交互也能夠滿足大眾審美和習慣，普通后臺簡單數據表格是能夠滿足需求的。
像我現在負責的其中一個項目是供應商后臺管理系統。就是直接用【Element】，作為數據統計信息展示完全足夠，運營運維同事使用時也表示還算滿意。
但有些復雜的B端后臺界面除了承載信息，還有很多相關的操作與處理。產品供給B端客戶使用，數據文檔量大且類型繁雜，并且相互間有不同的關聯關系。很多情況下需要重新根據需求設計，且為了兼顧開發工作量盡可能的在設計上找到折中方案。這就要求最好能夠從框架組件中衍生出來，最少的修改滿足更多的需求。
因我們已確定使用【Element】故而以下所有的對比，以此框架中的 Table 組件功能為基準，進行功能有無與相關差別性的比較。
由上對比看來【Element】與【Ant design】功能基本一致。
需要注意的是：上圖沒有的功能組件，并不代表是不能夠實現，前端同學是可以基于組件重新寫的。
可能很多人會問市面上已經有 Ant Design 如此成熟的 B端設計框架后，可以選擇直接使用，為什么還要增加開發的負擔。
開源確實是非常好的一件事，但是從另一方面考慮，市面上包含Ant Design和Element這一類平臺，都有很多不同點，同時并不是所有的組件Ant Design 都會提供，企業級產品會有很多自身個性化的需求，我接觸的項目一般是把 Ant Design 當作基礎框架，或者底層參考，在此基礎上去做設計框架。
當然在小項目或者初期產品的情況，為了提升效率降低成本會直接使用開源組件庫，各有千秋，最終目的是為了更加有效、好用的完成項目。
當使用組件時，并不需要設置間距等規范，可直接選擇一種一般不會有太大問題。更多的是關注表格中承載的數據字段類型。比如：
文本字段：可點擊的字段、普通文本類、數字字母等，此類長短參差不齊的，最好給出左對齊；
既定字段：日期、時間、部分枚舉類等，字符數一致且較短的，可與表頭標題居中對齊；
特殊字段：金額、狀態標簽、類型標識等業務性較強的，可根據相關特性與閱讀習慣確定其對齊方式。
不論何種對齊方式，都需要考慮到該字段可能存在的極端情況。比如：普通文本若超長，可在鼠標hover狀態時將該單元格展開列出全部字段信息?；蛞詔ips形式，跟隨鼠標位置展示全部信息。
表格（Table），又稱為表，是用來收集、整理、組織、分析數據的二維矩陣。是B端產品中一種常見的信息展現形式，它是所有B端組件中信息展示密度最高，同時涵蓋了B端的所有場景的一個重要的組件。
表格屬于列表的一種。列表分為兩種：
列表擁有一對多的數據結構，能夠讓用戶理清一條數據下的多個對應關系，并且多個對應關系是相互并列。列表能夠將數據在一列中井然有序地展示，保持數據的有序與整潔。常見的使用場景比如郵件、待辦事項等等。
在多維度的數據分析中，最常見的就是表格，使用多維度數據進行統一的結構化展示，讓用戶清晰地看到在同一主題下的多條數據的對比，使數據能夠進行多維度的展示，保證數據的完整性。
本篇文章想要說明的重點就是多維度表格樣式。
表格常和排序、搜索、篩選、分頁等其他界面元素一起協同出現。在企業級中后臺中，具有以下優勢：
列表屬于形式十分單一的組件，對于沒有經驗的設計師來說，會認為能夠調整的地方實在太少，往往在思考層面就會有所不足。對于一個B端表格來說，它需要具備數據瀏覽、數據新增、數據操作、數據統計，因此功能多而全，很難思考解決問題思路。
通常設計師設計單個組件，都會有較好的全局意識。而到了多組件的聯動時，就會出現問題。比如在表格中，除了表格本身，還會有搜索、篩選、視圖、分頁等操作，如果不對多組件的交叉使用進行思考，也會缺少對于這些場景的設計。
在列表中，會承載多種多樣的字段類型，而每一個字段類型都會有相應的差異。形式的不同落到列表上就會有不同的呈現形式，在關鍵數值的處理上，也會差強人意。因此看上去簡單的一個列表，其實會有很多需要設計的點。
設計過程中如何在滿足業務需求的基礎上平衡用戶的瀏覽目的和設計者的傳達目的，如何讓表格在表現層更合理、在操作層更易用，是很考驗產品設計師的數據整合能力。
對于多數B端管理系統而言，數據的查詢和管理都是非常重要且高頻使用的功能，所以常規項目中會包含大量的表格頁面。甚至，有的中小型項目的90%的導航一級頁面都是使用表格，而不存在其它頁面形式。所以，表格的優劣對用戶工作效率和平臺體驗可以產生決定性的影響。
而優秀的 B 端項目表格又不能只像 Excel 一樣可以使用固定的模版，不同項目、頁面、模塊對表格的可視需求天差地別，需要根據具體情況具體分析。
表格的使用場景主要分為四類：數據瀏覽、數據新增、數據操作與數據統計。
表格的數據瀏覽從本質上就是對大量數據進行尋找與操作，在此場景下用戶需要進行高效準確的數據查找。當用戶需要對信息進行排序、搜索、篩選、以及相關業務處理等復雜操作時，表格結構能夠很好地保持頁面效果的穩定性與一致性，提升用戶的操作和閱讀效率。
表格的數據新增場景從本質上是將復雜的數據結構，通過系統字段類型的相應規則，錄入保存到系統中。這也就我們常說的增刪改查的“增”，通常是一個比較常規且高頻的操作。
分為對單個數據的操作、單行數據的操作、多行數據的操作三種情況。
單個數據的操作：就是常見的快捷編輯，可以點擊快捷編輯按鈕，在原位對單個數據進行操作。入口一般在數據行內。
單行數據的操作：主要通常會采取兩種路徑進行操作：一種是進入用戶詳情頁界面，對一整列數據進行編輯，這種情況通常都需要多個數據進行處理，因此進入編輯頁面更容易尋找。另一種是進入彈窗進行操作，這一方案路徑更加清晰便捷，同時和新增可以共用一套控件。
多行數據的操作：主要采取多選過后的操作方式：當用戶想要對多條數據進行操作時，就需要對多個數據進行checkbox 的勾選，從而滿足多行操作的需求。入口一般在篩選操作欄。
表格適合信息的歸納與分類，數據經過歸納整理和合理布局后，更易于用戶在信息之間進行對比，快速定位、查詢其中的差異與變化、關聯和區別。
主要針對用戶需要審查分析。目的是在通過大量的數據分析去得出某一些結論，由于關注的數據會有主次之分，數據與數據之間也會有內在聯系，用戶會更加跳躍地掃視頁面，而且會更加反復地審查數據。
表格的基本設計原則是“全面整合并呈現業務數據，提供順暢閱讀體驗，便于用戶發掘重要信息，進行便捷操作”，滿足業務需求+符合用戶心智模型。簡而言之設計易讀，易掃視，易比較，易操作的表格結構是表格設計的首要目標。
表格層級分明、一目了然，讓用戶更多地感受表格承載的內容信息而不是表格的形式。
對于提高表格查找效率，這里給出一些我個人的建議：
列表以易于瀏覽的邏輯排序，提供合適的搜尋組件幫助用戶快速查找信息。
表格應該是可交互的，對于查找好的數據能讓用戶迅速找到對應操作進行決策，如導出、編輯等的快捷操作處理。
處理交互提效建議：
B端產品大多數業務場景都是使用基礎表格，但在B端產品的業務多樣性使得很多特殊的表格有它獨特發揮的空間。除了了解基礎表格樣式以外，了解更多的表格類型也能幫助設計師在做復雜項目時更加得心應手。
基礎表格樣式，是由行與列的單元格組成，能滿足用戶多維度查看數據的需求。通常用于橫向表格的縱列數據較少時，使頁面不需要滑動條也可以展示完全。操作項一般置于頁面最右側，便于用戶瀏覽完成后進行操作。
表格中的數據為包含與被包含的結構時，可采取樹形表格。
每一個條目可展開或折疊包含的更詳細的信息，也包含嵌套子表格。通過逐級大綱的形式來展現數據間的層級關系，讓整個信息結構變得一目了然。非常適合大型數據表或者項目管理工具中。
一條主數據下有多條數據結構不同的關聯數據進行嵌套時，這時候就可以用子表格進行創建。它能夠對主數據進行更加細致的解釋，詳細地了解主數據中數據的含義。結合層級表的使用場景，多以查看為主，編輯需求較少。
設計中需要考慮：表格中當父數據刪除時，子數據如何處理？設計上對父子之間的關聯有著何種限制？
當一條主數據下有多條數據結構不同的關聯數據進行嵌套時，這時候就可以用子表格進行創建。
它能夠對主數據進行更加細致的解釋，詳細地了解主數據中數據的含義。從表象上看，就是在一個表格中還能嵌套另一個表格或其他信息。
當一個表格里面有多條數據在同一個小范圍的維度進行展示時，或者說表頭有很多分組進行區分，它就是交叉表格。
它能夠通過硬拆分將數據進行切割，能夠滿足具體業務上的需求。
當一個表格里面有多種圖表數據進行展示時，他就是圖表表格。用戶點擊某一數據后，直接跳出數據的統計圖，方便用戶進行對比。同時這一功能也可以通過儀表盤這樣的功能去解決，是目前很多產品最愛做的數據可視化。
除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關注的數據。有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細放在頁面底部。大量的表格也會導致視覺的單調。
可以用卡片的形式來展示信息，將信息以組的概念呈現，單張卡片內的信息按優先級進行排列。此外，卡片彼此之間又形成一個整體。
卡片是一種承載信息的容器，對可承載的內容類型無過多限制，它讓一類信息集中化，增強區塊感的同時更易于操作；卡片通常以網格或矩陣的方式排列，傳達相互之間的層級關系。適合較為輕量級和個性化較強的信息區塊展示。
注意：在有限的表格空間內需注意卡片信息之間的間距，若卡片信息過長可做截斷處理。
在實際工作中，上述表格類型還有可能互相結合，以更好地達到相應的分析目的。比如垂直–層級，矩陣–數據立體表等。
信息內容的有效傳達是表格設計的本質，就表格本身而言應該是隱型的，應該讓用戶注意力聚焦在核心內容上。所以，邊框的顏色應非常淡，不能妨礙快速瀏覽。
表格有均勻而明顯的分割線，邊框單元格比較明顯。
適合：對于數據之間的關系緊密（列信息較多而沒有足夠空間用留白來分割信息）且有對比關系的。
僅顯示水平線可減少整個網格的視覺噪聲。
適合：它能顯著減輕表格在垂直方向的視覺重量，提升用戶進行大量數據對比時的速度；因此對于所有數據集大小，此樣式都是最常見的。
隔行交替使用不同底色來區分數據。
適合：每行交替使用不同的顏色背景是幫助用戶在閱讀時保持其位置的另一種好方法；對于較大的數據集，建議使用此樣式，在較大的數據集中，交替模式將很清晰，并且不會引起特定行突出顯示的混亂。
移除所有分割線，通過盡可能減少視覺噪聲來創建極簡外觀。
適合：對于小型數據集，如果用戶在閱讀時不需要幫助就可以保持位置，則建議使用此樣式。
前面我們聊了表格的行元素和列元素相交就會形成一個簡單的二維表，行，列元素的空間組合就確定了一個個單元格。常見的表格布局有水平型、垂直型和矩陣型三種基本布局，分別強調行、列、單元格。
水平型會弱化列的存在，強調行信息的連貫性，適用于用戶閱讀信息時是從左到右，然后自上而下逐條掃描，適合大量信息的瀏覽，是b端產品用的比較多的一種布局。
垂直型是在行分割的基礎上，通過強化列的視覺特征來突出不同列信息的對比。
矩陣型的表格有均勻統一的分割線，邊框單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息的表格，同時我認為單元格合并的情況也屬于矩陣型。
設計建議：
表格中所承載的數據信息才是主體，在進行表格設計時，尤其要注意去除所有非必要的視覺元素，讓用戶將注意力集中在數據信息上，而不是無關的邊框、底色等。
表格由內（展示項）、外（操作項）兩部分組成，其中內部構成元素包括標題、表頭、表體等；外部元素包括篩選區、按鈕區、底欄等，如圖：
除了表頭和列表內容外，其它模塊內容都根據實際需求應用。任何表格設計的第一步都是制定大框架，即包含的模塊和對應分布位置，再展開后續的細節設計。
1. 標題
標題是整個表格內容概述的名稱，一般會放在表格的左上角，符合用戶的閱讀習慣，同時也能突出標題的重要性。但在有些情況嚴格意義上的標題則不存在，會被頁面標題、面包屑或其他內容代替，主要看其能否表達對表格的概括。
標題盡量簡潔明了，不要太長。如果標題名稱難以理解的話，可以加二級提示，有兩種常用樣式：tooltips（常用）、二級提示語。
篩選操作區方便用戶快速定位查詢數據與操作數據，是承載表格核心功能“增刪改查”的重要橋梁。篩選操作區的排序方式對整個表格“好查找”起到了至關重要的作用，所以表格設計篩選操作區的設計至關重要。
表頭信息是對數據屬性的分類或基本概括，可以理解為表格總結，表頭也可以指行列標簽，是對所屬行或列的描述。表頭也可以承擔一些簡單的篩選、凍結與排序，方便用戶對具體的行列進行篩選操作。
表頭是用戶快速瀏覽表格布局的關鍵信息，表頭字段應當符合人們的思維慣性，保證大部分用戶能理解數據。
是表格的主體區，承載用戶的每一條數據，也是整個表格的核心。是由一個個的單元格組成，單元格的排列組成行或列，行/列中的數據可以是文本、計數、百分比、狀態、操作等任何形式，在表尾還可以進行數據統計，例如合計、平均值等。
單元格的大小行高都會直接影響用戶使用表格的體驗。單元格的設計上也會有很多設計思路，在后半部分也給他家提供了我自己的看法。
底欄位于表格最下方，一般展示正文的數據概要信息，有時也做數據的分類統計，或者配合篩選操作區放置批量處理操作、備注說明等內容。
分頁是不屬于表格當中，但當數據超過用戶所設定的閾值時，就需要使用分頁拆解數據，所以分頁和表格是經常聯系在一起的。分頁一共有：基礎型、迷你型、完整型三種類型。而如何進行跨頁的操作，一直都是分頁在B端中的難點，需要有好的思路與邏輯，在分頁模塊中與大家聊聊。
作者：789研習社 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
表格系列第一篇我們聊了表格的基礎內容和表格的組成要素，包含表格由內（展示項）、外（操作項）兩部分組成，如圖：
表格作為展現結構化數據最為清晰、高效的形式，常和按鈕、搜索、篩選、分頁等其他元素一起協同，構成表格頁。通常表格頁面包含三個部分：數據過濾、數據操作、數據查看。
數據過濾是對數據進行篩選的部分，由搜索、篩選、標簽這三個部分組成。產品設計上提供多維的篩選和排序，將操作者所關注的數據展示到前面，便于快速查看、對比、分析信息，是一種增加用戶效率的有效方式。
一般搜索和篩選會同時出現，但是兩者一般很少同時使用來對數據進行定位；
搜索的交互觸發方式有“實時篩選”和“點擊按鈕觸發篩選”。實時篩選只適合數據量較小、數據嚴謹的表格頁面，建議謹慎使用。“點擊按鈕觸發篩選”適合大部分表格場景。
因用戶需要手動輸入，很難保證精準搜索，原則上所有搜索均為模糊搜索，必要精準搜索的地方使用篩選功能，給用戶提供篩選選項。
用戶搜索意圖不明確時，將用戶的查詢與待檢索的內容進行模糊匹配，使用模糊搜索時一定要結合自己的實際場景，慎重使用。
優點：只要有相關的內容都會被檢索出來，減少了精準搜索帶來的記憶負擔；
缺點：容易把相關的信息也帶出來，例如檢索地址廣州，把廣州的相關編碼也匹配出來。
用戶在搜索時，針對某一數據字段搜索，來查找所需要的數據。
優點：搜索匹配精準度高。
缺點：每次只能對單一條件進行搜索。
搜索根據表現形式，可以分為以下四種類型：
單屬性精確搜索：通過某個特定屬性就可以快速定位到目標數據，具有唯一識別性的、高使用頻率的、對用戶決策有意義的。
切換屬性搜索：可以設置幾個常用的類別來快速切換搜索的維度，方便用戶使用。
多標簽模糊搜索：表格多個數據都具有特征，往往業務要求對數據的精確度較高。
多屬性組合搜索：可以輸入多個字段進行組合搜索（取并集），對空間的利用率高，適合更加復雜的列表內容。
篩選是將用戶所需數據選出展示，其余數據暫時隱藏，通過篩選器的選擇可以快速定位所需的數據，取消用戶輸入的過程，提升查找效率。一般篩選有三種形式：
平鋪篩選就是將篩選項的內容，直接展示于頁面之上，用于篩選條件很多，單獨篩選條件對應數據無交叉，常見于信息密集型產品。
優點：可以承載多維的數據信息，選中項的可見性高，用戶理解成本與操作成本低，且提高了用戶篩選的效率。
缺點：占用太多頁面空間，影響首屏的展示效率，增加用戶的決策時間。一般配合“勾選即執行”使用，因此在執行篩選的過程（動畫或加載時長）可能分散用戶精力。
通常電商類產品在篩選區往往采用平鋪布局。
條件篩選是最常用的篩選交互，便于從多個維度篩選，應對各種復雜的篩選情況。條件選擇完后，選擇觸發篩選（若篩選條件不交叉可以選擇實時篩選）。
優點：空間利用率高，起到了很好的收納作用，整體頁面更加美觀。
缺點：當篩選過多時，信息量過于冗雜繁多。
2.3 表頭篩選
優點：篩選當前列，更直觀，一般情況下表單左側數據篩選頻次越高。
缺點：篩選的內容僅限于特定、單次列的篩選，對于首次使用者來說陌生，交互形式需要學習
2.4 如何合理的使用篩選項
信息排序：基于用戶使用場景，以目標導向為依據，將高頻的篩選項排列到前面，低頻的篩選項置于后面。
默認折疊低頻篩選項：當篩選條件有高低頻之分，且對頁面空間要求較高時，通過展示高頻篩選項、隱藏低頻篩選項，更好的提升用戶體驗。
所有篩選項都很低頻：以點擊高級篩選按鈕的形式觸發，將全部篩選項置于氣泡或者彈窗之中。
在企業級中后臺中，用戶查看的數據往往屬性較多且不唯一，通過簡單的檢索方式很難精確定位到目標數據，所以，在實際使用時，常會將大量非交叉關系的屬性進行羅列，搜索、篩選、標簽切換組合出現，形成多屬性組合檢索。
三、tab標簽
標簽切換一般用于和時間、狀態的流轉有關，且沒有交集的數據內容。數據類型在5個以下的建議采用tab頁切換的方式進行交互，展示清晰，用戶操作效率高；超過5個可以考慮下拉選擇或模糊搜索。
優點：根據標簽，可以很清楚知道劃分，篩選的準確性高，切換tab就可以篩選內容。
缺點：分類需覆蓋選項，并且保證每一項沒有交集，分類不能過多，超過7±2個選項可選擇下拉篩選。
在使用中，索引本身應該是0思考成本的，否則就失去了索引的核心價值。圍繞這一點，有兩個設計原則：
1）寧少勿多和高頻前置：即不要揣測用戶需要，最常使用的展示位置盡量靠前。
2）當搜索項不可避免的比較多時，可以進行分類展示，降低尋找成本。
數據操作是表格的操作部分，根據操作對象的不同，可以分為：
單行操作也稱行內操作，常見的顯性與隱性兩種方式。
1.1 顯性操作：
操作項顯示在行內，直觀；文字按鈕操作項一般不多于三個，圖標按鈕不多于四個時，操作項跟在行條目后面；當超過時，建議將相對低頻操作選項折疊收起，點擊"更多"或“...”下拉顯示。操作按鈕致灰時，鼠標選中可顯示原因。
如果單行操作不那么重要，或者說行操作過多影響用戶閱讀時，可將所有的操作進行隱藏；
當用戶鼠標懸停時進行展開所有操作，界面簡潔，留更多的空間給需要查看的數據內容，減輕空間壓力，減少干擾。這種方式能最大程度上滿足用戶快速查看與編輯的需求，但是在實際使用中，用戶的初次使用門檻較高，需要有一定的學習成本。
a、對齊式
將所有操作進行整齊排列，一般是一個操作對應一列，當有操作缺失時，展示為空，這種方式能夠讓用戶直接了解到操作的缺失，但反復的出現會造成表格視覺上的冗余，適合列數較少的表格使用。
將所有操作按照一定的預設排列順序進行平鋪，這種方式能夠適應B端的大多數場景，將操作都簡單平鋪出來雖然看上去簡單粗暴，但是在實際工作中，也是一種不錯的處理方式
設計點：操作按按鈕是全局操作還是單行操作其實是可以根據具體業務場景來決定的，判斷用戶批量操作是不是高頻功能，如果是，就采用全局操作，如果操作是低頻操作，那么完全可以只提供單個操作功能。
二、批量操作（表格外）
批量操作適用于數據量較大的表格，通常把操作放在表外部上方，這樣操作更便捷。批量操作允許用戶對一行或多行對象執行操作，通常與復選框操作配合使用，并在選中復選框后激活表上方操作按鈕，如刪除、批準、拒絕、復制之類的操作，這將節省用戶時間，避免重復對多行進行相同操作，分顯隱性操作：
較為常用，外漏操作簡單易懂。如有贊的批量操作，表格左上角和左下角都有，這樣不管用戶從上往下選還是從下往上選的場景都能覆蓋；飛書的批量操作外漏在表格表格的右上角，雖然按鈕放在右側符合用戶右手操作鼠標的習慣，而且考慮到適配問題，但是批量操作的路徑不符合用戶的操作動線，路徑變長，大家可自行抉擇
容易造成記憶負擔，增加學習成本，適合批量操作較低頻的操作，產品沒有那么復雜的產品。如飛書文檔
統攬全局，無需選擇數據內容即可進行的操作，常見的【新增】、【導入】操作。
數據查看是表格的主體部分，是信息的主要承載區域。在開始之前，我們先來看看該區的結構：主要由表頭、行、列、單元格四個部分組成。
每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數據類型。
表頭在展示信息的時候盡量概括、準確、簡化，達到節省表格頭部空間，引導用戶的注意力聚焦于表格中的數據本身。表頭并不是表格的必要元素，當數據本身能自我表意的時候（例如郵箱），表頭是可以刪減掉的。
通常，表頭的設計會和下方列表設計有一定的區分，標頭文字有一定的標題屬性，所以會通過背景色、分割線、文字加粗等方式來做區分。
根據表頭的構成，可以分為以下三類：
除了容納行標簽之外，表頭也可以添加排序、搜索、篩選等功能，通過對表頭標簽的篩選可快速完成篩選條件。這些功能受列的影響，一般只能做單次篩選。雖然表頭篩選能在一定程度上節約空間，但對于復雜業務的產品來說，數據信息列多，高頻篩選功能可能會被遮蓋，表頭復雜影響用戶表格閱讀，不推薦使用。
可配置列與配置篩選條件的功能類似，同樣是考慮到不同角色的用戶，查看數據的視角不一樣，對應的關心的字段也會不一樣。
有些表格由于數據量較大，需要對頁面的上下滾動完成對數據的查閱，對表頭進行固定，可以幫助用戶更快地找到單元格的屬性和含義，尤其是單元格屬性信息數據沒有特征時（比如都是數字、百分比、姓名等）固定表頭可以大大提高使用效率。
當然還有固定列，當表格需要展示不同類別的數據較多一屏展示不下，可以對首尾字段進行固定，讓用戶通過左右滑動來實現對數據的快速翻閱，滿足用戶對數據的認知以及對數據操作的需求。
注意盡量避免橫向滾動：正常鼠標橫向滾動是需要用戶按住 「Shift + 滾動」 才會使表格進行滾動，對于所有的鼠標用戶而言，橫向滾動都是極為痛苦的。
表頭在能夠概括的情況下，盡量簡煉、準確，一般可根據上下文關系來進行減短簡化，以達到節省表格頭部空間和減輕視覺壓力的作用。當數據結構比較復雜的時候，使用多級表頭來體現表頭與數據的層次關系。
對于比較復雜的表頭，可以定義一個專有名詞，如果有需要解釋，則在字段名稱旁邊加說明小圖標(小問號)。鼠標hover上去對專業術語或用戶不常見的名詞給予該字段的詳細解釋，同時滿足新手、普通、專家用戶的需求。
如果表格數據可以自我解釋，表頭就不是必須的。例如電子郵箱的收件表格，每列數據區別度高不會混淆，去掉表頭也能輕易閱讀。
表體部分所需要注意的設計點比較多，內容包括了數據的對齊方式、字體、分割線、行高、數據顯示、單元格、行與列等，下面我們來依次聊聊。
表格內數據按照格式塔原理進行對齊，能讓表格更加規范易理解，營造出良好的視覺引導線，視線流動更順暢,提升數據的瀏覽效率，讓用戶快速的捕捉到所需內容。其對齊規則如下：
符合正常的心智模型，便于用戶掃描過程中快速定位到下一行文本，左對齊的文本在展示的時候起到了縱向分割線的作用。多行情況下，居中和頂部對齊都是可以的。
包含金額、長寬高等需要關聯比較的數字字段，這是因為我們在對比數字時，首先看個位，然后十位、百位等。
比如日期（2020-11-11），狀態文字（未審核、已收款等）或者存在布爾關系的文本（是/否、男/女等），字段固定不變，居中對齊能更好地信息呈現。這里根據業務也可以按照文本型左對齊處理，讓用戶查看表格不會感覺混亂。
對齊方式保持相同可以使表格更好閱讀，上下文保持一致，能保持表格豎直方向整潔，營造一致性和上下文環境。多級表頭：多行或多列合并居中對齊，最底層表頭可以按其數據對齊方式對齊。
使表格更加規則，視覺統一提高操作效率。
表格數據一般包含文本和數字，良好的字體能提高表格本身的閱讀性。設計上需要注意以下幾點：
表格中的數據要根據數量級確定展示形式，不需要精確的數學呈現，可以讓用戶更快地查找信息，下面是展示形式的建議。數據的度量單位無需重復標注，只需要在表頭標識清楚即可，注意同一列單位保持一致。
深入了解用戶需求，根據需求為用戶提供差值、升降變化、合計值、平均值等直接展示形式。
表格中字體保持一致，文字信息字體統一、數字信息字體統一即可。數字信息字體選擇——建議等寬等高字體，等寬的數字在同一豎線時更容易對比。推薦以下幾款數字字體在表格中有更好的呈現效果，分別為：微軟雅黑、Helvetica Neue、Helvetica、Arial、sans-serif。
設計表格時，盡量避免任何裝飾性字體，簡約至上才是關鍵
不要出現襯線字體：因為個性會產生閱讀噪音，不利于用戶對數據的理解和思考。
不要出現全大寫字體：因為它很難讀，需要轉化思維。
不要出現使用斜體：易引起視線疲勞，影響閱讀。不要出現多種字體：保持風格統一。
在表格設計當中，每一條線都有著它存在的意義，比如：
當表格中展示橫線，隱藏縱線：用戶的橫向閱讀體驗更佳，強調一條數據的完整性，能夠讓用戶進行快速地對應。
當表格中展示縱線，隱藏橫線：用戶的縱向閱讀體驗更佳，強調數據上下間的對比，能夠讓用戶找到同一緯度數據下的對比。
在表格設計中，合理地使用分割線可以實現對表格行與列的強調。按照分割線的分布情況，可以分為4種類型：網格型、水平線型、斑馬條紋型、極簡留白型。這個部分在上一篇已詳細說明。
設計tips：表格具有的顏色盡可能少，顏色和可讀性是密切相關的，要合理的使用顏色，普通表盡量使用簡單的背景色和點綴色。
背景色方面，除了行/列交替顏色(可以區隔內容，引導視線)、懸停高亮底色(便于準確辨別光標所在行)等處理方法，還可以對表頭表尾進行視覺區分，但不能增加過多顏色以引起混亂。
分割線顏色盡量不要與背景色相差太大。當字體選擇深灰色，背景為淺白色時，邊框選擇淺灰色，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏。
分割線和斑馬紋的應用色彩都不應該太深，如果你項目中對表格有比較多的選中需求，那么就不太建議使用斑馬紋的格式，因為選中背景需要被高亮，那么一個列表就會出現 3 種顏色，是要盡力避免發生的。
開發同學工作的時候，使用的是盒子模型，設計師在出設計圖的時候也要遵循開發邏輯。
為了讓表格中的文字高度看起來舒適，有著視覺的呼吸感。我們首先得了解影響行高是由文字的高度以及上下間距組成。因此我們得出：
單元格高度=內容高度+上間距+下間距
單元格的尺寸包含：文字行高建議設為字號的1.5倍，上下間距設為字號的1.2倍。
對于單行顯示數據內容的表格，建議行高約為內容高度的2.5-3倍；對于多行顯示數據的表格，建議行中內容的最高點與最低點到行框的上下邊距略小于文字高度。
當數據有單行信息展示有多行信息展示時（或長度不固定），要定義內容的行數（根據業務），根據行數確定行高多出的內容做省略處理。
固定行高時可以規范幾種不同的表格行高，例如在我日常工作中規定了3種行高56px80px110px，行高較高時，我們數據內容都進行居中對齊就會有一些問題。有些單元格只有一行信息，有些有多行信息，會使頁面看起來更混亂，信息查找速度降低。
表格行高跟隨行內占用最多行數的單元格變化，設置固定的上下邊距，表格行高隨著數據信息的換行而變化如下圖。
單元格數據一般有文字、圖標、頭像、進度等，在具體業務中，如果你找對了用戶想看的關鍵數據，將會大大提升用戶體驗，反之則干擾用戶查找信息，對于較為重要的數據可以進行關鍵數據的標識設計。
標簽：關鍵數據較多，顏色與視覺重量要做區分。
圖標：名稱與文件類型圖標區分。
人員信息：展示在表格中也十分常見，通常會用頭像+名稱的方式，例如下圖temabition和飛書中對人員信息的展示。
度量單位的使用：其中的關鍵區別在于數字的大小。數據的度量單位無需重復，一般在表頭標識清楚即可。
進度條：進度條或簡單的數據圖，它更能直觀地展示數據的進度狀態，方便用戶對數據信息做判斷如下圖。
關鍵屬性標識：比如用戶重點關注數據狀態、某些數據的上升和下降等，可用符號進行標識，幫助用戶快速定位到目標信息。
空表格：表格數據為空時要給予一定的提示信息或快捷操作，讓用戶更快地進行對數據的操作。
空單元格：當表格單元格中沒有相應數據時，要避免直接留出空白單元格。空白格容易造成用戶的困惑甚至誤解，用戶會搞不清楚到底是沒有數據，還是根本沒有值？
正確做法是，數據不存在（數據庫中沒有該字段）用“-”，沒有數量（數據庫中有該字段）用“0”，且小數點后位數、單位，都要與上下單元格保持一致
是對單條數據的修改，直接在單元格編輯信息的形式有很多，針對不同的數據提供對應的編輯方案。
包含：原位編輯，懸停氣泡編輯，下拉狀態編輯，點擊彈窗編輯拖曳排序等等。針對不同的業務性質對單元格采用不同的交互形式。
拖拽排序為用戶的自定義排序，在用戶拖拽時頁面布局保持不變，適用于數據量較小有自定義排序的情況下。
可以通過視圖切換查看更多細節，例如在teambition中支持對任務的表格/列表/看板三種視圖的查看，每種視圖的側重點不同，可以 適應不同角色用戶的不同專注點。
工作中常常會遇到單元格數據過多的情況，常見的方法有兩種：
1、定義一個單元格長度或字數限制，超過該范圍以"..."顯示，鼠標懸停時出現氣泡顯示完整內容。
2、折行顯示，這種方法讓平鋪直敘，用戶可以直接了當的看到所有信息，建議不要超過三行，超出可“...”顯示。
3、允許用戶拖邊框設置列寬，并記錄設置。這種方案弊端是會占用橫向的空間。
列寬的設置對于用戶的高效閱讀還是很有作用的，在設計時要根據具體的業務信息進行分析，列寬嚴謹的處理方式有三種：
第一，通過柵格，由列的數量決定列寬，主流框架組件一般是這種；
第二，可以固定部分列的寬度，其余列則按百分比處理；
第三，在固定寬度的基礎上，允許用戶自由拖動調整列寬的大小。（當然我覺得不要太拘泥這個，合適就好）
為了讓不同數據在表格中相互獨立，不混淆。我們需要保證首尾列的內容與表格兩邊的間距N1保持固定，不同列之間的間距N2在最小寬度的基礎上，隨著表格的尺寸不同而做自適應的變化。
在設計表格的初期，就需要做好設計規范，表格的邊距要統一制定。
列的數量建議最多展示9條，因為人們的記憶在7±2之間，數據太多用戶會找不到重點。但也不是必須，根據業務需求，如果需要大量數據展示時也要展示，因為視覺永遠低于業務（好用比好看更重要）。
列信息從左往右視覺權重程度逐漸降低，最后一列權重高（以眼動實驗或點擊數據為依據得出權重高低）。所以盡量減少列的數量，關注用戶需要的必要信息。當數據列過多時，要分清主次列，非重點、輔助性信息可以通過次級入口來解決，如固定重要列(主體名稱/操作列)，次級列在表格中間區域左右拖動。
為便于用戶對數據進行對比分析，可以在原始數據的基礎上給出差值、升降變化等數據處理結果，減少用戶數據加工的過程，直達用戶獲取信息的目標(需要明確用戶目標)，提高用戶的閱讀速度。
在一些用戶高度自定義表格中，數據的列寬不好確定的情況下，可以允許用戶對列寬進行調節。通過光標的變化提示列寬自定義操作，拖動可完成列寬設置。
列數據還可以根據用戶需求進行自定義設置，可以選擇要展示的列，在默認情況下僅展示最常用、最重要的幾個指標（如下圖），也可以對列進行排序。在表格右上方的設置按鈕對表格進行設置，清晰高效。用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。但需注意系統應記住用戶上一次的自定義列設置，減少用戶重復操作。
底欄在表格最下方，一般是統計信息、分頁控件、備注說明、操作按鈕(加載更多)等內容。
底欄最常見的元素就是分頁，分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。
1. 良好轉換：用戶在結果列表中查找特定信息而不僅僅瀏覽信息流。
2. 掌控感：分頁可以讓用戶知道表格的總量以及當前頁面在總量中的位置，知道瀏覽完頁面需要多長時間。
3. 數據加載快：通過對加載內容的限制，可以極大的減少數據加載的時間。
額外的動作：用戶要到達下一頁表內容，就必須點擊分頁控件上的按鈕跳轉，等待表格新內容的加載。
簡潔型：當分頁數量較少時，通常在7頁以內，就只有最基礎的展示。
迷你型：當頁面空間不足或者降低分頁的視覺影響時，可以采用迷你型。
多功能型：當表格數據較多，為了滿足更多的用戶需求，可以根據需求選擇分頁類型。完整型的雖然滿足各種功能需求，但是所占空間較大，所以我們要根據自己的需求合理拆分使用。
分頁的選擇需要根據不同的場景選擇最優的設計方案。
表格無限下拉加載使用戶在數據內容面前一直滾動查看。向下滾動的時候不斷加載新內容，雖然十分方便與誘人，但不是什么場景都適用。一般來說，無限滾動適用于在數據有限且信息重復的表格，有利于內容探索。分頁則適用用戶在尋找特定信息及瀏覽記錄，易快速訪問。
1.高效瀏覽：一個高效的方法讓用戶瀏覽表格數據信息。
2.體驗更好：用戶使用滾動能獲得比點擊分頁有更好的體驗。
1.受限性能：緩慢的加載速度會造成用戶的不耐煩與離開。當數據量過大時，結果就是頁面性能越來越低。
2.位置丟失：沒法標記當前位置且不能再隨意回到之前位置。一旦離開，就會丟失當前的瀏覽記錄，要回到上次的位置，必須得重新滾動去尋找。
3.信息缺失：滾動條并沒有反映出實際數據量。
除了分頁的使用還可以進行無限滾動的交互，鼠標點擊“加載更多”按鈕以查看更多數據。這個功能不太適合數據量較大的表格，在具體業務中一定要慎用。
分析產品，也是難到很多 UI 設計師的問題。很多人認為這屬于產品經理的工作，但實際上 UI 設計師也離不開使用產品分析的技能來處理日常的工作，以及提升自己的產出質量。
產品的分析其實遠遠沒有想象中那么玄乎，這篇文章就要教會大家如何通過正確的步驟完成對產品的分析。
以下為正文。
產品分析，顧名思義，就是對某互聯網產品，進行系統的、多緯度的分析，并最終完成一份邏輯清晰，符合客觀事實的商業報告。
為什么我們需要這個報告？那是因為對于我們工作的決策來說，獲取越多有效的參考信息，就越能幫助我們做出正確的選擇。
舉個例子，如果我準備做一款針對定制奶茶外賣的 APP，那么就要了解這樣的 APP 產品通常有哪些模塊和功能，通過 APP 下單的流程是什么樣的，以及用戶更喜歡什么樣的設計或者交互。這時候，光靠我自己腦補是沒用的，我得分析同行或者相關外賣 APP 產品，才能得到明確的結論，然后作為依據開始設計我自己的產品。
或者，我們在面試或者客戶談判之前，有認真的分析過對方的產品，那么在溝通過程中就可以讓我們的處境更有利，能進行更有質量的溝通和探討。
產品分析的好處很多，不僅能幫助我們解決當前的問題，也可以幫助設計師鍛煉自己的邏輯思維能力，產品能力以及業務能力，是升職加薪的必備技能。
接下來，可能很多同學已經忍不住摩拳擦掌，想要知道產品分析應該怎么開始了，但別急，我要先講講一個被很多人忽略，以及在眾多講解文章中都沒有提及的東西，就是產品分析的 —— 目標。
前面提到，產品分析最后要以商業報告的形式呈現，而一份合格商業報告是要提供 “明確的結論” 的。如果這份報告指向性不清晰，洋洋灑灑寫了一百頁，像流水帳一樣把所有能羅列的分析內容全都一股腦做進去，那對于自己和看的人都是一場災難。因為這樣的報告沒有重點，缺乏閱讀性。
開始分析前，我們要確定一個明確的目標，即想要通過這份報告獲得哪些信息。在獲取的內容上，往往不會只想得到一個結果，很可能會是復數形式，所以我們需要列一個表格，將它們羅列出來。
比如我們再用想做奶茶外賣服務的APP為出發點，那么我們分析美團或者餓了么的產品，定了下面這些目標：
可以看出，對于產品、交互層面的分析明顯要大于設計的權重，根據 MVP 原則，第一個版本應該要得出的是一個流程可以跑通的產品，在前期過分關注設計和細節并不是首要任務。
所以，在不同的場景、時期、戰略上，產品分析的側重點就不同，而且留給我們的分析時間也不可能足夠充足的，所以也要將精力集中在最重要的事情上，提升效率，才可以真正解決問題。
整個產品分析的內容，可以劃分成多個緯度和若干的細節，我用下面這個思維導圖表示出來。
這樣的圖表讓人望而生畏，如果每一部分我們都認真做分析，那么勢必得寫出非常多的內容不可，所以才有了前面所說的要規劃分析的目標，在實際執行過程中有很多分析項是不需要提及的。
再者，產品分析中還包競品分析、運營分析、交互分析、視覺分析、文案分析等分支，它們各有側重和取舍，所以不要為此而感到恐慌。
下面，我們分別對這些內容進行簡單的說明。
1.產品的基本信息
分析任何產品的第一步，就是對它有一個大致的認識，首先就是去下載和體驗它，并且能用一句話來概括它的功能，然后通過該功能解決了用戶什么樣的需求。
然后就是它所處的行業目前的狀態，是否規模連年上升，有什么重量級新聞或者革新，未來的發展趨勢是什么。如果我們不了解的情況下，可以多在百度、知乎、新聞門戶上進行搜索和了解
盡可能收集可信的數據報告或者圖表，便于信息的整理。
對于一些新上線不太久的應用，通常會帶有非常明顯的初創團隊烙印，可能有一些匪夷所思的交互或者功能，這時候在應用上浪費時間干想是沒有用的，可以花點時間在網上找找創始成員的履歷，會對我們認識應用有更大的幫助。比如拼多多創始人在上線前有 “拼好貨” 的多年積累，產品模式是經過檢驗的產物，有大量相似的特征。
最后，還可以對產品當前的處境做簡單的收集，有沒有強大的外部競爭，它們各自在市場中占比的數據，以及用戶在不同商店、社交平臺中對其的評價。這可以幫助我們對該產品的競爭力和商譽做出初步的認識。
2.用戶研究
用戶研究這個名詞出現得非常頻繁，想不看見都難，它是專業產品團隊必備的項目準備工作。用戶研究的方式和產出物多種多樣，通常我們會建立清晰的目標畫像找出目標用戶，然后對他們進行訪談、調研，設計可用性測試、眼動測試等等，幫助我們更好的推出可以被用戶喜愛的產品。
但在我們研究外部產品的時候，往往不需要將它想得太復雜（除非是對直接競爭對手的分析），否則只需要整理該產品的目標用戶畫像即可。
用戶畫像即總結核心用戶多個緯度的特征，主要分成三個部分。
生理主要就是用戶的年齡、性別、身高或體重等特性，外在的則是諸如學歷、工作履歷、所處城市、薪資狀況等可以直接收集的內容，內在的則是性格、愛好、行為（喜好女裝之類的……）等等和關聯主觀特征的內容。
根據我們的需要對這些屬性進行篩選，就可以制作幾個標準的用戶畫像卡片出來，比如下方這種。
3.用戶體驗要素
因為這兩年對于產品、體驗、設計的專業分析需求高漲，所以 《用戶體驗要素》 中的五要素就成為大家喜聞樂見的分析模型，它給我們提供了明確的分析步驟和方向，易于上手。
戰略層：
戰略層指的是產品在宏觀、商業層面上的的考慮，需要我們自己的判斷，因為如果不是內部人員，那么對于一款產品的戰略層思考是無法做到絕對準確的。雖然網上可以搜索到很多商業分析和企業 PR 稿，但是這些內容的使用往往是具有欺騙性的，是基于運營需求拋給大眾的障眼法。
比如我之前分析的一篇關于瑞幸咖啡的總結（個人總結）：
https://www.zhihu.com/question/306547560/answer/559771838
所以，報告中沒有充足的把握時就不要在這個問題上侃侃而談，只需要回答，一款什么樣的產品才可以滿足用戶的需求獲得商業上的成功。
范圍層：
戰略層可以獲得的信息通常是一個比較宏觀、含糊的概念，所以，我們要來制定更具體的方案，明確產品應該包含那些功能和服務，規劃產品功能要覆蓋的范圍。
比如提供奶茶的外賣服務 APP，初期我們的功能包含選擇店鋪商品、加入購物車、交易結算系統，但不包含資訊推送、曬單社區等功能。
所以，范圍層就是將該產品提供的最重要的服務、產品內容羅列出來。
結構層：
這就是一個產品的功能或者信息結構，通常我們可以用思維導圖或者樹狀圖的方式進行梳理。最初級的方法是通過對可視頁面的層級做梳理，整理出產品的頁面層級結構。
而更好的方式，是根據產品的幾個核心功能建立產品流程圖，將操作的結構與邏輯展示出來，繪制這個圖表的過程中可以更好的加深我們對產品的理解。
框架層：
框架層即頁面的布局結構，以及組件層面的交互和展示，一般來說，可以研究產品的主要流程頁面，每個頁面的布局和信息展示是否合理，操作是否順暢。
如果覺得沒法很好的理解，書中建議是通過 “界面設計”、“導航設計”、“信息設計” 三個角度切入，但這樣操作性太差。建議在分析這個界面的時候，只要關注內容從上到下的布局內容有沒有契合主題，并且重要的組件中，字段權重能不能很好的被表現出來即可。
比如我們看下面飛豬的航班頁面，頁面模塊依次是城市、日期、班次列表、排序篩選。在航班列表中，最被用戶關注的價格信息得到凸顯（證明買機票的用戶對價格更敏感），時間作為次級權重元素相對被弱化但依舊易于識別。
表現層：
這里就是著重分析產品設計本身的特點了，相對就容易了不少，只要分析配色的方案，設計的一致性，捕捉動效和情感化設計的細節即可。
就不展開更多的說明了。
用戶體驗五要素的分析一樣不是散亂的拋出結果而已，如果按原書的方法做分析，肯定也會作出非常復雜的報告，所以我再提煉一次用戶體驗分析的思路。
通過分析產品的商業目標，進入劃分功能和服務的范圍，之后根據核心的服務總結主要操作流程，并在最后的交互、布局、設計的幾個方向來判斷它們是否有益于核心流程，能被用戶接受。然后得出結論，如果有益，那么產品符合商業目標的條件，如果沒有，則難以達成。
4.盈利模式
有一些產品本身就有購買要素，或者有付費的項目，那么對它作出分析是非常重要的。因為任何商業產品最終的目的都是為了盈利，所以多數產品會在這方面下足功夫。
如果是電商、外賣、快遞這類直接發生交易的應用類型，只要分析產品本身的交流流程即可，相對比較直觀。
如果是類似社交、資訊、工具類的應用，往往在盈利點上會比較隱晦，并通常包含較多零散的盈利來源，比如不同位置的廣告位，訂閱服務，付費道具等等。
我們要做的就是把這些盈利來源全部羅列下來，如果知道價格也對應填寫上去即可。
5.運營策略
如果不是以工具為導向的產品，通常就有比較重的日常運營。包括用戶運營、社區運營、媒體運營、內容運營和活動運營。
有不少產品的迭代是以運營為導向的，我們直接通過產品功能本身去分析它往往得不到理想的結果，所以需要從運營的角度進行切入。
比如每日優鮮這樣的生鮮電商，如果仔細研究用過它的服務，就會發現這款產品本身交易的流程乏善可陳，但是出彩的地方是在于層出不窮的運營策略，無論是選品的內容運營或者活動運營上，而這些運營方式才是推動產品的改動和優化的主要因素。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
新手和初學者總會錯誤的將審美的能力托付給天賦或是科班教育，作為自己審美水平低下的借口。如果這么想，那肯定不會為自己帶來任何改善。
今天，我要寫一些不一樣的東西出來。
按我一貫的風格，我不喜歡在入門問題上高開高走，一開始就討論比較概念或者藝術性的問題，就講講在最初級月薪不過萬，連自己工作設計類型相關的作品都沒辦法評判好壞的情況下，展開討論。
所以，我要寫一篇接地氣的提高審美的回答。
關于比較
審美是一個宏大的話題，無論是文學、影視、視覺、時尚等我們都可以審視它們的 “美”。不同領域的 “美” 有不同的形式，不同的立場，不同的角度，不同的原則。
在這里，我們不談具體某個領域審美的規則和方式，我們來講講提升審美的具體做法。
講一個例子，在國內，我們普遍覺得女生在對穿衣打扮的審美上比男生更優，對于其它經過設計的事物所展現的審美也比男生更好。這種差別在高中時期便逐漸放大，在大學中就能明顯得感覺出來這一點。
這是由于基因天賦論導致的嗎？
是也不是。女生愛美這點是一個既成的事實，有比較大的先天因素，而因為對美好事物的追求比男生更強烈，所以在審美上整體大于男性。
但大家要注意，這個因果關系的模型太過簡陋，我們要進一步來分析為什么對美好事物的追求就能導致審美上的差異，這就是我們提升審美的關鍵，先從衣品講起。
原因1：
基于對美的追求，女生往往會花更多的時間在穿衣打扮上，也就意味著要購物。無論是在商場還是淘寶，女生逛起來的熱情與時長都遠遠大于男生，這造成了女生在查看數量上也遠遠大于男生。
這就和很多設計前輩告訴你要 “多看” 的做法是一樣的，通過量變引起質變，只要你看的夠多，審美自然就可以提升了。
這話說的頗有道理，但依舊在推理上站不住腳。因為，量變為什么一定就能產生質變？這個變化的邏輯依據是什么？在青銅段位里打了一萬盤，也不代表一定能打進最強王者不是。
所以，這就是要引入第二個原因，關于對比。
原因2：
女生逛街能逛這么久，往往在除了看以外，還會做一件事，就是大量的試衣服（此處被我言中的女性同學可以點個贊讓我看見你們的雙手），經常抱了一整籮筐的衣服進試衣間，在里面對著鏡子鼓搗擺 Pose 大半個小時，然后才能挑選一兩件自己喜歡的出來，或者干脆一件也不要。
嗯，不要問我是怎么知道的……
在這個過程里，就發生了提升審美中最重要的一環 —— 對比。通過大量的對比，來找出好看的、高級的、適合自己的衣服。也因為對比，女生們就通過實踐來了解到，什么樣的衣服是好看的，什么樣的是丑的不適合自己的。
這個過程實際上收窄了選擇的范圍，比如一個個子比較高挑五官比較立體的女生，是很難在比較過后還會選擇那些可愛、少女、小鳥依人的設計。很可能會偏向運動、男友、中性等風格。
而在有了具體的偏向以后，她們依舊會深入到這個范圍，繼續觀察、嘗試、對比，然后再次提升對這些東西的理解和審美。
所以，看吧，審美的提升第一步就是這么簡單，通過大量的觀察，然后對比和篩選，就能非常直接的提升我們的審美，這個提升的過程完全依靠的是人的主觀能動性。
日常生活中我們遇到的絕大多數某些人審美比自己更好的人，都是因為他們在某些方面看過的，比較的比我們更多，而不是依靠天賦的加持，這個思路落實到創作中也一樣。
當然，我絲毫不懷疑人類的歷史長河里，有極少數人打娘胎里就因為染色體中某些基因片段神秘的律動，而獲得了獨特的審美與創作天賦，但那始終是一個可以忽略的概率。審美的提升是個人主動的行為，不要祈禱上帝在你身上投的骰子能得到你要的結果。
即使拋開這群有 “天賦” 的神仙，也依舊還有很多第二梯隊、第三梯隊的老法師們通過奮斗逼的經歷功成名就不是。
所以別這么自戀總要搬達芬奇、畢加索、梵高等人舉例，每次忍不住想要把鍋甩給天賦前，就問問自己鑰匙配嘛？
什么？您配？
您配幾把……
具體案例
不正經到此為止，正經臉……
既然說了那么多關于比較的問題，空口白話難以令人信服，所謂沒圖我說個……錘子。因為很多新人都會說，你覺得大多數設計案例看起來都挺好，覺得挑不出什么毛病啊。
所以，下面我挑了幾個與設計有關的方向，并找了一些案例出來，你們來看看同類型中，哪一張圖是最優的。
而沒被選上的那些，對于你選出來的圖而言，它們當然都是有 “問題的”。
人像攝影
美食攝影
室內設計
產品設計
海報設計
管理界面
UI APP 界面
小結
審美提升的第一步，就是從對比開始，因為這個世界對所有事物的評判，都有不同方向的兩個極端。善惡、美丑、高矮、胖瘦，是對立而相互依存。
就像左拉的《陪襯人》中所講的：
“……另一個卻總是奇丑無比，丑得刺眼，使路人不禁要看她幾眼，并且拿她和她的同伴作個比較。要知道，你上了圈套。那個丑女子要是獨自走在街上，會嚇你一跳；那個相貌平常的，會被你毫不在意地忽略過去。但當她們結伴而行時，一個人的丑就提高了另一個人的美?！?
之前我們講了關于審美提升的第一步對比，但是我們留了一個疑問，為什么依靠對比我們可以提升，或者只靠對比我們就一定可以提升審美嘛？審美提升起來就如此容易？
當然不是！
對比的過程只是表象，我們還要追究深層次的原因，那就是“推理”。
在系統性提升審美的道路上，最大的敵人就是——主觀感受。因為無論我怎么解釋和審美提升相關的方法，總有人會覺得它就是依靠個人審美，不同人審美不一樣，總能找出有的人就喜歡網紅臉但看不上湯唯或者高圓圓的案例。
沒錯，每個人都有自己的審美，無論喜歡什么稀奇古怪的東西都可以，存在即合理。但是，設計師該擁有的審美是不能這么隨意的，因為作為專業人士，我們的審美就要符合 “專業” 的要求，即通過客觀標準來評價事物的內在價值。
比如茶、酒、咖啡這類飲品，都已經擁有非常成熟的市場，會根據產品的價值形成對應的價格。而有趣的是，這些飲品都不是甜的，都不符合我們本能的喜好。所以，還有很多人不接受它們，只喜歡帶有甜味的飲料。這種個人的選擇上，任何人都可以偏愛一杯 1 元不到的雀巢的速溶拿鐵，厭棄紅標瑰夏冰滴，但無論你怎么想，也無法改變它們價值不對等的事實，瑰夏手沖有遠遠超出速溶的口感和品質。
但超出的部分在哪里？答不答得上來，就是內行和外行的區別。
內行經過專業的訓練可以品嘗出其中蘊含的風味、口感，解釋它們與產地氣候的聯系，儲藏運輸的條件，以及沖制過程的步驟。但外行往往只能給出好喝、甘甜、順滑、難喝、太苦之類零碎、沒有體系的評價。
如果設計師對設計相關的作品只能做到和外行一樣的水平，那么他也只能是設計師中的外行，并且缺乏成為優秀設計師的必要基礎。
所以，接下來我們來探究一下，作品的評價為什么重要！
丹尼爾·卡尼曼的暢銷書《思考快與慢》中，將我們的思考方式簡單的劃分成了兩個部分，用了非常簡單粗暴的 “系統1”、“系統2” 命名。簡單概括它們的含義，就是系統 1 是聯想式思維，系統2是規則式思維，也可以看成是直覺與慎思的區別。
先說系統1，直覺是我們大腦對日常接受信息簡化處理的產物，我們的大腦就像處理器一樣，每天都要面對海量的信息通過視覺、味覺等五感導入，如果它沒有任何區別的對這些內容進行深度、縝密的分析，那么它一定會超負荷運轉并最終自我毀滅。
所以生物的演化，讓我們的大腦進化出了一套可以對信息進行過濾和簡化的系統，格式塔心理學中關于視覺對物體簡化、完形的理論，也是由其產生，這就是我們對很多事物下意識反應的來源。比如在走路的過程中，看見一輛自行車直挺挺的從遠處像你沖過來，那么你會馬上感覺到危險并往某個方向規避，整個過程會在不到1秒的時間內完成。
而系統2，就是對事物進行邏輯推導的深入思考，如果用它來處理危險的事件，那么結果可能是我們先判斷這輛自行車行駛的軌跡并得出它前進的方向與我站立的位置相交，并且它的時速約為 40km， 在撞到我的時間還有3S，如果以這種速度撞在我們身上，大概率會發生……
“BONG～”
那就不用想可能會發生什么事情，你已經被撞飛了，可以直接得到結果。類似的事情還有很多，無論是對與危險的，還是日常事務的作用，系統1都發揮出了極其重要的作用。也因為它的有效，而導致我們對它依賴過度。所以，很多人在對于美丑的審視上只依靠系統 1 來完成，而不會深入去思考各中原由。
系統 1 對美丑的判斷，是個人的，但它并沒有 “審” 的過程，專業的分析也就無從談起。斯洛曼和費恩巴赫所著的 《知識的錯覺》 里提到：
"直覺給予我們一個簡化的、粗略的，而且通常足夠好的分析，這讓我們產生錯覺，自以為所知甚廣。但是當我們慎思時，我們才意識到事物實際上何其復雜，我們真的只是略知皮毛。"
審美和品嘗美酒、咖啡一樣，需要通過了解專業的知識，培養系統的分析方式進行刻意練習，逐漸擺脫依靠我們直覺做出的不可靠的判斷。
因為任何優秀的設計作品，在創作過程中都不可能是隨性而為的，都是經過創作者深思熟慮后的產物，我們對優秀作品的評價，就是通過專業的知識對其創作邏輯進行推導，哪里有亮點，哪些是敗筆，都是清晰可見的。
它不僅幫助我們判斷別人作品的優劣，也可以分析我們自己作品的不足，從而得到改進的思路。所以為什么說審美要先于實踐，如果連什么是好的都不了解，自己設計出來的東西都不知道如何評價，又談何進步？
在我自己的教學經驗中，這個問題所表現出來的差異就很有意思。如有一些審美能力較差的學生第一次設計 Banner ，花了非常多精力和時間，自我感覺不錯，但是作品質量極差，會在得到否定的評價以后表示詫異和茫然，因為他們已經預感應該得到贊美與肯定。而審美較好的學生則是在完成作業以后充分的發現自己設計的東西和較好的作品之間的差距，那么他希望在我這里獲取的，就是如何縮小這種差距的具體方式，而不是對其作品做出評價，因為他們自己也會覺得作品質量差的沒評價的必要。
但不幸的是，在商業視覺設計的領域中，提升我們的專業評價的能力，并不如其它行業一般有固定的流程和教學，按筆者自己長期的經驗來看，如果我們盲目的從藝術、設計、心理多個學科的基礎理論開始學起，那提升的速度太緩慢，需要的周期太長，而且有非常強烈的挫敗感，如果沒有好老師的引導，還容易鉆牛角尖誤入歧途。
所以，第一部分的對比，重要性才能體現出來。我們要通過實踐作為基礎，來系統性的提升我們的專業審美能力，通過應用推理的能力，抑制我們無所不在的直覺。
前面扯了這么一大堆，都是在紙面上的探討，不太接地氣，只分析一通原因，和你該如何提升審美沒太多關系，這是最氣人的。所以，最后一部分，我們來講講具體實施的做法。
先聲明，審美提升是要通過刻意練習的步驟的，誰也不可能只通過區區幾篇文章就以為自己已經明白了，所以需要執行下面這個循環步驟：
? 采集：大量觀察和收集作品
? 對比：留下它們中最好的
? 分析：尋找優劣差異的原因
開始前，還要解釋一件事，就是我們提升審美都要先從某個點開始突破，從你最感興趣的，或是工作關聯度最高的設計類型開始，而不是無差別的亂看。與美術學相關的所有設計中，底層的原則都是近似的，精通一種，就能更容易理解其它種類的作品。
1.采集
觀察的來源多種多樣，強烈建議初期只使用花瓣即可，不要分心到太多的平臺上，選擇太多往往不是好事，會增加干擾，讓我們疲于奔命，模糊一開始的目標。
例如首先要提升在 APP 方面的審美，我們先在花瓣中創建一個 APP 的畫板，然后搜索 APP 相關的關鍵字，但不需要關注第一頁彈出的采集結果，直接查看 “畫板” 選項。
畫板是別的用戶自己整理的采集合集，我們可以通過封面簡單篩選出你喜歡的，然后打開它們，瀏覽里面收集的作品。
然后盡量按自己最高的要求來找到能讓自己覺得滿意的作品，再將它們 “采集” 到自己創建的畫板中，并設定一個數量，比如采集到500張為止。
2.對比：
達到目標的數量就停下來，因為再采集下去能帶來的作用已經非常有限了。雖然采集中已經包含了選擇和對比的過程，但我們要更進一步，在自己的選出來的作品里進行比較。相信在完成這個步驟以后，你們已經可以明顯感覺到最后 100 張收集的質量是遠遠高于前 100 張的。在羅子雄 TEDX 的演講中就說過：你回頭看三個月前收集的作品，會發現它們都是垃圾……
更極端一點，那就是我們只在挑選的作品中留下最好的十分之一，聽起來是不是很刺激。
也就是我們要開始在自己選出來的作品中，你要刪掉其中的 450 張作品 （最好有留底），即使當中有一些你非常喜歡，而且它們都是你的勞動果實。但就因為這樣，你才會更慎重的進行比較。因為多數人的采集只是走馬觀花，后面根本就不會看這些東西。
當然，這個過程推薦用 Eagle 或者 花瓣 PRO 客戶端，操作起來會更順手一點。
3.分析：
在上一步操作里，我們會動用我們腦海里所有關于理性的分析方法來解釋它們的優劣，并得出結論，雖然這些想法可能很幼稚或漏洞百出，但不要擔心，最后一步就是用來解決這個問題的。
我們捉對挑選一些作品出來，在剩下的作品中和已經被你否決掉的作品各選一張，然后將它們排列到一起，對比它們的優缺點，比如下圖是我從我自己畫板中找出的近期和早期的采集作品。
專業的分析是怎么得出的？當然不像朱熹提出的 “格物致知” 一般盯著它們思考，就能把設計的理論給格出來，這條路是走不通的，所以才有王陽明 “知行合一” 的教誨。
我們要把對比的內容進行細化，把一套作品看成若干細節的合集，明確比較的目標，這樣才能得到理想的結果，比如：
? 字體
? 配色
? 布局
? 配圖
? ……
比如我們挑文字出來分析，這時候局勢已經比較明朗了，上側的設計中文字是能被清晰識別的，在不同的字段類型中字重有對應的調整，主次有序。而下側的文字應用則缺乏對比，部分文字甚至和背景都無法做出區分，且字重幾乎沒有變化，使用了多種字體沒有整體性，導致最后的閱讀感受極差。
同理，你可以再試試分析其它幾個細節，是不是簡單多了。如果這時候你再覺得手足無措，完全分析不出什么具體的東西怎么辦？
學?。?
如對比到配色，我們解釋不出為什么右圖的配色不行，那就針對配色去了解相關的配色技巧、理論，網上可以搜索的分享就一大堆了，比如關于色彩對比、用色比例等等，將你學到的知識現學現用套進這兩張作品中，也就可以很快的得到驗證。
后面每出現這樣的問題，就現學現賣，不僅可以直接提升我們對作品的理解能力，還能鞏固我們學過的理論知識。多分析幾組對比，你就會發現對于這類作品的審美和理解已經得到了質的飛躍，這時候，你就可以以留下的這幾十張作品作為你接受的下限，去收集新的作品，完成下一次循環。
結尾
對于設計基礎審美的提升就解釋到這里了，再寫下去也沒人看了（寫不動了）。我們在職業相關的審美提升一定要具有實用性，接地氣，目標準確的特點，不要這個階段跑去聽古典，看畫展，讀詩歌，所以整個回答我都盡量避開這些坑不提。
設計師的專業性首先不是追求審美的極限，而是先提高自己的下限。只有超出自己動手能力的下限，才能讓我們拒絕粗制濫造的作品，驅動我們進步。
最后，在同意我前面觀點的基礎上，大家可以嘗試我最后給出的方法，如果你覺得你的審美還提升不上去，那歡迎你們隨時找我算賬！而只是看完卻沒有實質行動，那就不要再抱怨自己什么提升上去了。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
這兩年互聯網行業在 C 端市場上的增長已經不足以吸引大眾和投資者的視線，B 端作為一個新的熱點開始被追捧。
但 B 端是一個泛指，它是由若干面向商業場景的不同細分行業組成。包括云服務、SAAS、PAAS、定制系統、數據可視化、智慧平臺、商用 HMI 等等。
不同 B 端細分行業差距是非常大的，就像游戲 APP UI 和一般軟件 APP UI 完全是兩種職業一樣。每當我們討論 B 端行業前景，就一定要聚焦到具體的行業類型，否則就沒有討論下去的基礎。
而我們今天重點聚焦的，就是目前聲勢極大的數據可視化行業。
這是最近很多同學咨詢和關注的領域，也是各大顯卡廠商、3D 引擎發布會上的常客。
各種讓人眼花繚亂的圖例和技術應用解說，很容易讓我們產生未來已經加速向我們走來的 “幻覺”，此時不抓緊時代的機遇投身數字化界面的設計，更待何時？
但我還是要勸大家別光顧著雞凍，冷靜下來好好分析這些行業和市場狀況，當你了解的越多，你就越會發現，這個職業方向和你們想的不太一樣……
首先，數字可視化領域也是一個比較籠統的行業，它依舊可以拆分出若干細分領域。但我先簡單根據視覺展示類型把它們分成兩大類，平面展示型和3D展示型。為什么根據這個分而不是商業場景，下面會做進一步解釋。
首先，數據可視化不是用了花哨的 3D 視覺才叫可視化，平面展示類型是絕對不能忽視的一個方向。它的主要應用場景集中在商業 BI ，統計分析工具等。
比如統計并查看網站、應用、店鋪數據的平臺。
這類產品有非常廣泛的使用場景和需求，是現代企業和產品運營的基石，它存在的價值是毋庸置疑的。
而另一類 3D 展示型的細分發展方向，包含展示大屏、數字孿生、智慧項目、商用 HMI 等類型。
這類項目更多是由技術發展催生而來的 “新需求”，和 5G 的發展是高度相似的。我對這個行業的發展潛力是認可的，但對設計師從事這個行業的總體前景持悲觀態度。
下面，針對真正的數據可視化設計師，我會從下面幾個維度展開討論（唱起反調）：
- 知識門檻
- 行業特征
- 團隊價值
數據可視化是對數據信息進行圖形化設計的過程，這個行業不是這兩年才出現的，而是由來已久。
從世界上第一個圖表的誕生之后，就有無數統計學家和設計師投身到這個領域中，發明和設計出各種精妙絕倫的圖形。
數據可視化的重要性不會比任何其它設計行業低，但是，數據可視化重要性的來源，是由數據本身的價值賦予的。因為詮釋數據的方式精彩，所以有價值，而不是僅僅是因為你做得好看且花哨。
更進一步說，就是數據可視化的價值是被統計學賦予的，而統計學是被這個世界真實需要的。
但很可惜，極少有 B 端設計師會投入精力到統計學的基礎知識和應用，這就導致很多設計稿中，連對數據的展示應該用折線還是柱狀都分不清。
或許你依靠經驗可以提升對一些基本圖表使用的心得，但是，進階的可視化設計需求就靠幾個簡單的折線、柱狀、餅圖就能解決嘛？那下面這些圖形應用需要掌握什么？
復雜的可視化應用場景，不僅需要設計師對統計內容和數據應用有主動地分析，還需要對計算機圖形學有一定的掌握。先不說門檻極高的 R 語言應用，但凡涉及到區級以上的地理信息可視化，就一定需要應用 GIS 工具的應用，導出并轉化數據包。
除了 2D 以外，3D 可視化的項目，所需的知識儲備就更進一大步。很多新人的認知以為設計師的工作只要用 3D 軟件建模并輸出就可以，學會 C4D 就可以做可視化項目。
這和以為掌握烤箱的功能就可以做出美味的蛋糕性質是一樣的……
前面說過，3D 可視化是由技術發展催生出的行業，它的應用受到技術的影響非常大。因為 3D 應用實在是太復雜了，比 2D 圖形復雜好幾個量級，這就導致設計可以落地的限制遠遠超出新手的認知。
常規的 3D 項目，必然要借助相關的圖形協議或者引擎。比如新手剛開始都以為的 3D 可視化就是網頁中運行 3D 效果，而網頁運行 3D 就是借助 WebGL 圖形協議實現的。
由于各種技術和硬件限制，WebGL 的性能是奇差無比的，因為它的圖形繪制渲染主要依靠 CPU 來完成，只要項目稍微復雜一點，多邊形和圖元數量一多，立馬就會讓電腦變卡（CPU占用量暴漲）。同時，它可以使用的渲染效果、著色器也必然不等同于 3D 軟件的高階渲染插件 OC 或 Redshift。
因為 WebGL 太弱，目前封閉的可視化項目就轉而使用其它的技術解決方案，即虛幻 Unreal 和 Unity。沒錯，就是你們玩游戲啟動畫面中顯示的那倆引擎。
換句話說，現在的高端 3D 可視化項目，就是用做游戲的方式做可視化應用，只要在指定設備里安裝，就可以調用 GPU 資源，實現更高級復雜的效果。
但是，只要應用了對應的引擎，就必須使用配套軟件來完成渲染、動畫、交互事件。即通過 C4D 或者 Blender、犀牛等軟件完成建模（不同可視化項目應該用的建模軟件也不一樣），再導入到虛幻或者 Unity 編輯器中進行下一步的操作，然后再和開發進行交付。
因為 3D 的復雜性，導致獨立 3D 可視化項目的開發流程被大幅度拉長，從而讓設計師需要掌握的知識面也大大增加。中間每個步驟都充斥著各種屎尿屁的限制，我就不繼續展開了。
3D 可視化設計師，幾乎就等同于游戲行業中的技術美術(Technical Artist)，因為游戲開發更復雜，分工更明確，技術美術作為設計師和開發之間的橋梁，幫助項目的美術能盡量在技術上被實現。
而因為可視化項目的建模精度與視覺效果要求不高（對比游戲），這些工作就要由同一個崗位包攬，設計師就沒辦法回避這些讓人絕望的知識信息。
還有一點對比游戲行業更讓人絕望的，就是 3D 可視化實際應用的技術方案是高度碎片化、沒有體系的，而且技術迭代周期遠比游戲行業短（WebGPU已經在路上了），這在客觀上增加了設計師的從業壓力（歡迎體驗前端開發的壓力？）。
一個專業的可視化設計師知識門檻，是遠遠高于一般 UI 設計師的。
當我們研究一個行業的前景時，就是研究它未來的趨勢和潛力。數據可視化嚴格意義來講并不是完全獨立的一個行業或市場，而是其它多個大市場中的某個組成部分。
如前面提到的數字分析、物聯網、工業物聯，都是層次更高的商業化市場。這些都是近年來高速發展的熱門行業，是帶動可視化行業發展的客觀依據，我就不一一找公開統計數據佐證了。
而可視化除了商業場景外，還有個在國內做可視化繞不開的話題 —— 政策。
如果具體關注過地產、5G、電動車產業的發展歷程，就應該明白國家意志的貫徹可以怎樣在短時間內催生出市場的高度繁榮（或者泡沫）。
而政策對于可視化的利好，就在于 “數字政府” 概念的規劃中。從幾年前開始就興起的政務數字化轉型，到最近國務院發布的 《關于加強數字政府建設的指導意見》，都是中央直接 “指導” 地方發展數字化的指標，是行政意志與力量的體現。
說更具體點，下面是指導意見中的目標說明，非常直白，大家可以自己體會：
到2025年，與政府治理能力現代化相適應的數字政府頂層設計更加完善、統籌協調機制更加健全，政府數字化履職能力、安全保障、制度規則、數據資源、平臺支撐等數字政府體系框架基本形成，政府履職數字化、智能化水平顯著提升，政府決策科學化、社會治理精準化、公共服務高效化取得重要進展，數字政府建設在服務黨和國家重大戰略、促進經濟社會高質量發展、建設人民滿意的服務型政府等方面發揮重要作用。
到2035年，與國家治理體系和治理能力現代化相適應的數字政府體系框架更加成熟完備，整體協同、敏捷高效、智能精準、開放透明、公平普惠的數字政府基本建成，為基本實現社會主義現代化提供有力支撐。
原文鏈接： http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm
正因國情在此，所以這些年 G 可視化項目才如雨后春筍一般涌現。智慧城市、智慧農村、智慧水利、智慧交通、智慧民政等等，都是借助這股東風蓬勃發展。
所以，商業和政務的迫切需求，催生出一大批可視化服務公司，如 EasyV、ThingJS、觀遠等。即使頭部大廠也生怕錯過這個機會，紛紛組建團隊進行行業布局。如騰訊云的 Raya Data、阿里云的 DataV、網易的數帆等等，都已經小成氣候，初現鋒芒。
市場需求旺盛，規?？焖僭鲩L，前景理應一片大好！但是……
市場總規模的擴張，帶給個體的收益卻不一定有表面看起來那么理想，尤其是設計師崗位。
這要先從常規 UI 設計行業說起，UI 設計師工資已經是國內設計行業工資最高的類型之一，從10年前的屌絲行業到今天能和老牌貴族建筑設計叫板，是非常了不起的成就。
而之所以有這種收入，除了移動互聯網爆發以外，最重要的原因就是互聯網產品的 “利潤率”，可以用非常少量的職員撬動上億甚至上百億的利潤。
如王者榮耀 2021 年全年盈利 28 億美元，接近 200 億人民幣的利潤。一款游戲的利潤直接達到萬科（2021年利潤225億）和中國人保（2021年利潤216億）的水平，他們都是在冊員工超過 10W 人的大型企業，也是國內各自行業里的巨頭，而王者的員工只是他們的幾百近千份之一。
再如螞蟻金服、微信、抖音之類的國民級互聯網應用，都是用極少的員工達到讓人難以置信的估值和利潤，這在傳統行業是無法想象的。
所以能盈利的公司會給員工開出滿是行業紅利的待遇，拔高行業上限的同時，也迫使那些有志于挑戰巨頭的新公司愿意抬高工資價碼，吸引人才。
總結起來，UI 之所以平均收入遠超平面、服裝、工業、室內等老牌設計行業，并不是因為 UI 專業門檻更高，而是以行業規模、項目規模、利潤率三個核心指標的共同作用形成。
其中，項目規模和利潤率的重要性，其實遠遠大于行業規模，這是很多職場新人最想不通的地方。
例如廣告行業已經是一個萬億市場了，除了分眾這家互聯網獨角獸外，其它老牌廣告營銷公司每年財報的營收和利潤大家感興趣的可以去搜搜（下圖為 21 年財報）。
看看他們的營收總額和凈利潤比例，以及員工總數，你自己就會得出，作為普通平面設計師的待遇，是絕對不可能超過頭部互聯網企業的，甚至能達到中游水平都是超常發揮的結論。
行業規模大，但是頭部企業規模和利潤卻不高，除了行業本身的平均利潤率因素外，還有一個原因就是業務是高度分散的，沒有被集中在少數頭部企業，供應商數量龐大，不像多數 C 端市場都由少數幾家公司或者產品把持或直接壟斷。
在可預見的未來，可視化行業也會處于這樣的情況，競爭激烈，利潤率低。而且作為 B 端服務商，不要看各家企業需求旺盛，政府各級單位招標不斷，實際上每個項目的規模都不大，百萬內的項目才占行業的絕大多數，這是不太符合滿足我們收入期待的項目規模。
而單個項目規模在未來高速擴大在我看來也不太現實，有兩個原因，一個是項目使用人數極少（通常也就幾十上百人…），另一個就是對可視化項目實用性的質疑。
如果看過航天相關的報道，就會看到指揮室數據大屏相比我們網上看過的案例比起來，簡陋得發指。這會是因為總局沒有預算，請不起設計師和團隊開發嘛？
為什么航天指揮中心沒有用下面這種 “科技感” 滿滿，復雜的我坐下面保證除了標題一個字也看不見的 “高端設計”？
原因說出來讓人沮喪，因為他們 —— 真的要看上面的信息?。?/u>
真正能發揮可視化價值的場景并不多，很多項目出發的意義，就是為了表面工程（各級ZF單位需求，自行體會），裝飾屬性大于實用性。既然實用性不夠高，很多甲方心里也清楚，是花錢裝裱門面的，那么投入的預算就更不可能太高。
所以，我對可視化行業的整體的發展是認可的，但對單家公司或項目的預期，卻是悲觀的，它們沒法達到我們已經習慣的 C 端和 SAAS 行業的高度。
最后，還要探討下數據可視化中設計師的團隊價值。
我們知道，一個完整的可視化項目設計與開發門檻都是非常高的，但因為高，創造的價值就高嘛？項目營收的成本占比就高嗎？
答案依然是否定的！因為可視化行業的絕大多數項目都是 “傳統” 的外包項目。
不管是商業是政務領域，外包最重要的任務，都是找到業務（中標）。樸素的價值觀會認為，只要技術和服務夠好，業務自然源源不斷，其實不然。技術服務都是后驗的，客戶沒有合作過之前是不知道的，在市場上挑選服務商，可不是打開淘寶買家評論查看分數和具體評價篩選。
所以，外行了解服務商的窗口，更多是通過熟悉的中間人介紹，或者銷售的嘴。誰能拿到項目，誰就為公司創造了最大的價值。后面怎么做那是后面的事，換誰做不是做……
這就是最常見的外包企業思路，所以技術人員或者設計往往都是消耗品，沒有那么強的依賴性。而在具體外包實踐環節中，項目的執行決策也和一般 B 端、G 端項目不同。
我以前一直強調，B 端項目的存在價值，是用來解決業務問題，為企業 —— 降本增效。但是可視化項目往往不是用來解決問題，而是用來 —— 解決產生問題的人！
尤其是面向政務的項目，在領導的需求面前，是沒有體驗這一說的，首先考慮的應該是 ”科技感“（結合前文理解），不然怎么展示自己貫徹上層指導意見……
這種環境對于創意類職業是非常不利的，一方面創造的價值并不顯著，另一方面是由別人 “教你” 怎么做設計。長此以往，你會越來越缺失職業競爭力和發展可能。
問題二，則是因為可視化項目獨立開發成本太高昂，做的視覺內容又非常固定。于是有實力的團隊就紛紛投入可視化編輯工具的研發，解決最麻煩的底層圖形方案。
這和 B 端的前端開源框架非常類似，把底層的代碼、交互、動畫、性能優化都幫你做好了，設計師和程序員可以用非常省事的完成項目的視覺內容落地。
但是，常規 B 端管理項目中，界面樣式一直就不是最重要的事情，而是解決復雜頁面流程和組件交互的問題。所以資深的 B 端設計師樂于應用第三方的框架來完成復雜的項目。
而在可視化領域中，多數項目并沒有那么多和復雜的交互需要考慮，視覺展示效果才是第一位，絕大多數團隊應用第三方框架是大勢所趨。核心工作內容被影響，那才叫觸及靈魂的打擊。
所以，在我看來可視化設計師可以創造高價值的場景，只會出現在兩種團隊中。
第一種，是給其它可視化團隊提供圖形服務的 SAAS 工具，比如 Raydata、EasyV 這類。都需要團隊有非常優秀的前端程序員和技術積累，換句話說，就是既要有技術實力又要有資金保障的團隊。
第二種，則是走優質項目輸出路線的小團隊或公司。會有一些優秀的開發人員坐鎮，再由設計師主導來推動業務發展，不會什么項目都做，會選有價值的用心交付。例如早年的 UI 外包團隊 ARK、Eico、TangUX 等都是這種路線。
這兩種對比目前海量的服務商來說都是鳳毛麟角，第一種類型是可視化設計師發展最好的歸宿，因為設計產出和圖形技術發展高度捆綁，只有這樣的團隊才會最早最快接觸新的專業技術方案。
除了這兩類，不要對其它外包類公司有太多的期待。在整個互聯網行業中，成熟產品團隊非常不喜歡招外包設計師不是沒有原因的。
至于未來是不是可視化內容會在 C 端領域打開局面，發展出一些新的應用場景，我就不過早下定論了。
最后，做個總結，給目前還沒有進入可視化設計行業，或者是誤打誤撞進入這個行業的設計師一些職業方向的建議。
可視化設計行業和廣告業非常類似，就是從業人員收入構成是沙漏狀，而不是像 UI 這樣呈金字塔狀的，缺乏健康的增長梯度和充足的腰部崗位。
可視化設計師從菜鳥進入專業階段所需的知識量更大，準備周期更長，技能門檻更高。在初中級階段和一般 UI 行業對比起來 —— 毫無性價比。
如果本身熱愛可視化，想將 FUI 那些東西搬進真實的世界和項目里，也做好了艱苦學習的準備（說不定是你樂在其中的），那么這個的行業的頭部崗位就是為你這種人準備的。
畢竟行業體量大，當然就會有真正優質的崗位出現，只是它的門檻高，沒有那么多水分能擠。
如果不是異常熱愛這個行業，具備較強的自學能力，或有一定的 3D 和圖形技術知識積累，那么不太建議往這個職業深入發展，一般的 B 端和 SAAS 項目才會是更好的選擇。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在今天的 UI 設計領域，由扁平化設計風格占據主導地位，已經是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外，對設計師而言就是設計的難度大大降低了。
一個界面的 UI 視覺元素，僅僅只需要圖片素材、矢量圖標、幾何、文字，UI 設計師的工作僅僅是對內容進行組織和排版，涉及到原創的也僅僅只有少量的圖標（大多數人還畫不好）。
這種狀態持續了很多年，看起來歲月一片靜好。
但是，這兩年市場發出了一些不同的聲音，那就是打破純扁平風格的 UI 風格、元素開始越來越盛行了。
比如新擬態風格在年初炒了一波熱度，各大平臺和公眾號都鋪天蓋地的發文和介紹，介紹它的設計理念和設計方法。
還有就是以餓了么、美團為首的國民級應用在主頁顯眼的位置里使用極具識別性的擬物圖標，引起設計圈的熱議。
首先講講新擬態設計，之所以之前只字不提，是因為我對這個風格實在沒什么好感，有種對純擬物借尸還魂的味道，且它的樣式對于信息密度高的應用是完全不適用的，只能活在飛機稿里。
而國內大型應用開始在實際項目中上線擬物圖標，意義就不一樣了，證明這樣的設計是經過幾個大廠團隊認可，且有共識的。
當然，這并不因為大廠用了就無腦推崇。而是純扁平的設計已經越來越難滿足部分需要強視覺效果的頁面設計了。
今天的互聯網和過去不一樣，用戶的增長留存不再是過去一樣通過裂變和口碑完成，一個產品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的，而互聯網產品又層出不窮，佛系的等待用戶臨幸是沒有出路，這種現狀也被稱為互聯網的下半場。
佛系不行，當舔狗更不行（成本太高），所以今天大型產品都在對待用戶的態度都選擇更具更具侵略性的霸道總裁人設。不僅是用色飽和度越來越高，運營活動越來越密集，廣告和強提示也越來越多。比如剛打開了三個應用，進入的首頁大家自己意會……
有點扯遠了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經開發到極限以后，那么進一步在一些細節處應用擬物就成為必然的選擇。
而擬物的應用并不可能鋪設到整個應用中去，因為完全擬物化的設計降低信息瀏覽效率是必然的，所以它只適合做局部的視覺強化，來加強用戶對特定區域的感知。
最常見的需要被凸出的要素，就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區域長期受運營活動支配，相信大家已經很習慣了。
只是，這些圖標開始在脫離運營活動的狀態下，也開始使用非扁平模式，那就不再是運營設計師的工作職責，而是 UI 設計師們繞不過去的檻了（知識盲區）！
且除了 APP 外，其它領域對于擬物設計的需求也會開始逐漸提升，尤其是目前越來越復（fu）雜（kua）的大屏數據展示、車載界面、定制系統等等。
作為新世代的 UI 設計師，多數人對擬物的設計可以說是完全空白的狀態，所以是時候要重拾擬物設計這個傳統藝能了。
前面我有提到，擬物主要應用在關鍵的圖標上，但應用的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物，而是經過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。
首先我們看看，過去優秀的擬物圖標和設計案例，它不僅表現元素本身的光影、透視、構造，甚至會非常完整的表現物體表面的材質和肌理。
這種圖標單看起來確實很好看、細致。但是，把它丟進我們當前的頁面中是非常違和的，因為它們細節實在太多了，而且畫起來非常耗時間，不利于項目整體的推進。
所以為了符合畫面的質感，又要考慮項目效率，輕擬物這個概念開始被提出和應用，作為一個折中的解決方案。
它和純擬物設計的共同點在于，也表現光影、結構、透視，但它盡可能精簡了輪廓的復雜度、肌理和層級，呈現出更概念化、理想化、易于辨識的擬物圖形。
所以，我們主要去學習的內容是輕擬物的設計方法，而不是徒手畫照片（這個可以緩緩）！
而輕擬物雖然 “輕”，但它依舊也還具備擬物的基本特征，是有實體質感的。但是扁平從插畫到圖標設計經過多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設計，應用大量的漸變、投影、模糊的效果，比如下圖案例。
這在我們之前圖標的系列干貨中有提過，這類設計是面性圖標的進階版，它們依舊屬于扁平風格的范疇之內，不能和輕擬物劃上等號。
對于這幾年才開始學習 UI 設計的新手來講，擬物已經變成一個很陌生的事物，這對行業來說是比較悲哀的一件事。
因為擬物的設計不僅僅是畫圖標而已，對它的學習可以全方位的提升設計師的基礎素養，不僅包括對傳統美術（結構、光影、色彩、透視）知識點的剖析，還包含對 PS 使用的深入探索。
可以說，自從擬物不成為必修題材以后，九成以上的UI設計師是不會用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。
輕擬物本身也是擬物，所以它的核心基礎和擬物設計師一致的，只是省略了更多復雜的細節。而對于整個擬物的體系來講，最重要的東西實際上只有2個，形體、光影。
形體的表現，就是對圖形外輪廓的樣式的呈現。在過去我們寫的圖標分享中，有寫過面性圖標進階的設計中，可以包含更多的細節、內部元素，而不是僅僅只有外輪廓。
輕擬物的形體設計就要處于進階面性圖標或者更難的水平之上，即你要把這個圖形的內容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點評的快速入口圖標，雖然看起來很復雜，但是那是配色上的復雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風格圖標，不能表現得太抽象，也不能增加過多的細節，需要一種恰到好處的平衡（玄學），這就非?？简炘O計師的判斷和經驗了。
并且，在描繪輪廓的時候，新手盡可能的采取正視圖來進行繪制，而不要通過俯視圖、側視圖、斜視圖等方法來呈現圖形的多個面，這樣難度會大幅度上升，比如下面這種情況。
除了形體外，光影就是整個擬物的靈魂了。
當一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現的時候，它就是三維空間的立體圖形，比如下面這個圓的案例：
在擬物的設計中，我們對光影的定義是至關重要的，所以首先就是針對該圖形確定光源的方向，是上方、前方、左上還右上，這對后續的設計有一連串的影響。
如果對光影沒有正確的解釋，那么在制作細節的漸變角度、投影的使用上，就會產生錯誤的設計，造成光影視覺沖突和矛盾。
在創建了光源以后，物體受到光線的影響就會產生明暗面和投影，可以簡單劃分成4個部分，高光、亮部、暗部、投影。
這和我們學習的素描有一定的差異，美術中對光影的表現害會包含明暗交界、反光面，這對于輕擬物的來說負擔太重，所以我們要去掉它們，接下來重點講講高光和暗部。
高光是物體作為受光物對光源的直接反映，比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現，再或者一拳超人中男主光頭上長期存在的高光配飾（多數動畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現物體結構和弧度增加的示意，因為不在受光面，所以顏色會變暗。在實際操作過程中，我們可以通過漸變的方式開控制明暗的表達，但盡量不要直接手動設置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個特性以后，下面，我們就通過一個實例來講解一下輕擬物設計的過程吧。
作為輕擬物的演示，直接畫個圖標講一遍怎么操作是沒什么用的，我們要從實際場景出發，用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁：
總結它的問題，不難發現首頁頂部業務功能太多了，頂部圖標就包含30個（加滑動的），雖然每個模塊圖標單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級和對比性。
我們要做的，就是通過輕擬物的方式，調整快速入口最大的三個圖標，凸顯它們的重要性以及和其它圖標的視覺差異性。先從第一個圖標開始，講解一下如何完成輕擬物化設計的升級。
第一步：確認輪廓造型
第一個操作，即確定圖標本身的輪廓。根據原有圖標的樣式我做了一些改動，包括加粗車頭，減少高度，增加車燈等。并對每一個模塊進行純色的填充，定義它們的色彩和做出區分。
形體的重要性在于要對圖形本身有比較合理的呈現，不要讓比例失調和圖不達意。
第二步：完善圖形細節
這一步，就要在原有基礎上，進行下一步的深入。包括對一些細節交代得更清楚一點，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎的暗部表現
在這里，我們就要開始為圖標增加高光了，高光從右上角打下來，那么有疊加關系的元素就會產生一個向下的投影。并且反向暗部的表現，讓整體的立體感稍強。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創建一個圖層，然后添加深色的透明度漸變，就可以表現出對暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，講整個圖標的質感進行拉升，
通過上面的演示，我們可以將整個擬物設計流程精簡成：
1.確定圖形基本輪廓、外形比例、模塊色彩
2.豐富細節樣式增加趣味性和適當的擬真感
3.通過蒙版添加暗部來完善表現的明暗和層級關系
4.添加高光元素作為圖形的亮點，拉升層次感
然后，通過這樣的步驟，再來完成后續的兩個圖形，拆解完的效果如下。
然后，再用這三個修改后圖標套用進原來的頁面，并做出對應的修改，再來看看前后對比：
通過這個對比，我們就可以看出在這個復雜的首頁頭部中，輕擬物風格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復雜。
而這就是輕擬物在項目設計中的實際作用，當畫面元素已經開始超負荷，且容易導致同質化的審美疲勞和主次不清時，就是輕擬物登場的時候了。
在如今的界面設計中，投影使用的范圍和頻次越來越高。無論線上項目或是追波上飛機稿，都可以看見各種各樣的投影樣式。
投影的使用，是 UI 設計師必須掌握好的視覺設計基礎。投影遠沒有大家想象的那么簡單，即使軟件中可以設置的參數并不多，很多設計師始終沒辦法很好的應用投影來提升自己的設計質感。
所以，這篇文章就會詳細講解設計投影的正確姿勢。
有了光，才有影。光影是美術和攝影最核心的基礎。
如果沒有系統學習過相關理論，對投影的認識會有失偏頗，會認為投影只是將一個物體的輪廓（遮擋光源的部分）完整映射在其它平面上而已，一個光源下只有一個影子，比如下圖設計出來的情況。
但是，真實世界中的投影，卻并沒有這么簡單，往往虛實即不統一，明暗也不一致。就像下面這個物體的陰影。
在光學原理中，不透明物體遮擋光源，所產生的影子有兩個部分，本影和半影。本影是影子中間最暗的部分（還有偽本影的概念，我們暫時將它合并起來理解），而四周開始變淺變淡，有彌散質感的影子稱為半影，就像下圖所示。
現實世界中可見的投影都會形成這兩種影子，因為光源有散射的特征，當光線照射在物體上時勢必會產生非垂直角度的光線，于是其中作用最大，重疊最多的一部分形成本影，而其余比較極限的切線部分形成半影，如下圖的案例。
通過案例我們也可以發現，當光源、物體、陰影面的距離不同時，產生的本影和半影面積也就不同。反過來講，我們還可以通過物體本影和半影的面積，來判斷它的空間關系，比如下方的兩個物體，明顯能感受到下側懸浮的高度大于上側。
或者，通過陰影來判斷光源對于物體的方向和強弱。比如下圖案例，就可以明顯判斷光源位于畫面的左側，所以即使擺入其它物體，陰影也會朝反方向延伸。
除此之外，投影還可以反應很多其它隱藏的三維信息，只要使用得當，它就可以幫助設計師表達呈現各種不同的空間位置。比如可以通過投影判斷物體是處于懸空或者是平躺，以及物體的厚度如何。
根據生活的經驗，我們已經對投影所產生的暗示習以為常，能根據投影的結果下意識的對界面內容做出判斷。所以，設計師在設計過程中如果對投影沒有進行很好的思考，就無法設計出符合規律和邏輯的投影，界面就會產生違和感，而作品也因此大幅降低了質感。
在進入了扁平化的設計環境后，投影有很長一段時間被抹除，因為大家認為那是擬物的遺毒，就怕設計里用到擬物元素顯得不夠時髦。
到了 Material Design 發布以后，谷歌在規范中增加了 Z 軸的概念，也就是為平面預設了立體的空間，設計元素可以定義與空間中水平面的距離，并通過投影來表現。
下圖中，Z 軸數字越大，代表和水平面的距離越遠，上升得越多。而帶給我們這種感受的原因，就是投影的暗示，元素本身的 XY 坐標并沒有任何改變。
即然增加了投影，那么谷歌的專業設計團隊，肯定不會很隨意的制定其參數。當我們打開谷歌的官方 UI kits 源文件進行查看時，就能發現其中的奧妙。它們為元素創建了兩層投影，即本影和半影，有時也稱為 top shadow 和 bottom shadow。
并且，還有一個在第一部分沒有提及的要點，投影的深淺與元素的距離是非線性的，即中心到邊緣衰減的速度是越來越大的，用坐標軸標示就是非線性的函數關系，而大多數軟件中的投影只能以線性的模式呈現。
在 UI 設計師接觸的平面類軟件中，只有 PS 具備完美復現這種投影的能力，即控制投影的等高線。
上面出現的投影都是黑白灰，但在現在流行的設計作品中，最常見的是應用了彩色的投影，攝影中也經常會應用彩色的投影渲染氛圍。
但是，投影中的這些彩色區域，并不完全都是投影，還包含了折射和漫反射等混雜的色光。為了簡化（完整的闡述可以寫一本書了），我們可以認為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽傘，傘下的人頭頂也會彌漫著草原的芬芳……
在開始展示具體的設計案例前，我們要先明確一個原則，即：優雅的投影是讓你感受到它的存在，但不會吸引你去關注它！
一般的設計軟件中，元素的陰影即是在元素的背后添加了一個相同輪廓的純色矢量圖形，我們可以通過 XY 軸移動它的位置，并使用模糊的參數來設置它的彌散度。
當元素距離水平面越近，陰影距離元素也就越近，即投影的 XY 值越小，模糊也越小，如果離得遠則相反。
3.1 常規投影類型
第一種投影的類型，即假定元素平躺，光源正對著元素的平面，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標為0，只添加模糊的參數，透明度較低。第二層陰影使用相同的模糊參數，增加 Y 軸坐標，透明度較高。
在非 MD 設計中，它濃郁的投影參數會讓整個界面變“臟”，變擁擠。我們要做的是要降低投影的透明度，這樣才能讓投影的表現更自然舒適。要牢記的是，當使用純黑色做陰影時，透明度無論如何都不應該高于 20%，正常區間在 5%-15%。
既然知道陰影屬性的規律，我們還可以復制這個矢量圖層做高斯模糊也可以得到一樣的效果，這種方法可以支持我們設計出更真實的投影。即將 Bottom Shadow 獨立出來，縮小并向下移動。
如果想要得到彩色的投影，那么只要切換投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我們要憑感覺去調整它們的透明度。
如果感覺不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。
既然前面提到彩色投影是由于光線穿透了元素，那么當使用了漸變色或者是圖片的投影，我們在之前提到的復制出的那層充當 Bottom shadow 的矢量圖形，就可以不使用填充色，而是直接用漸變或者是原圖進行模糊和透明度調整。
3.2 非常規投影類型
光既然可以垂直于被照射平面，那么發揮想象力，我們還可以更改光與面的位置，讓光線與平面之間的夾角變小，如下圖所示。
在這個場景中，投影就作用在圖片下方的地面，只有地面處于透視狀態時，才能可以看見它的投影，所以，我們就可以得到下方的效果。
當然，我們還可以結合光源的類型，比如使用聚光燈等，那么陰影的輪廓就會發生變化。
我們甚至可以假設元素本身產生了一定的變形，如邊緣翹起，那么就會出現獨特的陰影形狀。
我們可以從日常生活中的觀察將各種不同的投影形式引用進我們的設計中，讓我們設計中的視覺形式更豐富有趣。
學會正確的投影設計方式，并不是僅僅讓我們局限在 UI 元素的設計上。它還能給我們帶來很多意想不到的幫助，比如做設計作品的包裝。
通過前面講解的知識點，上方展示案例中應用的陰影方式相信你們已經可以看出端倪了，如果使用基礎的陰影設置去創建展示的陰影，就會發現效果遠遠不如案例的高級，自然也難以帶給別人良好的視覺體驗。
最后，在項目中，想要將設計出來的陰影交付給開發，真正落地實現出來，無論安卓或是 iOS ，陰影的渲染和設計軟件的參數是不一致的，這就需要大家自己鉆研究了。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
從平面到屏幕，CMYK 到 RGB，墨點到像素，色彩越來越豐富，形式越來越復雜。而 UI 的發展從擬物的繁瑣細節中掙脫出來，卻在色彩的展現中放飛了自我。
零售業有個有趣的研究成果 —— “七秒鐘定律”：人們在挑選商品和服務時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內，色彩的作用占到了 67%。
要在小小的手機屏幕中加入這么多顏色，并保持其中的聯系和邏輯，著實不易。如果你還對配色一無所知，完全不知道配色應該怎么入手，那么你需要了解一下，我幾年經驗總結的配色思路。
無論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來看看這些案例：
雖然是不同的應用，但是這個拾色器的用法大同小異，但是，很多新人并沒有搞懂拾色器的正確應用邏輯。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。
HSB 是色彩科學中對所有顏色屬性的理論劃分，是種概念上的定義，可以用來解釋任何色彩，也就是說可以和 RGB 和 CMYK 相互轉化，且 HSB 的選色邏輯更清晰、簡潔、干練。
因為一個正確的選色過程，是先確定出色相，然后再在這個色相維度下選出明度和飽和度，所以我們首先要關注色相選擇條。
細心的同學應該已經發現了，它們的首尾都是紅色，那是因為色相的序列是一個首尾相接的環形模式，所以它實際上就是色環的柱狀展示圖，應用起來和色環沒有實際區別。
接下來就要說到重點，飽和度和明度選擇區，我自己使用的習慣，是將這個選擇區通過黃金三分法的方式切割成等比的 9 個區域，然后明確它們在 UI 中的對應情緒和應用場景。
在過去的大量分析中，互聯網產品的主色和重要輔助色都會往右上角聚集，一些次要、不可點的色彩聚集在中上方，而文字背景色則聚集在左側，無人區則是我們重點避開的對象。
下面我們分析幾個案例，看看它們在這個選擇區中的色彩分布情況：
大家也可以自己拿一些主流的應用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會得到基本一致的結果。牢記這 9 個區域的場景劃分，可以幫助我們非常高效、安全地完成 UI 配色。
在眾多的 UI 設計規范中，色彩部分的介紹，都必然包含三種類型，分別是：
主色：應用的核心色彩，品牌色
輔色：豐富頁面視覺和傳達效果的次要顏色
中性：沒有色相的文字、背景用色
主色是一個應用的最核心的色彩，品牌的象征色，比如想到餓了么的藍色、微信的綠色、京東的紅色、淘寶的橙色。
確定主色，并沒有大家想象的那么復雜，它的要點在于 —— 你想讓用戶感受到哪種情緒，然后通過情緒關聯一個大致的色彩范圍，再進行微調。
在今天的互聯網產品中，主色的應用選擇范圍在拾色器區域的右上角，前面已經有解釋了。這和平面設計中的用色有非常大的不同。
移動端產品要在一個方寸大的空間中爭奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調是無法實現這個目標的，所以今天主色飽和度越來越極致，比如我們之前整理的，發在站酷的一篇總結：
再加上屏幕的 RGB 顯示特性，高對比度，高動態范圍的特質能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區域選出合適的色值。
輔助色是豐富應用中的次要色彩，它會包含一到若干個和主色不同的色彩，除了品牌傳達外，具有更強的實用性。
前面我們提到過色環，這里就要派上用場了。我們知道色環是個色彩序列首尾相連的環形模型，它蘊含一個最樸素的原則，即兩個顏色在這個環形中角度越大，那么視覺差異性越大，對比越強，比如下圖的展示：
這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個色彩對比度的判斷標準。而真正輔助色的選擇，是根據實際場景的功能決定的。
比如通知、提醒、取消用大紅色，確認、同意用綠色或者藍色，收藏、打分、評價用橙黃色。都是已經在用戶心智中建立了標準的用色類型，跟著常規方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。
沒有標準元素用色的情況下，再考慮應用色環的 “角度原則”，越需要被突出的顏色，可以在色環中離主色越遠，越不需要被突出的則越近。
比如下方攜程的案例，主色在藍色的情況下，支付、保險金標簽這些需要被重點突出的色彩，使用了主色的互補色， 讓我們一眼就能看見并產生強烈的操作欲望。
中性色，是頁面中文字、背景用到的顏色，它們承擔起最基本的層次表現、便于閱讀的重任。多數新手覺得中性色無關緊要，實際情況恰恰相反。
主色輔助色決定了界面視覺是否出彩，而中性色的應用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應該明白，即使只有黑白灰的狀態下，我們理解這些頁面和進行使用也不會有絲毫的障礙。
中性色的配置，就是制定一個由深到淺的灰度階梯，應用在對應權重的元素上，色彩輕重的主要判斷依據是 HSB 中的 B（明度） 值。
中性色雖然指的是無個性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍色飽和度，提升觀看體驗（滿足 RGB 的某種特性）。
這種做法，顏色越淺的時候飽和度應用色值就越低，將這個規律在拾色器中進行表現，那么我們就可以得到一個 L 型曲線，我稱它為 “中性曲線”。
掌握對于主色、輔助色、中性色的選擇方法，那么對于 UI 配色的奧義來說，你已經掌握了一半，接下來就要了解更具體的實踐思路了。
配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學和理論，卻很少關心它們應用如何應用，如何配置。
所以，我根據主色和輔助色應用總結了一個配色的四象限表格，在分別看看它們對應的案例：
主色會作為頂部標題欄或其它重要模塊中的背景色，進行大面積應用，加深用戶對品牌的認知和辨識度。而產品中又包含了大量功能和服務，需要用豐富的色彩來進行暗示，吸引用戶關注。
這類配色中，主色的應用占比也大，出現頻率高，鮮有其它顏色出現。比較適用于圖片內容豐富的題材中，或者是相對正式、品牌感強的應用。
這是多數主流應用的趨勢，降低主色占比，留出更多的空間給內容模塊的展示上，突出自身帶有的服務和功能。
通常，會應用這種方式是因為產品的服務是相對單一，但也需要用戶投入注意力的應用，設計師就會盡力避免給予用戶過多的干擾。
每次在進行配色的時候，我們都需要對自己要應用哪種配色應用方式做出規劃，然后再動手執行。有了這個目標，后面在整個項目的設計中的配色步驟就是水到渠成的事情了。
在實踐前，我們要簡單講講一個應用或者界面的標準配色的流程了，流程順序如下：
具體應該怎么使用這套流程，我們用一個圖蟲 APP 改版的案例來做演示，首先從四象限中的第一個主色占比高、色彩豐富度高的類型做起。
原型是 UI 設計的基本藝能了，在開始具體設計、配色前，搭建頁面的框架原型是一個必備的條件，下面，是我們已經準備好的原型案例。
然后，我們確定以橙色作為應用主色，并在拾色器中進行確認。
有了主色，就可以對頁面進行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。
接著，我們開始整理中性色的使用，選擇新的顏色來填充文字和背景，清晰的表現模塊層級，文字信息的權重。
最后，就是添加輔助色和其它色彩的元素了，這個步驟建議都是放在最后一步操作。因為色彩越豐富，越難控制，容易讓整個畫面顯得雜亂無序，所以先完成基礎搭建，可以更好的幫助我們判斷彩色的使用是否合理。
下面，我們使用彩色的金剛區圖標，然后將用戶關注、認證用戶、標簽等元素使用其它色彩，來豐富頁面的色彩內容。
根據第一個方案，我們可以再用這個原型來實現其余的三個方案的配色。
比如下面的主色占比大，但是色彩豐富度低的。因為已經不太應用其它輔助色，所以主色填充上我們不再填充頂部導航欄的背景，而是將更多元素應用主色，減少輔助色數量。
然后是主色占比小，色彩豐富度高的方案，進一步降低主色應用的比例，然后在金剛區、標簽等處使用較為豐富的配色。
最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開始增多，只保留最核心的一些元素使用主色，和極少的輔助色。
根據四種不同的配色方案，我們就可以得到四種不同的配色結果和風格，在每次設計開始實施前，我們都可以根據這種做法來做嘗試，并選出自己滿意的方案。
要再次強調，UI 配色是極其強調形式的應用科學，最后做的往往會和一開始想的效果有極大出入，所以需要我們有幾個備選方案，可以隨時進行調整，并選出合理的那個。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn