優(yōu)秀的圖標是如何影響用戶體驗

圖標設計是UI設計中非常重要的一部分。不要小看一個小小的圖標，它可以在界面中發(fā)揮很重要的作用。好的圖標設計不僅看起來清晰美觀，還能夠幫助帶來更好的用戶體驗。 具體如何設計圖標讓它服務于用戶體驗呢？創(chuàng)新互聯(lián)做網(wǎng)站公司這篇文章將會介紹給你一些方法。
界面的作用是交流和完成任務。一個網(wǎng)站的ui就是完成這些的工具，設計師的工作就是要創(chuàng)造出可以幫助用戶快速完成這些事情的界面。
圖標對于界面來說是非常棒的，因為它不需要用語言就可以傳達信息。用戶僅僅通過研究它們的外觀并與這些元素進行交互就可以學會如何使用一個界面。
在這篇文章中，我會講述一些不同的圖標使用方式，來提升網(wǎng)站的交互質(zhì)量。世上沒有好的用法，但是好的圖標和提升的用戶體驗之間還是存在一些共性的。

1.強化導航

顯而易見，圖標可以幫助用戶僅僅依靠視覺來瀏覽網(wǎng)頁。最好的圖標是那些大多數(shù)人都可以識別出的，所以你總是想要堅持優(yōu)先設計這樣的圖標。
但是你可以設計包含鏈接的圖標，并在圖標旁使用文本標簽，使其具有更清晰的可用性。
來看一下這個使用垂直導航菜單的投資網(wǎng)站Tim Roussilhe。
Tim中的圖標都置于每個鏈接標簽上來區(qū)分目的和行為。這是最清楚的使用圖標的方式之一，因為這樣很容易看到且容易理解。
永遠記住鏈接上也要包含文本標簽。純粹利用圖標進行導航很少起到作用，至少這不是可用性的范例。
即使是像My Own Bike這樣的網(wǎng)站，你也至少可以猜出這些鏈接是跳轉到哪里的。整個網(wǎng)站都用的是德語，但是圖標仍然提供了瀏覽使用網(wǎng)頁的一些線索。
另外一個很重要的圖標就是三條杠的菜單圖標。它也叫做漢堡菜單，雖然很多設計師討厭它，但是更多的人已經(jīng)慢慢地理解了這個符號的含義。
Inc上的菜單是另一個展示圖標如何與導航聯(lián)系起來的很好的例子。
這個菜單鏈接使用了漢堡圖標，但是在它的下面還有一個寫著“菜單”的標簽文本。這闡明了這個圖標的含義，并且讓手機用戶更容易地找到導航。
另外，當導航彈出是可見的時候，用戶會在導航鏈接的旁邊看到小的加號符號。這些圖標表明有一個可滑動的次級鏈接的抽屜菜單，有點像下拉菜單鏈接，但是是為手機設計的。
另一個流行的趨勢是大型的導航下拉菜單。這可以在像mashable這樣的網(wǎng)站中找到，并且每個鏈接都有一個小的向下的箭頭來表明該鏈接包含一個下拉菜單。
這些圖標不是必需的，但是它們確實提升了體驗。大多數(shù)用戶可以識別出箭頭符號并且知道它的含義。
當然這個導航?jīng)]有這些箭頭也可以使用。但是不可否認的是這些圖標可以幫助表明目的，使瀏覽網(wǎng)站更加簡單。

2.用視覺方式來激勵用戶行為

導航遠不止是頂部的菜單欄。它還包括在頁面主體中或者側邊欄里幫助用戶在瀏覽網(wǎng)站時進行導航的鏈接。
在網(wǎng)站內(nèi)部內(nèi)容的鏈接中，如果圖標非常突出也是極好的。例如，在media temple的首頁上，你會看到一些列表，他們用不同的顏色的圖標展示“閱讀更多”的鏈接。
這些鏈接都使用了指向右側的箭頭圖標。對于網(wǎng)頁來說這是一個通常可被識別出的符號，意味著移至下一頁。
大多數(shù)瀏覽器都有后退按鈕和前進按鈕。后退按鈕指向左邊而前進按鈕指向右邊，這些按鈕可以讓用戶在他們的瀏覽器歷史記錄中進行導航。因此任何向右的箭頭通常表明移動到下一頁。
Media Temple用一種巧妙而又顯而易見的方式運用了上述理論的優(yōu)勢。
有一個很突出的頁內(nèi)導航項就是行為召喚按鈕，簡稱CTA。對于有著特定目的的行為召喚，圖標可以起到很好的作用。
例如jquery在首頁的右上角有一個很明顯的下載按鈕。這個CTA按鈕包含一個放置在文本左側的下載圖標。
這樣能夠讓你知道這個按鈕在某種程度上與下載文件有一些關聯(lián)。
但是你的按鈕在瀏覽器中并不總是需要產(chǎn)生行為。一個CTA可以僅僅是引導跳轉到另一個與你的產(chǎn)品或者服務有關的界面上。
圖標可以用來幫助突出按鈕并促使瀏覽者去點擊。ResumeBaking就是一個很好的例子，它的CTA按鈕被一些帶有彎曲的箭頭的圖標環(huán)繞著。
這些自定義的圖標突出了這個按鈕并通過吸引用戶點擊來推銷它的產(chǎn)品。但是他們的推銷是建立在產(chǎn)品的一些特色上，諸如創(chuàng)建免費的簡歷，在線分享和收到工作邀請。
雖然它們不是那么明確但卻起到了作用。很多用戶僅僅是看到圖標和箭頭就點擊了他們注意到的那個按鈕。

3.輔助配合表單說明

每個網(wǎng)站都有一些各種形式的表單，不論是郵箱注冊表單還是賬號登陸表單，甚至僅僅是一個基本的聯(lián)系表單。
圖標可以配合表單來建立信任并鼓勵用戶行為。
來看一下Life Could Be Better的網(wǎng)站，在頁面的底部有一個固定的郵箱注冊的表單。在表單的旁邊有一個小的信封圖標來表明表單的目的并吸引人的注意。
上述這一點對于公司的聯(lián)系電話以及社交媒體的鏈接也同樣成立。
圖標是用來描述它周圍的內(nèi)容。由于視覺的內(nèi)容比文字更容易理解，因此使圖標清晰并能讓人看一眼就很容易地識別出來是有道理的。
另一個我很喜歡的手法是設計師在注冊的填寫區(qū)域添加一些圖標。如果表單有超過3-4個輸入框并且用戶需要把所有的都填滿時是非常起作用的。
在WebDAM的試用界面我發(fā)現(xiàn)了一個很好的例子，它在每個輸入框前都使用了自定義的圖標。
這些圖標看起來非常棒并且與界面融合得也很好。
而且它們可以幫助用戶很快地識別出每個區(qū)域要求填寫的是什么。因為每個區(qū)域的標簽是嵌在表格內(nèi)的，一旦用戶輸入一些信息標簽就會消失。這樣會讓用戶在輸入一些數(shù)據(jù)后感到迷惑，忘記整個區(qū)域是要填寫什么的。
我只建議你在網(wǎng)站的表單中包含超過3-4個輸入框時添加類似這樣的圖標，否則會顯得有些繁瑣。

4.提示產(chǎn)品功能及特點

每個新的創(chuàng)業(yè)公司，小企業(yè)，或者網(wǎng)頁版的應用都有一系列的特色和理由讓用戶在其網(wǎng)站上停留。你可以把這些特點都列舉出來，但是那樣通常會讓用戶感到很無聊。
試著增加一些圖標來代替文字幫助解釋這些特點和常見的行為。視覺元素是最容易理解的，因此它們會讓用戶在頁面上閱讀更多信息。
拿LightCMS上的圖標舉例子。它們非常的纖細并且顏色較淺，因此能夠很容易地融合進頁面。
但是該網(wǎng)站也清晰地闡明了它的特色并幫助讀者快速瀏覽首頁。這里每一個單獨的圖標在LightCMS上可能并不會吸引到任何人，但是它們可以幫助闡明這個平臺是做什么的以及它為什么有用。
在Disqus的功能頁面上有一個非常相似的設計，在不同的功能旁邊排列著自定義的圖標。
我非常喜歡這個設計，因為這些圖標與Disqus的品牌融合地非常好。
雖然Disqus是從零開始設計的這些圖標，但你不需要這樣做。這里有許多免費的圖標可以下載，想怎么用就怎么用。
總結
從桌面軟件到網(wǎng)頁再到手機app，圖標是所有界面中很自然存在不可或缺的一部分。但是設計潮流和風格在不斷地改變，因此始終跟隨最新的流行趨勢是非常重要的。

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

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)
標簽：做網(wǎng)站公司, 企業(yè)網(wǎng)頁制作, 專業(yè)網(wǎng)站制作

網(wǎng)頁標題：優(yōu)秀的圖標是如何影響用戶體驗
文章URL：http://muchs.cn/news/169117.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有用戶體驗等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)