圖標(biāo)類型及其對(duì)用戶體驗(yàn)的影響

令人舒服的圖標(biāo)

有一些圖標(biāo)幾乎是通用的。一個(gè)房子形狀的圖標(biāo)會(huì)帶你到主頁(yè)或者主屏幕，一個(gè)購(gòu)物車會(huì)讓你購(gòu)買東西，這都是相當(dāng)安全的猜測(cè)。

在大多數(shù)情況下，圖標(biāo)不是一個(gè)用來(lái)發(fā)揮創(chuàng)意的地方。你可以依賴其他設(shè)計(jì)元素去傳達(dá)品牌信息。你的圖標(biāo)的首要工作是指導(dǎo)你的用戶到他們想要去的地方。用奇特的或者過(guò)度聰明的圖標(biāo)表示基本功能，會(huì)摧毀用戶體驗(yàn)。保持簡(jiǎn)單就好。

圖標(biāo)的作用是指導(dǎo)用戶。請(qǐng)保持簡(jiǎn)單。

令人迷惑的和矛盾的圖標(biāo)

當(dāng)你使用有著矛盾或者多重含義的常用圖標(biāo)時(shí)，麻煩就來(lái)了。

想象一下你在一個(gè)應(yīng)用中的一張圖片下面看到這個(gè)圖標(biāo)。它表示什么？如果你點(diǎn)擊了它會(huì)發(fā)生什么？這個(gè)圖標(biāo)是用來(lái)表示你喜歡某些東西，這非常清楚。

但是它會(huì)把這個(gè)圖片或項(xiàng)目保存到收藏夾列表嗎？它會(huì)通知某人你喜歡了它嗎？它會(huì)塑造你的偏好并在你的信息來(lái)源中添加相似的圖片或項(xiàng)目嗎？或者它只是對(duì)支持的一種通用表達(dá)？

就像這個(gè)心，有很多圖標(biāo)我們常常在多種情境下見到，但是它們?cè)诓煌瑘D標(biāo)中的的功能都稍有不同。考慮以下這些有多重含義的常用圖標(biāo)：

即使是在應(yīng)用本身的情境中，這些符號(hào)也可能很令人迷惑，用戶可能期待某個(gè)結(jié)果但卻得到了一個(gè)不同的結(jié)果。

更別說(shuō)iOS和安卓系統(tǒng)慣例的不同了。不同操作系統(tǒng)的欄圖標(biāo)可能非常不同，給用戶帶來(lái)了額外的困惑。如果你對(duì)這件事情不太確信，請(qǐng)閱讀這篇描述了分享圖標(biāo)的 12 種變化的文章，其中幾種很容易被誤解為其他東西而不是分享。

過(guò)時(shí)的圖標(biāo)

很多常用的圖標(biāo)參照了過(guò)時(shí)的或者廢棄的技術(shù)。很多應(yīng)用中保留的保存圖標(biāo)，對(duì)于大多數(shù)使用過(guò)軟盤的人來(lái)說(shuō)沒有問(wèn)題，但很多 95 后會(huì)認(rèn)為這些老人家們堅(jiān)持使用這種圖標(biāo)是個(gè)怪癖。繼續(xù)使用像軟盤這種圖標(biāo)會(huì)讓你的品牌對(duì)年輕用戶群來(lái)說(shuō)顯得過(guò)時(shí)。即使是電話圖標(biāo)也可能需要演變，因?yàn)槟贻p的用戶已經(jīng)不太能夠辨認(rèn)出電話機(jī)了。

獨(dú)一無(wú)二的圖標(biāo)

最棘手的圖標(biāo)挑戰(zhàn)之一是當(dāng)你的產(chǎn)品有獨(dú)一無(wú)二的功能，不在分享、喜歡、上傳圖片、輸入文本等標(biāo)準(zhǔn)動(dòng)作之內(nèi)時(shí)，應(yīng)該怎么做。你如何使用一個(gè)簡(jiǎn)單的符號(hào)傳達(dá)更加抽象的概念——比如觀看你即將到來(lái)的旅游，向朋友發(fā)送一個(gè)有聲讀物，查看你的歷史訂單，或者追蹤你的睡眠模式？

很多設(shè)計(jì)師在做嘗試，很多設(shè)計(jì)師失敗了。無(wú)論在你知道一個(gè)圖標(biāo)應(yīng)該代表什么之后圖標(biāo)具有怎樣的意義，對(duì)于第一次使用的用戶來(lái)說(shuō)它都可能帶來(lái)完全不同的體驗(yàn)。

這并不是說(shuō)如果你想要?jiǎng)?chuàng)造一個(gè)可用的用戶界面，就不能遠(yuǎn)離通用圖標(biāo)。有一些獨(dú)特的圖標(biāo)不管對(duì)新用戶還是老用戶來(lái)說(shuō)都能有效地傳達(dá)它們的意義。

推特著名的羽管筆圖標(biāo)就是很好的例子。盡管沒有標(biāo)簽，在我們的研究中仍然有80%的用戶正確地猜到它是干什么的。

讓我們看看推特在這個(gè)圖標(biāo)上做了些什么：

• 布局。推特將用來(lái)創(chuàng)造（寫推特，拍照，以及上傳圖片）和用來(lái)探索（消息來(lái)源，通知，信息，人和搜索）的圖標(biāo)分開了。如果用戶想要寫一篇帖子，屏幕的底部就是一站式服務(wù)區(qū)。

• 在桌面版上的文字。很多人是首先在電腦上使用推特的。這樣他們就會(huì)很明顯地看到這個(gè)圖標(biāo)旁邊的解釋文字。

• 可記憶性。雖然羽管筆可以被認(rèn)為是過(guò)時(shí)的技術(shù)，就像軟盤一樣，但是它是非常獨(dú)特的，并且容易記憶。你不會(huì)在很多應(yīng)用中看到羽管筆，所以用戶不必嘗試去分辨與其他產(chǎn)品功能上的細(xì)微差異。

• 品牌化。筆上的羽毛與推特logo上的羽毛對(duì)應(yīng)。這在品牌和發(fā)表推文的動(dòng)作之間創(chuàng)造了一種整體感。

  標(biāo)簽與可用性

  針對(duì)于那些認(rèn)為一圖勝千言的人來(lái)說(shuō)可能會(huì)有些失望：

  文本標(biāo)簽會(huì)極大地提高圖標(biāo)的可用性。

  我們很容易期望用戶（尤其是手機(jī)用戶）會(huì)到處點(diǎn)，高興地嘗試所有不同的圖標(biāo)直到他們發(fā)現(xiàn)了每個(gè)圖標(biāo)是干嘛的。

  但實(shí)際上，用戶會(huì)被新的用戶界面嚇到并且不會(huì)像我們期望的那樣在他們的舒適區(qū)之外探索。在一個(gè)不熟悉的產(chǎn)品中，用戶想要在采取動(dòng)作之前就清楚地知道這樣做會(huì)發(fā)生什么。

  你的圖標(biāo)需要在用戶點(diǎn)擊之前為用戶設(shè)定清楚的期望，而這通常意味著使用文本標(biāo)簽。

  我們的研究結(jié)果：有標(biāo)簽VS沒有標(biāo)簽

  在我們的研究中，我們發(fā)現(xiàn)對(duì)有標(biāo)簽的圖標(biāo)來(lái)說(shuō)，在88%的情況下用戶能夠在點(diǎn)擊之前正確地預(yù)測(cè)將會(huì)發(fā)生什么。

  而對(duì)于沒有標(biāo)簽的圖標(biāo)來(lái)說(shuō)，這個(gè)比率只有60%。

  并且如果沒有標(biāo)簽的圖標(biāo)在應(yīng)用中是獨(dú)一無(wú)二的，那么用戶在點(diǎn)擊之前正確預(yù)測(cè)將會(huì)發(fā)生什么的比例只有34%。

  比如說(shuō)，Meetup應(yīng)用使用一個(gè)名牌圖標(biāo)表示小組活動(dòng)并加上了一些額外的品牌識(shí)別。但是，因?yàn)橐粋€(gè)空的名牌不會(huì)讓大多數(shù)人想起活動(dòng)或者通知，所以他們?cè)黾恿藰?biāo)簽。100%的測(cè)試參與者能夠正確地猜測(cè)出這個(gè)加了標(biāo)簽的圖標(biāo)能干什么。

  變通方法

  有一些設(shè)計(jì)師發(fā)現(xiàn)加標(biāo)簽違背了使用圖標(biāo)的目的，并且使用戶界面顯得雜亂。為了避免使用標(biāo)簽，他們?cè)诮坛袒蛘咭龑?dǎo)頁(yè)面中加上了關(guān)于使用圖標(biāo)的說(shuō)明，希望訓(xùn)練用戶如何與圖標(biāo)交互。

  雖然這可能是用來(lái)介紹獨(dú)特的或者不通用的圖標(biāo)的好方式，但是這不應(yīng)該替代更加直覺化的設(shè)計(jì)。記住一件事：用戶常常跳過(guò)教程或者很快地忘記了他們學(xué)過(guò)的一切。教程應(yīng)該是一個(gè)工具，而不是一個(gè)依靠。

  對(duì)設(shè)計(jì)決策進(jìn)行測(cè)試和驗(yàn)證

  在做一個(gè)新的設(shè)計(jì)的時(shí)候，跟隨最佳實(shí)踐比如高對(duì)比度按鈕和可讀性強(qiáng)的字體是一個(gè)很好的開始。但是最終，正確的設(shè)計(jì)決策是能夠帶來(lái)預(yù)期結(jié)果的那個(gè)。去發(fā)現(xiàn)你的設(shè)計(jì)決策是否給用戶帶來(lái)直覺并且以你希望的方式影響他們。

  驗(yàn)證你的假設(shè)

  把你的設(shè)計(jì)當(dāng)做是你需要常常去驗(yàn)證、反證或改進(jìn)的假設(shè)。這會(huì)給你信心去嘗試很多實(shí)驗(yàn)并發(fā)現(xiàn)什么才能夠帶來(lái)最好的商業(yè)結(jié)果以及愉悅你的用戶。

  做定期的用戶測(cè)試，去聽用戶如何描述他們?cè)谑褂媚愕木W(wǎng)站、應(yīng)用或者產(chǎn)品時(shí)的體驗(yàn)。你將會(huì)聽到他們描述你的品牌與什么情感聯(lián)系在一起，你會(huì)看到很多因?yàn)榱钊艘苫蟮膱D標(biāo)或者難以閱讀的文字而讓他們感到困惑的地方。

  但是你不必等到有了一個(gè)開發(fā)完成的真實(shí)的產(chǎn)品才能去收集用戶反饋；你可以在原型設(shè)計(jì)階段就開始用戶測(cè)試。這會(huì)幫助你驗(yàn)證你的設(shè)計(jì)決策并帶著信心繼續(xù)，或者快速發(fā)現(xiàn)和修復(fù)所有不起作用的設(shè)計(jì)。

  如果你的設(shè)計(jì)已經(jīng)實(shí)現(xiàn)了，使用A/B測(cè)試驗(yàn)證你的設(shè)計(jì)決策是否影響了用戶行為，轉(zhuǎn)化率以及以你期望的方式帶來(lái)的收益。

  簡(jiǎn)單的用戶測(cè)試問(wèn)題

  這是當(dāng)你在驗(yàn)證你的設(shè)計(jì)時(shí)可以詢問(wèn)用戶的一些問(wèn)題：

  • 在使用【你的網(wǎng)站或應(yīng)用】之前，請(qǐng)告訴我們你對(duì)一個(gè)從事【你的公司的業(yè)務(wù)】的公司的期望。你認(rèn)為它能夠做什么？你覺得這個(gè)網(wǎng)站或應(yīng)用應(yīng)該長(zhǎng)什么樣子？

  • 你首先會(huì)點(diǎn)擊的是什么東西？

  • 你會(huì)用哪三個(gè)詞描述這個(gè)網(wǎng)站或應(yīng)用？

  • 使用 1 分（非常不愉快）到 5 分（非常愉快）評(píng)價(jià)這個(gè)網(wǎng)站或應(yīng)用給你的感覺？

  • 你有多大可能性信任這家公司？

  • 這個(gè)網(wǎng)站或應(yīng)用相比起你的期望如何？

  • 不要點(diǎn)擊，告訴我們你認(rèn)為點(diǎn)擊了一個(gè)這種形狀的圖標(biāo)會(huì)發(fā)生什么？然后點(diǎn)擊它，實(shí)際上發(fā)生了什么？

  如果你的設(shè)計(jì)決策對(duì)用戶起作用并且能夠指導(dǎo)他們使用你的用戶界面，那么用戶就能夠完成你期望他們完成的事情了。這不只是一個(gè)有效的設(shè)計(jì)——這也是一種巧妙的商業(yè)行為。網(wǎng)站建設(shè)公司博納網(wǎng)絡(luò)編輯整理了，但愿能對(duì)您的手機(jī)網(wǎng)站建設(shè)制作方案有所幫助。