tft每日頭條

 > 生活

 > 生成icon圖标

生成icon圖标

生活 更新时间:2024-11-23 15:34:32

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

生成icon圖标(如何設計一個優秀的圖标)1

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

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

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

一、易識别

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

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

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

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

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

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

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

(通俗易懂的圖标)

調查研究,檢查你的競争對手所用的圖标。

2. 不要使用有歧義的icon

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

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

3. 測試icon的含義表達

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

請測試你的圖标!

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

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

4. 測試icon的可拓展性

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

生成icon圖标(如何設計一個優秀的圖标)2

(音樂圖标縮放清晰)

5. 給陌生的icon附上标簽文字

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

(圖标 文字)

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

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

不要重新發明輪子!

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

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

生成icon圖标(如何設計一個優秀的圖标)3

二、視覺舒适

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

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

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

  • 限制顔色使用數量,使用不超過3或4種顔色,保持設計簡潔。
  • 通過聚焦于對象的基本特征,來減少圖形設計細節的數量。盡量保持設計的概要性 ,因為設計概要性的在不同的界面和分辨率都可以進行轉換。

生成icon圖标(如何設計一個優秀的圖标)4

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

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

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

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

三、合适尺寸

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

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

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

生成icon圖标(如何設計一個優秀的圖标)5

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

四、一緻性

  • 一緻性是設計中的關鍵原則。
  • 一緻性設計是一種直觀設計。

當使用相似的元素且具有一緻的外觀和功能時,可以讓可用性和可學習性都得到提升改善。

1. 内部一緻性

圖标設計應該保持視覺統一,你決定用于你的産品的圖标,應該保持統一樣式。

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

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

生成icon圖标(如何設計一個優秀的圖标)6

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

2. 與平台保持一緻

确保你的目标風格與平台一緻,它們會讓用戶更容易去理解。

生成icon圖标(如何設計一個優秀的圖标)7

(蘋果iOS和Google 安卓圖标)

3. 與産品系列保持一緻

如果你擁有整個産品系列,确保一緻的圖标風格(或至少類似)應用在你所有的産品中。

總結

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

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

作者:Nick Babich

翻譯:JaylonG

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

#專欄作家#

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

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

題圖來自 Unsplash ,基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved