APP中圖示設計的小技巧

在早期的計算機圖形學領域內，圖示只能在有限的範圍內被使用。從人機互動的角度來說，使用圖示比使用文字更具有優勢，一起看看吧！

簡單、醒目、而且友好，可以取代一段冗長枯燥的描述；

隨著螢幕尺寸變的越來越小，使用圖示可以節省空間，這點是很受歡迎的；

使用圖示看起來很舒服，並能增加設計的藝術感染力；

最後（但同樣重要的是），在大多數應用中使用圖示，是一種為使用者熟知的設計模式。

儘管圖示有這些潛在的優點，但如果設計時不考慮其潛在的負面影響，也會常常導致可用性問題這篇文章致力於總結UI中與圖示相關的一系列主要問題，並提出一套對這些問題的解決方法。您可以在圖示設計中使用這些技巧作為起步，來更好地完成工作。

1.圖示應傳達含義

設計師們有時會過於注重形式，忽略了本身的功能，導致圖示難以識別，這打破了它最重要的圖形意象屬性－圖示的傳達含義功能必須放在首位。按照定義，圖示是一個物件或動作的視覺體現。如果對於使用者而言，這個物件或行動不明確，該圖示就立刻失去它的實用價值，併成為一個視覺干擾。

以下是一些在使用者心中享有普遍共識的圖示。（首頁、印表機、用於搜尋的放大鏡都是屬於這種型別）。

容易辨識的圖示

但除了這些例子，對使用者而言大部分圖示的意思仍舊模稜兩可，以為它們還具有不同的含義。例如遊戲中心圖示，是一組色彩鮮豔玻璃感的圓圈。這代表了什麼含義？它與遊戲有什麼關係？

遊戲中心圖示無法傳達遊戲的概念

看看另一個例子? 當谷歌決定簡化 Gmail 使用者介面，把所有功能隱藏在一個抽象的圖示之下，他們得到的是一大堆使用者的幫助請求，比如“我的谷歌日曆在哪裡？”

桌面端的GMAIL介面

無論你能理解多少這個圖示的含義和代表的功能，對初次看到這個圖示的使用者來說體驗仍舊可能完全不同。假定使用者都熟悉這些抽象的圖形是一個普遍的錯誤。

圖示的首要任務是引導使用者去他們需要去的地方，所以請確保他們能夠實現這個目標?

使用 5 秒鐘規則?如果花了你超過5 秒考慮一個合適的圖示。這個圖示不太可能有效地傳達含義。

選擇熟悉的圖示：使用者對圖示的理解往往基於以前的經驗。讓自己熟悉競品所使用的圖示和常用的目標平臺上的圖示（現有系統圖示），那些是使用者最容易辨認的。

2.保持圖示的簡單和示意

在大多數情況中，設計圖示無需發揮創意。別誤會，並不是說創新圖示是不好的，但基本功能太花哨的圖示可能會對使用者體驗產生負面影響。如果你想展示你的設計技能，你可以依靠其他設計元素傳達你的產品資訊，同時保持系統圖標的設計簡單、現代、友好。

圖示設計理念的本質是減到最簡形態-簡化圖示是出於降低學習曲線的需要。設計應確保即使圖示在小尺寸更具有可讀性和清晰度，所以精心設計的圖示應該能夠快速辨認，一目瞭然。

3.包含清晰可見的文字標籤

良好的使用者體驗可以定義在很多方面，但衡量標準之一是減少了多少使用者思考的成本。清晰是一個 好介面的最重要特徵。圖示的設計應該幫助使用者毫不費力知曉他們要做什麼。但是，圖示的問題在於使用者會基於之前的經驗對每個圖示聯想出不同的含義。假定使用者（特別是手機使用者）會為了探索每個圖示的'功能而一一試用是另一個常見的誤解。

蘋果郵箱的標準化螢幕。你能準確的定義每個圖標表達的含義嗎？

事實上，使用者面對不熟悉的介面常常有不安全感，而且並不會到他們的舒適區域之外探索。在一些特殊的上下文環境裡，為避免幾乎所有圖示都可能會產生的歧義，應該在圖示周圍設計一個文字標籤用於清晰表達其含義。為使用者在點選前設定清楚的預期。

同樣的設計中加入了文字標籤的圖示，文字標籤解釋了圖示的含義，並提高了可用性

UserTesting（一家為開發者提供測試使用者的創業公司）進行了一系列關於是否是要標籤的測試，結果發現：

對於帶有標籤的圖示，88%的情況下，使用者輕點圖示時可以準確地預測接下來會發生什麼。

對於沒有標籤的圖示，這個數字下降到60%。對於那些特殊的圖示，這個數字只有34%。

這裡有三個重要的情境需要考慮：

對於更多複雜且抽象的功能來說，圖形化的表達具有侷限性。所以他們應該使用合適的文字標籤來展示。

文字標籤應該始終保持可見，不應讓使用者進行任何互動才能看見。有的設計師發現文字標籤破壞了他們使用圖示想達到的效果並且使介面變的散亂，往往會在圖示旁新增教程、引導遮罩、彈出提示框。但是使用者會跳過這些教程並很快忘記他們剛剛學習到的。同樣不要想著依賴滑鼠懸浮現實文字標籤：不僅是因為這樣需要額外操作，在觸屏上也不太適用。

SWARM應用為了教育使用者使用了彈出框提示

文字標籤和圖形結合在一起比單獨使用其中之一效果更好。但是，如果僅能使用其一文字比單使用圖形要好。在表達清晰度這一點上，文字標籤總是更勝一籌。

4. 使圖示的觸控體驗更佳（手機應用）

人們使用手指與基於觸控的介面進行互動。較小的目標和錯誤的行為會使使用者沮喪，所以UI控制元件要足夠大才能承載手指尖的動作。下圖顯示成人手指的平均寬度大約在11mm，嬰兒的是8mm，而一些籃球運動員竟會具有超過19mm的寬度！

人們常常譴責自己具有“胖手指”。但是即使是嬰兒的手指也會比多數點選目標要寬。

觸屏物件的推薦點選目標尺寸大約是7-10mm。以下是蘋果和谷歌平臺的規範（iOS人機介面規範和material 設計）：

蘋果推薦的最小點選目標尺寸為44×44畫素。由於物理畫素的尺寸會隨著螢幕解析度發生變化，在3.5寸的螢幕上，蘋果推薦的尺寸是320*480。

谷歌則推薦觸控目標的尺寸至少為48x48dp。多數情況下，這些觸控目標應使用至少8dp的空間分隔來確保資訊密度的平衡性與可用性。無論螢幕尺寸有多大，一個48x48dp的觸控目標需要9mm的物理尺寸。觸控目標包括響應使用者輸入的區域。觸控目標的面積往往超過一個元素的可視區域：比如一個圖示形狀是24x24dp，但是加上週圍的間距，共同組成了48x48dp的觸控面積。

需要考慮的重要情境：

觸控目標之間的有效間距。設定觸控目標間的最小距離是為了防止使用者引起錯誤的操作。這在兩個相鄰操作互斥時尤為重要：比如“儲存”和“取消”圖示並列存在時使用至少2mm的間距。

　　5. 不要跨平臺使用圖示

當你在設計Android/iOS應用時，不要使用其他平臺特定的UI元素。各平臺為某些常用功能使用一套典型的圖示，比如分享、新建和刪除。當你轉換應用到另一個平臺時，你應替換掉相對應的圖示。

ANDROID(上）和IOS(下）的常用功能的圖示

　　6.測試你的圖示

圖示的使用應極盡小心：始終進行可用性測試。一旦你已經熟悉一個介面，很難再使用全新的眼光審視它並使用直觀的感覺分辨它。所以，觀察一個新使用者如何與UI互動很重要，因為他可以幫助你判斷圖示是否足夠清晰。

測試圖示的可識別性。詢問使用者期望圖示可以代表哪些功能。避免設計一些使用者看到後不知道他們該做什麼的圖示，因為沒人會想玩捉迷藏。

測試圖示的可記憶性。難以記憶的圖示常常使用低效。告訴一組使用者圖示代表的含義，幾個星期後再詢問他們是否還記得。

　　小結

圖示圖形學是UI設計的核心：對於介面的可用性來說，它是一把雙刃劍。如同使用者體驗設計的方方面面，介面中使用的所有圖示都應有目的性。當你設計對路的時候，圖示能幫助你簡單而直觀的引導使用者。