有哪些因素容易影響圖標(biāo)的易用性

編者按：今天給同學(xué)們絮叨下圖標(biāo)的事兒，在很多時候，圖標(biāo)其實會對界面的清晰性易用性產(chǎn)生負(fù)面影響。作為設(shè)計師，務(wù)必留意我們所習(xí)慣的圖標(biāo)使用方式，并盡可能的多測試，案例分析在這兒>>>

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),平安企業(yè)網(wǎng)站建設(shè),平安品牌網(wǎng)站建設(shè),網(wǎng)站定制,平安網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,平安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

圖標(biāo)是界面的基本組成部分之一，然而在很多時候，圖標(biāo)本身也在破壞著界面的清晰性。

象形圖出現(xiàn)在人類早期，我們可以將其視為較初的文字形式。如今，在某些文明群體中，象形圖依然是人們進行溝通的主要媒介。

在很多公共城所，圖形時常被用于導(dǎo)航，特別是在譬如機場這樣的多文化環(huán)境，僅憑文字傳達信息顯然是不夠的。

而在計算設(shè)備上，圖標(biāo)隨著GUI時代的發(fā)展而迅速流行。看看較早的桌面計算機GUI(XeroxStar)，設(shè)計師DavidSmith在其中使用了圖標(biāo)以及桌面隱喻的理念：

當(dāng)然，我們都知道為什么圖標(biāo)可以迅速流行起來并發(fā)展成為UI的重要組成部分，直到如今更是如此–圖標(biāo)能給UI帶來圖形化的愉悅性，當(dāng)我們設(shè)計的正確的時候，它們不僅能清晰的傳達信息，而且能給界面帶來個性與氣質(zhì)。

很多時候，一個簡單的圖標(biāo)可以代替一段很長的描述性文字–對于手機甚至是手表這樣的小屏設(shè)備來說，這樣的特性無疑是非常有用的。不過這里也存在著設(shè)計上的陷阱–我們同樣知道，如今很多圖標(biāo)在表意上其實是難以做到清晰有效的，它們需要人們思考，會提升體驗過程中的認(rèn)知負(fù)荷。如果無法快速而有效的傳達信息，特別是對于移動設(shè)備而言–界面再漂亮，動效再炫酷，又有什么用呢？

其實原則很簡單：只有當(dāng)圖標(biāo)能夠100%有效清晰的表達含義時，才去使用。別妥協(xié)。

說到表意模糊的圖標(biāo)，我想起較近在Twitter上看到的一張圖片?？纯醋髡邔@些圖標(biāo)的神吐槽：

我們總會聽到(或說出)這樣的話：“人們每天都會用我們的軟件，他們很快就能理解并記住這些圖標(biāo)的含義”。不能說沒道理，但我有時還是懷疑這種看法的有效性。我自己每天都會多次用到Mac上的郵件應(yīng)用，但每次我要寫郵件的時候仍然會對那兩個圖標(biāo)產(chǎn)生片刻的遲疑：

另外還有個壞消息：用戶通常會下意識的回避掉那些他們無法即刻理解的界面元素–對未知事物的不信任，這是我們的天性。我猜Google在決定將其他app隱藏到一個表意模糊的圖標(biāo)后面之后，客服會收到不少類似的詢問：“我的Google日歷跑哪去了？”

經(jīng)過重設(shè)計之后的Twitter，很多新用戶無法快速了解他們在界面當(dāng)中應(yīng)當(dāng)做些什么–應(yīng)該是發(fā)推，但是從哪里開始？是那個藍色的圖標(biāo)嗎？它是什么意思，羽毛代表著一根筆嗎？

再次改版后的Twitter增加了置頂?shù)木庉嬁颍故虑樽兊妹髁肆撕芏啵?/p>

另外，你知道你可以在Instagram里直接向好友發(fā)送圖片信息嗎？這個功能就藏在右上角的那個圖標(biāo)里：

作為Instagram的用戶，你曾以這個圖標(biāo)為入口使用過這個功能沒？這個圖標(biāo)能讓你預(yù)期到這樣的功能嗎？對我來說，不能。

界面的上下文環(huán)境也是我們在設(shè)計圖標(biāo)時必須考慮到的重要因素，很多看上去含義清晰的圖標(biāo)在某些界面環(huán)境下很可能產(chǎn)生歧義。打開網(wǎng)頁端的Gmail，你會看到這樣的例子–看到那兩個非常相似的圖標(biāo)沒？它們出現(xiàn)在同一個界面中，卻有著非常不同的含義：

這兩個圖標(biāo)對于各自所代表的功能其實都算恰當(dāng)，一個是返回，一個是回復(fù)，但這個界面環(huán)境卻使它們產(chǎn)生了潛在的沖突；雖然特定的布局方式可以在一定程度上起到引導(dǎo)提示的作用，但問題仍然存在。

再舉個正面的例子，Tweetbot當(dāng)中的圖標(biāo)雖然對有些人來說表意不夠清晰，但在“Twitter應(yīng)用”這個大的環(huán)境下，多數(shù)目標(biāo)用戶–Twitter的用戶是可以理解的，因為這些圖標(biāo)的用法與Twitter是保持一致的，這還算OK：

iOS上的Tumblr也是類似，你不能說這些圖標(biāo)在所有情況下都是清晰明確的，但放在Tumblr這個app的環(huán)境當(dāng)中，就可以比較有效的表達含義：

很多圖標(biāo)只有在音樂app這個特定的產(chǎn)品類型當(dāng)中才能表達出有效的含義：

不過上圖Mac版的Rdio當(dāng)中，同一界面里兩個地方使用了相同的擴音器圖標(biāo)，一個表示音量調(diào)節(jié)功能，一個表示當(dāng)前播放的歌曲。

所以，說到這里我還是要重復(fù)一下：除非確定圖標(biāo)形式可以在當(dāng)前界面環(huán)境中100%有效的表達含義，否則不要去用它。如果作為設(shè)計師，你都會產(chǎn)生片刻的遲疑，那么就干掉它好了–使用較簡單的文字來替代，這是較清晰的表達方式。

當(dāng)然，圖形化的表達方式所具有的優(yōu)點同樣不可忽視，所以我們不妨在空間允許的情況下將圖標(biāo)與文字結(jié)合起來，同時利用兩者的優(yōu)點。

iOS默認(rèn)的tab欄，以及蘋果的很多其他產(chǎn)品當(dāng)中都在使用著這樣的模式，例如Mac上的AppStore導(dǎo)航欄。這些圖標(biāo)單獨拿出來的話未必能有效的表達含義，但搭配文字之后就清晰多了：

再比如網(wǎng)頁版Twitter的導(dǎo)航：

另外一個盡人皆知的例子，就是Facebook在某輪改版中干掉了“經(jīng)典”的漢堡包菜單，回歸到較傳統(tǒng)的iOStab欄模式：

科技（成都網(wǎng)站設(shè)計）小結(jié)

希望本文能讓大家了解到，作為較基本也是較廣泛運用的設(shè)計元素，圖標(biāo)——在很多時候其實會對界面的清晰性易用性產(chǎn)生負(fù)面影響。作為設(shè)計師，務(wù)必留意我們所習(xí)慣的圖標(biāo)使用方式，并盡可能的多測試。較后再絮叨一遍：不要使用那些難以清晰表意的圖標(biāo)；嘗試使用更有效的文字標(biāo)簽，或?qū)烧呓Y(jié)合使用。

以上內(nèi)容由創(chuàng)新互聯(lián)（成都網(wǎng)站設(shè)計,成都網(wǎng)站制作）為您提供，更多精彩內(nèi)容：http://bm7419.com/

關(guān)注“科技”微信公眾號，快速獲取互聯(lián)網(wǎng)較新資訊

網(wǎng)站題目：有哪些因素容易影響圖標(biāo)的易用性
文章出自：http://bm7419.com/article10/shoddo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、微信公眾號、網(wǎng)站維護、搜索引擎優(yōu)化、外貿(mào)建站、品牌網(wǎng)站建設(shè)

廣告

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