藍(lán)藍(lán)設(shè)計(jì)( www.shtzxx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：莫貝網(wǎng)

 如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

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

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

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

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

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

很多時(shí)候，一個(gè)簡(jiǎn)單的圖標(biāo)可以代替一段很長(zhǎng)的描述性文字 – 對(duì)于手機(jī)甚 至是手表這樣的小屏設(shè)備來(lái)說(shuō)，這樣的特性無(wú)疑是非常有用的。不過(guò)這里也存在著設(shè)計(jì)上的陷阱 – 我們同樣知道，如今很多圖標(biāo)在表意上其實(shí)是難以做到清晰準(zhǔn)確的，它們需要人們思考，會(huì)提升體驗(yàn)過(guò)程中的認(rèn)知負(fù)荷。如果無(wú)法快速而準(zhǔn)確的傳達(dá)信息，特別是對(duì) 于移動(dòng)設(shè)備而言 – 界面再漂亮，動(dòng)效再炫酷，又有什么用呢？
其實(shí)原則很簡(jiǎn)單：只有當(dāng)圖標(biāo)能夠100%準(zhǔn)確清晰的表達(dá)含義時(shí)，才去使用。別妥協(xié)。

說(shuō)到表意模糊的圖標(biāo)，我想起最近在Twitter上看到的一張圖片。看看作者對(duì)這些圖標(biāo)的神吐槽：

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

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

經(jīng)過(guò)重設(shè)計(jì)之后的Twitter，很多新用戶(hù)無(wú)法快速了解他們?cè)诮缑娈?dāng)中應(yīng)當(dāng)做些什么 – 應(yīng)該是發(fā)推，但是從哪里開(kāi)始？是那個(gè)藍(lán)色的圖標(biāo)嗎？它是什么意思，羽毛代表著一根筆嗎？

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

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

作為Instagram的用戶(hù)，你曾以這個(gè)圖標(biāo)為入口使用過(guò)這個(gè)功能沒(méi)？這個(gè)圖標(biāo)能讓你預(yù)期到這樣的功能嗎？對(duì)我來(lái)說(shuō)，不能。

界面的上下文環(huán)境也是我們?cè)?span style="width:auto;height:auto;float:none;" id="9_nwp">設(shè)計(jì)圖標(biāo)時(shí)必須考慮到的重要因素，很多看上去含義清晰的圖標(biāo)在某些界面環(huán)境下很可能產(chǎn)生歧義。打開(kāi)網(wǎng)頁(yè)端的Gmail，你會(huì)看到這樣的例子 – 看到那兩個(gè)非常相似的圖標(biāo)沒(méi)？它們出現(xiàn)在同一個(gè)界面中，卻有著非常不同的含義：

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

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

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

很多圖標(biāo)只有在音樂(lè)app這個(gè)特定的產(chǎn)品類(lèi)型當(dāng)中才能表達(dá)出準(zhǔn)確的含義：

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

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

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

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

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

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

小結(jié)

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