中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

導讀：在圖形用戶界面中，圖標除了通過其顏色和樣式來傳播品牌特色之外，應當優先考慮界面語言的傳達。根據定義，圖標是物體、操作或創意的視覺表現，但如果用戶看到這個物體、操作或是創意時，無法清楚明白其含義，圖標就會成為華而不實的擺設，而且還會成為阻礙用戶完成任務的視覺干擾。

圖標能給圖形用戶界面（GUI）帶來以下好處：

1. 制造良好的點擊區域：圖標的尺寸往往足夠大，用戶可以很容易地在觸屏界面中點擊操作，對于鼠標來說也是一樣的。（文字鏈接在觸屏上易造成用戶閱讀與點擊的不對稱。）
2. 節省空間：圖標足夠小巧，工具欄、面板等控件在相對狹小的空間里也可以顯示許多圖標。
3. 易于快速識別（設計得好的情況下）——尤其對于那些常見的或是使用過的標準圖標來說 無需翻譯，那些考慮了文化差異的圖標設計是國際通用的。（例如，郵箱在不同的國家會有不同的樣子，但是信封卻是一樣的，因此相比之下，信封是一個更加國際化，更適用于電子郵件的圖標。）
4. 符合并能提升設計的美學訴求。
5. 當相同的圖標和樣式用在不同的地方時，能給用戶提供產品系列的概念，增強產品間的聯系。

盡管圖標有以上這么多潛在的優勢，當設計未充分考慮到圖標潛在的問題時，它們一樣會給用戶界面帶來了可用性問題。

通用圖標少之又少

用戶只對少數幾個圖標有著通用的認識，例如主頁，打印以及放大鏡圖標代表的搜索等等。除此之外，大部分的圖標由于其在各種界面中的不同用法，在用戶看來仍然是模棱兩可的。久而久之，這種標準化的缺失讓圖標在界面中的應用成為設計之痛，因為用戶無法期待每次見到這個圖標時它們都代表著相同的含義。

三條杠形狀被俗稱為“漢堡”的圖標就是個很好的例子，它成為通用圖標還有很長的路要走。大部分應用中使用這個圖標代表了主導航菜單，而還有部分用它（或是十分類似的圖標）來表示列表。例如，清單管理應用Buy Me a Pie就用這個圖標來觸發打開常用添加項的列表。更讓人困惑的是，這個圖標處在輸入框的右邊，而通常這里出現的圖標會是一個提交輸入框內容的按鈕。（實際上，界面中輸入框和圖標有著分別獨立的功能，如果你認為在界面中輸入文字后點擊這個圖標會顯示一個根據輸入進行過濾后的列表，那你就錯了。）

Buy Me a Pie安卓版使用了三個彩色條的“漢堡”圖標，用于打開常用項的列表，這與常用的導航菜單用法有很大的區別，然而色彩上的處理不足以讓用戶認識到這個圖標有著不同的含義。

心形圖標在Combadi（左圖）相比Fab（右圖）功能就較為局限，它不能用于保存商品到收藏列表，盡管Combadi在十分相似的位置上使用了一樣的圖標

即使是再小的功能或是含義的不同都會阻礙用戶再次見到這個圖標時對它的理解和信賴。

就在上周（譯者注：這篇文章發布于7.27），我們發布了一個關于網站在其主導航欄中使用時鐘圖標的可用性報告，盡管圖形本身的識別度很高，用戶都明白它是一個時鐘，但是這個圖標的在此案例中的含義是十分模糊的，因為網站并沒有將這個圖標用作它看上去所表現出的含義，而是用作導航歷史記錄，點擊會打開一個側邊欄，顯示用戶最近訪問過的頁面。然而測試的結果是沒有一個受測用戶去點擊它。模糊的圖標＝無意義的功能

圖標需要文字輔助

幾乎所有的圖標都會遇到讓用戶覺得模棱兩可的問題，為了解決這個問題，我們應當給圖標配以文字標記，給用戶在特定的情景中弄清它的含義。（就算使用標準圖標，通常配上文字也會是個更安全的選擇，尤其是當你對這個圖標做了一些符合自己審美偏好的微調。）

圖標的文字應當總是可見的，不根據用戶的操作來顯示或是隱藏。對于導航里使用的圖標，文字更是十分關鍵的。不要過于依賴讓用戶懸浮圖標來顯示文字：這不僅提高了用戶的交互成本，也無法在用戶使用觸屏界面時生效。

Usability.gov在網站的每一頁中都顯示了快速導航的圖標，用于快速跳轉到設計方法、設計文檔和模版以及設計規范的頁面。如果我讓這篇文章的每個讀者都給我發一個他心目中能代表“設計方法”的圖標，我能肯定我將收到許許多多不同的答案。正如我們多年前在《網站主頁可用性設計規范》中提到的，“如果你考慮要在導航里使用圖標，用戶將很可能難以識別它們。”雖然他們在移動端的站點上意識到文字的重要性并且使用文字輔助說明了圖標的含義，但是他們在桌面版本上卻隱藏了這些文字，只有當用戶感到好奇將鼠標移動到圖標上才出現。在桌面端的網站里，他們將導航菜單固定懸浮在頁面的左側，以確保用戶在上下滾動時仍然可以快速的進行頁面的跳轉，這說明了他們認為這些導航很重要對用戶很有用。但是，將圖標的輔助文字隱藏卻將這些導航的作用變得毫無意義，與原本的設計意圖適得其反。

Usability.gov網站移動端將導航圖標放在頁面的頂部，配以輔助文字。桌面端將導航固定懸浮在頁面的左側，但是只有在用戶懸停的時候才顯示文字。這迫使用戶去發現文字來理解導航的含義，降低了圖標導航的效率。

相對尺寸有助于提高用戶關注

通常，圖標在手機上比桌面端網站或是應用中看起來更加明顯，我們在設計中很容易去假定當一個圖標在移動端看上去沒有問題時，這個圖標一定可以應用在桌面端的產品中。但是事實并非如此！在手機屏幕上，只有有限的元素在吸引用戶的注意力（道理很簡單，因為手機屏幕更小，只能放少量的信息）。相比之下，桌面端的屏幕要大得多，經常有很多的內容，用戶很容易會錯過一些信息，當然這取決于界面中哪部分的信息在吸引他們的注意力。如果用戶在手機上看到的界面元素是由一個標志，一個大標題，一個圖片和一個菜單圖標組成，那么這個菜單圖標比相同界面在桌面端里的圖標會有更大的機會受到用戶的關注，因為在桌面端上，整屏都是吸引用戶注意力的內容，而這個圖標僅僅是呆在某個角落里。

所以在圖標設計中也應當考慮它與界面中其他元素的相對大小。在一個標準移動版網站的頁眉上，漢堡形狀的菜單圖標大約會占據頁面寬度的20-25%，而將這個設計應用到更大屏幕尺寸的設備上時，通常都使用的是一樣的大小。這樣導致的結果就是在桌面端（或是大尺寸的平板，尤其是在橫屏模式下），圖標看起來會小得多，而且在界面其他元素的干擾下，變得更加不明顯。要解決這個問題，可以在大屏設備上（通常會有很多空間）直接將菜單項都展示出來，而非保持隱藏在漢堡圖標里。這樣不僅能夠讓菜單項更易于發現，也可以避免許多由隱藏導航帶來的可用性問題。

?

Upworthy.com:?用于打開主菜單的三條杠“漢堡”圖標在移動端占據了站點標志下導航欄20%的寬度。查看它的桌面版本時，這個主菜單的圖標仍然使用一樣的尺寸，盡管導航欄已經變大了許多。結果是這個圖標僅僅占桌面寬度的3.5%左右（這樣計算的基礎還沒有算上網站兩側的留白區域）。相對尺寸的區別以及桌面端更多元素在吸引用戶的注意力，也解釋了為什么圖標在移動端更易被用戶發現和注意到。

圖標設計的小建議

當你決定給你的界面中設計圖標時，請先做調研！先去看看那些你的競爭對手使用的或是產品目標平臺常用的圖標，因為這些是你的用戶最熟悉的。

如果你必須要設計一個新的圖標，你可以參考一下的指南，盡量將它設計得易于識別和記?。?/p>

1. 保持簡潔。減少圖形的細節盡量少添加一些個性元素遠比制作一個效果真實逼真的圖標更易于提高識別度。（復雜的細節在小尺寸的圖標上很難識別）
2. 五秒原則：如果你想出合適的圖標來表達你的設計意圖，花了你超過5秒鐘的時間，那么似乎這個含義很難通過簡單的一個圖標傳達出來。
3. 測試圖標是否容易識別：問問身邊的人他們認為這個圖標是什么意思。
4. 檢測圖標是否容易被記?。焊嬖V他們圖標的含義后，過上幾個星期再問問他們是否還記得這個圖標是什么意思。
5. 使用文字輔助。正如Bruce Tognazzini（NNgroup的首席設計師）說的“一言勝千圖”

#專欄作家#

Terryfan，人人都是產品經理專欄作家。目前在點融網擔任用戶體驗總監，喜歡設計、推理、邏輯分析搞腦子。目前持續緩慢更新微信公眾號開卷有譯（terryfan_ux），進行翻譯分享。

本文系作者授權發布，未經許可，不得轉載。