在今天的 UI 設(shè)計領(lǐng)域，由扁平化設(shè)計風(fēng)格占據(jù)主導(dǎo)地位，已經(jīng)是無可辯駁的事實了。扁平化應(yīng)用除了提升用戶獲取信息的效率外，對設(shè)計師而言就是設(shè)計的難度大大降低了。

一個界面的 UI 視覺元素，僅僅只需要圖片素材、矢量圖標(biāo)、幾何、文字，UI 設(shè)計師的工作僅僅是對內(nèi)容進行組織和排版，涉及到原創(chuàng)的也僅僅只有少量的圖標(biāo)（大多數(shù)人還畫不好）。

這種狀態(tài)持續(xù)了很多年，看起來歲月一片靜好。

但是，這兩年市場發(fā)出了一些不同的聲音，那就是打破純扁平風(fēng)格的 UI 風(fēng)格、元素開始越來越盛行了。

比如新擬態(tài)風(fēng)格在年初炒了一波熱度，各大平臺和公眾號都鋪天蓋地的發(fā)文和介紹，介紹它的設(shè)計理念和設(shè)計方法。

還有就是以餓了么、美團為首的國民級應(yīng)用在主頁顯眼的位置里使用極具識別性的擬物圖標(biāo)，引起設(shè)計圈的熱議。

首先講講新擬態(tài)設(shè)計，之所以之前只字不提，是因為我對這個風(fēng)格實在沒什么好感，有種對純擬物借尸還魂的味道，且它的樣式對于信息密度高的應(yīng)用是完全不適用的，只能活在飛機稿里。

而國內(nèi)大型應(yīng)用開始在實際項目中上線擬物圖標(biāo)，意義就不一樣了，證明這樣的設(shè)計是經(jīng)過幾個大廠團隊認可，且有共識的。

當(dāng)然，這并不因為大廠用了就無腦推崇。而是純扁平的設(shè)計已經(jīng)越來越難滿足部分需要強視覺效果的頁面設(shè)計了。

今天的互聯(lián)網(wǎng)和過去不一樣，用戶的增長留存不再是過去一樣通過裂變和口碑完成，一個產(chǎn)品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的，而互聯(lián)網(wǎng)產(chǎn)品又層出不窮，佛系的等待用戶臨幸是沒有出路，這種現(xiàn)狀也被稱為互聯(lián)網(wǎng)的下半場。

佛系不行，當(dāng)舔狗更不行（成本太高），所以今天大型產(chǎn)品都在對待用戶的態(tài)度都選擇更具更具侵略性的霸道總裁人設(shè)。不僅是用色飽和度越來越高，運營活動越來越密集，廣告和強提示也越來越多。比如剛打開了三個應(yīng)用，進入的首頁大家自己意會……

有點扯遠了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡風(fēng)就不會合適。當(dāng)對扁平的視覺效果已經(jīng)開發(fā)到極限以后，那么進一步在一些細節(jié)處應(yīng)用擬物就成為必然的選擇。

而擬物的應(yīng)用并不可能鋪設(shè)到整個應(yīng)用中去，因為完全擬物化的設(shè)計降低信息瀏覽效率是必然的，所以它只適合做局部的視覺強化，來加強用戶對特定區(qū)域的感知。

最常見的需要被凸出的要素，就是首頁中應(yīng)用的快速入口圖標(biāo)、分類圖標(biāo)和底部導(dǎo)航欄圖標(biāo)了。這些區(qū)域長期受運營活動支配，相信大家已經(jīng)很習(xí)慣了。

只是，這些圖標(biāo)開始在脫離運營活動的狀態(tài)下，也開始使用非扁平模式，那就不再是運營設(shè)計師的工作職責(zé)，而是 UI 設(shè)計師們繞不過去的檻了（知識盲區(qū)）！

且除了 APP 外，其它領(lǐng)域?qū)τ跀M物設(shè)計的需求也會開始逐漸提升，尤其是目前越來越復(fù)（fu）雜（kua）的大屏數(shù)據(jù)展示、車載界面、定制系統(tǒng)等等。

作為新世代的 UI 設(shè)計師，多數(shù)人對擬物的設(shè)計可以說是完全空白的狀態(tài)，所以是時候要重拾擬物設(shè)計這個傳統(tǒng)藝能了。

前面我有提到，擬物主要應(yīng)用在關(guān)鍵的圖標(biāo)上，但應(yīng)用的擬物風(fēng)格并不是過去我們追求的那種極其真實、復(fù)雜的擬物，而是經(jīng)過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。

首先我們看看，過去優(yōu)秀的擬物圖標(biāo)和設(shè)計案例，它不僅表現(xiàn)元素本身的光影、透視、構(gòu)造，甚至?xí)浅Ｍ暾谋憩F(xiàn)物體表面的材質(zhì)和肌理。

這種圖標(biāo)單看起來確實很好看、細致。但是，把它丟進我們當(dāng)前的頁面中是非常違和的，因為它們細節(jié)實在太多了，而且畫起來非常耗時間，不利于項目整體的推進。

所以為了符合畫面的質(zhì)感，又要考慮項目效率，輕擬物這個概念開始被提出和應(yīng)用，作為一個折中的解決方案。

它和純擬物設(shè)計的共同點在于，也表現(xiàn)光影、結(jié)構(gòu)、透視，但它盡可能精簡了輪廓的復(fù)雜度、肌理和層級，呈現(xiàn)出更概念化、理想化、易于辨識的擬物圖形。

所以，我們主要去學(xué)習(xí)的內(nèi)容是輕擬物的設(shè)計方法，而不是徒手畫照片（這個可以緩緩）！

而輕擬物雖然 “輕”，但它依舊也還具備擬物的基本特征，是有實體質(zhì)感的。但是扁平從插畫到圖標(biāo)設(shè)計經(jīng)過多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設(shè)計，應(yīng)用大量的漸變、投影、模糊的效果，比如下圖案例。

這在我們之前圖標(biāo)的系列干貨中有提過，這類設(shè)計是面性圖標(biāo)的進階版，它們依舊屬于扁平風(fēng)格的范疇之內(nèi)，不能和輕擬物劃上等號。

對于這幾年才開始學(xué)習(xí) UI 設(shè)計的新手來講，擬物已經(jīng)變成一個很陌生的事物，這對行業(yè)來說是比較悲哀的一件事。

因為擬物的設(shè)計不僅僅是畫圖標(biāo)而已，對它的學(xué)習(xí)可以全方位的提升設(shè)計師的基礎(chǔ)素養(yǎng)，不僅包括對傳統(tǒng)美術(shù)（結(jié)構(gòu)、光影、色彩、透視）知識點的剖析，還包含對 PS 使用的深入探索。

可以說，自從擬物不成為必修題材以后，九成以上的UI設(shè)計師是不會用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。

輕擬物本身也是擬物，所以它的核心基礎(chǔ)和擬物設(shè)計師一致的，只是省略了更多復(fù)雜的細節(jié)。而對于整個擬物的體系來講，最重要的東西實際上只有2個，形體、光影。

形體表現(xiàn)

形體的表現(xiàn)，就是對圖形外輪廓的樣式的呈現(xiàn)。在過去我們寫的圖標(biāo)分享中，有寫過面性圖標(biāo)進階的設(shè)計中，可以包含更多的細節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。

輕擬物的形體設(shè)計就要處于進階面性圖標(biāo)或者更難的水平之上，即你要把這個圖形的內(nèi)容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。

比如大眾點評的快速入口圖標(biāo)，雖然看起來很復(fù)雜，但是那是配色上的復(fù)雜，而不是形體輪廓上的具象化。

換句話說，擬物插畫的圖形基底，類似扁平插畫風(fēng)格圖標(biāo)，不能表現(xiàn)得太抽象，也不能增加過多的細節(jié)，需要一種恰到好處的平衡（玄學(xué)），這就非?？简炘O(shè)計師的判斷和經(jīng)驗了。

并且，在描繪輪廓的時候，新手盡可能的采取正視圖來進行繪制，而不要通過俯視圖、側(cè)視圖、斜視圖等方法來呈現(xiàn)圖形的多個面，這樣難度會大幅度上升，比如下面這種情況。

光影表現(xiàn)

除了形體外，光影就是整個擬物的靈魂了。

當(dāng)一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現(xiàn)的時候，它就是三維空間的立體圖形，比如下面這個圓的案例：

在擬物的設(shè)計中，我們對光影的定義是至關(guān)重要的，所以首先就是針對該圖形確定光源的方向，是上方、前方、左上還右上，這對后續(xù)的設(shè)計有一連串的影響。

如果對光影沒有正確的解釋，那么在制作細節(jié)的漸變角度、投影的使用上，就會產(chǎn)生錯誤的設(shè)計，造成光影視覺沖突和矛盾。

在創(chuàng)建了光源以后，物體受到光線的影響就會產(chǎn)生明暗面和投影，可以簡單劃分成4個部分，高光、亮部、暗部、投影。

這和我們學(xué)習(xí)的素描有一定的差異，美術(shù)中對光影的表現(xiàn)害會包含明暗交界、反光面，這對于輕擬物的來說負擔(dān)太重，所以我們要去掉它們，接下來重點講講高光和暗部。

高光是物體作為受光物對光源的直接反映，比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長期存在的高光配飾（多數(shù)動畫的光頭角色都有）……

高光可以非常有效的增加畫面的層次和對比性，讓物體看上去更有沖擊力和觀賞性。

而暗部，則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意，因為不在受光面，所以顏色會變暗。在實際操作過程中，我們可以通過漸變的方式開控制明暗的表達，但盡量不要直接手動設(shè)置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。

了解這幾個特性以后，下面，我們就通過一個實例來講解一下輕擬物設(shè)計的過程吧。

作為輕擬物的演示，直接畫個圖標(biāo)講一遍怎么操作是沒什么用的，我們要從實際場景出發(fā)，用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁：

總結(jié)它的問題，不難發(fā)現(xiàn)首頁頂部業(yè)務(wù)功能太多了，頂部圖標(biāo)就包含30個（加滑動的），雖然每個模塊圖標(biāo)單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級和對比性。

我們要做的，就是通過輕擬物的方式，調(diào)整快速入口最大的三個圖標(biāo)，凸顯它們的重要性以及和其它圖標(biāo)的視覺差異性。先從第一個圖標(biāo)開始，講解一下如何完成輕擬物化設(shè)計的升級。

第一步：確認輪廓造型

第一個操作，即確定圖標(biāo)本身的輪廓。根據(jù)原有圖標(biāo)的樣式我做了一些改動，包括加粗車頭，減少高度，增加車燈等。并對每一個模塊進行純色的填充，定義它們的色彩和做出區(qū)分。

形體的重要性在于要對圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達意。

第二步：完善圖形細節(jié)

這一步，就要在原有基礎(chǔ)上，進行下一步的深入。包括對一些細節(jié)交代得更清楚一點，增加一些有趣的小元素等等，完善它的具體樣式。

第三步：增加基礎(chǔ)的暗部表現(xiàn)

在這里，我們就要開始為圖標(biāo)增加高光了，高光從右上角打下來，那么有疊加關(guān)系的元素就會產(chǎn)生一個向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強。

這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創(chuàng)建一個圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對暗部和投影的效果。

第四步：增加高光效果

接著，就是最后一步，將高光添加到畫面中來，講整個圖標(biāo)的質(zhì)感進行拉升，

通過上面的演示，我們可以將整個擬物設(shè)計流程精簡成：

1.確定圖形基本輪廓、外形比例、模塊色彩

2.豐富細節(jié)樣式增加趣味性和適當(dāng)?shù)臄M真感

3.通過蒙版添加暗部來完善表現(xiàn)的明暗和層級關(guān)系

4.添加高光元素作為圖形的亮點，拉升層次感

然后，通過這樣的步驟，再來完成后續(xù)的兩個圖形，拆解完的效果如下。

然后，再用這三個修改后圖標(biāo)套用進原來的頁面，并做出對應(yīng)的修改，再來看看前后對比：

通過這個對比，我們就可以看出在這個復(fù)雜的首頁頭部中，輕擬物風(fēng)格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復(fù)雜。

而這就是輕擬物在項目設(shè)計中的實際作用，當(dāng)畫面元素已經(jīng)開始超負荷，且容易導(dǎo)致同質(zhì)化的審美疲勞和主次不清時，就是輕擬物登場的時候了。

最后的總結(jié)，學(xué)習(xí)輕擬物就是增加我們完成界面視覺輸出的可能性，為視覺創(chuàng)意增加一些儲備彈藥，以應(yīng)對越來越復(fù)雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。

我們只在這篇羅列了制作的順序和思路，并沒有把軟件的操作完全放出來，一方面是因為時間上來不及（偷懶），另一方面是希望大家不會被軟件的使用框柱。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。

 藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 

作者：酸梅干超人    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍藍設(shè)計( www.bouu.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è)計公司

從平面到屏幕，CMYK 到 RGB，墨點到像素，色彩越來越豐富，形式越來越復(fù)雜。而 UI 的發(fā)展從擬物的繁瑣細節(jié)中掙脫出來，卻在色彩的展現(xiàn)中放飛了自我。

零售業(yè)有個有趣的研究成果 —— “七秒鐘定律”：人們在挑選商品和服務(wù)時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內(nèi)，色彩的作用占到了 67%。

要在小小的手機屏幕中加入這么多顏色，并保持其中的聯(lián)系和邏輯，著實不易。如果你還對配色一無所知，完全不知道配色應(yīng)該怎么入手，那么你需要了解一下，我?guī)啄杲?jīng)驗總結(jié)的配色思路。

無論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來看看這些案例：

雖然是不同的應(yīng)用，但是這個拾色器的用法大同小異，但是，很多新人并沒有搞懂拾色器的正確應(yīng)用邏輯。

很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。

HSB 是色彩科學(xué)中對所有顏色屬性的理論劃分，是種概念上的定義，可以用來解釋任何色彩，也就是說可以和 RGB 和 CMYK 相互轉(zhuǎn)化，且 HSB 的選色邏輯更清晰、簡潔、干練。

因為一個正確的選色過程，是先確定出色相，然后再在這個色相維度下選出明度和飽和度，所以我們首先要關(guān)注色相選擇條。

細心的同學(xué)應(yīng)該已經(jīng)發(fā)現(xiàn)了，它們的首尾都是紅色，那是因為色相的序列是一個首尾相接的環(huán)形模式，所以它實際上就是色環(huán)的柱狀展示圖，應(yīng)用起來和色環(huán)沒有實際區(qū)別。

接下來就要說到重點，飽和度和明度選擇區(qū)，我自己使用的習(xí)慣，是將這個選擇區(qū)通過黃金三分法的方式切割成等比的 9 個區(qū)域，然后明確它們在 UI 中的對應(yīng)情緒和應(yīng)用場景。

在過去的大量分析中，互聯(lián)網(wǎng)產(chǎn)品的主色和重要輔助色都會往右上角聚集，一些次要、不可點的色彩聚集在中上方，而文字背景色則聚集在左側(cè)，無人區(qū)則是我們重點避開的對象。

下面我們分析幾個案例，看看它們在這個選擇區(qū)中的色彩分布情況：

大家也可以自己拿一些主流的應(yīng)用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會得到基本一致的結(jié)果。牢記這 9 個區(qū)域的場景劃分，可以幫助我們非常高效、安全地完成 UI 配色。

在眾多的 UI 設(shè)計規(guī)范中，色彩部分的介紹，都必然包含三種類型，分別是：

• 主色：應(yīng)用的核心色彩，品牌色

• 輔色：豐富頁面視覺和傳達效果的次要顏色

• 中性：沒有色相的文字、背景用色

2.1 主色的選擇

主色是一個應(yīng)用的最核心的色彩，品牌的象征色，比如想到餓了么的藍色、微信的綠色、京東的紅色、淘寶的橙色。

確定主色，并沒有大家想象的那么復(fù)雜，它的要點在于 —— 你想讓用戶感受到哪種情緒，然后通過情緒關(guān)聯(lián)一個大致的色彩范圍，再進行微調(diào)。

在今天的互聯(lián)網(wǎng)產(chǎn)品中，主色的應(yīng)用選擇范圍在拾色器區(qū)域的右上角，前面已經(jīng)有解釋了。這和平面設(shè)計中的用色有非常大的不同。

移動端產(chǎn)品要在一個方寸大的空間中爭奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調(diào)是無法實現(xiàn)這個目標(biāo)的，所以今天主色飽和度越來越極致，比如我們之前整理的，發(fā)在站酷的一篇總結(jié)：

支付寶主色變更分析

再加上屏幕的 RGB 顯示特性，高對比度，高動態(tài)范圍的特質(zhì)能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區(qū)域選出合適的色值。

2.2 輔助色的選擇

輔助色是豐富應(yīng)用中的次要色彩，它會包含一到若干個和主色不同的色彩，除了品牌傳達外，具有更強的實用性。

前面我們提到過色環(huán)，這里就要派上用場了。我們知道色環(huán)是個色彩序列首尾相連的環(huán)形模型，它蘊含一個最樸素的原則，即兩個顏色在這個環(huán)形中角度越大，那么視覺差異性越大，對比越強，比如下圖的展示：

這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個色彩對比度的判斷標(biāo)準。而真正輔助色的選擇，是根據(jù)實際場景的功能決定的。

比如通知、提醒、取消用大紅色，確認、同意用綠色或者藍色，收藏、打分、評價用橙黃色。都是已經(jīng)在用戶心智中建立了標(biāo)準的用色類型，跟著常規(guī)方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。

沒有標(biāo)準元素用色的情況下，再考慮應(yīng)用色環(huán)的 “角度原則”，越需要被突出的顏色，可以在色環(huán)中離主色越遠，越不需要被突出的則越近。

比如下方攜程的案例，主色在藍色的情況下，支付、保險金標(biāo)簽這些需要被重點突出的色彩，使用了主色的互補色， 讓我們一眼就能看見并產(chǎn)生強烈的操作欲望。

2.3 中性色的選擇

中性色，是頁面中文字、背景用到的顏色，它們承擔(dān)起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺得中性色無關(guān)緊要，實際情況恰恰相反。

主色輔助色決定了界面視覺是否出彩，而中性色的應(yīng)用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應(yīng)該明白，即使只有黑白灰的狀態(tài)下，我們理解這些頁面和進行使用也不會有絲毫的障礙。

中性色的配置，就是制定一個由深到淺的灰度階梯，應(yīng)用在對應(yīng)權(quán)重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B（明度） 值。

中性色雖然指的是無個性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍色飽和度，提升觀看體驗（滿足 RGB 的某種特性）。

這種做法，顏色越淺的時候飽和度應(yīng)用色值就越低，將這個規(guī)律在拾色器中進行表現(xiàn)，那么我們就可以得到一個 L 型曲線，我稱它為 “中性曲線”。

掌握對于主色、輔助色、中性色的選擇方法，那么對于 UI 配色的奧義來說，你已經(jīng)掌握了一半，接下來就要了解更具體的實踐思路了。

配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學(xué)和理論，卻很少關(guān)心它們應(yīng)用如何應(yīng)用，如何配置。

所以，我根據(jù)主色和輔助色應(yīng)用總結(jié)了一個配色的四象限表格，在分別看看它們對應(yīng)的案例：

3.1 主色占比大，色彩豐富度高

主色會作為頂部標(biāo)題欄或其它重要模塊中的背景色，進行大面積應(yīng)用，加深用戶對品牌的認知和辨識度。而產(chǎn)品中又包含了大量功能和服務(wù)，需要用豐富的色彩來進行暗示，吸引用戶關(guān)注。

3.2 主色占比大，色彩豐富度低 

這類配色中，主色的應(yīng)用占比也大，出現(xiàn)頻率高，鮮有其它顏色出現(xiàn)。比較適用于圖片內(nèi)容豐富的題材中，或者是相對正式、品牌感強的應(yīng)用。

3.3 主色占比小，色彩豐富度高

這是多數(shù)主流應(yīng)用的趨勢，降低主色占比，留出更多的空間給內(nèi)容模塊的展示上，突出自身帶有的服務(wù)和功能。

3.4 主色占比小，色彩豐富度低

通常，會應(yīng)用這種方式是因為產(chǎn)品的服務(wù)是相對單一，但也需要用戶投入注意力的應(yīng)用，設(shè)計師就會盡力避免給予用戶過多的干擾。

每次在進行配色的時候，我們都需要對自己要應(yīng)用哪種配色應(yīng)用方式做出規(guī)劃，然后再動手執(zhí)行。有了這個目標(biāo)，后面在整個項目的設(shè)計中的配色步驟就是水到渠成的事情了。

在實踐前，我們要簡單講講一個應(yīng)用或者界面的標(biāo)準配色的流程了，流程順序如下：

具體應(yīng)該怎么使用這套流程，我們用一個圖蟲 APP 改版的案例來做演示，首先從四象限中的第一個主色占比高、色彩豐富度高的類型做起。

4.1 配色流程演示

原型是 UI 設(shè)計的基本藝能了，在開始具體設(shè)計、配色前，搭建頁面的框架原型是一個必備的條件，下面，是我們已經(jīng)準備好的原型案例。

然后，我們確定以橙色作為應(yīng)用主色，并在拾色器中進行確認。

有了主色，就可以對頁面進行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標(biāo)題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。

接著，我們開始整理中性色的使用，選擇新的顏色來填充文字和背景，清晰的表現(xiàn)模塊層級，文字信息的權(quán)重。

最后，就是添加輔助色和其它色彩的元素了，這個步驟建議都是放在最后一步操作。因為色彩越豐富，越難控制，容易讓整個畫面顯得雜亂無序，所以先完成基礎(chǔ)搭建，可以更好的幫助我們判斷彩色的使用是否合理。

下面，我們使用彩色的金剛區(qū)圖標(biāo)，然后將用戶關(guān)注、認證用戶、標(biāo)簽等元素使用其它色彩，來豐富頁面的色彩內(nèi)容。

4.2 其他配色類型應(yīng)用

根據(jù)第一個方案，我們可以再用這個原型來實現(xiàn)其余的三個方案的配色。

比如下面的主色占比大，但是色彩豐富度低的。因為已經(jīng)不太應(yīng)用其它輔助色，所以主色填充上我們不再填充頂部導(dǎo)航欄的背景，而是將更多元素應(yīng)用主色，減少輔助色數(shù)量。

然后是主色占比小，色彩豐富度高的方案，進一步降低主色應(yīng)用的比例，然后在金剛區(qū)、標(biāo)簽等處使用較為豐富的配色。

最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開始增多，只保留最核心的一些元素使用主色，和極少的輔助色。

根據(jù)四種不同的配色方案，我們就可以得到四種不同的配色結(jié)果和風(fēng)格，在每次設(shè)計開始實施前，我們都可以根據(jù)這種做法來做嘗試，并選出自己滿意的方案。

要再次強調(diào)，UI 配色是極其強調(diào)形式的應(yīng)用科學(xué)，最后做的往往會和一開始想的效果有極大出入，所以需要我們有幾個備選方案，可以隨時進行調(diào)整，并選出合理的那個。

以上是我們關(guān)于配色有關(guān)知識點的分享，希望可以幫助大家提升對 UI 配色的認識。

 藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 

作者：酸梅干超人    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍藍設(shè)計( www.bouu.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)用

1.1 圖標(biāo)的主要類型

理解圖標(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)展開。

1.2 B端工具圖標(biāo)的風(fēng)格

工具圖標(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)，那用線性的做法還是相對合適和簡單一點。

1.3 圖標(biāo)的統(tǒng)一性規(guī)范

對 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)一的描邊、線段粗細參數(shù)
• 圓角一致：使用一致的圓角數(shù)值，不要一下尖角一下圓角
• 透視一致：使用接近的透視角度，不要有的側(cè)視有的正視圖
• 大小一致：視覺的大小保持一致，有均衡的大小感受
  

如果不能保證統(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)一性即可。

1.4 圖標(biāo)的柵格系統(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)準。

理解完圖標(biāo)的基本規(guī)范，就到圖標(biāo)的使用邏輯了，解決一些常見的設(shè)置誤區(qū)。

2.1 圖標(biāo)應(yīng)該做多大

圖標(biāo)該做多大的，這是目前被問到最多的問題。本來應(yīng)該是非常簡單的一件事，但很多工作多年的設(shè)計師也搞不清楚。

仔細捋了捋，罪魁禍首就是 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)的負面影響包含：

• 像素數(shù)過多使得數(shù)值的制定難度大大提升，不管是元素尺寸還是描邊粗細
• 矢量圖形源文件進行縮放很容易發(fā)生錯位，提前輪廓化會破壞源文件
• 縮放圖標(biāo)后描邊的數(shù)值往往會出現(xiàn)非整數(shù)和 0.5 的狀態(tài)，虛邊問題嚴重
  

在常規(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)準）。

2.2 素材的正確使用方法

我們知道圖標(biāo)的素材非常豐富，不管是 Iconfont、IconPark 還是 Iconsearch 等網(wǎng)站，都提供了海量的素材。但是只要稍微專業(yè)點的項目，往往素材庫都滿足不了，部分規(guī)格的圖標(biāo)還是需要我們自己重新繪制。

所以說圖標(biāo)素材就完全沒用了嗎？當(dāng)然不是。

圖標(biāo)的正確用法是作為一種快速試錯的參照物，它可以幫助我們實現(xiàn)：

• 參考圖標(biāo)的具體尺寸在哪個數(shù)值最合理
• 參考當(dāng)前場景使用面性還是線性的風(fēng)格更合理
• 參考圖標(biāo)的設(shè)計風(fēng)格是圓還是尖銳更合理
• 參考相關(guā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)用素材，例如翻頁的左右、更多、下拉、搜索等等。

2.3 圖標(biāo)的色彩和狀態(tài)

圖標(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)能不能被正確運用到線上項目中。

3.1 圖標(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í)慣重新命一遍，寫個讓他能看懂的名字遠比用亂七八糟的英文強。

3.2 圖標(biāo)的切圖格式

接下來，就要解釋切圖的規(guī)則了。很多沒有經(jīng)驗的設(shè)計師切圖就只是隨手加個切片，然后上傳藍湖發(fā)給開發(fā)自生自滅了，這是一個非常不合理的操作。

再或者，強行使用 Fonticon 格式，而不管實際情況如何，造成最后實現(xiàn)效果完全不同步或?qū)崿F(xiàn)不了。

切圖是通過前端調(diào)用并在瀏覽器中進行顯示的圖形，而要被瀏覽器正常顯示，就有必要了解適合使用的切圖格式。

圖片的格式包含位圖和矢量兩種，位圖是通過記錄像素色值的圖形格式，假設(shè)一張圖是 100*100 像素，那么記錄 1W 個像素點的色彩，所以無法支持無損縮放。而矢量則是通過記錄點線面的坐標(biāo)繪制出顯示圖形的格式，可以支持自由縮放。

理論上，矢量格式是最佳的圖標(biāo)切圖格式，但是它的限制同樣有很多，例如：

• 無法記錄漸變色
• 導(dǎ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 格式，再同步給程序員即可。

以上就是關(guān)于 B 端圖標(biāo)應(yīng)用的所有知識點了。

 藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 

作者：酸梅干超人    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍藍設(shè)計( www.bouu.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è)計公司

思維導(dǎo)圖，英文名叫 The Mind Map，是一種用來開展、記錄發(fā)散性思維的圖形工具?？梢哉f是目前職業(yè)辦公中使用最廣泛最基礎(chǔ)的圖形工具，無論是做故事大綱、頭腦風(fēng)暴、任務(wù)拆解，都會進行應(yīng)用。

通常，思維導(dǎo)圖會有一個到兩個中心主題，然后中心會擴展出不同的子節(jié)點，并使用連線進行關(guān)聯(lián)。每個子節(jié)點，都可以繼續(xù)建立更下級的節(jié)點，依次類推。

通過這種方法，我們可以建立出比較結(jié)構(gòu)化的信息層級，中心主題是宏觀內(nèi)核，越往下級拓展的，就是越細節(jié)的信息。

而隨著思維導(dǎo)圖軟件的發(fā)展和完善，除中心主題、連線、節(jié)點外，我們還可以在這個圖形中添加關(guān)聯(lián)、備注、圖標(biāo)、待辦、圖片和附件等內(nèi)容。創(chuàng)建思維導(dǎo)圖的工具在今天隨手可得，無論是桌面端還是網(wǎng)頁端，想要創(chuàng)建思維導(dǎo)圖，從下方選擇一個即可。

思維導(dǎo)圖存在的價值，并不僅僅是我們要做一個方便別人理解的架構(gòu)圖形，而是通過它本身包含的結(jié)構(gòu)層級屬性，來幫助我們梳理自己的思路、想法、靈感。比如你要搞清楚進階設(shè)計師應(yīng)該具備哪些能力，如何進行學(xué)習(xí)，那就可以通過思考，查找資料，以樹狀圖的形式記錄和整理。

它最大的價值，就是幫助我們在繪制的過程規(guī)范我們的思維形式，能針對不同節(jié)點實現(xiàn)聚焦和深入探索與思考。而不讓想法特別離散一會兒插畫，一會兒體驗，過一會兒又是平面四要素般毫無章法。

在互聯(lián)網(wǎng)團隊中，使用思維導(dǎo)圖輸出除了日常工作內(nèi)容計劃外，最多應(yīng)用于和產(chǎn)品需求相關(guān)的表述上，有一些專用的思維導(dǎo)圖類型需要我們認識，包含下面三種：

- 產(chǎn)品功能結(jié)構(gòu)圖

- 產(chǎn)品頁面結(jié)構(gòu)圖

- 產(chǎn)品信息結(jié)構(gòu)圖

下面我們將從這三個思維導(dǎo)圖入手，了解如何實現(xiàn)它們的輸出，以及如果應(yīng)用思維導(dǎo)圖工具來提升日常工作的效率，以及規(guī)劃自己的職業(yè)技能發(fā)展。

---

功能、頁面、信息結(jié)構(gòu)圖，都是產(chǎn)品經(jīng)理輸出的內(nèi)容產(chǎn)物，通常會置入到 PRD 中供團隊成員查看和理解。但是，這三種思維導(dǎo)圖不僅看起來差別不大，而且很容易搞混。

2.1 產(chǎn)品功能結(jié)構(gòu)圖：

我們首先介紹的第一個結(jié)構(gòu)圖類型，叫產(chǎn)品功能結(jié)構(gòu)圖，用來解釋產(chǎn)品本身功能的樹狀圖。如果學(xué)習(xí)過用戶體驗五要素的同學(xué)，就可以把它理解成它決定的就是范圍層的內(nèi)容。

通常，產(chǎn)品再開始進行一個新產(chǎn)品功能規(guī)劃的時候，第一件事就是啟動思維導(dǎo)圖工具，開始整理該產(chǎn)品會包含的具體功能，和對應(yīng)的功能層級，這應(yīng)該非常好理解。

比如我們用潮汐這個 APP 舉例，如果我要規(guī)劃一個這樣的產(chǎn)品，我會先考慮它包含的核心功能白噪音，然后向后思考白噪音包含哪些種類，如專注、睡眠、小憩、呼吸。每個白噪音類型里，我再根據(jù)對應(yīng)場景提供更細節(jié)的功能出來。

然后，我再想到，白噪音不是只有固定一種的，而是包含非常多種，是不是就該提供一個放不同白噪音的地方，于是就增加了探索的模塊。在這個模塊里，包含搜索、廣告位推薦、分類推薦功能。每個獨立的白噪音，還可以對它進行收藏、分享等功能。

再然后，就還有添加用戶系統(tǒng)，增加會員功能，統(tǒng)計功能，個性化定制等，就可以進一步完善這個圖表將所有想到的功能多羅列出來。

雖然產(chǎn)品需求的推導(dǎo)前面還有別的專業(yè)分析步驟，但落實到具體包含功能的制定上，過程和結(jié)果都如上方的一致。通過思維導(dǎo)圖逐個模塊添加和細化，明確它們的類型、層級。

一個修訂完整的功能結(jié)構(gòu)圖，就能清晰的表示這款產(chǎn)品包含了哪些功能和服務(wù)。

2.2 產(chǎn)品頁面結(jié)構(gòu)圖：

產(chǎn)品頁面結(jié)構(gòu)圖，是一個和功能結(jié)構(gòu)圖非常容易搞混的圖形。很多產(chǎn)品經(jīng)理在 PRD 中會在做完功能結(jié)構(gòu)圖以后緊跟頁面結(jié)構(gòu)圖，兩張圖形中會包含大量重復(fù)的名稱和相似的結(jié)構(gòu)，讓新手一頭霧水。

頁面結(jié)構(gòu)圖等同于體驗五要素中的結(jié)構(gòu)層，用來詮釋產(chǎn)品包含的頁面、層級、分支。

首先明確一個概念，就是功能并不等于頁面。

一個頁面中可能包含多個功能，比如專注頁面中，就包含了時間、開始、暫停、停止、模式、標(biāo)簽、場景設(shè)置的功能。

而一個功能模塊，也可能包含多個頁面，比如我們在功能結(jié)構(gòu)圖中可能會簡單表示添加聲音的功能，但這個管理需要比較多的操作步驟和頁面來完成。

既然我們知道功能和頁面不是一回事，那么頁面的類型、結(jié)構(gòu)有沒有必要表現(xiàn)呢？答案必然是肯定的，頁面也需要通過樹狀圖做完整的梳理并展示。

一個產(chǎn)品有什么樣的頁面，層級如何制定，都是基于功能分析出來的，合理的情況，是先把功能定好，再想怎么做頁面。功能是產(chǎn)品的內(nèi)核，而頁面涉及到具體的表現(xiàn)形式。

所以，外行在規(guī)劃一個產(chǎn)品的時候，往往是從頁面入手，告訴你整個產(chǎn)品包含了哪些頁面，大概的層級，但對功能的具體規(guī)劃卻往往語焉不詳。

頁面結(jié)構(gòu)圖對于設(shè)計師來說至關(guān)重要，因為它決定了我們應(yīng)該設(shè)計哪些頁面，可以說是決定了我們的版本設(shè)計任務(wù)和工作量。不管產(chǎn)品有沒有提供這個圖形，我們都要自己梳理出來。

2.3 產(chǎn)品信息結(jié)構(gòu)圖：

功能和頁面的問題解決了，就所有結(jié)構(gòu)性問題都解決了嘛？顯然還沒有。

五要素中還包含一個框架層和視覺層，視覺層指具體頁面的樣式，那得用設(shè)計圖來表示，顯然不是思維導(dǎo)圖工具能實現(xiàn)的。那么，就剩下框架層一個還需要我們注意了。

框架層的表現(xiàn)無外乎就是單個頁面包含的內(nèi)容、交互、布局。交互和布局都是由原型圖來呈現(xiàn)的，但不管你有什么跨時代的交互思路還是殿堂級的排版能力，都要面對一個嚴肅的問題 —— 界面里要擺啥？

雖說功能地圖有一定的描述，但顯然還是比較寬泛模糊的，設(shè)計師是需要更具體的字段內(nèi)容的。這就是信息結(jié)構(gòu)圖存在的價值，描述每個功能模塊或頁面下方，包含哪些信息字段內(nèi)容。

比如在白噪音的詳情頁中，要放哪些信息？就一個音頻文件，我們要往里塞什么好。如果作為產(chǎn)品我的出發(fā)點就會是豐富這個頁面的一些信息，讓用戶更有欲望使用，或者進行識別。

仔細整理這些信息，你會發(fā)現(xiàn)不少頁面雖然看起來簡單，但是實際信息量一點都不少。而這些信息，不是設(shè)計師還是開發(fā)隨手做的，都是經(jīng)過產(chǎn)品規(guī)劃才落地的。

每個具體的信息，類似開發(fā)環(huán)境中常說的 “字段”，它也確實是產(chǎn)品經(jīng)理工作中后續(xù)和開發(fā)梳理字段表的雛形。

所以，到這里我們也就基本了解了項目中最常用的三個具體思維導(dǎo)圖。它們包含一定的先后順序，“功能 —— 頁面 —— 信息” 依次推導(dǎo)，從核心到細節(jié)。

梳理這些內(nèi)容，對后續(xù)我們展示、理解項目會起到非常積極的作用，也是 PRD 文檔中必備的圖形元素之一。即使項目環(huán)境中不需要設(shè)計師自己上手，你也要保證可以明白它們各自的作用，以及看懂它們在實際文檔中表述的內(nèi)容。

---

除了在產(chǎn)品說明中使用思維導(dǎo)圖，它還可以應(yīng)用在我們工作和學(xué)習(xí)領(lǐng)域中的方方面面。我們就分別從這兩個領(lǐng)域切入來講一下設(shè)計師如何利用思維導(dǎo)圖，提升自身能效。

3.1 工作領(lǐng)域

在工作上，設(shè)計師可能也需要在競品分析里輸出上面這3種圖形，但還有很多別的工作場景需要我們應(yīng)用，最常見的莫過于工作待辦事項的整理了。

比如我們對一整個項目的工作內(nèi)容進行梳理和評估，那我們就可以根據(jù)時間線或者內(nèi)容類型，將所有要做的事情梳理成樹狀圖。

或者，做用戶現(xiàn)場訪談這種調(diào)研，一個跨度接近一周的工作，我們也可以用思維導(dǎo)圖將前后需要完成的工作和順序解構(gòu)記錄下來。

任何復(fù)雜的工作流程，只要經(jīng)過結(jié)構(gòu)化的拆解，就可以細化成更容易理解和執(zhí)行的步驟。也更能幫助我們判斷工作量和制定時間計劃。

3.2 學(xué)習(xí)領(lǐng)域

在學(xué)習(xí)領(lǐng)域上，思維導(dǎo)圖最常用的在我看來有兩個方向，一個是對自己知識體系的整理，另一個是對于學(xué)科、書本的知識點整理。

雖然我們可能在各個干貨或者公開課里，看到很多有關(guān)職業(yè)技能樹的說明，并伴隨不同的通行類型。但它們都只是對內(nèi)容講解和輸出的一種抽象圖形解釋，用來輔助作者意圖的表達。

比如我們 B 端課程中使用的 B 端設(shè)計師技能掌握圖形，采取圓的形式，這樣講解起來更方便，也更好展現(xiàn)流程（樹狀圖會太長根本放不下去）。

但對于個人的實際學(xué)習(xí)來說，這種圖形是沒辦法直接進行記憶的，而且顯然可以整理得更細致，所以我們就可以通過思維導(dǎo)圖的形式，對自己職業(yè)需要掌握的技能整理下來，作為自己的學(xué)習(xí)目標(biāo)。

一個靈活的思維導(dǎo)圖，會隨著你對職業(yè)的認識加深和計劃的調(diào)整始終處于一個更新的狀態(tài)，輔助你對當(dāng)前已經(jīng)掌握的，和準備掌握的技能有更全面的認識。強烈建議所有同學(xué)都培養(yǎng)這種習(xí)慣。

再者，就是進入到更細節(jié)的領(lǐng)域，比如一個簡單的技能，還是一本書，通過思維導(dǎo)圖完成知識點的拆解和整理。這在網(wǎng)上是最常見的思維導(dǎo)圖，就不在這里多做介紹了。

---

最后一點，就要簡單解釋思維導(dǎo)圖的輸出了。如果我們做的思維導(dǎo)圖僅僅是給自己看的，那么就沒有輸出的需求，但如果思維導(dǎo)圖是要展示給別人的呢？

對于一般的評審還是方案說明，我們只需要在導(dǎo)出思維導(dǎo)圖前，根據(jù)展示的畫布，調(diào)節(jié)方向、類型，以及精簡展示內(nèi)容的數(shù)量，讓文字能被正?？匆娂纯?。

但如果我們要在作品集中展示呢？相信大家已經(jīng)看過不少作品集中包含思維導(dǎo)圖展示頁面結(jié)構(gòu)的案例了。

見過非常多新人在問這類思維導(dǎo)圖要用什么軟件制作，答案是本文羅列的那些工具都做不到上方案例的效果。要想在作品集的展示中獲得良好的觀感，就只能自己手動繪制。

也就是說，你們要自己用 PS/AI/Sketh/XD/Figma 等軟件畫一遍。你可以根據(jù)當(dāng)前的場景和氛圍去設(shè)計合適的樹狀圖樣式，我就不慢慢做怎么畫樹狀圖的軟件教學(xué)了，只強調(diào)一個細節(jié)，就是連接的弧線應(yīng)該要怎么畫才準確。

不管你使用上下還是左右的布局，如果應(yīng)用到弧線，就不能每個弧線全用肉眼預(yù)估來拖拽貝塞爾。最簡單的做法，先確定出包含幾個二級節(jié)點，畫出等距離的橫線，然后先拖出最上或者最下的弧線，確?？刂贫它c都處于水平方向。然后復(fù)制這個弧線，將對應(yīng)一側(cè)的端點移動到對應(yīng)橫線上去即可。

切記要保證弧線的一致和穩(wěn)定，而不是歪歪扭扭的。再之后，想要設(shè)計成什么樣的風(fēng)格，增加什么樣式，就根據(jù)你們自己的想法決定了。

強烈建議大家日常多使用思維導(dǎo)圖，因為它能很好的鍛煉我們結(jié)構(gòu)化思維能力。用的越多，你就會發(fā)現(xiàn)在你生活困擾你的問題就會越來越少。

 藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 



作者：酸梅干超人    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍藍設(shè)計( www.bouu.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ā)布會上的?？?。

各種讓人眼花繚亂的圖例和技術(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è)或市場，而是其它多個大市場中的某個組成部分。

如前面提到的數(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é)化、社會治理精準化、公共服務(wù)高效化取得重要進展，數(shù)字政府建設(shè)在服務(wù)黨和國家重大戰(zhàn)略、促進經(jīng)濟社會高質(zhì)量發(fā)展、建設(shè)人民滿意的服務(wù)型政府等方面發(fā)揮重要作用。

到2035年，與國家治理體系和治理能力現(xiàn)代化相適應(yīng)的數(shù)字政府體系框架更加成熟完備，整體協(xié)同、敏捷高效、智能精準、開放透明、公平普惠的數(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ī)模快速增長，前景理應(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ù)商，可不是打開淘寶買家評論查看分數(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è)階段所需的知識量更大，準備周期更長，技能門檻更高。在初中級階段和一般 UI 行業(yè)對比起來 —— 毫無性價比。

如果本身熱愛可視化，想將 FUI 那些東西搬進真實的世界和項目里，也做好了艱苦學(xué)習(xí)的準備（說不定是你樂在其中的），那么這個的行業(yè)的頭部崗位就是為你這種人準備的。

畢竟行業(yè)體量大，當(dāng)然就會有真正優(yōu)質(zhì)的崗位出現(xiàn)，只是它的門檻高，沒有那么多水分能擠。

如果不是異常熱愛這個行業(yè)，具備較強的自學(xué)能力，或有一定的 3D 和圖形技術(shù)知識積累，那么不太建議往這個職業(yè)深入發(fā)展，一般的 B 端和 SAAS 項目才會是更好的選擇。

 藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 



作者：酸梅干超人    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍藍設(shè)計( www.bouu.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è)計師。

用著差不多的軟件，在外人甚至很多設(shè)計從業(yè)者看來工作內(nèi)容差別不大崗位，有人被稱作設(shè)計師，有人卻天天只能自嘲自己是個美工。

那么，都是做圖的，美工和設(shè)計師的差別究竟在哪兒？

外人看來，美工是“技術(shù)工種”，而設(shè)計師屬于“創(chuàng)作工種”

在電商，紙媒或是印刷領(lǐng)域里，上下游的工作內(nèi)容相對固化和流程化，對設(shè)計而言可發(fā)揮的空間本身就不大。時間久了，美工可以用模塊化的方式在固定的時間里產(chǎn)出固定的設(shè)計工作。在印刷企業(yè)中，很多設(shè)計工作者除了需要排版還需要負責(zé)打樣甚至印刷器械的操控。所以設(shè)計在整個產(chǎn)品生產(chǎn)過程中的比重不大，自然就從“創(chuàng)作”變成了“工作”?！肮ぁ币簿驮⒁獬墒止せ蚴莿趧庸ぷ鞯囊馑?。

為什么很多人會吐槽，朋友找自己可以“隨便”做個LOGO呢？因為在他們眼中，你的工作不是創(chuàng)作產(chǎn)生的，而是像其他非靈感類工作一樣，“生產(chǎn)”出來的。既然生產(chǎn)出來的，最后出來的又不是“實物”就不存在什么成本，那當(dāng)然應(yīng)該是免費的。

知識結(jié)構(gòu)單一，讓美工只關(guān)注設(shè)計好不好看，而不是合不合理

自嘲美工的設(shè)計從業(yè)者，大多關(guān)注的是好看與不好看。

“這個好，因為這個好看?！?

“那個不好，因為它很丑?！?

“為什么領(lǐng)導(dǎo)選了那個不好看的，而沒選我這個好看的…”

在其眼中，評判設(shè)計優(yōu)劣很重要的一條標(biāo)準就是好看與不好看。與別人提出自己設(shè)計方案的時候，也用好看與否的方式讓別人做出選擇。但審美本身就沒有一條共識性的標(biāo)準，所以很容易被領(lǐng)導(dǎo)挑戰(zhàn)你的設(shè)計，很容易被客戶“指點”你的作品。

設(shè)計師在設(shè)計過程中追求的不僅僅是好看這一層面。通過設(shè)計，對目標(biāo)和結(jié)果有什么影響、合理性、易用性和可延續(xù)性都是在“好看”之外設(shè)計師該去思考和要去凝結(jié)在作品中的工作。

哪怕日常設(shè)計一個最基本按鈕的位置、圓角的弧度、顏色，都會在設(shè)計確認之前反復(fù)的自我詢問，這樣做有什么理由？為何圓角的弧度是4而不是8？寬度和高度為何是目前這個尺寸？哪一個更符合大產(chǎn)品體系下的設(shè)計原則？

即便沒有一個是與非的標(biāo)準，“這樣是否合理”都應(yīng)該是設(shè)計師掛在嘴邊最長自檢的問題。

設(shè)計師定義規(guī)則，美工去執(zhí)行規(guī)則

設(shè)計的初衷是解決問題。都是設(shè)計從業(yè)者，一類人在定義規(guī)則，一類人在執(zhí)行規(guī)則。廣告有調(diào)性的定義，產(chǎn)品有規(guī)范的定義，設(shè)計師會時刻的思考和優(yōu)化什么樣的定義，能夠提升效率、能通統(tǒng)一識別性、能協(xié)同合作、能保證最小概率的出現(xiàn)錯誤。

在這樣的規(guī)則下，另一類人在執(zhí)行規(guī)則，即便是一些banner的設(shè)計，他們只做著規(guī)則之內(nèi)的工作，至于為何這樣規(guī)范，沒有思考過，也不知道為何要這樣。還有人會說，我做的banner沒有規(guī)則都是自己說的算啊~但在建立這個banner的尺寸之初就是規(guī)則本身呀。

設(shè)計師的靈感來源與積累和總結(jié)，美工的靈感來源于素材

有些人喜歡積累素材，認為這樣做可以為設(shè)計提升效率。很多人依靠素材來尋找設(shè)計方向，素材品質(zhì)的好壞決定了他最后出品的好壞。沒了網(wǎng)絡(luò)，沒了素材庫也就沒了思路和靈感，更沒有什么創(chuàng)作可言。

設(shè)計師在接到需求之初考慮的不是在哪查找素材，而是在思考這個需求需要解決什么樣的問題，這個設(shè)計如何執(zhí)行才能滿足這個需求。有些設(shè)計師喜歡整理，而且整理是設(shè)計師剝離表層干擾的一個基本能力，通過撥開表象，發(fā)現(xiàn)問題的本質(zhì)，再去尋找解決之道。

很多設(shè)計從業(yè)者，尤其是新手，做設(shè)計都是憑著感覺，憑感覺做設(shè)計最大的問題是沒有一個有效之道來保證每次設(shè)計的品質(zhì)。運氣好了，或是找到一個好素材，那么能做出80、90分的設(shè)計，運氣不好，那就不知如何下手。

留心觀察下身邊的“大神”，看看他們在接到設(shè)計之后的思考路徑是怎樣。是忙著翻素材、找參考還是靜下來畫畫草圖，做做需求整理，這可能是美工和設(shè)計師遇到問題之后最大的行動差異。

軟件思維，還是設(shè)計思維

同是看到一件驚艷的作品，美工考慮的是：

“臥槽，這么牛逼，這是用什么軟件做出來的？”

設(shè)計師考慮的是：

“臥槽，這么牛逼的想法作者是怎樣想到的”

思考的初衷不同，行動的路徑也就不同。美工會覺得軟件至上，努力學(xué)好軟件之后就會成為大神。而設(shè)計師會盡可能多的去了解優(yōu)秀作品背后的故事，去了解一切設(shè)計和設(shè)計之外的臨界知識。積累好足夠的“思維素材”再去運用到設(shè)計工作中去。

我經(jīng)常聽到一些年輕的設(shè)計師問我，你會哪些軟件，這是個好奇且好學(xué)的問題。但軟件真不是高階或是低階的區(qū)分壁壘。如果真是這樣，那么大師們都應(yīng)該是設(shè)計軟件的熟練駕馭著。而恰恰相反，軟件用的666的大多都是培訓(xùn)機構(gòu)的培訓(xùn)老師，可能連設(shè)計師都算不上。摒棄軟件思維吧，產(chǎn)生真正距離的一定是腦，不是手。

看到這里，有人會覺得這篇文章寫的有些許的“激烈”，有些不是美工的問題，可能是年輕的問題，是新人必須經(jīng)歷的問題?？缭搅四贻p和初級，有些人的思維和眼界進階了，但有些人還停留在上面說到的部分層面里，新手可能從美工進階到設(shè)計，但美工卻不一定都是新手。

有句話說的不是很好么：

“我有十年工作經(jīng)驗”

“不，你只是用一年的經(jīng)驗工作了十年而已。”

 藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 



作者：大寶頻道    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍藍設(shè)計( www.bouu.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è)計公司