国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

導(dǎo)讀：在圖形用戶界面中，圖標(biāo)除了通過(guò)其顏色和樣式來(lái)傳播品牌特色之外，應(yīng)當(dāng)優(yōu)先考慮界面語(yǔ)言的傳達(dá)。根據(jù)定義，圖標(biāo)是物體、操作或創(chuàng)意的視覺(jué)表現(xiàn)，但如果用戶看到這個(gè)物體、操作或是創(chuàng)意時(shí)，無(wú)法清楚明白其含義，圖標(biāo)就會(huì)成為華而不實(shí)的擺設(shè)，而且還會(huì)成為阻礙用戶完成任務(wù)的視覺(jué)干擾。

圖標(biāo)能給圖形用戶界面（GUI）帶來(lái)以下好處：

1. 制造良好的點(diǎn)擊區(qū)域：圖標(biāo)的尺寸往往足夠大，用戶可以很容易地在觸屏界面中點(diǎn)擊操作，對(duì)于鼠標(biāo)來(lái)說(shuō)也是一樣的。（文字鏈接在觸屏上易造成用戶閱讀與點(diǎn)擊的不對(duì)稱。）
2. 節(jié)省空間：圖標(biāo)足夠小巧，工具欄、面板等控件在相對(duì)狹小的空間里也可以顯示許多圖標(biāo)。
3. 易于快速識(shí)別（設(shè)計(jì)得好的情況下）——尤其對(duì)于那些常見(jiàn)的或是使用過(guò)的標(biāo)準(zhǔn)圖標(biāo)來(lái)說(shuō) 無(wú)需翻譯，那些考慮了文化差異的圖標(biāo)設(shè)計(jì)是國(guó)際通用的。（例如，郵箱在不同的國(guó)家會(huì)有不同的樣子，但是信封卻是一樣的，因此相比之下，信封是一個(gè)更加國(guó)際化，更適用于電子郵件的圖標(biāo)。）
4. 符合并能提升設(shè)計(jì)的美學(xué)訴求。
5. 當(dāng)相同的圖標(biāo)和樣式用在不同的地方時(shí)，能給用戶提供產(chǎn)品系列的概念，增強(qiáng)產(chǎn)品間的聯(lián)系。

盡管圖標(biāo)有以上這么多潛在的優(yōu)勢(shì)，當(dāng)設(shè)計(jì)未充分考慮到圖標(biāo)潛在的問(wèn)題時(shí)，它們一樣會(huì)給用戶界面帶來(lái)了可用性問(wèn)題。

通用圖標(biāo)少之又少

用戶只對(duì)少數(shù)幾個(gè)圖標(biāo)有著通用的認(rèn)識(shí)，例如主頁(yè)，打印以及放大鏡圖標(biāo)代表的搜索等等。除此之外，大部分的圖標(biāo)由于其在各種界面中的不同用法，在用戶看來(lái)仍然是模棱兩可的。久而久之，這種標(biāo)準(zhǔn)化的缺失讓圖標(biāo)在界面中的應(yīng)用成為設(shè)計(jì)之痛，因?yàn)橛脩魺o(wú)法期待每次見(jiàn)到這個(gè)圖標(biāo)時(shí)它們都代表著相同的含義。

三條杠形狀被俗稱為“漢堡”的圖標(biāo)就是個(gè)很好的例子，它成為通用圖標(biāo)還有很長(zhǎng)的路要走。大部分應(yīng)用中使用這個(gè)圖標(biāo)代表了主導(dǎo)航菜單，而還有部分用它（或是十分類似的圖標(biāo)）來(lái)表示列表。例如，清單管理應(yīng)用Buy Me a Pie就用這個(gè)圖標(biāo)來(lái)觸發(fā)打開常用添加項(xiàng)的列表。更讓人困惑的是，這個(gè)圖標(biāo)處在輸入框的右邊，而通常這里出現(xiàn)的圖標(biāo)會(huì)是一個(gè)提交輸入框內(nèi)容的按鈕。（實(shí)際上，界面中輸入框和圖標(biāo)有著分別獨(dú)立的功能，如果你認(rèn)為在界面中輸入文字后點(diǎn)擊這個(gè)圖標(biāo)會(huì)顯示一個(gè)根據(jù)輸入進(jìn)行過(guò)濾后的列表，那你就錯(cuò)了。）

Buy Me a Pie安卓版使用了三個(gè)彩色條的“漢堡”圖標(biāo)，用于打開常用項(xiàng)的列表，這與常用的導(dǎo)航菜單用法有很大的區(qū)別，然而色彩上的處理不足以讓用戶認(rèn)識(shí)到這個(gè)圖標(biāo)有著不同的含義。

心形圖標(biāo)在Combadi（左圖）相比Fab（右圖）功能就較為局限，它不能用于保存商品到收藏列表，盡管Combadi在十分相似的位置上使用了一樣的圖標(biāo)

即使是再小的功能或是含義的不同都會(huì)阻礙用戶再次見(jiàn)到這個(gè)圖標(biāo)時(shí)對(duì)它的理解和信賴。

就在上周（譯者注：這篇文章發(fā)布于7.27），我們發(fā)布了一個(gè)關(guān)于網(wǎng)站在其主導(dǎo)航欄中使用時(shí)鐘圖標(biāo)的可用性報(bào)告，盡管圖形本身的識(shí)別度很高，用戶都明白它是一個(gè)時(shí)鐘，但是這個(gè)圖標(biāo)的在此案例中的含義是十分模糊的，因?yàn)榫W(wǎng)站并沒(méi)有將這個(gè)圖標(biāo)用作它看上去所表現(xiàn)出的含義，而是用作導(dǎo)航歷史記錄，點(diǎn)擊會(huì)打開一個(gè)側(cè)邊欄，顯示用戶最近訪問(wèn)過(guò)的頁(yè)面。然而測(cè)試的結(jié)果是沒(méi)有一個(gè)受測(cè)用戶去點(diǎn)擊它。模糊的圖標(biāo)＝無(wú)意義的功能

圖標(biāo)需要文字輔助

幾乎所有的圖標(biāo)都會(huì)遇到讓用戶覺(jué)得模棱兩可的問(wèn)題，為了解決這個(gè)問(wèn)題，我們應(yīng)當(dāng)給圖標(biāo)配以文字標(biāo)記，給用戶在特定的情景中弄清它的含義。（就算使用標(biāo)準(zhǔn)圖標(biāo)，通常配上文字也會(huì)是個(gè)更安全的選擇，尤其是當(dāng)你對(duì)這個(gè)圖標(biāo)做了一些符合自己審美偏好的微調(diào)。）

圖標(biāo)的文字應(yīng)當(dāng)總是可見(jiàn)的，不根據(jù)用戶的操作來(lái)顯示或是隱藏。對(duì)于導(dǎo)航里使用的圖標(biāo)，文字更是十分關(guān)鍵的。不要過(guò)于依賴讓用戶懸浮圖標(biāo)來(lái)顯示文字：這不僅提高了用戶的交互成本，也無(wú)法在用戶使用觸屏界面時(shí)生效。

Usability.gov在網(wǎng)站的每一頁(yè)中都顯示了快速導(dǎo)航的圖標(biāo)，用于快速跳轉(zhuǎn)到設(shè)計(jì)方法、設(shè)計(jì)文檔和模版以及設(shè)計(jì)規(guī)范的頁(yè)面。如果我讓這篇文章的每個(gè)讀者都給我發(fā)一個(gè)他心目中能代表“設(shè)計(jì)方法”的圖標(biāo)，我能肯定我將收到許許多多不同的答案。正如我們多年前在《網(wǎng)站主頁(yè)可用性設(shè)計(jì)規(guī)范》中提到的，“如果你考慮要在導(dǎo)航里使用圖標(biāo)，用戶將很可能難以識(shí)別它們?！彪m然他們?cè)谝苿?dòng)端的站點(diǎn)上意識(shí)到文字的重要性并且使用文字輔助說(shuō)明了圖標(biāo)的含義，但是他們?cè)谧烂姘姹旧蠀s隱藏了這些文字，只有當(dāng)用戶感到好奇將鼠標(biāo)移動(dòng)到圖標(biāo)上才出現(xiàn)。在桌面端的網(wǎng)站里，他們將導(dǎo)航菜單固定懸浮在頁(yè)面的左側(cè)，以確保用戶在上下滾動(dòng)時(shí)仍然可以快速的進(jìn)行頁(yè)面的跳轉(zhuǎn)，這說(shuō)明了他們認(rèn)為這些導(dǎo)航很重要對(duì)用戶很有用。但是，將圖標(biāo)的輔助文字隱藏卻將這些導(dǎo)航的作用變得毫無(wú)意義，與原本的設(shè)計(jì)意圖適得其反。

Usability.gov網(wǎng)站移動(dòng)端將導(dǎo)航圖標(biāo)放在頁(yè)面的頂部，配以輔助文字。桌面端將導(dǎo)航固定懸浮在頁(yè)面的左側(cè)，但是只有在用戶懸停的時(shí)候才顯示文字。這迫使用戶去發(fā)現(xiàn)文字來(lái)理解導(dǎo)航的含義，降低了圖標(biāo)導(dǎo)航的效率。

相對(duì)尺寸有助于提高用戶關(guān)注

通常，圖標(biāo)在手機(jī)上比桌面端網(wǎng)站或是應(yīng)用中看起來(lái)更加明顯，我們?cè)谠O(shè)計(jì)中很容易去假定當(dāng)一個(gè)圖標(biāo)在移動(dòng)端看上去沒(méi)有問(wèn)題時(shí)，這個(gè)圖標(biāo)一定可以應(yīng)用在桌面端的產(chǎn)品中。但是事實(shí)并非如此！在手機(jī)屏幕上，只有有限的元素在吸引用戶的注意力（道理很簡(jiǎn)單，因?yàn)槭謾C(jī)屏幕更小，只能放少量的信息）。相比之下，桌面端的屏幕要大得多，經(jīng)常有很多的內(nèi)容，用戶很容易會(huì)錯(cuò)過(guò)一些信息，當(dāng)然這取決于界面中哪部分的信息在吸引他們的注意力。如果用戶在手機(jī)上看到的界面元素是由一個(gè)標(biāo)志，一個(gè)大標(biāo)題，一個(gè)圖片和一個(gè)菜單圖標(biāo)組成，那么這個(gè)菜單圖標(biāo)比相同界面在桌面端里的圖標(biāo)會(huì)有更大的機(jī)會(huì)受到用戶的關(guān)注，因?yàn)樵谧烂娑松?，整屏都是吸引用戶注意力的?nèi)容，而這個(gè)圖標(biāo)僅僅是呆在某個(gè)角落里。

所以在圖標(biāo)設(shè)計(jì)中也應(yīng)當(dāng)考慮它與界面中其他元素的相對(duì)大小。在一個(gè)標(biāo)準(zhǔn)移動(dòng)版網(wǎng)站的頁(yè)眉上，漢堡形狀的菜單圖標(biāo)大約會(huì)占據(jù)頁(yè)面寬度的20-25%，而將這個(gè)設(shè)計(jì)應(yīng)用到更大屏幕尺寸的設(shè)備上時(shí)，通常都使用的是一樣的大小。這樣導(dǎo)致的結(jié)果就是在桌面端（或是大尺寸的平板，尤其是在橫屏模式下），圖標(biāo)看起來(lái)會(huì)小得多，而且在界面其他元素的干擾下，變得更加不明顯。要解決這個(gè)問(wèn)題，可以在大屏設(shè)備上（通常會(huì)有很多空間）直接將菜單項(xiàng)都展示出來(lái)，而非保持隱藏在漢堡圖標(biāo)里。這樣不僅能夠讓菜單項(xiàng)更易于發(fā)現(xiàn)，也可以避免許多由隱藏導(dǎo)航帶來(lái)的可用性問(wèn)題。

?

Upworthy.com:?用于打開主菜單的三條杠“漢堡”圖標(biāo)在移動(dòng)端占據(jù)了站點(diǎn)標(biāo)志下導(dǎo)航欄20%的寬度。查看它的桌面版本時(shí)，這個(gè)主菜單的圖標(biāo)仍然使用一樣的尺寸，盡管導(dǎo)航欄已經(jīng)變大了許多。結(jié)果是這個(gè)圖標(biāo)僅僅占桌面寬度的3.5%左右（這樣計(jì)算的基礎(chǔ)還沒(méi)有算上網(wǎng)站兩側(cè)的留白區(qū)域）。相對(duì)尺寸的區(qū)別以及桌面端更多元素在吸引用戶的注意力，也解釋了為什么圖標(biāo)在移動(dòng)端更易被用戶發(fā)現(xiàn)和注意到。

圖標(biāo)設(shè)計(jì)的小建議

當(dāng)你決定給你的界面中設(shè)計(jì)圖標(biāo)時(shí)，請(qǐng)先做調(diào)研！先去看看那些你的競(jìng)爭(zhēng)對(duì)手使用的或是產(chǎn)品目標(biāo)平臺(tái)常用的圖標(biāo)，因?yàn)檫@些是你的用戶最熟悉的。

如果你必須要設(shè)計(jì)一個(gè)新的圖標(biāo)，你可以參考一下的指南，盡量將它設(shè)計(jì)得易于識(shí)別和記?。?/p>

1. 保持簡(jiǎn)潔。減少圖形的細(xì)節(jié)盡量少添加一些個(gè)性元素遠(yuǎn)比制作一個(gè)效果真實(shí)逼真的圖標(biāo)更易于提高識(shí)別度。（復(fù)雜的細(xì)節(jié)在小尺寸的圖標(biāo)上很難識(shí)別）
2. 五秒原則：如果你想出合適的圖標(biāo)來(lái)表達(dá)你的設(shè)計(jì)意圖，花了你超過(guò)5秒鐘的時(shí)間，那么似乎這個(gè)含義很難通過(guò)簡(jiǎn)單的一個(gè)圖標(biāo)傳達(dá)出來(lái)。
3. 測(cè)試圖標(biāo)是否容易識(shí)別：?jiǎn)枂?wèn)身邊的人他們認(rèn)為這個(gè)圖標(biāo)是什么意思。
4. 檢測(cè)圖標(biāo)是否容易被記?。焊嬖V他們圖標(biāo)的含義后，過(guò)上幾個(gè)星期再問(wèn)問(wèn)他們是否還記得這個(gè)圖標(biāo)是什么意思。
5. 使用文字輔助。正如Bruce Tognazzini（NNgroup的首席設(shè)計(jì)師）說(shuō)的“一言勝千圖”

#專欄作家#

Terryfan，人人都是產(chǎn)品經(jīng)理專欄作家。目前在點(diǎn)融網(wǎng)擔(dān)任用戶體驗(yàn)總監(jiān)，喜歡設(shè)計(jì)、推理、邏輯分析搞腦子。目前持續(xù)緩慢更新微信公眾號(hào)開卷有譯（terryfan_ux），進(jìn)行翻譯分享。

本文系作者授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。