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