在今天的 UI 設計領域，由扁平化設計風格占據主導地位，已經是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外，對設計師而言就是設計的難度大大降低了。

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

這種狀態持續了很多年，看起來歲月一片靜好。

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

比如新擬態風格在年初炒了一波熱度，各大平臺和公眾號都鋪天蓋地的發文和介紹，介紹它的設計理念和設計方法。

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

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

而國內大型應用開始在實際項目中上線擬物圖標，意義就不一樣了，證明這樣的設計是經過幾個大廠團隊認可，且有共識的。

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

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

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

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

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

最常見的需要被凸出的要素，就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區域長期受運營活動支配，相信大家已經很習慣了。

只是，這些圖標開始在脫離運營活動的狀態下，也開始使用非扁平模式，那就不再是運營設計師的工作職責，而是 UI 設計師們繞不過去的檻了（知識盲區）！

且除了 APP 外，其它領域對于擬物設計的需求也會開始逐漸提升，尤其是目前越來越復（fu）雜（kua）的大屏數據展示、車載界面、定制系統等等。

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

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

首先我們看看，過去優秀的擬物圖標和設計案例，它不僅表現元素本身的光影、透視、構造，甚至會非常完整的表現物體表面的材質和肌理。

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

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

它和純擬物設計的共同點在于，也表現光影、結構、透視，但它盡可能精簡了輪廓的復雜度、肌理和層級，呈現出更概念化、理想化、易于辨識的擬物圖形。

所以，我們主要去學習的內容是輕擬物的設計方法，而不是徒手畫照片（這個可以緩緩）！

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

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

對于這幾年才開始學習 UI 設計的新手來講，擬物已經變成一個很陌生的事物，這對行業來說是比較悲哀的一件事。

因為擬物的設計不僅僅是畫圖標而已，對它的學習可以全方位的提升設計師的基礎素養，不僅包括對傳統美術（結構、光影、色彩、透視）知識點的剖析，還包含對 PS 使用的深入探索。

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

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

形體表現

形體的表現，就是對圖形外輪廓的樣式的呈現。在過去我們寫的圖標分享中，有寫過面性圖標進階的設計中，可以包含更多的細節、內部元素，而不是僅僅只有外輪廓。

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

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

換句話說，擬物插畫的圖形基底，類似扁平插畫風格圖標，不能表現得太抽象，也不能增加過多的細節，需要一種恰到好處的平衡（玄學），這就非常考驗設計師的判斷和經驗了。

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

光影表現

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

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

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

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

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

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

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

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

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

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

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

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

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

第一步：確認輪廓造型

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

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

第二步：完善圖形細節

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

第三步：增加基礎的暗部表現

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

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

第四步：增加高光效果

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

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

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

2.豐富細節樣式增加趣味性和適當的擬真感

3.通過蒙版添加暗部來完善表現的明暗和層級關系

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

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

然后，再用這三個修改后圖標套用進原來的頁面，并做出對應的修改，再來看看前后對比：

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

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

最后的總結，學習輕擬物就是增加我們完成界面視覺輸出的可能性，為視覺創意增加一些儲備彈藥，以應對越來越復雜的互聯網產品和職業要求。

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

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

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


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

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

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

要在小小的手機屏幕中加入這么多顏色，并保持其中的聯系和邏輯，著實不易。如果你還對配色一無所知，完全不知道配色應該怎么入手，那么你需要了解一下，我幾年經驗總結的配色思路。

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

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

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

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

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

細心的同學應該已經發現了，它們的首尾都是紅色，那是因為色相的序列是一個首尾相接的環形模式，所以它實際上就是色環的柱狀展示圖，應用起來和色環沒有實際區別。

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

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

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

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

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

• 主色：應用的核心色彩，品牌色

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

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

2.1 主色的選擇

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

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

在今天的互聯網產品中，主色的應用選擇范圍在拾色器區域的右上角，前面已經有解釋了。這和平面設計中的用色有非常大的不同。

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

支付寶主色變更分析

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

2.2 輔助色的選擇

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

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

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

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

沒有標準元素用色的情況下，再考慮應用色環的 “角度原則”，越需要被突出的顏色，可以在色環中離主色越遠，越不需要被突出的則越近。

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

2.3 中性色的選擇

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

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

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

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

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

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

配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學和理論，卻很少關心它們應用如何應用，如何配置。

所以，我根據主色和輔助色應用總結了一個配色的四象限表格，在分別看看它們對應的案例：

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

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

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

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

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

這是多數主流應用的趨勢，降低主色占比，留出更多的空間給內容模塊的展示上，突出自身帶有的服務和功能。

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

通常，會應用這種方式是因為產品的服務是相對單一，但也需要用戶投入注意力的應用，設計師就會盡力避免給予用戶過多的干擾。

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

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

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

4.1 配色流程演示

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

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

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

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

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

下面，我們使用彩色的金剛區圖標，然后將用戶關注、認證用戶、標簽等元素使用其它色彩，來豐富頁面的色彩內容。

4.2 其他配色類型應用

根據第一個方案，我們可以再用這個原型來實現其余的三個方案的配色。

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

然后是主色占比小，色彩豐富度高的方案，進一步降低主色應用的比例，然后在金剛區、標簽等處使用較為豐富的配色。

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

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

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

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

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

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


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

在開始講解 B 端的圖標設計前，我們先來復習一遍圖標設計的基礎知識。相信不少同學看過我們之前更新的圖標系列干貨，沒看過的可以先收藏起來，等等看完本篇分享后再去閱讀……

史上最全的圖標設計教學.1 —— 圖標設計詳解

史上最全的圖標設計教學.2 —— 工具圖標的設計

史上最全的圖標設計教學.3 —— 其他圖標及應用

1.1 圖標的主要類型

理解圖標，首先關注的是圖標本身的類型，在整個 UI 體系中，圖標基本就分成3個大類：

工具圖標：包含一定產品功能隱喻的簡化抽象圖形，代替文字節省界面空間，方便用戶理解

裝飾圖標：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于節日活動中

啟動圖標：產品的啟動圖標，即用來在系統中打開該產品的圖形按鈕，基本以自身 LOGO 為主

在 B 端項目中，應用最廣泛的必然是工具圖標，而裝飾、啟動圖標卻鮮有露面機會。但出現的少，不代表沒有，解釋工具圖標前，我們先優先講解下裝飾和啟動圖標在什么情況下會出現。

其中，SAAS 類服務就有很多會重點強調品牌、情感化設計的案例，例如大家比較熟悉的阿里云和騰訊云。項目中就大量啟用 3D 化的裝飾圖標提升界面的質感。

啟動圖標則會應用在一些比較大型的項目里，當項目出現了很多下級功能模塊或類似插件的體系時，就會采取使用應用圖標的方式作為入口。

比如 Figma 也是一個 B 端工具，它的插件列表中就可以看見不同的啟動圖標。還有類似 Slack、Invision、Teambition 等產品，一個龐大的產品生態就必然會衍生出強化不同子產品身份的需求，就自然而然會用到啟動圖標了。

最后，就是我們熟知的工具圖標了，前兩種圖標，在前期畫不好不要緊，畢竟這類規格的產品會有經驗更豐富的設計或總監坐鎮，新手當個切圖仔即可……

但是工具圖標，重要性就不言而喻了，B 端項目對工具圖標的需求非常大，幾乎每個組件中都會包含圖標。

雖然今天網上有非常豐富的圖標素材庫，但在形式各異的 B 端項目里依舊是供不應求的，各種行業特有的功能、實物、隱喻，只能設計師自己完成。

B 端設計師在圖標設計領域的主要工作，就是確定圖標樣式、設計圖標、導出切圖。下面的分享我們也會主要圍繞工具圖標展開。

1.2 B端工具圖標的風格

工具圖標的應用主要包含兩個部分，線性圖標和面性圖標。

這里再提圖標風格，不是把以前的知識點重新講一遍，而是要強調 B 端圖標的特殊性。和 C 端相比，B 端圖標的實用屬性更高，并不需要過多凸顯本身的視覺風格。

所以，工具圖標中，使用大量漸變、插畫、投影的類型都要排除掉，它們對 99.9% 的項目都只會造成體驗的負影響，不要被網上的追波風飛機稿給帶偏。

適合 B 端項目的工具圖標只要應用最基礎的線性和面形風格即可，一定要劃分出差異，應該只包含圓潤、纖細、尖銳這幾種。

很多人好奇線性和面形圖標在 B 端設計中有什么使用上的差異呢？答案是沒有差異。

線性和面形的使用，純粹看設計師在當前場景判斷哪個合適用哪個，只要保證對應圖標風格統一即可。

不過如果遇到一些比較特殊的情況，比如要表現各類設備的復雜圖標，那用線性的做法還是相對合適和簡單一點。

1.3 圖標的統一性規范

對 B 端設計來講，獨立設計圖標的步驟是必不可少的，應該掌握的圖標規范還是必須要懂的。

我們雖然沒有 C 端那么多風格和技法的拖累，但想畫好 B 端圖標卻多出了其它難點，那就是一個頁面中出現的圖標實在是太多了。

這就引發了我們要講的第一個規范要點 —— “統一性”，所有同規格類型圖標具有一致性的特征，這些特征包含了：

• 粗細一致：首先使用統一的描邊、線段粗細參數
• 圓角一致：使用一致的圓角數值，不要一下尖角一下圓角
• 透視一致：使用接近的透視角度，不要有的側視有的正視圖
• 大小一致：視覺的大小保持一致，有均衡的大小感受
  

如果不能保證統一性的基本要求，那么整個頁面看起來就會非常的廉價、業余。很多新手處理 B 端項目就是應用了多套素材庫圖標，它們的細節完全不一樣，統一性當然無從談起。

而讓整套圖標保持統一性，是相當有難度的，其中最難的一點，就是如何讓一套圖標的大小均衡。雖然我們要對每套圖標確定一個固定的尺寸，但不代表圖標實際圖形的長寬數值是完全一致的。

幾何圖形對視覺有一定的欺騙性，有不同的大小體驗，比如下方案例（魷魚游戲亂入？）：

所以，基于這樣的特性，每個圖標本身都包含了兩層屬性，圖標的占位尺寸和視覺尺寸。占位尺寸指它在界面中的實際占地大小，是透明白的，排版的時候以這個尺寸作為實際的邊緣來測量。

而視覺尺寸，則是在占位尺寸下圖標圖形的實際大小，這個大小是帶給我們實際視覺感受的部分。一套圖標的不同圖形必然視覺尺寸是各不相同的，我們用占位尺寸包裹它們來方便我們進行統一的應用。

所以，使用成熟的圖標素材必然會發現圖形周邊還會有透明的空白區域。當然，不同的素材，這個留白也是有區別的，下一個小節就會解釋。

最后要聲明一點，一套項目中可以包含多個規格（2-5個）的工具圖標，比如導航用的圖標比普通工具圖標更復雜一點，設計師只要保證每種規格保持的統一性即可。

1.4 圖標的柵格系統

圖標越多，大小的控制越困難，所以專業的圖標庫繪制就必然會應用圖標的柵格系統進行輔助。

在 Ant 的體系中，一個基于柵格的圖標實際包含3層，背景層、格線層、圖形層。

背景層，即圖標展位尺寸，需要先確定出這個元素的大小，然后才是里面的繪制區域。通常，柵格系統會為邊緣預留 1-4 像素的內邊距（出血位），正所謂四周留一線，日后好相見。

格線層，則是使用的柵格線段，也是最重要的部分。格線層通常由 4 個基本圖形構成，包含正方形、圓形、水平長方形、垂直長方形。

這四個圖形的長寬大小不一，原因是為了對應幾何圖形視覺尺寸不同的特征。把它們并列排列，就可以發現它們的視覺大小非常接近。

這些格線的作用，就是提前幫我們確定好視覺比例，幫助我們快速繪制相同圖形類型的圖標。

但是，不是完美符合這四個圖形要求的圖標該怎么辦，總不能格線把所有輪廓都給你實現出來吧？

格線的另一層作用，也就是最重要的作用，其實是一個用來做測量的工具，而不是輪廓依據。在幾何視覺差中，最基礎的大小原理是占用面積越大的圖形，尺寸感受越大。所以，長寬一致的正方形大于圓形，圓大于三角形。

所以當我們繪制的非常規圖形，和類似格線進行對比時，長寬缺少的一側，就要由另一側增加數值來填補它的面積。

比如下圖 Ant 官方的電腦圖標，它的寬是橫向矩形，但是中間區域面積較小，所以增加了高度進行平衡。

再看一些其它的案例

這一步沒有固定的參數使用技巧，設計師需要將完成的圖標置入到其它圖標旁邊進行調試，確保尺寸是合適的。

格線只是一個圖標大小設置的參考工具，一切以最終效果為標準。

理解完圖標的基本規范，就到圖標的使用邏輯了，解決一些常見的設置誤區。

2.1 圖標應該做多大

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

仔細捋了捋，罪魁禍首就是 AntDesign 這套規范中對圖標畫布的解釋了。

要重點強調，Ant 設計圖標的意圖，和一般項目的是完全不同的。Ant 作為一套龐大的開源項目，它的圖標核心特征之一就是 —— 適應性。

這些圖標要被應用到各種不同的設備、顯示器、系統中，圖標尺寸會用多大，在幾倍圖環境顯示全都是不確定的。所以圖標一開始按越大的規格完成，后續實際應用中的縮放、匹配也就越容易，適應性越高。

但是，在我們自己的項目中，這種做法是完全沒有必要的，1024 圖標的負面影響包含：

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

在常規項目里，一套項目是可以包含不同尺寸和規格的圖標的，而不是我們做一套相同風格的圖標在整個應用中無差別使用。

這也意味著，每個圖標在產品中的使用場景通常只有一個尺寸，不需要去面臨縮放的情況。即使需要縮放，也只是這套圖標中的少數幾個需要，或者相對特殊的項目。

所以，圖標尺寸設定，就是根據當前位置合適的尺寸來制定。可以使用素材在已經設計好的布局中嘗試多大的數值合適，然后創建同樣的數值即可（盡量以4的倍數為標準）。

2.2 素材的正確使用方法

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

所以說圖標素材就完全沒用了嗎？當然不是。

圖標的正確用法是作為一種快速試錯的參照物，它可以幫助我們實現：

• 參考圖標的具體尺寸在哪個數值最合理
• 參考當前場景使用面性還是線性的風格更合理
• 參考圖標的設計風格是圓還是尖銳更合理
• 參考相關隱喻的圖形樣式哪種更合理
  

在項目的界面設計階段，我們一向建議優先使用外部的素材，尤其是 IconPark 這種比較統一，還可以快速調節圖標樣式的工具網站。

這個過程即使素材找不到和寓意一致的也沒關系，用相近的圖標替代就可以。等到頁面布局基本完成以后，最后再集中精力對需要繪制的圖標重畫一遍（甚至是在開發階段繪制）。

通過別人的圖標來快速匹配尺寸、風格、樣式，會幫助我們節省非常多的時間，也有助于我們設計出更專業、美觀的圖標。

另外，就是針對項目一些偏小尺寸的通用圖標，就可以比較放心的應用素材，例如翻頁的左右、更多、下拉、搜索等等。

2.3 圖標的色彩和狀態

圖標的尺寸、樣式都確定了，最后就是關于圖標的色彩和不同狀態的制定了。

前面講過，B 端項目對圖標的裝飾屬性沒有那么迫切，所以正常情況下，太花哨的圖標是要盡量避免的。彩色、漸變色、投影，都不應該在這個情況下胡亂使用。

常規的圖標只要使用中性色即可，而需要特別對待的圖標，色彩可以從主色或者輔助色中選取。比如需要高亮顯示的打勾或者打岔。

當然，如果項目涉及到一些特殊的工具圖標，類似工廠、工業領域表達實體設備的擬物圖標，可以打破這個原則。但是，同樣避免這套擬物圖標的每個圖標用色不同，盡量只使用 3 種以內的顏色完成擬物的填色。

同時色彩的使用還有一個重要的意義就是對圖標不同狀態的呈現，部分圖標會承擔按鈕的功能，包含默認、選中兩個基本狀態。

普通權重的圖標，未選中狀態可以在默認色彩基礎上使用透明度來實現。

高權重的圖標，則可以在選中的狀態替換色彩，或者更改圖標的類型，將原本的線性更改成面形并填充色彩制造反差。

完成所有圖標的設計以后，最后一步就是切圖和導出了，這決定你的圖標能不能被正確運用到線上項目中。

3.1 圖標的收納和命名

在一套專業的 B 端項目中，已經設計好的圖標是設計規范的 “資產” 內容之一。圖標的文件不能散落在項目的各個界面里，而是在規范頁面中有統一的整理和收納。

這種做法的流程是，先在軟件的規范庫中創建對應的圖標組件（ Symbol / Compoent ），然后再在具體頁面中應用，方便后續的統一管理和修改。

而在這個過程中，我們也需要對圖標有正確的命名方法，來確保團隊調用、檢索圖標的效率。通常，我的圖標命名規范如下：

尺寸 / 類型 / 圖標名-狀態

示例：

48px/導航圖標/表盤頁-默認

24px/一般圖標/搜索-默認

“/” 號的引用主要是方便軟件中對組件層級進行劃分，而我調用圖標的規則勢必是先從尺寸開始，再選擇對應規格，最后類型和狀態。

提前命名也是方便后續我們切圖和導出，但要提及一點，圖標的命名不要追求英文化，因為我們的詞匯量不可能實現正式的英文命名規則，只會寫一堆大家都看不懂的單詞。

而開發在使用我們的圖標切圖時，也不會用我們之前取的命名，會根據自己的命名習慣重新命一遍，寫個讓他能看懂的名字遠比用亂七八糟的英文強。

3.2 圖標的切圖格式

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

再或者，強行使用 Fonticon 格式，而不管實際情況如何，造成最后實現效果完全不同步或實現不了。

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

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

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

• 無法記錄漸變色
• 導出輪廓容易有錯誤
• 無法記錄擬物圖形
• 無法記錄投影元素
  

前面說過，普通項目中同一圖標是很少出現一會兒大一會兒小的需求，所以矢量最大的特征無損縮放，往往就不需要我們去考慮。矢量格式切圖的主要出發點是用來應對移動端顯示器 1x、2x、3x、4x 等不同倍率縮放的問題，而不是網頁端的基本使用。

當一套項目中出現了矢量格式無法覆蓋的圖標時，那么即用矢量切圖，又用位圖，就會顯得非常的混亂。只有類似 LOGO 等圖形元素，才需要考慮 SVG 格式，而不是一看到圖標就上。

所以，最適合切圖的格式就是位圖的 PNG 格式，一方面它是無損的，另一方面它支持透明背景，在切圖應用上可以完美和設計稿結合，而這是其它大多數位圖格式不具備的特征。

當每次項目完成以后，并不需要通過藍湖來實現切圖的導出，如果切圖文件分散在各個項目頁面里，那么一定會有很多圖標被遺漏，尤其是圖標的不同狀態切圖。

所以，最理想的切圖形式，就是將所有圖標完成整理和命名以后，一起框選，然后導出成 PNG 格式，再同步給程序員即可。

以上就是關于 B 端圖標應用的所有知識點了。

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

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


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

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

通常，思維導圖會有一個到兩個中心主題，然后中心會擴展出不同的子節點，并使用連線進行關聯。每個子節點，都可以繼續建立更下級的節點，依次類推。

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

而隨著思維導圖軟件的發展和完善，除中心主題、連線、節點外，我們還可以在這個圖形中添加關聯、備注、圖標、待辦、圖片和附件等內容。創建思維導圖的工具在今天隨手可得，無論是桌面端還是網頁端，想要創建思維導圖，從下方選擇一個即可。

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

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

在互聯網團隊中，使用思維導圖輸出除了日常工作內容計劃外，最多應用于和產品需求相關的表述上，有一些專用的思維導圖類型需要我們認識，包含下面三種：

- 產品功能結構圖

- 產品頁面結構圖

- 產品信息結構圖

下面我們將從這三個思維導圖入手，了解如何實現它們的輸出，以及如果應用思維導圖工具來提升日常工作的效率，以及規劃自己的職業技能發展。

---

功能、頁面、信息結構圖，都是產品經理輸出的內容產物，通常會置入到 PRD 中供團隊成員查看和理解。但是，這三種思維導圖不僅看起來差別不大，而且很容易搞混。

2.1 產品功能結構圖：

我們首先介紹的第一個結構圖類型，叫產品功能結構圖，用來解釋產品本身功能的樹狀圖。如果學習過用戶體驗五要素的同學，就可以把它理解成它決定的就是范圍層的內容。

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

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

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

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

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

一個修訂完整的功能結構圖，就能清晰的表示這款產品包含了哪些功能和服務。

2.2 產品頁面結構圖：

產品頁面結構圖，是一個和功能結構圖非常容易搞混的圖形。很多產品經理在 PRD 中會在做完功能結構圖以后緊跟頁面結構圖，兩張圖形中會包含大量重復的名稱和相似的結構，讓新手一頭霧水。

頁面結構圖等同于體驗五要素中的結構層，用來詮釋產品包含的頁面、層級、分支。

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

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

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

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

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

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

頁面結構圖對于設計師來說至關重要，因為它決定了我們應該設計哪些頁面，可以說是決定了我們的版本設計任務和工作量。不管產品有沒有提供這個圖形，我們都要自己梳理出來。

2.3 產品信息結構圖：

功能和頁面的問題解決了，就所有結構性問題都解決了嘛？顯然還沒有。

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

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

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

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

仔細整理這些信息，你會發現不少頁面雖然看起來簡單，但是實際信息量一點都不少。而這些信息，不是設計師還是開發隨手做的，都是經過產品規劃才落地的。

每個具體的信息，類似開發環境中常說的 “字段”，它也確實是產品經理工作中后續和開發梳理字段表的雛形。

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

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

---

除了在產品說明中使用思維導圖，它還可以應用在我們工作和學習領域中的方方面面。我們就分別從這兩個領域切入來講一下設計師如何利用思維導圖，提升自身能效。

3.1 工作領域

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

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

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

任何復雜的工作流程，只要經過結構化的拆解，就可以細化成更容易理解和執行的步驟。也更能幫助我們判斷工作量和制定時間計劃。

3.2 學習領域

在學習領域上，思維導圖最常用的在我看來有兩個方向，一個是對自己知識體系的整理，另一個是對于學科、書本的知識點整理。

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

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

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

一個靈活的思維導圖，會隨著你對職業的認識加深和計劃的調整始終處于一個更新的狀態，輔助你對當前已經掌握的，和準備掌握的技能有更全面的認識。強烈建議所有同學都培養這種習慣。

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

---

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

對于一般的評審還是方案說明，我們只需要在導出思維導圖前，根據展示的畫布，調節方向、類型，以及精簡展示內容的數量，讓文字能被正?？匆娂纯?。

但如果我們要在作品集中展示呢？相信大家已經看過不少作品集中包含思維導圖展示頁面結構的案例了。

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

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

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

切記要保證弧線的一致和穩定，而不是歪歪扭扭的。再之后，想要設計成什么樣的風格，增加什么樣式，就根據你們自己的想法決定了。

強烈建議大家日常多使用思維導圖，因為它能很好的鍛煉我們結構化思維能力。用的越多，你就會發現在你生活困擾你的問題就會越來越少。

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

希望得到建議咨詢、商務合作，也請與我們聯系。 



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





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

這兩年互聯網行業在 C 端市場上的增長已經不足以吸引大眾和投資者的視線，B 端作為一個新的熱點開始被追捧。

但 B 端是一個泛指，它是由若干面向商業場景的不同細分行業組成。包括云服務、SAAS、PAAS、定制系統、數據可視化、智慧平臺、商用 HMI 等等。

不同 B 端細分行業差距是非常大的，就像游戲 APP UI 和一般軟件 APP UI 完全是兩種職業一樣。每當我們討論 B 端行業前景，就一定要聚焦到具體的行業類型，否則就沒有討論下去的基礎。

而我們今天重點聚焦的，就是目前聲勢極大的數據可視化行業。

這是最近很多同學咨詢和關注的領域，也是各大顯卡廠商、3D 引擎發布會上的?？?。

各種讓人眼花繚亂的圖例和技術應用解說，很容易讓我們產生未來已經加速向我們走來的 “幻覺”，此時不抓緊時代的機遇投身數字化界面的設計，更待何時？

但我還是要勸大家別光顧著雞凍，冷靜下來好好分析這些行業和市場狀況，當你了解的越多，你就越會發現，這個職業方向和你們想的不太一樣……

首先，數字可視化領域也是一個比較籠統的行業，它依舊可以拆分出若干細分領域。但我先簡單根據視覺展示類型把它們分成兩大類，平面展示型和3D展示型。為什么根據這個分而不是商業場景，下面會做進一步解釋。

首先，數據可視化不是用了花哨的 3D 視覺才叫可視化，平面展示類型是絕對不能忽視的一個方向。它的主要應用場景集中在商業 BI ，統計分析工具等。

比如統計并查看網站、應用、店鋪數據的平臺。

這類產品有非常廣泛的使用場景和需求，是現代企業和產品運營的基石，它存在的價值是毋庸置疑的。

而另一類 3D 展示型的細分發展方向，包含展示大屏、數字孿生、智慧項目、商用 HMI 等類型。

這類項目更多是由技術發展催生而來的 “新需求”，和 5G 的發展是高度相似的。我對這個行業的發展潛力是認可的，但對設計師從事這個行業的總體前景持悲觀態度。

下面，針對真正的數據可視化設計師，我會從下面幾個維度展開討論（唱起反調）：

- 知識門檻

- 行業特征

- 團隊價值

數據可視化是對數據信息進行圖形化設計的過程，這個行業不是這兩年才出現的，而是由來已久。

從世界上第一個圖表的誕生之后，就有無數統計學家和設計師投身到這個領域中，發明和設計出各種精妙絕倫的圖形。

數據可視化的重要性不會比任何其它設計行業低，但是，數據可視化重要性的來源，是由數據本身的價值賦予的。因為詮釋數據的方式精彩，所以有價值，而不是僅僅是因為你做得好看且花哨。

更進一步說，就是數據可視化的價值是被統計學賦予的，而統計學是被這個世界真實需要的。

但很可惜，極少有 B 端設計師會投入精力到統計學的基礎知識和應用，這就導致很多設計稿中，連對數據的展示應該用折線還是柱狀都分不清。

或許你依靠經驗可以提升對一些基本圖表使用的心得，但是，進階的可視化設計需求就靠幾個簡單的折線、柱狀、餅圖就能解決嘛？那下面這些圖形應用需要掌握什么？

復雜的可視化應用場景，不僅需要設計師對統計內容和數據應用有主動地分析，還需要對計算機圖形學有一定的掌握。先不說門檻極高的 R 語言應用，但凡涉及到區級以上的地理信息可視化，就一定需要應用 GIS 工具的應用，導出并轉化數據包。

除了 2D 以外，3D 可視化的項目，所需的知識儲備就更進一大步。很多新人的認知以為設計師的工作只要用 3D 軟件建模并輸出就可以，學會 C4D 就可以做可視化項目。

這和以為掌握烤箱的功能就可以做出美味的蛋糕性質是一樣的……

前面說過，3D 可視化是由技術發展催生出的行業，它的應用受到技術的影響非常大。因為 3D 應用實在是太復雜了，比 2D 圖形復雜好幾個量級，這就導致設計可以落地的限制遠遠超出新手的認知。

常規的 3D 項目，必然要借助相關的圖形協議或者引擎。比如新手剛開始都以為的 3D 可視化就是網頁中運行 3D 效果，而網頁運行 3D 就是借助 WebGL 圖形協議實現的。

由于各種技術和硬件限制，WebGL 的性能是奇差無比的，因為它的圖形繪制渲染主要依靠 CPU 來完成，只要項目稍微復雜一點，多邊形和圖元數量一多，立馬就會讓電腦變卡（CPU占用量暴漲）。同時，它可以使用的渲染效果、著色器也必然不等同于 3D 軟件的高階渲染插件 OC 或 Redshift。

因為 WebGL 太弱，目前封閉的可視化項目就轉而使用其它的技術解決方案，即虛幻 Unreal 和 Unity。沒錯，就是你們玩游戲啟動畫面中顯示的那倆引擎。

換句話說，現在的高端 3D 可視化項目，就是用做游戲的方式做可視化應用，只要在指定設備里安裝，就可以調用 GPU 資源，實現更高級復雜的效果。

但是，只要應用了對應的引擎，就必須使用配套軟件來完成渲染、動畫、交互事件。即通過 C4D 或者 Blender、犀牛等軟件完成建模（不同可視化項目應該用的建模軟件也不一樣），再導入到虛幻或者 Unity 編輯器中進行下一步的操作，然后再和開發進行交付。

因為 3D 的復雜性，導致獨立 3D 可視化項目的開發流程被大幅度拉長，從而讓設計師需要掌握的知識面也大大增加。中間每個步驟都充斥著各種屎尿屁的限制，我就不繼續展開了。

3D 可視化設計師，幾乎就等同于游戲行業中的技術美術(Technical Artist)，因為游戲開發更復雜，分工更明確，技術美術作為設計師和開發之間的橋梁，幫助項目的美術能盡量在技術上被實現。

而因為可視化項目的建模精度與視覺效果要求不高（對比游戲），這些工作就要由同一個崗位包攬，設計師就沒辦法回避這些讓人絕望的知識信息。

還有一點對比游戲行業更讓人絕望的，就是 3D 可視化實際應用的技術方案是高度碎片化、沒有體系的，而且技術迭代周期遠比游戲行業短（WebGPU已經在路上了），這在客觀上增加了設計師的從業壓力（歡迎體驗前端開發的壓力？）。

一個專業的可視化設計師知識門檻，是遠遠高于一般 UI 設計師的。

當我們研究一個行業的前景時，就是研究它未來的趨勢和潛力。數據可視化嚴格意義來講并不是完全獨立的一個行業或市場，而是其它多個大市場中的某個組成部分。

如前面提到的數字分析、物聯網、工業物聯，都是層次更高的商業化市場。這些都是近年來高速發展的熱門行業，是帶動可視化行業發展的客觀依據，我就不一一找公開統計數據佐證了。

而可視化除了商業場景外，還有個在國內做可視化繞不開的話題 —— 政策。

如果具體關注過地產、5G、電動車產業的發展歷程，就應該明白國家意志的貫徹可以怎樣在短時間內催生出市場的高度繁榮（或者泡沫）。

而政策對于可視化的利好，就在于 “數字政府” 概念的規劃中。從幾年前開始就興起的政務數字化轉型，到最近國務院發布的 《關于加強數字政府建設的指導意見》，都是中央直接 “指導” 地方發展數字化的指標，是行政意志與力量的體現。

說更具體點，下面是指導意見中的目標說明，非常直白，大家可以自己體會：

到2025年，與政府治理能力現代化相適應的數字政府頂層設計更加完善、統籌協調機制更加健全，政府數字化履職能力、安全保障、制度規則、數據資源、平臺支撐等數字政府體系框架基本形成，政府履職數字化、智能化水平顯著提升，政府決策科學化、社會治理精準化、公共服務高效化取得重要進展，數字政府建設在服務黨和國家重大戰略、促進經濟社會高質量發展、建設人民滿意的服務型政府等方面發揮重要作用。

到2035年，與國家治理體系和治理能力現代化相適應的數字政府體系框架更加成熟完備，整體協同、敏捷高效、智能精準、開放透明、公平普惠的數字政府基本建成，為基本實現社會主義現代化提供有力支撐。

原文鏈接： http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm

正因國情在此，所以這些年 G 可視化項目才如雨后春筍一般涌現。智慧城市、智慧農村、智慧水利、智慧交通、智慧民政等等，都是借助這股東風蓬勃發展。

所以，商業和政務的迫切需求，催生出一大批可視化服務公司，如 EasyV、ThingJS、觀遠等。即使頭部大廠也生怕錯過這個機會，紛紛組建團隊進行行業布局。如騰訊云的 Raya Data、阿里云的 DataV、網易的數帆等等，都已經小成氣候，初現鋒芒。

市場需求旺盛，規?？焖僭鲩L，前景理應一片大好！但是……

市場總規模的擴張，帶給個體的收益卻不一定有表面看起來那么理想，尤其是設計師崗位。

這要先從常規 UI 設計行業說起，UI 設計師工資已經是國內設計行業工資最高的類型之一，從10年前的屌絲行業到今天能和老牌貴族建筑設計叫板，是非常了不起的成就。

而之所以有這種收入，除了移動互聯網爆發以外，最重要的原因就是互聯網產品的 “利潤率”，可以用非常少量的職員撬動上億甚至上百億的利潤。

如王者榮耀 2021 年全年盈利 28 億美元，接近 200 億人民幣的利潤。一款游戲的利潤直接達到萬科（2021年利潤225億）和中國人保（2021年利潤216億）的水平，他們都是在冊員工超過 10W 人的大型企業，也是國內各自行業里的巨頭，而王者的員工只是他們的幾百近千份之一。

再如螞蟻金服、微信、抖音之類的國民級互聯網應用，都是用極少的員工達到讓人難以置信的估值和利潤，這在傳統行業是無法想象的。

所以能盈利的公司會給員工開出滿是行業紅利的待遇，拔高行業上限的同時，也迫使那些有志于挑戰巨頭的新公司愿意抬高工資價碼，吸引人才。

總結起來，UI 之所以平均收入遠超平面、服裝、工業、室內等老牌設計行業，并不是因為 UI 專業門檻更高，而是以行業規模、項目規模、利潤率三個核心指標的共同作用形成。

其中，項目規模和利潤率的重要性，其實遠遠大于行業規模，這是很多職場新人最想不通的地方。

例如廣告行業已經是一個萬億市場了，除了分眾這家互聯網獨角獸外，其它老牌廣告營銷公司每年財報的營收和利潤大家感興趣的可以去搜搜（下圖為 21 年財報）。

看看他們的營收總額和凈利潤比例，以及員工總數，你自己就會得出，作為普通平面設計師的待遇，是絕對不可能超過頭部互聯網企業的，甚至能達到中游水平都是超常發揮的結論。

行業規模大，但是頭部企業規模和利潤卻不高，除了行業本身的平均利潤率因素外，還有一個原因就是業務是高度分散的，沒有被集中在少數頭部企業，供應商數量龐大，不像多數 C 端市場都由少數幾家公司或者產品把持或直接壟斷。

在可預見的未來，可視化行業也會處于這樣的情況，競爭激烈，利潤率低。而且作為 B 端服務商，不要看各家企業需求旺盛，政府各級單位招標不斷，實際上每個項目的規模都不大，百萬內的項目才占行業的絕大多數，這是不太符合滿足我們收入期待的項目規模。

而單個項目規模在未來高速擴大在我看來也不太現實，有兩個原因，一個是項目使用人數極少（通常也就幾十上百人…），另一個就是對可視化項目實用性的質疑。

如果看過航天相關的報道，就會看到指揮室數據大屏相比我們網上看過的案例比起來，簡陋得發指。這會是因為總局沒有預算，請不起設計師和團隊開發嘛？

為什么航天指揮中心沒有用下面這種 “科技感” 滿滿，復雜的我坐下面保證除了標題一個字也看不見的 “高端設計”？

原因說出來讓人沮喪，因為他們 —— 真的要看上面的信息?。?/u>

真正能發揮可視化價值的場景并不多，很多項目出發的意義，就是為了表面工程（各級ZF單位需求，自行體會），裝飾屬性大于實用性。既然實用性不夠高，很多甲方心里也清楚，是花錢裝裱門面的，那么投入的預算就更不可能太高。

所以，我對可視化行業的整體的發展是認可的，但對單家公司或項目的預期，卻是悲觀的，它們沒法達到我們已經習慣的 C 端和 SAAS 行業的高度。

最后，還要探討下數據可視化中設計師的團隊價值。

我們知道，一個完整的可視化項目設計與開發門檻都是非常高的，但因為高，創造的價值就高嘛？項目營收的成本占比就高嗎？

答案依然是否定的！因為可視化行業的絕大多數項目都是 “傳統” 的外包項目。

不管是商業是政務領域，外包最重要的任務，都是找到業務（中標）。樸素的價值觀會認為，只要技術和服務夠好，業務自然源源不斷，其實不然。技術服務都是后驗的，客戶沒有合作過之前是不知道的，在市場上挑選服務商，可不是打開淘寶買家評論查看分數和具體評價篩選。

所以，外行了解服務商的窗口，更多是通過熟悉的中間人介紹，或者銷售的嘴。誰能拿到項目，誰就為公司創造了最大的價值。后面怎么做那是后面的事，換誰做不是做……

這就是最常見的外包企業思路，所以技術人員或者設計往往都是消耗品，沒有那么強的依賴性。而在具體外包實踐環節中，項目的執行決策也和一般 B 端、G 端項目不同。

我以前一直強調，B 端項目的存在價值，是用來解決業務問題，為企業 —— 降本增效。但是可視化項目往往不是用來解決問題，而是用來 —— 解決產生問題的人！

尤其是面向政務的項目，在領導的需求面前，是沒有體驗這一說的，首先考慮的應該是 ”科技感“（結合前文理解），不然怎么展示自己貫徹上層指導意見……

這種環境對于創意類職業是非常不利的，一方面創造的價值并不顯著，另一方面是由別人 “教你” 怎么做設計。長此以往，你會越來越缺失職業競爭力和發展可能。

問題二，則是因為可視化項目獨立開發成本太高昂，做的視覺內容又非常固定。于是有實力的團隊就紛紛投入可視化編輯工具的研發，解決最麻煩的底層圖形方案。

這和 B 端的前端開源框架非常類似，把底層的代碼、交互、動畫、性能優化都幫你做好了，設計師和程序員可以用非常省事的完成項目的視覺內容落地。

但是，常規 B 端管理項目中，界面樣式一直就不是最重要的事情，而是解決復雜頁面流程和組件交互的問題。所以資深的 B 端設計師樂于應用第三方的框架來完成復雜的項目。

而在可視化領域中，多數項目并沒有那么多和復雜的交互需要考慮，視覺展示效果才是第一位，絕大多數團隊應用第三方框架是大勢所趨。核心工作內容被影響，那才叫觸及靈魂的打擊。

所以，在我看來可視化設計師可以創造高價值的場景，只會出現在兩種團隊中。

第一種，是給其它可視化團隊提供圖形服務的 SAAS 工具，比如 Raydata、EasyV 這類。都需要團隊有非常優秀的前端程序員和技術積累，換句話說，就是既要有技術實力又要有資金保障的團隊。

第二種，則是走優質項目輸出路線的小團隊或公司。會有一些優秀的開發人員坐鎮，再由設計師主導來推動業務發展，不會什么項目都做，會選有價值的用心交付。例如早年的 UI 外包團隊 ARK、Eico、TangUX 等都是這種路線。

這兩種對比目前海量的服務商來說都是鳳毛麟角，第一種類型是可視化設計師發展最好的歸宿，因為設計產出和圖形技術發展高度捆綁，只有這樣的團隊才會最早最快接觸新的專業技術方案。

除了這兩類，不要對其它外包類公司有太多的期待。在整個互聯網行業中，成熟產品團隊非常不喜歡招外包設計師不是沒有原因的。

至于未來是不是可視化內容會在 C 端領域打開局面，發展出一些新的應用場景，我就不過早下定論了。

最后，做個總結，給目前還沒有進入可視化設計行業，或者是誤打誤撞進入這個行業的設計師一些職業方向的建議。

可視化設計行業和廣告業非常類似，就是從業人員收入構成是沙漏狀，而不是像 UI 這樣呈金字塔狀的，缺乏健康的增長梯度和充足的腰部崗位。

可視化設計師從菜鳥進入專業階段所需的知識量更大，準備周期更長，技能門檻更高。在初中級階段和一般 UI 行業對比起來 —— 毫無性價比。

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

畢竟行業體量大，當然就會有真正優質的崗位出現，只是它的門檻高，沒有那么多水分能擠。

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

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

希望得到建議咨詢、商務合作，也請與我們聯系。 



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





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司