超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

圖標(biāo),文字,還是圖標(biāo)加文字?

2015-4-14    用心設(shè)計

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

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

來源:莫貝網(wǎng)

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

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

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

01-icon-design-text-ui-ux-design.jpg

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

02-icon-design-text-ui-ux-design.jpg

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

03-icon-design-text-ui-ux-design.jpg

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

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

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

04-icon-design-text-ui-ux-design.png

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

05-icon-design-text-ui-ux-design.jpg

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

06-icon-design-text-ui-ux-design.jpg

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

07-icon-design-text-ui-ux-design.jpg

再次改版后的Twitter增加了置頂?shù)木庉嬁?,使事情變得明了了很多?/p>

08-icon-design-text-ui-ux-design.png

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

09-icon-design-text-ui-ux-design.jpg

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

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

10-icon-design-text-ui-ux-design.png

這兩個圖標(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:

11-icon-design-text-ui-ux-design.png

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

12-icon-design-text-ui-ux-design.jpg

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

13-icon-design-text-ui-ux-design.jpg

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

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

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

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

14-icon-design-text-ui-ux-design.jpg

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

15-icon-design-text-ui-ux-design.png

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

16-icon-design-text-ui-ux-design.png

小結(jié)

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

分享本文至:

日歷

鏈接

個人資料

存檔