ICON設計使用手冊:如何設計一個優秀的圖標?

2020-12-16 人人都是產品經理

圖標設計,即icon設計,在界面設計中佔有很重要的位置,一個好的圖標,可以讓用戶「一秒即懂」,如何設計出優秀的圖標,這篇文章給你解答。

在圖形交互界面(GUI)中,圖標(icon)是一種最常使用的設計元素之一。

怎樣設計一個優秀的圖標呢?

在這篇文章中,我會分享一個簡單的使用清單/使用手冊,幫助你如何把圖標更好地展示給你的用戶。

一、易識別

清晰度是優秀界面的最重要特徵,但不幸的是,圖標往往不夠清晰。

圖標必須第一時間傳達最重要的信息。當圖標不能夠立刻表達出所代表含義時,它就會變成一種「視覺噪音」,失去了圖標存在的意義。

優秀的圖標即不用閱讀標籤或文字提示,就可以被認知理解。

幾個簡單的規則,可以幫助你避免使用不能傳達其含義的圖標。

1. 嘗試使用用戶熟悉的icon

用戶對於圖標的理解,一般基於其使用與認知的經驗。這就是為何使用用戶熟悉的圖標效果會比使用獨特的圖標要好。

依靠通用型圖標。就像屋子、列印、玩遊戲和搜尋等等這些,不需要進行任何解釋的圖標。

(通俗易懂的圖標)

調查研究,檢查你的競爭對手所用的圖標。

2. 不要使用有歧義的icon

應該避免使用有多重含義的圖標。舉例來說,「心形」圖標和「星星」圖標都可以作為【喜歡】或將內容起來。當一起使用時很可能造成用戶幹擾。

(心形和星星圖標有歧義)

3. 測試icon的含義表達

不要聽從一些類似「人們每天都用我們的產品(APP),他們肯定能理解圖標的意思」的話。

請測試你的圖標!

【5秒鐘原則】是一種測試圖標的有效方法。問問用戶他們希望這個圖標代表什麼?

如果需要花費5秒鐘以上去思考這個圖標,那麼這個圖標就不可能有效地傳達其意義。

4. 測試icon的可拓展性

測試你的icon在類似15x15px的尺寸下是否依舊清晰。

(音樂圖標縮放清晰)

5. 給陌生的icon附上標籤文字

如果你還是想要使用特殊的圖標,可以考慮在旁邊給圖標附上文字標籤。

(圖標+文字)

6. 不要重新定義icon的含義

通過更改圖標的含義來混淆用戶相當容易。當圖標的功能與預期認知不同時,會造成用戶混淆。

不要重新發明輪子!

即使意義上的細小區別,也會妨礙到用戶理解圖標的能力。

很長一段時間,Google Docs使用的圖標看起來就像一個漢堡包。大多數界面使用類似的圖標來表示主導航菜單,但Google重新定義了它的含義並將其用作「後退/返回」操作。當用戶點擊此圖標時,他們會被重新引導到Google文檔主頁。

二、視覺舒適

可以通過插畫、顏色以及圖標傳達品牌個性。如果做得好,圖標肯定可以增強設計的美感。

1. 減少圖形細節中的數量

KISS原則適用於所有UI元素,包括圖標icons。保持圖標的簡潔性,並且遵循以下兩條原則,避免沒必要的複雜性:

限制顏色使用數量,使用不超過3或4種顏色,保持設計簡潔。通過聚焦於對象的基本特徵,來減少圖形設計細節的數量。儘量保持設計的概要性 ,因為設計概要性的在不同的界面和解析度都可以進行轉換。

(請勿過於花俏,避免設計的圖標上包含太多的視覺細節)

2. 通過添加動畫效果創造愉悅體驗

動畫效果可以表達清晰功能的目的,並且可以創造用戶愉悅體驗。

對於形態改變的情況,使用動畫效果可以創造更好的動態體驗。

三、合適尺寸

圖標應該很好地作為用戶的目標點。

設計師常見的錯誤之一,是在手機上為圖標留下太小的空間。當你為觸摸進行設計時,確保圖標能夠足夠大方便手指的點擊。

參考:目標在屏幕中點擊範圍為7-10mm。並且,請確保在目標對象之間添加填充,以防止不準確的點擊。

(實際目標尺寸=視覺目標尺寸+填充 圖片:Microsoft)

四、一致性

一致性是設計中的關鍵原則。一致性設計是一種直觀設計。當使用相似的元素且具有一致的外觀和功能時,可以讓可用性和可學習性都得到提升改善。

1. 內部一致性

圖標設計應該保持視覺統一,你決定用於你的產品的圖標,應該保持統一樣式。

理想情況下,它們看起來應該是一位設計師設計的。以下是你需要遵循的關於創造統一性的幾條原則:

使用相同顏色或者顏色組合在你的圖標上;使用相同的形狀和其他樣式屬性(例如邊框的大小)。

(沒有凝聚力的圖標看起來很糟糕)

2. 與平臺保持一致

確保你的目標風格與平臺一致,它們會讓用戶更容易去理解。

(蘋果iOS和Google 安卓圖標)

3. 與產品系列保持一致

如果你擁有整個產品系列,確保一致的圖標風格(或至少類似)應用在你所有的產品中。

總結

通常來說,為你的項目尋找一個合適的圖標並不容易。這就是為什麼我分享這個資源列表來讓這個任務變得簡單。

我會定期更新列表,以便你可以找到更有用的資源。

作者:Nick Babich

翻譯:JaylonG

原文:http://babich.biz/icon-checklist/

#專欄作家#

JaylonG,人人都是產品經理專欄作家。一枚擅長用產品思維看問題,用邏輯思維做分析,用情感體驗做設計的產品愛好者。愛好廣泛,歡迎交流,拒絕水友。

本文由原創發布於人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash ,基於 CC0 協議

相關焦點

  • 一個真正優秀的圖標,少不了這個7個底層設計原則
    下面,我將通過7個原則和大量的例子來說明一個優秀圖標的特點,目的是找到好圖標的關鍵屬性,從而設計出高質量的圖標。 1、清晰 圖標的主要目標是快速表達一個概念。
  • 7大原則,帶你設計出更優秀的圖標
    想要設計一套高質量的圖標,就需要一套成熟的技巧、訓練有素的眼睛、不斷的練習和臨摹。而就將通過7大原則和大量的案例來說明優秀圖標的特點,使你了解優秀圖標的共性,設計出更優秀的圖標。,因為我們經常在小尺寸上進行設計,注意圖標要使用適當的細節量,不要使用過多的內容在用戶界面中,還原性風格可以理解並為內容騰出空間。
  • 4496+免費圖標icon資源,提供SVG、EPS、PSD、PNG格式下載
    也正好和我的公眾號頭像呼應正好之前收藏過一個免費可商用的圖標網站iconmonstr這個圖標網站有非常多圖標 icon 素材提供多種格式下載最最最重要的是:免費可商用!!!說換就換你們現在看到的這篇文章的封面圖(首圖)就使用了 iconmonstr 的圖標 icon  (圖標名:iconmonstr-cat-1)iconmonstriconmonstr 是由一位擁有15年專業圖標 icon 設計經驗的德國高級設計師 Alexander
  • 4款免費圖標素材網站:設計PPT必備
    1、iconfrontIconfont是國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。阿里巴巴體驗團隊傾力打造,設計和前端開發的便捷工具。2、easyiconeasyicon提供超過六十萬個SVG、PNG、ICO、ICNS圖標搜索、圖標下載服務。搜索結果可按照顏色、熱度、尺寸進行排序。
  • 什麼是圖標設計,圖標在UI設計界面當中起到什麼作用
    圖標設計(Icon Design),是設計師在入門界面設計的必經之路,圖標是透過「符號」來簡化文字,主要是用來指示或暗示行為,在界面設計上我們會使用大量的圖標來節省空間,也可技術性的避免一些跨國語系的問題,常見的圖標例如,分享、贊、搜尋、地圖…等等,光聽到這些名詞,多數的人應該也能快速的聯想到圖標樣式了吧,網絡上對於圖標細節的討論很少,本篇就以界面設計常用的圖標來做更深入的討論
  • 為什麼你的圖標設計總是差點「感覺」?
    創建高質量系列圖標,你得使用一套周到系統的方法,需要有訓練有素的雙眼,大量的迭代學習,以及堅持實踐,才能做到。下面,我將結合7項設計原則,和大量的實際案例,來為你詳細說明,如何創建高質量的圖標。掌握這些設計原則,就是創造出優質圖標的關鍵。1、清晰圖標存在的目的,是快速傳達概念。
  • 第十四期天氣icon原創設計
    @BigD-北京-小啊何對於三個天氣的小捲毛,個人是愛不釋手,如果可以增加一套背板,相信可以在天氣比賽裡拿到一個不錯的名次,幾點瑕疵,主題是三個元素,那最好就不要添加其他的天氣元素,而且第二種雲彩的造型(最下面一行左邊兩個雲彩
  • 一個Tip 讓你的 icon 更討喜:流行 icon 分析總結與運用
    編輯導讀:圖標是用戶使用產品的第一印象,飽滿的圖標會在視覺上給人舒適感。如何畫一個飽滿的圖標呢?本文將從四個方面展開分析,希望對你有幫助。Hello~大家好,這次跟大家分享一個非常實用的設計方法:飽滿性應用。先說下我是怎麼認識到圖標的「飽滿性」的。
  • 「譯文」如何設計一套像素完美的icon
    他們可能會有不同的大小和形狀,但是最後他們會看起來像一套icon。技巧3: 使用標準尺寸如果你的需求方不要求一個特殊的尺寸,請使用安全方法即使用標準的尺寸(比如:16x16、48x48、64x64、92x92、等等)。如果你是在為特定的平臺設計icon,例如安卓和iOS,去查看他們的設計規範,並使用他們的標準尺寸。
  • 網站前端ICONFONT圖標助力網站設計之WordPress應用
    說到網站建設就不得不提到前端UI與後端程序談到UI就不得不提及美工與設計在當前這個網際網路開放的時代,提到前端美工設計不提及ICONFONT圖標的廣泛應用,那完全是設計界的盲人;什麼是ICONFONT?簡單說,就是我們平時用的字體,不再是我們傳統認知上的「文字」,而是一個個的圖標今天我們以Wordpress博客為例進行解釋,如何在自己製作的網站裡面快速有效的去應用ICONFONT圖標,以增強網站的可閱讀性及美觀欣賞性;主體默認自帶圖標的便捷添加有很多朋友使用與本站完全一樣的主題
  • 移動App圖標設計的最佳實踐
    如果想要了解更多,請繼續看下去,其中將會詳細分析「應用圖標設計的5個核心方向」,保證沒有廢話。入門階段創建一個獨一無二且讓用戶每次看到產品時都能第一時間聯想到的圖形設計方案還是頗有難度的。一個美觀、可辨識、令人難忘的應用圖標能對應用的普及與成功產生巨大的影響。不過到底怎樣才能創造出一個「好的」應用圖標呢?
  • 【原創】玩轉矢量圖標——ICON這樣用
    PPT設計中,我們都知道「文不如字,字不如表,表不如圖」的設計箴言,可知道未必做到。
  • 資深遊戲設計師解答:遊戲圖標的設計跟其它應用的圖標設計有何不同?
    這裡乾脆我就二合一,根據自身這幾年積累的經驗來回答一下這個問題,希望答案能夠幫助到答主和者所有對遊戲設計感興趣的同行們。關於圖標 在探討遊戲圖標之前,首先我們要去大致了解一下什麼是「圖標」(icon)。
  • 20個優秀的Photoshop圖標設計教程
    站長之家(CHINAZ.com)12月30日編譯:現在大部分網站都融入了圖標,圖標逐漸成為網站裡重要的一部分。適當地使用圖標能幫助實現一個在客戶看來非常專業的網站。儘管從網上可以下載到免費的圖標或者也可以購買通用的圖標,但是學會了圖標設計的技術無疑能夠帶來很多益處。這裡就有國外20個優秀的Photoshop圖標設計教程,希望對你有所幫助。
  • 如何更好的設計圖標?這篇講透了!
    通常的話我會使用下面的這兩種:這背後的原理是有時候一些圖形看起來會比另外一些大,比如正方形看起來比一樣大的圓形大。所以就會把正方形放在裡面的那個方形裡面。(譯者:這部分的話,大家可以去閱讀以下谷歌的圖標設計指南,裡面專門講過這部分)2.5 讓圖標和諧畫一個好看的圖標是很簡單的。
  • 如何在AxureRP8中規範使用FontAwesome圖標庫完成設計
    今天簡單分享一下在Axure RP 8 中如何使用 Font Awesome 圖標庫完成設計。在做互動設計的時候,作為產品設計師我們常常需要用一些標準的圖標庫,通過導入現成的圖標可以極大地提高我們的設計效率。
  • 如何設計搜索功能的入口?
    當用戶進入頁面,內容繁多,想要通過搜索進行篩選,這時頁面頂部放置一個搜索入口,即可滿足用戶需求。1. 引導類上面我們說到了在頂部放一個搜索入口,讓用戶想搜索的時候,可以立刻找到搜索功能並使用。那麼如何讓用戶知道這裡是搜索呢?
  • 吉利icon設計解析 看完讓你「i」上它
    吉利icon是吉利首款僅有英文命名的車型,名字中的「icon」原意為崇拜的偶像、時代的符號;亦代表數字時代應用程式的圖標。此外,icon還打造出了新一代家族式車頂設計,設計師尋找人機工程黃金角,在45°的A柱傾角與30°車頂角設計間,兼顧舒適空間與車內視線的最大化。隱藏式車把手是車身的一個亮點設計,其感應系統可根據用戶的距離自動彈出/隱藏,有效降低0.002風阻係數。同時還伴有迎賓燈,可向大地投射icon的時間標識,更顯科技。
  • 看這篇才知道蘋果的圖標設計有多厲害...(附50+案例)
    這一點對圖形化操作界面的設計非常影響。既然無法繞過,設計師就要學會如何去「適配」人類的視覺慣性畫出「正確」的界面。一、物理尺寸與視覺尺寸長寬 400px 的正方形與長寬 400px 的圓形哪一個更大?假如這樣問你的話,那麼答案當然是一樣大。但是來看看下面這張圖,長寬各 400px 的兩個圖形看起來並不一樣大。你的眼睛告訴你 400px 的正方形比 400px 的圓形更大一些。
  • 最全ui設計圖標解析,圖標概念大揭曉
    咳咳~不好意思跑題了,ui設計圖標並不是這樣的!(冷漠臉)圖片來源於網絡其實正確打開方式是這樣的!ico圖標其實是icon file的縮寫形式,它是基於windows而開發的一個圖形格式,大多用於電腦,手機或其它設備中為各種文件,應用程式或快捷方式設置的一種圖形標誌。想必大家看完以後會對什麼ico圖標有一個初步的印象了。那麼我們再來看看圖標的一些分類,各有什麼區別特點!