圖標設計的7個原則-清晰度、可讀性、對齊、簡潔性、一致性、個性化、易用性

創建高質量的圖標需要有效的方法、疊代調整、大量實踐和一雙挑剔的眼睛。本文，我們通過7個設計原則和實例來說明如何創建高質量圖標。

清晰度

圖標的主要目的是快速傳達其表達的含義，即概念。

這這一系列符號中，你對哪些比較熟悉呢？如果考過駕照，你可能會認出好多個，但其中一些圖標並不直觀，需要一本駕駛手冊才能完全弄明白。

下邊列出了易於識別到很難分辨的幾個：

當圖標使用我們不熟悉的隱喻時，理解就變得很困難。安全帶「提示燈」（左起第三個）非常直觀，我們一看就能明白。「電動助力轉向系統警告燈」（最右邊）的可識別性就很不清晰。

傳達信息不清楚的圖標讓人不不安，尤其是在駕駛過程中，甚至會造成危險。

下邊是一些我們常見的圖標：愛心、警告、音樂和方向指示。

箭頭是在路標中最經常使用的符號：

NYC subway sign (Source: Standards Manual)

成功的圖標符號不僅對多數人來說易於理解，而且在不同的文化、年齡和背景下都是通用的。從多數使用人群的角度出發，使用能與之產生共鳴的隱喻和色彩，更容易創建出成功的圖標。

如果其表示的想法過於抽象，則用單個獨立的圖標可能無法清晰的表達。這種情況需要和文本標籤搭配使用。

可讀性

一旦使用圖標，就必須保證其可讀性。

由於細節太過精細，上方的第一個圖標很難被清晰的識別。

下邊的第二個圖標也有類似的問題，兩部分形狀之間的空間太小了：

稍作調整後的效果好了不少：

處理多個形狀時，請在它們之間留出足夠的空間。過細過多的筆觸會使圖標難以閱讀。

Google Maps的圖標雖然很小，但可讀性就非常好：

對齊

為了確保圖標視覺上的平衡感，需要做好對齊。

在這個播放圖標中，雖然三角形按照等分尺寸放置在了圓形的中心，但看起來位置是偏的。其重心明顯是在左邊，失去了平衡。

排版人員對字體進行細微的調整，以實現視覺上的平衡效果。

設計人員對播放圖標進行了細微的調整，把三角形向右移動：

看上去好多了。

不要簡單的以數值為依據，眼睛才是最終的檢查工具。

簡潔性

僅用幾句話就能清楚的表達一個想法，會讓人感覺高效又優雅。

如：傳授你的知識給別人，可以增強你自己對本學科的理解。

我們可以更簡潔的說：

教會別人的同時，你也在進步。

Beautiful。

看下邊這個圖標

再看這個圖標的簡版：

簡潔是圖標設計的一個特性，更適合在較小的螢幕上使用。減少不必要的細節，能增加視覺上的輕鬆感。

在UI中，簡潔的風格更利於理解和布局。這是Telegram的圖標，簡潔而有趣：

有時，UI圖標採用更為具體的說明性樣式。這些是Yelp的熱門食物的一些圖標，你看那隻蝦精緻又生動：

在手機、平板和PC上的部分應用程式圖標，會通過添加適當的細節以突出其個性和識別性，這就意味著需要更多的色彩和深度。配合其他的場景的展現，這些圖標更能體現出品牌和產品的特性。

一致性

如果要創建一系列在同一場景下應用的圖標，務必保持一致的樣式規則。

在iOS13之前，Apple的圖標具有各種筆觸、填充和大小：

仔細觀察一下，是不是有些圖標感覺上比其他圖標要更重一些？

任何給定的圖標都具有一定的視覺權重，該視覺權重由諸如填充、筆觸粗細、形狀大小等因素決定。在一個系列中保持這些參數的值相同，可以保證圖標一致性的實現。

蘋果公司最近推出了SF Symbols。SF Symbols擁有9種權重和3種比例的圖標風格。各種填充和輪廓變化使得圖標更具和諧感。

對於圖標家族來說，保持一致性並不是一件容易的事情，尤其是有很多作者時。設定明確的設計原則和具體規則就尤為重要。

下邊這組圖標由很多設計師創建集合而成，共包含700多個，設計師們都遵循了同一設計原則和嚴格的具體規則。儘管每個人的圖標形狀各不相同，但它們的權重具有相當的一致性，並且能很好的應用在同一場景中。

個性化

每個圖標都有其各自的特性或風格。如何與眾不同，怎麼表達品牌，傳遞什麼情緒？

Waze的介面之所以受歡迎很大程度上取決於其圖像。這些色白斑斕有親切感的圖標表達著：「我們很可愛！」

Twitter的圖標反而明亮、溫和、清晰：

Sketch的圖標充滿了精緻感：

Freemoji圖標可愛又乖巧：

Android圖標可匹配不同心情的螢幕主題：

易用性

一個系列的圖標只有完美適配後，才算繪製完成。圖標繪製後，需要進一步的測試和調整，以便設計師在螢幕和印刷中使用及工程師將其進行編碼。

高質量圖標需要有組織、有據可查並在上下文中進行測試。幸運的是，它也受到圖標管理器的自定義工具的支持。

有組織

保持主文件整潔，並做好文件命名，以便於查找。選用合適的分類方法，如字母排序、類型等。

有據可查

闡明圖標系列的主要原則：

Example principles from the Phosphor icon family (a riff on what we covered above):
• Clarity. Be clear first and foremost. Make the icon recognizable and readable. Never sacrifice clarity of what the icon represents.
• Brevity. Use as few details as possible. Phosphor’s style is reductive. Be concise and intentional with every stroke to communicate the essence of what’s being represented.
• Character. Be quirky. Add unique details sparingly to bring a little warmth and play to what may otherwise be a very austere set.

列出技術性規則：

Example technical rules from the Phosphor icon family:
• Use a 48x48px canvas
• Use a 1.5px centered stroke
• Use rounded end caps
• Use contiguous strokes unless broken segments are helpful for comprehension
• Use straight segments, perfect arcs, and 15° angle increments where possible
• Adjust curves when necessary to maintain the design principles
• Use whole, even number increments for measurements where possible; fold down to 1px and .5px if necessary
• Use the following shape keylines: 28x28px circles, 25x25px squares, 28x22px landscape rectangles, 22x28px portrait rectangles
• Keep a 6px thick trim area

重複這些步驟，並根據需要制定參考文檔：

• Material System Icons
• IBM的UI icons、App icons和圖標指南
• Shopify PolarisIcons

測試

檢查圖標一致性。確定圖標在不同應用場景中的效果。

將圖標彼此並排放置有助於檢驗我們的上述原則：（清晰度、可讀性、對齊、簡潔性、一致性、個性化、易用性）

定製工具

最後，如果你有資源，為了方便使用圖標，那就創建工具吧。

通過使用自定義圖標庫，Meterial的圖標更易於訪問。搜索所需的文件，可以下載不同的文件格式、色彩和大小的樣式圖標。

Font Awesome，雖然沒有應用上述某些設計準則，但它們的圖標具有難以置信的易用性。它們提供了多種圖標使用方法：前端框架庫，CDN，圖標字體或RAWSVGs。Awesome還是一個開源項目，它們分享各類圖標，作品中的，最新發布的等。

資源

圖標庫

推薦幾個：

Feather，一組精美的200多個額外的最小輪廓圖標，可以很好地縮放

Material system icons,，5種樣式的UI的1000多個實用圖標

Nucleo，約3萬種圖標，有3種樣式：輪廓，扁平/彩色和字形類

Streamline，一組精美繪製的3萬多種線型圖標，分為3種字重

圖標聚合器

該Noun Project，但在質量方面參差不齊，是搜索有關樣式和隱喻靈感的好方法

圖標管理員

使用Nucleo app，可以導入圖標集，查看，導出並將其拖放到首選的設計軟體中

圖標文檔

在設計文檔方面，Material是最好的：Material System icons,Product icons

IBM提供了出色的視覺輔助工具：UI圖標，APP圖標以及圖標的貢獻指南

Shopify提供一些最好的指南：ShopifyPolaris圖標

​ Written to the sounds of: The Black Dog and Autechre

文中連結，請查看原文。