界面設(shè)計是一個很龐大的體系，具有很多原則，比如輕量、容錯、清晰等等，其中包含了交互層面以及視覺層面等，今天我想單獨把視覺剝離出來，來講一講我對界面設(shè)計“視覺層面”的理解與認知。
在我看來，界面設(shè)計的視覺層面主要可以分為三個維度來解析：信息傳遞、視覺美化、創(chuàng)意創(chuàng)新。
信息傳遞是讓用戶看的明白，快速清晰的獲取信息；
視覺美化是讓用戶看的舒服，讓界面足夠美觀；
創(chuàng)新創(chuàng)意是讓用戶看的驚喜，看到一些不一樣的創(chuàng)意點。
如下圖:
三個維度的目標(biāo)如何實現(xiàn)呢？我提取了以下三個關(guān)鍵詞：
清晰、和諧、獨特是我們要達成的目標(biāo)，達成目標(biāo)一定會有一些原理所在，而有了原理就會有具體的執(zhí)行方法，所以后面的每一個知識點，我都會按照“設(shè)計目標(biāo)-執(zhí)行原理-執(zhí)行方法”的邏輯給大家講解，大綱如下：
1 清晰
1.1清晰-降噪-容器整合
1.2清晰-聚焦-局部放大
2 和諧
2.1 和諧-呼應(yīng)-顏色呼應(yīng)
2.2 和諧-節(jié)奏-變化對比
2.3 和諧-飽滿-負形縮減
3 獨特
3.1 獨特-品牌延展-IP形象結(jié)合
3.2 獨特-事物本意-事物圖形化
1.清晰
1.1清晰-降噪-容器整合
設(shè)計目標(biāo)：清晰
執(zhí)行原理：信息降噪
執(zhí)行方法：容器整合
當(dāng)界面信息過于分散時，會對用戶造成不必要的干擾，導(dǎo)致用戶產(chǎn)生疑惑甚至直接離開界面。
作為設(shè)計師，要做的就是對信息進行整合，我們可以稱之為信息減噪，目的就是讓頁面更加清晰，減少干擾。
這里我經(jīng)常使用“容器整合法”來讓內(nèi)容更加清晰、聚焦。
當(dāng)分散的內(nèi)容裝進一個“容器后”，就可以使內(nèi)容聚焦在容器當(dāng)中，讓信息更加規(guī)整。而卡片就是一個很好的“容器”。
實際案例：
在改版騰訊動漫個人中心的時候，頭部就存在信息分散不聚焦的問題，四個視覺觸點（綠色圈處）分散在四個角落，形成極大干擾。
這里我就采用了”卡片容器“的方法，將信息裝進容器中，減少分散信息的干擾，使界面更加清晰、工整，效果如下：
現(xiàn)在很多產(chǎn)品都在使用卡片化的布局，尤其是在信息數(shù)量、層級較多的時候，更加需要有容器將其規(guī)整起來，這樣才會讓界面保持不亂！
1.2 清晰-聚焦-局部放大
設(shè)計目標(biāo)：清晰
執(zhí)行原理：聚焦
執(zhí)行方法：局部放大
我們在平時做需求的時候，經(jīng)常會遇到信息特別多，特別亂的時候，如果此時我們選擇什么都想突出，最后的結(jié)果一定適得其反，什么都突出部不了，這時候就需要我們選擇一些內(nèi)容來進行局部放大，反而可以讓整體信息更加聚焦、清晰。
這種方法經(jīng)常用在有數(shù)字展示的頁面當(dāng)中，比如下面這種頁面：
再比如，下面這個模塊信息，如果”3“沒有放大，整體的信息會亂到你眼花繚亂，我們看下對比：
所以，大家在遇到有數(shù)字，且信息雜亂的時候，就可以采用局部放大的方式來使整體更加聚焦、清晰。
2.和諧
2.1 和諧-呼應(yīng)-顏色呼應(yīng)
設(shè)計目標(biāo)：和諧
執(zhí)行原理：呼應(yīng)
執(zhí)行方法：以顏色呼應(yīng)為例
很多時候我們會覺得自己做的東西很不和諧，其中一個很重要的原因就是因為頁面中沒有貫穿的元素，也就是沒有呼應(yīng)，很常用的一個呼應(yīng)的方法就是顏色呼應(yīng)。
例如這個畫面總看起來不夠和諧，你會覺得綠色很突兀，就是因為顏色上沒有呼應(yīng)：
而一旦你想辦法，讓綠色“事出有因”，比如取自眼鏡的顏色：
那么，突兀的問題解決了，和諧的目標(biāo)也就實現(xiàn)了。
而剛才那個人中心的界面：
我們會發(fā)現(xiàn)，圖標(biāo)的顏色也是取自背景色，所以整體看起來才會如此和諧。
除了顏色呼應(yīng)，還有很多呼應(yīng)的方式，比如圖形、圖標(biāo)風(fēng)格等等，這里就不再舉例了。
2.2 和諧-節(jié)奏感-對比變化
設(shè)計目標(biāo)：和諧
執(zhí)行原理：節(jié)奏感
執(zhí)行方法：對比變化
對于音樂，節(jié)奏感是非常重要的，如果一段音樂一直是一個頻率，那可能也算不上音樂了。
界面也是一樣的，節(jié)奏感是讓頁面變得“和諧”很重要的因素之一，如何做到呢？
我們在展示文字列表的時候，你覺得下面兩種哪個更舒服些呢？
我猜你會覺得第二個舒服一些，因為它有變化，有節(jié)奏感，所以它和諧、舒適。
我們會發(fā)現(xiàn)很多產(chǎn)品首頁帶有封面圖的列表都有很多種排法，例如1帶多，1x2，2x2，2x3等等：
就是為了防止每個模塊過于重復(fù)，如果每個模塊都是每排兩張封面，一直下來：
看起來會非常乏味。
2.3 和諧-飽滿-負形縮減
設(shè)計目標(biāo)：和諧
執(zhí)行原理：飽滿
執(zhí)行方法：負形縮減
在做圖標(biāo)或者字體的時候，經(jīng)常要講一個原則就是“飽滿”，界面上每個“不能拆分的元素”都需要盡量做到飽滿，比如圖標(biāo)，再比如下面這個信息組件：
正文就屬于不能拆分的單一原子，大家可能會問，這種信息不就是方方正正的一個信息塊嗎，怎么會不飽滿呢，比如行間距過大：
再比如，我在優(yōu)化騰訊動漫信息流的時候，發(fā)現(xiàn)正文出現(xiàn)的表情遠遠大于文字，如下圖：
表情一旦出現(xiàn)，就會造成大量空隙（負形過大），導(dǎo)致整體不夠飽滿、和諧。
我們可以看下其他產(chǎn)品，表情和文字幾乎都是一樣的大小，他們都會盡量縮小負形空間（也就是空隙小大）：
在這樣的原則之下，優(yōu)化后的效果如下：
以上是關(guān)于和諧的幾點方法。
3.獨特
如果你的界面做到了清晰、和諧，在視覺層面就已經(jīng)算是及格了，如果還能加上一點小創(chuàng)意，就可以讓人眼前一亮。
如何能夠做到獨特？可以從兩方面出發(fā)，1是品牌，2是內(nèi)容本身含義。
3.1獨特-品牌延展-吉祥物結(jié)合
設(shè)計目標(biāo)：獨特
執(zhí)行原理：品牌延展
執(zhí)行方法：IP形象結(jié)合
從品牌出發(fā)，可以有很多方向，比如logo，圖形，品牌吉祥物等，下面以品牌吉祥物為例：
在做小說閱讀器的時候，有一個設(shè)置選項是選擇文字的背景顏色，選擇控件是圓形，而品牌形象也偏圓形，此時就可以將圓形控件與形象相互結(jié)合:
但是選擇控件有兩種狀態(tài)，為了更加生動，就讓給形象正面面對你的時候作為選擇狀態(tài)，而轉(zhuǎn)過身作為非選擇狀態(tài)，大概效果如下:
此創(chuàng)意已在騰訊動漫小說落地實現(xiàn)。
3.2 獨特-事物本意延展-事物圖形化
設(shè)計目標(biāo)：獨特
執(zhí)行原理：事物本意延展
執(zhí)行方法：事物圖形化
除了品牌，還可以根據(jù)事物本身的意思來延展圖形，比如日間夜間模式的切換按鈕，男女性別的切換按鈕，都可以利用事物本身的含義來延展圖形設(shè)計:
此創(chuàng)意已在騰訊動漫個人中心模塊落地。
再比如，彈幕的展示方式，就可以聯(lián)想到電視機，再把電視機圖形化，如下圖:
這里需要注意下，有時候如果圖形過于普通，可以配合動效來增加獨特性，但一定要注意開發(fā)成本。
作者：黑澤雙熾 來源：站酷
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
在開始講解 B 端的圖標(biāo)設(shè)計前，我們先來復(fù)習(xí)一遍圖標(biāo)設(shè)計的基礎(chǔ)知識。相信不少同學(xué)看過我們之前更新的圖標(biāo)系列干貨，沒看過的可以先收藏起來，等等看完本篇分享后再去閱讀……
史上最全的圖標(biāo)設(shè)計教學(xué).1 —— 圖標(biāo)設(shè)計詳解
史上最全的圖標(biāo)設(shè)計教學(xué).2 —— 工具圖標(biāo)的設(shè)計
史上最全的圖標(biāo)設(shè)計教學(xué).3 —— 其他圖標(biāo)及應(yīng)用
理解圖標(biāo)，首先關(guān)注的是圖標(biāo)本身的類型，在整個 UI 體系中，圖標(biāo)基本就分成3個大類：
工具圖標(biāo)：包含一定產(chǎn)品功能隱喻的簡化抽象圖形，代替文字節(jié)省界面空間，方便用戶理解
裝飾圖標(biāo)：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于節(jié)日活動中
啟動圖標(biāo)：產(chǎn)品的啟動圖標(biāo)，即用來在系統(tǒng)中打開該產(chǎn)品的圖形按鈕，基本以自身 LOGO 為主
在 B 端項目中，應(yīng)用最廣泛的必然是工具圖標(biāo)，而裝飾、啟動圖標(biāo)卻鮮有露面機會。但出現(xiàn)的少，不代表沒有，解釋工具圖標(biāo)前，我們先優(yōu)先講解下裝飾和啟動圖標(biāo)在什么情況下會出現(xiàn)。
其中，SAAS 類服務(wù)就有很多會重點強調(diào)品牌、情感化設(shè)計的案例，例如大家比較熟悉的阿里云和騰訊云。項目中就大量啟用 3D 化的裝飾圖標(biāo)提升界面的質(zhì)感。
啟動圖標(biāo)則會應(yīng)用在一些比較大型的項目里，當(dāng)項目出現(xiàn)了很多下級功能模塊或類似插件的體系時，就會采取使用應(yīng)用圖標(biāo)的方式作為入口。
比如 Figma 也是一個 B 端工具，它的插件列表中就可以看見不同的啟動圖標(biāo)。還有類似 Slack、Invision、Teambition 等產(chǎn)品，一個龐大的產(chǎn)品生態(tài)就必然會衍生出強化不同子產(chǎn)品身份的需求，就自然而然會用到啟動圖標(biāo)了。
最后，就是我們熟知的工具圖標(biāo)了，前兩種圖標(biāo)，在前期畫不好不要緊，畢竟這類規(guī)格的產(chǎn)品會有經(jīng)驗更豐富的設(shè)計或總監(jiān)坐鎮(zhèn)，新手當(dāng)個切圖仔即可……
但是工具圖標(biāo)，重要性就不言而喻了，B 端項目對工具圖標(biāo)的需求非常大，幾乎每個組件中都會包含圖標(biāo)。
雖然今天網(wǎng)上有非常豐富的圖標(biāo)素材庫，但在形式各異的 B 端項目里依舊是供不應(yīng)求的，各種行業(yè)特有的功能、實物、隱喻，只能設(shè)計師自己完成。
B 端設(shè)計師在圖標(biāo)設(shè)計領(lǐng)域的主要工作，就是確定圖標(biāo)樣式、設(shè)計圖標(biāo)、導(dǎo)出切圖。下面的分享我們也會主要圍繞工具圖標(biāo)展開。
工具圖標(biāo)的應(yīng)用主要包含兩個部分，線性圖標(biāo)和面性圖標(biāo)。
這里再提圖標(biāo)風(fēng)格，不是把以前的知識點重新講一遍，而是要強調(diào) B 端圖標(biāo)的特殊性。和 C 端相比，B 端圖標(biāo)的實用屬性更高，并不需要過多凸顯本身的視覺風(fēng)格。
所以，工具圖標(biāo)中，使用大量漸變、插畫、投影的類型都要排除掉，它們對 99.9% 的項目都只會造成體驗的負影響，不要被網(wǎng)上的追波風(fēng)飛機稿給帶偏。
適合 B 端項目的工具圖標(biāo)只要應(yīng)用最基礎(chǔ)的線性和面形風(fēng)格即可，一定要劃分出差異，應(yīng)該只包含圓潤、纖細、尖銳這幾種。
很多人好奇線性和面形圖標(biāo)在 B 端設(shè)計中有什么使用上的差異呢？答案是沒有差異。
線性和面形的使用，純粹看設(shè)計師在當(dāng)前場景判斷哪個合適用哪個，只要保證對應(yīng)圖標(biāo)風(fēng)格統(tǒng)一即可。
不過如果遇到一些比較特殊的情況，比如要表現(xiàn)各類設(shè)備的復(fù)雜圖標(biāo)，那用線性的做法還是相對合適和簡單一點。
對 B 端設(shè)計來講，獨立設(shè)計圖標(biāo)的步驟是必不可少的，應(yīng)該掌握的圖標(biāo)規(guī)范還是必須要懂的。
我們雖然沒有 C 端那么多風(fēng)格和技法的拖累，但想畫好 B 端圖標(biāo)卻多出了其它難點，那就是一個頁面中出現(xiàn)的圖標(biāo)實在是太多了。
這就引發(fā)了我們要講的第一個規(guī)范要點 —— “統(tǒng)一性”，所有同規(guī)格類型圖標(biāo)具有一致性的特征，這些特征包含了：
如果不能保證統(tǒng)一性的基本要求，那么整個頁面看起來就會非常的廉價、業(yè)余。很多新手處理 B 端項目就是應(yīng)用了多套素材庫圖標(biāo)，它們的細節(jié)完全不一樣，統(tǒng)一性當(dāng)然無從談起。
而讓整套圖標(biāo)保持統(tǒng)一性，是相當(dāng)有難度的，其中最難的一點，就是如何讓一套圖標(biāo)的大小均衡。雖然我們要對每套圖標(biāo)確定一個固定的尺寸，但不代表圖標(biāo)實際圖形的長寬數(shù)值是完全一致的。
幾何圖形對視覺有一定的欺騙性，有不同的大小體驗，比如下方案例（魷魚游戲亂入？）：
所以，基于這樣的特性，每個圖標(biāo)本身都包含了兩層屬性，圖標(biāo)的占位尺寸和視覺尺寸。占位尺寸指它在界面中的實際占地大小，是透明白的，排版的時候以這個尺寸作為實際的邊緣來測量。
而視覺尺寸，則是在占位尺寸下圖標(biāo)圖形的實際大小，這個大小是帶給我們實際視覺感受的部分。一套圖標(biāo)的不同圖形必然視覺尺寸是各不相同的，我們用占位尺寸包裹它們來方便我們進行統(tǒng)一的應(yīng)用。
所以，使用成熟的圖標(biāo)素材必然會發(fā)現(xiàn)圖形周邊還會有透明的空白區(qū)域。當(dāng)然，不同的素材，這個留白也是有區(qū)別的，下一個小節(jié)就會解釋。
最后要聲明一點，一套項目中可以包含多個規(guī)格（2-5個）的工具圖標(biāo)，比如導(dǎo)航用的圖標(biāo)比普通工具圖標(biāo)更復(fù)雜一點，設(shè)計師只要保證每種規(guī)格保持的統(tǒng)一性即可。
圖標(biāo)越多，大小的控制越困難，所以專業(yè)的圖標(biāo)庫繪制就必然會應(yīng)用圖標(biāo)的柵格系統(tǒng)進行輔助。
在 Ant 的體系中，一個基于柵格的圖標(biāo)實際包含3層，背景層、格線層、圖形層。
背景層，即圖標(biāo)展位尺寸，需要先確定出這個元素的大小，然后才是里面的繪制區(qū)域。通常，柵格系統(tǒng)會為邊緣預(yù)留 1-4 像素的內(nèi)邊距（出血位），正所謂四周留一線，日后好相見。
格線層，則是使用的柵格線段，也是最重要的部分。格線層通常由 4 個基本圖形構(gòu)成，包含正方形、圓形、水平長方形、垂直長方形。
這四個圖形的長寬大小不一，原因是為了對應(yīng)幾何圖形視覺尺寸不同的特征。把它們并列排列，就可以發(fā)現(xiàn)它們的視覺大小非常接近。
這些格線的作用，就是提前幫我們確定好視覺比例，幫助我們快速繪制相同圖形類型的圖標(biāo)。
但是，不是完美符合這四個圖形要求的圖標(biāo)該怎么辦，總不能格線把所有輪廓都給你實現(xiàn)出來吧？
格線的另一層作用，也就是最重要的作用，其實是一個用來做測量的工具，而不是輪廓依據(jù)。在幾何視覺差中，最基礎(chǔ)的大小原理是占用面積越大的圖形，尺寸感受越大。所以，長寬一致的正方形大于圓形，圓大于三角形。
所以當(dāng)我們繪制的非常規(guī)圖形，和類似格線進行對比時，長寬缺少的一側(cè)，就要由另一側(cè)增加數(shù)值來填補它的面積。
比如下圖 Ant 官方的電腦圖標(biāo)，它的寬是橫向矩形，但是中間區(qū)域面積較小，所以增加了高度進行平衡。
再看一些其它的案例
這一步?jīng)]有固定的參數(shù)使用技巧，設(shè)計師需要將完成的圖標(biāo)置入到其它圖標(biāo)旁邊進行調(diào)試，確保尺寸是合適的。
格線只是一個圖標(biāo)大小設(shè)置的參考工具，一切以最終效果為標(biāo)準(zhǔn)。
理解完圖標(biāo)的基本規(guī)范，就到圖標(biāo)的使用邏輯了，解決一些常見的設(shè)置誤區(qū)。
圖標(biāo)該做多大的，這是目前被問到最多的問題。本來應(yīng)該是非常簡單的一件事，但很多工作多年的設(shè)計師也搞不清楚。
仔細捋了捋，罪魁禍?zhǔn)拙褪?AntDesign 這套規(guī)范中對圖標(biāo)畫布的解釋了。
要重點強調(diào)，Ant 設(shè)計圖標(biāo)的意圖，和一般項目的是完全不同的。Ant 作為一套龐大的開源項目，它的圖標(biāo)核心特征之一就是 —— 適應(yīng)性。
這些圖標(biāo)要被應(yīng)用到各種不同的設(shè)備、顯示器、系統(tǒng)中，圖標(biāo)尺寸會用多大，在幾倍圖環(huán)境顯示全都是不確定的。所以圖標(biāo)一開始按越大的規(guī)格完成，后續(xù)實際應(yīng)用中的縮放、匹配也就越容易，適應(yīng)性越高。
但是，在我們自己的項目中，這種做法是完全沒有必要的，1024 圖標(biāo)的負面影響包含：
在常規(guī)項目里，一套項目是可以包含不同尺寸和規(guī)格的圖標(biāo)的，而不是我們做一套相同風(fēng)格的圖標(biāo)在整個應(yīng)用中無差別使用。
這也意味著，每個圖標(biāo)在產(chǎn)品中的使用場景通常只有一個尺寸，不需要去面臨縮放的情況。即使需要縮放，也只是這套圖標(biāo)中的少數(shù)幾個需要，或者相對特殊的項目。
所以，圖標(biāo)尺寸設(shè)定，就是根據(jù)當(dāng)前位置合適的尺寸來制定。可以使用素材在已經(jīng)設(shè)計好的布局中嘗試多大的數(shù)值合適，然后創(chuàng)建同樣的數(shù)值即可（盡量以4的倍數(shù)為標(biāo)準(zhǔn)）。
我們知道圖標(biāo)的素材非常豐富，不管是 Iconfont、IconPark 還是 Iconsearch 等網(wǎng)站，都提供了海量的素材。但是只要稍微專業(yè)點的項目，往往素材庫都滿足不了，部分規(guī)格的圖標(biāo)還是需要我們自己重新繪制。
所以說圖標(biāo)素材就完全沒用了嗎？當(dāng)然不是。
圖標(biāo)的正確用法是作為一種快速試錯的參照物，它可以幫助我們實現(xiàn)：
在項目的界面設(shè)計階段，我們一向建議優(yōu)先使用外部的素材，尤其是 IconPark 這種比較統(tǒng)一，還可以快速調(diào)節(jié)圖標(biāo)樣式的工具網(wǎng)站。
這個過程即使素材找不到和寓意一致的也沒關(guān)系，用相近的圖標(biāo)替代就可以。等到頁面布局基本完成以后，最后再集中精力對需要繪制的圖標(biāo)重畫一遍（甚至是在開發(fā)階段繪制）。
通過別人的圖標(biāo)來快速匹配尺寸、風(fēng)格、樣式，會幫助我們節(jié)省非常多的時間，也有助于我們設(shè)計出更專業(yè)、美觀的圖標(biāo)。
另外，就是針對項目一些偏小尺寸的通用圖標(biāo)，就可以比較放心的應(yīng)用素材，例如翻頁的左右、更多、下拉、搜索等等。
圖標(biāo)的尺寸、樣式都確定了，最后就是關(guān)于圖標(biāo)的色彩和不同狀態(tài)的制定了。
前面講過，B 端項目對圖標(biāo)的裝飾屬性沒有那么迫切，所以正常情況下，太花哨的圖標(biāo)是要盡量避免的。彩色、漸變色、投影，都不應(yīng)該在這個情況下胡亂使用。
常規(guī)的圖標(biāo)只要使用中性色即可，而需要特別對待的圖標(biāo)，色彩可以從主色或者輔助色中選取。比如需要高亮顯示的打勾或者打岔。
當(dāng)然，如果項目涉及到一些特殊的工具圖標(biāo)，類似工廠、工業(yè)領(lǐng)域表達實體設(shè)備的擬物圖標(biāo)，可以打破這個原則。但是，同樣避免這套擬物圖標(biāo)的每個圖標(biāo)用色不同，盡量只使用 3 種以內(nèi)的顏色完成擬物的填色。
同時色彩的使用還有一個重要的意義就是對圖標(biāo)不同狀態(tài)的呈現(xiàn)，部分圖標(biāo)會承擔(dān)按鈕的功能，包含默認、選中兩個基本狀態(tài)。
普通權(quán)重的圖標(biāo)，未選中狀態(tài)可以在默認色彩基礎(chǔ)上使用透明度來實現(xiàn)。
高權(quán)重的圖標(biāo)，則可以在選中的狀態(tài)替換色彩，或者更改圖標(biāo)的類型，將原本的線性更改成面形并填充色彩制造反差。
完成所有圖標(biāo)的設(shè)計以后，最后一步就是切圖和導(dǎo)出了，這決定你的圖標(biāo)能不能被正確運用到線上項目中。
在一套專業(yè)的 B 端項目中，已經(jīng)設(shè)計好的圖標(biāo)是設(shè)計規(guī)范的 “資產(chǎn)” 內(nèi)容之一。圖標(biāo)的文件不能散落在項目的各個界面里，而是在規(guī)范頁面中有統(tǒng)一的整理和收納。
這種做法的流程是，先在軟件的規(guī)范庫中創(chuàng)建對應(yīng)的圖標(biāo)組件（ Symbol / Compoent ），然后再在具體頁面中應(yīng)用，方便后續(xù)的統(tǒng)一管理和修改。
而在這個過程中，我們也需要對圖標(biāo)有正確的命名方法，來確保團隊調(diào)用、檢索圖標(biāo)的效率。通常，我的圖標(biāo)命名規(guī)范如下：
尺寸 / 類型 / 圖標(biāo)名-狀態(tài)
示例：
48px/導(dǎo)航圖標(biāo)/表盤頁-默認
24px/一般圖標(biāo)/搜索-默認
“/” 號的引用主要是方便軟件中對組件層級進行劃分，而我調(diào)用圖標(biāo)的規(guī)則勢必是先從尺寸開始，再選擇對應(yīng)規(guī)格，最后類型和狀態(tài)。
提前命名也是方便后續(xù)我們切圖和導(dǎo)出，但要提及一點，圖標(biāo)的命名不要追求英文化，因為我們的詞匯量不可能實現(xiàn)正式的英文命名規(guī)則，只會寫一堆大家都看不懂的單詞。
而開發(fā)在使用我們的圖標(biāo)切圖時，也不會用我們之前取的命名，會根據(jù)自己的命名習(xí)慣重新命一遍，寫個讓他能看懂的名字遠比用亂七八糟的英文強。
接下來，就要解釋切圖的規(guī)則了。很多沒有經(jīng)驗的設(shè)計師切圖就只是隨手加個切片，然后上傳藍湖發(fā)給開發(fā)自生自滅了，這是一個非常不合理的操作。
再或者，強行使用 Fonticon 格式，而不管實際情況如何，造成最后實現(xiàn)效果完全不同步或?qū)崿F(xiàn)不了。
切圖是通過前端調(diào)用并在瀏覽器中進行顯示的圖形，而要被瀏覽器正常顯示，就有必要了解適合使用的切圖格式。
圖片的格式包含位圖和矢量兩種，位圖是通過記錄像素色值的圖形格式，假設(shè)一張圖是 100*100 像素，那么記錄 1W 個像素點的色彩，所以無法支持無損縮放。而矢量則是通過記錄點線面的坐標(biāo)繪制出顯示圖形的格式，可以支持自由縮放。
理論上，矢量格式是最佳的圖標(biāo)切圖格式，但是它的限制同樣有很多，例如：
前面說過，普通項目中同一圖標(biāo)是很少出現(xiàn)一會兒大一會兒小的需求，所以矢量最大的特征無損縮放，往往就不需要我們?nèi)タ紤]。矢量格式切圖的主要出發(fā)點是用來應(yīng)對移動端顯示器 1x、2x、3x、4x 等不同倍率縮放的問題，而不是網(wǎng)頁端的基本使用。
當(dāng)一套項目中出現(xiàn)了矢量格式無法覆蓋的圖標(biāo)時，那么即用矢量切圖，又用位圖，就會顯得非常的混亂。只有類似 LOGO 等圖形元素，才需要考慮 SVG 格式，而不是一看到圖標(biāo)就上。
所以，最適合切圖的格式就是位圖的 PNG 格式，一方面它是無損的，另一方面它支持透明背景，在切圖應(yīng)用上可以完美和設(shè)計稿結(jié)合，而這是其它大多數(shù)位圖格式不具備的特征。
當(dāng)每次項目完成以后，并不需要通過藍湖來實現(xiàn)切圖的導(dǎo)出，如果切圖文件分散在各個項目頁面里，那么一定會有很多圖標(biāo)被遺漏，尤其是圖標(biāo)的不同狀態(tài)切圖。
所以，最理想的切圖形式，就是將所有圖標(biāo)完成整理和命名以后，一起框選，然后導(dǎo)出成 PNG 格式，再同步給程序員即可。
作者：酸梅干超人 來源：站酷
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
表格已經(jīng)是現(xiàn)代電子計算機系統(tǒng)中重要的組成部分之一，從小學(xué)開始，我們就已經(jīng)在電腦課上學(xué)習(xí)如何使用 Office Excel 來制作電子表格。
那么我們?yōu)槭裁葱枰褂帽砀衲?？因為我們有記錄和查詢?shù)據(jù)的需求。
在任何商業(yè)活動中，都會產(chǎn)生大量的數(shù)據(jù)信息，雖然我們發(fā)明了 SQL、Mysql 等數(shù)據(jù)庫語言記錄數(shù)據(jù)，但最原始的數(shù)據(jù)記錄是沒有可讀性的。
所以，為了讓數(shù)據(jù)可以更好的展示，我們就必須借助可視性更強的圖形工具，即電子表格。通過 X、Y 軸構(gòu)建的網(wǎng)格系統(tǒng)，將數(shù)據(jù)有序、清晰得羅列出來。
表格的重要性就體現(xiàn)在企業(yè)日常工作中對這些數(shù)據(jù)進行管理的需求和頻次上。
例如為電商 APP 開發(fā)了一套管理系統(tǒng)，那么電商運營每天的工作，都要繞著其中銷售、物流、流水等重要模塊的數(shù)據(jù)打轉(zhuǎn)，也就是圍繞著表格展開工作。
對于多數(shù)管理系統(tǒng)而言，數(shù)據(jù)查詢、管理都是非常重要且高頻使用的功能，所以常規(guī)項目中會包含大量的表格頁面。
甚至，有的中小型項目的所有導(dǎo)航一級頁面，只有表格，而不存在其它頁面形式。所以，表格的優(yōu)劣對用戶工作效率和平臺體驗可以產(chǎn)生決定性的影響。
而優(yōu)秀的 B 端項目表格又不能只像 Excel 一樣可以使用固定的模版，不同項目、頁面、模塊對表格的可視需求天差地別，需要根據(jù)具體情況具體分析。
所以，這也是 B 端設(shè)計師的價值之一。一個優(yōu)秀的 B 端設(shè)計師勢必投入大量精力來提升對表格的認識和表格設(shè)計能力。
表格雖然細節(jié)設(shè)計上千差萬別，但在表現(xiàn)形式和閱讀順序上卻是基本一致的。
常規(guī)的表格必然包含表頭欄、列表、翻頁器三個部分，根據(jù)需求的不同，可能還會增加搜索欄、多選欄、操作欄等常見模塊。
主要是用來進行簡單的數(shù)據(jù)搜索和篩選的，當(dāng)搜索項較少的時候，就可以將搜索結(jié)合到表格組件內(nèi)。而搜索項較多時，則會把它們獨立成一個篩選模塊到表格組件的上方。
每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數(shù)據(jù)類型數(shù)量。
通常，表頭的設(shè)計會和下方列表設(shè)計有一定的區(qū)分，表頭文字有一定的標(biāo)題屬性，所以會通過背景色、分割線、文字加粗來增強對比。
列表則是縱向排列數(shù)據(jù)對象的模塊。每個數(shù)據(jù)對象占一行，行的高度根據(jù)內(nèi)容來制定。橫向列表高度和縱向表頭寬度重疊的區(qū)域稱為單元格，每個單元格展示表頭對應(yīng)的數(shù)據(jù)明細。
常規(guī) B 端項目表格都會限制列表一次展示的行數(shù)，極少使用無限滾動加載的模式。因為當(dāng)數(shù)據(jù)包含成千上萬條時會對本地、服務(wù)器性能和交互方式帶來一系列的負面影響。
如果數(shù)據(jù)對象支持多選和批量操作，則我們會在第一列中添加選框，并將選中后的可操作選項放進操作欄中。
翻頁器是切換列表頁面的控件。通常大數(shù)據(jù)量的列表包含上千頁，所以翻頁器只會顯示開頭幾頁和最后一頁，省略中間的，并增加適合快速跳轉(zhuǎn)的功能。
除了表頭和列表內(nèi)容外，其它模塊內(nèi)容都根據(jù)實際需求應(yīng)用。任何表格設(shè)計的第一步都是制定大框架，即包含的模塊和對應(yīng)分布位置，再展開后續(xù)的細節(jié)設(shè)計。
B 端項目支持響應(yīng)式是今天行業(yè)的普遍需求，也就是頁面內(nèi)容隨著瀏覽器視圖寬度變更而變更。
不同頁面類型的響應(yīng)式邏輯各不相同，而表格是其中邏輯最復(fù)雜，也最難理解的一種。
表格響應(yīng)式規(guī)則通常在確定好框架以后制定，優(yōu)于視覺、交互設(shè)計，因為它對視覺和交互產(chǎn)生的影響非常大，是前置條件而不是通過設(shè)計稿逆推出來的。
表格的響應(yīng)式規(guī)則比較細碎，我根據(jù)下面的順序展開解釋：
- 表格的總寬響應(yīng)
- 表格的最小寬度
- 單元格的響應(yīng)邏輯
- 內(nèi)容的響應(yīng)邏輯
表格的響應(yīng)主要是寬度上的響應(yīng)，整個表格的寬度區(qū)域隨父集元素的放大而放大。比如父級元素左右內(nèi)邊距為 20px，則表格整體寬度保持和父級 20px 的左右間距。
上方邏輯中表格可以無限延長，但它卻不能無限的縮短，因為你不可能做一個只有 10px，20px 寬的表格。
過窄的表格不僅支持不了內(nèi)容的正常顯示，也毫無任何使用體驗，所以我們要為表格確定一個最小的寬度。即瀏覽器視圖即使比這個寬度更小，表格也不會再縮小了。
最小的寬度可以結(jié)合前端柵格系統(tǒng)使用的 Breakpoint 規(guī)則來制定，如 Ant deisgn 中 SM：576px，或 MD：768px。
如果不了解柵格的段落規(guī)則，也可以 “憑感覺” 定，最小表格寬度通常在 560-640px，當(dāng)然，不管怎么定一定要提前和前端溝通，確定尺寸方案。
當(dāng)表格內(nèi)容少的時候，最小寬度只是相對較大寬度窄了一點而已。而當(dāng)表格內(nèi)容過多，最小寬度無論如何也不夠放的情況，那么就會使用橫向滾動的交互形式來隱藏超出內(nèi)容。
單元格響應(yīng)這是整個表格最復(fù)雜的一環(huán)，橫向內(nèi)容會超出最小寬度的情況，就是由單元格規(guī)則決定的。
首先，單元格本身也有最小寬度，原因和前面一樣，1px、10px 寬的單元格沒有存在的意義。所以可以根據(jù)需要，制定多個等級的最小單元格寬度，應(yīng)用在不同的數(shù)據(jù)類型中。
假設(shè)表格中包含了 20 個表頭，分別使用了 10 個最小 24px 和 10 個最小 80 px 的，那么單元格的總寬最小就是 240+800 = 1040px。
所以當(dāng)父級整個表格視圖小于 1040px 的時候，內(nèi)容就會不夠顯示從而觸發(fā)左右滾動的條件。
當(dāng)上級表格寬度大于單元格最小總和時，那么單元格也就會隨之變寬。最簡單的響應(yīng)邏輯，就是為單元格寬設(shè)置百分比。比如 5 個單元格分別是父級寬度的 10%、10%、10%、20%、30%、20% ，那么在父級 1000px 的時候它們分別是 100px、100px、100px、200px、300px、200px。
只要確保百分比的總和是 100%，不管你單元格是比例均分（5個單元格等分各20%寬），還是獨立制定（上面案例），單元格寬都是等比縮放的狀態(tài)。
雖然好理解，但這種初級的做法帶來的問題也很多，那就是部分單元格沒有被 ”放大“ 的需求。比如常出現(xiàn)在第一列的多選框，或者部分標(biāo)簽單元格、固定操作按鈕單元格。
于是，為了預(yù)留給有需要的單元格更多的空間，提升體驗，就會對這些單元格實施定寬的方式，剩下的單元格繼續(xù)使用等比，只是計算的方法要減去定寬元素。
比如還是一個占比 20% 的單元格，在包含 2 個 48px 定寬單元格的 1000px 表格中，實際寬為：
（1000px - 2*48） * 20% = 180px
作為單元格的子級，內(nèi)容也可以獨立定義響應(yīng)的規(guī)則。主要包含 3 種情況：
- 無響應(yīng)
- 隱藏多余
- 換行顯示
無響應(yīng)就是顯示的內(nèi)容是固定的，比如多選框、縮略圖、單按鈕等單元格內(nèi)容，它們沒有大小變動的必要。
隱藏多余，則是主要應(yīng)用在文本內(nèi)容上，當(dāng)單元格寬度小于當(dāng)前文本所需寬度時，就會把多余的文字進行省略，這種做法適合應(yīng)用在一些原本就不是太重要的信息上。
比如原本是 ”上海徐家匯南丹路天主教堂一樓“ 變成 ”上海徐家匯南丹路天…“，之后再通過鼠標(biāo)懸浮彈出文字氣泡框的方式顯示所有文本。
而換行顯示，則是文本或多標(biāo)簽狀態(tài)下，一行不夠顯示就換行的做法。除非一開始單行行高預(yù)留了多行顯示的高度，否則多行內(nèi)容就會撐高單元格。
以上就是表格在響應(yīng)式模式下相關(guān)知識點。
隨著經(jīng)驗的積累，實戰(zhàn)經(jīng)驗豐富的 B 端設(shè)計師，就會在前期的規(guī)范環(huán)節(jié)制定出完整的表格響應(yīng)邏輯，應(yīng)用到前端框架開發(fā)和后續(xù)的設(shè)計，而不是做到哪定到哪。
表格首先是一個展示信息的組件，而單純依靠布局和排版技巧，并不能解決所有的信息展示問題。所以，針對網(wǎng)頁表格的局限性，我們要添加一些交互的細節(jié)來提升使用體驗。
例如，單頁表格數(shù)據(jù)量較大，有好幾屏高，往下滾動后看不見表頭，不能很好的識別單元格內(nèi)容。
或者，表頭屬性數(shù)量較多，需要左右滾動，但是每行數(shù)據(jù)要不然操作欄目看不見，要不然對應(yīng) ID 被滑走了等等。
所以，表格的框架就可以做懸浮固定的模式，將需要被持續(xù)露出的欄目懸浮固定。
當(dāng)然，除了單獨欄目的懸浮，也可以使用混合模式，比如表頭吸頂?shù)耐瑫r固定右側(cè)的操作欄。盡量將固定元素控制在 3 個以內(nèi)，以免懸浮要素太多影響內(nèi)容的瀏覽。
還要注意，除了筆記本觸摸板和少數(shù)鼠標(biāo)，一般用戶是沒有頁面左右滾動滾輪的，所以當(dāng)表格出現(xiàn)左右滾動情況以后，就一定要默認展示進度條，方便用戶操作。
第二步，就是和表頭相關(guān)的操作了。我們都知道常規(guī)表格頁面中，表格上方還會有個篩選區(qū)域，專門用來進行篩選相關(guān)的條件制定。
但是，部分項目需求中，會將篩選的功能整合到表頭欄目內(nèi)，而很多新手甚至不能有效的區(qū)分篩選和排序的差異。
我們先對這兩者做一個明確的定義：
篩選 Filter：對要顯示的內(nèi)容設(shè)置篩選條件，不符合條件的將會被過濾隱藏
排序 Sort：對已有內(nèi)容的顯示順序進行條件設(shè)置，不會有內(nèi)容被過濾或隱藏
這看起來好像很容易理解，但會搞混的地方就在排序的應(yīng)用上。我們常規(guī)以為的排序，就像電腦文件夾列表一樣，通過點擊表頭來決定內(nèi)容通過哪個屬性來進行升序或者降序。
在這種 “樸素” 的設(shè)定中，篩選是以單個表頭屬性為標(biāo)準(zhǔn)的，有唯一性。比如在學(xué)生數(shù)據(jù)表格中，可以以 ID、姓名、年級、年齡或成績單個屬性進行列表排序，選中其中一個屬性其它屬性的排序就被取消了。
但是復(fù)雜的排序并不是 “唯一屬性” 的，而是多個屬性的并集，以及具備優(yōu)先級和排序模式。還用學(xué)生數(shù)據(jù)表格舉例：
優(yōu)先根據(jù)年齡降序排列，同年齡下根據(jù)班級升序排列，同班級再根據(jù)成績降序排列。
這里面疊加了三個屬性，年齡優(yōu)先級最好，然后班級次要，成績最后，我們用圖表的展示可以實現(xiàn)出下面這樣的形式：
再進一步，這是我們條件已經(jīng)確定才做出來的組件，要是要制定的屬性不確定，要制定的屬性數(shù)量也不確定，順序不確定，排序模式也不確定……
這種情況就肯定要應(yīng)用排序自定義條件的邏輯了，而表頭自定義一加，那邏輯就立馬復(fù)雜了，它的操作面板可能就長下圖這樣。
排序復(fù)雜了，并不代表篩選就不要了。部分項目的篩選除了在表格外的獨立篩選區(qū)域，還可能應(yīng)用表頭篩選模式。即以單個表頭緯度設(shè)置篩選條件，比如點擊 “年份” 表頭，設(shè)置起始和結(jié)束時間。
所以，只包含篩選的情況下，表頭的圖標(biāo)就不是排序而是漏斗，點擊后就要展開篩選設(shè)置面板進行操作。
而當(dāng)多表頭篩選和多表頭排序需求并存的時候，怎么解決？
這里只建議在表頭中留存篩選選項，因為篩選可以實現(xiàn)并集關(guān)系，即前后任何表頭添加篩選項都可以組成完整的篩選條件。但是，這種交互難以完成篩選優(yōu)先級排序。
所以，我們要將排序獨立成一個按鈕到表頭之外的地方，而不是強行讓兩者并存。尤其是不要設(shè)計出有的表頭是排序，有的表頭是篩選，甚至表頭的按鈕展開面板里又會有篩選又有排序……
表頭是針對列的操作，而針對行的操作，就是對單行列表的選擇、展開和進入了。
前面我們有說過，表格第一列往往放多選框，通過點擊選擇當(dāng)前列表行。它本身的交互并沒有太多需要注意的，只要針對行的交互如果不止選擇應(yīng)該如何平衡。
部分復(fù)雜項目喜歡在表格中添加 “套娃” 的需求。即單行數(shù)據(jù)可以向下展開二級數(shù)據(jù)，或者更進一步到三級、四級。
同時，每個數(shù)據(jù)行往往還關(guān)聯(lián)詳情頁面，需要點擊展開后查看更細節(jié)的信息。
所以當(dāng)多種操作需求混合出現(xiàn)的時候，我們就要具體分析這些需求的優(yōu)先級了。到底是多選操作頻率最高，還是查看下級行，打開詳情頁。
這是為讓點擊整個數(shù)據(jù)行這個最便捷的交互可以關(guān)聯(lián)到最高頻的操作上。而其它低頻操作的交互則只限定在對應(yīng)的按鈕或圖標(biāo)上即可。
因為多選需求往往需要我們在一系列數(shù)據(jù)中選擇很多條數(shù)據(jù)，一個小小的復(fù)選框不僅選擇起來麻煩，且通過查看右側(cè)的內(nèi)容篩選數(shù)據(jù)行，再用右手握鼠標(biāo)按需點擊最左側(cè)的多選框，是非常別扭的體驗。
還有一個需要注意的細節(jié)，就是當(dāng)多選和展開下級列表共同出現(xiàn)的時候，選框和展開圖標(biāo)的排列。
通常一個數(shù)據(jù)行第一列的內(nèi)容，應(yīng)該是整行邏輯層級最高的元素。如果子數(shù)據(jù)行是被獨立出來需要單選，那么展開圖標(biāo)就要放到選擇前面。如果選擇數(shù)據(jù)包含了該行和所有子行，那么選擇就應(yīng)該在展開圖標(biāo)前面。
當(dāng)然，如果展開數(shù)據(jù)和父集就完全不是一種類型，用另一套屬性，那么它也就沒有被同時選中的需求和可能，不需要為它添加選擇框。所以，這種情況下多選框也應(yīng)該放在第一位。
最后，就是解決單元格的交互了。常見的單元格交互可以總結(jié)成下面這幾類：
- 點擊打開頁面
- 點擊復(fù)制內(nèi)容
- 點擊修改內(nèi)容
- 懸浮提示說明
點擊打開頁面很好理解，比如單元格內(nèi)的數(shù)據(jù)是鏈接、圖片、按鈕然后實現(xiàn)跳轉(zhuǎn)或彈窗。
而復(fù)制內(nèi)容，則有一些需要注意的細節(jié)。表格中有一些數(shù)據(jù)是沒有實際閱讀意義的，它的存在就是用來做特定的校對或者是復(fù)制出去，比如 ID 號、哈希值、訂單號等。
常規(guī)的做法是直接在右側(cè)添加一個復(fù)制圖標(biāo)，但對于一些偏復(fù)雜的表格來說，所有可復(fù)制的單元格都加復(fù)制圖標(biāo)是非常影響瀏覽體驗的。
所以，我的建議是都是默認隱藏復(fù)制圖標(biāo)，只有當(dāng)鼠標(biāo)移動到對應(yīng)單元格的時候會顯示。同時，這個圖標(biāo)可以覆蓋到數(shù)據(jù)上層，因為既然鼠標(biāo)移動過來為了復(fù)制，那么數(shù)據(jù)被遮擋在這階段自然無關(guān)緊要，為整體頁面預(yù)留空間
這樣的操作按鈕隱藏浮現(xiàn)方式，也適用于單元格修改的操作。但是，和復(fù)制不同，單元格信息編輯通常是編輯文本信息，還有后續(xù)的操作步驟。
如果點擊進行文本編輯，那么建議在該表格打開一個新的輸入浮窗，且浮窗內(nèi)輸入框文本和原來文本位置持平實現(xiàn)順暢的步驟轉(zhuǎn)換。
同時建議，為了防止誤操作，盡量增加確定、取消按鈕，防止誤操作覆蓋原有數(shù)據(jù)且無法撤銷。
最后就是單元格的懸浮提示了。B 端控件中的氣泡框就是用來做提示的控件，但它只是手段。為什么需要懸浮提示，提示什么內(nèi)容是我們需要考慮的。
對于及其復(fù)雜的表格來說，往往是沒辦法支持所有數(shù)據(jù)都完整展示的，我們會在使用省略號對它進行截斷。但截斷不意味著用戶完全不需要在表格查看到完整的信息。
所以，就可以通過氣泡的做法，將信息呈現(xiàn)給用戶。而呈現(xiàn)過程中，盡量確保鼠標(biāo)可以移動到氣泡上復(fù)制里面的文字內(nèi)容（和全部復(fù)制不一樣），而不是鼠標(biāo)移走就直接關(guān)閉消失。
熟練運營這幾個交互方式，并統(tǒng)一對應(yīng)的使用規(guī)則，就能確保整個項目的表格單元格操作預(yù)期的一致，不需要逐一進行嘗試和鑒別。
作者：酸梅干超人 來源：站酷
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
這些年里，這款工具進行了快速的迭代和更新，響應(yīng)設(shè)計師們的需求，不斷完善功能，成為設(shè)計行業(yè)推薦率（NPS）最高的軟件之一。
尤其是作為一款優(yōu)秀的買斷制軟件，不僅定價合理，甚至 5 年來 ￥199 的售價分文未漲。
而我同期開始用的 Ulysses（用它寫了兩本書，寫過的公眾號內(nèi)容超100W字）、MindNode、Notability 等，全都在這期間從買斷制改成訂閱制，甚至訂閱價格還逐年上漲？？
我從來不吝嗇于贊美優(yōu)秀的軟件工具，尤其是保持初心以純粹的產(chǎn)品功能來服務(wù)用戶的那種更甚。五年前我作為最早就推薦它的人之一，五年后我不介意再夸它一次。
它就是 —— Eagle。
Eagle官網(wǎng)：https://cn.eagle.cool/
前面說過，Eagle 是一個設(shè)計資源管理器，它可以做的事情非常多，但我不是要在這里寫功能介紹的，而是來分享一下，我都用它做了什么。
圖片采集是我使用 Eagle 的核心目的，他包含豐富的采集形式完美覆蓋我的實際使用需要。
第一類采集形式就是通過瀏覽器插件或截圖工具，將網(wǎng)頁中看見的圖片下載到本地。
第二類采集形式，則是通過粘貼花瓣或 Pinterest 的畫板地址，批量采集該畫板的所有圖片。這是我最喜歡的功能，沒有之一。
花瓣和 Pinterest 這類網(wǎng)站，真正的精華是優(yōu)質(zhì)用戶自己收錄的圖庫，而不是直接搜索出來的結(jié)果。批量采集，就是讓我在找到優(yōu)質(zhì)圖庫后，用最簡單的方式下載這些被精挑細選出來的圖集。
因為批量下載很方便，我可以很快的針對同一類目收集出成千上萬的內(nèi)容。但同一個類目下載那么多圖片或素材有意義嗎？
數(shù)量從來不是我追求的目標(biāo)，我會將任何類目的內(nèi)容數(shù)量進行精簡，只保留其中最精華的一小部分，即使它們是由一批最優(yōu)秀的設(shè)計師收藏的圖庫，我也只取精華中的精華。
但是，光靠一張張圖看過去打星再篩選，會把我累死。于是，我就會利用 Eagle 的篩選與排序功能，快速剔除劣質(zhì)內(nèi)容，縮小選擇范圍。
比如之前我分享過的 UI 配圖的素材，包含十幾個顏色的分類和上千張精選圖片。原始圖片超過五萬張，是我從上百個攝影畫板里批量采集下來的。
應(yīng)用到大小、尺寸排序，色彩篩選，星級篩選等多種手段配合，幫助我快速篩選出各自質(zhì)量最好的 100 張圖片。而這前后大概只用了兩小時的時間。
通過前面兩個功能，我收集和篩選了海量的靈感元素。但這么多元素我們不可能無序放置，需要根據(jù)一定的規(guī)律進行編組和管理。所以這里就要分享 Eagle 的資源管理功能了。
Eagle 的資源管理包含三個方向：
1. 普通文件夾：類似電腦文件夾的邏輯，可以進行排序和上下級設(shè)置，收納
2. 智能文件夾：通過一定條件設(shè)置，篩選出對應(yīng)圖片和素材的動態(tài)文件夾
3. 分類標(biāo)簽：即可以作為分類來使用的標(biāo)簽系統(tǒng)，可以為一張圖片或素材打上多個分類標(biāo)簽
我的資源管理方法論一直崇尚的是極簡主義，能用普通文件夾管理的情況我就一定不用智能和標(biāo)簽。不是說這些功能不好，而是因為它們需要對素材進行二次的處理和維護，只有在必要條件下才會使用。
我的素材資源管理是首先構(gòu)思我會用到的幾個大類，每個大類下會包含幾個二級分類，即 Eagle 中的1級文件夾，然后再創(chuàng)建對應(yīng)的文件夾并命名和添加色彩，比如下面示例。
不要奢望一開始規(guī)劃分類能做到盡善盡美，只要大的方向上確定了，然后再根據(jù)日常收集的需要慢慢去添加下級文件夾，而這一級就沒有那么嚴(yán)格的限定，用到哪加到哪。
只有在一些非常特殊類目下，我才會去為圖片和素材增加標(biāo)簽，而不是為了打標(biāo)簽而打標(biāo)簽。比如我收集的學(xué)員作業(yè)也存在 Eagle 中，會包含課程期數(shù)、作業(yè)類型兩個維度，我就需要用標(biāo)簽進行管理，方便我后續(xù)進行跨文件夾的查看與篩選。
除了基礎(chǔ)的靈感圖片外，我還往里面存了很多其它文件素材，包括但不限于下面這些種類。
Eagle 能作為一個設(shè)計資源管理工具，并不是因為可以添加文件夾和標(biāo)簽，再實現(xiàn)一遍 MacOS 的資源管理功能。而是因為它支持多種文件格式的快速預(yù)覽。
它比 Mac 自身的快速預(yù)覽更高效（后面會解釋），同時作為雙系統(tǒng)用戶，我得以在 Windows 系統(tǒng)下如下圖快速查看素材預(yù)覽，而不是安裝格式支持零碎的插件（或流氓軟件）來實現(xiàn)。
尤其是 Sketch、XD、Mindnode 文件，有了縮略圖，就不用通過打開源文件來查看內(nèi)容。并且字體文件支持在目錄中直接啟用和停用，可以非常方便的實時管理本地字庫，保證我在設(shè)計軟件中只會出現(xiàn)必要的字體，而不會全部顯示出來。
Eagle 還有個特別的功能 —— 網(wǎng)址記錄，這也是我最常用的功能之一。
早前有先用 Pocket 然后轉(zhuǎn)移 InstaPaper 和 Cubox 來收錄網(wǎng)上看到的優(yōu)質(zhì)設(shè)計文章，方便我需要引用原文和整理思緒的時候回看。
雖然最后采用的 Cubox 也是一個優(yōu)秀的稍后閱讀工具，但長期使用下來我還是想盡量打開少的軟件來完成我的工作。所以，自然而然的，我還是把網(wǎng)址全部遷移回 Eagle 中。
只要安裝 Eagle 瀏覽器插件，我就可以快速收集網(wǎng)址到 Eagle 目錄中，之后隨時進行查看。
可能有的同學(xué)喜歡用網(wǎng)頁整頁截圖來收集文章，只是我不太喜歡用圖片格式查看文本，所以這個根據(jù)個人喜好即可。
同時，我不止拿 Eagle 管理靈感和素材，也直接拿來做項目管理。
在 Eagle 庫文件進行團隊同步以后，針對每個項目創(chuàng)建獨立的項目文件夾，用來收錄相關(guān)的文檔、靈感圖、情緒版、配圖和設(shè)計文件。
尤其是項目前期收集靈感圖和情緒板的階段，多人共同收集和編輯的結(jié)果可以最方便的查看和進行評價，非常好的優(yōu)化我們的協(xié)作流程和效率。
作為一個設(shè)計講師，要觀察學(xué)生的作業(yè)和進行點評。自然而然，我也會優(yōu)先將所有作業(yè)添加到 Eagle 中去。
通過對每份作業(yè)前期的打分，標(biāo)注，來進行后面點評課程的分享和講解。
同時，這些收集的作業(yè)，需要在后續(xù)其它場景中作為正、反面的案例。所以對作業(yè)的評級和標(biāo)簽就變得必要起來，在相關(guān)場景下通過創(chuàng)建智能文件夾快速篩選出范圍內(nèi)的圖例。
以上就是我使用 Eagle 最重要的 7 個場景，雖然實際應(yīng)用還遠遠不止它們，但因為篇幅關(guān)系就先介紹到這里。
Eagle 作為一款被我長期使用和推薦的工具，不僅僅是因為上面的使用場景，它們是結(jié)果。所以，我要從更底層的角度，來解釋它的不同之處和特點。
從上線以來，Eagle 有一個飽受誤解和詬病的底層設(shè)計，就是它的 “素材包” 文件 .eaglepack 。用戶需要先創(chuàng)建一個 “庫“，之后添加的所有素材、文件，都會被保存到這個庫文件中去。
換句話說，相當(dāng)于 Eagle 在你的電腦中創(chuàng)建了一個特殊的文件夾，用來保存你置入的文件。即使你添加的素材是已經(jīng)下載到本地，它也會再 “復(fù)制” 一份到這個庫中。
很多設(shè)計師對這個邏輯感到很費解，為什么本地存的好好的，Eagle 要再復(fù)制一份，完全就是浪費系統(tǒng)資源和時間的做法。如果無法理解這個邏輯，就是不具備 ”產(chǎn)品思維“ 的特征之一。
我們先從和多人舉例的 Bridge 和 Lightroom Classic 講起。
它們的運作機制，是通過運行該軟件，來讀取你的硬盤目錄和對應(yīng)文件。使用它們并不會額外復(fù)制文件出來，即使你在軟件中置入素材，它們也只是幫助你正常保存到硬盤的對應(yīng)位置。
為什么這類工具會被我們放棄，有下面這些原因：
第一，它們的核心一直都不是全領(lǐng)域的設(shè)計資產(chǎn)管理，而是圍繞在 Adobe 體系下的照片、視頻、矢量圖等多媒體項目素材管理，尤其是攝影相關(guān)項目。
第二，就像對比 Photoshop 相較與 XD 一樣，龐大的軟件體積和功能，對啟動速度和硬件資源消耗帶來沒辦法忽視的負面影響，降低操作的效率。
第三，就是比較值得深入思考的地方，那就是管理范圍太廣。直接讀取硬盤就是讓所有文件夾被暴露在管理器中，多出大量非必要的目錄和文件，嚴(yán)重增加我們的決策成本和管理成本。
范圍太大或自由度太高并不是什么好事，就像 iOS 的相冊一樣，它是個封閉的圖片庫，不像安卓一樣讀取其它硬盤文件夾，從而讓相片的管理更簡單明了。
自由雖然可以做更多事，但這些沒有必要的可能性增加就只會變成決策和行為中的負擔(dān)。簡潔明了，才是高效的前提條件。
第四，就是設(shè)計文件的 ”預(yù)覽效率“ 問題。不管電腦的性能怎么提升，大型位圖的渲染都是非常消耗資源的工作。不管是動輒幾 G 的 PSD 素材文件，還是高達幾億像素的超清圖片，加載都是需要等待的。
比如下方目錄中的作業(yè)文件，因為很多同學(xué)導(dǎo)出畫布不考慮圖片質(zhì)量尺寸，所以往往會出很多 1W*1W 像素以上超過 30M 的位圖。
當(dāng)這么多大型位圖聚集在一起，Bridge 完全加載出它們的縮略用了整整 2 分鐘的時間……雖然 Bridge 會讓你覺得久第一次打開慢以后就好了，這個功能的代價是生成了大量的 ”緩存”，即這些縮略圖會暫時保存到緩存文件夾中。
緩存文件都只是過客，在你格式化系統(tǒng)，換另一臺電腦打開，或者緩存超過了上面設(shè)置的 50G，那么舊的文件就會被刪除，你還是要重新加載該文件的縮略圖。相信我，超出緩存容量是非常容易的事，即使你加到 100G 也一樣。
Eagle 的庫特性，是在添加素材進庫之前，會生成一個對應(yīng)的縮略圖文件，之后 Eagle 讀取素材列表的時候就是加載這個只有幾十 KB 不到的小文件，而不是解析原圖。
這種策略帶來的幫助除了在文件夾之間切換高效自如，也對本地內(nèi)存的壓力有非常大的緩解。
在一般資源管理中，一個文件夾內(nèi)有幾千張高清圖片時，持續(xù)滾動到目錄底部就會發(fā)現(xiàn)越來越卡，因為占用的內(nèi)存越來越多，直至達到臨界點釋放掉上方列表加載的內(nèi)容（上滾會重新加載）。相信有用相機的同學(xué)一定很了解這種感受。
綜合各種問題和影響，自建庫，并為每個素材生成不會被刪除的縮略圖就是最好的選擇。
這不僅僅是 Eagle 一個工具的做法，即使 Adobe 也在 Lightroom 應(yīng)用了相同的策略，新 LR 導(dǎo)入圖片素材到它的自建庫中進行管理，同時生成縮略圖用于列表加載（降低高像素調(diào)節(jié)延遲）。而老版的 LR 雖然還沒下架，但為它增加 Classic（古典） 的后綴，所以它們認為哪種做法更有潛力，你們自己也能判斷了對吧？
今天我們使用的絕大數(shù)軟件都是 SaaS（微軟：基于web的軟件服務(wù)），自帶聯(lián)網(wǎng)備份和同步，但是 Eagle 只能保存本地卻不符合我們的 “習(xí)慣”，這是為什么？
因為成本是沒辦法控制的，重度用戶成百上千 G 的硬盤占用，是不可能輕易使用云服務(wù)來實現(xiàn)同步的。這些動輒幾 G 的 PSD 文件或其它大型設(shè)計文件，會讓整個同步過程充滿不確定性和沖突。
同時，云同步是一種成本特別高的服務(wù)類型，和一般的云存儲空間不是一種概念，想要大容量又要免費，是不可能的。Adobe 同步盤 1T 容量港區(qū)售價 68 港幣，蘋果 iCloud 同步盤是 2TB 68 元/月。
算起來他們的價格并不貴，但一定要清楚 Adobe 和蘋果云都是為了自家生態(tài)服務(wù)的，而且作為軟件業(yè)巨頭有自己的大型數(shù)據(jù)中心，降低云服務(wù)成本。類似 Eagle 這樣的初創(chuàng)團隊是不具備這種條件的，即使推出了，價格也不會便宜。
可能還有人會對比花瓣 Pro，它就支持云同步。但是，花瓣 Pro 只是官方網(wǎng)站的本地客戶端，更方便的訪問自己的官網(wǎng)個人中心，無法收集和整理圖片以外的其它素材，所以同步起來容易。
Eagle 的數(shù)據(jù)就只能保存本地，或者保存在笨拙的移動硬盤內(nèi)，隨身帶著嘛？肯定也不是。
庫文件的另一個管理好處，就是方便做備份。在今天同步盤服務(wù)逐漸成熟的環(huán)境下，你可以選擇購買類似 Dropbox、堅果云這類同步網(wǎng)盤，通過它們實現(xiàn)備份和多設(shè)備同步。
或者，可以購買群暉、威聯(lián)通、極空間為主導(dǎo)的個人云盤硬件，實現(xiàn)空間更大、更靈活的使用體驗。
如果有同學(xué)不知道怎么同步的，我會在后面分享。
最后一點，就是對蘋果 ARM 架構(gòu)的適配了。在 Eagle 2.0 版本中，快速適配了 Mac 的新硬件架構(gòu)，從而讓軟件的運行、讀取效率遠遠高于上一個版本，做到了絲般順滑的地步。
對軟件本身的優(yōu)化也是速度的保障之一，相信 Bridge 用的多的同學(xué)一定忽略不了它無處不在的延遲與卡頓。
Eagle 如果要進行網(wǎng)絡(luò)的備份和同步，那么一定要分清楚同步盤、網(wǎng)盤、移動硬盤的區(qū)別。
其中，網(wǎng)盤和移動硬盤基本上是一樣的，它們的使用特點就是我們要主動把要保存的東西，拖拽進硬盤目錄內(nèi)。移動硬盤備份速度還好點，網(wǎng)盤的備份就要非常久的時間。
如果你有兩臺電腦，使用移動硬盤的方案就得一直隨身帶著，用哪臺插哪臺上。非常容易在第二天忘記拔掉，然后回公司的時候沒庫可用。使用網(wǎng)盤的方案，那就更不可能的頻繁的備份和在另一臺電腦中下載。
類似 Dropbox 或 同步盤工具，就是用來解決這類問題的。簡單點說，同步盤的原理就是本地安裝一個同步軟件和云端的服務(wù)器進行通信，這個同步軟件會綁定相關(guān)的本地文件夾。于是，這個文件夾內(nèi)有任何文件的變更，同步軟件就會自動把變更的軟件傳輸?shù)椒?wù)器上。
而同步盤的特點并不是只能客戶端和服務(wù)器一對一傳輸，而是可以多對一同步。如果服務(wù)器內(nèi)容更新，它就會把更新的數(shù)據(jù)實時推送給其它客戶端，更新它們本地的文件。
通過這種模式，就能實現(xiàn)自己多臺設(shè)備，或者團隊多個成員設(shè)備的文件夾實時同步，無需你手動進行操作。
當(dāng)然，同步盤對服務(wù)器的資源占用與消耗遠遠大于一般網(wǎng)盤，所以基本只有付費的工具，而這種帶給我們生產(chǎn)力的提升和數(shù)據(jù)安全的預(yù)算是有絕對必要的。
如果使用蘋果的同學(xué)，可以通過將 .eaglepack 保存到關(guān)聯(lián) iCloud 的文件夾即可（最好“文稿”里）。蘋果系統(tǒng)就會自動開始同步，其它 Mac 電腦就能實時接收。 默認的空間肯定不夠用，建議開通 200G 容量的服務(wù)。
如果用專業(yè)同步云軟件，以堅果云舉例，下載完客戶端，只要完成關(guān)聯(lián)包含 .eaglepack 的文件夾，那么該文件夾就會啟動同步。再在別的電腦中安裝堅果云，就可以把該文件夾下載下來并自動同步。
我收集靈感素材是非常有目的性的，比如一個項目需要的配圖素材，我會一口氣去收集幾十張覺得合適的圖。
Eagle 有一個瀏覽器的采集插件，這個插件非常好用。只要拖動瀏覽器的圖片，就會出現(xiàn)對應(yīng)的采集彈窗，把鼠標(biāo)移動到對應(yīng)目錄上就可以完成采集。
如果你覺得整個頁面的圖片都想保存，也可以在插件圖標(biāo)中使用批量收藏按鈕（或快捷鍵），就可以采集整個頁面中的所有圖片，以及通過尺寸篩選對應(yīng)尺寸。
應(yīng)對日?？吹降膬?yōu)質(zhì)作品、靈感圖，也可以非常快速的實現(xiàn)采集?？梢宰罘奖愕氖占{我們自己的采集資料。
作為移動端 UI 設(shè)計師來講，收集日常見過的優(yōu)秀 APP 界面，是必要的職業(yè)素養(yǎng)。而使用 iPhone + MacOS 再結(jié)合 Eagle 的話，這個過程就會變得非常的簡單。
首先以完整頁面收集為例，之前看過不少人推薦使用 iOS 的跨設(shè)備復(fù)制圖片到 Mac 中黏貼的操作，是完全沒有必要的，因為一次只能復(fù)制一張截圖。
你要做的就是開啟相冊的云同步，日常使用 iPhone 時把想要收集的頁面進行截屏即可。每過一段時間，在電腦的相冊中打開 ”截屏“ 相冊，就有你這段時間收集的所有截屏?？蜻x相關(guān)內(nèi)容，拖進 Eagle 對應(yīng)文件夾中就完成收集，然后再刪除原圖。
而且因為相冊特殊的機制，直接拖拽出的圖片是壓縮后的版本，讓截圖的文件的體積大幅度縮小，從3M 變成 300K（完全夠看），非常好的降低硬盤占用量。
除了收集頁面，更重要的 UI 靈感是頁面中的 ”組件“，我們需要根據(jù)組件為目標(biāo)去收集相關(guān)的案例。直接拖進整頁截圖的方式就不太合適，比如下面的瓷片區(qū)案例區(qū)。
所以，我們要開啟 Eagle 的自帶截圖功能，并設(shè)置好你覺得順手的快捷鍵。
記得打開第一個選項 ”彈出分類“，就可以每次截圖后選擇指定的文件夾。不管是你的截圖，還是網(wǎng)上的其它案例，你都可以用最高效的方式收集這些組件樣式，輕易搭建自己的組件靈感系統(tǒng)。
前面講過，我會用 Eagle 來放 Mindnode 這類思維導(dǎo)圖文件。但是，Mindnode 先創(chuàng)建保存，再拖進 Eagle 的步驟太麻煩了。
所以，我正常新建并保存 Mindnode 思維導(dǎo)圖會到它默認文件夾中，然后使用 Eagle 的文件夾檢測功能關(guān)聯(lián)它，之后所有保存的文件就會出現(xiàn)在 Eagle 的目錄中。
之后，我編輯和查看老的 Mindnode 文件就在 Eagle 中進行了。這么做的好處，還可以讓我使用 Windows 系統(tǒng)的時候能夠正常預(yù)覽思維導(dǎo)圖。
Eagle 是可以管理字體的，我把所有正在用或收集的字體都放進了 Eagle 的字體文件夾中。
可能你們會有疑問字體丟進字庫就行了，還管理它們干什么？或者說有字由之類的字體軟件，用 Eagle 干什么。
一方面是我會盡量精簡使用工具的數(shù)量，另一方面，就是使用團隊同步盤的時候，我們的團隊字庫是統(tǒng)一的，隨時可以找到啟用的，最快解決其他人的設(shè)計文件字體缺失問題。
同時，當(dāng)我在使用 UI 軟件設(shè)置字體覺得選擇起來太困難時，就會去關(guān)閉掉大多數(shù)最近不會用的字體。實現(xiàn)這個操作非常的簡單，只要新建 ”智能文件夾“，并添加選項 ”字形文件“ 和 ”已安裝“，那么啟用的字體就會全部出現(xiàn)在這個列表中。
用一兩分鐘的時間就可以批量選擇你想要停用的字體，右鍵停用即可，它們就會自動從智能文件夾中消失。你可以一直保留這個智能文件夾，每次清理只需要一兩分鐘時間。
目前上方截圖中的很多案例還不是最終的完整版，最近上海疫情居家隔離，大多數(shù)工作暫停中，我在閑暇時就開始重新整理 Eagle 庫。因為以前堆積了很多冗余的東西，所以這次我把整體素材都導(dǎo)出后重新進行整理中，也是為什么會寫這篇內(nèi)容的原因。
Eagle 帶給我最大的價值，就是為我和團隊節(jié)省了海量的時間，讓我有可以更快的找到參考素材，更快的整理分類，更好的同步項目文件。
上面分享的很多體驗和總結(jié)，都是在 5 年來長期使用中一點點摸索，適應(yīng)，并形成習(xí)慣的。任何工具的使用與自己工作學(xué)習(xí)的結(jié)合，都是漸進磨合的，每個人都可以在這個工具中挖掘出適合自己的用法。
但依舊要給大家一個建議，不要為了收集而收集，也不要沉迷與堆積素材的數(shù)量，讓它為我們服務(wù)，恰到好處的出現(xiàn)在我們的實踐過程中。
作者：酸梅干超人 來源：站酷
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
這兩年互聯(lián)網(wǎng)行業(yè)在 C 端市場上的增長已經(jīng)不足以吸引大眾和投資者的視線，B 端作為一個新的熱點開始被追捧。
但 B 端是一個泛指，它是由若干面向商業(yè)場景的不同細分行業(yè)組成。包括云服務(wù)、SAAS、PAAS、定制系統(tǒng)、數(shù)據(jù)可視化、智慧平臺、商用 HMI 等等。
不同 B 端細分行業(yè)差距是非常大的，就像游戲 APP UI 和一般軟件 APP UI 完全是兩種職業(yè)一樣。每當(dāng)我們討論 B 端行業(yè)前景，就一定要聚焦到具體的行業(yè)類型，否則就沒有討論下去的基礎(chǔ)。
而我們今天重點聚焦的，就是目前聲勢極大的數(shù)據(jù)可視化行業(yè)。
這是最近很多同學(xué)咨詢和關(guān)注的領(lǐng)域，也是各大顯卡廠商、3D 引擎發(fā)布會上的?？汀?nbsp;
各種讓人眼花繚亂的圖例和技術(shù)應(yīng)用解說，很容易讓我們產(chǎn)生未來已經(jīng)加速向我們走來的 “幻覺”，此時不抓緊時代的機遇投身數(shù)字化界面的設(shè)計，更待何時？
但我還是要勸大家別光顧著雞凍，冷靜下來好好分析這些行業(yè)和市場狀況，當(dāng)你了解的越多，你就越會發(fā)現(xiàn)，這個職業(yè)方向和你們想的不太一樣……
首先，數(shù)字可視化領(lǐng)域也是一個比較籠統(tǒng)的行業(yè)，它依舊可以拆分出若干細分領(lǐng)域。但我先簡單根據(jù)視覺展示類型把它們分成兩大類，平面展示型和3D展示型。為什么根據(jù)這個分而不是商業(yè)場景，下面會做進一步解釋。
首先，數(shù)據(jù)可視化不是用了花哨的 3D 視覺才叫可視化，平面展示類型是絕對不能忽視的一個方向。它的主要應(yīng)用場景集中在商業(yè) BI ，統(tǒng)計分析工具等。
比如統(tǒng)計并查看網(wǎng)站、應(yīng)用、店鋪數(shù)據(jù)的平臺。
這類產(chǎn)品有非常廣泛的使用場景和需求，是現(xiàn)代企業(yè)和產(chǎn)品運營的基石，它存在的價值是毋庸置疑的。
而另一類 3D 展示型的細分發(fā)展方向，包含展示大屏、數(shù)字孿生、智慧項目、商用 HMI 等類型。
這類項目更多是由技術(shù)發(fā)展催生而來的 “新需求”，和 5G 的發(fā)展是高度相似的。我對這個行業(yè)的發(fā)展?jié)摿κ钦J可的，但對設(shè)計師從事這個行業(yè)的總體前景持悲觀態(tài)度。
下面，針對真正的數(shù)據(jù)可視化設(shè)計師，我會從下面幾個維度展開討論（唱起反調(diào)）：
- 知識門檻
- 行業(yè)特征
- 團隊價值
數(shù)據(jù)可視化是對數(shù)據(jù)信息進行圖形化設(shè)計的過程，這個行業(yè)不是這兩年才出現(xiàn)的，而是由來已久。
從世界上第一個圖表的誕生之后，就有無數(shù)統(tǒng)計學(xué)家和設(shè)計師投身到這個領(lǐng)域中，發(fā)明和設(shè)計出各種精妙絕倫的圖形。
數(shù)據(jù)可視化的重要性不會比任何其它設(shè)計行業(yè)低，但是，數(shù)據(jù)可視化重要性的來源，是由數(shù)據(jù)本身的價值賦予的。因為詮釋數(shù)據(jù)的方式精彩，所以有價值，而不是僅僅是因為你做得好看且花哨。
更進一步說，就是數(shù)據(jù)可視化的價值是被統(tǒng)計學(xué)賦予的，而統(tǒng)計學(xué)是被這個世界真實需要的。
但很可惜，極少有 B 端設(shè)計師會投入精力到統(tǒng)計學(xué)的基礎(chǔ)知識和應(yīng)用，這就導(dǎo)致很多設(shè)計稿中，連對數(shù)據(jù)的展示應(yīng)該用折線還是柱狀都分不清。
或許你依靠經(jīng)驗可以提升對一些基本圖表使用的心得，但是，進階的可視化設(shè)計需求就靠幾個簡單的折線、柱狀、餅圖就能解決嘛？那下面這些圖形應(yīng)用需要掌握什么？
復(fù)雜的可視化應(yīng)用場景，不僅需要設(shè)計師對統(tǒng)計內(nèi)容和數(shù)據(jù)應(yīng)用有主動地分析，還需要對計算機圖形學(xué)有一定的掌握。先不說門檻極高的 R 語言應(yīng)用，但凡涉及到區(qū)級以上的地理信息可視化，就一定需要應(yīng)用 GIS 工具的應(yīng)用，導(dǎo)出并轉(zhuǎn)化數(shù)據(jù)包。
除了 2D 以外，3D 可視化的項目，所需的知識儲備就更進一大步。很多新人的認知以為設(shè)計師的工作只要用 3D 軟件建模并輸出就可以，學(xué)會 C4D 就可以做可視化項目。
這和以為掌握烤箱的功能就可以做出美味的蛋糕性質(zhì)是一樣的……
前面說過，3D 可視化是由技術(shù)發(fā)展催生出的行業(yè)，它的應(yīng)用受到技術(shù)的影響非常大。因為 3D 應(yīng)用實在是太復(fù)雜了，比 2D 圖形復(fù)雜好幾個量級，這就導(dǎo)致設(shè)計可以落地的限制遠遠超出新手的認知。
常規(guī)的 3D 項目，必然要借助相關(guān)的圖形協(xié)議或者引擎。比如新手剛開始都以為的 3D 可視化就是網(wǎng)頁中運行 3D 效果，而網(wǎng)頁運行 3D 就是借助 WebGL 圖形協(xié)議實現(xiàn)的。
由于各種技術(shù)和硬件限制，WebGL 的性能是奇差無比的，因為它的圖形繪制渲染主要依靠 CPU 來完成，只要項目稍微復(fù)雜一點，多邊形和圖元數(shù)量一多，立馬就會讓電腦變卡（CPU占用量暴漲）。同時，它可以使用的渲染效果、著色器也必然不等同于 3D 軟件的高階渲染插件 OC 或 Redshift。
因為 WebGL 太弱，目前封閉的可視化項目就轉(zhuǎn)而使用其它的技術(shù)解決方案，即虛幻 Unreal 和 Unity。沒錯，就是你們玩游戲啟動畫面中顯示的那倆引擎。
換句話說，現(xiàn)在的高端 3D 可視化項目，就是用做游戲的方式做可視化應(yīng)用，只要在指定設(shè)備里安裝，就可以調(diào)用 GPU 資源，實現(xiàn)更高級復(fù)雜的效果。
但是，只要應(yīng)用了對應(yīng)的引擎，就必須使用配套軟件來完成渲染、動畫、交互事件。即通過 C4D 或者 Blender、犀牛等軟件完成建模（不同可視化項目應(yīng)該用的建模軟件也不一樣），再導(dǎo)入到虛幻或者 Unity 編輯器中進行下一步的操作，然后再和開發(fā)進行交付。
因為 3D 的復(fù)雜性，導(dǎo)致獨立 3D 可視化項目的開發(fā)流程被大幅度拉長，從而讓設(shè)計師需要掌握的知識面也大大增加。中間每個步驟都充斥著各種屎尿屁的限制，我就不繼續(xù)展開了。
3D 可視化設(shè)計師，幾乎就等同于游戲行業(yè)中的技術(shù)美術(shù)(Technical Artist)，因為游戲開發(fā)更復(fù)雜，分工更明確，技術(shù)美術(shù)作為設(shè)計師和開發(fā)之間的橋梁，幫助項目的美術(shù)能盡量在技術(shù)上被實現(xiàn)。
而因為可視化項目的建模精度與視覺效果要求不高（對比游戲），這些工作就要由同一個崗位包攬，設(shè)計師就沒辦法回避這些讓人絕望的知識信息。
還有一點對比游戲行業(yè)更讓人絕望的，就是 3D 可視化實際應(yīng)用的技術(shù)方案是高度碎片化、沒有體系的，而且技術(shù)迭代周期遠比游戲行業(yè)短（WebGPU已經(jīng)在路上了），這在客觀上增加了設(shè)計師的從業(yè)壓力（歡迎體驗前端開發(fā)的壓力？）。
一個專業(yè)的可視化設(shè)計師知識門檻，是遠遠高于一般 UI 設(shè)計師的。
當(dāng)我們研究一個行業(yè)的前景時，就是研究它未來的趨勢和潛力。數(shù)據(jù)可視化嚴(yán)格意義來講并不是完全獨立的一個行業(yè)或市場，而是其它多個大市場中的某個組成部分。
如前面提到的數(shù)字分析、物聯(lián)網(wǎng)、工業(yè)物聯(lián)，都是層次更高的商業(yè)化市場。這些都是近年來高速發(fā)展的熱門行業(yè)，是帶動可視化行業(yè)發(fā)展的客觀依據(jù)，我就不一一找公開統(tǒng)計數(shù)據(jù)佐證了。
而可視化除了商業(yè)場景外，還有個在國內(nèi)做可視化繞不開的話題 —— 政策。
如果具體關(guān)注過地產(chǎn)、5G、電動車產(chǎn)業(yè)的發(fā)展歷程，就應(yīng)該明白國家意志的貫徹可以怎樣在短時間內(nèi)催生出市場的高度繁榮（或者泡沫）。
而政策對于可視化的利好，就在于 “數(shù)字政府” 概念的規(guī)劃中。從幾年前開始就興起的政務(wù)數(shù)字化轉(zhuǎn)型，到最近國務(wù)院發(fā)布的 《關(guān)于加強數(shù)字政府建設(shè)的指導(dǎo)意見》，都是中央直接 “指導(dǎo)” 地方發(fā)展數(shù)字化的指標(biāo)，是行政意志與力量的體現(xiàn)。
說更具體點，下面是指導(dǎo)意見中的目標(biāo)說明，非常直白，大家可以自己體會：
到2025年，與政府治理能力現(xiàn)代化相適應(yīng)的數(shù)字政府頂層設(shè)計更加完善、統(tǒng)籌協(xié)調(diào)機制更加健全，政府?dāng)?shù)字化履職能力、安全保障、制度規(guī)則、數(shù)據(jù)資源、平臺支撐等數(shù)字政府體系框架基本形成，政府履職數(shù)字化、智能化水平顯著提升，政府決策科學(xué)化、社會治理精準(zhǔn)化、公共服務(wù)高效化取得重要進展，數(shù)字政府建設(shè)在服務(wù)黨和國家重大戰(zhàn)略、促進經(jīng)濟社會高質(zhì)量發(fā)展、建設(shè)人民滿意的服務(wù)型政府等方面發(fā)揮重要作用。
到2035年，與國家治理體系和治理能力現(xiàn)代化相適應(yīng)的數(shù)字政府體系框架更加成熟完備，整體協(xié)同、敏捷高效、智能精準(zhǔn)、開放透明、公平普惠的數(shù)字政府基本建成，為基本實現(xiàn)社會主義現(xiàn)代化提供有力支撐。
原文鏈接： http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm
正因國情在此，所以這些年 G 可視化項目才如雨后春筍一般涌現(xiàn)。智慧城市、智慧農(nóng)村、智慧水利、智慧交通、智慧民政等等，都是借助這股東風(fēng)蓬勃發(fā)展。
所以，商業(yè)和政務(wù)的迫切需求，催生出一大批可視化服務(wù)公司，如 EasyV、ThingJS、觀遠等。即使頭部大廠也生怕錯過這個機會，紛紛組建團隊進行行業(yè)布局。如騰訊云的 Raya Data、阿里云的 DataV、網(wǎng)易的數(shù)帆等等，都已經(jīng)小成氣候，初現(xiàn)鋒芒。
市場需求旺盛，規(guī)?？焖僭鲩L，前景理應(yīng)一片大好！但是……
市場總規(guī)模的擴張，帶給個體的收益卻不一定有表面看起來那么理想，尤其是設(shè)計師崗位。
這要先從常規(guī) UI 設(shè)計行業(yè)說起，UI 設(shè)計師工資已經(jīng)是國內(nèi)設(shè)計行業(yè)工資最高的類型之一，從10年前的屌絲行業(yè)到今天能和老牌貴族建筑設(shè)計叫板，是非常了不起的成就。
而之所以有這種收入，除了移動互聯(lián)網(wǎng)爆發(fā)以外，最重要的原因就是互聯(lián)網(wǎng)產(chǎn)品的 “利潤率”，可以用非常少量的職員撬動上億甚至上百億的利潤。
如王者榮耀 2021 年全年盈利 28 億美元，接近 200 億人民幣的利潤。一款游戲的利潤直接達到萬科（2021年利潤225億）和中國人保（2021年利潤216億）的水平，他們都是在冊員工超過 10W 人的大型企業(yè)，也是國內(nèi)各自行業(yè)里的巨頭，而王者的員工只是他們的幾百近千份之一。
再如螞蟻金服、微信、抖音之類的國民級互聯(lián)網(wǎng)應(yīng)用，都是用極少的員工達到讓人難以置信的估值和利潤，這在傳統(tǒng)行業(yè)是無法想象的。
所以能盈利的公司會給員工開出滿是行業(yè)紅利的待遇，拔高行業(yè)上限的同時，也迫使那些有志于挑戰(zhàn)巨頭的新公司愿意抬高工資價碼，吸引人才。
總結(jié)起來，UI 之所以平均收入遠超平面、服裝、工業(yè)、室內(nèi)等老牌設(shè)計行業(yè)，并不是因為 UI 專業(yè)門檻更高，而是以行業(yè)規(guī)模、項目規(guī)模、利潤率三個核心指標(biāo)的共同作用形成。
其中，項目規(guī)模和利潤率的重要性，其實遠遠大于行業(yè)規(guī)模，這是很多職場新人最想不通的地方。
例如廣告行業(yè)已經(jīng)是一個萬億市場了，除了分眾這家互聯(lián)網(wǎng)獨角獸外，其它老牌廣告營銷公司每年財報的營收和利潤大家感興趣的可以去搜搜（下圖為 21 年財報）。
看看他們的營收總額和凈利潤比例，以及員工總數(shù)，你自己就會得出，作為普通平面設(shè)計師的待遇，是絕對不可能超過頭部互聯(lián)網(wǎng)企業(yè)的，甚至能達到中游水平都是超常發(fā)揮的結(jié)論。
行業(yè)規(guī)模大，但是頭部企業(yè)規(guī)模和利潤卻不高，除了行業(yè)本身的平均利潤率因素外，還有一個原因就是業(yè)務(wù)是高度分散的，沒有被集中在少數(shù)頭部企業(yè)，供應(yīng)商數(shù)量龐大，不像多數(shù) C 端市場都由少數(shù)幾家公司或者產(chǎn)品把持或直接壟斷。
在可預(yù)見的未來，可視化行業(yè)也會處于這樣的情況，競爭激烈，利潤率低。而且作為 B 端服務(wù)商，不要看各家企業(yè)需求旺盛，政府各級單位招標(biāo)不斷，實際上每個項目的規(guī)模都不大，百萬內(nèi)的項目才占行業(yè)的絕大多數(shù)，這是不太符合滿足我們收入期待的項目規(guī)模。
而單個項目規(guī)模在未來高速擴大在我看來也不太現(xiàn)實，有兩個原因，一個是項目使用人數(shù)極少（通常也就幾十上百人…），另一個就是對可視化項目實用性的質(zhì)疑。
如果看過航天相關(guān)的報道，就會看到指揮室數(shù)據(jù)大屏相比我們網(wǎng)上看過的案例比起來，簡陋得發(fā)指。這會是因為總局沒有預(yù)算，請不起設(shè)計師和團隊開發(fā)嘛？
為什么航天指揮中心沒有用下面這種 “科技感” 滿滿，復(fù)雜的我坐下面保證除了標(biāo)題一個字也看不見的 “高端設(shè)計”？
原因說出來讓人沮喪，因為他們 —— 真的要看上面的信息??！
真正能發(fā)揮可視化價值的場景并不多，很多項目出發(fā)的意義，就是為了表面工程（各級ZF單位需求，自行體會），裝飾屬性大于實用性。既然實用性不夠高，很多甲方心里也清楚，是花錢裝裱門面的，那么投入的預(yù)算就更不可能太高。
所以，我對可視化行業(yè)的整體的發(fā)展是認可的，但對單家公司或項目的預(yù)期，卻是悲觀的，它們沒法達到我們已經(jīng)習(xí)慣的 C 端和 SAAS 行業(yè)的高度。
最后，還要探討下數(shù)據(jù)可視化中設(shè)計師的團隊價值。
我們知道，一個完整的可視化項目設(shè)計與開發(fā)門檻都是非常高的，但因為高，創(chuàng)造的價值就高嘛？項目營收的成本占比就高嗎？
答案依然是否定的！因為可視化行業(yè)的絕大多數(shù)項目都是 “傳統(tǒng)” 的外包項目。
不管是商業(yè)是政務(wù)領(lǐng)域，外包最重要的任務(wù)，都是找到業(yè)務(wù)（中標(biāo)）。樸素的價值觀會認為，只要技術(shù)和服務(wù)夠好，業(yè)務(wù)自然源源不斷，其實不然。技術(shù)服務(wù)都是后驗的，客戶沒有合作過之前是不知道的，在市場上挑選服務(wù)商，可不是打開淘寶買家評論查看分?jǐn)?shù)和具體評價篩選。
所以，外行了解服務(wù)商的窗口，更多是通過熟悉的中間人介紹，或者銷售的嘴。誰能拿到項目，誰就為公司創(chuàng)造了最大的價值。后面怎么做那是后面的事，換誰做不是做……
這就是最常見的外包企業(yè)思路，所以技術(shù)人員或者設(shè)計往往都是消耗品，沒有那么強的依賴性。而在具體外包實踐環(huán)節(jié)中，項目的執(zhí)行決策也和一般 B 端、G 端項目不同。
我以前一直強調(diào)，B 端項目的存在價值，是用來解決業(yè)務(wù)問題，為企業(yè) —— 降本增效。但是可視化項目往往不是用來解決問題，而是用來 —— 解決產(chǎn)生問題的人！
尤其是面向政務(wù)的項目，在領(lǐng)導(dǎo)的需求面前，是沒有體驗這一說的，首先考慮的應(yīng)該是 ”科技感“（結(jié)合前文理解），不然怎么展示自己貫徹上層指導(dǎo)意見……
這種環(huán)境對于創(chuàng)意類職業(yè)是非常不利的，一方面創(chuàng)造的價值并不顯著，另一方面是由別人 “教你” 怎么做設(shè)計。長此以往，你會越來越缺失職業(yè)競爭力和發(fā)展可能。
問題二，則是因為可視化項目獨立開發(fā)成本太高昂，做的視覺內(nèi)容又非常固定。于是有實力的團隊就紛紛投入可視化編輯工具的研發(fā)，解決最麻煩的底層圖形方案。
這和 B 端的前端開源框架非常類似，把底層的代碼、交互、動畫、性能優(yōu)化都幫你做好了，設(shè)計師和程序員可以用非常省事的完成項目的視覺內(nèi)容落地。
但是，常規(guī) B 端管理項目中，界面樣式一直就不是最重要的事情，而是解決復(fù)雜頁面流程和組件交互的問題。所以資深的 B 端設(shè)計師樂于應(yīng)用第三方的框架來完成復(fù)雜的項目。
而在可視化領(lǐng)域中，多數(shù)項目并沒有那么多和復(fù)雜的交互需要考慮，視覺展示效果才是第一位，絕大多數(shù)團隊?wèi)?yīng)用第三方框架是大勢所趨。核心工作內(nèi)容被影響，那才叫觸及靈魂的打擊。
所以，在我看來可視化設(shè)計師可以創(chuàng)造高價值的場景，只會出現(xiàn)在兩種團隊中。
第一種，是給其它可視化團隊提供圖形服務(wù)的 SAAS 工具，比如 Raydata、EasyV 這類。都需要團隊有非常優(yōu)秀的前端程序員和技術(shù)積累，換句話說，就是既要有技術(shù)實力又要有資金保障的團隊。
第二種，則是走優(yōu)質(zhì)項目輸出路線的小團隊或公司。會有一些優(yōu)秀的開發(fā)人員坐鎮(zhèn)，再由設(shè)計師主導(dǎo)來推動業(yè)務(wù)發(fā)展，不會什么項目都做，會選有價值的用心交付。例如早年的 UI 外包團隊 ARK、Eico、TangUX 等都是這種路線。
這兩種對比目前海量的服務(wù)商來說都是鳳毛麟角，第一種類型是可視化設(shè)計師發(fā)展最好的歸宿，因為設(shè)計產(chǎn)出和圖形技術(shù)發(fā)展高度捆綁，只有這樣的團隊才會最早最快接觸新的專業(yè)技術(shù)方案。
除了這兩類，不要對其它外包類公司有太多的期待。在整個互聯(lián)網(wǎng)行業(yè)中，成熟產(chǎn)品團隊非常不喜歡招外包設(shè)計師不是沒有原因的。
至于未來是不是可視化內(nèi)容會在 C 端領(lǐng)域打開局面，發(fā)展出一些新的應(yīng)用場景，我就不過早下定論了。
最后，做個總結(jié)，給目前還沒有進入可視化設(shè)計行業(yè)，或者是誤打誤撞進入這個行業(yè)的設(shè)計師一些職業(yè)方向的建議。
可視化設(shè)計行業(yè)和廣告業(yè)非常類似，就是從業(yè)人員收入構(gòu)成是沙漏狀，而不是像 UI 這樣呈金字塔狀的，缺乏健康的增長梯度和充足的腰部崗位。
可視化設(shè)計師從菜鳥進入專業(yè)階段所需的知識量更大，準(zhǔn)備周期更長，技能門檻更高。在初中級階段和一般 UI 行業(yè)對比起來 —— 毫無性價比。
如果本身熱愛可視化，想將 FUI 那些東西搬進真實的世界和項目里，也做好了艱苦學(xué)習(xí)的準(zhǔn)備（說不定是你樂在其中的），那么這個的行業(yè)的頭部崗位就是為你這種人準(zhǔn)備的。
畢竟行業(yè)體量大，當(dāng)然就會有真正優(yōu)質(zhì)的崗位出現(xiàn)，只是它的門檻高，沒有那么多水分能擠。
如果不是異常熱愛這個行業(yè)，具備較強的自學(xué)能力，或有一定的 3D 和圖形技術(shù)知識積累，那么不太建議往這個職業(yè)深入發(fā)展，一般的 B 端和 SAAS 項目才會是更好的選擇。
作者：酸梅干超人 來源：站酷
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
圖表的作用在于對數(shù)據(jù)的合理的詮釋而不是美觀。所以，在了解圖表怎么繪制前，更重要的是了解圖表是什么，包含哪些類型。下面就做下相應(yīng)解釋方便大家理解～
在今天，隨著大數(shù)據(jù)和數(shù)據(jù)分析理念深入人心，圖表在 B 端設(shè)計的地位越發(fā)重要。
那么什么叫圖表呢？
圖表指的是可以直觀展示統(tǒng)計信息屬性和數(shù)值的圖形表格，對于多數(shù)人來說第一次接觸圖表概念都源自中小學(xué)計算機課程中的 Office Excel 表格教學(xué)。
要理解圖表，你就繞不開 Excel 這個軟件或其功能形式。我們都知道 Excel 是一個表格工具，可以任意填寫表格化的信息內(nèi)容進去。
但那只是呈現(xiàn)出來的表象，Excel 的真實身份應(yīng)該是一個數(shù)據(jù)記錄工具，通過這種表格形式記錄，比如班級學(xué)生成績、客戶聯(lián)系方式、倉庫進銷記錄等等。每一條記錄下的信息都是一條獨立的 “數(shù)據(jù)”。
盯著表格看，我們確實可以看到一些具體的信息、數(shù)據(jù)、內(nèi)容。但是，數(shù)據(jù)的作用只是讓我們自己去精確定位想要的內(nèi)容而已？顯然是否定的。
我們統(tǒng)計數(shù)據(jù)的目的，還包括要從眾多的數(shù)據(jù)條目中獲得反映真實情況的 “規(guī)律”、“趨勢”，如果我們只盯著數(shù)據(jù)條目一條條的瀏覽，是很難找出這些信息的。
于是，人類就發(fā)明了圖表這種可視化工具，幫助我們對數(shù)據(jù)進行總結(jié)，用更直觀的視覺方式來認識數(shù)據(jù)和找出規(guī)律和趨勢，這也是為什么 Excel 是最強大的圖表生產(chǎn)軟件的原因之一。
總結(jié)：圖表是統(tǒng)計學(xué)的子學(xué)科，它幫助我們更好的找到數(shù)據(jù)背后的真相，并做出正確的決定。
圖表既然由數(shù)據(jù)內(nèi)容生成，這個生成和轉(zhuǎn)化的過程當(dāng)然具備一些基本的規(guī)則和條件。要滿足圖表生成的數(shù)據(jù)必須要包含兩種基礎(chǔ)信息 —— ”維度“ 和 ”數(shù)值“。
它們是組成絕大多數(shù)圖表的基石，比如看下面的表格，一次體檢中有三個班級的5個同學(xué)，他們的身高、體重、體脂率、肌肉含量、視力各不相同。
我們可以從中挑選維度和數(shù)值，比如姓名做緯度（X軸），體脂率作為數(shù)值（Y軸），那么就可以生成基礎(chǔ)柱狀圖表。
從上面案例可以知道，橫向緯度表示的是你圖表中要包含多少不同的展示對象，縱向數(shù)值則表示你要顯示該維度的哪一類數(shù)據(jù)。
緯度通常指某個具體的人、日期、事件、分類，通常是 不可量化 的內(nèi)容。而數(shù)值則是指包含 可量化 的數(shù)據(jù)類型，重點要記得數(shù)值是指 “數(shù)據(jù)類型”，而不是指具體的參數(shù)值。
再進一步，上方生成的圖表，雖然直接反映了我們選擇的緯度、數(shù)值的情況，但顯然對于不了解數(shù)據(jù)背景的人來說太簡陋了，不知道它們代表的意義。所以，一個完整的圖表還會包含一些 “解釋” 性元素，來讓觀看者更好的理解圖表內(nèi)容。
所以，一個完整的圖表中除了中心圖形，還會包含標(biāo)題、單位、緯度圖例、網(wǎng)格、選中提示等內(nèi)容，用來提升其閱讀性。
以上只是最基礎(chǔ)的示例，不同圖表、內(nèi)容，對說明信息的要求各有不同，我們會在下方做出一定的解釋。一個優(yōu)秀的設(shè)計師要學(xué)會如何因地制宜，優(yōu)化圖表的內(nèi)容構(gòu)成，并對展示的信息進行取舍。
隨著統(tǒng)計學(xué)的發(fā)展，圖表也經(jīng)歷了一系列的增長與創(chuàng)新，除了我們常見的幾種圖表外，還發(fā)展出了大量平?？床坏?，只存在于各自專業(yè)領(lǐng)域的特殊種類。但是，它們對我們的生活和工作也起到產(chǎn)生了重要的影響。
比如在新冠危機中，政府和專業(yè)機構(gòu)對民眾開放的數(shù)據(jù)就大量使用了圖表進行解釋，讓我們可以很清晰的了解事情的走勢和真相。
之所以有這么多不同圖表，讓人眼花繚亂，在于數(shù)據(jù)所包含的信息和特性不同，導(dǎo)致了它們所總結(jié)的規(guī)律類型也不同。
業(yè)界將圖表展示類型分成了四個大類，包含比較、分布、構(gòu)成、聯(lián)系，雖然比較簡陋，但這是新手認識圖表最簡單的方式。
我們簡單解釋下這四個分類代表的作用：
之后我們就會以這個框架，來解釋不同分類下的圖表，幫助大家建立對圖表的正確認識和設(shè)計方式。除了這種標(biāo)準(zhǔn)分類以外，我還額外做了一個歸類，就是基礎(chǔ)和高級圖表。
前面提到，一般圖表就只反映緯度、數(shù)值兩個方面的圖表類型，很容易理解。但復(fù)雜的圖表，就會超過這個范圍，它可能包含了多個維度、多種數(shù)值、甚至第三、第四。
比如下面這個散點圖，除了身高（緯度）、體重（數(shù)值）外，還表現(xiàn)了個體（圓點）、性別（色彩）。在圖表本身的解釋性元素中，還包含分布區(qū)域、最大最小值標(biāo)識、體重/身高均值。
這已經(jīng)超出一個沒有接觸過統(tǒng)計的新手認知范疇了，是需要具體學(xué)習(xí)才能學(xué)會如何閱讀和應(yīng)用的圖表。
這還是比較簡單的高級圖表，往后還有類似?；鶊D、K線圖（韭菜的自我修養(yǎng)）、和弦圖等類型，它們有各自使用的規(guī)范、參數(shù)，以及應(yīng)用的場景。
高級圖表的復(fù)雜度和抽象性，決定了它的使用門檻較高，識別效率較低。而隨著數(shù)據(jù)各行各業(yè)數(shù)據(jù)重要性的提升，對圖表的需求已經(jīng)不再局限在二維抽象圖形的應(yīng)用上，而是提供了視覺效果更精美，制作過程更復(fù)雜，閱讀門檻更低的可視化數(shù)據(jù)展示內(nèi)容。
雖然我們在本篇文章不會拓展到大屏可視化的領(lǐng)域，但是掌握好平面二維的統(tǒng)計圖表，提升對統(tǒng)計目的的認識，是深入學(xué)習(xí)可視化的必要條件。
接下來，我們就要來介紹一下如何繪制圖表了。雖然圖表之間有比較大的區(qū)別，但它們有很多細節(jié)是具有統(tǒng)一規(guī)范的。優(yōu)先掌握這些一致的內(nèi)容，再理解不同圖表的具體繪制差異，可以幫助設(shè)計師快速上手圖表設(shè)計工作。
上面我們提了，一個成熟的圖表會包含不少解釋性信息，怎么放置解釋信息和圖形元素是我們在設(shè)計時的第一個考慮要素。
常見的抽象圖表都有一個完整的矩形區(qū)域，我們要先確定該圖表的具體占比尺寸。然后，對這個區(qū)域進行布局的規(guī)劃，而這個布局的規(guī)劃就和解釋信息的展示有非常大的關(guān)系。
比如，你需要在圖表中增加標(biāo)題和圖形解釋，那一開始把圖形做成了上、中、下三欄。有的情況下我們可能還會增加一個默認存在的文本型解釋模塊，那么還會再右側(cè)再切割出一個區(qū)域出來。
除了解釋信息外，我們在設(shè)計中有時候還不能忽視交互內(nèi)容，比如要包含分類篩選、時間線控制、開關(guān)等控件時，它們準(zhǔn)備放在哪里，也要在這個階段確定出來。
經(jīng)過前面的切割，其實我們就能確定出中間的圖形區(qū)域了。在開始繪制前，我們還要對圖形具備的信息做進一步的確認，XY 軸坐標(biāo)是否包含文字解釋，餅圖類是否包含延長指示線說明。
將這些區(qū)域先確定出來，減去它們的空間，就留下了最終要圖形展示的區(qū)域了。
合理的圖表繪制流程變是先布局，確定信息內(nèi)容，最后才集中處理圖形元素。如果對于前端適配有一定了解的同學(xué)，也就知道在完成這些步驟以后，圖表的適配規(guī)則制定就暢通無阻了。
有了圖形區(qū)域，接著就可以開始動手畫圖形了。不管是基礎(chǔ)還是復(fù)雜的圖形，你想要讓自己輸出的作品嚴(yán)謹(jǐn)、質(zhì)量高，就需要應(yīng)用專業(yè)的繪制方法。
圖表圖形的繪制類似尺寸作圖，需要應(yīng)用各種參考線、輔助工具來完成。圖形本身并不是我們用來做創(chuàng)意的地方，而是要以準(zhǔn)確的方式繪制出來。它包含兩個重點，分布和比例映射。
以一個柱狀圖表舉例，該圖表中維度包含了 7 個對象，即應(yīng)該出現(xiàn) 7 個柱形。那么首先就要通過等分圖形區(qū)域，來確定柱形的分布，XY軸文字的對齊對象。
如果你不羅列對象具體數(shù)值的話，到這步也就結(jié)束了，但如果對象數(shù)值是必要顯示內(nèi)容的話，那么就要盡量確保柱狀的顯示比例和數(shù)值是一致的。
假設(shè)在上方案例中，Y軸總高是 100px，那么數(shù)值中每 1 小時的高度就是 100/16 = 6.25px，我們就要用你寫下來的數(shù)值 * 6.25，保證柱狀圖高度比例和你的數(shù)值一致。
而類似餅圖這樣的圖形中，只要添加了具體數(shù)值內(nèi)容，那么餅圖中不同的扇形角度，也要符合對應(yīng)的比例。比如占比 10%、20%、30%、40% 的四個對象，它們的角度就分別為 36、72、108、144。
這就是分布和比例映射的基本邏輯，不管是什么圖表，只要它根據(jù)數(shù)值在區(qū)域中進行繪制，就一定會受到數(shù)值的影響。不管學(xué)習(xí)什么新的圖表，都只要確定這兩個步驟就可以輕松準(zhǔn)確的完成繪制。
至于具體該怎么實現(xiàn)，用插件還是參考線，就是軟件基礎(chǔ)的問題了，不在這里展開。
在圖表設(shè)計中的最后一個問題，就是關(guān)于配色的方案了。圖表配色的技巧主要關(guān)注兩點，選色邏輯和搭配方法。
選色邏輯，就是圖表用色的一些基本規(guī)范。我們知道圖表往往非常的復(fù)雜，或者頁面一屏中會包含大量的圖表。
在這個基礎(chǔ)上，圖表的用色就注定是不能太 “剛猛” 的，飽和度要偏低，明度要適中。在選色面板中，它大概處中部偏上的區(qū)域。即使產(chǎn)品主色用的飽和度非常高，圖表要和主色統(tǒng)一，也建議在主色基礎(chǔ)上做適當(dāng)調(diào)節(jié)，在色系上接近即可。
并且，建議新手在繪制圖表的過程中千萬不要用漸變色。即使在各類飛機稿中，漸變色的展示效果也非常的不理想，沒有任何可讀性。
有了選色邏輯，多色搭配的思路也就變得而非常簡單了，只要重點關(guān)注色環(huán)的配色模式即可。
配色模式多種多樣，包括補色、三角對立、類似、四元、方形、臨近等等，不用想的那么復(fù)雜，只要牢記根據(jù)你的設(shè)計風(fēng)格需要，你是要相鄰配色，還是等分配色。
相鄰配色，即以一個色系的臨近色系為標(biāo)準(zhǔn)的搭配。以 H（色相）、S（飽和度）、B（明度） 配色模式為準(zhǔn)，飽和度和明度數(shù)值基本不變的情況下，小幅度變更色相。
等分配色，也是保持飽和度、明度的一致，根據(jù)需要的色彩數(shù)量（大于三個）在色環(huán)中按角度等分，獲得均勻的色彩過度。
配色的方法很簡單，難的是你們?nèi)绾胃鶕?jù)頁面的需要、視覺的體驗，合理的運用配色的方案，這沒有統(tǒng)一的標(biāo)準(zhǔn)。要記得圖表配色不是僅僅針對自身，會和頁面其它色彩產(chǎn)生聯(lián)系。
保證相對平緩、不太激進的圖表配色思路，是最安全的做法。
首先解釋第一類圖表 —— 比較。
比較圖表的作用，是用來對緯度的數(shù)值做對比的圖表類型，直觀對比不同對象的強弱、排序、趨勢。
柱狀圖，是一個使用柱狀圖形反映緯度數(shù)值的二維坐標(biāo)軸圖表，也是我們最常見的圖表類型。
在這個二維坐標(biāo)軸中，我們可以用縱軸代表數(shù)值，也可以用橫軸代表數(shù)值，另一個軸代表緯度。即在顯示的過程中可以使用縱向或者橫向的（橫向的也被叫成條形圖，都是一回事）。
柱狀圖除了每個對象包含一類數(shù)值的做法以外，也允許包含多個數(shù)值類型，每個類型使用一種顏色表示，這種圖表叫分組柱狀。
并且，柱狀圖作為最基礎(chǔ)的圖形，衍生了非常多下級的柱狀類型。包括：堆疊柱狀、子彈圖、正負混合、瀑布圖、直方圖等。但要注意的是，并不是所有柱狀類圖表，都是作為對比來使用的。后續(xù)會有進一步提示。
柱狀圖通過柱體的長短，可以直接對比不同緯度數(shù)值的高低，但使用也有一定的差別。
緯度之間關(guān)聯(lián)性不是太強，或者按時間順序排列的就適合用橫向排列的方式，比如下方記錄我隨時可能猝死的打工人一周睡眠時間（見左圖）。而涉及排名或者時間的數(shù)據(jù)組，就適合使用縱向排列的，比如 Geekbench 展現(xiàn)不同 Mac 處理器強弱的排行榜（見右圖）（os：Pro 居然比 M1 還低？）。
兩種圖表的選擇還和 UI 環(huán)境的交互方式有關(guān)，在APP中，橫向排列的柱狀圖可以顯示的數(shù)量非常有限，想放更多緯度就要左右滾動，體驗不佳。而使用縱向排列則對空間的要求沒那么高。
折線圖也是基礎(chǔ)圖表，通過創(chuàng)建端點并使用直線連接的方式展示出高低不平曲折的線段。折線圖在圖表形式上和柱狀圖非常類似，但兩者在使用上是有一定區(qū)別的。
當(dāng)我們要選擇使用柱狀圖的時候，往往關(guān)注數(shù)值的總量，或者維度代表的是不同的對象，比如不同 CPU 之間的跑分對比。但是折線圖的使用就沒有那么單一，它主要應(yīng)用在單一對象的單個維度變化對比中。
比如，我們監(jiān)控 CPU 的占用頻率，那么維度使用時間，數(shù)值用百分比，這里面產(chǎn)生的數(shù)據(jù)都是圍繞 CPU 的占用頻率展開，但如果維度改成了當(dāng)前時間不同核心的占用數(shù)值、溫度，那么我們就肯定不會用折線圖來表示。
折線圖的使用是要通過線段的曲折來反映數(shù)值的波動，在應(yīng)用過程中往往不作為一個靜態(tài)的圖表展示，而是應(yīng)用于監(jiān)控的場景，比如監(jiān)控股市市值、網(wǎng)站在線人數(shù)、CPU溫度、同一地區(qū)降水量等等。
在折線圖中，最大的認知誤區(qū)就是對于曲線線段的應(yīng)用了。在數(shù)之不盡的網(wǎng)上飛機稿中，使用曲線的折線圖表 90% 以上都是錯誤的。
這要回歸本質(zhì)來探討，折線圖也是進行對比的圖形，如果沒有直觀的波動，那么這個圖形帶來的信息量就非常有限。曲線會因為圓角的緣故而降低波動帶來的沖擊力，甚至抹平這種對比。
只有在必定會連續(xù)出現(xiàn)極大波動的圖表中才適合使用曲線，例如圍繞在會有一個中間值數(shù)值，曲線進行正負兩端移動的類型，比如監(jiān)控呼吸中含氧量（呼和吸一個周期的維度）。
所以，盡量避免曲線的應(yīng)用，不僅畫起來麻煩，而且實際使用效果極差。
作為折線圖，在一些數(shù)值代表完成、占滿、填充的概念時，往往就會覺得單純的線段表示不夠直觀，于是就產(chǎn)生了將下方的區(qū)域填充色彩的 —— 面積圖。只展示一個數(shù)值類型不夠要加入多個數(shù)值和線段的就叫折線堆疊圖。
雷達圖，相信大家看到最多的地方就是在游戲的角色面板或者武器面板中。雷達圖是一種偏向概括性的圖表，并不能用來體現(xiàn)大數(shù)值和高頻變化，是用來對比同一個對象不同維度數(shù)值的圖表。
雷達圖的應(yīng)用，首先要確認出不低于5個的維度，并且這些維度可以使用相同的數(shù)值體系，比如0-10分，0-100%等。并且，這些維度最好是由同一個對象身上拆分出來的，而不是 5 個維度指代不同的對象。
簡單來講，就是我們可以用雷達圖來表現(xiàn)一個學(xué)生不同科目的水準(zhǔn)，這樣雷達圖可以大致概括這個學(xué)生科目掌握情況和相對的強弱。
但是不應(yīng)該用雷達圖來表示不同學(xué)生同一科目的水準(zhǔn)，那就只是更基礎(chǔ)的對比，用柱狀圖就可以了。
當(dāng)然，雷達圖中的占用內(nèi)容，也可以添加多個對象，一個雷達圖中可以放多個同學(xué)不同科目掌握水平的疊加圖形，以此對比他們的差異。
雷達圖的繪制，也是優(yōu)先制定說明內(nèi)容區(qū)域，然后再開始圖形的設(shè)計。
因為在雷達圖中，我們對維度的描述，基本只能設(shè)計到不同端點外部，那么文字本身的數(shù)量、占比，就會對圖形的顯示產(chǎn)生非常大的影響，并且在雷達圖中維度的描述文字是必須的，過度精簡還是用其它方式體現(xiàn)都很不直觀，所以優(yōu)先預(yù)留足夠的文字空間。
然后，根據(jù)我們需要的維度數(shù)量繪制一個等邊的多邊形，并設(shè)置合理的數(shù)值。
之后，才是確定出這個多邊形內(nèi)所包含的數(shù)值刻度數(shù)量。假設(shè)除圓心外總共要顯示5級，那么就要畫 5 個堆疊的等邊形，那么我們就從最大的那個等邊形入手，再復(fù)制4個出來，對它們分別乘以 80%、60%、40%、20% 即可。
最后，再將每個維度對應(yīng)數(shù)值根據(jù)百分比將端點打在維度的直線上，用鋼筆工具將每個端點連接起來創(chuàng)建一個完整的不規(guī)則多邊形，就完成了雷達圖的設(shè)計。
如果想要在一個雷達圖添加多個對象，只要用不同顏色描邊繪制對應(yīng)數(shù)量多邊形即可，如果要填充這些圖形，就一定要使用透明度填充來完成，否則可能遮擋后方的端點，導(dǎo)致圖形不全。
階梯圖是一種用來對比前后數(shù)值漲跌的圖形，它是柱狀和折線圖的合體。它和折線圖的不同之處在于，更關(guān)注每個對象增減的份額大小。
不僅僅是關(guān)注波動，而是更具體的值。類似關(guān)注一只股票全年的股價漲跌情況，每個月漲跌的具體額度，就適合使用階梯圖表現(xiàn)。
漏斗圖因為長得像漏斗而聞名。雖然這個圖形看起來像一個錐形或者三角形，但本質(zhì)上漏斗只是條形圖（橫向柱狀圖）的變體。
漏斗圖是一種對階段進行分層表現(xiàn)的圖形，從上到下的順序中，數(shù)值一定會呈現(xiàn)衰減的趨勢（起碼不會變大），然后從上到下的柱體就越來越小。
例如，UX 數(shù)據(jù)分析經(jīng)常用的漏斗模型，就會建立一個從用戶訪問主頁，到最后完成下單的轉(zhuǎn)化率，每一個步驟都會有一定的用戶流失。
在基礎(chǔ)漏斗圖之上還有進一步拓展，比如對這個轉(zhuǎn)化本身有一個預(yù)期，那么可以做對比漏斗圖，比較現(xiàn)實和預(yù)想中的差距。如果要對比 iOS 和 Android 端的漏斗數(shù)據(jù)，還有比較漏斗圖，對比兩側(cè)的長短數(shù)據(jù)。
第二個解釋的圖表類型 —— 分布。主要是用來研究數(shù)據(jù)分布情況的圖表，對不同數(shù)據(jù)的統(tǒng)計分布狀況進行描述。
直方圖是一個看起來和普通柱狀圖非常接近的圖表類型，是一個用來表示同一個緯度范圍中，不同區(qū)間頻率的圖形。
直方圖是一個二級圖表，是對一級數(shù)據(jù)的進一步轉(zhuǎn)化。比如看上圖案例，散點圖（下面會說）本身記錄了不同的數(shù)據(jù)的位置，而直方圖就是記錄在發(fā)生在這個緯度內(nèi)的次數(shù)。
直方圖乍一看很像柱狀圖，但實際應(yīng)用場景往往使用了非常密集的柱體，讓它看上去像折線圖。對于設(shè)計師來說和直方圖打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方圖。
當(dāng)視覺設(shè)計師、攝影師在學(xué)習(xí)處理位圖的時候，就必然要學(xué)會直方圖的讀取，它并不是用來讓我們學(xué)習(xí)如何對比前后數(shù)據(jù)差異的，而是讓我們可以快速掌握這張圖片中像素點在不同通道的分布量。
直方圖是統(tǒng)計學(xué)中的 “頻率分布” 的視覺表現(xiàn)形式，需要確保使用的場景符合直方圖的定義，以及確保用戶能理解圖表內(nèi)容。
對于直方圖來說，如果維度對象少，只要獲得相關(guān)的信息和數(shù)值，就可以像柱狀圖一樣來繪制。
如果是針對一些比較專業(yè)的場景，如上方的通道直方圖，那么就要放棄自己完成的目標(biāo)，一定要借助相關(guān)插件，或者使用 Excel 等工具實現(xiàn)后再導(dǎo)入進來。
箱型圖也叫盒須圖，和直方圖類似，它也是一個二級圖表，即它不是直觀反應(yīng)原始數(shù)據(jù)，而是對原始數(shù)據(jù)的狀態(tài)進行轉(zhuǎn)譯。圖表中的每個箱型反應(yīng)一組數(shù)據(jù)的分散情況資料，每個箱型包含下面這些信息元素。
箱型圖反應(yīng)的是一種 “大概” 情況，它不是一種用來進行精確數(shù)值展示的圖形。箱體主要是上四分衛(wèi)和下四分衛(wèi)的區(qū)間組成，下/上四分衛(wèi)指的是 “樣本中所有數(shù)值由小到大排列后的 25%/75% 的數(shù)字”。
這里的排列主要通過 “數(shù)值大小” 來決定，而不是分布數(shù)據(jù)。比如一個班上100個同學(xué)包含身高 150、160、170、180、190 五種身高，雖然每個身高包含的人數(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ù)組的虛實、占比、上下限，可以獲得非常多有趣的結(jié)論。
在箱型圖的設(shè)計中，對于箱體和觸須的表達要依據(jù)數(shù)據(jù)本身的重要性來判斷。有些場景對最大最小值更在意，則箱體顏色就淺，線段更矚目。而要重點關(guān)注箱體的話，則可以對觸須進行弱化使用虛線。
同時，箱型圖的主要識別信息是 Y 軸的長度，一個美觀易度的箱型圖，箱體寬度盡量控制在一個比較纖細的水平，不要為了填充畫面的空白強行做寬。
相信稍微了解過股票還是基金的同學(xué)，對K線圖那可就一點也不見外了，下陽線、收盤光頭陽、小陽線，開口就是老韭……不對，老股民了。
K線圖是箱型圖的一個變種，也叫蠟燭圖，主要應(yīng)用在股票、幣市、期貨等市場的交易數(shù)據(jù)上。一個K線圖包含了陽線、陰線兩個大類。陽線代表上漲，陰險代表下跌。
每個類型中，同時還表示當(dāng)日成交中的最低價和最高價，柱體代表的是開盤價和收盤價。在我國股市，上漲用紅色，下跌用綠色，在幣市則相反。
K線圖實際上動手設(shè)計它的情況微乎其微（只用開發(fā)好的），我們只要了解它的原理即可。
K線圖基本只應(yīng)用在和理財有關(guān)的證券行業(yè)中，在會出現(xiàn) K 線圖的圖表模塊中，必然會出現(xiàn)相應(yīng)的交互操作。如左右滑動、放大縮小，它是一個具備響應(yīng)模式的圖表類型，包含兩種狀態(tài)。
如果空間足夠，則使用箱體和虛線的常規(guī)設(shè)計。如果顯示的對象密集，那么就會以一條直線來顯示，忽略掉箱體的部分。
同時，不同的場景，對于陰陽線箱體的展示會有一定區(qū)別，除了色彩外，還會應(yīng)用實心和描邊的區(qū)別。
因為涉及財產(chǎn)、交易，針對K線圖的設(shè)計，一定要做好前期的業(yè)務(wù)調(diào)研，以及對比不同的競品，降低設(shè)計出錯的概率。
散點圖是一個使用也非常頻繁的圖表，它通過在 XY 坐標(biāo)軸中添加圓點來表示不同對象的分布情況。
常見的散點圖就是對普通二維坐標(biāo)軸進行 “打點” 的圖表，每個點代表統(tǒng)計學(xué)中的一個 “樣本” 或數(shù)學(xué)概念中的一個 “定量”，下面我們就用樣本來稱呼每個散點。
每個樣本在散點圖中必然包含兩種以上的信息，一個是緯度值，一個是數(shù)值，這樣我們才能確定它在坐標(biāo)軸中的位置。
當(dāng)然，針對樣本并不是只可以包含兩種信息，比如表示班級成員身高體重的散點圖，我們可以再引入男女的對比，對散點圖進行色彩的區(qū)分。再者，還可以添加體脂率，用每個點的大小來表示。
散點圖是一個很直觀的樣本分布圖表，它是概率論中做回歸分析的主要工具。所以往往我們會看到散點圖內(nèi)出現(xiàn)了一個線段，那條線段叫做 “回歸線”，他是通過散點分布情況，計算出來的一條均值線段。這個線段不僅可以大致標(biāo)識數(shù)據(jù)的趨勢，同時可以用來做概率計算和預(yù)測。
回歸線包含指數(shù)、線性、多項式三種，對應(yīng)繪制出來的回歸線是曲線、直線、還是波浪線。
散點圖的圓點可以使用軟件的 Symbol 功能進行創(chuàng)建，確保后續(xù)可以統(tǒng)一修改配色和樣式，尤其是在包含多種色彩的散點圖中。
散點圖的繪制不一定要完美契合數(shù)據(jù)內(nèi)容，但是在大致的分布和數(shù)量上要和實際情況貼合。如果僅僅是隨意的進行分布、均分，那么這個圖表就會顯得非常的不嚴(yán)謹(jǐn)和隨意，比如下圖圖表。
地圖圖表，是將抽象的 XY 二維坐標(biāo)軸替換成地圖類圖形的圖表。本質(zhì)上它們也包含 XY 軸，所以一樣可以將數(shù)據(jù)內(nèi)容進行映射。
最常見的，就是地圖散點圖了。背景由實際的地圖完成，坐標(biāo)則由經(jīng)緯度體系來記錄。這是可視化設(shè)計中非常常見的中心圖表應(yīng)用類型。
同時，背景的地圖并不是只包含地理信息地圖，還可以是球場、商場、網(wǎng)頁、建筑表面等內(nèi)容。
熱力圖則是地圖和散點圖的合體，也是在二維坐標(biāo)體系中顯示樣本，只是熱力圖更注重的是這些樣本之間的對比。例如區(qū)域的降水量、臺風(fēng)風(fēng)力表現(xiàn)、網(wǎng)頁的點擊區(qū)域等等。
熱力圖本質(zhì)上也是將坐標(biāo)軸切割成了若干小塊（樣本），每個小塊有一個對應(yīng)的數(shù)值，然后通過算法繪制邊緣和不同的漸變。
它也是很少直接通過設(shè)計軟件繪制的圖表，需要借助插件導(dǎo)入數(shù)據(jù)來實現(xiàn)，我們只需要確認色彩樣式即可。
構(gòu)成圖表相對其它圖表來說是最簡單的一種，包含扇形、環(huán)形、餅圖、堆疊、矩形樹等類型。
前面看到的圖表大多是遵循我們小學(xué)就看過的 XY 軸坐標(biāo)系（笛卡爾坐標(biāo)系）建立的，但是餅圖并不需要考慮坐標(biāo)空間的問題。它是一個依靠角度來反映數(shù)據(jù)的圖表類型。
餅圖作為一種常見圖表，包含兩個大類，一般餅圖和環(huán)形圖。如果沒有一些特殊的交互或者復(fù)雜衍生類別的話，環(huán)形圖其實就是餅圖中間鏤空的版本……
餅圖繪制的主要依據(jù)是需要表現(xiàn)幾條維度，以及它們對應(yīng)的百分比值。餅圖的顯示有比較大的局限性，那就是顯示的維度數(shù)不能過多?？刂圃?2-9 條比較合理，數(shù)量過多就會導(dǎo)致圖形失去實際的使用意義。
除此以外，南丁格爾圖、旭日圖，也是餅圖的延伸，通過添加額外的維度或者子分類，對餅圖中的每個對象進行額外的示意。
餅圖作為基礎(chǔ)圖形，多數(shù)情況下也是由設(shè)計師自己完成的。但很多新手沒有找到要領(lǐng)，導(dǎo)致做出來圖形非常的別扭。我提供一個繪制的簡單的思路，那就是通過繪制不同的三角形來拼裝出一個餅圖。
這類圖形繪制的要點是確保三角形在圓心中的頂點時一致的，如果對比例的繪制有比較精確的要求，可以通過 Excel 之類的工具生成一個基礎(chǔ)圖形做背景，貼著它畫即可。
南丁格爾圖也可以沿用上面的畫法，那就是對每個維度的三角形采取不同直徑的圓做蒙版，就可以畫出不同半徑的占比區(qū)域了。
這么做的好處，是將圖形的每個維度獨立成一個單獨的矢量圖形，方便我們后續(xù)進行上色。
堆疊類圖表算是一個相對不那么嚴(yán)謹(jǐn)?shù)念悇e，因為它多數(shù)由其它基礎(chǔ)圖表發(fā)展而來。主要包括柱狀堆疊圖、面積堆疊圖、百分比堆疊圖。
之所以把它歸類到分布而不是其它大類下的圖表子項，原因是只要出現(xiàn)堆疊，就意味著這個圖表的核心目的是展示構(gòu)成內(nèi)容而不是對比或者分布。
在柱狀類堆疊圖中，通過將每個柱體切割成不同的更小柱體來呈現(xiàn)子分類的占比。面積堆疊圖，則是單純的把折線圖進行填充然后疊加的圖形。
而百分比堆疊，雖然看起來和面積堆疊和接近。但它是以最上層數(shù)據(jù)為 100% 標(biāo)準(zhǔn)，往下的每一級對象都根據(jù)頂層百分比呈現(xiàn)的分布樣式。
堆疊類圖形的設(shè)計，最難的不是圖形，而是色彩的應(yīng)用上。之所以說堆疊只要應(yīng)用就比原先圖形的作用更大，原因就是堆疊使用不同的色彩表現(xiàn)層級，對于我們的視覺吸引力遠遠大于圖形本身的輪廓。
而將豐富的色彩無縫拼接在一起，是最容易翻車的配色場景。在這種狀態(tài)下，建議大家只用臨近色來實現(xiàn)下級分類的搭配，千萬不要使用色相差異過大的色彩。
而對于面積和百分比堆疊圖，都建議在配色的過程中，直接使用帶有透明度的色彩。因為這些折線并不一定會完美上下覆蓋，當(dāng)中間出現(xiàn)交匯的時候，不至于信息被遮擋。
矩形樹圖最初是一個設(shè)計用來表示磁盤空間占用情況的圖形，通過將一塊矩形切割成不同的區(qū)域來表示不同維度的占比，以及位置。
雖然也表示占比，但它比餅圖類圖表表示的信息更豐富。第一點是位置信息和并列關(guān)系，比如下面的 M1 芯片的示意圖，就是矩陣樹圖的一種直觀體現(xiàn)，在矩形中不同位置應(yīng)用的不同芯片以及其占用的具體面積。
當(dāng)然上方是最理想的情況，通常矩陣樹圖是為了對一些更抽象的概念實現(xiàn)矩陣化的排列。而這個排列中，還有個非常關(guān)鍵的要素是其中的 ”樹“ 字。
因為矩陣中的每個切割出來的矩形，都可以作為一個獨立矩形進行下一級的分割，實現(xiàn)一個類樹狀圖結(jié)構(gòu)的信息收納。所以，完整的矩陣樹圖，是可以支持縮放或點擊進入下一層級的。
而使用矩陣樹圖不使用樹狀圖，原因也在于我們需要表現(xiàn)它的占比，而不是單純的結(jié)構(gòu)。所以如果只是簡單表現(xiàn)層級結(jié)構(gòu)，如企業(yè)組織架構(gòu)、知識點拆分之類的，要用樹狀圖而不能使用矩陣樹圖。
在這類圖表在項目中基本不會獨立開發(fā)出來，因為其復(fù)雜度基本都會使用開源代碼。
設(shè)計師的主要工作，就是根據(jù)對應(yīng)開源圖表，指定配色的方案，切割的邊緣大小，以及文字的顯示規(guī)范即可。
聯(lián)系圖表，是用來展示維度之間聯(lián)系的圖表類型，包含?；?、關(guān)系、和弦、韋恩圖、依賴關(guān)系圖等。
聯(lián)系類圖表中，多數(shù)是非常復(fù)雜的圖形，已經(jīng)脫離直接手工繪制的范疇，所以我們只簡單介紹其中幾個有代表性的圖表且給出設(shè)計建議了。
?；鶊D是一個用來描述某維度值 ”流動“ 到其它維度走勢的流動圖表。
這是一個比較復(fù)雜的概念，比如下面的概念，不同國家人口的流動，人還是原來那些人（數(shù)值），但他們以不同的數(shù)量比例，移動到不同的國家（維度）。
桑基圖的應(yīng)用，關(guān)鍵在對數(shù)值遷移流向的關(guān)注上，它適合應(yīng)用的場景在監(jiān)控產(chǎn)品用戶的跳轉(zhuǎn)去向，貨物的外貿(mào)出口狀況，或類似新冠患者流動城區(qū)、地點的表示。
?；鶊D的數(shù)值總量通常是不變的，會包含起點和終點的維度，而維度的長短即代表其包含的數(shù)值總量（權(quán)重）。
它有非常多的變種，只有借助特定的圖表生成工具，才能繪制出曲率、比例精準(zhǔn)的流線。
關(guān)系圖是大家比較不會陌生的圖表類型，它在各類工具性軟件、網(wǎng)站中都有應(yīng)用。比如天眼查股東關(guān)系圖、Wolai 頁面關(guān)系圖等。
關(guān)系圖中包含了大量的節(jié)點，節(jié)點之間還有對應(yīng)的關(guān)系，同構(gòu)線段進行鏈接。常見的關(guān)系圖有兩種類型，一種是力導(dǎo)圖，一種是弧長鏈接圖。
力導(dǎo)圖這名字也很難理解，源于力學(xué)中粒子存在某種互斥又具有引力的規(guī)律，粒子在兩種力的作用下從初期的隨機性會不斷位移趨于平衡有序（讀書多的好處？）。
力導(dǎo)圖通常有一個起點，然后去關(guān)聯(lián)后續(xù)的其它節(jié)點，如果節(jié)點之間還有關(guān)聯(lián)，它也可以對這些節(jié)點的關(guān)聯(lián)做出連接。它不僅表現(xiàn)一對多的關(guān)系，也表現(xiàn)多對多的關(guān)系，甚至在極其復(fù)雜的關(guān)系網(wǎng)中可以呈現(xiàn)成一定的強關(guān)聯(lián) ”聚類“ 信息。
而弧長鏈接圖，則是通過弧線對節(jié)點進行關(guān)聯(lián)的圖表，它既可以是環(huán)形，也可以是水平橫線的展示。
和弦圖是環(huán)形關(guān)系圖和?；鶊D結(jié)合的圖表，它表示結(jié)構(gòu)之間的依賴關(guān)系和強度，鏈接的線段不再是粗細統(tǒng)一的而是具有粗細比例的標(biāo)識，且維度之間的長度也有表示。
這類圖表常用于社會學(xué)、生物學(xué)等學(xué)科的研究統(tǒng)計結(jié)果繪制上。如果單純?yōu)g覽，看上去非常復(fù)雜，所以正確的使用形式是可以進行指定維度的展示和隱藏的。
韋恩圖，它是所有學(xué) UI、UX 設(shè)計的老朋友了，一個用圖形層疊相交來表示它們關(guān)系的圖形。RGB、CMYK 的色彩介紹里韋恩圖的身影必不可少。
韋恩圖的使用相比起來沒有那么嚴(yán)格的數(shù)學(xué)運算，它只是一種關(guān)系表現(xiàn)的方法，可以對各種無法量化的對象進行關(guān)系的陳述。比如，UX 設(shè)計師應(yīng)該具備的知識點……
下面是超人的電話亭團隊持續(xù)整理收集到的可視化組件庫工具網(wǎng)站，以供參考：
作者：酸梅干超人 來源：站酷
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
目錄：
一、設(shè)計前的思考
1、設(shè)計思維模式
2、設(shè)計理念的確立
3、案例分析（9點）
二、設(shè)計時需注意
案例分析（12點）
一、設(shè)計前的思考
首先需要思考的問題：設(shè)計思維模式、設(shè)計理念的確立
1、設(shè)計思維模式：
設(shè)計思維是一套在設(shè)計前需要思考的結(jié)構(gòu)化的流程，用來解決以人為本的問題。其目的是把在設(shè)計前所遇到的與設(shè)計相關(guān)的問題結(jié)構(gòu)化，化繁為簡，形成一套流程，從而進行有序的思考。
設(shè)計思維是一種思維模式和認知方式，其最大的特點是已知需要解決問題的結(jié)果，如何在已知最終結(jié)果的情況下更好更高效的解決問題是其核心目標(biāo)。
思維方式的確立，可以有效的為設(shè)計做好前期準(zhǔn)備，提高設(shè)計的效率，更準(zhǔn)確的為“以人為本”出發(fā)而服務(wù)。
作者 Timo Kuilder
2、設(shè)計理念：
設(shè)計理念是在設(shè)計構(gòu)思前所確立的主導(dǎo)思想，它不僅是設(shè)計的精髓，也賦予作品文化內(nèi)涵和風(fēng)格特點。
好的設(shè)計理念很重要，可以使你的設(shè)計擁有屬于自己的獨特風(fēng)格。
設(shè)計理念必須以人為本，針對用戶年齡、職業(yè)、愛好等特點，進行整合，根據(jù)用戶主觀方面的個人喜好，從而進行設(shè)計。
作者 Timo Kuilder
3、案例分析：
1、專注：確定產(chǎn)品的主要功能，功能的明確可以幫助用戶最高效的完成任務(wù)
案例1：百度網(wǎng)盤
百度網(wǎng)盤是一款云存儲服務(wù)產(chǎn)品，用戶將可以輕松將自己的文件上傳到網(wǎng)盤上，并可跨終端隨時隨地查看和分享。
案例2：有道云筆記
有道云筆記是一款專注辦公提效的筆記軟件，支持多端同步，用戶可以隨時隨地對線上資料進行編輯、分享以及協(xié)同。
2、特色：每款產(chǎn)品都有屬于自己的特色，區(qū)別于同行產(chǎn)品的不同之處，結(jié)合產(chǎn)品調(diào)性設(shè)計，不要盲目跟風(fēng)；它可以是功能、體驗、或者是視覺
案例：每日故宮
每日故宮是一款以日歷的形式推出故宮藏品的應(yīng)用，“每天一件故宮藏品”，“讓觀眾隨時隨地看到故宮藏品”。其主要特色功能就是以日歷的形式展示內(nèi)容，在視覺和圖標(biāo)上也有自己的特色。
3、情感：在設(shè)計的過程中，可以加入情感化設(shè)計，使用戶將情感融入產(chǎn)品中，關(guān)系更緊密
案例：淘票票
有趣的文案結(jié)合IP可以快速的將用戶代入產(chǎn)品中，增強與用戶之間的親和力，有種身臨其境的感覺
4、互動：動效的運用可以給用戶帶來不一樣的感官視覺，即使只是一個小小的按鈕
案例：最右底部Tab欄切換狀態(tài)，其互動可以增強用戶與產(chǎn)品之間的互動
5、調(diào)研：調(diào)研可以了解產(chǎn)品所在行業(yè)的情況、市場需求、競爭力、同類型產(chǎn)品的優(yōu)劣勢等，從而更好的設(shè)計產(chǎn)品
調(diào)研方法：按調(diào)研途徑分為文案調(diào)研、在線訪問、電話訪問和實地調(diào)研
調(diào)研工具：問卷星、問卷網(wǎng)等
分析工具：Origin是一款常用的數(shù)據(jù)分析軟件，操作簡單，可視化直觀；SPSS是一款專業(yè)分析工具，其功能包括數(shù)據(jù)管理、統(tǒng)計分析等
6、用戶：研究用戶特征、細分用戶，站在用戶角度思考，了解用戶想要什么樣的產(chǎn)品
用戶研究：
是一種理解用戶，將他們的目標(biāo)、需求與產(chǎn)品宗旨相匹配的理想方法，能夠幫助定義產(chǎn)品的目標(biāo)用戶群
用戶研究重點工作在于研究用戶的痛點，包括前期用戶調(diào)查、情景實驗等
作者 Timo Kuilder
7、場景：需要考慮用戶使用場景是怎么樣的，不同場景功能需求不同，可以用故事板的形式展示用戶場景
使用場景：
包括時間、空間、設(shè)備支持、社交及用戶情緒等，進行應(yīng)用場景的判斷和描述的時候，需要考慮全面，不同的場景下存在著用戶不同的需求。
故事板：
故事板也叫分鏡腳本，雖然更多用在電影、動畫、電視劇、廣告等影像媒體的創(chuàng)作前期
故事板工具：Boords
Boords界面簡約美觀、操作簡單，滿足制作故事板的基本功能
8、數(shù)據(jù)：以數(shù)據(jù)為依據(jù)從而進行設(shè)計，不做沒數(shù)據(jù)支撐且無意義的設(shè)計
數(shù)據(jù)統(tǒng)計：百度統(tǒng)計、百度指數(shù)、阿里指數(shù)等
百度統(tǒng)計：全球最大的中文網(wǎng)站流量分析平臺,幫助企業(yè)收集網(wǎng)站訪問數(shù)據(jù)
百度指數(shù)：
百度指數(shù)是以百度海量網(wǎng)民行為數(shù)據(jù)為基礎(chǔ)的數(shù)據(jù)分享平臺。在這里,你可以研究關(guān)鍵詞搜索趨勢、洞察網(wǎng)民興趣和需求、監(jiān)測輿情動向、定位受眾特征
阿里指數(shù)：
是定位于“觀市場”的數(shù)據(jù)分析平臺，旨在為中小企業(yè)用戶、業(yè)界媒體、市場研究人員,了解市場行情、查看熱門行業(yè)、分析用戶群體、研究產(chǎn)業(yè)基地等
作者 Timo Kuilder
9、少即是多：突出用戶所需的主要功能即可，其他功能可弱化或者直接去掉
少即是多：
現(xiàn)代主義設(shè)計建筑大師——米斯·凡德羅提出
在設(shè)計中：
少即是多就是明確目標(biāo)，專注地圍繞用戶目標(biāo)進行設(shè)計，將產(chǎn)品打造得簡單易用，同時又能夠解決用戶的需求
案例：留白
留白是一款提供多種圖文排版樣式，可以將文字、署名和日期安置在圖片以外的留白區(qū)域，讓你記錄的每一個精彩畫面都變成有故事的留白卡片
二、設(shè)計時需思考
設(shè)計時需要思考的問題：
1、簡約：簡潔的界面可以減少用戶發(fā)生錯誤操作，減少認知成本，便于用戶了解和使用
案例：字里行間
字里行間是一款文學(xué)性非常清新的文字閱讀與創(chuàng)作軟件，可以讓用戶靜下心來閱讀與創(chuàng)作，整體設(shè)計簡潔，界面結(jié)構(gòu)清晰，減少了用戶的學(xué)習(xí)成本。
2、易用：容易上手的產(chǎn)品才是成功的產(chǎn)品，從用戶思維入手，功能一目了然，操作更方便
案例：句讀
這是一款不錯的掌上語句社區(qū)，每天可以輕松的看到豐富的優(yōu)質(zhì)語句，解決了用戶想要一款可以體驗精彩文學(xué)內(nèi)容產(chǎn)品的APP，功能按鈕明確，操作快捷，符合用戶需求。
3、視覺：產(chǎn)品是否好用為第一重要性，視覺也不可缺少，強烈的視覺可以抓住用戶的眼球，給用戶留下印象，讓用戶記住你的產(chǎn)品
案例1：CCtalk
這是一款致力于為學(xué)習(xí)愛好者打造的在線互動學(xué)習(xí)平臺，疊加圖標(biāo)的運用在界面上特別突出，整體視覺給人強烈的感覺。
案例2：飛豬
這是一款提供機票、酒店、旅游線路等商品的綜合性旅游出行網(wǎng)絡(luò)交易服務(wù)平臺，金剛區(qū)的圖標(biāo)設(shè)計得很精致，給人印象深刻，吸引用戶點擊。
4、色彩：品牌色和輔助色的確立，確定適合產(chǎn)品的品牌色，品牌色可以加強用戶對產(chǎn)品的認知
品牌色：品牌色可以決定產(chǎn)品的基本調(diào)性，讓用戶在眾多產(chǎn)品中一眼就看到你的產(chǎn)品，容易被記住和識別。
案例：網(wǎng)易云音樂、BOSS直聘
網(wǎng)易云音樂、BOSS直聘的品牌配色都很簡單，BOSS直聘的配色只有綠色和白色，配色單一卻顯得突出。品牌色運用到界面可以加強用戶對產(chǎn)品的認知。
5、規(guī)范：規(guī)范設(shè)計的統(tǒng)一，在視覺上起到整齊的效果，保證產(chǎn)品的統(tǒng)一性
案例：QQ音樂圓角的設(shè)計，圓角的統(tǒng)一和運用使頁面看上去圓潤有親和力，適合聽歌的時候那種放松的心情
6、習(xí)慣：遵循用戶的操作習(xí)慣，設(shè)計是為了讓用戶更好的體驗，而不是讓用戶用的不舒服
案例1：淘寶
案例2：京東
搜索欄和分類：搜索欄和分類都是電商類平臺最重要功能，兩款產(chǎn)品都遵循用戶的操作習(xí)慣，放置了右上側(cè)，是因為用戶已經(jīng)對這些功能的位置形成記憶
7、安全：在設(shè)計中要考慮的重要因素就是安全性，以及操作和選擇都是可逆的，可以減少用戶的懷疑和心理疑惑
案例1：微信聊天撤回和重新編輯功能
案例2：智行火車票退票功能
案例3：淘寶退款、退貨功能
8、人性化：用戶可以根據(jù)自己的操作習(xí)慣、所需功能或者愛好制定界面
案例1：UC頭條的頻道選擇、形象選擇
案例2：酷狗新版選擇主題皮膚
兩款產(chǎn)品都很人性化，用戶可以根據(jù)自己喜好選擇關(guān)注的內(nèi)容和風(fēng)格
9、反饋：用戶操作出現(xiàn)異常的時候，及時給予用戶反饋信息，并出現(xiàn)正確引導(dǎo)
案例1：QQ閱讀的書架還沒有任何書本的時候
案例2：虎課網(wǎng)在沒有登錄賬戶的時候出現(xiàn)的反饋界面
案例3：Soul網(wǎng)絡(luò)異常
案例4：喜馬拉雅未成年模式
10、警告框：在緊急中斷、需要確認和通知用戶的情況下使用，友好的文案，可減少用戶心理的不適
案例1：微博在無WiFi網(wǎng)絡(luò)的情況下播放視頻
案例2：騰訊課堂網(wǎng)絡(luò)異常
11、加載：分為靜態(tài)和動態(tài)兩種形式，動態(tài)加載可以吸引用戶的注意力，減少用戶等待的焦慮和無聊
案例1：嗶哩嗶哩首頁和頁面加載狀態(tài)，首頁加載是動態(tài)，而頁面加載的形式是靜態(tài)
案例2：虎牙直播動態(tài)加載狀態(tài)
12、引導(dǎo)：引導(dǎo)功能，便于用戶了解功能和操作界面，產(chǎn)品更新后也可以使用引導(dǎo)來告訴用戶
案例1：芒果TV功能更新指引
案例2：酷狗功能更新指引
案例3：每日故宮功能解說和功能更新引導(dǎo)
小結(jié)
希望通過這次的UI設(shè)計思考總結(jié)，讓自己變得更好更優(yōu)秀，總結(jié)是對自我的成長和監(jiān)督，不僅可以提高工作的效率，還可以加強對產(chǎn)品的思考能力。結(jié)合UI設(shè)計思考過程，體驗不同的產(chǎn)品，感受不同的設(shè)計，注意細節(jié)、認真分析
作者：黑澤雙熾 來源：站酷
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
Neumorphism / soft ui（新擬態(tài)也有人叫同化、軟UI）是什么？在前一段時間，大家即使沒有看過，但是應(yīng)該也聽到過一些關(guān)于這種新風(fēng)格的介紹，或者是在某某趨勢中有類似作品的出現(xiàn)，不太了解或者一看而過。簡單的介紹一下，標(biāo)題并非判斷結(jié)果，而是希望同大家一起探尋一起交流，一起討論這種風(fēng)格是否會是接下來的新趨勢...
起因是源于2019年11月5日，來自烏克蘭的設(shè)計師 Alexander Plyuto 在追波和ins上發(fā)布了下圖的一張作品，作者說明信息：
“讓我們想象一下，如果在移動界面設(shè)計中，投影的形式發(fā)展的更好的話，那將來的界面將會是什么樣的，這是我的愿景?！?/span>
Dribbble-Alexander Plyuto的作品
目前作品在追波平臺收獲贊量4000+，瀏覽量23W+，一路飆升至追波2019年pop排行第一熱門的作品，同時在ins上的傳播也是異常的火爆，獲得很多設(shè)計的喜歡，評論頓時炸開了鍋，其中有設(shè)計師稱呼這種風(fēng)格為“Neumorphism 新擬態(tài)”或者“Soft UI 軟UI”，于是這種叫法慢慢傳開，可能并不準(zhǔn)確。
為什么這個風(fēng)格會火？你怎么認為？
先拋開作品發(fā)布的平臺帶來的熱度，很多設(shè)計師認為這本身也是一種潛在的趨勢，隨處可見的C4D的輕質(zhì)感在不同領(lǐng)域和不同方向的使用，IOS13更新后的部分拋棄了純扁平，重拾了3D的感覺。它會火的主要還是在視覺上，這種風(fēng)格剛一出現(xiàn)，它是非常新穎的，在長達半年的幾乎高度一致的風(fēng)格下，它是新的嘗試，讓人憧憬的方向。
能有不斷創(chuàng)新的設(shè)計師帶給我們不同的設(shè)計風(fēng)格，首先需要感謝，其次再去以個人的視角看待它。那么多風(fēng)格的作品，那么擬態(tài)就變成趨勢了？我們帶著這個問題，一起繼續(xù)探討（我們先把代碼實現(xiàn)等話題放在文章最后討論）。
帶著疑問，仔細看一下上面的作品，第一眼看有點像早期的寫實風(fēng)格（如下圖），接近真實感，有強烈的質(zhì)感和空間感......但是不同的是也帶了一點當(dāng)前依舊流行的多彩模糊陰影的感覺。我們試著去找一下這種風(fēng)格的特點有哪些......
IOS 13 圖片編輯界面
by Mike | Creative MintsMike
通過觀察，我們不難發(fā)現(xiàn)這種風(fēng)格的一些基本特點：
元素并不浮動
元素色彩相對單一，與背景高度統(tǒng)一
左上角亮色投影，右下角深色投影
多以卡片樣式出現(xiàn)
更加適合大圓角圖形
...
克服恐懼最好的辦法就是 —— 臨摹它！
這種表現(xiàn)方式，其實并不難，去閱讀了幾乎全部相關(guān)的資料，也去查閱了作者相關(guān)的介紹和說明，試著去了解一下這種風(fēng)格。首先我們先以按鈕為例，請看下圖：
這三個圖標(biāo)，你更愿意點哪一個？
這是我們比較常見的三種也是相對比較流行的表現(xiàn)方式，我們分別從常規(guī)的頂部視角和側(cè)面視角去觀察它們：
扁平的：首先在層級上，扁平的通常給我們的感知就是與背景是同為一個平面，視覺層級也沒有特別強烈的前后關(guān)系（不考慮圖標(biāo)本身），對背景沒有太大的依賴，如果本身背景與畫面整體背景有區(qū)分，色彩就劃分了層級。
投影的：帶投影的給我們的感知就是漂浮起來的，單獨看它，它漂浮在背景之上，與扁平并列看，它還要高于扁平的，通常大家為了突出某些內(nèi)容，某個模塊會去使用這種樣式。投影的使用對背景的依賴幾乎可以忽略，因為投影除了形狀可以調(diào)整，包括色彩、大小等都可以調(diào)整，且它是無邊界的漂浮著，即你可以隨意定義它的高度。
新擬態(tài)：頂面看，它似乎是介于扁平與投影之間，側(cè)面看，同樣也是漂浮的，但是它有厚度卻又沒有離開平面，它的范圍相對于投影的無邊界，似乎還有一些模糊的界定。對背景的有一定的依賴，需要幾乎相同的色值去實現(xiàn)。
回到上面的問題，這三個你會更傾向于點哪個？當(dāng)然上面的案例沒有示意在不同色彩下的情況，也有認為拋開體感上，前面兩張白色背景的已經(jīng)高于新擬態(tài)，因為它與背景的高度融合，在對比度上已經(jīng)弱了很多。
可能這時候有人會有疑惑，單獨看這一個按鈕不是很有對比性，尤其是在視覺上體現(xiàn)的也不明顯。所以我們簡單繪制了一些卡片試試在作為信息承載的時候，這種風(fēng)格的效果如何，同時也去將不同的樣式融合，看看脫離背景的約束，局部是否可用與協(xié)調(diào)。
我們可以從上圖看出，當(dāng)這種風(fēng)格用做內(nèi)容承載時候，不管是文字圖片按鈕或者圖標(biāo)，僅僅在用做卡片的時候，效果還是蠻好的，它同前面兩種風(fēng)格一樣，仍然可以清晰的區(qū)別內(nèi)容層次、間距等，但是親測如果大面積使用，頁面會變的更加復(fù)雜，整體的層級較難清晰劃分，那么局部使用效果如何？
局部使用在某種特定的場景是可以用的，如下圖的計算器界面。在的卡片、按鈕、進度條等樣式下也能得以很好的展現(xiàn)。但是它比起投影卡片，除了視覺上，點擊感、移動效果......差了很多。
看的這里，大家應(yīng)該會有一個自我評定標(biāo)準(zhǔn)，這應(yīng)該（目前）不會是一個大趨勢，至少明年不會，雖然這種風(fēng)格很受人喜歡，但是這種風(fēng)格還存在很多弊端：
首先，除了卡片等樣式，它不能有效的提高信息的傳達，頁面內(nèi)容密集，過多使用容易導(dǎo)致混亂，如果靠投影的大小或深淺來區(qū)分，即使達到效果，畫面會變得復(fù)雜沉重。
按鈕的凸起和凹陷的狀態(tài)，絕大部分需要通過投影來識別，這是比較困難也是比較嚴(yán)重的問題，這樣是幾乎很難區(qū)分點擊的前后狀態(tài)的。
背景色的依賴太大，色彩對比度較低，相對于白卡投影等形式的應(yīng)用，目前的樣式不能讓內(nèi)容與背景產(chǎn)生良好的對比，不利于信息傳遞。
實現(xiàn)問題，其實現(xiàn)實難度到還真不難，話筒交給你們......
所以這種風(fēng)格就涼了嗎？
這種風(fēng)格其實在某些局部地方還是可以使用的，小面積的和其他風(fēng)格進行混合使用。無數(shù)的可能性需要大家去做更多的嘗試和創(chuàng)新。通過對趨勢的了解，結(jié)合我們認知范圍內(nèi)正確的組合和排列，說不定會創(chuàng)造一個意想不到的“船新版本”。
我們只有在這樣的思考和創(chuàng)造的過程中，獲得更多的靈感。不能不考慮實現(xiàn)問題，但是我們更需要順應(yīng)趨勢，不管這個趨勢能火多久，在將來能否得到應(yīng)用，只有不斷的探索更多更新的東西，設(shè)計才會變得更加美好。動起手來吧~
下面還是簡單的分享一下實現(xiàn)的方法，并分享一下相關(guān)的源文件與作者的源文件供大家學(xué)習(xí)交流哦！
凸起部分：
第一步：確定配色，最好是淺色或者是深色，選取高光色和投影色（非同色系的不同組合大家可以多去嘗試）
第二部：創(chuàng)建對象，更加適合圓角的對象，可以是純色，或者輕微的漸變效果也更好
第三部：添加投影，投最好是X和Y軸的位移是一致的，至于角度，大家自由發(fā)揮吧，這里建議亮色投影和深色投影分別復(fù)制一份制作，如果是在同一圖層上做，交界處效果不理想，更模糊。
凹陷部分：
步驟幾乎一致，投影換成內(nèi)陰影做對角線的深淺添加可以。
這里說一下，凹陷部分完全按照這種風(fēng)格去實現(xiàn)，顯示效果其實不好，作者包括其他設(shè)計師都在這里做了優(yōu)化，優(yōu)化后的實現(xiàn)方式上已經(jīng)不屬于這個風(fēng)格了，因為最后的實現(xiàn)效果，側(cè)面觀察它已經(jīng)是脫離背景的，如果融合背景也可以，只是邊界會更加模糊，所以仔細觀察作品，細心的同學(xué)應(yīng)該已經(jīng)發(fā)現(xiàn)是如何處理的：其實就是添加一個邊框，再讓投影充當(dāng)淺色高光。
作者：Frannnk 來源：站酷
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
通過用各類對比繼續(xù)為大家?guī)硪曈X“熱”知識~目錄如下
海報視覺如何做的有創(chuàng)意？有哪些方法呢？
比如從構(gòu)圖、擬物、光影、嫁接、對比、或者反差？等等等等
每一種又都可以拆分成很多細類。
比如對比在視覺海報中的運用，又有明暗對比、顏色對比、大小對比、虛實對比等等、太多了！
首先我們來分析一下大小對比是如何應(yīng)用的。
我們先看下這張圖：
兩個元素， 如果一樣大，平鋪在畫面中，就會顯得普普通通的，沒有任何亮點。
如果我們把其中一個放大，另一個縮小，再來看：
畫面是不是有特點了很多，并且有了節(jié)奏感， 就連文案排版也有更多的方式。
所以對比就是讓畫面的兩個組成部分/元素，以夸張的手法，布局構(gòu)圖，以讓畫面產(chǎn)生強烈的反差。以提升畫面沖擊力，畫面縱深，內(nèi)容豐富層度。是非常有效提升畫面品質(zhì)的方法之一。
那大小對比如何玩的精通，玩得高級呢？
我們一起來看一下：
1.2.1 全身與半身對比
這種半身人物和小人物的對比，或者頭部表情眼神與小人物的對比主要可以展示人物細節(jié)，后面的人物放大表情傳遞情緒，前面的人物展示全身，傳遞狀態(tài)，可以很好地傳遞內(nèi)容，常常用在各類視覺海報中。
(下面右側(cè)的圖是江湖哥2017年做的圖，分析兩次了，哈哈，備注下）：
這種對比有強烈的大小反差，并且可以很大程度地拉伸畫面縱深，表現(xiàn)出很強的空間感！
并且還有一個細節(jié)：這兩張都是三角形構(gòu)圖，非常穩(wěn)定。
所以我們在設(shè)計的時候要也要注意畫面的構(gòu)圖方式，夸張對比同時，要保證畫面的穩(wěn)定和飽滿！
1.2.3 全身與全身對比
全身的人物對比很小的人物，讓畫面有更多的空間可以利用， 可以留白想象，也可以打造場景氛圍，展示更多場景氛圍。
1.3.1 小場景與大人物
夸張化的對比，讓本該小巧的人物矗立在場景里，很容易就營造除了一種巍峨磅礴的視覺感受。
一般需要很高的設(shè)計成本，工時不小。簡單點的做法我們可以直接在人物下面拼接一些小場景，比如這樣：
一些日常小需求中，沒有那么多的時間去打磨細節(jié)，就可以這樣做，既能保證按時完成需求，也能有一定的創(chuàng)意性。
1.3.2 小人物與大場景對比
這種方法也非常具有創(chuàng)意性，把一些很小的物體放大，人物縮小， 反差表現(xiàn)兩個主體的大小對比。往往也能有出人意料的效果，需要更多的靈感和想法。
創(chuàng)意本身就是打破常規(guī)，把不可能變成可能，達到出人意料的效果就是創(chuàng)意。大小對比在畫面中的各種玩法就是可以很好達成這種目的的方法之一，大家可以多去嘗試，和練習(xí)，單這一種方法用好了就很牛逼了。
光影是在平面視覺里常用的一種技法方式，再說光影的創(chuàng)意之前，我們先說一下光影的作用。讓大家對光有所了解。
我們?yōu)榱酥庇^一些，直接用幾個圖片說明。
現(xiàn)在這張圖，這是一個瓶子的圖形：
我們給瓶子加入光影：
瓶子就變得立體了！
我們給背景加入光影：
空間變得有縱深了，畫面層次也豐富了起來！
所以光在畫面中最基礎(chǔ)的有兩個作用：
⑴讓物體變得立體，更加真實！
⑵增加空間縱深，豐富畫面層次！
那我們應(yīng)該如何利用光影，去做更有創(chuàng)意性的設(shè)計呢？
光影、光影，先有光后有影。那我們就先來說說主要表現(xiàn)光的幾個玩法：
2.2.1 逆光
逆光就是主體在正前方，光源與主體重疊的一種使用方式，可以說是我們最常用的光影塑造方法之一了：
它的特點是光源與主體重合，形成很強的對比，在畫面可以可以非常好地聚焦視線，強化主體。
2.2.2 側(cè)光
側(cè)光是光從主體側(cè)面打過來的光，一般不會太強：
主要是起到一個豐富畫面層次，營造氛圍的作用。
2.2.3 頂光
從主體頂部打下來的光：
這種光，可以有效引導(dǎo)視覺，把需要的部分亮起，不需要的部分暗下去，由上至下，吸引人的視線范圍和順序。
2.2.4 聚光
從前方照射過來的燈光：
聚焦視線，不要的地方全部暗下去，是一種最能收攏視線的打光方式了。有些細節(jié)比較豐富的聚光畫面，暗部也會保留一定的細節(jié)，不會是一個純黑色。
2.2.5 造型
給光賦予一個造型，可以達到一種形式創(chuàng)意上的突破，
比如這種：
把光塑造成一個人物的造型，下面放置對應(yīng)的人物錘喪的狀態(tài)，形成很強的人物情緒反差，可以說是非常有創(chuàng)意了。
還可以把光塑造成物體，比如這種：
把偷過來的光塑造成與主體相關(guān)的某個物品造型，中間放置一個小的人物，同樣也是一種很棒的創(chuàng)意方式。
2.2.6 分割
除了打光方向，造型之外，其實還可以用光來風(fēng)格畫面，也可以起到一些非常亮眼的視覺效果，比如這樣：
以上就是光的玩法了，可以看到，光的玩法多種多樣，利用好了可以讓畫面非常具有創(chuàng)意性。
說完了光，我們來接著說說影子的玩法都有哪些呢？
2.3.1 投射
投射相交來說是比較常規(guī)的一種處理方式了：
用投影的方式加入到畫面中，可以增加畫面層次，渲染氛圍，讓畫面更有深度。
2.3.2 造型
影子也是可以改變造型的：
本來是應(yīng)該與人物動作一致的影子，被改變造型與人物產(chǎn)生互動或?qū)Ρ?，映射出了非常強的故事性，和?nèi)容深度，非常具有創(chuàng)意性了。
在一些插畫或者游戲視覺中同樣也可以應(yīng)用起來：
內(nèi)容深度和想象空間直接拉滿！
2.3.3 剪影
配合逆光的形式，將主體以剪影的形式表現(xiàn)出來：
剪影的表現(xiàn)形式，為了凸顯剪影，背景上都會有一個逆光源存在，并且輪廓要清晰，在素材上刻畫一些輪廓光源以讓人物變得立體，可以營造出很棒的神秘感，常常應(yīng)用在神秘嘉賓、新品發(fā)售、新角色發(fā)布等活動中。
應(yīng)用在一些游戲中，強烈的明暗對比配合富有氣勢的人物造型，也可以打造出一些很有視覺沖擊力的海報視覺！
光與影的玩法多種多樣，既可以讓畫面變得立體，又可以提高空間縱深。打光方式、造型、剪影、分割等等用法，可以讓我們的視覺變得不太平淡單調(diào)，讓畫面擁有無限想象力的創(chuàng)意方式。
陣營對比的特點是5:5分畫面，以對比色鋪墊畫面，形成強烈的視覺對比，和陣營感。常用于表現(xiàn)兩個不同的陣營，或者正反派的視覺表現(xiàn)中。
除了影視海報、游戲，競技類體育類也常常使用這種對比方法：
主要表現(xiàn)：對抗、競爭、陣營
狀態(tài)對比常用于表現(xiàn)同一個人或主體物的多種狀態(tài)，比如人物的正常狀態(tài)和特殊狀態(tài)對比。通過一些技法讓兩種狀態(tài)和諧地拼接到一起，是讓單薄畫面豐富起層次和內(nèi)容的一種有效方法。
比如用畫面拼接的方式：
或者是同一主體，把兩種狀態(tài)表現(xiàn)到一起的方式：
主要表現(xiàn)：人或物的的兩種不同的狀態(tài)，冰對火、明對暗、正常對黑化等等。
讓兩個不同的時空聯(lián)系到一起，形成時間地點上的反差對比。
3.3.1 兩個不同空間的對比
由同一個元素貫穿兩個不同空間，提供畫面的延續(xù)性，表現(xiàn)出打破/穿越空間的意境，非常具有沖擊力。
3.3.2 兩個不同時段的對比
同一人物不同時期通過倒影等巧妙的表現(xiàn)方式，與主體形成時間上的對比。具有延續(xù)時間長河的感覺，為觀者提供非常大的想象空間，是一種很有創(chuàng)意性的的方法。
主要表現(xiàn)：空間穿越、時間變化的對比。
這種創(chuàng)意方式更多是傳遞人物的情緒，安靜的狀態(tài)
對比憤怒的狀態(tài)，快樂的狀態(tài)對比悲傷的狀態(tài)，
也可以表現(xiàn)人物的兩面性，正常狀態(tài)和陰暗面等等:
會讓觀者感受到強烈的情緒傳遞，視覺表現(xiàn)上反而不會那么注重。
主要表現(xiàn)：重視情緒的傳遞
此虛實非彼虛實。
和我們常說的虛實對比不同，這里指的是虛幻和真實的對比，比如：
用線條或者影子打造一些和實體區(qū)別開的虛構(gòu)元素，和實體的元素形成對比，會有一種很虛幻浪漫文藝的感覺，可以用于表現(xiàn)一些幻想，不切實際的愛戀類似的主題中，能達到很少見的一些視覺效果。情感和創(chuàng)意都能得到很充分的傳遞。
作者：菜心工作室 來源：站酷
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
從視覺空間、字體性格、顏色情緒三個大方面來談一下我對視覺知識的部分理解！目錄如下
空間感：空間感( sense of space)是指藝術(shù)形象通過一定手法引起的類似現(xiàn)實空間的審美感受。藝術(shù)家通過特定的瞬間造型和空間深度的追求，使人聯(lián)想到其活動、生活的環(huán)境空間。在繪畫、攝攝影藝術(shù)中，形象存在于二維平面中，但通過構(gòu)圖、透視、線條走向、光影和色彩處理，使人感受到空間的整體性、立體性。
而在我理解總結(jié)，空間感其實就是運用各種手法，打造出畫面的空間縱深感，讓二維的畫面變成三維，從而提升畫面的品質(zhì)、細節(jié)、沖擊力。
我們以人物海報為例對比幾張圖，直觀感受一下：
無空間感：
有空間感：
我們直觀的可以看到，都是人物海報，下面的兩張明顯更有品質(zhì)感。有空間感的圖，畫面會更高級。
那是因為空間感會讓你的畫面更有層次，更靈動和富有場景感。這就是空間感的有點。
空間感，其實就是打造畫面縱深，讓元素之間形成前后關(guān)系，那有哪些方法來打造畫面縱深呢？我們總結(jié)了5個方法來分享給大家：
1.3.1 構(gòu)圖
富有極強透視線的構(gòu)圖能很直觀地表現(xiàn)出空間感。
比如
這類
這類擁有很強透視的構(gòu)圖，不用做別的，光構(gòu)圖就能體現(xiàn)出很強的空間感了。
實際運用中，我們還可以利用標(biāo)題文案排列出這種透視構(gòu)圖來打造空間感：
1.3.2 虛實
虛實分為：
1.輪廓虛實
2.顏色虛實
輪廓虛實：兩個相同的元素，輪廓模糊的在空間上會感覺處于輪廓實的元素后方。
這是兩個元素，放到一起就會感覺上是在同一個平面上的。沒有虛實關(guān)系。
如果把其中一個圓的輪廓虛化：
是不是就會感覺出右邊的會在左邊的前面，拉出了前后的空間感。這就是我們的輪廓虛實了。
顏色虛實：越貼近背景色的顏色，在空間上會感覺處于后方。
還是這兩個元素，如果把其中的一個顏色調(diào)成和背景貼近：
兩相比較，顏色更實的飛碟，會處于顏色較淺的飛碟前面。
1.3.3 大小
越大元素會感覺越近，越小的元素感覺越遠。
在實際操作中我們一般可以利用不同元素來制作這個效果。
比如這是一堆元素，如果大小都差不多，就會感覺是平鋪在一起的，沒有空間關(guān)系。
如果調(diào)整它們的大小， 重新擺放，通過近大遠小的原理，就可以很輕易地打造出元素之間的前后關(guān)系，從而營造出空間感了。
大小對比空間再其他畫面中的應(yīng)用：
1.3.4 明暗對比
除了虛實、大小之外，明暗也能對比出前后關(guān)系，從而營造空間感。
通過紋理層次的明暗對比，一明一暗的對比，也能拉出前后關(guān)系。從而營造空間感。
1.3.5 穿插
利用元素相互穿插產(chǎn)生的前后關(guān)系，也能營造出空間感。
這是1個元素和兩個圓的平鋪，沒有交集。
如果我給他們穿插重疊在一起：
那就能產(chǎn)生元素之后的疊壓前后關(guān)系，從而也能營造空間感。
利用在海報中：
以上這五種方式就是我們今天分享給大家的方法啦，
在視覺海報的打造中，基本都不是只靠其中一種方法去打造空間感，而是3種，甚至5種一起運用，可以讓塑造的空間感的更有層次細節(jié)和沖擊力。
比如：輪廓虛實+顏色虛實+大小，或者：穿插+大小+明暗。
大家一定要靈活運用，自由組合，以畫面最優(yōu)效果為目標(biāo)去做，不要局限在某一個框架里。
字體也有字體的性格，不同的字體會呈現(xiàn)出不同的字體性格特征，比如高矮胖瘦、敏捷、邪惡、可愛、優(yōu)雅文藝等等等等。通過精準(zhǔn)地對字體的結(jié)構(gòu)，筆畫粗細，細節(jié)調(diào)整，字體效果等的處理表現(xiàn)字體的差異化，使字體的性格調(diào)性，與畫面內(nèi)容相匹配。
2.2.1 力量感、沉穩(wěn)
特點：橫細豎粗/留白少/重心偏下/轉(zhuǎn)折筆直
2.2.2 可愛
特點：圓潤/不規(guī)則/擴張
2.2.3 優(yōu)雅
弧度/纖細/重心偏高
2.2.4 活力
特點：傾斜/筆畫延伸/筆畫干脆，轉(zhuǎn)折彎曲很少
字體還有各種各樣的性格，比如魔幻、哥特、血腥、恐怖等等。
我們在做項目的時候，字體的感覺就一定要抓得準(zhǔn)，符合整個畫面的調(diào)性：
比如這種歐式哥特的畫風(fēng)， 字體就可以加一下哥特元素，點綴點玫瑰、藤條。
剛硬科技的畫風(fēng)，字體筆畫就可以粗一些，添加點科技感和幾何圖形，營造超前科技的感覺：
植物自然的風(fēng)格筆畫就可以柔和一些，帶有弧度，把一些畫面元素圖形化點綴在上面：
2.3.1 字型特點的提取
具體實操怎么做的呢？我們今天就給大家分享一個案例，看看是怎么操作的：
這是一張視覺，我們要給他做一個主標(biāo)題，這個主標(biāo)題的字型特點應(yīng)該如何從圖里提取呢？
我們要提煉出三個點出來才能知道如何去做：
1.風(fēng)格
我們先分析這張圖，它的一個風(fēng)格是有點魔幻+復(fù)古，神話傳說加西域古代的一種史詩感。
我們可以找一些神話類史詩的類似的參考看看：
特征：
1.復(fù)古
2.重心高.
3.不用那么特別復(fù)古可用襯線體變形
2.特征
這個我們可以從人物身上去提取，人物有盔甲，我們可以把盔甲的特征提取出來：
3.配色
顏色也不是亂選的，一定要和圖能呼應(yīng)關(guān)聯(lián)起來，那顏色怎么選呢？其實畫面里已經(jīng)幫我們選好了配色。我們觀察一下畫面：
整體偏冷調(diào)，墨綠色居多。，對比色有紅色和黃色。
那我們?yōu)榱送怀鲎煮w，又能和畫面呼應(yīng)，那黃色就是再好不過的選擇了。
那到這我們的設(shè)計目標(biāo)就比較明確了：
2.3.2 字型設(shè)計
1.基礎(chǔ)字型：
雖然是往復(fù)古了去做，但也不是真做成甲骨文，還是結(jié)合一下使用場景，和識別度。參考中也有部分是使用宋體去變形的，所以我們可以先選一個宋體的字體出來當(dāng)做基礎(chǔ)字型。
為了保證識別度，我們可以只做部分復(fù)古。
這里我挑靈下面“火”字，因為這個字處在中間，比較顯目。
2.調(diào)整重心
參考復(fù)古類型的字體重心都會往上偏移，讓字體稍顯長一些。
3.加入特征
（1）鋒銳：默認字體上有很多圓潤的地方，我們都改成尖銳的感覺。
把每一個筆畫都改掉：
（2）彎曲的尖角：
圖形提煉：
加入到字體當(dāng)中：
字型到這里就完成啦。
（3）字體轉(zhuǎn)折的厚度：
字型完成了，字體轉(zhuǎn)折的厚度我可以再字體效果上去做。在筆畫中間加一個層次，以明暗分隔開，以實現(xiàn)盔甲上這種轉(zhuǎn)折的厚度：
全部加上，看下完成效果：
結(jié)合到畫面中看下：
效果還是很不錯的，整體風(fēng)格也比較統(tǒng)一。
這一塊就是關(guān)于字體性格的內(nèi)容，我們繼續(xù)往下看！
接下來我們來說下關(guān)于顏色情緒的問題！
配色感覺不對？顏色臟？配色不高級？
這些問題一直困擾著我們。應(yīng)該怎么配色呢？其實顏色也是有規(guī)律可循的，這篇文章就是帶給大家一些顏色方面的啟發(fā)，讓你了解配色的底層邏輯，從而更明確快捷地配出想要的顏色。
認識色彩飽和度的情緒：
因為不同的配色會帶給觀者不同的情緒感受，只有在先了解不同顏色特性的基礎(chǔ)上才能為我們的配色指明方向。我們做出的畫面想要傳遞什么感覺，這種感覺對應(yīng)什么顏色？
只有搞懂了邏輯，在之后的工作中，才能為我們的配色方案指明方向，而不會一開始就被難住。
如果我想配一個積極熱鬧活潑的畫面，顏色怎么配呢？ 如果想配一個溫柔恬靜小清新的畫面顏色又該如何選擇呢？他們都有什么特點，為什么會這樣？往下看
3.1.1 積極活力
我們先來看幾組圖片
用吸管工具提取一下它們的顏色觀察
我們可以看到這類海報視覺上都能給人一種熱鬧、動感、活力的feel。
通過顏色提取，再觀察它們選色的位置，可以發(fā)現(xiàn)它們的的配色的純度和飽和度都非常高。
這是為什么呢？接下來我們降低飽和度看看會發(fā)生什么：
可以很明顯的感受到畫面中已經(jīng)失去了那種動感、熱鬧和活力的感覺了，整體更趨于平穩(wěn)和安靜。
所以，高飽和度的配色會帶給觀者活力，動感，熱鬧的情緒。常常應(yīng)用于一些電商、運動品牌的視覺項目中，用來渲染or打造年輕、活力、熱鬧、動感等氛圍。
3.1.2 溫柔平靜
我們再來看一組:
這一類圖片就會給人一種文藝小清新的feel，這類配色和熱鬧、運動的感覺完全不同。
都是低飽和度高明度的顏色。所以，低飽和度的顏色會給人傳達平和、放松、舒適的心情。
3.1.3 輕松休閑
這一類的圖片就給人以中正休閑的感覺。飽和度都趨于中性，不過高，也不會過低。
其實原理就是在取色器里，
我們看同一張圖片，給我們的感覺：
高飽和度配色給人感覺沖擊力很強，具有活力，對比非常強烈。
中飽和度畫面就弱了一級，視覺沖擊力沒那么強。畫面會放松一些，適合傳遞休閑的感覺。
使用低飽和度的顏色時，我們看到畫面更冷靜了，有些高級灰的感覺。
在以往的實際工作當(dāng)中，我也是先用飽和度來定畫面的大情緒基調(diào)，只有大的感覺對了，后面才不會出大問題。比如像一些戰(zhàn)斗、pk、熱血類的banner，都用高飽和顏色:
我們可以來吸取他們的顏色看看：
基本都是靠右邊的顏色。
而像我在做下面這種類型的banner時，就會使用到中飽和度的顏色，給人一種輕松休閑的感覺：
我們再看下他們的色域：
都是趨于中間的位置。
最后一種低飽和的顏色，像下面這種作品，就有一種文藝、清新的感覺：
再來看看他們的顏色色域
都是比較靠左的顏色。
用飽和度來定畫面的大基調(diào)，還是非常好用的，可以說是屢試不爽，大家可以好好理解并且用起來！
總結(jié)：
高純度，高飽和度的顏色，會讓人感覺激動、積極、動感、醒目、記憶深刻等特點感官，常常應(yīng)用于一些電商、運動品牌的視覺項目中，用來襯托年輕、活力、熱鬧、動感等氛圍。
中飽和度的顏色飽和度和純度都適中，顯得中正平和，又不會有低飽和度那樣的“平緩“，想要視覺年輕一些，但又不想飽和度那么的強烈，可以嘗試選擇中度的顏色。
低飽和度的顏色，會給人平和，舒適的感受，常常會結(jié)合大量無彩色一起使用，讓畫面?zhèn)鬟f出簡約，自然，小清新文藝的感覺。
配色的方法有很多，搭配在一起千變?nèi)f化，但都離不開一個點。你想給別人傳遞什么感覺？是要年輕、活躍，還是安靜、唯美？只有明確方向，在想想這個方向上的顏色有什么規(guī)律可循？搞清楚目的，我們再去做配色是不是就會輕松很多？
作者：菜心工作室 來源：站酷
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://m.yvirxh.cn