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

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

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

2.用視覺(jué)方式來(lái)激勵(lì)用戶行為

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

3.輔助配合表單說(shuō)明

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

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

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

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

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

網(wǎng)頁(yè)標(biāo)題：優(yōu)秀的圖標(biāo)是如何影響用戶體驗(yàn)
文章URL：http://jinyejixie.com/news/169117.html

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

廣告

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