優(yōu)秀的圖標，少不了這7個底層設計原則

0 評論 10087 瀏覽 23 收藏 18 分鐘

對設計師來說，要設計出一套高質(zhì)量的圖標體系需要深思熟慮的方法，一雙像素眼，不斷迭代和大量的實踐練習。本文將通過7個原則和案例來說明一個優(yōu)秀圖標的特點，目的是找到好圖標的關(guān)鍵屬性，從而設計出高質(zhì)量的圖標。

關(guān)于圖標這方面的設計文章我發(fā)過好多篇了，但從找我?guī)兔醋髌芳呐笥涯强吹剑瑘D標問題依然是非常多。

大家不能只是看了，還要去用呀。

可能又有人會說，到底怎么用呢？就比如說今天這篇文章，你就對照著自己設計的圖標，一條一條的去核對，是否都符合這些原則。其實，最后不論是否符合這些原則，多次對照后，才可能真正內(nèi)化為自己的能力，設計的時候才能自然地設計出好的圖標了。

今天要介紹的圖標原則共有7條：清晰，易讀，平衡，簡潔，一致性，個性，易用性。

01 清晰

圖標的主要目標是快速表達一個概念。

圖片來源：Prius Prime instrument cluster (Source: 2020 Manual)

在這一連串的圖標中，哪些對你來說是清晰易懂的？隨著時間的推移，老司機們可能會認識這些圖標，但其中一些圖標并不直觀，需要一本手冊才能讀懂它們的意思。

以下是用戶測試的結(jié)果：

當一個圖標使用了一個不熟悉的隱喻，它很難被理解。安全帶上的提示燈(左起3號)是很字面的，我們可以很快地掌握它。電動助力轉(zhuǎn)向系統(tǒng)(最右邊)則非常模糊，很難記得住它的意思。

我遇到過的一些最不清晰的圖標是在攝影應用VSCO中。你能猜出它們的意思嗎?

從左到右，這些導航圖標表示:Feed、Discover、Studio、Profile和Members。混淆VSCO的代價很低，因為它只需要點擊幾下就能弄清楚每個圖標代表什么。

圖標發(fā)展歷史中，抽象的符號被反復使用，從而逐漸標準化，目的是建立共同的理解。1984年，Susan Kare受命為蘋果鍵盤上的“功能”鍵設計一個圖標。她從北歐的地名符號中獲得靈感，設計了這個抽象的符號。

由Kare設計的mac 功能鍵圖標

這個圖標已經(jīng)成為一個經(jīng)典，代表了我們所說的蘋果鍵盤上的命令符號。（彩云注：這個功能鍵的作者也分享了她的創(chuàng)作過程https://vimeo.com/97583369）

Susan Kare 能夠發(fā)明這個符號是因為當時還沒有一個格式的標準。在設計圖標時，考慮是否存在一個現(xiàn)有的隱喻，比如設置的齒輪，或者重新發(fā)明一個全新的合適的圖標。

下面是一些讓人感覺更熟悉的圖標——點贊、警告、音樂和前進方向的圖標:

來自 Phosphor Carbon 圖標體系的熟悉隱喻

箭頭圖標的作用非常強大，通常用于尋路。

圖片來源：紐約地鐵標志 (Source: Standards Manual)

圖標被設計最成功的情況是不僅對一群人來說很容易理解，而且在不同文化，年齡和背景下都是通用的。考慮目標用戶，使用能引起他們共鳴的隱喻和顏色。

02 易讀

一旦設計好了容易理解的圖標，然后就是確保它是可讀的。

應用 Amtrak中的圖標

第一個圖標由于細節(jié)太多，以至于很難快速辨認出它是什么。

Transit應用有類似的問題。他們的剪貼板圖標負空間太小，導致無法閱讀。

細微的調(diào)整會帶來很大的改善：

調(diào)整后的剪貼板圖標

當設計多個形狀時，在他們之間留出足夠的空間。更細或更多的圖形會使得圖標變得更加難以閱讀。

谷歌地圖做了一個很好的設計，他們所設計的圖標在非常小的尺寸時也非常易讀。

03 平衡

為了確保每個圖標視覺平衡，需要在視覺上對齊它的元素。

不平衡的游戲圖標

在這個播放圖標中，雖然三角形被標準的放在圓圈的中心，但我們的眼睛告訴我們，它是不平衡的。三角形較寬的部分感覺比較“重”，使得它好像在向左傾斜。

就像字體設計師做精細的調(diào)整來設計字體的視覺平衡一樣。

UI設計師也需要做類似的調(diào)整來平衡一個圖標。為了優(yōu)化好上面那個播放圖標，稍微向右邊移動一下元素：

圖標變得平衡了，是不是好了很多？

我們從這里學到的一個點就是：不要簡單地相信數(shù)字，要用眼睛來檢查。

04 簡潔

在日常生活中，用幾句話就能很好的表達想法，感覺既高效又優(yōu)雅。

“向別人講述你所知道的內(nèi)容可以強化對這門學科的理解。”

說的直白一點：

“一人為師，兩人學習?！?/strong>

谷歌規(guī)范中的圖標很好表達了系統(tǒng)圖標的簡潔性，而不是下面這種過于復雜的圖標。

簡化后的圖標：

簡潔適合圖標設計，因為我們經(jīng)常在小畫布上工作。設計適當?shù)募毠?jié)，不要使用過多就好。

在界面中，一種簡化的風格能讓人容易理解，并能弱化自己的存在，從而凸顯內(nèi)容。

Telegram圖標

有時候，UI圖標會呈現(xiàn)出一種更具說明性的風格。在應用Yelp中的圖標非常的精致。

Yelp icons by Scott Tusk

對于代表手機，平板和桌面應用的主圖標，適當?shù)募毠?jié)可能意味著又更多的空間感和顏色。因為用戶能夠理解它們在主屏，docks欄，應用商店中的印象，這樣的圖標能夠很好的表達品牌和產(chǎn)品。

Apple app icons for Procreate, Firefox, and Netflix

05 一致性

為了保持圖標的和諧統(tǒng)一，要始終保持相同的視覺規(guī)則。

在iOS13之前，蘋果圖標有各種描邊，填充和大?。?/p>

Icons from Apple’s Home Screen Quick Actions pre-iOS 13

斜視這一組，有些圖標感覺比其他的更重嗎？

任何給定的圖標都有一個特定的視覺“重量”，由填充，描邊寬度和形狀等屬性來決定。在一個集合中保持這些參數(shù)相同可以構(gòu)建一致性。

蘋果最近優(yōu)化了他們的圖標，現(xiàn)在看起來更加統(tǒng)一和諧了。他們把圖標的兩種不同狀態(tài)之間的填充和描邊形式做了規(guī)則統(tǒng)一，使其擁有了更高的一致性。

Icons from Apple’s SF Symbols

對于一個大的圖標庫來說，保持一致性并不是一件很容易的事情，尤其是涉及到多個作者的時候。重要的是要有清晰的原則和規(guī)則來遵循。

Phosphor圖標合集保持了700+圖標的一致性，堅持相同的準則，并嚴格測試每個圖標。雖然他們每個形狀都不一樣，但它們都有相同的重量，而且能很好地結(jié)合在一起。

Subset of the Phosphor Carbon icon family

06 個性

每個圖標集都有自己的風格。它的獨特之處是什么?關(guān)于這個品牌它表達了什么?它創(chuàng)造了什么氛圍?

Waze icons

Waze 受人喜愛的界面在很大程度上依賴于它們的圖標。這些五顏六色、厚實的圖標傳達出:“我們很古怪!”的意味。

Twitter的圖標圓潤，清晰：

Twitter icons

Sketch的圖標精致:

Sketch icons by Janik Baumgartner

Freemojis 的圖標非?？蓯?

Freemojis from Streamline

Android圖標包為主屏幕主題提供了多種多樣的風格——這里有抽象的、像素的、氣泡的和霓虹燈的風格:

Top to bottom, left to right: iJUK, PixBit, Crayon, Linebit

07 易用性

一個圖標設計的終點并不是單純的好看。它還需要進一步的測試和準備，以確保后續(xù)能夠輕松的設計出新的圖標，并運用與各種場景，比如手機上，打印出來等等，然后開發(fā)也能夠輕松地將圖標寫到代碼里去。

一套非常好的圖標庫應該是有組織，有文檔記錄，并被測試過的。

1. 有組織

保持主文件的整潔，圖標命名邏輯清晰，便于搜索。需要考慮最好的分類方式，是按字母順序？按大??？還是按類型？

A Nucleo Sketch file, organized by type across pages

2. 圖標文檔

闡明這套icon的主要原則:

圖標原則示例:

  • 清晰度。首先要清楚，使圖標可識別和可讀。永遠不要犧牲圖標清晰度來換取視覺效果。
  • 簡潔。使用盡可能少的細節(jié)。每一筆都要簡潔而有理由地傳達所要表達的本質(zhì)。
  • 性格。有鮮明的性格，謹慎地添加獨特的細節(jié)，給原本非常簡樸的畫面帶來一點特色。

列出具體參數(shù)規(guī)則：

參數(shù)規(guī)則示例:

  • 使用48x48px的畫布
  • 使用1.5px居中的筆畫
  • 使用圓角
  • 使用連續(xù)的筆畫，除非斷開的部分有助于理解
  • 使用直線，弧線，并在可能的情況下以15度角為增量，在必要時調(diào)整曲線以保持設計原則
  • 在可能的情況下使用整數(shù)、偶數(shù)增量進行設計;
  • 使用以下標準尺寸:28x28px的圓，25x25px的正方形，28x22px的橫向矩形，22x28px的縱向矩形
  • 保持6px的圖標內(nèi)框范圍

一些優(yōu)秀的圖標系統(tǒng)規(guī)范

Material System icons

https://material.io/design/iconography/system-icons.html

IBM’s UI icons, App icons, and contributor guide for icons

https://www.ibm.com/design/language/iconography/ui-icons/design

Shopify Polaris Icons

https://polaris.shopify.com/design/icons

3. 測試

檢查圖標的一致性。確保圖標在上下文中正常工作，并在更大的視覺系統(tǒng)中也能協(xié)調(diào)工作。

將圖標放在一起有助于驗證我們的原則:清晰、易讀、對齊、簡潔、一致性和個性:

Test sheets used in Phosphor’s QA process

4. 自定義工具

最后，如果你有資源，創(chuàng)建工具來方便圖標的使用。

谷歌圖標容易使用與他們的自定義圖標庫很有關(guān)系。

Material’s easy-to-use icon library

加上文字說明更好，雖然在上面的一些原則上沒有標記，但已經(jīng)使他們的圖標非常容易使用。他們提供了各種方法來使用他們的圖標:通過他們的前端框架庫，CDN，圖標字體，或原始的svg。

Font Awesome’s Icon Leaderboard

最后彩云再多說一句，看過很多文章，如果缺少練習，還是做不好，你同意嗎？所以看完文章，就趕緊練起來呀！(簡直苦口婆心)

#推薦閱讀#


被說圖標細節(jié)不夠，到底差在哪？高手總結(jié)了這10條關(guān)鍵原則

被說UI界面細節(jié)不夠，到底差在哪？大佬總結(jié)了這些關(guān)鍵原則

簡單實用，快速提升UI水平的8個技巧

 

原文：https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2

作者：Helena Zhang

譯者：彩云Sky；公眾號：彩云譯設計

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
彩云sky
騰訊高級視覺設計師 | 公眾號：彩云譯設計
102篇作品 1466860總閱讀量
03-258171 瀏覽
用戶感知設計—趕集真實感知力升級實戰(zhàn)！
09-041140 瀏覽
藥店論語——連鎖藥店銷售額下降解決方向（商品、服務）
12-083434 瀏覽
美團買菜，不想困在“買菜”里
03-287926 瀏覽
ChatGPT能夠如何改變教育直播場景？
09-114574 瀏覽
B端產(chǎn)品幫助指南設計分析：提升用戶體驗和工作效率
評論
評論請登錄
  1. 目前還沒評論，等你發(fā)揮！