優秀的圖標是如何影響用戶體驗的

小編：圖標設計是UI設計中非常重要的一部分。不要小看一個小小的圖標，它可以在界面中發揮很重要的作用。好的圖標設計不僅看起來清晰美觀，還能夠幫助帶來更好的用戶體驗。 具體如何設計圖標讓它服務於用戶體驗呢？這篇文章將會介紹給你一些方法。

界面的作用是交流和完成任務。一個網站的ui就是完成這些的工具，設計師的工作就是要創造出可以幫助用戶快速完成這些事情的界面。

圖標對於界面來說是非常棒的，因為它不需要用語言就可以傳達信息。用戶僅僅通過研究它們的外觀並與這些元素進行交互就可以學會如何使用一個界面。

在這篇文章中，我會講述一些不同的圖標使用方式，來提升網站的交互質量。世上沒有完美的用法，但是好的圖標和提升的用戶體驗之間還是存在一些共性的。

顯而易見，圖標可以幫助用戶僅僅依靠視覺來瀏覽網頁。最好的圖標是那些大多數人都可以識別出的，所以你總是想要堅持優先設計這樣的圖標。

但是你可以設計包含鏈接的圖標，並在圖標旁使用文本標籤，使其具有更清晰的可用性。

來看一下這個使用垂直導航菜單的投資網站Tim Roussilhe。

Tim中的圖標都置於每個鏈接標籤上來區分目的和行為。這是最清楚的使用圖標的方式之一，因為這樣很容易看到且容易理解。

永遠記住鏈接上也要包含文本標籤。純粹利用圖標進行導航很少起到作用，至少這不是可用性的最佳範例。

即使是像My Own Bike這樣的網站，你也至少可以猜出這些鏈接是跳轉到哪裡的。整個網站都用的是德語，但是圖標仍然提供了瀏覽使用網頁的一些線索。

另外一個很重要的圖標就是三條杠的菜單圖標。它也叫做漢堡菜單，雖然很多設計師討厭它，但是更多的人已經慢慢地理解了這個符號的含義。

Inc上的菜單是另一個展示圖標如何與導航聯繫起來的很好的例子。

這個菜單鏈接使用了漢堡圖標，但是在它的下面還有一個寫著「菜單」的標籤文本。這闡明了這個圖標的含義，並且讓手機用戶更容易地找到導航。

另外，當導航彈出是可見的時候，用戶會在導航鏈接的旁邊看到小的加號符號。這些圖標表明有一個可滑動的次級鏈接的抽屜菜單，有點像下拉菜單鏈接，但是是為手機設計的。

另一個流行的趨勢是大型的導航下拉菜單。這可以在像mashable這樣的網站中找到，並且每個鏈接都有一個小的向下的箭頭來表明該鏈接包含一個下拉菜單。

這些圖標不是必需的，但是它們確實提升了體驗。大多數用戶可以識別出箭頭符號並且知道它的含義。

當然這個導航沒有這些箭頭也可以使用。但是不可否認的是這些圖標可以幫助表明目的，使瀏覽網站更加簡單。

導航遠不止是頂部的菜單欄。它還包括在頁面主體中或者側邊欄里幫助用戶在瀏覽網站時進行導航的鏈接。

在網站內部內容的鏈接中，如果圖標非常突出也是極好的。例如，在media temple的首頁上，你會看到一些列表，他們用不同的顏色的圖標展示「閱讀更多」的鏈接。

這些鏈接都使用了指向右側的箭頭圖標。對於網頁來說這是一個通常可被識別出的符號，意味著移至下一頁。

大多數瀏覽器都有後退按鈕和前進按鈕。後退按鈕指向左邊而前進按鈕指向右邊，這些按鈕可以讓用戶在他們的瀏覽器歷史記錄中進行導航。因此任何向右的箭頭通常表明移動到下一頁。

Media Temple用一種巧妙而又顯而易見的方式運用了上述理論的優勢。

有一個很突出的頁內導航項就是行為召喚按鈕，簡稱CTA。對於有著特定目的的行為召喚，圖標可以起到很好的作用。

例如jquery在首頁的右上角有一個很明顯的下載按鈕。這個CTA按鈕包含一個放置在文本左側的下載圖標。

這樣能夠讓你知道這個按鈕在某種程度上與下載文件有一些關聯。

但是你的按鈕在瀏覽器中並不總是需要產生行為。一個CTA可以僅僅是引導跳轉到另一個與你的產品或者服務有關的界面上。

圖標可以用來幫助突出按鈕並促使瀏覽者去點擊。ResumeBaking就是一個很好的例子，它的CTA按鈕被一些帶有彎曲的箭頭的圖標環繞著。

這些自定義的圖標突出了這個按鈕並通過吸引用戶點擊來推銷它的產品。但是他們的推銷是建立在產品的一些特色上，諸如創建免費的簡歷，在線分享和收到工作邀請。

雖然它們不是那麼明確但卻起到了作用。很多用戶僅僅是看到圖標和箭頭就點擊了他們注意到的那個按鈕。

每個網站都有一些各種形式的表單，不論是郵箱註冊表單還是賬號登陸表單，甚至僅僅是一個基本的聯繫表單。

圖標可以配合表單來建立信任並鼓勵用戶行為。

來看一下Life Could Be Better的網站，在頁面的底部有一個固定的郵箱註冊的表單。在表單的旁邊有一個小的信封圖標來表明表單的目的並吸引人的注意。

上述這一點對於公司的聯繫電話以及社交媒體的鏈接也同樣成立。

圖標是用來描述它周圍的內容。由於視覺的內容比文字更容易理解，因此使圖標清晰並能讓人看一眼就很容易地識別出來是有道理的。

另一個我很喜歡的手法是設計師在註冊的填寫區域添加一些圖標。如果表單有超過3-4個輸入框並且用戶需要把所有的都填滿時是非常起作用的。

在WebDAM的試用界面我發現了一個很好的例子，它在每個輸入框前都使用了自定義的圖標。

這些圖標看起來非常棒並且與界面融合得也很好。

而且它們可以幫助用戶很快地識別出每個區域要求填寫的是什麼。因為每個區域的標籤是嵌在表格內的，一旦用戶輸入一些信息標籤就會消失。這樣會讓用戶在輸入一些數據后感到迷惑，忘記整個區域是要填寫什麼的。

我只建議你在網站的表單中包含超過3-4個輸入框時添加類似這樣的圖標，否則會顯得有些繁瑣。

每個新的創業公司，小企業，或者網頁版的應用都有一系列的特色和理由讓用戶在其網站上停留。你可以把這些特點都列舉出來，但是那樣通常會讓用戶感到很無聊。

試著增加一些圖標來代替文字幫助解釋這些特點和常見的行為。視覺元素是最容易理解的，因此它們會讓用戶在頁面上閱讀更多信息。

拿LightCMS上的圖標舉例子。它們非常的纖細並且顏色較淺，因此能夠很容易地融合進頁面。

但是該網站也清晰地闡明了它的特色並幫助讀者快速瀏覽首頁。這裡每一個單獨的圖標在LightCMS上可能並不會吸引到任何人，但是它們可以幫助闡明這個平台是做什麼的以及它為什麼有用。

在Disqus的功能頁面上有一個非常相似的設計，在不同的功能旁邊排列著自定義的圖標。

我非常喜歡這個設計，因為這些圖標與Disqus的品牌融合地非常好。

雖然Disqus是從零開始設計的這些圖標，但你不需要這樣做。這裡有許多免費的圖標可以下載，想怎麼用就怎麼用。

從桌面軟體到網頁再到手機app，圖標是所有界面中很自然存在不可或缺的一部分。但是設計潮流和風格在不斷地改變，因此始終跟隨最新的流行趨勢是非常重要的。

我希望這篇指南可以幫助你在任何情況下都能用圖標創造出良好的體驗。如果你在考慮使用字體圖標，當然可以瀏覽下我們關於這個主題的一篇指南。