唐人阁论坛(品茶)_小姐威客网楼风信信息网_楼凤宫论坛(品茶)_唐人阁论坛 2025

新聞資訊

精品主題，實(shí)戰(zhàn)科普，最新行業(yè)熱點(diǎn)話題，隨時(shí)掌握云上咨訊。

值得注意！幫你掃清設(shè)計(jì)障礙的APP內(nèi)圖標(biāo)使用指南
來源：中科服    發(fā)布時(shí)間：2016-10-21    文章分類：行業(yè)動(dòng)態(tài)     分享：
       說設(shè)計(jì)是帶著鐐銬跳舞一點(diǎn)錯(cuò)都沒有，看似自由，實(shí)際上其中包含了太多的潛在規(guī)則。這些規(guī)則有些是從基本的設(shè)計(jì)原則中延伸出來的，還有一些則是約定俗成的。它們并不復(fù)雜，但是非常值得注意~

       自從計(jì)算機(jī)擁有了圖形化界面之后，圖標(biāo)設(shè)計(jì)就已經(jīng)存在了。相比于文本，圖標(biāo)在人機(jī)交互上有著明顯的優(yōu)勢(shì)：

       ?簡(jiǎn)單、高效且友好，圖標(biāo)可以更好地替代較長(zhǎng)的描述性語句。

       ?更加節(jié)省屏幕空間，尤其是在屏幕尺寸越變?cè)叫〉慕裉臁?/span>

       ?賞心悅目，提升整體的設(shè)計(jì)感。

       ?最后但是同樣重要，絕大多數(shù)App都在使用圖標(biāo)，這是用戶熟悉的設(shè)計(jì)模式。

       盡管圖標(biāo)的優(yōu)勢(shì)非常的明顯，但是設(shè)計(jì)師考慮不周的時(shí)候，圖標(biāo)本身所引發(fā)的可用性問題也非常之多。在今天的文章當(dāng)中，我會(huì)總結(jié)App UI設(shè)計(jì)中圖標(biāo)相關(guān)的常見問題，并提出相應(yīng)的解決方案。希望今天的總結(jié)能夠讓你更好地在App 中使用圖標(biāo)，不用在小問題上糾結(jié)。

1、圖標(biāo)應(yīng)當(dāng)正確地傳達(dá)信息

       有時(shí)候，設(shè)計(jì)師會(huì)忽略圖標(biāo)作為識(shí)別性標(biāo)識(shí)的基本功能——圖標(biāo)首要的功能是表詞答意的。從定義上來看，圖標(biāo)是一個(gè)物體或者一個(gè)動(dòng)作的視覺代表。如果一個(gè)圖標(biāo)無法清晰地告知用戶它所代表的內(nèi)容，那么無疑失去了實(shí)用價(jià)值，成為了視覺噪音。

       雖然圖標(biāo)千變?nèi)f化，但是有一些普遍存在的圖標(biāo)還是為大眾所熟知的（家庭、打印以及搜索）：

       但是除開這些最常見的圖標(biāo)之外，絕大多數(shù)的圖標(biāo)都因?yàn)槠缌x和含糊的設(shè)計(jì)而常常令用戶感到迷惑。以iOS 上的游戲中心圖標(biāo)為例，這幾個(gè)多彩的氣泡到底有著怎樣的含義？它是如何同游戲聯(lián)系到一起的？

       如果你覺得這個(gè)游戲中心的圖標(biāo)設(shè)計(jì)不足以說明問題，那么再看看Gmail這個(gè)案例。谷歌原本是計(jì)劃將所有功能都收納到一個(gè)抽象的圖標(biāo)當(dāng)中，而許多用戶則常常會(huì)在反饋的時(shí)候表達(dá)自己的迷惑：“我的谷歌日歷去哪里了？”

       無論一個(gè)圖標(biāo)對(duì)你而言含義有多清晰，對(duì)于首次看到這個(gè)圖標(biāo)的用戶而言，它帶來的體驗(yàn)和你的預(yù)期往往相去甚遠(yuǎn)。你認(rèn)為你的用戶會(huì)很熟悉一個(gè)抽象的圖形或者圖標(biāo)，這是圖標(biāo)設(shè)計(jì)最常見的誤區(qū)之一。

       你所設(shè)計(jì)的圖標(biāo)，首要的任務(wù)是引導(dǎo)用戶去他們?cè)撊サ牡胤?，達(dá)成目標(biāo)：

       ?使用五秒原則：如果一個(gè)圖標(biāo)需要超過5秒時(shí)間來思考它的含義，那么它絕對(duì)無法準(zhǔn)確地傳達(dá)含義。

       ?選擇熟悉的圖標(biāo)：用戶會(huì)基于以往的經(jīng)驗(yàn)來判斷和認(rèn)識(shí)一個(gè)圖標(biāo)，通過你的競(jìng)爭(zhēng)對(duì)手和常用這些圖標(biāo)的平臺(tái)來了解你的用戶，做出合理的選取。

2、讓圖標(biāo)簡(jiǎn)單而概括

       在絕大多數(shù)的情況下，圖標(biāo)并不是用來表現(xiàn)創(chuàng)造力的對(duì)象。請(qǐng)不要誤會(huì)我的意思，我并不是說充滿創(chuàng)意的圖標(biāo)是錯(cuò)的，但是過于花哨的圖標(biāo)確實(shí)會(huì)對(duì)圖標(biāo)的用戶體驗(yàn)造成負(fù)面影響的。如果說真有什么值得注意的技巧，那就是盡量讓你的圖標(biāo)設(shè)計(jì)簡(jiǎn)約、現(xiàn)代而友好，通過其他的元素來表現(xiàn)你的創(chuàng)造力，傳遞更多的信息。

       每個(gè)圖標(biāo)都應(yīng)當(dāng)以盡量簡(jiǎn)約的方式呈現(xiàn)出來，將最核心和最本質(zhì)的概念凸顯出來，降低用戶的學(xué)習(xí)曲線，盡量讓用戶能夠一眼看出來，確保可讀性和清晰度，即使在尺寸很小的情況下。

3、附上文本標(biāo)簽

       好的用戶體驗(yàn)可以從不同的層面來進(jìn)行界定，而能否讓用戶輕松的識(shí)別內(nèi)容是諸多標(biāo)準(zhǔn)中的一條。清晰是優(yōu)秀的UI的重要特征，你的圖標(biāo)應(yīng)當(dāng)幫助用戶不費(fèi)腦子地理解界面信息。然而不同的人會(huì)根據(jù)他們不同的經(jīng)驗(yàn)來判斷圖標(biāo)的含義，這種差異是無法忽略的。而另外一個(gè)普遍的誤解是，用戶會(huì)去主動(dòng)探索不同圖標(biāo)的功能，這種誤解在移動(dòng)端設(shè)計(jì)上則表現(xiàn)得尤其明顯。

       Apple Mail 的自定義界面，你能否識(shí)別出其中的所有的圖標(biāo)含義？

       事實(shí)上，用戶往往會(huì)被不熟悉的界面所嚇倒，他們并不會(huì)主動(dòng)走出舒適區(qū)去探索。為了降低圖標(biāo)信息傳遞上的模糊性，最好是為每個(gè)圖標(biāo)附上文本標(biāo)簽，以明確它的實(shí)際含義。你應(yīng)當(dāng)讓你的用戶擁有明確的期待，讓他們?cè)敢馊c(diǎn)擊它們。

       附上文本標(biāo)簽之后，圖標(biāo)的可用性明顯提高了。

       “有標(biāo)簽vs無標(biāo)簽”的可用性測(cè)試通過一系列的測(cè)試得出了這樣的結(jié)論：

       ?對(duì)于有標(biāo)簽的圖標(biāo)，用戶能夠正確的預(yù)測(cè)點(diǎn)擊圖標(biāo)之后會(huì)發(fā)生什么，成功率高達(dá)88%；

       ?對(duì)于沒有標(biāo)簽的圖標(biāo)，預(yù)測(cè)成功率降低到60%。如果這個(gè)圖標(biāo)是應(yīng)用圖標(biāo)而非應(yīng)用內(nèi)圖標(biāo)，這個(gè)成功率則降低到34%。

       在測(cè)試過程中，發(fā)現(xiàn)有三點(diǎn)非常值得關(guān)注：

       ?對(duì)于復(fù)雜的操作和抽象的概念，圖標(biāo)在傳遞含義上有著明顯的局限性。因此這些圖標(biāo)始終都應(yīng)當(dāng)附上文本標(biāo)簽。

       ?圖標(biāo)的標(biāo)簽應(yīng)當(dāng)是始終都可見的，而無需用戶進(jìn)行任何形式的干預(yù)。許多設(shè)計(jì)師發(fā)現(xiàn)標(biāo)簽的加入，影響了設(shè)計(jì)的美觀，或者說違背了使用圖標(biāo)的初衷。這個(gè)時(shí)候，他們會(huì)選擇使用說明、教學(xué)模式和懸浮顯示等不同的形式來呈現(xiàn)文本標(biāo)簽。但是，說明和教學(xué)模式是有學(xué)習(xí)成本的，用戶往往會(huì)很快忽略，甚至直接跳過。懸浮顯示就更不用說了，在移動(dòng)端上直接沒法用。這幾種解決方案的另外一個(gè)缺陷在于，它們都需要許多額外的操作。

       ?標(biāo)簽+圖標(biāo)的模式明顯強(qiáng)于單獨(dú)的標(biāo)簽或者圖標(biāo)。在單獨(dú)使用的情況下，標(biāo)簽的效果比圖標(biāo)更好。

4、讓圖標(biāo)更容易被點(diǎn)擊（移動(dòng)端）

       越來越多的地方開始使用觸摸屏進(jìn)行交互了，而最常見的就是我們的手機(jī)和平板了。所以，UI控件必須足夠大才能讓用戶輕松點(diǎn)擊，降低誤觸的機(jī)率，降低用戶因?yàn)椴僮魇《a(chǎn)生的沮喪情緒。下面的圖片給予了一組值得參考的數(shù)據(jù)：普通成年人的平均手指寬度為11mm，嬰兒的為8mm，而一些籃球運(yùn)動(dòng)員擁有超過19mm寬的手指。

       在觸摸屏上，UI控件的推薦尺寸寬度是7~10mm，下面是蘋果和谷歌的設(shè)計(jì)規(guī)范上的建議：

       ?蘋果建議將觸摸交互的對(duì)象控制在44×44像素以上，不過這個(gè)實(shí)際大小要根據(jù)屏幕的像素密度而進(jìn)行調(diào)整，而這個(gè)44的像素寬度的參考屏幕是320x480px 的3.5英寸屏幕。

       ?谷歌在規(guī)范觸摸屏控件的時(shí)候，使用的是推薦參數(shù)是48×48 dp。在絕大多數(shù)的情況下，要求控件間的間距至少間隔8dp，確保信息密度和可用性。無論屏幕尺寸大小，這個(gè)48x48dp 的控件尺寸對(duì)應(yīng)的物理尺寸應(yīng)當(dāng)不會(huì)小于9mm。這當(dāng)中還有一個(gè)問題值得注意，即使圖片尺寸是24x24dp，也要確保圍繞它的觸摸觸發(fā)區(qū)域不得小于 48x48dp。

       除此之外，還有一點(diǎn)值得關(guān)注：

       ?圖標(biāo)之間的應(yīng)當(dāng)有足夠的間距，確保用戶能夠準(zhǔn)確的操作而不誤觸。許多地方都會(huì)并排設(shè)置“保存”和“取消”按鈕，如果間距不夠的話很容易按錯(cuò)。通?？刂苾蓚€(gè)按鈕之間的距離在2mm以上，是比較穩(wěn)妥的選擇。

5、不要沿用特定平臺(tái)的圖標(biāo)

       當(dāng)你在為iOS和Android平臺(tái)設(shè)計(jì)APP的時(shí)候，盡量不要沿用其他平臺(tái)的圖標(biāo)設(shè)計(jì)。通常每個(gè)平臺(tái)有它專用的圖標(biāo)，有系統(tǒng)的設(shè)計(jì)規(guī)范。當(dāng)你的APP從一個(gè)平臺(tái)遷移到另外一個(gè)平臺(tái)的時(shí)候，盡量按照新的平臺(tái)的標(biāo)準(zhǔn)來設(shè)計(jì)，不要沿用前一個(gè)平臺(tái)的設(shè)計(jì)。

6、測(cè)試

       你所使用的圖標(biāo)應(yīng)當(dāng)被謹(jǐn)慎對(duì)待，它們應(yīng)當(dāng)經(jīng)過可用性測(cè)試。一旦你習(xí)慣了一個(gè)界面的設(shè)計(jì)，就很難再用新的視角來看待它，而圖標(biāo)的使用和選取也同樣是如此。這樣一來，觀察新用戶第一次使用你所設(shè)計(jì)的界面就顯得相當(dāng)有價(jià)值了，這樣的測(cè)試能幫你判斷圖標(biāo)的設(shè)計(jì)是否清晰直觀：

       ?測(cè)試圖標(biāo)的識(shí)別度。詢問參與測(cè)試者他們所認(rèn)為的圖標(biāo)的含義，避免使用讓用戶迷惑、猜測(cè)的設(shè)計(jì)，絕大多數(shù)的用戶不會(huì)主動(dòng)去探索和猜測(cè)。

       ?測(cè)試圖標(biāo)的記憶性。難以記憶的圖標(biāo)通常也是低效的設(shè)計(jì)，看看用戶在幾周之后是否還記得這些圖標(biāo)的真實(shí)含義。

       網(wǎng)站建設(shè)專家中科服網(wǎng)絡(luò)（ www.avno1.cn）, 專注于高端品牌網(wǎng)站建設(shè)的解決方案，為您提供專業(yè)、安全的企業(yè)展示網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)站認(rèn)證、網(wǎng)絡(luò)營(yíng)銷、并提供一站式互聯(lián)網(wǎng)基礎(chǔ)服務(wù)。7×24小時(shí)專業(yè)技術(shù)支持,互聯(lián)網(wǎng)用戶服務(wù)的選擇。

返回列表

申請(qǐng)?jiān)囉?/h1>

請(qǐng)?zhí)顚懸韵滦畔?，我們回盡快與您聯(lián)系。如有疑問可致電18611229252

你知道你的Internet Explorer是過時(shí)了嗎?

為了得到我們網(wǎng)站最好的體驗(yàn)效果,我們建議您升級(jí)到最新版本的Internet Explorer或選擇另一個(gè)web瀏覽器.一個(gè)列表最流行的web瀏覽器在下面可以找到.