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