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

1.強(qiáng)化導(dǎo)航

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

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

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

3.輔助配合表單說明

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

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

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

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

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

網(wǎng)頁題目：優(yōu)秀的圖標(biāo)是如何影響用戶體驗
本文網(wǎng)址：http://newbst.com/news17/169117.html

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

廣告

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