這兩年互聯(lián)網(wǎng)行業(yè)在 C 端市場(chǎng)上的增長(zhǎng)已經(jīng)不足以吸引大眾和投資者的視線，B 端作為一個(gè)新的熱點(diǎn)開始被追捧。
但 B 端是一個(gè)泛指，它是由若干面向商業(yè)場(chǎng)景的不同細(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ì)極大的數(shù)據(jù)可視化行業(yè)。
這是最近很多同學(xué)咨詢和關(guān)注的領(lǐng)域，也是各大顯卡廠商、3D 引擎發(fā)布會(huì)上的常客。
各種讓人眼花繚亂的圖例和技術(shù)應(yīng)用解說，很容易讓我們產(chǎn)生未來(lái)已經(jīng)加速向我們走來(lái)的 “幻覺”，此時(shí)不抓緊時(shí)代的機(jī)遇投身數(shù)字化界面的設(shè)計(jì)，更待何時(shí)？
但我還是要?jiǎng)翊蠹覄e光顧著雞凍，冷靜下來(lái)好好分析這些行業(yè)和市場(chǎng)狀況，當(dāng)你了解的越多，你就越會(huì)發(fā)現(xiàn)，這個(gè)職業(yè)方向和你們想的不太一樣……
首先，數(shù)字可視化領(lǐng)域也是一個(gè)比較籠統(tǒng)的行業(yè)，它依舊可以拆分出若干細(xì)分領(lǐng)域。但我先簡(jiǎn)單根據(jù)視覺展示類型把它們分成兩大類，平面展示型和3D展示型。為什么根據(jù)這個(gè)分而不是商業(yè)場(chǎng)景，下面會(huì)做進(jìn)一步解釋。
首先，數(shù)據(jù)可視化不是用了花哨的 3D 視覺才叫可視化，平面展示類型是絕對(duì)不能忽視的一個(gè)方向。它的主要應(yīng)用場(chǎng)景集中在商業(yè) BI ，統(tǒng)計(jì)分析工具等。
比如統(tǒng)計(jì)并查看網(wǎng)站、應(yīng)用、店鋪數(shù)據(jù)的平臺(tái)。
這類產(chǎn)品有非常廣泛的使用場(chǎng)景和需求，是現(xiàn)代企業(yè)和產(chǎn)品運(yùn)營(yíng)的基石，它存在的價(jià)值是毋庸置疑的。
而另一類 3D 展示型的細(xì)分發(fā)展方向，包含展示大屏、數(shù)字孿生、智慧項(xiàng)目、商用 HMI 等類型。
這類項(xiàng)目更多是由技術(shù)發(fā)展催生而來(lái)的 “新需求”，和 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)的，而是由來(lái)已久。
從世界上第一個(gè)圖表的誕生之后，就有無(wú)數(shù)統(tǒng)計(jì)學(xué)家和設(shè)計(jì)師投身到這個(gè)領(lǐng)域中，發(fā)明和設(shè)計(jì)出各種精妙絕倫的圖形。
數(shù)據(jù)可視化的重要性不會(huì)比任何其它設(shè)計(jì)行業(yè)低，但是，數(shù)據(jù)可視化重要性的來(lái)源，是由數(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è)簡(jiǎn)單的折線、柱狀、餅圖就能解決嘛？那下面這些圖形應(yīng)用需要掌握什么？
復(fù)雜的可視化應(yīng)用場(chǎng)景，不僅需要設(shè)計(jì)師對(duì)統(tǒng)計(jì)內(nèi)容和數(shù)據(jù)應(yīng)用有主動(dòng)地分析，還需要對(duì)計(jì)算機(jī)圖形學(xué)有一定的掌握。先不說門檻極高的 R 語(yǔ)言應(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è)中運(yùn)行 3D 效果，而網(wǎng)頁(yè)運(yùn)行 3D 就是借助 WebGL 圖形協(xié)議實(shí)現(xiàn)的。
由于各種技術(shù)和硬件限制，WebGL 的性能是奇差無(wú)比的，因?yàn)樗膱D形繪制渲染主要依靠 CPU 來(lái)完成，只要項(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)的引擎，就必須使用配套軟件來(lái)完成渲染、動(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ā)流程被大幅度拉長(zhǎng)，從而讓設(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í)，就是研究它未來(lái)的趨勢(shì)和潛力。數(shù)據(jù)可視化嚴(yán)格意義來(lái)講并不是完全獨(dú)立的一個(gè)行業(yè)或市場(chǎng)，而是其它多個(gè)大市場(chǎng)中的某個(gè)組成部分。
如前面提到的數(shù)字分析、物聯(lián)網(wǎng)、工業(yè)物聯(lián)，都是層次更高的商業(yè)化市場(chǎng)。這些都是近年來(lái)高速發(fā)展的熱門行業(yè)，是帶動(dòng)可視化行業(yè)發(fā)展的客觀依據(jù)，我就不一一找公開統(tǒng)計(jì)數(shù)據(jù)佐證了。
而可視化除了商業(yè)場(chǎng)景外，還有個(gè)在國(guó)內(nèi)做可視化繞不開的話題 —— 政策。
如果具體關(guān)注過地產(chǎn)、5G、電動(dòng)車產(chǎn)業(yè)的發(fā)展歷程，就應(yīng)該明白國(guó)家意志的貫徹可以怎樣在短時(shí)間內(nèi)催生出市場(chǎng)的高度繁榮（或者泡沫）。
而政策對(duì)于可視化的利好，就在于 “數(shù)字政府” 概念的規(guī)劃中。從幾年前開始就興起的政務(wù)數(shù)字化轉(zhuǎn)型，到最近國(guó)務(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ù)黨和國(guó)家重大戰(zhàn)略、促進(jìn)經(jīng)濟(jì)社會(huì)高質(zhì)量發(fā)展、建設(shè)人民滿意的服務(wù)型政府等方面發(fā)揮重要作用。
到2035年，與國(guó)家治理體系和治理能力現(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
正因國(guó)情在此，所以這些年 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)鋒芒。
市場(chǎng)需求旺盛，規(guī)?？焖僭鲩L(zhǎng)，前景理應(yīng)一片大好！但是……
市場(chǎng)總規(guī)模的擴(kuò)張，帶給個(gè)體的收益卻不一定有表面看起來(lái)那么理想，尤其是設(shè)計(jì)師崗位。
這要先從常規(guī) UI 設(shè)計(jì)行業(yè)說起，UI 設(shè)計(jì)師工資已經(jīng)是國(guó)內(nèi)設(shè)計(jì)行業(yè)工資最高的類型之一，從10年前的屌絲行業(yè)到今天能和老牌貴族建筑設(shè)計(jì)叫板，是非常了不起的成就。
而之所以有這種收入，除了移動(dòng)互聯(lián)網(wǎng)爆發(fā)以外，最重要的原因就是互聯(lián)網(wǎng)產(chǎn)品的 “利潤(rùn)率”，可以用非常少量的職員撬動(dòng)上億甚至上百億的利潤(rùn)。
如王者榮耀 2021 年全年盈利 28 億美元，接近 200 億人民幣的利潤(rùn)。一款游戲的利潤(rùn)直接達(dá)到萬(wàn)科（2021年利潤(rùn)225億）和中國(guó)人保（2021年利潤(rùn)216億）的水平，他們都是在冊(cè)員工超過 10W 人的大型企業(yè)，也是國(guó)內(nèi)各自行業(yè)里的巨頭，而王者的員工只是他們的幾百近千份之一。
再如螞蟻金服、微信、抖音之類的國(guó)民級(jí)互聯(lián)網(wǎng)應(yīng)用，都是用極少的員工達(dá)到讓人難以置信的估值和利潤(rùn)，這在傳統(tǒng)行業(yè)是無(wú)法想象的。
所以能盈利的公司會(huì)給員工開出滿是行業(yè)紅利的待遇，拔高行業(yè)上限的同時(shí)，也迫使那些有志于挑戰(zhàn)巨頭的新公司愿意抬高工資價(jià)碼，吸引人才。
總結(jié)起來(lái)，UI 之所以平均收入遠(yuǎn)超平面、服裝、工業(yè)、室內(nèi)等老牌設(shè)計(jì)行業(yè)，并不是因?yàn)?UI 專業(yè)門檻更高，而是以行業(yè)規(guī)模、項(xiàng)目規(guī)模、利潤(rùn)率三個(gè)核心指標(biāo)的共同作用形成。
其中，項(xiàng)目規(guī)模和利潤(rùn)率的重要性，其實(shí)遠(yuǎn)遠(yuǎn)大于行業(yè)規(guī)模，這是很多職場(chǎng)新人最想不通的地方。
例如廣告行業(yè)已經(jīng)是一個(gè)萬(wàn)億市場(chǎng)了，除了分眾這家互聯(lián)網(wǎng)獨(dú)角獸外，其它老牌廣告營(yíng)銷公司每年財(cái)報(bào)的營(yíng)收和利潤(rùn)大家感興趣的可以去搜搜（下圖為 21 年財(cái)報(bào)）。
看看他們的營(yíng)收總額和凈利潤(rùn)比例，以及員工總數(shù)，你自己就會(huì)得出，作為普通平面設(shè)計(jì)師的待遇，是絕對(duì)不可能超過頭部互聯(lián)網(wǎng)企業(yè)的，甚至能達(dá)到中游水平都是超常發(fā)揮的結(jié)論。
行業(yè)規(guī)模大，但是頭部企業(yè)規(guī)模和利潤(rùn)卻不高，除了行業(yè)本身的平均利潤(rùn)率因素外，還有一個(gè)原因就是業(yè)務(wù)是高度分散的，沒有被集中在少數(shù)頭部企業(yè)，供應(yīng)商數(shù)量龐大，不像多數(shù) C 端市場(chǎng)都由少數(shù)幾家公司或者產(chǎn)品把持或直接壟斷。
在可預(yù)見的未來(lái)，可視化行業(yè)也會(huì)處于這樣的情況，競(jìng)爭(zhēng)激烈，利潤(rùn)率低。而且作為 B 端服務(wù)商，不要看各家企業(yè)需求旺盛，政府各級(jí)單位招標(biāo)不斷，實(shí)際上每個(gè)項(xiàng)目的規(guī)模都不大，百萬(wàn)內(nèi)的項(xiàng)目才占行業(yè)的絕大多數(shù)，這是不太符合滿足我們收入期待的項(xiàng)目規(guī)模。
而單個(gè)項(xiàng)目規(guī)模在未來(lái)高速擴(kuò)大在我看來(lái)也不太現(xiàn)實(shí)，有兩個(gè)原因，一個(gè)是項(xiàng)目使用人數(shù)極少（通常也就幾十上百人…），另一個(gè)就是對(duì)可視化項(xiàng)目實(shí)用性的質(zhì)疑。
如果看過航天相關(guān)的報(bào)道，就會(huì)看到指揮室數(shù)據(jù)大屏相比我們網(wǎng)上看過的案例比起來(lái)，簡(jiǎn)陋得發(fā)指。這會(huì)是因?yàn)榭偩譀]有預(yù)算，請(qǐng)不起設(shè)計(jì)師和團(tuán)隊(duì)開發(fā)嘛？
為什么航天指揮中心沒有用下面這種 “科技感” 滿滿，復(fù)雜的我坐下面保證除了標(biāo)題一個(gè)字也看不見的 “高端設(shè)計(jì)”？
原因說出來(lái)讓人沮喪，因?yàn)樗麄?—— 真的要看上面的信息??！
真正能發(fā)揮可視化價(jià)值的場(chǎng)景并不多，很多項(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í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)的，客戶沒有合作過之前是不知道的，在市場(chǎng)上挑選服務(wù)商，可不是打開淘寶買家評(píng)論查看分?jǐn)?shù)和具體評(píng)價(jià)篩選。
所以，外行了解服務(wù)商的窗口，更多是通過熟悉的中間人介紹，或者銷售的嘴。誰(shuí)能拿到項(xiàng)目，誰(shuí)就為公司創(chuàng)造了最大的價(jià)值。后面怎么做那是后面的事，換誰(shuí)做不是做……
這就是最常見的外包企業(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à)值，是用來(lái)解決業(yè)務(wù)問題，為企業(yè) —— 降本增效。但是可視化項(xiàng)目往往不是用來(lái)解決問題，而是用來(lái) —— 解決產(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ì)。長(zhǎng)此以往，你會(huì)越來(lái)越缺失職業(yè)競(jìng)爭(zhēng)力和發(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ù)雜頁(yè)面流程和組件交互的問題。所以資深的 B 端設(shè)計(jì)師樂于應(yīng)用第三方的框架來(lái)完成復(fù)雜的項(xiàng)目。
而在可視化領(lǐng)域中，多數(shù)項(xiàng)目并沒有那么多和復(fù)雜的交互需要考慮，視覺展示效果才是第一位，絕大多數(shù)團(tuán)隊(duì)?wèi)?yīng)用第三方框架是大勢(shì)所趨。核心工作內(nèi)容被影響，那才叫觸及靈魂的打擊。
所以，在我看來(lái)可視化設(shè)計(jì)師可以創(chuàng)造高價(jià)值的場(chǎng)景，只會(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)來(lái)推動(dòng)業(yè)務(wù)發(fā)展，不會(huì)什么項(xiàng)目都做，會(huì)選有價(jià)值的用心交付。例如早年的 UI 外包團(tuán)隊(duì) ARK、Eico、TangUX 等都是這種路線。
這兩種對(duì)比目前海量的服務(wù)商來(lái)說都是鳳毛麟角，第一種類型是可視化設(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ì)師不是沒有原因的。
至于未來(lái)是不是可視化內(nèi)容會(huì)在 C 端領(lǐng)域打開局面，發(fā)展出一些新的應(yīng)用場(chǎng)景，我就不過早下定論了。
最后，做個(gè)總結(jié)，給目前還沒有進(jìn)入可視化設(shè)計(jì)行業(yè)，或者是誤打誤撞進(jìn)入這個(gè)行業(yè)的設(shè)計(jì)師一些職業(yè)方向的建議。
可視化設(shè)計(jì)行業(yè)和廣告業(yè)非常類似，就是從業(yè)人員收入構(gòu)成是沙漏狀，而不是像 UI 這樣呈金字塔狀的，缺乏健康的增長(zhǎng)梯度和充足的腰部崗位。
可視化設(shè)計(jì)師從菜鳥進(jìn)入專業(yè)階段所需的知識(shí)量更大，準(zhǔn)備周期更長(zhǎng)，技能門檻更高。在初中級(jí)階段和一般 UI 行業(yè)對(duì)比起來(lái) —— 毫無(wú)性價(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ái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
圖表的作用在于對(duì)數(shù)據(jù)的合理的詮釋而不是美觀。所以，在了解圖表怎么繪制前，更重要的是了解圖表是什么，包含哪些類型。下面就做下相應(yīng)解釋方便大家理解～
在今天，隨著大數(shù)據(jù)和數(shù)據(jù)分析理念深入人心，圖表在 B 端設(shè)計(jì)的地位越發(fā)重要。
那么什么叫圖表呢？
圖表指的是可以直觀展示統(tǒng)計(jì)信息屬性和數(shù)值的圖形表格，對(duì)于多數(shù)人來(lái)說第一次接觸圖表概念都源自中小學(xué)計(jì)算機(jī)課程中的 Office Excel 表格教學(xué)。
要理解圖表，你就繞不開 Excel 這個(gè)軟件或其功能形式。我們都知道 Excel 是一個(gè)表格工具，可以任意填寫表格化的信息內(nèi)容進(jìn)去。
但那只是呈現(xiàn)出來(lái)的表象，Excel 的真實(shí)身份應(yīng)該是一個(gè)數(shù)據(jù)記錄工具，通過這種表格形式記錄，比如班級(jí)學(xué)生成績(jī)、客戶聯(lián)系方式、倉(cāng)庫(kù)進(jìn)銷記錄等等。每一條記錄下的信息都是一條獨(dú)立的 “數(shù)據(jù)”。
盯著表格看，我們確實(shí)可以看到一些具體的信息、數(shù)據(jù)、內(nèi)容。但是，數(shù)據(jù)的作用只是讓我們自己去精確定位想要的內(nèi)容而已？顯然是否定的。
我們統(tǒng)計(jì)數(shù)據(jù)的目的，還包括要從眾多的數(shù)據(jù)條目中獲得反映真實(shí)情況的 “規(guī)律”、“趨勢(shì)”，如果我們只盯著數(shù)據(jù)條目一條條的瀏覽，是很難找出這些信息的。
于是，人類就發(fā)明了圖表這種可視化工具，幫助我們對(duì)數(shù)據(jù)進(jìn)行總結(jié)，用更直觀的視覺方式來(lái)認(rèn)識(shí)數(shù)據(jù)和找出規(guī)律和趨勢(shì)，這也是為什么 Excel 是最強(qiáng)大的圖表生產(chǎn)軟件的原因之一。
總結(jié)：圖表是統(tǒng)計(jì)學(xué)的子學(xué)科，它幫助我們更好的找到數(shù)據(jù)背后的真相，并做出正確的決定。
圖表既然由數(shù)據(jù)內(nèi)容生成，這個(gè)生成和轉(zhuǎn)化的過程當(dāng)然具備一些基本的規(guī)則和條件。要滿足圖表生成的數(shù)據(jù)必須要包含兩種基礎(chǔ)信息 —— ”維度“ 和 ”數(shù)值“。
它們是組成絕大多數(shù)圖表的基石，比如看下面的表格，一次體檢中有三個(gè)班級(jí)的5個(gè)同學(xué)，他們的身高、體重、體脂率、肌肉含量、視力各不相同。
我們可以從中挑選維度和數(shù)值，比如姓名做緯度（X軸），體脂率作為數(shù)值（Y軸），那么就可以生成基礎(chǔ)柱狀圖表。
從上面案例可以知道，橫向緯度表示的是你圖表中要包含多少不同的展示對(duì)象，縱向數(shù)值則表示你要顯示該維度的哪一類數(shù)據(jù)。
緯度通常指某個(gè)具體的人、日期、事件、分類，通常是 不可量化 的內(nèi)容。而數(shù)值則是指包含 可量化 的數(shù)據(jù)類型，重點(diǎn)要記得數(shù)值是指 “數(shù)據(jù)類型”，而不是指具體的參數(shù)值。
再進(jìn)一步，上方生成的圖表，雖然直接反映了我們選擇的緯度、數(shù)值的情況，但顯然對(duì)于不了解數(shù)據(jù)背景的人來(lái)說太簡(jiǎn)陋了，不知道它們代表的意義。所以，一個(gè)完整的圖表還會(huì)包含一些 “解釋” 性元素，來(lái)讓觀看者更好的理解圖表內(nèi)容。
所以，一個(gè)完整的圖表中除了中心圖形，還會(huì)包含標(biāo)題、單位、緯度圖例、網(wǎng)格、選中提示等內(nèi)容，用來(lái)提升其閱讀性。
以上只是最基礎(chǔ)的示例，不同圖表、內(nèi)容，對(duì)說明信息的要求各有不同，我們會(huì)在下方做出一定的解釋。一個(gè)優(yōu)秀的設(shè)計(jì)師要學(xué)會(huì)如何因地制宜，優(yōu)化圖表的內(nèi)容構(gòu)成，并對(duì)展示的信息進(jìn)行取舍。
隨著統(tǒng)計(jì)學(xué)的發(fā)展，圖表也經(jīng)歷了一系列的增長(zhǎng)與創(chuàng)新，除了我們常見的幾種圖表外，還發(fā)展出了大量平?？床坏?，只存在于各自專業(yè)領(lǐng)域的特殊種類。但是，它們對(duì)我們的生活和工作也起到產(chǎn)生了重要的影響。
比如在新冠危機(jī)中，政府和專業(yè)機(jī)構(gòu)對(duì)民眾開放的數(shù)據(jù)就大量使用了圖表進(jìn)行解釋，讓我們可以很清晰的了解事情的走勢(shì)和真相。
之所以有這么多不同圖表，讓人眼花繚亂，在于數(shù)據(jù)所包含的信息和特性不同，導(dǎo)致了它們所總結(jié)的規(guī)律類型也不同。
業(yè)界將圖表展示類型分成了四個(gè)大類，包含比較、分布、構(gòu)成、聯(lián)系，雖然比較簡(jiǎn)陋，但這是新手認(rèn)識(shí)圖表最簡(jiǎn)單的方式。
我們簡(jiǎn)單解釋下這四個(gè)分類代表的作用：
之后我們就會(huì)以這個(gè)框架，來(lái)解釋不同分類下的圖表，幫助大家建立對(duì)圖表的正確認(rèn)識(shí)和設(shè)計(jì)方式。除了這種標(biāo)準(zhǔn)分類以外，我還額外做了一個(gè)歸類，就是基礎(chǔ)和高級(jí)圖表。
前面提到，一般圖表就只反映緯度、數(shù)值兩個(gè)方面的圖表類型，很容易理解。但復(fù)雜的圖表，就會(huì)超過這個(gè)范圍，它可能包含了多個(gè)維度、多種數(shù)值、甚至第三、第四。
比如下面這個(gè)散點(diǎn)圖，除了身高（緯度）、體重（數(shù)值）外，還表現(xiàn)了個(gè)體（圓點(diǎn)）、性別（色彩）。在圖表本身的解釋性元素中，還包含分布區(qū)域、最大最小值標(biāo)識(shí)、體重/身高均值。
這已經(jīng)超出一個(gè)沒有接觸過統(tǒng)計(jì)的新手認(rèn)知范疇了，是需要具體學(xué)習(xí)才能學(xué)會(huì)如何閱讀和應(yīng)用的圖表。
這還是比較簡(jiǎn)單的高級(jí)圖表，往后還有類似?；鶊D、K線圖（韭菜的自我修養(yǎng)）、和弦圖等類型，它們有各自使用的規(guī)范、參數(shù)，以及應(yīng)用的場(chǎng)景。
高級(jí)圖表的復(fù)雜度和抽象性，決定了它的使用門檻較高，識(shí)別效率較低。而隨著數(shù)據(jù)各行各業(yè)數(shù)據(jù)重要性的提升，對(duì)圖表的需求已經(jīng)不再局限在二維抽象圖形的應(yīng)用上，而是提供了視覺效果更精美，制作過程更復(fù)雜，閱讀門檻更低的可視化數(shù)據(jù)展示內(nèi)容。
雖然我們?cè)诒酒恼虏粫?huì)拓展到大屏可視化的領(lǐng)域，但是掌握好平面二維的統(tǒng)計(jì)圖表，提升對(duì)統(tǒng)計(jì)目的的認(rèn)識(shí)，是深入學(xué)習(xí)可視化的必要條件。
接下來(lái)，我們就要來(lái)介紹一下如何繪制圖表了。雖然圖表之間有比較大的區(qū)別，但它們有很多細(xì)節(jié)是具有統(tǒng)一規(guī)范的。優(yōu)先掌握這些一致的內(nèi)容，再理解不同圖表的具體繪制差異，可以幫助設(shè)計(jì)師快速上手圖表設(shè)計(jì)工作。
上面我們提了，一個(gè)成熟的圖表會(huì)包含不少解釋性信息，怎么放置解釋信息和圖形元素是我們?cè)谠O(shè)計(jì)時(shí)的第一個(gè)考慮要素。
常見的抽象圖表都有一個(gè)完整的矩形區(qū)域，我們要先確定該圖表的具體占比尺寸。然后，對(duì)這個(gè)區(qū)域進(jìn)行布局的規(guī)劃，而這個(gè)布局的規(guī)劃就和解釋信息的展示有非常大的關(guān)系。
比如，你需要在圖表中增加標(biāo)題和圖形解釋，那一開始把圖形做成了上、中、下三欄。有的情況下我們可能還會(huì)增加一個(gè)默認(rèn)存在的文本型解釋模塊，那么還會(huì)再右側(cè)再切割出一個(gè)區(qū)域出來(lái)。
除了解釋信息外，我們?cè)谠O(shè)計(jì)中有時(shí)候還不能忽視交互內(nèi)容，比如要包含分類篩選、時(shí)間線控制、開關(guān)等控件時(shí)，它們準(zhǔn)備放在哪里，也要在這個(gè)階段確定出來(lái)。
經(jīng)過前面的切割，其實(shí)我們就能確定出中間的圖形區(qū)域了。在開始繪制前，我們還要對(duì)圖形具備的信息做進(jìn)一步的確認(rèn)，XY 軸坐標(biāo)是否包含文字解釋，餅圖類是否包含延長(zhǎng)指示線說明。
將這些區(qū)域先確定出來(lái)，減去它們的空間，就留下了最終要圖形展示的區(qū)域了。
合理的圖表繪制流程變是先布局，確定信息內(nèi)容，最后才集中處理圖形元素。如果對(duì)于前端適配有一定了解的同學(xué)，也就知道在完成這些步驟以后，圖表的適配規(guī)則制定就暢通無(wú)阻了。
有了圖形區(qū)域，接著就可以開始動(dòng)手畫圖形了。不管是基礎(chǔ)還是復(fù)雜的圖形，你想要讓自己輸出的作品嚴(yán)謹(jǐn)、質(zhì)量高，就需要應(yīng)用專業(yè)的繪制方法。
圖表圖形的繪制類似尺寸作圖，需要應(yīng)用各種參考線、輔助工具來(lái)完成。圖形本身并不是我們用來(lái)做創(chuàng)意的地方，而是要以準(zhǔn)確的方式繪制出來(lái)。它包含兩個(gè)重點(diǎn)，分布和比例映射。
以一個(gè)柱狀圖表舉例，該圖表中維度包含了 7 個(gè)對(duì)象，即應(yīng)該出現(xiàn) 7 個(gè)柱形。那么首先就要通過等分圖形區(qū)域，來(lái)確定柱形的分布，XY軸文字的對(duì)齊對(duì)象。
如果你不羅列對(duì)象具體數(shù)值的話，到這步也就結(jié)束了，但如果對(duì)象數(shù)值是必要顯示內(nèi)容的話，那么就要盡量確保柱狀的顯示比例和數(shù)值是一致的。
假設(shè)在上方案例中，Y軸總高是 100px，那么數(shù)值中每 1 小時(shí)的高度就是 100/16 = 6.25px，我們就要用你寫下來(lái)的數(shù)值 * 6.25，保證柱狀圖高度比例和你的數(shù)值一致。
而類似餅圖這樣的圖形中，只要添加了具體數(shù)值內(nèi)容，那么餅圖中不同的扇形角度，也要符合對(duì)應(yīng)的比例。比如占比 10%、20%、30%、40% 的四個(gè)對(duì)象，它們的角度就分別為 36、72、108、144。
這就是分布和比例映射的基本邏輯，不管是什么圖表，只要它根據(jù)數(shù)值在區(qū)域中進(jìn)行繪制，就一定會(huì)受到數(shù)值的影響。不管學(xué)習(xí)什么新的圖表，都只要確定這兩個(gè)步驟就可以輕松準(zhǔn)確的完成繪制。
至于具體該怎么實(shí)現(xiàn)，用插件還是參考線，就是軟件基礎(chǔ)的問題了，不在這里展開。
在圖表設(shè)計(jì)中的最后一個(gè)問題，就是關(guān)于配色的方案了。圖表配色的技巧主要關(guān)注兩點(diǎn)，選色邏輯和搭配方法。
選色邏輯，就是圖表用色的一些基本規(guī)范。我們知道圖表往往非常的復(fù)雜，或者頁(yè)面一屏中會(huì)包含大量的圖表。
在這個(gè)基礎(chǔ)上，圖表的用色就注定是不能太 “剛猛” 的，飽和度要偏低，明度要適中。在選色面板中，它大概處中部偏上的區(qū)域。即使產(chǎn)品主色用的飽和度非常高，圖表要和主色統(tǒng)一，也建議在主色基礎(chǔ)上做適當(dāng)調(diào)節(jié)，在色系上接近即可。
并且，建議新手在繪制圖表的過程中千萬(wàn)不要用漸變色。即使在各類飛機(jī)稿中，漸變色的展示效果也非常的不理想，沒有任何可讀性。
有了選色邏輯，多色搭配的思路也就變得而非常簡(jiǎn)單了，只要重點(diǎn)關(guān)注色環(huán)的配色模式即可。
配色模式多種多樣，包括補(bǔ)色、三角對(duì)立、類似、四元、方形、臨近等等，不用想的那么復(fù)雜，只要牢記根據(jù)你的設(shè)計(jì)風(fēng)格需要，你是要相鄰配色，還是等分配色。
相鄰配色，即以一個(gè)色系的臨近色系為標(biāo)準(zhǔn)的搭配。以 H（色相）、S（飽和度）、B（明度） 配色模式為準(zhǔn)，飽和度和明度數(shù)值基本不變的情況下，小幅度變更色相。
等分配色，也是保持飽和度、明度的一致，根據(jù)需要的色彩數(shù)量（大于三個(gè)）在色環(huán)中按角度等分，獲得均勻的色彩過度。
配色的方法很簡(jiǎn)單，難的是你們?nèi)绾胃鶕?jù)頁(yè)面的需要、視覺的體驗(yàn)，合理的運(yùn)用配色的方案，這沒有統(tǒng)一的標(biāo)準(zhǔn)。要記得圖表配色不是僅僅針對(duì)自身，會(huì)和頁(yè)面其它色彩產(chǎn)生聯(lián)系。
保證相對(duì)平緩、不太激進(jìn)的圖表配色思路，是最安全的做法。
首先解釋第一類圖表 —— 比較。
比較圖表的作用，是用來(lái)對(duì)緯度的數(shù)值做對(duì)比的圖表類型，直觀對(duì)比不同對(duì)象的強(qiáng)弱、排序、趨勢(shì)。
柱狀圖，是一個(gè)使用柱狀圖形反映緯度數(shù)值的二維坐標(biāo)軸圖表，也是我們最常見的圖表類型。
在這個(gè)二維坐標(biāo)軸中，我們可以用縱軸代表數(shù)值，也可以用橫軸代表數(shù)值，另一個(gè)軸代表緯度。即在顯示的過程中可以使用縱向或者橫向的（橫向的也被叫成條形圖，都是一回事）。
柱狀圖除了每個(gè)對(duì)象包含一類數(shù)值的做法以外，也允許包含多個(gè)數(shù)值類型，每個(gè)類型使用一種顏色表示，這種圖表叫分組柱狀。
并且，柱狀圖作為最基礎(chǔ)的圖形，衍生了非常多下級(jí)的柱狀類型。包括：堆疊柱狀、子彈圖、正負(fù)混合、瀑布圖、直方圖等。但要注意的是，并不是所有柱狀類圖表，都是作為對(duì)比來(lái)使用的。后續(xù)會(huì)有進(jìn)一步提示。
柱狀圖通過柱體的長(zhǎng)短，可以直接對(duì)比不同緯度數(shù)值的高低，但使用也有一定的差別。
緯度之間關(guān)聯(lián)性不是太強(qiáng)，或者按時(shí)間順序排列的就適合用橫向排列的方式，比如下方記錄我隨時(shí)可能猝死的打工人一周睡眠時(shí)間（見左圖）。而涉及排名或者時(shí)間的數(shù)據(jù)組，就適合使用縱向排列的，比如 Geekbench 展現(xiàn)不同 Mac 處理器強(qiáng)弱的排行榜（見右圖）（os：Pro 居然比 M1 還低？）。
兩種圖表的選擇還和 UI 環(huán)境的交互方式有關(guān)，在APP中，橫向排列的柱狀圖可以顯示的數(shù)量非常有限，想放更多緯度就要左右滾動(dòng)，體驗(yàn)不佳。而使用縱向排列則對(duì)空間的要求沒那么高。
折線圖也是基礎(chǔ)圖表，通過創(chuàng)建端點(diǎn)并使用直線連接的方式展示出高低不平曲折的線段。折線圖在圖表形式上和柱狀圖非常類似，但兩者在使用上是有一定區(qū)別的。
當(dāng)我們要選擇使用柱狀圖的時(shí)候，往往關(guān)注數(shù)值的總量，或者維度代表的是不同的對(duì)象，比如不同 CPU 之間的跑分對(duì)比。但是折線圖的使用就沒有那么單一，它主要應(yīng)用在單一對(duì)象的單個(gè)維度變化對(duì)比中。
比如，我們監(jiān)控 CPU 的占用頻率，那么維度使用時(shí)間，數(shù)值用百分比，這里面產(chǎn)生的數(shù)據(jù)都是圍繞 CPU 的占用頻率展開，但如果維度改成了當(dāng)前時(shí)間不同核心的占用數(shù)值、溫度，那么我們就肯定不會(huì)用折線圖來(lái)表示。
折線圖的使用是要通過線段的曲折來(lái)反映數(shù)值的波動(dòng)，在應(yīng)用過程中往往不作為一個(gè)靜態(tài)的圖表展示，而是應(yīng)用于監(jiān)控的場(chǎng)景，比如監(jiān)控股市市值、網(wǎng)站在線人數(shù)、CPU溫度、同一地區(qū)降水量等等。
在折線圖中，最大的認(rèn)知誤區(qū)就是對(duì)于曲線線段的應(yīng)用了。在數(shù)之不盡的網(wǎng)上飛機(jī)稿中，使用曲線的折線圖表 90% 以上都是錯(cuò)誤的。
這要回歸本質(zhì)來(lái)探討，折線圖也是進(jìn)行對(duì)比的圖形，如果沒有直觀的波動(dòng)，那么這個(gè)圖形帶來(lái)的信息量就非常有限。曲線會(huì)因?yàn)閳A角的緣故而降低波動(dòng)帶來(lái)的沖擊力，甚至抹平這種對(duì)比。
只有在必定會(huì)連續(xù)出現(xiàn)極大波動(dòng)的圖表中才適合使用曲線，例如圍繞在會(huì)有一個(gè)中間值數(shù)值，曲線進(jìn)行正負(fù)兩端移動(dòng)的類型，比如監(jiān)控呼吸中含氧量（呼和吸一個(gè)周期的維度）。
所以，盡量避免曲線的應(yīng)用，不僅畫起來(lái)麻煩，而且實(shí)際使用效果極差。
作為折線圖，在一些數(shù)值代表完成、占滿、填充的概念時(shí)，往往就會(huì)覺得單純的線段表示不夠直觀，于是就產(chǎn)生了將下方的區(qū)域填充色彩的 —— 面積圖。只展示一個(gè)數(shù)值類型不夠要加入多個(gè)數(shù)值和線段的就叫折線堆疊圖。
雷達(dá)圖，相信大家看到最多的地方就是在游戲的角色面板或者武器面板中。雷達(dá)圖是一種偏向概括性的圖表，并不能用來(lái)體現(xiàn)大數(shù)值和高頻變化，是用來(lái)對(duì)比同一個(gè)對(duì)象不同維度數(shù)值的圖表。
雷達(dá)圖的應(yīng)用，首先要確認(rèn)出不低于5個(gè)的維度，并且這些維度可以使用相同的數(shù)值體系，比如0-10分，0-100%等。并且，這些維度最好是由同一個(gè)對(duì)象身上拆分出來(lái)的，而不是 5 個(gè)維度指代不同的對(duì)象。
簡(jiǎn)單來(lái)講，就是我們可以用雷達(dá)圖來(lái)表現(xiàn)一個(gè)學(xué)生不同科目的水準(zhǔn)，這樣雷達(dá)圖可以大致概括這個(gè)學(xué)生科目掌握情況和相對(duì)的強(qiáng)弱。
但是不應(yīng)該用雷達(dá)圖來(lái)表示不同學(xué)生同一科目的水準(zhǔn)，那就只是更基礎(chǔ)的對(duì)比，用柱狀圖就可以了。
當(dāng)然，雷達(dá)圖中的占用內(nèi)容，也可以添加多個(gè)對(duì)象，一個(gè)雷達(dá)圖中可以放多個(gè)同學(xué)不同科目掌握水平的疊加圖形，以此對(duì)比他們的差異。
雷達(dá)圖的繪制，也是優(yōu)先制定說明內(nèi)容區(qū)域，然后再開始圖形的設(shè)計(jì)。
因?yàn)樵诶走_(dá)圖中，我們對(duì)維度的描述，基本只能設(shè)計(jì)到不同端點(diǎn)外部，那么文字本身的數(shù)量、占比，就會(huì)對(duì)圖形的顯示產(chǎn)生非常大的影響，并且在雷達(dá)圖中維度的描述文字是必須的，過度精簡(jiǎn)還是用其它方式體現(xiàn)都很不直觀，所以優(yōu)先預(yù)留足夠的文字空間。
然后，根據(jù)我們需要的維度數(shù)量繪制一個(gè)等邊的多邊形，并設(shè)置合理的數(shù)值。
之后，才是確定出這個(gè)多邊形內(nèi)所包含的數(shù)值刻度數(shù)量。假設(shè)除圓心外總共要顯示5級(jí)，那么就要畫 5 個(gè)堆疊的等邊形，那么我們就從最大的那個(gè)等邊形入手，再?gòu)?fù)制4個(gè)出來(lái)，對(duì)它們分別乘以 80%、60%、40%、20% 即可。
最后，再將每個(gè)維度對(duì)應(yīng)數(shù)值根據(jù)百分比將端點(diǎn)打在維度的直線上，用鋼筆工具將每個(gè)端點(diǎn)連接起來(lái)創(chuàng)建一個(gè)完整的不規(guī)則多邊形，就完成了雷達(dá)圖的設(shè)計(jì)。
如果想要在一個(gè)雷達(dá)圖添加多個(gè)對(duì)象，只要用不同顏色描邊繪制對(duì)應(yīng)數(shù)量多邊形即可，如果要填充這些圖形，就一定要使用透明度填充來(lái)完成，否則可能遮擋后方的端點(diǎn)，導(dǎo)致圖形不全。
階梯圖是一種用來(lái)對(duì)比前后數(shù)值漲跌的圖形，它是柱狀和折線圖的合體。它和折線圖的不同之處在于，更關(guān)注每個(gè)對(duì)象增減的份額大小。
不僅僅是關(guān)注波動(dòng)，而是更具體的值。類似關(guān)注一只股票全年的股價(jià)漲跌情況，每個(gè)月漲跌的具體額度，就適合使用階梯圖表現(xiàn)。
漏斗圖因?yàn)殚L(zhǎng)得像漏斗而聞名。雖然這個(gè)圖形看起來(lái)像一個(gè)錐形或者三角形，但本質(zhì)上漏斗只是條形圖（橫向柱狀圖）的變體。
漏斗圖是一種對(duì)階段進(jìn)行分層表現(xiàn)的圖形，從上到下的順序中，數(shù)值一定會(huì)呈現(xiàn)衰減的趨勢(shì)（起碼不會(huì)變大），然后從上到下的柱體就越來(lái)越小。
例如，UX 數(shù)據(jù)分析經(jīng)常用的漏斗模型，就會(huì)建立一個(gè)從用戶訪問主頁(yè)，到最后完成下單的轉(zhuǎn)化率，每一個(gè)步驟都會(huì)有一定的用戶流失。
在基礎(chǔ)漏斗圖之上還有進(jìn)一步拓展，比如對(duì)這個(gè)轉(zhuǎn)化本身有一個(gè)預(yù)期，那么可以做對(duì)比漏斗圖，比較現(xiàn)實(shí)和預(yù)想中的差距。如果要對(duì)比 iOS 和 Android 端的漏斗數(shù)據(jù)，還有比較漏斗圖，對(duì)比兩側(cè)的長(zhǎng)短數(shù)據(jù)。
第二個(gè)解釋的圖表類型 —— 分布。主要是用來(lái)研究數(shù)據(jù)分布情況的圖表，對(duì)不同數(shù)據(jù)的統(tǒng)計(jì)分布狀況進(jìn)行描述。
直方圖是一個(gè)看起來(lái)和普通柱狀圖非常接近的圖表類型，是一個(gè)用來(lái)表示同一個(gè)緯度范圍中，不同區(qū)間頻率的圖形。
直方圖是一個(gè)二級(jí)圖表，是對(duì)一級(jí)數(shù)據(jù)的進(jìn)一步轉(zhuǎn)化。比如看上圖案例，散點(diǎn)圖（下面會(huì)說）本身記錄了不同的數(shù)據(jù)的位置，而直方圖就是記錄在發(fā)生在這個(gè)緯度內(nèi)的次數(shù)。
直方圖乍一看很像柱狀圖，但實(shí)際應(yīng)用場(chǎng)景往往使用了非常密集的柱體，讓它看上去像折線圖。對(duì)于設(shè)計(jì)師來(lái)說和直方圖打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方圖。
當(dāng)視覺設(shè)計(jì)師、攝影師在學(xué)習(xí)處理位圖的時(shí)候，就必然要學(xué)會(huì)直方圖的讀取，它并不是用來(lái)讓我們學(xué)習(xí)如何對(duì)比前后數(shù)據(jù)差異的，而是讓我們可以快速掌握這張圖片中像素點(diǎn)在不同通道的分布量。
直方圖是統(tǒng)計(jì)學(xué)中的 “頻率分布” 的視覺表現(xiàn)形式，需要確保使用的場(chǎng)景符合直方圖的定義，以及確保用戶能理解圖表內(nèi)容。
對(duì)于直方圖來(lái)說，如果維度對(duì)象少，只要獲得相關(guān)的信息和數(shù)值，就可以像柱狀圖一樣來(lái)繪制。
如果是針對(duì)一些比較專業(yè)的場(chǎng)景，如上方的通道直方圖，那么就要放棄自己完成的目標(biāo)，一定要借助相關(guān)插件，或者使用 Excel 等工具實(shí)現(xiàn)后再導(dǎo)入進(jìn)來(lái)。
箱型圖也叫盒須圖，和直方圖類似，它也是一個(gè)二級(jí)圖表，即它不是直觀反應(yīng)原始數(shù)據(jù)，而是對(duì)原始數(shù)據(jù)的狀態(tài)進(jìn)行轉(zhuǎn)譯。圖表中的每個(gè)箱型反應(yīng)一組數(shù)據(jù)的分散情況資料，每個(gè)箱型包含下面這些信息元素。
箱型圖反應(yīng)的是一種 “大概” 情況，它不是一種用來(lái)進(jìn)行精確數(shù)值展示的圖形。箱體主要是上四分衛(wèi)和下四分衛(wèi)的區(qū)間組成，下/上四分衛(wèi)指的是 “樣本中所有數(shù)值由小到大排列后的 25%/75% 的數(shù)字”。
這里的排列主要通過 “數(shù)值大小” 來(lái)決定，而不是分布數(shù)據(jù)。比如一個(gè)班上100個(gè)同學(xué)包含身高 150、160、170、180、190 五種身高，雖然每個(gè)身高包含的人數(shù)不同，但 160 就是它的下四分衛(wèi)，180 是它的上四分衛(wèi)。
那么160-180身高包含的人數(shù)就是箱體本身的區(qū)域，上四分衛(wèi)到上邊緣是 180-190 的人數(shù)，下四分衛(wèi)到下邊緣是 160-150 的人數(shù)。
箱型圖可以反應(yīng)的信息是非常豐富的，它可以非常有效的反應(yīng)不同數(shù)據(jù)組的虛實(shí)、占比、上下限，可以獲得非常多有趣的結(jié)論。
在箱型圖的設(shè)計(jì)中，對(duì)于箱體和觸須的表達(dá)要依據(jù)數(shù)據(jù)本身的重要性來(lái)判斷。有些場(chǎng)景對(duì)最大最小值更在意，則箱體顏色就淺，線段更矚目。而要重點(diǎn)關(guān)注箱體的話，則可以對(duì)觸須進(jìn)行弱化使用虛線。
同時(shí)，箱型圖的主要識(shí)別信息是 Y 軸的長(zhǎng)度，一個(gè)美觀易度的箱型圖，箱體寬度盡量控制在一個(gè)比較纖細(xì)的水平，不要為了填充畫面的空白強(qiáng)行做寬。
相信稍微了解過股票還是基金的同學(xué)，對(duì)K線圖那可就一點(diǎn)也不見外了，下陽(yáng)線、收盤光頭陽(yáng)、小陽(yáng)線，開口就是老韭……不對(duì)，老股民了。
K線圖是箱型圖的一個(gè)變種，也叫蠟燭圖，主要應(yīng)用在股票、幣市、期貨等市場(chǎng)的交易數(shù)據(jù)上。一個(gè)K線圖包含了陽(yáng)線、陰線兩個(gè)大類。陽(yáng)線代表上漲，陰險(xiǎn)代表下跌。
每個(gè)類型中，同時(shí)還表示當(dāng)日成交中的最低價(jià)和最高價(jià)，柱體代表的是開盤價(jià)和收盤價(jià)。在我國(guó)股市，上漲用紅色，下跌用綠色，在幣市則相反。
K線圖實(shí)際上動(dòng)手設(shè)計(jì)它的情況微乎其微（只用開發(fā)好的），我們只要了解它的原理即可。
K線圖基本只應(yīng)用在和理財(cái)有關(guān)的證券行業(yè)中，在會(huì)出現(xiàn) K 線圖的圖表模塊中，必然會(huì)出現(xiàn)相應(yīng)的交互操作。如左右滑動(dòng)、放大縮小，它是一個(gè)具備響應(yīng)模式的圖表類型，包含兩種狀態(tài)。
如果空間足夠，則使用箱體和虛線的常規(guī)設(shè)計(jì)。如果顯示的對(duì)象密集，那么就會(huì)以一條直線來(lái)顯示，忽略掉箱體的部分。
同時(shí)，不同的場(chǎng)景，對(duì)于陰陽(yáng)線箱體的展示會(huì)有一定區(qū)別，除了色彩外，還會(huì)應(yīng)用實(shí)心和描邊的區(qū)別。
因?yàn)樯婕柏?cái)產(chǎn)、交易，針對(duì)K線圖的設(shè)計(jì)，一定要做好前期的業(yè)務(wù)調(diào)研，以及對(duì)比不同的競(jìng)品，降低設(shè)計(jì)出錯(cuò)的概率。
散點(diǎn)圖是一個(gè)使用也非常頻繁的圖表，它通過在 XY 坐標(biāo)軸中添加圓點(diǎn)來(lái)表示不同對(duì)象的分布情況。
常見的散點(diǎn)圖就是對(duì)普通二維坐標(biāo)軸進(jìn)行 “打點(diǎn)” 的圖表，每個(gè)點(diǎn)代表統(tǒng)計(jì)學(xué)中的一個(gè) “樣本” 或數(shù)學(xué)概念中的一個(gè) “定量”，下面我們就用樣本來(lái)稱呼每個(gè)散點(diǎn)。
每個(gè)樣本在散點(diǎn)圖中必然包含兩種以上的信息，一個(gè)是緯度值，一個(gè)是數(shù)值，這樣我們才能確定它在坐標(biāo)軸中的位置。
當(dāng)然，針對(duì)樣本并不是只可以包含兩種信息，比如表示班級(jí)成員身高體重的散點(diǎn)圖，我們可以再引入男女的對(duì)比，對(duì)散點(diǎn)圖進(jìn)行色彩的區(qū)分。再者，還可以添加體脂率，用每個(gè)點(diǎn)的大小來(lái)表示。
散點(diǎn)圖是一個(gè)很直觀的樣本分布圖表，它是概率論中做回歸分析的主要工具。所以往往我們會(huì)看到散點(diǎn)圖內(nèi)出現(xiàn)了一個(gè)線段，那條線段叫做 “回歸線”，他是通過散點(diǎn)分布情況，計(jì)算出來(lái)的一條均值線段。這個(gè)線段不僅可以大致標(biāo)識(shí)數(shù)據(jù)的趨勢(shì)，同時(shí)可以用來(lái)做概率計(jì)算和預(yù)測(cè)。
回歸線包含指數(shù)、線性、多項(xiàng)式三種，對(duì)應(yīng)繪制出來(lái)的回歸線是曲線、直線、還是波浪線。
散點(diǎn)圖的圓點(diǎn)可以使用軟件的 Symbol 功能進(jìn)行創(chuàng)建，確保后續(xù)可以統(tǒng)一修改配色和樣式，尤其是在包含多種色彩的散點(diǎn)圖中。
散點(diǎn)圖的繪制不一定要完美契合數(shù)據(jù)內(nèi)容，但是在大致的分布和數(shù)量上要和實(shí)際情況貼合。如果僅僅是隨意的進(jìn)行分布、均分，那么這個(gè)圖表就會(huì)顯得非常的不嚴(yán)謹(jǐn)和隨意，比如下圖圖表。
地圖圖表，是將抽象的 XY 二維坐標(biāo)軸替換成地圖類圖形的圖表。本質(zhì)上它們也包含 XY 軸，所以一樣可以將數(shù)據(jù)內(nèi)容進(jìn)行映射。
最常見的，就是地圖散點(diǎn)圖了。背景由實(shí)際的地圖完成，坐標(biāo)則由經(jīng)緯度體系來(lái)記錄。這是可視化設(shè)計(jì)中非常常見的中心圖表應(yīng)用類型。
同時(shí)，背景的地圖并不是只包含地理信息地圖，還可以是球場(chǎng)、商場(chǎng)、網(wǎng)頁(yè)、建筑表面等內(nèi)容。
熱力圖則是地圖和散點(diǎn)圖的合體，也是在二維坐標(biāo)體系中顯示樣本，只是熱力圖更注重的是這些樣本之間的對(duì)比。例如區(qū)域的降水量、臺(tái)風(fēng)風(fēng)力表現(xiàn)、網(wǎng)頁(yè)的點(diǎn)擊區(qū)域等等。
熱力圖本質(zhì)上也是將坐標(biāo)軸切割成了若干小塊（樣本），每個(gè)小塊有一個(gè)對(duì)應(yīng)的數(shù)值，然后通過算法繪制邊緣和不同的漸變。
它也是很少直接通過設(shè)計(jì)軟件繪制的圖表，需要借助插件導(dǎo)入數(shù)據(jù)來(lái)實(shí)現(xiàn)，我們只需要確認(rèn)色彩樣式即可。
構(gòu)成圖表相對(duì)其它圖表來(lái)說是最簡(jiǎn)單的一種，包含扇形、環(huán)形、餅圖、堆疊、矩形樹等類型。
前面看到的圖表大多是遵循我們小學(xué)就看過的 XY 軸坐標(biāo)系（笛卡爾坐標(biāo)系）建立的，但是餅圖并不需要考慮坐標(biāo)空間的問題。它是一個(gè)依靠角度來(lái)反映數(shù)據(jù)的圖表類型。
餅圖作為一種常見圖表，包含兩個(gè)大類，一般餅圖和環(huán)形圖。如果沒有一些特殊的交互或者復(fù)雜衍生類別的話，環(huán)形圖其實(shí)就是餅圖中間鏤空的版本……
餅圖繪制的主要依據(jù)是需要表現(xiàn)幾條維度，以及它們對(duì)應(yīng)的百分比值。餅圖的顯示有比較大的局限性，那就是顯示的維度數(shù)不能過多?？刂圃?2-9 條比較合理，數(shù)量過多就會(huì)導(dǎo)致圖形失去實(shí)際的使用意義。
除此以外，南丁格爾圖、旭日?qǐng)D，也是餅圖的延伸，通過添加額外的維度或者子分類，對(duì)餅圖中的每個(gè)對(duì)象進(jìn)行額外的示意。
餅圖作為基礎(chǔ)圖形，多數(shù)情況下也是由設(shè)計(jì)師自己完成的。但很多新手沒有找到要領(lǐng)，導(dǎo)致做出來(lái)圖形非常的別扭。我提供一個(gè)繪制的簡(jiǎn)單的思路，那就是通過繪制不同的三角形來(lái)拼裝出一個(gè)餅圖。
這類圖形繪制的要點(diǎn)是確保三角形在圓心中的頂點(diǎn)時(shí)一致的，如果對(duì)比例的繪制有比較精確的要求，可以通過 Excel 之類的工具生成一個(gè)基礎(chǔ)圖形做背景，貼著它畫即可。
南丁格爾圖也可以沿用上面的畫法，那就是對(duì)每個(gè)維度的三角形采取不同直徑的圓做蒙版，就可以畫出不同半徑的占比區(qū)域了。
這么做的好處，是將圖形的每個(gè)維度獨(dú)立成一個(gè)單獨(dú)的矢量圖形，方便我們后續(xù)進(jìn)行上色。
堆疊類圖表算是一個(gè)相對(duì)不那么嚴(yán)謹(jǐn)?shù)念悇e，因?yàn)樗鄶?shù)由其它基礎(chǔ)圖表發(fā)展而來(lái)。主要包括柱狀堆疊圖、面積堆疊圖、百分比堆疊圖。
之所以把它歸類到分布而不是其它大類下的圖表子項(xiàng)，原因是只要出現(xiàn)堆疊，就意味著這個(gè)圖表的核心目的是展示構(gòu)成內(nèi)容而不是對(duì)比或者分布。
在柱狀類堆疊圖中，通過將每個(gè)柱體切割成不同的更小柱體來(lái)呈現(xiàn)子分類的占比。面積堆疊圖，則是單純的把折線圖進(jìn)行填充然后疊加的圖形。
而百分比堆疊，雖然看起來(lái)和面積堆疊和接近。但它是以最上層數(shù)據(jù)為 100% 標(biāo)準(zhǔn)，往下的每一級(jí)對(duì)象都根據(jù)頂層百分比呈現(xiàn)的分布樣式。
堆疊類圖形的設(shè)計(jì)，最難的不是圖形，而是色彩的應(yīng)用上。之所以說堆疊只要應(yīng)用就比原先圖形的作用更大，原因就是堆疊使用不同的色彩表現(xiàn)層級(jí)，對(duì)于我們的視覺吸引力遠(yuǎn)遠(yuǎn)大于圖形本身的輪廓。
而將豐富的色彩無(wú)縫拼接在一起，是最容易翻車的配色場(chǎng)景。在這種狀態(tài)下，建議大家只用臨近色來(lái)實(shí)現(xiàn)下級(jí)分類的搭配，千萬(wàn)不要使用色相差異過大的色彩。
而對(duì)于面積和百分比堆疊圖，都建議在配色的過程中，直接使用帶有透明度的色彩。因?yàn)檫@些折線并不一定會(huì)完美上下覆蓋，當(dāng)中間出現(xiàn)交匯的時(shí)候，不至于信息被遮擋。
矩形樹圖最初是一個(gè)設(shè)計(jì)用來(lái)表示磁盤空間占用情況的圖形，通過將一塊矩形切割成不同的區(qū)域來(lái)表示不同維度的占比，以及位置。
雖然也表示占比，但它比餅圖類圖表表示的信息更豐富。第一點(diǎn)是位置信息和并列關(guān)系，比如下面的 M1 芯片的示意圖，就是矩陣樹圖的一種直觀體現(xiàn)，在矩形中不同位置應(yīng)用的不同芯片以及其占用的具體面積。
當(dāng)然上方是最理想的情況，通常矩陣樹圖是為了對(duì)一些更抽象的概念實(shí)現(xiàn)矩陣化的排列。而這個(gè)排列中，還有個(gè)非常關(guān)鍵的要素是其中的 ”樹“ 字。
因?yàn)榫仃囍械拿總€(gè)切割出來(lái)的矩形，都可以作為一個(gè)獨(dú)立矩形進(jìn)行下一級(jí)的分割，實(shí)現(xiàn)一個(gè)類樹狀圖結(jié)構(gòu)的信息收納。所以，完整的矩陣樹圖，是可以支持縮放或點(diǎn)擊進(jìn)入下一層級(jí)的。
而使用矩陣樹圖不使用樹狀圖，原因也在于我們需要表現(xiàn)它的占比，而不是單純的結(jié)構(gòu)。所以如果只是簡(jiǎn)單表現(xiàn)層級(jí)結(jié)構(gòu)，如企業(yè)組織架構(gòu)、知識(shí)點(diǎn)拆分之類的，要用樹狀圖而不能使用矩陣樹圖。
在這類圖表在項(xiàng)目中基本不會(huì)獨(dú)立開發(fā)出來(lái)，因?yàn)槠鋸?fù)雜度基本都會(huì)使用開源代碼。
設(shè)計(jì)師的主要工作，就是根據(jù)對(duì)應(yīng)開源圖表，指定配色的方案，切割的邊緣大小，以及文字的顯示規(guī)范即可。
聯(lián)系圖表，是用來(lái)展示維度之間聯(lián)系的圖表類型，包含?；?、關(guān)系、和弦、韋恩圖、依賴關(guān)系圖等。
聯(lián)系類圖表中，多數(shù)是非常復(fù)雜的圖形，已經(jīng)脫離直接手工繪制的范疇，所以我們只簡(jiǎn)單介紹其中幾個(gè)有代表性的圖表且給出設(shè)計(jì)建議了。
?；鶊D是一個(gè)用來(lái)描述某維度值 ”流動(dòng)“ 到其它維度走勢(shì)的流動(dòng)圖表。
這是一個(gè)比較復(fù)雜的概念，比如下面的概念，不同國(guó)家人口的流動(dòng)，人還是原來(lái)那些人（數(shù)值），但他們以不同的數(shù)量比例，移動(dòng)到不同的國(guó)家（維度）。
?；鶊D的應(yīng)用，關(guān)鍵在對(duì)數(shù)值遷移流向的關(guān)注上，它適合應(yīng)用的場(chǎng)景在監(jiān)控產(chǎn)品用戶的跳轉(zhuǎn)去向，貨物的外貿(mào)出口狀況，或類似新冠患者流動(dòng)城區(qū)、地點(diǎn)的表示。
桑基圖的數(shù)值總量通常是不變的，會(huì)包含起點(diǎn)和終點(diǎn)的維度，而維度的長(zhǎng)短即代表其包含的數(shù)值總量（權(quán)重）。
它有非常多的變種，只有借助特定的圖表生成工具，才能繪制出曲率、比例精準(zhǔn)的流線。
關(guān)系圖是大家比較不會(huì)陌生的圖表類型，它在各類工具性軟件、網(wǎng)站中都有應(yīng)用。比如天眼查股東關(guān)系圖、Wolai 頁(yè)面關(guān)系圖等。
關(guān)系圖中包含了大量的節(jié)點(diǎn)，節(jié)點(diǎn)之間還有對(duì)應(yīng)的關(guān)系，同構(gòu)線段進(jìn)行鏈接。常見的關(guān)系圖有兩種類型，一種是力導(dǎo)圖，一種是弧長(zhǎng)鏈接圖。
力導(dǎo)圖這名字也很難理解，源于力學(xué)中粒子存在某種互斥又具有引力的規(guī)律，粒子在兩種力的作用下從初期的隨機(jī)性會(huì)不斷位移趨于平衡有序（讀書多的好處？）。
力導(dǎo)圖通常有一個(gè)起點(diǎn)，然后去關(guān)聯(lián)后續(xù)的其它節(jié)點(diǎn)，如果節(jié)點(diǎn)之間還有關(guān)聯(lián)，它也可以對(duì)這些節(jié)點(diǎn)的關(guān)聯(lián)做出連接。它不僅表現(xiàn)一對(duì)多的關(guān)系，也表現(xiàn)多對(duì)多的關(guān)系，甚至在極其復(fù)雜的關(guān)系網(wǎng)中可以呈現(xiàn)成一定的強(qiáng)關(guān)聯(lián) ”聚類“ 信息。
而弧長(zhǎng)鏈接圖，則是通過弧線對(duì)節(jié)點(diǎn)進(jìn)行關(guān)聯(lián)的圖表，它既可以是環(huán)形，也可以是水平橫線的展示。
和弦圖是環(huán)形關(guān)系圖和?；鶊D結(jié)合的圖表，它表示結(jié)構(gòu)之間的依賴關(guān)系和強(qiáng)度，鏈接的線段不再是粗細(xì)統(tǒng)一的而是具有粗細(xì)比例的標(biāo)識(shí)，且維度之間的長(zhǎng)度也有表示。
這類圖表常用于社會(huì)學(xué)、生物學(xué)等學(xué)科的研究統(tǒng)計(jì)結(jié)果繪制上。如果單純?yōu)g覽，看上去非常復(fù)雜，所以正確的使用形式是可以進(jìn)行指定維度的展示和隱藏的。
韋恩圖，它是所有學(xué) UI、UX 設(shè)計(jì)的老朋友了，一個(gè)用圖形層疊相交來(lái)表示它們關(guān)系的圖形。RGB、CMYK 的色彩介紹里韋恩圖的身影必不可少。
韋恩圖的使用相比起來(lái)沒有那么嚴(yán)格的數(shù)學(xué)運(yùn)算，它只是一種關(guān)系表現(xiàn)的方法，可以對(duì)各種無(wú)法量化的對(duì)象進(jìn)行關(guān)系的陳述。比如，UX 設(shè)計(jì)師應(yīng)該具備的知識(shí)點(diǎn)……
下面是超人的電話亭團(tuán)隊(duì)持續(xù)整理收集到的可視化組件庫(kù)工具網(wǎng)站，以供參考：
作者：酸梅干超人 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
目錄：
一、設(shè)計(jì)前的思考
1、設(shè)計(jì)思維模式
2、設(shè)計(jì)理念的確立
3、案例分析（9點(diǎn)）
二、設(shè)計(jì)時(shí)需注意
案例分析（12點(diǎn)）
一、設(shè)計(jì)前的思考
首先需要思考的問題：設(shè)計(jì)思維模式、設(shè)計(jì)理念的確立
1、設(shè)計(jì)思維模式：
設(shè)計(jì)思維是一套在設(shè)計(jì)前需要思考的結(jié)構(gòu)化的流程，用來(lái)解決以人為本的問題。其目的是把在設(shè)計(jì)前所遇到的與設(shè)計(jì)相關(guān)的問題結(jié)構(gòu)化，化繁為簡(jiǎn)，形成一套流程，從而進(jìn)行有序的思考。
設(shè)計(jì)思維是一種思維模式和認(rèn)知方式，其最大的特點(diǎn)是已知需要解決問題的結(jié)果，如何在已知最終結(jié)果的情況下更好更高效的解決問題是其核心目標(biāo)。
思維方式的確立，可以有效的為設(shè)計(jì)做好前期準(zhǔn)備，提高設(shè)計(jì)的效率，更準(zhǔn)確的為“以人為本”出發(fā)而服務(wù)。
作者 Timo Kuilder
2、設(shè)計(jì)理念：
設(shè)計(jì)理念是在設(shè)計(jì)構(gòu)思前所確立的主導(dǎo)思想，它不僅是設(shè)計(jì)的精髓，也賦予作品文化內(nèi)涵和風(fēng)格特點(diǎn)。
好的設(shè)計(jì)理念很重要，可以使你的設(shè)計(jì)擁有屬于自己的獨(dú)特風(fēng)格。
設(shè)計(jì)理念必須以人為本，針對(duì)用戶年齡、職業(yè)、愛好等特點(diǎn)，進(jìn)行整合，根據(jù)用戶主觀方面的個(gè)人喜好，從而進(jìn)行設(shè)計(jì)。
作者 Timo Kuilder
3、案例分析：
1、專注：確定產(chǎn)品的主要功能，功能的明確可以幫助用戶最高效的完成任務(wù)
案例1：百度網(wǎng)盤
百度網(wǎng)盤是一款云存儲(chǔ)服務(wù)產(chǎn)品，用戶將可以輕松將自己的文件上傳到網(wǎng)盤上，并可跨終端隨時(shí)隨地查看和分享。
案例2：有道云筆記
有道云筆記是一款專注辦公提效的筆記軟件，支持多端同步，用戶可以隨時(shí)隨地對(duì)線上資料進(jìn)行編輯、分享以及協(xié)同。
2、特色：每款產(chǎn)品都有屬于自己的特色，區(qū)別于同行產(chǎn)品的不同之處，結(jié)合產(chǎn)品調(diào)性設(shè)計(jì)，不要盲目跟風(fēng)；它可以是功能、體驗(yàn)、或者是視覺
案例：每日故宮
每日故宮是一款以日歷的形式推出故宮藏品的應(yīng)用，“每天一件故宮藏品”，“讓觀眾隨時(shí)隨地看到故宮藏品”。其主要特色功能就是以日歷的形式展示內(nèi)容，在視覺和圖標(biāo)上也有自己的特色。
3、情感：在設(shè)計(jì)的過程中，可以加入情感化設(shè)計(jì)，使用戶將情感融入產(chǎn)品中，關(guān)系更緊密
案例：淘票票
有趣的文案結(jié)合IP可以快速的將用戶代入產(chǎn)品中，增強(qiáng)與用戶之間的親和力，有種身臨其境的感覺
4、互動(dòng)：動(dòng)效的運(yùn)用可以給用戶帶來(lái)不一樣的感官視覺，即使只是一個(gè)小小的按鈕
案例：最右底部Tab欄切換狀態(tài)，其互動(dòng)可以增強(qiáng)用戶與產(chǎn)品之間的互動(dòng)
5、調(diào)研：調(diào)研可以了解產(chǎn)品所在行業(yè)的情況、市場(chǎng)需求、競(jìng)爭(zhēng)力、同類型產(chǎn)品的優(yōu)劣勢(shì)等，從而更好的設(shè)計(jì)產(chǎn)品
調(diào)研方法：按調(diào)研途徑分為文案調(diào)研、在線訪問、電話訪問和實(shí)地調(diào)研
調(diào)研工具：?jiǎn)柧硇?、問卷網(wǎng)等
分析工具：Origin是一款常用的數(shù)據(jù)分析軟件，操作簡(jiǎn)單，可視化直觀；SPSS是一款專業(yè)分析工具，其功能包括數(shù)據(jù)管理、統(tǒng)計(jì)分析等
6、用戶：研究用戶特征、細(xì)分用戶，站在用戶角度思考，了解用戶想要什么樣的產(chǎn)品
用戶研究：
是一種理解用戶，將他們的目標(biāo)、需求與產(chǎn)品宗旨相匹配的理想方法，能夠幫助定義產(chǎn)品的目標(biāo)用戶群
用戶研究重點(diǎn)工作在于研究用戶的痛點(diǎn)，包括前期用戶調(diào)查、情景實(shí)驗(yàn)等
作者 Timo Kuilder
7、場(chǎng)景：需要考慮用戶使用場(chǎng)景是怎么樣的，不同場(chǎng)景功能需求不同，可以用故事板的形式展示用戶場(chǎng)景
使用場(chǎng)景：
包括時(shí)間、空間、設(shè)備支持、社交及用戶情緒等，進(jìn)行應(yīng)用場(chǎng)景的判斷和描述的時(shí)候，需要考慮全面，不同的場(chǎng)景下存在著用戶不同的需求。
故事板：
故事板也叫分鏡腳本，雖然更多用在電影、動(dòng)畫、電視劇、廣告等影像媒體的創(chuàng)作前期
故事板工具：Boords
Boords界面簡(jiǎn)約美觀、操作簡(jiǎn)單，滿足制作故事板的基本功能
8、數(shù)據(jù)：以數(shù)據(jù)為依據(jù)從而進(jìn)行設(shè)計(jì)，不做沒數(shù)據(jù)支撐且無(wú)意義的設(shè)計(jì)
數(shù)據(jù)統(tǒng)計(jì)：百度統(tǒng)計(jì)、百度指數(shù)、阿里指數(shù)等
百度統(tǒng)計(jì)：全球最大的中文網(wǎng)站流量分析平臺(tái),幫助企業(yè)收集網(wǎng)站訪問數(shù)據(jù)
百度指數(shù)：
百度指數(shù)是以百度海量網(wǎng)民行為數(shù)據(jù)為基礎(chǔ)的數(shù)據(jù)分享平臺(tái)。在這里,你可以研究關(guān)鍵詞搜索趨勢(shì)、洞察網(wǎng)民興趣和需求、監(jiān)測(cè)輿情動(dòng)向、定位受眾特征
阿里指數(shù)：
是定位于“觀市場(chǎng)”的數(shù)據(jù)分析平臺(tái)，旨在為中小企業(yè)用戶、業(yè)界媒體、市場(chǎng)研究人員,了解市場(chǎng)行情、查看熱門行業(yè)、分析用戶群體、研究產(chǎn)業(yè)基地等
作者 Timo Kuilder
9、少即是多：突出用戶所需的主要功能即可，其他功能可弱化或者直接去掉
少即是多：
現(xiàn)代主義設(shè)計(jì)建筑大師——米斯·凡德羅提出
在設(shè)計(jì)中：
少即是多就是明確目標(biāo)，專注地圍繞用戶目標(biāo)進(jìn)行設(shè)計(jì)，將產(chǎn)品打造得簡(jiǎn)單易用，同時(shí)又能夠解決用戶的需求
案例：留白
留白是一款提供多種圖文排版樣式，可以將文字、署名和日期安置在圖片以外的留白區(qū)域，讓你記錄的每一個(gè)精彩畫面都變成有故事的留白卡片
二、設(shè)計(jì)時(shí)需思考
設(shè)計(jì)時(shí)需要思考的問題：
1、簡(jiǎn)約：簡(jiǎn)潔的界面可以減少用戶發(fā)生錯(cuò)誤操作，減少認(rèn)知成本，便于用戶了解和使用
案例：字里行間
字里行間是一款文學(xué)性非常清新的文字閱讀與創(chuàng)作軟件，可以讓用戶靜下心來(lái)閱讀與創(chuàng)作，整體設(shè)計(jì)簡(jiǎn)潔，界面結(jié)構(gòu)清晰，減少了用戶的學(xué)習(xí)成本。
2、易用：容易上手的產(chǎn)品才是成功的產(chǎn)品，從用戶思維入手，功能一目了然，操作更方便
案例：句讀
這是一款不錯(cuò)的掌上語(yǔ)句社區(qū)，每天可以輕松的看到豐富的優(yōu)質(zhì)語(yǔ)句，解決了用戶想要一款可以體驗(yàn)精彩文學(xué)內(nèi)容產(chǎn)品的APP，功能按鈕明確，操作快捷，符合用戶需求。
3、視覺：產(chǎn)品是否好用為第一重要性，視覺也不可缺少，強(qiáng)烈的視覺可以抓住用戶的眼球，給用戶留下印象，讓用戶記住你的產(chǎn)品
案例1：CCtalk
這是一款致力于為學(xué)習(xí)愛好者打造的在線互動(dòng)學(xué)習(xí)平臺(tái)，疊加圖標(biāo)的運(yùn)用在界面上特別突出，整體視覺給人強(qiáng)烈的感覺。
案例2：飛豬
這是一款提供機(jī)票、酒店、旅游線路等商品的綜合性旅游出行網(wǎng)絡(luò)交易服務(wù)平臺(tái)，金剛區(qū)的圖標(biāo)設(shè)計(jì)得很精致，給人印象深刻，吸引用戶點(diǎn)擊。
4、色彩：品牌色和輔助色的確立，確定適合產(chǎn)品的品牌色，品牌色可以加強(qiáng)用戶對(duì)產(chǎn)品的認(rèn)知
品牌色：品牌色可以決定產(chǎn)品的基本調(diào)性，讓用戶在眾多產(chǎn)品中一眼就看到你的產(chǎn)品，容易被記住和識(shí)別。
案例：網(wǎng)易云音樂、BOSS直聘
網(wǎng)易云音樂、BOSS直聘的品牌配色都很簡(jiǎn)單，BOSS直聘的配色只有綠色和白色，配色單一卻顯得突出。品牌色運(yùn)用到界面可以加強(qiáng)用戶對(duì)產(chǎn)品的認(rèn)知。
5、規(guī)范：規(guī)范設(shè)計(jì)的統(tǒng)一，在視覺上起到整齊的效果，保證產(chǎn)品的統(tǒng)一性
案例：QQ音樂圓角的設(shè)計(jì)，圓角的統(tǒng)一和運(yùn)用使頁(yè)面看上去圓潤(rùn)有親和力，適合聽歌的時(shí)候那種放松的心情
6、習(xí)慣：遵循用戶的操作習(xí)慣，設(shè)計(jì)是為了讓用戶更好的體驗(yàn)，而不是讓用戶用的不舒服
案例1：淘寶
案例2：京東
搜索欄和分類：搜索欄和分類都是電商類平臺(tái)最重要功能，兩款產(chǎn)品都遵循用戶的操作習(xí)慣，放置了右上側(cè)，是因?yàn)橛脩粢呀?jīng)對(duì)這些功能的位置形成記憶
7、安全：在設(shè)計(jì)中要考慮的重要因素就是安全性，以及操作和選擇都是可逆的，可以減少用戶的懷疑和心理疑惑
案例1：微信聊天撤回和重新編輯功能
案例2：智行火車票退票功能
案例3：淘寶退款、退貨功能
8、人性化：用戶可以根據(jù)自己的操作習(xí)慣、所需功能或者愛好制定界面
案例1：UC頭條的頻道選擇、形象選擇
案例2：酷狗新版選擇主題皮膚
兩款產(chǎn)品都很人性化，用戶可以根據(jù)自己喜好選擇關(guān)注的內(nèi)容和風(fēng)格
9、反饋：用戶操作出現(xiàn)異常的時(shí)候，及時(shí)給予用戶反饋信息，并出現(xiàn)正確引導(dǎo)
案例1：QQ閱讀的書架還沒有任何書本的時(shí)候
案例2：虎課網(wǎng)在沒有登錄賬戶的時(shí)候出現(xiàn)的反饋界面
案例3：Soul網(wǎng)絡(luò)異常
案例4：喜馬拉雅未成年模式
10、警告框：在緊急中斷、需要確認(rèn)和通知用戶的情況下使用，友好的文案，可減少用戶心理的不適
案例1：微博在無(wú)WiFi網(wǎng)絡(luò)的情況下播放視頻
案例2：騰訊課堂網(wǎng)絡(luò)異常
11、加載：分為靜態(tài)和動(dòng)態(tài)兩種形式，動(dòng)態(tài)加載可以吸引用戶的注意力，減少用戶等待的焦慮和無(wú)聊
案例1：?jiǎn)袅▎袅ㄊ醉?yè)和頁(yè)面加載狀態(tài)，首頁(yè)加載是動(dòng)態(tài)，而頁(yè)面加載的形式是靜態(tài)
案例2：虎牙直播動(dòng)態(tài)加載狀態(tài)
12、引導(dǎo)：引導(dǎo)功能，便于用戶了解功能和操作界面，產(chǎn)品更新后也可以使用引導(dǎo)來(lái)告訴用戶
案例1：芒果TV功能更新指引
案例2：酷狗功能更新指引
案例3：每日故宮功能解說和功能更新引導(dǎo)
小結(jié)
希望通過這次的UI設(shè)計(jì)思考總結(jié)，讓自己變得更好更優(yōu)秀，總結(jié)是對(duì)自我的成長(zhǎng)和監(jiān)督，不僅可以提高工作的效率，還可以加強(qiáng)對(duì)產(chǎn)品的思考能力。結(jié)合UI設(shè)計(jì)思考過程，體驗(yàn)不同的產(chǎn)品，感受不同的設(shè)計(jì)，注意細(xì)節(jié)、認(rèn)真分析
作者：黑澤雙熾 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
Neumorphism / soft ui（新擬態(tài)也有人叫同化、軟UI）是什么？在前一段時(shí)間，大家即使沒有看過，但是應(yīng)該也聽到過一些關(guān)于這種新風(fēng)格的介紹，或者是在某某趨勢(shì)中有類似作品的出現(xiàn)，不太了解或者一看而過。簡(jiǎn)單的介紹一下，標(biāo)題并非判斷結(jié)果，而是希望同大家一起探尋一起交流，一起討論這種風(fēng)格是否會(huì)是接下來(lái)的新趨勢(shì)...
起因是源于2019年11月5日，來(lái)自烏克蘭的設(shè)計(jì)師 Alexander Plyuto 在追波和ins上發(fā)布了下圖的一張作品，作者說明信息：
“讓我們想象一下，如果在移動(dòng)界面設(shè)計(jì)中，投影的形式發(fā)展的更好的話，那將來(lái)的界面將會(huì)是什么樣的，這是我的愿景。”
Dribbble-Alexander Plyuto的作品
目前作品在追波平臺(tái)收獲贊量4000+，瀏覽量23W+，一路飆升至追波2019年pop排行第一熱門的作品，同時(shí)在ins上的傳播也是異常的火爆，獲得很多設(shè)計(jì)的喜歡，評(píng)論頓時(shí)炸開了鍋，其中有設(shè)計(jì)師稱呼這種風(fēng)格為“Neumorphism 新擬態(tài)”或者“Soft UI 軟UI”，于是這種叫法慢慢傳開，可能并不準(zhǔn)確。
為什么這個(gè)風(fēng)格會(huì)火？你怎么認(rèn)為？
先拋開作品發(fā)布的平臺(tái)帶來(lái)的熱度，很多設(shè)計(jì)師認(rèn)為這本身也是一種潛在的趨勢(shì)，隨處可見的C4D的輕質(zhì)感在不同領(lǐng)域和不同方向的使用，IOS13更新后的部分拋棄了純扁平，重拾了3D的感覺。它會(huì)火的主要還是在視覺上，這種風(fēng)格剛一出現(xiàn)，它是非常新穎的，在長(zhǎng)達(dá)半年的幾乎高度一致的風(fēng)格下，它是新的嘗試，讓人憧憬的方向。
能有不斷創(chuàng)新的設(shè)計(jì)師帶給我們不同的設(shè)計(jì)風(fēng)格，首先需要感謝，其次再去以個(gè)人的視角看待它。那么多風(fēng)格的作品，那么擬態(tài)就變成趨勢(shì)了？我們帶著這個(gè)問題，一起繼續(xù)探討（我們先把代碼實(shí)現(xiàn)等話題放在文章最后討論）。
帶著疑問，仔細(xì)看一下上面的作品，第一眼看有點(diǎn)像早期的寫實(shí)風(fēng)格（如下圖），接近真實(shí)感，有強(qiáng)烈的質(zhì)感和空間感......但是不同的是也帶了一點(diǎn)當(dāng)前依舊流行的多彩模糊陰影的感覺。我們?cè)囍フ乙幌逻@種風(fēng)格的特點(diǎn)有哪些......
IOS 13 圖片編輯界面
by Mike | Creative MintsMike
通過觀察，我們不難發(fā)現(xiàn)這種風(fēng)格的一些基本特點(diǎn)：
元素并不浮動(dòng)
元素色彩相對(duì)單一，與背景高度統(tǒng)一
左上角亮色投影，右下角深色投影
多以卡片樣式出現(xiàn)
更加適合大圓角圖形
...
克服恐懼最好的辦法就是 —— 臨摹它！
這種表現(xiàn)方式，其實(shí)并不難，去閱讀了幾乎全部相關(guān)的資料，也去查閱了作者相關(guān)的介紹和說明，試著去了解一下這種風(fēng)格。首先我們先以按鈕為例，請(qǐng)看下圖：
這三個(gè)圖標(biāo)，你更愿意點(diǎn)哪一個(gè)？
這是我們比較常見的三種也是相對(duì)比較流行的表現(xiàn)方式，我們分別從常規(guī)的頂部視角和側(cè)面視角去觀察它們：
扁平的：首先在層級(jí)上，扁平的通常給我們的感知就是與背景是同為一個(gè)平面，視覺層級(jí)也沒有特別強(qiáng)烈的前后關(guān)系（不考慮圖標(biāo)本身），對(duì)背景沒有太大的依賴，如果本身背景與畫面整體背景有區(qū)分，色彩就劃分了層級(jí)。
投影的：帶投影的給我們的感知就是漂浮起來(lái)的，單獨(dú)看它，它漂浮在背景之上，與扁平并列看，它還要高于扁平的，通常大家為了突出某些內(nèi)容，某個(gè)模塊會(huì)去使用這種樣式。投影的使用對(duì)背景的依賴幾乎可以忽略，因?yàn)橥队俺诵螤羁梢哉{(diào)整，包括色彩、大小等都可以調(diào)整，且它是無(wú)邊界的漂浮著，即你可以隨意定義它的高度。
新擬態(tài)：頂面看，它似乎是介于扁平與投影之間，側(cè)面看，同樣也是漂浮的，但是它有厚度卻又沒有離開平面，它的范圍相對(duì)于投影的無(wú)邊界，似乎還有一些模糊的界定。對(duì)背景的有一定的依賴，需要幾乎相同的色值去實(shí)現(xiàn)。
回到上面的問題，這三個(gè)你會(huì)更傾向于點(diǎn)哪個(gè)？當(dāng)然上面的案例沒有示意在不同色彩下的情況，也有認(rèn)為拋開體感上，前面兩張白色背景的已經(jīng)高于新擬態(tài)，因?yàn)樗c背景的高度融合，在對(duì)比度上已經(jīng)弱了很多。
可能這時(shí)候有人會(huì)有疑惑，單獨(dú)看這一個(gè)按鈕不是很有對(duì)比性，尤其是在視覺上體現(xiàn)的也不明顯。所以我們簡(jiǎn)單繪制了一些卡片試試在作為信息承載的時(shí)候，這種風(fēng)格的效果如何，同時(shí)也去將不同的樣式融合，看看脫離背景的約束，局部是否可用與協(xié)調(diào)。
我們可以從上圖看出，當(dāng)這種風(fēng)格用做內(nèi)容承載時(shí)候，不管是文字圖片按鈕或者圖標(biāo)，僅僅在用做卡片的時(shí)候，效果還是蠻好的，它同前面兩種風(fēng)格一樣，仍然可以清晰的區(qū)別內(nèi)容層次、間距等，但是親測(cè)如果大面積使用，頁(yè)面會(huì)變的更加復(fù)雜，整體的層級(jí)較難清晰劃分，那么局部使用效果如何？
局部使用在某種特定的場(chǎng)景是可以用的，如下圖的計(jì)算器界面。在的卡片、按鈕、進(jìn)度條等樣式下也能得以很好的展現(xiàn)。但是它比起投影卡片，除了視覺上，點(diǎn)擊感、移動(dòng)效果......差了很多。
看的這里，大家應(yīng)該會(huì)有一個(gè)自我評(píng)定標(biāo)準(zhǔn)，這應(yīng)該（目前）不會(huì)是一個(gè)大趨勢(shì)，至少明年不會(huì)，雖然這種風(fēng)格很受人喜歡，但是這種風(fēng)格還存在很多弊端：
首先，除了卡片等樣式，它不能有效的提高信息的傳達(dá)，頁(yè)面內(nèi)容密集，過多使用容易導(dǎo)致混亂，如果靠投影的大小或深淺來(lái)區(qū)分，即使達(dá)到效果，畫面會(huì)變得復(fù)雜沉重。
按鈕的凸起和凹陷的狀態(tài)，絕大部分需要通過投影來(lái)識(shí)別，這是比較困難也是比較嚴(yán)重的問題，這樣是幾乎很難區(qū)分點(diǎn)擊的前后狀態(tài)的。
背景色的依賴太大，色彩對(duì)比度較低，相對(duì)于白卡投影等形式的應(yīng)用，目前的樣式不能讓內(nèi)容與背景產(chǎn)生良好的對(duì)比，不利于信息傳遞。
實(shí)現(xiàn)問題，其實(shí)現(xiàn)實(shí)難度到還真不難，話筒交給你們......
所以這種風(fēng)格就涼了嗎？
這種風(fēng)格其實(shí)在某些局部地方還是可以使用的，小面積的和其他風(fēng)格進(jìn)行混合使用。無(wú)數(shù)的可能性需要大家去做更多的嘗試和創(chuàng)新。通過對(duì)趨勢(shì)的了解，結(jié)合我們認(rèn)知范圍內(nèi)正確的組合和排列，說不定會(huì)創(chuàng)造一個(gè)意想不到的“船新版本”。
我們只有在這樣的思考和創(chuàng)造的過程中，獲得更多的靈感。不能不考慮實(shí)現(xiàn)問題，但是我們更需要順應(yīng)趨勢(shì)，不管這個(gè)趨勢(shì)能火多久，在將來(lái)能否得到應(yīng)用，只有不斷的探索更多更新的東西，設(shè)計(jì)才會(huì)變得更加美好。動(dòng)起手來(lái)吧~
下面還是簡(jiǎn)單的分享一下實(shí)現(xiàn)的方法，并分享一下相關(guān)的源文件與作者的源文件供大家學(xué)習(xí)交流哦！
凸起部分：
第一步：確定配色，最好是淺色或者是深色，選取高光色和投影色（非同色系的不同組合大家可以多去嘗試）
第二部：創(chuàng)建對(duì)象，更加適合圓角的對(duì)象，可以是純色，或者輕微的漸變效果也更好
第三部：添加投影，投最好是X和Y軸的位移是一致的，至于角度，大家自由發(fā)揮吧，這里建議亮色投影和深色投影分別復(fù)制一份制作，如果是在同一圖層上做，交界處效果不理想，更模糊。
凹陷部分：
步驟幾乎一致，投影換成內(nèi)陰影做對(duì)角線的深淺添加可以。
這里說一下，凹陷部分完全按照這種風(fēng)格去實(shí)現(xiàn)，顯示效果其實(shí)不好，作者包括其他設(shè)計(jì)師都在這里做了優(yōu)化，優(yōu)化后的實(shí)現(xiàn)方式上已經(jīng)不屬于這個(gè)風(fēng)格了，因?yàn)樽詈蟮膶?shí)現(xiàn)效果，側(cè)面觀察它已經(jīng)是脫離背景的，如果融合背景也可以，只是邊界會(huì)更加模糊，所以仔細(xì)觀察作品，細(xì)心的同學(xué)應(yīng)該已經(jīng)發(fā)現(xiàn)是如何處理的：其實(shí)就是添加一個(gè)邊框，再讓投影充當(dāng)淺色高光。
作者：Frannnk 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
什么是形式呢，就是組件在相同的功能和元素下，排版、視覺的呈現(xiàn)方式。形式的對(duì)比，就是在一個(gè)頁(yè)面中，不同組件的呈現(xiàn)方式上是否能形成差異化，讓頁(yè)面看起來(lái)更豐富多元。
分析上方的案例，組件之間并沒有拉開差異性，尤其在詳情頁(yè)中，劇情簡(jiǎn)介和觀眾影評(píng)，影人和劇照，設(shè)計(jì)形式接近一致，這就是一個(gè)不好的開端。
再看看一些擁有相同問題的設(shè)計(jì)案例：
仔細(xì)點(diǎn)觀察就會(huì)發(fā)現(xiàn)，作為飛機(jī)稿，不是圖片、顏色用得花哨就夠了的，組件缺少差異性，設(shè)計(jì)感就完全無(wú)法體現(xiàn)。如果還沒法理解，就再看看下面幾個(gè)案例，是不是就沒有形式強(qiáng)行重復(fù)的尷尬，表現(xiàn)得更合理：
所以針對(duì)作業(yè)中的問題，我們?cè)谶@個(gè)基礎(chǔ)上進(jìn)行完善，第一步要做的就是在形式上做出區(qū)分。所以我們可以通過以下幾個(gè)思路來(lái)調(diào)整第一頁(yè)：
- 頭部分頁(yè)器和下方的上映/即將上映過于近似，控件形式上需要作出區(qū)分
- 圖片太多，模塊左右邊緣都是圖片，導(dǎo)致看上去呆板，要減少圖片出現(xiàn)的面積
- 底部新聞部分不能繼續(xù)使用大圖模式要作出調(diào)整
第二頁(yè)的調(diào)整上，主要在下半部分
- 演員和劇照應(yīng)該有更加明顯的差異
- 評(píng)論和上方的簡(jiǎn)介這兩個(gè)不同的組件，形式上卻看起來(lái)完全一致
通過原型上的調(diào)整，就可以得到一個(gè)初步改版的樣式，各個(gè)組件之間保證足夠的差異化和識(shí)別性，可以觀察看看是不是比原來(lái)的頁(yè)面更合理了。
色彩對(duì)比是很關(guān)鍵的對(duì)比，色彩決定作品給人的第一印象。那么如何為色彩做出對(duì)比呢？無(wú)非就是鮮艷對(duì)比淺色、暗色對(duì)比亮色、暖色對(duì)比冷色，不用特意套用配色的理論，用比較直觀的感受判斷就可以。
開始配色的過程中，我們首先需要確定主色和背景色，原圖中的主色棕色和背景色白色，搭配起來(lái)的效果給我們的感受并不強(qiáng)烈，所以我對(duì)原色的棕色做一定范圍的調(diào)整。
然后把主色添加到原型中，并為相關(guān)的一些元素添加合適的輔助色。先看第一頁(yè)添加后的效果。
然后我們?cè)贋樵驮黾优鋱D，這里要重點(diǎn)關(guān)注，以 “作品” 角度切入的話，配圖也是整個(gè)界面元素的一部分，包括它使用的色彩。如果一個(gè)界面中出現(xiàn)了多處需要應(yīng)用配圖的地方的話，那么不同的模塊所使用配圖的風(fēng)格和色彩，也應(yīng)該有一定的對(duì)比，而不是一種風(fēng)格擼到底的。比如還是之前的這個(gè)錯(cuò)誤的案例：
所以根據(jù)這個(gè)原則，我們加入配圖后再看看效果：
如果頭部我們用了色彩主體比較強(qiáng)烈的配圖，那么在下方就應(yīng)該用比較平淡簡(jiǎn)約的，做出明確的對(duì)比。
在第二頁(yè)中也應(yīng)用一樣的方法，那么思路如下：
- 頭部作為權(quán)重最高的組件顏色要更突出
- 頭部背景和封面的顏色應(yīng)該具有更大的對(duì)比，并能讓文字更容易識(shí)別
- 頭部、劇照?qǐng)D片較豐富，所以在影人和用戶頭像中應(yīng)該使用更簡(jiǎn)單的配圖
整體增加配圖后的效果：
到這里已經(jīng)有了大致的設(shè)計(jì)效果，已經(jīng)可以明顯感覺到比之前的設(shè)計(jì)有更好的提升，但是，對(duì)比不是到這里就結(jié)束了，我們接著往下做。
文字對(duì)比是最容易被忽視的細(xì)節(jié)，很多設(shè)計(jì)師都認(rèn)為文字只要看得清就行，樣式變化越少越好，這是非常錯(cuò)誤的思路。
文字樣式的多少主要取決于文字段的類型和需要重點(diǎn)體現(xiàn)的內(nèi)容數(shù)量，而不是沒有理由的精簡(jiǎn)到最少。例如看一篇排版成熟的期刊或是論文，其中標(biāo)題、副標(biāo)題、正文、引用、標(biāo)注等作用不同的文字段，都會(huì)有不同的樣式來(lái)幫助我們?nèi)^(qū)分，如果從頭到尾出現(xiàn)的所有文字都應(yīng)用一樣的格式，那么就毫無(wú)可讀性。
文字的對(duì)比，主要通過以下幾個(gè)屬性表現(xiàn)：
- 字號(hào)
- 字重
- 色彩
即：越重要的文字字號(hào)越大、字重越高、色彩越深，權(quán)重越低的則反之。
回到我們的案例，在原型階段，其實(shí)我已經(jīng)對(duì)文字做出了簡(jiǎn)單的對(duì)比處理，下面我們要進(jìn)一步細(xì)化這個(gè)步驟。
修改的分析大致如下：
- 分頁(yè)器作為權(quán)重最高的文字段，所以模塊標(biāo)題不應(yīng)該比它更顯眼
- 多段文本比標(biāo)題類文字權(quán)重低一級(jí)，可以統(tǒng)一它們的樣式并比標(biāo)題稍弱
- 注釋類文字比多段文本再弱一級(jí)，用較低的灰度
- 為評(píng)分、點(diǎn)贊數(shù)、展開等有“特殊性質(zhì)”的文本增加色相
然后我們可以看看下面修改前后的對(duì)比：
通過正確細(xì)化文字的對(duì)比以后，就能真正讓頁(yè)面精致起來(lái)，具備豐富的細(xì)節(jié)。當(dāng)然，對(duì)于文字權(quán)重的安排和思考會(huì)根據(jù)不同的思路和產(chǎn)品需求得到不同的樣式結(jié)果，但絕對(duì)不能忽略這個(gè)過程。
通過正確細(xì)化文字的對(duì)比以后，就能真正讓頁(yè)面精致起來(lái)，具備豐富的細(xì)節(jié)。當(dāng)然，對(duì)于文字權(quán)重的安排和思考會(huì)根據(jù)不同的思路和產(chǎn)品需求得到不同的樣式結(jié)果，但絕對(duì)不能忽略這個(gè)過程。
投影的使用既是視覺樣式，也是一個(gè)用來(lái)制造景深的技巧。只要在一個(gè)扁平的界面中，為任何一個(gè)元素添加了投影，那么這個(gè)界面就存在了上下的空間關(guān)系，處于上方的元素就會(huì)得到凸顯，例如蘋果官方應(yīng)用中的案例：
既然是空間關(guān)系，就要有前后的落差對(duì)比，我們要為最重要的元素增加投影，而不是把它當(dāng)成設(shè)計(jì)風(fēng)格進(jìn)行統(tǒng)一的添加。所有元素都帶上了投影，就沒有了對(duì)比，可看性也會(huì)大打折扣。
所以，在這些頁(yè)面中，需要突出的元素分析如下：
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：酸梅干超人 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(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.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
通過用各類對(duì)比繼續(xù)為大家?guī)?lái)視覺“熱”知識(shí)~目錄如下
海報(bào)視覺如何做的有創(chuàng)意？有哪些方法呢？
比如從構(gòu)圖、擬物、光影、嫁接、對(duì)比、或者反差？等等等等
每一種又都可以拆分成很多細(xì)類。
比如對(duì)比在視覺海報(bào)中的運(yùn)用，又有明暗對(duì)比、顏色對(duì)比、大小對(duì)比、虛實(shí)對(duì)比等等、太多了！
首先我們來(lái)分析一下大小對(duì)比是如何應(yīng)用的。
我們先看下這張圖：
兩個(gè)元素， 如果一樣大，平鋪在畫面中，就會(huì)顯得普普通通的，沒有任何亮點(diǎn)。
如果我們把其中一個(gè)放大，另一個(gè)縮小，再來(lái)看：
畫面是不是有特點(diǎn)了很多，并且有了節(jié)奏感， 就連文案排版也有更多的方式。
所以對(duì)比就是讓畫面的兩個(gè)組成部分/元素，以夸張的手法，布局構(gòu)圖，以讓畫面產(chǎn)生強(qiáng)烈的反差。以提升畫面沖擊力，畫面縱深，內(nèi)容豐富層度。是非常有效提升畫面品質(zhì)的方法之一。
那大小對(duì)比如何玩的精通，玩得高級(jí)呢？
我們一起來(lái)看一下：
1.2.1 全身與半身對(duì)比
這種半身人物和小人物的對(duì)比，或者頭部表情眼神與小人物的對(duì)比主要可以展示人物細(xì)節(jié)，后面的人物放大表情傳遞情緒，前面的人物展示全身，傳遞狀態(tài)，可以很好地傳遞內(nèi)容，常常用在各類視覺海報(bào)中。
(下面右側(cè)的圖是江湖哥2017年做的圖，分析兩次了，哈哈，備注下）：
這種對(duì)比有強(qiáng)烈的大小反差，并且可以很大程度地拉伸畫面縱深，表現(xiàn)出很強(qiáng)的空間感！
并且還有一個(gè)細(xì)節(jié)：這兩張都是三角形構(gòu)圖，非常穩(wěn)定。
所以我們?cè)谠O(shè)計(jì)的時(shí)候要也要注意畫面的構(gòu)圖方式，夸張對(duì)比同時(shí)，要保證畫面的穩(wěn)定和飽滿！
1.2.3 全身與全身對(duì)比
全身的人物對(duì)比很小的人物，讓畫面有更多的空間可以利用， 可以留白想象，也可以打造場(chǎng)景氛圍，展示更多場(chǎng)景氛圍。
1.3.1 小場(chǎng)景與大人物
夸張化的對(duì)比，讓本該小巧的人物矗立在場(chǎng)景里，很容易就營(yíng)造除了一種巍峨磅礴的視覺感受。
一般需要很高的設(shè)計(jì)成本，工時(shí)不小。簡(jiǎn)單點(diǎn)的做法我們可以直接在人物下面拼接一些小場(chǎng)景，比如這樣：
一些日常小需求中，沒有那么多的時(shí)間去打磨細(xì)節(jié)，就可以這樣做，既能保證按時(shí)完成需求，也能有一定的創(chuàng)意性。
1.3.2 小人物與大場(chǎng)景對(duì)比
這種方法也非常具有創(chuàng)意性，把一些很小的物體放大，人物縮小， 反差表現(xiàn)兩個(gè)主體的大小對(duì)比。往往也能有出人意料的效果，需要更多的靈感和想法。
創(chuàng)意本身就是打破常規(guī)，把不可能變成可能，達(dá)到出人意料的效果就是創(chuàng)意。大小對(duì)比在畫面中的各種玩法就是可以很好達(dá)成這種目的的方法之一，大家可以多去嘗試，和練習(xí)，單這一種方法用好了就很牛逼了。
光影是在平面視覺里常用的一種技法方式，再說光影的創(chuàng)意之前，我們先說一下光影的作用。讓大家對(duì)光有所了解。
我們?yōu)榱酥庇^一些，直接用幾個(gè)圖片說明。
現(xiàn)在這張圖，這是一個(gè)瓶子的圖形：
我們給瓶子加入光影：
瓶子就變得立體了！
我們給背景加入光影：
空間變得有縱深了，畫面層次也豐富了起來(lái)！
所以光在畫面中最基礎(chǔ)的有兩個(gè)作用：
⑴讓物體變得立體，更加真實(shí)！
⑵增加空間縱深，豐富畫面層次！
那我們應(yīng)該如何利用光影，去做更有創(chuàng)意性的設(shè)計(jì)呢？
光影、光影，先有光后有影。那我們就先來(lái)說說主要表現(xiàn)光的幾個(gè)玩法：
2.2.1 逆光
逆光就是主體在正前方，光源與主體重疊的一種使用方式，可以說是我們最常用的光影塑造方法之一了：
它的特點(diǎn)是光源與主體重合，形成很強(qiáng)的對(duì)比，在畫面可以可以非常好地聚焦視線，強(qiáng)化主體。
2.2.2 側(cè)光
側(cè)光是光從主體側(cè)面打過來(lái)的光，一般不會(huì)太強(qiáng)：
主要是起到一個(gè)豐富畫面層次，營(yíng)造氛圍的作用。
2.2.3 頂光
從主體頂部打下來(lái)的光：
這種光，可以有效引導(dǎo)視覺，把需要的部分亮起，不需要的部分暗下去，由上至下，吸引人的視線范圍和順序。
2.2.4 聚光
從前方照射過來(lái)的燈光：
聚焦視線，不要的地方全部暗下去，是一種最能收攏視線的打光方式了。有些細(xì)節(jié)比較豐富的聚光畫面，暗部也會(huì)保留一定的細(xì)節(jié)，不會(huì)是一個(gè)純黑色。
2.2.5 造型
給光賦予一個(gè)造型，可以達(dá)到一種形式創(chuàng)意上的突破，
比如這種：
把光塑造成一個(gè)人物的造型，下面放置對(duì)應(yīng)的人物錘喪的狀態(tài)，形成很強(qiáng)的人物情緒反差，可以說是非常有創(chuàng)意了。
還可以把光塑造成物體，比如這種：
把偷過來(lái)的光塑造成與主體相關(guān)的某個(gè)物品造型，中間放置一個(gè)小的人物，同樣也是一種很棒的創(chuàng)意方式。
2.2.6 分割
除了打光方向，造型之外，其實(shí)還可以用光來(lái)風(fēng)格畫面，也可以起到一些非常亮眼的視覺效果，比如這樣：
以上就是光的玩法了，可以看到，光的玩法多種多樣，利用好了可以讓畫面非常具有創(chuàng)意性。
說完了光，我們來(lái)接著說說影子的玩法都有哪些呢？
2.3.1 投射
投射相交來(lái)說是比較常規(guī)的一種處理方式了：
用投影的方式加入到畫面中，可以增加畫面層次，渲染氛圍，讓畫面更有深度。
2.3.2 造型
影子也是可以改變?cè)煨偷模?
本來(lái)是應(yīng)該與人物動(dòng)作一致的影子，被改變?cè)煨团c人物產(chǎn)生互動(dòng)或?qū)Ρ?，映射出了非常?qiáng)的故事性，和內(nèi)容深度，非常具有創(chuàng)意性了。
在一些插畫或者游戲視覺中同樣也可以應(yīng)用起來(lái)：
內(nèi)容深度和想象空間直接拉滿！
2.3.3 剪影
配合逆光的形式，將主體以剪影的形式表現(xiàn)出來(lái)：
剪影的表現(xiàn)形式，為了凸顯剪影，背景上都會(huì)有一個(gè)逆光源存在，并且輪廓要清晰，在素材上刻畫一些輪廓光源以讓人物變得立體，可以營(yíng)造出很棒的神秘感，常常應(yīng)用在神秘嘉賓、新品發(fā)售、新角色發(fā)布等活動(dòng)中。
應(yīng)用在一些游戲中，強(qiáng)烈的明暗對(duì)比配合富有氣勢(shì)的人物造型，也可以打造出一些很有視覺沖擊力的海報(bào)視覺！
光與影的玩法多種多樣，既可以讓畫面變得立體，又可以提高空間縱深。打光方式、造型、剪影、分割等等用法，可以讓我們的視覺變得不太平淡單調(diào)，讓畫面擁有無(wú)限想象力的創(chuàng)意方式。
陣營(yíng)對(duì)比的特點(diǎn)是5:5分畫面，以對(duì)比色鋪墊畫面，形成強(qiáng)烈的視覺對(duì)比，和陣營(yíng)感。常用于表現(xiàn)兩個(gè)不同的陣營(yíng)，或者正反派的視覺表現(xiàn)中。
除了影視海報(bào)、游戲，競(jìng)技類體育類也常常使用這種對(duì)比方法：
主要表現(xiàn)：對(duì)抗、競(jìng)爭(zhēng)、陣營(yíng)
狀態(tài)對(duì)比常用于表現(xiàn)同一個(gè)人或主體物的多種狀態(tài)，比如人物的正常狀態(tài)和特殊狀態(tài)對(duì)比。通過一些技法讓兩種狀態(tài)和諧地拼接到一起，是讓單薄畫面豐富起層次和內(nèi)容的一種有效方法。
比如用畫面拼接的方式：
或者是同一主體，把兩種狀態(tài)表現(xiàn)到一起的方式：
主要表現(xiàn)：人或物的的兩種不同的狀態(tài)，冰對(duì)火、明對(duì)暗、正常對(duì)黑化等等。
讓兩個(gè)不同的時(shí)空聯(lián)系到一起，形成時(shí)間地點(diǎn)上的反差對(duì)比。
3.3.1 兩個(gè)不同空間的對(duì)比
由同一個(gè)元素貫穿兩個(gè)不同空間，提供畫面的延續(xù)性，表現(xiàn)出打破/穿越空間的意境，非常具有沖擊力。
3.3.2 兩個(gè)不同時(shí)段的對(duì)比
同一人物不同時(shí)期通過倒影等巧妙的表現(xiàn)方式，與主體形成時(shí)間上的對(duì)比。具有延續(xù)時(shí)間長(zhǎng)河的感覺，為觀者提供非常大的想象空間，是一種很有創(chuàng)意性的的方法。
主要表現(xiàn)：空間穿越、時(shí)間變化的對(duì)比。
這種創(chuàng)意方式更多是傳遞人物的情緒，安靜的狀態(tài)
對(duì)比憤怒的狀態(tài)，快樂的狀態(tài)對(duì)比悲傷的狀態(tài)，
也可以表現(xiàn)人物的兩面性，正常狀態(tài)和陰暗面等等:
會(huì)讓觀者感受到強(qiáng)烈的情緒傳遞，視覺表現(xiàn)上反而不會(huì)那么注重。
主要表現(xiàn)：重視情緒的傳遞
此虛實(shí)非彼虛實(shí)。
和我們常說的虛實(shí)對(duì)比不同，這里指的是虛幻和真實(shí)的對(duì)比，比如：
用線條或者影子打造一些和實(shí)體區(qū)別開的虛構(gòu)元素，和實(shí)體的元素形成對(duì)比，會(huì)有一種很虛幻浪漫文藝的感覺，可以用于表現(xiàn)一些幻想，不切實(shí)際的愛戀類似的主題中，能達(dá)到很少見的一些視覺效果。情感和創(chuàng)意都能得到很充分的傳遞。
作者：菜心工作室 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
一、官方規(guī)范
對(duì)于剛開始思考 UI 元素尺寸的新人，通常第一反應(yīng)都是去看官方規(guī)范，新人都以為官方設(shè)計(jì)規(guī)范的作用就是告訴你們?cè)氐拇笮『驮趺丛O(shè)置，只要看完了就能懂得如何設(shè)計(jì) iOS 或 Android 應(yīng)用。而實(shí)際上，這些規(guī)范并不能幫助你們解決這個(gè)問題，因?yàn)樵O(shè)計(jì)規(guī)范涵蓋的內(nèi)容遠(yuǎn)遠(yuǎn)比這些復(fù)雜，比如我們之前翻譯過的 iOS 規(guī)范。
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫(kù)所示。
官方并不會(huì)提供一個(gè)列表，逐一羅列每個(gè)元素的長(zhǎng)寬和其它參數(shù)，所以想要弄明白參數(shù)的問題，要自己在這兩套素材庫(kù)中選中元素才能查看其尺寸。如下圖左側(cè)這個(gè)按鈕，我們就能看見它的各項(xiàng)屬性：寬 359pt、高 57pt、圓角 14pt；右側(cè)的 Alert 提示框則寬 270pt、高 230pt、圓角 14pt。
因?yàn)?iOS 組件庫(kù)下載下來(lái)的都是 dmg 格式的文件，很多 windows 用戶不知道該怎么打開它，這里只需要百度搜索「DMG 提取器/查看器」就能下載到專門的解壓工具了。
在初期，我們想要設(shè)計(jì)出符合官方規(guī)范的界面，就可以嚴(yán)格照搬官方的元素設(shè)置。但是，即使官方的源文件所包含的元素及字體已經(jīng)非常多了，在實(shí)際設(shè)計(jì)過程中，還是會(huì)出現(xiàn)它們無(wú)法覆蓋的元素類型，需要依靠我們自己去給出尺寸。
還有如字體的應(yīng)用，官方源文件使用的語(yǔ)言是英文，光是官方應(yīng)用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應(yīng)用面板中密密麻麻的字體類型。在真實(shí)的中文設(shè)計(jì)場(chǎng)景下，我們是不可能照搬這種規(guī)范的！
所以每一個(gè)學(xué)習(xí)UI設(shè)計(jì)的新手，都必須要明白，官方的規(guī)范終究只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容，我們是無(wú)法設(shè)計(jì)出有趣個(gè)性化的界面的，比如下面這幾款已經(jīng)看不到 “ iOS 設(shè)計(jì) ”的應(yīng)用。
官方的參數(shù)決定我們?cè)O(shè)計(jì)的下限，當(dāng)你不知道該怎么做，或者設(shè)計(jì)的目標(biāo)就是以系統(tǒng)原生的體驗(yàn)和視覺為準(zhǔn)，那么照搬就行了！后面文章要說的，就是脫離開這些束縛之后，該怎么自定義 UI 元素的尺寸。
二、尺寸設(shè)置原則
UI 和平面不一樣的地方，就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無(wú)論是海報(bào)或畫冊(cè)，使用百分比、目測(cè)的形式就足以讓我們做出很多優(yōu)秀的作品，無(wú)需緊盯著其中出現(xiàn)的每個(gè)元素的長(zhǎng)寬高的數(shù)值。而 UI 的設(shè)計(jì)中，無(wú)論字體、圖標(biāo)還是按鈕，都需要我們嚴(yán)謹(jǐn)?shù)囟x它們的長(zhǎng)寬高，如下圖設(shè)計(jì)一個(gè)按鈕的操作：拖拉出矩形之后，我們依然需要到屬性設(shè)置的對(duì)話框中去輸入精確到1pt的數(shù)值。
這么做是因?yàn)樵陔娮悠聊恢?，圖像的呈現(xiàn)是由屏幕中的像素點(diǎn)來(lái)完成的，像素點(diǎn)是最小的顯示單位，一個(gè)像素只能顯示一個(gè)顏色，所以如果設(shè)置了帶有小數(shù)點(diǎn)的數(shù)值，那么這個(gè)元素的邊緣就會(huì)虛化。所以為了避免這種情況的出現(xiàn)，我們就得用整數(shù)來(lái)定義元素的長(zhǎng)和寬。
這當(dāng)中還涉及到不少比較復(fù)雜的屏幕顯示原理問題，尤其是和像素倍率相關(guān)的基礎(chǔ)知識(shí)，我會(huì)在另外的文章里分享。
需要注意的是，文章中出現(xiàn)的所有尺寸數(shù)值的單位，默認(rèn)以 iOS 官方規(guī)定的邏輯像素單位「pt」為準(zhǔn)，即 XD 和 Sketch 默認(rèn)畫布的單位，若在 PS 中設(shè)計(jì)需要在這個(gè)基礎(chǔ)上乘以 2。
只有分隔線，是唯一可以不使用整數(shù)的特例。因?yàn)?1pt 的分隔線看起來(lái)會(huì)非常粗，一點(diǎn)也不精致，感興趣的同學(xué)可以自己在 Sketch 或 XD 中畫個(gè)列表然后用 1pt 的線條做分隔，再導(dǎo)出到手機(jī)里觀看效果。即使是官方應(yīng)用，也主要使用 0.5pt 的線條做分隔。
無(wú)論是在 iOS 還是在 Android 的規(guī)范中，都提到過使用 8 x 8 的網(wǎng)格做輔助，這導(dǎo)致網(wǎng)上有很多片面的文章會(huì)反復(fù)強(qiáng)調(diào)對(duì)元素的尺寸使用 8 的倍數(shù)。
iOS: 使用 8px 網(wǎng)格系統(tǒng)：網(wǎng)格系統(tǒng)可以讓線條和圖像內(nèi)容在所有尺寸上保持清晰，無(wú)需太多的修飾和銳化。將圖形邊界對(duì)齊到網(wǎng)格上，減少按比例縮小圖像時(shí)出現(xiàn)的半像素和內(nèi)容模糊的情況。
Android：所有組件都與間隔為 8dp 的基準(zhǔn)網(wǎng)格對(duì)齊。排版/文字與間隔為 4dp 的基準(zhǔn)網(wǎng)格對(duì)齊。在工具中的圖標(biāo)同樣與間隔為 4dp 的基準(zhǔn)網(wǎng)格對(duì)齊。
實(shí)際上，我們?cè)谡鎸?shí)的設(shè)計(jì)環(huán)境中，建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可，如 8、12、16、20、24……等，它的好處我會(huì)在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無(wú)法滿足某些特定的需要，如：多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26 等。
以上就是我們一開始要建立的元素尺寸原則，精簡(jiǎn)完即：
使用整數(shù)，只有分隔線可以使用 0.5 的小數(shù)
使用 4 的倍數(shù)，根據(jù)實(shí)際情況可以切換成一般偶數(shù)。
有了這樣的原則，并養(yǎng)成習(xí)慣，我們就能在每次設(shè)計(jì)前對(duì)元素尺寸有個(gè)大致判斷，然后再根據(jù)需要按 4 的倍數(shù)調(diào)整
開始我使用 280pt 寬，44pt 高的尺寸，但是覺得有點(diǎn)僵硬，太正式了！這時(shí)候反思認(rèn)為應(yīng)該是輸入框太矮導(dǎo)致的，所以高度上改成 44+(4x2)=52pt 。這時(shí)候又覺得太高了，實(shí)際輸入內(nèi)容也沒那么寬，于是再對(duì)高減 4，寬減 40，獲取最終結(jié)果。
所以，因?yàn)檫@樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標(biāo)拖拽出來(lái)的（拖動(dòng)效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計(jì)過程就是一個(gè)不停鍵入?yún)?shù)和調(diào)整參數(shù)的過程。
這里要聲明，在我的描述體系中，控件指的是：界面中最基本的交互單位，如按鈕、滑塊、開關(guān)、分頁(yè)控件等，更復(fù)雜的如動(dòng)態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，我會(huì)根據(jù)前面定義的基礎(chǔ)原則，分別講解控件應(yīng)該使用的尺寸范圍。
一、按鈕 ( Buttons )
按鈕是界面交互操作中使用最頻繁的控件了，當(dāng)然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標(biāo)、卡通形象等等。在這里，我們只聚焦于矩形的基礎(chǔ)按鈕。
在進(jìn)入具體參數(shù)的講解前，要先理解一點(diǎn)，按鈕實(shí)際上是所有控件中最復(fù)雜的一個(gè)。并不是因?yàn)樵谠O(shè)計(jì)樣式上復(fù)雜，而是因?yàn)榘粹o承載了最多的產(chǎn)品訴求，權(quán)重差異極大，例如看下面的案例。
在上圖里，可以點(diǎn)擊的東西不少，我們只說外觀是標(biāo)準(zhǔn)樣式的按鈕，就有 9 個(gè)。而這里面，權(quán)重最高的必然是 “加入購(gòu)物車”。權(quán)重最低的，則是前往新品頁(yè)。
要定義按鈕尺寸，我們首先需要整理清楚不同的按鈕在界面或整個(gè)應(yīng)用中的權(quán)重。尺寸和權(quán)重是成正比關(guān)系的。當(dāng)然，顏色也是對(duì)重要性表現(xiàn)的關(guān)鍵因素，不過不在這里展開。
按鈕高度
當(dāng)我們?cè)O(shè)計(jì)按鈕時(shí)，優(yōu)先從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來(lái)匹配權(quán)重，分成高、中、低三類：
- 高權(quán)重：40-56pt
- 中權(quán)重：24-40pt
- 底權(quán)重：12-24pt
高權(quán)重的按鈕，類似登錄頁(yè)的注冊(cè)、登錄，購(gòu)物詳情頁(yè)的購(gòu)買，流程頁(yè)中的下一步，它們的最小高度應(yīng)該從 40pt 開始遞增。低于這個(gè)數(shù)值，那么按鈕就很難在頁(yè)面中起到視覺支撐的作用，因?yàn)闀?huì)感覺到它太細(xì)了。
中權(quán)重的按鈕，類似個(gè)人主頁(yè)的關(guān)注、點(diǎn)贊、評(píng)論按鈕等。這個(gè)層級(jí)的按鈕依舊有比較高的交互頻次，所以我們必須得保證它易于點(diǎn)擊。24pt 是在我經(jīng)驗(yàn)中便于點(diǎn)擊得最小尺寸了。這種按鈕通常是組件中的一部分，不像層級(jí)最高的按鈕常常是處于一個(gè)孤立的空間，所以高度如果超出 40pt，就會(huì)對(duì)當(dāng)前模塊產(chǎn)生直觀的破壞。
低權(quán)重的按鈕，就類似查看更多、標(biāo)簽、詳情等類型，相對(duì)于交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。
按鈕寬度
主流的按鈕都是橫向的長(zhǎng)方形，正方形的也有，但就是不能變成縱向的矩形。
按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無(wú)視內(nèi)容的長(zhǎng)度。因?yàn)樗鼈冃枰嗟膮^(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或橫跨屏幕的，可以特殊處理。
普通按鈕，左右邊界與內(nèi)容的距離過大，就會(huì)讓按鈕看起來(lái)非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容的長(zhǎng)度來(lái)設(shè)置按鈕的寬。左右間距的大小，應(yīng)該小于或等于上下間距的 2 倍。
按鈕圓角
最后，按鈕尺寸還有一個(gè)屬性，就是按鈕的圓角。矩形的四角有三種類型，即直角、圓角和半圓。
為矩形設(shè)置圓角，是為了讓按鈕看起來(lái)有一定的圓潤(rùn)感不會(huì)顯得太尖銳鋒利，這種圓角的數(shù)值要給得更加謹(jǐn)慎，只要超出了一定的范疇，就會(huì)對(duì)視覺的和諧產(chǎn)生影響，我習(xí)慣稱呼為——半圓不圓，如下圖右側(cè)的錯(cuò)誤案例。
所以，我們?cè)谠O(shè)計(jì)圓角的過程中，一定要仔細(xì)感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍，小于等于高度的 1/4。例如，一個(gè) 24pt 的圓角矩形，圓角的尺寸就應(yīng)該不大于 6pt。
以上就是按鈕相關(guān)尺寸定義的說明，當(dāng)然，在真實(shí)的設(shè)計(jì)需求中可能遇到很多無(wú)法滿足的情況，這就需要大家多做嘗試了。
二、輸入框 ( Text Fields )
輸入框也是比較常用的控件之一，它和按鈕有非常接近的外形。最常見的就是登錄頁(yè)賬號(hào)密碼輸入框，以及首頁(yè)上方的搜索欄了。
輸入框的高度，常規(guī)在 36-56pt 之間。低于 36pt 時(shí)則輸入框看起來(lái)會(huì)非常擁擠，比如我用下面學(xué)生的案例做個(gè)演示。
三、步進(jìn)器 ( Steppers )
常見的步進(jìn)器，就是輸入框和按鈕的結(jié)合。左右有兩個(gè)用來(lái)增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28-40pt 之間。下面我再用學(xué)員的作業(yè)做次演示，當(dāng)?shù)陀?28pt 以后，就會(huì)發(fā)現(xiàn)在屏幕中的占比實(shí)在太小了。
步進(jìn)器中常見的錯(cuò)誤，是在我們?cè)诶L制左右兩個(gè)按鈕，設(shè)置外框的圓角時(shí)，并沒有合理的去掉內(nèi)側(cè)的圓角，這是絕對(duì)不應(yīng)該忽略的細(xì)節(jié)。
四、下拉菜單 ( Dropdown Menus )
下拉菜單要注意它具有多種狀態(tài)，默認(rèn)、展開和選中。默認(rèn)狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當(dāng)菜單展開后，下方多出來(lái)的選項(xiàng)菜單，就值得注意了。
菜單的寬度正常情況下與默認(rèn)狀態(tài)相同，而高度根據(jù)里面包含的選項(xiàng)數(shù)量決定。單行選項(xiàng)的高度，不大于默認(rèn)的選項(xiàng)框。但也不能過小，新手很容易在彈出菜單中設(shè)定過小的高度，使個(gè)控件看起來(lái)會(huì)非常的別扭。
五、開關(guān) ( Switches )
開關(guān)也是按鈕的一種形式，通常出現(xiàn)在設(shè)置頁(yè)的列表中，上方就是它主流的幾種樣式。在設(shè)計(jì)開關(guān)的時(shí)候，要先確定一個(gè)矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt，之后再將其他細(xì)節(jié)填入。
六、滑塊 ( Sliders )
滑塊形式接近開關(guān)，通常在中間有一個(gè)操作節(jié)點(diǎn)，下面有一個(gè)用來(lái)表示區(qū)間的線條。實(shí)際上我們?cè)撟龅木褪欠謩e決定它們的尺寸。
節(jié)點(diǎn)如果做的太小，不僅會(huì)顯得難看，而且會(huì)讓人覺得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下方的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。
七、頁(yè)面指示器 ( Page Controls )
指示器用來(lái)展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進(jìn)去，就要讓它看起來(lái)和諧。大多數(shù)人在定義指示器時(shí)，不是太大，就是太小?？梢灾粡暮竺嫣峁┑某叽缰羞x擇，就能保證指示器的尺寸不會(huì)出錯(cuò)。
指示器主要是圓形和矩形兩種形式：
- 圓形：8、10、12pt ( 直徑 )
- 矩形：14×2 pt、16×2 pt、20×3 pt
八、提示紅點(diǎn) ( Badges )
提示紅點(diǎn)也是大多數(shù)應(yīng)用會(huì)使用的一個(gè)控件，它的大小應(yīng)該在 24-32 pt 之間。作為一個(gè)圓形，這個(gè)控件設(shè)計(jì)起來(lái)很容易，但設(shè)計(jì)師往往忽略一件事，那就是如果中間的數(shù)值超過 10 變成 2 位以后，要怎么處理。
在設(shè)計(jì)這樣的元素時(shí)，我們要用一個(gè)矩形元素來(lái)表現(xiàn)，即畫一個(gè)正方形，然后將圓角設(shè)成最大，那它看上去就是一個(gè)圓形。那么每增加一位字符，我們就需要為這個(gè)矩形增加該字符的寬度，可以用左右間距判斷。
因?yàn)橄嗤痔?hào)下，不同英文、數(shù)字的寬度都是不一樣的，所以我們要根據(jù)實(shí)際輸入的字段長(zhǎng)度去決定圓角矩形的寬度。
九、分頁(yè)控件 ( Tabs )
后一個(gè)控件，就是分頁(yè)控件了，安卓中的 Tabs。這個(gè)元素在設(shè)計(jì)時(shí)也受到排版空間的影響。較為寬松的排版風(fēng)格，高度就比較大，若擁擠則反之。下面是高度的取值：
- 高權(quán)重：40-48pt
- 低權(quán)重：28-36pt
分頁(yè)控件主要應(yīng)用在頭部和頁(yè)面中部的組件中，如下方的案例：
雖然很多時(shí)候分頁(yè)器沒有背景色，但是背景的矩形框是必須畫出來(lái)的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來(lái)確定中間文字的位置。
一個(gè)完整的分頁(yè)控件，里面會(huì)包含兩個(gè)或以上的選項(xiàng)，所以定義每個(gè)選項(xiàng)的寬是必要的。通常，我們有兩種定義方法，一種是選項(xiàng)少時(shí)，直接進(jìn)行均分顯示，另一種是選項(xiàng)較多，采取定寬模式，寬度最小建議在 64pt以上，才不會(huì)顯得過度擁擠。
分頁(yè)控件選項(xiàng)處于選中狀態(tài)時(shí)，有的設(shè)計(jì)是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個(gè)元素如果定義得不好，會(huì)讓整個(gè)控件看起來(lái)非常粗糙，它需要在樣式中能起到畫龍點(diǎn)睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應(yīng)該使用的高度都不應(yīng)該大于 2pt。寬度的話，前者和每個(gè)選項(xiàng)背景區(qū)域相等，后者則可以在 8-16pt 間（小于文字總寬）。下面是正確設(shè)計(jì)效果：
十、尾聲
前面說到了不少控件的尺寸，那么真實(shí)應(yīng)用的效果會(huì)如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁(yè)面中去。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：酸梅干超人 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(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.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
從視覺空間、字體性格、顏色情緒三個(gè)大方面來(lái)談一下我對(duì)視覺知識(shí)的部分理解！目錄如下
空間感：空間感( sense of space)是指藝術(shù)形象通過一定手法引起的類似現(xiàn)實(shí)空間的審美感受。藝術(shù)家通過特定的瞬間造型和空間深度的追求，使人聯(lián)想到其活動(dòng)、生活的環(huán)境空間。在繪畫、攝攝影藝術(shù)中，形象存在于二維平面中，但通過構(gòu)圖、透視、線條走向、光影和色彩處理，使人感受到空間的整體性、立體性。
而在我理解總結(jié)，空間感其實(shí)就是運(yùn)用各種手法，打造出畫面的空間縱深感，讓二維的畫面變成三維，從而提升畫面的品質(zhì)、細(xì)節(jié)、沖擊力。
我們以人物海報(bào)為例對(duì)比幾張圖，直觀感受一下：
無(wú)空間感：
有空間感：
我們直觀的可以看到，都是人物海報(bào)，下面的兩張明顯更有品質(zhì)感。有空間感的圖，畫面會(huì)更高級(jí)。
那是因?yàn)榭臻g感會(huì)讓你的畫面更有層次，更靈動(dòng)和富有場(chǎng)景感。這就是空間感的有點(diǎn)。
空間感，其實(shí)就是打造畫面縱深，讓元素之間形成前后關(guān)系，那有哪些方法來(lái)打造畫面縱深呢？我們總結(jié)了5個(gè)方法來(lái)分享給大家：
1.3.1 構(gòu)圖
富有極強(qiáng)透視線的構(gòu)圖能很直觀地表現(xiàn)出空間感。
比如
這類
這類擁有很強(qiáng)透視的構(gòu)圖，不用做別的，光構(gòu)圖就能體現(xiàn)出很強(qiáng)的空間感了。
實(shí)際運(yùn)用中，我們還可以利用標(biāo)題文案排列出這種透視構(gòu)圖來(lái)打造空間感：
1.3.2 虛實(shí)
虛實(shí)分為：
1.輪廓虛實(shí)
2.顏色虛實(shí)
輪廓虛實(shí)：兩個(gè)相同的元素，輪廓模糊的在空間上會(huì)感覺處于輪廓實(shí)的元素后方。
這是兩個(gè)元素，放到一起就會(huì)感覺上是在同一個(gè)平面上的。沒有虛實(shí)關(guān)系。
如果把其中一個(gè)圓的輪廓虛化：
是不是就會(huì)感覺出右邊的會(huì)在左邊的前面，拉出了前后的空間感。這就是我們的輪廓虛實(shí)了。
顏色虛實(shí)：越貼近背景色的顏色，在空間上會(huì)感覺處于后方。
還是這兩個(gè)元素，如果把其中的一個(gè)顏色調(diào)成和背景貼近：
兩相比較，顏色更實(shí)的飛碟，會(huì)處于顏色較淺的飛碟前面。
1.3.3 大小
越大元素會(huì)感覺越近，越小的元素感覺越遠(yuǎn)。
在實(shí)際操作中我們一般可以利用不同元素來(lái)制作這個(gè)效果。
比如這是一堆元素，如果大小都差不多，就會(huì)感覺是平鋪在一起的，沒有空間關(guān)系。
如果調(diào)整它們的大小， 重新擺放，通過近大遠(yuǎn)小的原理，就可以很輕易地打造出元素之間的前后關(guān)系，從而營(yíng)造出空間感了。
大小對(duì)比空間再其他畫面中的應(yīng)用：
1.3.4 明暗對(duì)比
除了虛實(shí)、大小之外，明暗也能對(duì)比出前后關(guān)系，從而營(yíng)造空間感。
通過紋理層次的明暗對(duì)比，一明一暗的對(duì)比，也能拉出前后關(guān)系。從而營(yíng)造空間感。
1.3.5 穿插
利用元素相互穿插產(chǎn)生的前后關(guān)系，也能營(yíng)造出空間感。
這是1個(gè)元素和兩個(gè)圓的平鋪，沒有交集。
如果我給他們穿插重疊在一起：
那就能產(chǎn)生元素之后的疊壓前后關(guān)系，從而也能營(yíng)造空間感。
利用在海報(bào)中：
以上這五種方式就是我們今天分享給大家的方法啦，
在視覺海報(bào)的打造中，基本都不是只靠其中一種方法去打造空間感，而是3種，甚至5種一起運(yùn)用，可以讓塑造的空間感的更有層次細(xì)節(jié)和沖擊力。
比如：輪廓虛實(shí)+顏色虛實(shí)+大小，或者：穿插+大小+明暗。
大家一定要靈活運(yùn)用，自由組合，以畫面最優(yōu)效果為目標(biāo)去做，不要局限在某一個(gè)框架里。
字體也有字體的性格，不同的字體會(huì)呈現(xiàn)出不同的字體性格特征，比如高矮胖瘦、敏捷、邪惡、可愛、優(yōu)雅文藝等等等等。通過精準(zhǔn)地對(duì)字體的結(jié)構(gòu)，筆畫粗細(xì)，細(xì)節(jié)調(diào)整，字體效果等的處理表現(xiàn)字體的差異化，使字體的性格調(diào)性，與畫面內(nèi)容相匹配。
2.2.1 力量感、沉穩(wěn)
特點(diǎn)：橫細(xì)豎粗/留白少/重心偏下/轉(zhuǎn)折筆直
2.2.2 可愛
特點(diǎn)：圓潤(rùn)/不規(guī)則/擴(kuò)張
2.2.3 優(yōu)雅
弧度/纖細(xì)/重心偏高
2.2.4 活力
特點(diǎn)：傾斜/筆畫延伸/筆畫干脆，轉(zhuǎn)折彎曲很少
字體還有各種各樣的性格，比如魔幻、哥特、血腥、恐怖等等。
我們?cè)谧鲰?xiàng)目的時(shí)候，字體的感覺就一定要抓得準(zhǔn)，符合整個(gè)畫面的調(diào)性：
比如這種歐式哥特的畫風(fēng)， 字體就可以加一下哥特元素，點(diǎn)綴點(diǎn)玫瑰、藤條。
剛硬科技的畫風(fēng)，字體筆畫就可以粗一些，添加點(diǎn)科技感和幾何圖形，營(yíng)造超前科技的感覺：
植物自然的風(fēng)格筆畫就可以柔和一些，帶有弧度，把一些畫面元素圖形化點(diǎn)綴在上面：
2.3.1 字型特點(diǎn)的提取
具體實(shí)操怎么做的呢？我們今天就給大家分享一個(gè)案例，看看是怎么操作的：
這是一張視覺，我們要給他做一個(gè)主標(biāo)題，這個(gè)主標(biāo)題的字型特點(diǎn)應(yīng)該如何從圖里提取呢？
我們要提煉出三個(gè)點(diǎn)出來(lái)才能知道如何去做：
1.風(fēng)格
我們先分析這張圖，它的一個(gè)風(fēng)格是有點(diǎn)魔幻+復(fù)古，神話傳說加西域古代的一種史詩(shī)感。
我們可以找一些神話類史詩(shī)的類似的參考看看：
特征：
1.復(fù)古
2.重心高.
3.不用那么特別復(fù)古可用襯線體變形
2.特征
這個(gè)我們可以從人物身上去提取，人物有盔甲，我們可以把盔甲的特征提取出來(lái)：
3.配色
顏色也不是亂選的，一定要和圖能呼應(yīng)關(guān)聯(lián)起來(lái)，那顏色怎么選呢？其實(shí)畫面里已經(jīng)幫我們選好了配色。我們觀察一下畫面：
整體偏冷調(diào)，墨綠色居多。，對(duì)比色有紅色和黃色。
那我們?yōu)榱送怀鲎煮w，又能和畫面呼應(yīng)，那黃色就是再好不過的選擇了。
那到這我們的設(shè)計(jì)目標(biāo)就比較明確了：
2.3.2 字型設(shè)計(jì)
1.基礎(chǔ)字型：
雖然是往復(fù)古了去做，但也不是真做成甲骨文，還是結(jié)合一下使用場(chǎng)景，和識(shí)別度。參考中也有部分是使用宋體去變形的，所以我們可以先選一個(gè)宋體的字體出來(lái)當(dāng)做基礎(chǔ)字型。
為了保證識(shí)別度，我們可以只做部分復(fù)古。
這里我挑靈下面“火”字，因?yàn)檫@個(gè)字處在中間，比較顯目。
2.調(diào)整重心
參考復(fù)古類型的字體重心都會(huì)往上偏移，讓字體稍顯長(zhǎng)一些。
3.加入特征
（1）鋒銳：默認(rèn)字體上有很多圓潤(rùn)的地方，我們都改成尖銳的感覺。
把每一個(gè)筆畫都改掉：
（2）彎曲的尖角：
圖形提煉：
加入到字體當(dāng)中：
字型到這里就完成啦。
（3）字體轉(zhuǎn)折的厚度：
字型完成了，字體轉(zhuǎn)折的厚度我可以再字體效果上去做。在筆畫中間加一個(gè)層次，以明暗分隔開，以實(shí)現(xiàn)盔甲上這種轉(zhuǎn)折的厚度：
全部加上，看下完成效果：
結(jié)合到畫面中看下：
效果還是很不錯(cuò)的，整體風(fēng)格也比較統(tǒng)一。
這一塊就是關(guān)于字體性格的內(nèi)容，我們繼續(xù)往下看！
接下來(lái)我們來(lái)說下關(guān)于顏色情緒的問題！
配色感覺不對(duì)？顏色臟？配色不高級(jí)？
這些問題一直困擾著我們。應(yīng)該怎么配色呢？其實(shí)顏色也是有規(guī)律可循的，這篇文章就是帶給大家一些顏色方面的啟發(fā)，讓你了解配色的底層邏輯，從而更明確快捷地配出想要的顏色。
認(rèn)識(shí)色彩飽和度的情緒：
因?yàn)椴煌呐渖珪?huì)帶給觀者不同的情緒感受，只有在先了解不同顏色特性的基礎(chǔ)上才能為我們的配色指明方向。我們做出的畫面想要傳遞什么感覺，這種感覺對(duì)應(yīng)什么顏色？
只有搞懂了邏輯，在之后的工作中，才能為我們的配色方案指明方向，而不會(huì)一開始就被難住。
如果我想配一個(gè)積極熱鬧活潑的畫面，顏色怎么配呢？ 如果想配一個(gè)溫柔恬靜小清新的畫面顏色又該如何選擇呢？他們都有什么特點(diǎn)，為什么會(huì)這樣？往下看
3.1.1 積極活力
我們先來(lái)看幾組圖片
用吸管工具提取一下它們的顏色觀察
我們可以看到這類海報(bào)視覺上都能給人一種熱鬧、動(dòng)感、活力的feel。
通過顏色提取，再觀察它們選色的位置，可以發(fā)現(xiàn)它們的的配色的純度和飽和度都非常高。
這是為什么呢？接下來(lái)我們降低飽和度看看會(huì)發(fā)生什么：
可以很明顯的感受到畫面中已經(jīng)失去了那種動(dòng)感、熱鬧和活力的感覺了，整體更趨于平穩(wěn)和安靜。
所以，高飽和度的配色會(huì)帶給觀者活力，動(dòng)感，熱鬧的情緒。常常應(yīng)用于一些電商、運(yùn)動(dòng)品牌的視覺項(xiàng)目中，用來(lái)渲染or打造年輕、活力、熱鬧、動(dòng)感等氛圍。
3.1.2 溫柔平靜
我們?cè)賮?lái)看一組:
這一類圖片就會(huì)給人一種文藝小清新的feel，這類配色和熱鬧、運(yùn)動(dòng)的感覺完全不同。
都是低飽和度高明度的顏色。所以，低飽和度的顏色會(huì)給人傳達(dá)平和、放松、舒適的心情。
3.1.3 輕松休閑
這一類的圖片就給人以中正休閑的感覺。飽和度都趨于中性，不過高，也不會(huì)過低。
其實(shí)原理就是在取色器里，
我們看同一張圖片，給我們的感覺：
高飽和度配色給人感覺沖擊力很強(qiáng)，具有活力，對(duì)比非常強(qiáng)烈。
中飽和度畫面就弱了一級(jí)，視覺沖擊力沒那么強(qiáng)。畫面會(huì)放松一些，適合傳遞休閑的感覺。
使用低飽和度的顏色時(shí)，我們看到畫面更冷靜了，有些高級(jí)灰的感覺。
在以往的實(shí)際工作當(dāng)中，我也是先用飽和度來(lái)定畫面的大情緒基調(diào)，只有大的感覺對(duì)了，后面才不會(huì)出大問題。比如像一些戰(zhàn)斗、pk、熱血類的banner，都用高飽和顏色:
我們可以來(lái)吸取他們的顏色看看：
基本都是靠右邊的顏色。
而像我在做下面這種類型的banner時(shí)，就會(huì)使用到中飽和度的顏色，給人一種輕松休閑的感覺：
我們?cè)倏聪滤麄兊纳颍?
都是趨于中間的位置。
最后一種低飽和的顏色，像下面這種作品，就有一種文藝、清新的感覺：
再來(lái)看看他們的顏色色域
都是比較靠左的顏色。
用飽和度來(lái)定畫面的大基調(diào)，還是非常好用的，可以說是屢試不爽，大家可以好好理解并且用起來(lái)！
總結(jié)：
高純度，高飽和度的顏色，會(huì)讓人感覺激動(dòng)、積極、動(dòng)感、醒目、記憶深刻等特點(diǎn)感官，常常應(yīng)用于一些電商、運(yùn)動(dòng)品牌的視覺項(xiàng)目中，用來(lái)襯托年輕、活力、熱鬧、動(dòng)感等氛圍。
中飽和度的顏色飽和度和純度都適中，顯得中正平和，又不會(huì)有低飽和度那樣的“平緩“，想要視覺年輕一些，但又不想飽和度那么的強(qiáng)烈，可以嘗試選擇中度的顏色。
低飽和度的顏色，會(huì)給人平和，舒適的感受，常常會(huì)結(jié)合大量無(wú)彩色一起使用，讓畫面?zhèn)鬟f出簡(jiǎn)約，自然，小清新文藝的感覺。
配色的方法有很多，搭配在一起千變?nèi)f化，但都離不開一個(gè)點(diǎn)。你想給別人傳遞什么感覺？是要年輕、活躍，還是安靜、唯美？只有明確方向，在想想這個(gè)方向上的顏色有什么規(guī)律可循？搞清楚目的，我們?cè)偃プ雠渖遣皇蔷蜁?huì)輕松很多？
作者：菜心工作室 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司
關(guān)于比較
審美是一個(gè)宏大的話題，無(wú)論是文學(xué)、影視、視覺、時(shí)尚等我們都可以審視它們的 “美”。不同領(lǐng)域的 “美” 有不同的形式，不同的立場(chǎng)，不同的角度，不同的原則。
在這里，我們不談具體某個(gè)領(lǐng)域?qū)徝赖囊?guī)則和方式，我們來(lái)講講提升審美的具體做法。
講一個(gè)例子，在國(guó)內(nèi)，我們普遍覺得女生在對(duì)穿衣打扮的審美上比男生更優(yōu)，對(duì)于其它經(jīng)過設(shè)計(jì)的事物所展現(xiàn)的審美也比男生更好。這種差別在高中時(shí)期便逐漸放大，在大學(xué)中就能明顯得感覺出來(lái)這一點(diǎn)。
這是由于基因天賦論導(dǎo)致的嗎？
是也不是。女生愛美這點(diǎn)是一個(gè)既成的事實(shí)，有比較大的先天因素，而因?yàn)閷?duì)美好事物的追求比男生更強(qiáng)烈，所以在審美上整體大于男性。
但大家要注意，這個(gè)因果關(guān)系的模型太過簡(jiǎn)陋，我們要進(jìn)一步來(lái)分析為什么對(duì)美好事物的追求就能導(dǎo)致審美上的差異，這就是我們提升審美的關(guān)鍵，先從衣品講起。
原因1：
基于對(duì)美的追求，女生往往會(huì)花更多的時(shí)間在穿衣打扮上，也就意味著要購(gòu)物。無(wú)論是在商場(chǎng)還是淘寶，女生逛起來(lái)的熱情與時(shí)長(zhǎng)都遠(yuǎn)遠(yuǎn)大于男生，這造成了女生在查看數(shù)量上也遠(yuǎn)遠(yuǎn)大于男生。
這就和很多設(shè)計(jì)前輩告訴你要 “多看” 的做法是一樣的，通過量變引起質(zhì)變，只要你看的夠多，審美自然就可以提升了。
這話說的頗有道理，但依舊在推理上站不住腳。因?yàn)?，量變?yōu)槭裁匆欢ň湍墚a(chǎn)生質(zhì)變？這個(gè)變化的邏輯依據(jù)是什么？在青銅段位里打了一萬(wàn)盤，也不代表一定能打進(jìn)最強(qiáng)王者不是。
所以，這就是要引入第二個(gè)原因，關(guān)于對(duì)比。
原因2：
女生逛街能逛這么久，往往在除了看以外，還會(huì)做一件事，就是大量的試衣服（此處被我言中的女性同學(xué)可以點(diǎn)個(gè)贊讓我看見你們的雙手），經(jīng)常抱了一整籮筐的衣服進(jìn)試衣間，在里面對(duì)著鏡子鼓搗擺 Pose 大半個(gè)小時(shí)，然后才能挑選一兩件自己喜歡的出來(lái)，或者干脆一件也不要。
嗯，不要問我是怎么知道的……
在這個(gè)過程里，就發(fā)生了提升審美中最重要的一環(huán) —— 對(duì)比。通過大量的對(duì)比，來(lái)找出好看的、高級(jí)的、適合自己的衣服。也因?yàn)閷?duì)比，女生們就通過實(shí)踐來(lái)了解到，什么樣的衣服是好看的，什么樣的是丑的不適合自己的。
這個(gè)過程實(shí)際上收窄了選擇的范圍，比如一個(gè)個(gè)子比較高挑五官比較立體的女生，是很難在比較過后還會(huì)選擇那些可愛、少女、小鳥依人的設(shè)計(jì)。很可能會(huì)偏向運(yùn)動(dòng)、男友、中性等風(fēng)格。
而在有了具體的偏向以后，她們依舊會(huì)深入到這個(gè)范圍，繼續(xù)觀察、嘗試、對(duì)比，然后再次提升對(duì)這些東西的理解和審美。
所以，看吧，審美的提升第一步就是這么簡(jiǎn)單，通過大量的觀察，然后對(duì)比和篩選，就能非常直接的提升我們的審美，這個(gè)提升的過程完全依靠的是人的主觀能動(dòng)性。
日常生活中我們遇到的絕大多數(shù)某些人審美比自己更好的人，都是因?yàn)樗麄冊(cè)谀承┓矫婵催^的，比較的比我們更多，而不是依靠天賦的加持，這個(gè)思路落實(shí)到創(chuàng)作中也一樣。
當(dāng)然，我絲毫不懷疑人類的歷史長(zhǎ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ì)案例看起來(lái)都挺好，覺得挑不出什么毛病啊。
所以，下面我挑了幾個(gè)與設(shè)計(jì)有關(guān)的方向，并找了一些案例出來(lái)，你們來(lái)看看同類型中，哪一張圖是最優(yōu)的。
而沒被選上的那些，對(duì)于你選出來(lái)的圖而言，它們當(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è)卻總是奇丑無(wú)比，丑得刺眼，使路人不禁要看她幾眼，并且拿她和她的同伴作個(gè)比較。要知道，你上了圈套。那個(gè)丑女子要是獨(dú)自走在街上，會(huì)嚇你一跳；那個(gè)相貌平常的，會(huì)被你毫不在意地忽略過去。但當(dāng)她們結(jié)伴而行時(shí)，一個(gè)人的丑就提高了另一個(gè)人的美。”
之前我們講了關(guān)于審美提升的第一步對(duì)比，但是我們留了一個(gè)疑問，為什么依靠對(duì)比我們可以提升，或者只靠對(duì)比我們就一定可以提升審美嘛？審美提升起來(lái)就如此容易？
當(dāng)然不是！
對(duì)比的過程只是表象，我們還要追究深層次的原因，那就是“推理”。
在系統(tǒng)性提升審美的道路上，最大的敵人就是——主觀感受。因?yàn)闊o(wú)論我怎么解釋和審美提升相關(guān)的方法，總有人會(huì)覺得它就是依靠個(gè)人審美，不同人審美不一樣，總能找出有的人就喜歡網(wǎng)紅臉但看不上湯唯或者高圓圓的案例。
沒錯(cuò)，每個(gè)人都有自己的審美，無(wú)論喜歡什么稀奇古怪的東西都可以，存在即合理。但是，設(shè)計(jì)師該擁有的審美是不能這么隨意的，因?yàn)樽鳛閷I(yè)人士，我們的審美就要符合 “專業(yè)” 的要求，即通過客觀標(biāo)準(zhǔn)來(lái)評(píng)價(jià)事物的內(nèi)在價(jià)值。
比如茶、酒、咖啡這類飲品，都已經(jīng)擁有非常成熟的市場(chǎng)，會(huì)根據(jù)產(chǎn)品的價(jià)值形成對(duì)應(yīng)的價(jià)格。而有趣的是，這些飲品都不是甜的，都不符合我們本能的喜好。所以，還有很多人不接受它們，只喜歡帶有甜味的飲料。這種個(gè)人的選擇上，任何人都可以偏愛一杯 1 元不到的雀巢的速溶拿鐵，厭棄紅標(biāo)瑰夏冰滴，但無(wú)論你怎么想，也無(wú)法改變它們價(jià)值不對(duì)等的事實(shí)，瑰夏手沖有遠(yuǎn)遠(yuǎn)超出速溶的口感和品質(zhì)。
但超出的部分在哪里？答不答得上來(lái)，就是內(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ǔ)。
所以，接下來(lái)我們來(lái)探究一下，作品的評(píng)價(jià)為什么重要！
丹尼爾·卡尼曼的暢銷書《思考快與慢》中，將我們的思考方式簡(jiǎn)單的劃分成了兩個(gè)部分，用了非常簡(jiǎn)單粗暴的 “系統(tǒng)1”、“系統(tǒng)2” 命名。簡(jiǎn)單概括它們的含義，就是系統(tǒng) 1 是聯(lián)想式思維，系統(tǒng)2是規(guī)則式思維，也可以看成是直覺與慎思的區(qū)別。
先說系統(tǒng)1，直覺是我們大腦對(duì)日常接受信息簡(jiǎn)化處理的產(chǎn)物，我們的大腦就像處理器一樣，每天都要面對(duì)海量的信息通過視覺、味覺等五感導(dǎo)入，如果它沒有任何區(qū)別的對(duì)這些內(nèi)容進(jìn)行深度、縝密的分析，那么它一定會(huì)超負(fù)荷運(yùn)轉(zhuǎn)并最終自我毀滅。
所以生物的演化，讓我們的大腦進(jìn)化出了一套可以對(duì)信息進(jìn)行過濾和簡(jiǎn)化的系統(tǒng)，格式塔心理學(xué)中關(guān)于視覺對(duì)物體簡(jiǎn)化、完形的理論，也是由其產(chǎn)生，這就是我們對(duì)很多事物下意識(shí)反應(yīng)的來(lái)源。比如在走路的過程中，看見一輛自行車直挺挺的從遠(yuǎn)處像你沖過來(lái)，那么你會(huì)馬上感覺到危險(xiǎn)并往某個(gè)方向規(guī)避，整個(gè)過程會(huì)在不到1秒的時(shí)間內(nèi)完成。
而系統(tǒng)2，就是對(duì)事物進(jìn)行邏輯推導(dǎo)的深入思考，如果用它來(lái)處理危險(xiǎn)的事件，那么結(jié)果可能是我們先判斷這輛自行車行駛的軌跡并得出它前進(jìn)的方向與我站立的位置相交，并且它的時(shí)速約為 40km， 在撞到我的時(shí)間還有3S，如果以這種速度撞在我們身上，大概率會(huì)發(fā)生……
“BONG～”
那就不用想可能會(huì)發(fā)生什么事情，你已經(jīng)被撞飛了，可以直接得到結(jié)果。類似的事情還有很多，無(wú)論是對(duì)與危險(xiǎn)的，還是日常事務(wù)的作用，系統(tǒng)1都發(fā)揮出了極其重要的作用。也因?yàn)樗挠行?，而?dǎo)致我們對(duì)它依賴過度。所以，很多人在對(duì)于美丑的審視上只依靠系統(tǒng) 1 來(lái)完成，而不會(huì)深入去思考各中原由。
系統(tǒng) 1 對(duì)美丑的判斷，是個(gè)人的，但它并沒有 “審” 的過程，專業(yè)的分析也就無(wú)從談起。斯洛曼和費(fèi)恩巴赫所著的 《知識(shí)的錯(cuò)覺》 里提到：
"直覺給予我們一個(gè)簡(jiǎn)化的、粗略的，而且通常足夠好的分析，這讓我們產(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ì)出來(lái)的東西都不知道如何評(píng)價(jià)，又談何進(jìn)步？
在我自己的教學(xué)經(jīng)驗(yàn)中，這個(gè)問題所表現(xiàn)出來(lái)的差異就很有意思。如有一些審美能力較差的學(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é)，按筆者自己長(zhǎng)期的經(jīng)驗(yàn)來(lái)看，如果我們盲目的從藝術(shù)、設(shè)計(jì)、心理多個(gè)學(xué)科的基礎(chǔ)理論開始學(xué)起，那提升的速度太緩慢，需要的周期太長(zhǎng)，而且有非常強(qiáng)烈的挫敗感，如果沒有好老師的引導(dǎo)，還容易鉆牛角尖誤入歧途。
所以，第一部分的對(duì)比，重要性才能體現(xiàn)出來(lái)。我們要通過實(shí)踐作為基礎(chǔ)，來(lái)系統(tǒng)性的提升我們的專業(yè)審美能力，通過應(yīng)用推理的能力，抑制我們無(wú)所不在的直覺。
前面扯了這么一大堆，都是在紙面上的探討，不太接地氣，只分析一通原因，和你該如何提升審美沒太多關(guān)系，這是最氣人的。所以，最后一部分，我們來(lái)講講具體實(shí)施的做法。
先聲明，審美提升是要通過刻意練習(xí)的步驟的，誰(shuí)也不可能只通過區(qū)區(qū)幾篇文章就以為自己已經(jīng)明白了，所以需要執(zhí)行下面這個(gè)循環(huán)步驟：
? 采集：大量觀察和收集作品
? 對(duì)比：留下它們中最好的
? 分析：尋找優(yōu)劣差異的原因
開始前，還要解釋一件事，就是我們提升審美都要先從某個(gè)點(diǎn)開始突破，從你最感興趣的，或是工作關(guān)聯(lián)度最高的設(shè)計(jì)類型開始，而不是無(wú)差別的亂看。與美術(shù)學(xué)相關(guān)的所有設(shè)計(jì)中，底層的原則都是近似的，精通一種，就能更容易理解其它種類的作品。
1.采集
觀察的來(lái)源多種多樣，強(qiáng)烈建議初期只使用花瓣即可，不要分心到太多的平臺(tái)上，選擇太多往往不是好事，會(huì)增加干擾，讓我們疲于奔命，模糊一開始的目標(biāo)。
例如首先要提升在 APP 方面的審美，我們先在花瓣中創(chuàng)建一個(gè) APP 的畫板，然后搜索 APP 相關(guān)的關(guān)鍵字，但不需要關(guān)注第一頁(yè)彈出的采集結(jié)果，直接查看 “畫板” 選項(xiàng)。
畫板是別的用戶自己整理的采集合集，我們可以通過封面簡(jiǎn)單篩選出你喜歡的，然后打開它們，瀏覽里面收集的作品。
然后盡量按自己最高的要求來(lái)找到能讓自己覺得滿意的作品，再將它們 “采集” 到自己創(chuàng)建的畫板中，并設(shè)定一個(gè)數(shù)量，比如采集到500張為止。
2.對(duì)比：
達(dá)到目標(biāo)的數(shù)量就停下來(lái)，因?yàn)樵俨杉氯ツ軒?lái)的作用已經(jīng)非常有限了。雖然采集中已經(jīng)包含了選擇和對(duì)比的過程，但我們要更進(jìn)一步，在自己的選出來(lái)的作品里進(jìn)行比較。相信在完成這個(gè)步驟以后，你們已經(jīng)可以明顯感覺到最后 100 張收集的質(zhì)量是遠(yuǎn)遠(yuǎn)高于前 100 張的。在羅子雄 TEDX 的演講中就說過：你回頭看三個(gè)月前收集的作品，會(huì)發(fā)現(xiàn)它們都是垃圾……
更極端一點(diǎn)，那就是我們只在挑選的作品中留下最好的十分之一，聽起來(lái)是不是很刺激。
也就是我們要開始在自己選出來(lái)的作品中，你要?jiǎng)h掉其中的 450 張作品 （最好有留底），即使當(dāng)中有一些你非常喜歡，而且它們都是你的勞動(dòng)果實(shí)。但就因?yàn)檫@樣，你才會(huì)更慎重的進(jìn)行比較。因?yàn)槎鄶?shù)人的采集只是走馬觀花，后面根本就不會(huì)看這些東西。
當(dāng)然，這個(gè)過程推薦用 Eagle 或者 花瓣 PRO 客戶端，操作起來(lái)會(huì)更順手一點(diǎn)。
3.分析：
在上一步操作里，我們會(huì)動(dòng)用我們腦海里所有關(guān)于理性的分析方法來(lái)解釋它們的優(yōu)劣，并得出結(jié)論，雖然這些想法可能很幼稚或漏洞百出，但不要擔(dān)心，最后一步就是用來(lái)解決這個(gè)問題的。
我們捉對(duì)挑選一些作品出來(lái)，在剩下的作品中和已經(jīng)被你否決掉的作品各選一張，然后將它們排列到一起，對(duì)比它們的優(yōu)缺點(diǎn)，比如下圖是我從我自己畫板中找出的近期和早期的采集作品。
專業(yè)的分析是怎么得出的？當(dāng)然不像朱熹提出的 “格物致知” 一般盯著它們思考，就能把設(shè)計(jì)的理論給格出來(lái)，這條路是走不通的，所以才有王陽(yáng)明 “知行合一” 的教誨。
我們要把對(duì)比的內(nèi)容進(jìn)行細(xì)化，把一套作品看成若干細(xì)節(jié)的合集，明確比較的目標(biāo)，這樣才能得到理想的結(jié)果，比如：
? 字體
? 配色
? 布局
? 配圖
? ……
比如我們挑文字出來(lái)分析，這時(shí)候局勢(shì)已經(jīng)比較明朗了，上側(cè)的設(shè)計(jì)中文字是能被清晰識(shí)別的，在不同的字段類型中字重有對(duì)應(yīng)的調(diào)整，主次有序。而下側(cè)的文字應(yīng)用則缺乏對(duì)比，部分文字甚至和背景都無(wú)法做出區(qū)分，且字重幾乎沒有變化，使用了多種字體沒有整體性，導(dǎo)致最后的閱讀感受極差。
同理，你可以再試試分析其它幾個(gè)細(xì)節(jié)，是不是簡(jiǎn)單多了。如果這時(shí)候你再覺得手足無(wú)措，完全分析不出什么具體的東西怎么辦？
學(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)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：酸梅干超人 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(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.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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.bouu.cn