編輯導(dǎo)語：圖標是 UI?設(shè)計中極為重要的一個環(huán)節(jié)，設(shè)計師們在做每個界面的設(shè)計幾乎都會涉及到圖標的表達，一個優(yōu)秀的圖標可以傳遞更多的信息，讓用戶明確；本文作者分享了關(guān)于設(shè)計過程中圖標的使用規(guī)范，我們一起來看一下。

?圖標是設(shè)計中不可或缺的元素之一，圖標與文字一樣其核心目的是為了傳遞信息，事實上圖標和文字之間是可以互相取代的；這篇文章主要研究圖標與文字同樣作為信息傳遞的符號，在用戶體驗設(shè)計中各自的應(yīng)用場景是哪些？

一、圖標的特性

圖標相較于文字優(yōu)點：識別速度更快；單位面積的信息容量大；容易吸引注意力；國際化；模塊化。

圖標相較于文字的缺點：準確性低。

二、何時使用

基于它們各自的優(yōu)缺點，我總結(jié)成7個維度進行了場景化分析，以方便指導(dǎo)我們?nèi)粘５捏w驗設(shè)計。

1. 視覺體驗

空間有限，冗長的文字會讓界面變得即不簡潔也不優(yōu)雅，使用圖標可以大大降低占用的空間，減輕壓迫感。

2. 空間

當空間有限，冗長的文字會讓界面變得即不簡潔也不優(yōu)雅，使用圖標可以大大降低占用的空間，減輕壓迫感。

3. 權(quán)重

圖標和文字對于用戶的注意力有不同程度的影響，通常來說圖標更容易被用戶關(guān)注，所以我們需要了解它們之間的層級關(guān)系，根據(jù)傳遞給用戶的視覺權(quán)重，我們可以進行這樣的層級劃分：大尺寸圖標 > 標題 > 小尺寸圖標 > 正文 。

而圖標自身也會因為風格的不同也會不同程度地影響用戶的注意力，它們根據(jù)視覺權(quán)重可以進行這樣的層級劃分，插畫圖標 > 帶背景的圖標 > 面形圖標 > 線形圖標。

基于權(quán)重層級，我們進行一些泛用場景的用例分析：

當需要引導(dǎo)用戶關(guān)注某個功能或業(yè)務(wù)時，使用更大或者有更明顯的顏色的圖標以突出它的重要性。

當用戶的注意力應(yīng)該集中在正文或數(shù)據(jù)時，不需要刻意使用圖標去強調(diào)某些基本的功能和操作，而應(yīng)該使用文字可以降低它的重要性。

當場景中出現(xiàn)多組業(yè)務(wù)圖標，面形圖標所代表的業(yè)務(wù)比線形圖標更重要：

一般來說，業(yè)務(wù)的重要性要大于功能。當某個場景或者流程中，同時出現(xiàn)業(yè)務(wù)列表和功能列表時，在每個業(yè)務(wù)使用圖標加文字表現(xiàn)示能可以提高它的重要性層級，每項功能使用純文字表現(xiàn)示能可以降低它的重要性層級。

4. 規(guī)范性

有多個功能和業(yè)務(wù)需要并列展示給用戶時，使用有序的圖標更利于界面的整潔，而不是長短不齊的文字。

5. 效率

當一個操作使用圖形表現(xiàn)意符可以更直觀地讓用戶理解時，使用圖標效率更高。

當一個圖標人們所熟知，使用圖標作為示能更快速被用戶識別。

當一項功能或業(yè)務(wù)需要被快速識別，但圖標不能準確描述時，使用圖標加文字，可以同時提高其重要性和準確性。

6. 有風險的操作

圖標傳遞的信息準確性比文字更低，當一個操作可能會導(dǎo)致嚴重的后果時，不建議使用圖標，而應(yīng)該使用文字進行準確描述。

圖標的娛樂性會降低用戶的警戒，需要體驗界面嚴肅性時，使用文字進行示能更加合理。

7. 品牌

一些產(chǎn)品定義了符合自身品牌的設(shè)計系統(tǒng)，在圖標的使用上進行了規(guī)范。如airbnb，絕大部分圖標均使用線形圖標進行示能，以呼應(yīng)品牌。

三、后言

在進行UI/UX設(shè)計時，我們經(jīng)常會糾結(jié)，何時需要使用圖標進行示能，何時使用文字進行示能，抑或是文字圖標組合。

我通過實踐和對成熟產(chǎn)品的觀察總結(jié)出了以上的一些理論和經(jīng)驗，雖然不能對設(shè)計進行完全準確的指導(dǎo)，但是應(yīng)該能為大家提供一些設(shè)計思考。

1. 關(guān)于示能、意符和映射

示能、意符、映射是《設(shè)計心理學(xué)》中提出的概念，我對它們的理解進行了一些簡化。

• 示能：用來說明對象具有的功能。
• 意符：用來告訴用戶對象正確的操作方式。
• 映射：表示兩組事物要素之間的關(guān)系。

2. 關(guān)于圖標設(shè)計方法

圖標的設(shè)計規(guī)范也是產(chǎn)品設(shè)計需要遵守的重要指導(dǎo)方法，計劃在今后的文章中進行詳細研究。

本文由 @晚秋咸魚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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