在設(shè)計(jì)移動(dòng)端APP的時(shí)候，最重要的事情就是要確保APP的可用性和易用性。如果一款A(yù)PP可用性很低，沒有什么實(shí)際價(jià)值，用戶沒有任何理由去使用它。如果一款A(yù)PP是有使用價(jià)值的，但是需要用戶花上大量的時(shí)間去學(xué)習(xí)如何使用，用戶也不會(huì)使用。

優(yōu)秀的UX設(shè)計(jì)需要注意以下兩點(diǎn)：

• 想要滿足可用性的要求，APP應(yīng)該以用戶為中心。
• 用戶安裝你的APP是因?yàn)樗麄冃枰鉀Q一個(gè)緊迫的問題。

因此，每一款A(yù)PP都是帶著強(qiáng)烈的目的使命的。想想用戶使用這款A(yù)PP的主要目的是什么，然后聚焦于他們的核心目標(biāo)，掃清他們?cè)谑褂眠^程中的障礙。

用你的UX設(shè)計(jì)帶給用戶清晰明了的感覺。如果想要用戶在使用你的APP時(shí)感覺很爽，你必須讓用戶明白這個(gè)APP是做什么，怎么使用它，并且在使用時(shí)沒有任何猶豫和疑義。

我覺得下面的9條黃金法則，可以創(chuàng)造卓越的用戶體驗(yàn)：

1. 拒絕雜亂無章

用戶的注意力是相當(dāng)寶貴的資源，應(yīng)該被吸引到重要的地方。界面上太多的信息會(huì)讓用戶覺得雜亂無章：每一個(gè)新增的按鈕、圖片和文本都會(huì)使界面更加的復(fù)雜。

圖1 雜亂的界面在桌面應(yīng)用和網(wǎng)站上就是一個(gè)糟糕的設(shè)計(jì)，在移動(dòng)端它仿佛又糟糕了一百倍！

Antoine de Saint-Exupéry（譯者注：法國著名的作家、飛行員）有一句名言“完美就是恰到好處，沒有任何多余的部分”。在移動(dòng)端APP設(shè)計(jì)中，剔除一切非必要的元素，因?yàn)榍逦慕缑娓阌谟脩衾斫狻?/p>

一個(gè)簡單的規(guī)則：一屏只放一個(gè)主要的操作。APP中的每一屏都應(yīng)該支持一個(gè)有實(shí)際價(jià)值的單次操作。這樣學(xué)習(xí)和操作起來會(huì)更加容易。用戶寧愿對(duì)著清晰明了的界面操作一百次，也不愿意在一個(gè)雜亂無章的界面上操作哪怕一次。

拿Uber來舉例。Uber知道用戶使用它的目的就是乘車，所以Uber并沒有展示過多的信息：它通過定位數(shù)據(jù)自動(dòng)檢測用戶的位置，用戶需要做的只是選擇一個(gè)上車地點(diǎn)。

圖2 優(yōu)秀UX設(shè)計(jì)的基本規(guī)則之一就是不要干擾用戶的主要操作流

2. 導(dǎo)航的自我解釋

幫助用戶了解自己在APP中目前所在的位置，在每一款A(yù)PP中都是一件優(yōu)先級(jí)很高的事情。好的導(dǎo)航就像一只無形的手把用戶指引到他想去的地方。畢竟哪怕再炫酷的功能、再引人注目的內(nèi)容，如果用戶不能發(fā)現(xiàn)它們，那么它們就是沒有意義的。移動(dòng)端導(dǎo)航設(shè)計(jì)的正確規(guī)則是：

移動(dòng)端導(dǎo)航必須是清晰明了的?？梢栽趯?dǎo)航中使用合理的隱喻，這樣就不需要任何額外的解釋。此外需要確保每一個(gè)導(dǎo)航元素（比如icon圖標(biāo)）可以把用戶帶到他們想去的地方。

圖3

移動(dòng)端導(dǎo)航在APP中的位置是固定的。不要把導(dǎo)航操作移到別處去，也不要隨便隱藏它們，這樣只會(huì)使他們困惑。
移動(dòng)端導(dǎo)航需要向用戶傳達(dá)他們當(dāng)前的位置。導(dǎo)航不能傳達(dá)目前位置信息可能是APP中最常見的一個(gè)錯(cuò)誤?！拔以谀睦铮俊笔且粋€(gè)成功的導(dǎo)航必須要回答的基本問題之一。

3. 創(chuàng)造無縫體驗(yàn)

我們不應(yīng)該只注重移動(dòng)端設(shè)計(jì)。在移動(dòng)端、桌面端和平板電腦之間創(chuàng)造出一種無縫體驗(yàn)對(duì)用戶也是很重要的。

圖4 AppleMusic

4. 設(shè)計(jì)便于手指點(diǎn)擊的觸控目標(biāo)

越小的觸控目標(biāo)越會(huì)增加用戶點(diǎn)擊的難度。當(dāng)你在設(shè)計(jì)移動(dòng)端的界面時(shí)，最好將觸控目標(biāo)設(shè)計(jì)得足夠大，這樣更便于用戶點(diǎn)擊。

觸控目標(biāo)的大小最好控制在7-10mm，這樣用戶使用單個(gè)手指就可以準(zhǔn)確、舒適地進(jìn)行點(diǎn)擊操作。保證用戶在點(diǎn)擊時(shí)，觸控目標(biāo)的邊緣是可見的，這樣可以給用戶一個(gè)清晰的反饋。

圖5? 觸控目標(biāo)必須足夠大，方便用戶點(diǎn)擊

5. 文本內(nèi)容必須清晰易讀

和桌面應(yīng)用相比，智能手機(jī)的屏幕相對(duì)較小。這就意味著需要將信息適配到較小的界面中。你可能有種把信息盡可能擠到小屏幕中的傾向，但是你不能這么做。

移動(dòng)端設(shè)計(jì)的一個(gè)經(jīng)驗(yàn)規(guī)則：文本的字體大小至少需要11磅，這樣可以保證正常閱讀時(shí)字體清晰可見。

圖6

還可以通過調(diào)整行高和字間距的方式提高文本的可讀性。適量的留白 可以使混亂的界面更加清晰整潔。

圖7? 好的界面設(shè)計(jì)都會(huì)有留白

6. 保證界面元素清晰可見

你應(yīng)該使用顏色和對(duì)比來幫助用戶更好地理解你的內(nèi)容。保證界面元素之間有足夠的顏色對(duì)比，這樣可以幫助那些視力不太好的人更好地使用。

確保字體顏色和背景有足夠的對(duì)比，這樣文本更加清晰可見。W3C（譯者注：萬維網(wǎng)聯(lián)盟，最重要的工作是發(fā)展Web規(guī)范）推薦使用以下的對(duì)比度：

小文本和背景的對(duì)比度至少是4.5：1

大文本（14磅加粗/18磅常規(guī)或以上） 和背景的對(duì)比度至少是3：1

圖8? 不滿足對(duì)比度設(shè)計(jì)的文本是很難辨識(shí)的

保持足夠的文本對(duì)比度在移動(dòng)端設(shè)計(jì)中是極其重要的：在戶外環(huán)境中，因?yàn)楣饩€的原因，屏幕上的對(duì)比度會(huì)更低。

圖9? 這種中灰色在室內(nèi)看起來還是不錯(cuò)的，但是在戶外看起來就不怎么樣了

Icon圖標(biāo)或者其他重要的元素也應(yīng)該遵循上述的對(duì)比度設(shè)計(jì)原則。

圖10? 不遵循對(duì)比度設(shè)計(jì)原則的icon設(shè)計(jì)難以辨認(rèn)

7. ?根據(jù)手指位置設(shè)計(jì)操作選項(xiàng)

StevenHoober 在他的移動(dòng)設(shè)備研究報(bào)告中指出，49%的人只靠大拇指完成手機(jī)上的相關(guān)操作。在下圖中，手機(jī)屏幕的圖形基本就是研究數(shù)據(jù)的展示，不同的顏色代表用戶可以用大拇指觸及的不同區(qū)域。

圖11? 用戶單手操作的舒適區(qū)

綠色區(qū)域是用戶可以輕松觸及的區(qū)域，黃色區(qū)域是用戶需要盡力移動(dòng)大拇指可以觸及的區(qū)域，紅色區(qū)域則需要用戶變換持機(jī)手勢。

這些會(huì)影響到操作選項(xiàng)的擺放位置：

將重要的菜單、經(jīng)常使用的操作放在屏幕的綠色區(qū)域，因?yàn)檫@里是用戶用大拇指就可以輕松觸及的。

圖12? Tumblr 的常用操作

將否定的操作（比如刪除和清楚）放在難以觸及的紅色區(qū)域，因?yàn)槲覀儾幌胗脩粢馔獾攸c(diǎn)到他們。

8. ? 盡量減少文本輸入

在移動(dòng)端輸入一個(gè)慢且容易出錯(cuò)的過程。所以最好的辦法就是盡量減少需要輸入的地方：

表格越簡短越好，剔除一切不必須的選項(xiàng)。

圖13? 沒人喜歡填表格，表格越長越復(fù)雜，用戶填寫的可能就越小

使用自動(dòng)完成的、個(gè)性化的數(shù)據(jù)。這樣用戶只需要輸入最少

? ? ? ? ? 圖14? 填寫國家時(shí)，可以自動(dòng)完成

9. 設(shè)計(jì)測試

常常發(fā)現(xiàn)一個(gè)移動(dòng)端設(shè)計(jì)在電腦屏幕上看上去不錯(cuò)，但是在真實(shí)的移動(dòng)端屏幕上表現(xiàn)并不好。甚至精心設(shè)計(jì)地用戶體驗(yàn)，在真實(shí)的情況中都會(huì)出現(xiàn)一些缺陷。這就是為什么讓真實(shí)的用戶在不同的移動(dòng)設(shè)備上測試顯得那么重要。當(dāng)你對(duì)設(shè)計(jì)感覺良好的時(shí)候，應(yīng)該請(qǐng)真實(shí)的用戶進(jìn)行一些常規(guī)的操作任務(wù)來測試你的設(shè)計(jì)。把你的APP當(dāng)成一個(gè)持續(xù)發(fā)展的設(shè)計(jì)，通過數(shù)據(jù)分析和用戶的反饋來持續(xù)提升用戶體驗(yàn)。

結(jié)論

像其他的設(shè)計(jì)元素一樣，上述的幾條設(shè)計(jì)原則僅僅是個(gè)開始。我們需要在自己的設(shè)計(jì)張綜合使用這些原則。記住一點(diǎn)：不要只是為設(shè)計(jì)者設(shè)計(jì)，而是為真正的用戶設(shè)計(jì)。

原文地址：https://uxplanet.org/mobile-ux-design-key-principles-dee1a632f9e6#.7jzzfm2tm

本文由 @yufeicczu? 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。