1.3 如何建立統一風格

在應用界面設計中，功能圖標不是單獨的個體，通常是由許多不同的圖標構成整個系列，它們貫穿于整個產品應用的所有頁面并向用戶傳遞信息。因此，功能圖標應該風格一致，包括造型規則、圓角大小、線框粗細、圖形樣式和個性細節等元素，只有具有風格一致的圖標設計，才能帶給用戶高度統一的視覺體驗。良好的視覺體驗是用戶在這一頁面看到一組圖標不會因在另一頁面看到另一組圖標而感到錯愕，認為是身處兩個不同的應用，而應該是符合用戶的心理預期。接下來，我們就來學習如何繪制整套統一風格的功能圖標。

圓角

無論是面形圖標還是線形圖標，圓角最能決定它們的氣質。大圓角風格的圖標造型圓潤，給人可愛活潑的感覺。例如，iOS的設計語言是圓角矩形，因此在iOS系統應用中的功能圖標都具有圓角這一元素。小圓角或趨向直角風格的圖標造型簡潔，給人穩重直接的感覺。例如，Material design中定義了一種小圓角圖標的設計風格。下圖分別為圓角和直角風格的相機，建議在繪制面形圖標時，即使是直角風格也最好給主體圖形增加一點點圓角，否則繪制出來的圖標帶有一種類似紙片鋒利的感覺。

斷線

線形圖標本身自帶線框描邊這一統一元素，通常它們是封閉的路徑，而在此基礎上又延伸出了一種新的變體，那就是斷線風格，即在線形圖標的局部進行斷開，呈現一種開放的路徑。斷線圖標像是由一根線條扭曲而成，這種精心處理過的風格又比單純的線形圖標更具有設計感。

繪制斷線風格的圖標需注意斷線的位置，不可隨意截斷，而要根據圖標的造型結構針對性地處理。通常選擇圖標的角落作為斷線的位置，無論如何也不要破壞圖標原本的造型，使得圖標的識別性變弱。下圖列舉4個斷線位置圖標仍然延續了線條的走向沒有影響圖標的識別性，都保持了相機的外形特征。

斷線選擇水平和垂直的位置，通常會破壞圖標的美觀性，例如錯誤1；不選擇具有識別性的位置，錯誤2中圖標上部凸起是相機非常明顯的特征，在此斷線是不正確的；斷線不宜過短，錯誤3中過短的斷線不宜被發現且可能會被認為是設計缺陷，最短斷線建議保持在圖標線框粗的2倍；斷線也不宜過長，錯誤4中過長的斷線易破壞外形且增加整套圖標的繪制難度。

統一元素

在圖標的構造中使用某種統一的元素，能直接體現出一致性來。Google Play的家族圖標高度一致，全新的子品牌圖標設計使用母品牌的三角形作為統一的外形和背景，使得無論何種外形的圖標都保持著一致的視覺風格。

統一元素不是隨意設計的，既要提升圖標的設計感，又要符合產品的定位。沒有想法地隨意添加元素可能會畫蛇添足，而一個好的元素則會給產品大大加分。阿里健康的整套圖標都繪制了一個可愛的笑臉符號，在人們的認知中笑臉代表健康、快樂、服務、親和，它與阿里健康的產品屬性非常契合，因此給用戶帶來非常深刻的記憶點。

視圖

在應用界面設計中，功能圖標通常繪制成正面平視圖，這樣的造型簡單直觀，能迅速被用戶認知，以提高產品效率。同時，平面化的圖形亦可降低整套圖標的繪制難度以及能更好地統一風格。以箱子為例，將其一個面的外觀、特征等抽象繪制出來的圖形最簡單，也易于投射到大腦中快速被認知，而兩個面至三個面則使繪制和認知難度逐步增加。

更為嚴謹的繪制還需考慮正面和側面之分，這是很多設計師常常忽略的地方，雖然在風格一致的情況下，正面和側面繪制的圖標排列在一起也能和諧共處。下面一組正面繪制的圖標中有一個是側面繪制，你發現了嗎？

填充色彩

色彩也是建立統一風格的一種方式，給圖標填充顏色能迅速抓住用戶的注意力，同時描繪填色的圖標更加富有情感和生命力。在繪制填充時，需注意色彩的飽和度一致、色彩搭配協調等。以adline的作品為例，所有圖標都填充了咖啡色的線框和斜虛線，在圖形局部填充同樣色值的配色組合，令整套圖標的視覺效果非常驚艷。

品牌基因

通過品牌Logo的視覺元素來延續圖標的設計，可以帶給用戶由外而內的一致感。在優酷最新的應用中，功能圖標運用其品牌的紅藍主色作為填充，藍色填充主要結構，紅色填充局部，并將紅藍色進行疊加，形成非常有趣的視覺效果，也使得這一套圖標風格獨樹一幟，具有非常鮮明的記憶點和識別性。

極簡風格

極簡風格的圖標設計具有最簡單的外形，給人一種抽象的聯想，往往這種風格是最能體現產品氣質的，但也是最難設計的。36Kr的整套圖標具有棱角分明的塊狀，除了圓沒有任何彎曲的元素，每一個圖標都是由相同色相但不同飽和度的兩個部分組成，帶給用戶非常深刻的印象。因為極簡風格的圖標過于搶眼，因此要與整體風格協調，否則就會不倫不類。值得稱贊的是，在36Kr中，從圖標到界面設計都保持著極簡風格。

總之，要想在繪制整套圖標時建立統一風格，就要從外觀和顏色上確立主風格，在局部尋求個性特征，將兩者結合，并融合產品屬性和符合用戶定位，先在腦海中構思出清晰的概念，然后用鉛筆在稿紙上描繪，最后確立一個最佳風格上機繪圖，只有不斷地思考和打磨才能創作出完美的設計方案。