編者按：為什么說(shuō)「非學(xué)不可」呢?@Akane_Lee ：這篇文雖然說(shuō)是「十大易用性原則」，也可以說(shuō)得上是：「教工程師如何捅 UI 」，看完整篇文章，簡(jiǎn)直是刀刀必中…UI設(shè)計(jì)師們趕緊學(xué)起來(lái)，記得不要給身邊的工程師同學(xué)看到呦。

　　@Akane_Lee ：身為 RD 的你受過(guò)太多 UI 的氣嗎?老是發(fā)現(xiàn)邏輯不通需要打掉重練被延誤時(shí)程嗎?常被 UI 嫌念理工的沒有美感都不懂嗎?報(bào)仇的時(shí)間到了。這篇文雖然說(shuō)是「十大易用性原則」，也可以說(shuō)得上是：「教你如何捅 UI 」。RD 最擅長(zhǎng)講理，就來(lái)跟 UI 講理!從易用性下手找 UI 麻煩，沒有幾位 UI 不中刀的…

　　易用性(Usability)指的是使用者能夠使用某樣工具來(lái)達(dá)到某個(gè)特定目標(biāo)的容易程度，常見的中文翻譯有優(yōu)使性、使用性、易用度、易用性、好用性、可用性等等，其中較常見的為優(yōu)使性和可用性。優(yōu)使性感覺上像是優(yōu)越的使用、還是優(yōu)化過(guò)的使用，在詞匯上模棱兩可有模糊地帶;可用性的說(shuō)法則像是僅分成可以用和不能用兩種狀況。Usability 翻譯成易用性，清楚指出「容易使用」的特點(diǎn)較為貼切。易用性畢竟是個(gè)較抽象的名詞，因此 Jakob Nielsen 提出十大易用性原則，詳細(xì)說(shuō)明所謂「易用」需要符合易于學(xué)習(xí)、快速使用、相對(duì)無(wú)錯(cuò)這三個(gè)部分。

　　一、系統(tǒng)狀態(tài)的能見度( Visibility of system status)

　　軟件應(yīng)該保持相同的模式，透過(guò)適當(dāng)?shù)姆磻?yīng)，在合理的時(shí)間內(nèi)通知使用者，讓使用者了解正在發(fā)生的事情。

　　最常見的就是按鈕狀態(tài)。在計(jì)算機(jī)上瀏覽網(wǎng)頁(yè)時(shí)常常會(huì)發(fā)現(xiàn)某些地方在光標(biāo)移過(guò)去時(shí)顏色會(huì)有所改變，提示你這里可以被點(diǎn)擊。在 iPhone 上沒有光標(biāo)，所以會(huì)以更淺顯易懂的方式告訴你這里可以被操作，像是更立體的按鈕、或是仿真實(shí)體開關(guān)的圖象。(App：Money Book，選中的項(xiàng)目底色變成鮮艷的藍(lán)色。)

　　用戶點(diǎn)擊按鈕，會(huì)出現(xiàn)按鈕被按下去的凹陷感，提示你已經(jīng)點(diǎn)擊到了。(App：Reach，擬真的開關(guān)設(shè)計(jì)與下方明顯凹陷可點(diǎn)擊的 TabBar。)

　　另一種常見的系統(tǒng)狀態(tài)響應(yīng)就是需要用戶等一下，現(xiàn)在正「讀取中」、「下載中」。在等待時(shí)如果沒有任何提示，就會(huì)產(chǎn)生「自從點(diǎn)了這個(gè)按鈕后畫面就不動(dòng)了，我的操作到底有沒有被執(zhí)行呢?不曉得要等多久…」的感受。

　　進(jìn)度條就是為了降低使用者的不耐感、告訴用戶現(xiàn)在處理進(jìn)度如何、大約還需要多少時(shí)間而存在。透過(guò)進(jìn)度條，用戶可以知道他的操作正在執(zhí)行中，現(xiàn)在完成多少部份，再等多久就可以結(jié)束。(App：Evernote，同步時(shí)右上角的 icon 會(huì)轉(zhuǎn)動(dòng)，在所有記事標(biāo)題下方有目前進(jìn)度百分比。)

　　二、系統(tǒng)與真實(shí)世界的關(guān)聯(lián)性(Match between system and the real world)

　　系統(tǒng)應(yīng)該要運(yùn)用用戶的語(yǔ)言，使用他們熟悉的詞句、短語(yǔ)、概念，而不是專業(yè)術(shù)語(yǔ)。

　　因應(yīng)該族群的習(xí)慣進(jìn)行開發(fā)，像 iOS 用戶會(huì)覺得左上角的按鈕通常是「回前頁(yè)」一樣，若你將「回前頁(yè)」放到右上角，會(huì)增加他們操作錯(cuò)誤的機(jī)會(huì)。 試著將 Android 手機(jī)給 iOS 慣用者操作，會(huì)發(fā)現(xiàn)他們不曉得怎么樣回到上一頁(yè)，也不知道回到主畫面的 Home 鍵在哪里，對(duì)于實(shí)體按鍵的功能一無(wú)所知。

　　舉個(gè)我家發(fā)生的真實(shí)的例子：女兒教父親怎么操作家庭計(jì)算機(jī)，當(dāng)她說(shuō)「請(qǐng)把鼠標(biāo)移到開始」時(shí)，父親拿起手上的鼠標(biāo)左右翻看了一下，便將整只鼠標(biāo)對(duì)準(zhǔn)屏幕上的「開始」敲下去，屏幕被鼠標(biāo)撞擊發(fā)出摳摳摳的聲音……女兒?jiǎn)柛赣H，為什么會(huì)把鼠標(biāo)拿起來(lái)敲屏幕，明明只要在桌上移動(dòng)鼠標(biāo)就可以操作，父親說(shuō)：「妳叫我把鼠標(biāo)移到開始的啊!」

　　女兒的認(rèn)知里，拿鼠標(biāo)敲屏幕無(wú)法完成任何操作，鼠標(biāo)只是為了控制光標(biāo)而存在，所以將鼠標(biāo)移到開始同等于「操作鼠標(biāo)以控制屏幕上的光標(biāo)、并將光標(biāo)移到開始」。但對(duì)父親而言，因?yàn)椴皇煜び?jì)算機(jī)操作，他尚未建立鼠標(biāo)等于光標(biāo)的概念，光標(biāo)是光標(biāo)、鼠標(biāo)是鼠標(biāo)，所以會(huì)發(fā)生拿鼠標(biāo)敲屏幕的爆笑情況。

　　你覺得大家都應(yīng)該要知道的事情，其實(shí)不一定都會(huì)曉得。雖說(shuō)這種說(shuō)詞對(duì)「父親」很失禮，但請(qǐng)把所有使用者都當(dāng)成是「父親」那類型的人物。什么樣的用語(yǔ)才能讓第一次接觸 App 的人沒有誤會(huì)的快速上手呢?(App：Weightbot，用于記錄每日體重，仿真現(xiàn)實(shí)生活中的體重計(jì)刻度。)

　　三、使用者的操控自由(User control and freedom)

　　用戶時(shí)常以「嘗試錯(cuò)誤」來(lái)選擇系統(tǒng)功能，他們需要一個(gè)明顯的「離開」來(lái)結(jié)束使用者不需要的狀態(tài)。并且支持復(fù)原步驟與重復(fù)步驟。

　　易于犯錯(cuò)且修正錯(cuò)誤代價(jià)高昂的高風(fēng)險(xiǎn)情形將導(dǎo)致使用者不愿意多研究這個(gè)軟件。良好的設(shè)計(jì)能讓使用者降低出錯(cuò)率，在提供取消和重做的功能前先減少用戶出錯(cuò)的機(jī)會(huì)。

　　Ctrl+z(復(fù)原)是最容易被記住的快捷鍵，也因?yàn)橛袕?fù)原的存在，使用者才會(huì)大膽去嘗試各種不熟悉的操作。他們心想：「反正做錯(cuò)了重來(lái)一遍就好了嘛!」如果一出錯(cuò)就表示要從新開始，使用者會(huì)感到迷惘并且覺得壓力太大。(想看看 Diablo 的專家級(jí)模式，人物死亡不能重來(lái)。在這種模式下哪個(gè)玩家不是備感壓力戰(zhàn)戰(zhàn)兢兢小心翼翼的?)

　　用戶操作 App 是為了完成他預(yù)期的目標(biāo)，根據(jù)八二法則，你的使用者有 80% 都是使用最初階的操作，只有 20% 人會(huì)想要更專業(yè)進(jìn)階的功能。越輕松簡(jiǎn)單無(wú)壓力越受大部份使用者青睞，不過(guò)是想透過(guò) App 完成某項(xiàng)目的，用不著壓力這么大的挑戰(zhàn)自我極限吧?(App：Awesome Note 的設(shè)定頁(yè)面，許多進(jìn)階功能都放在這里。)

　　初學(xué)者和RD很容易在這個(gè)原則犯下錯(cuò)誤，不是所有的功能全部攤到第一層就代表豐富好用。

　　所有的功能都很重要就代表沒有一個(gè)功能是重要的。就像期末考前把課本每個(gè)字句都劃上熒光筆強(qiáng)調(diào)，根本沒有重點(diǎn)，有劃跟沒劃一樣。凡事都有輕重緩急，就像一位血流不止、骨折又長(zhǎng)期咳嗽的病人在眼前，是要先止血、先處理骨折、還是先治療咳嗽一樣。最重要的事情需標(biāo)明出來(lái)，可以暫緩不急的事之后再說(shuō)。

　　功能的優(yōu)先級(jí)也是如此，最重要、最常用的功能放在最顯眼易觸碰的位置，較次級(jí)非必備的功能就擺到下一層或是干脆挪到某個(gè)進(jìn)階選單里去吧。(App：Gmail 的側(cè)邊欄，這種選單無(wú)論主要還是次要的功能，都能排序整理得很漂亮。)

　　四、一致性和標(biāo)準(zhǔn)(Consistency and standards)

　　使用者不應(yīng)該猜測(cè)不同的字匯、狀態(tài)、動(dòng)作是不是代表同一件事。

　　考慮到瀏覽器的兼容性。App 必須采取用戶的語(yǔ)言、并運(yùn)用他們熟悉的單詞、短語(yǔ)和概念，而不是程序語(yǔ)言或?qū)Ｓ忻~。接口中的控制組件、命令、設(shè)定的功能應(yīng)該清晰明確。操作軟件不應(yīng)該需要透過(guò)排除法進(jìn)行演繹推理。也不要讓使用者所執(zhí)行的操作和他們的目標(biāo)沒有明顯的關(guān)連。(App：Priority List，下方各個(gè) icon 的含意要稍微想一下才能理解，且實(shí)際操作和預(yù)期的有落差。)

　　依現(xiàn)實(shí)生活常見的習(xí)慣，讓訊息在自然且有邏輯順序的情況下產(chǎn)生。為了達(dá)到這個(gè)目標(biāo)，有時(shí)需開發(fā)一個(gè)詞典。這個(gè)詞典最好由團(tuán)隊(duì)的技術(shù)編寫者來(lái)管理和實(shí)施、監(jiān)視文件檔案和軟件中出現(xiàn)的術(shù)語(yǔ)一致性。支持目標(biāo)工作領(lǐng)域中的問(wèn)題該如何解決，它應(yīng)該最大限度地減少或消除用戶花費(fèi)時(shí)間解決軟件技術(shù)層面中的問(wèn)題需求。

　　屬性、參數(shù)、設(shè)定、設(shè)置、資源。或者是尋找、搜尋、搜索、搜查、尋求…等等，這些詞指的都是同一個(gè)功能，對(duì)用戶來(lái)說(shuō)他不會(huì)知道 App 上寫的「設(shè)定」和「屬性」其實(shí)是同一件事。如果將所有的字詞統(tǒng)一有困難，可以干脆直接使用圖示代表。(App：My Wonderful Goals，簡(jiǎn)單易懂的 icon 設(shè)計(jì)，畫面干凈清爽。)

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。