在工作之余看看這類（準(zhǔn)則）文章還是能從中得到一些提醒。不過(guò)，我還是不太推薦這類文章給跟我一樣剛?cè)腴T的設(shè)計(jì)師，原因大家都懂。要想在用戶體驗(yàn)設(shè)計(jì)道路上走遠(yuǎn)，還是得靠（書籍）閱讀以及項(xiàng)目實(shí)踐的積累。

移動(dòng)端app設(shè)計(jì)最重要的一件事是確保它是 有用 且 直觀 的。如果app沒(méi)有實(shí)用價(jià)值，人們不會(huì)有任何理由去使用它。如果app非常有用，但需要大量的時(shí)間和精力去學(xué)習(xí)，那人們也不會(huì)去使用它。

好的用戶界面設(shè)計(jì)將回答這些設(shè)計(jì)問(wèn)題：

1）為了app對(duì)用戶是有用的,應(yīng)該以 用戶為中心 進(jìn)行設(shè)計(jì)。用戶使用你的app,是因?yàn)樗麄冃枰鉀Q的一個(gè)緊迫的問(wèn)題。因此，這個(gè)app應(yīng)該對(duì)“目的”有個(gè)明確的定義。思考什么是你的用戶將會(huì)努力實(shí)現(xiàn)且聚焦的主要目標(biāo)，并刪除所有無(wú)關(guān)緊要或次要的東西。

2）你的UI界面應(yīng)該是 清晰 的。你的設(shè)計(jì)的界面必須是能夠有效被使用的，用戶必須能夠分辨出這是什么以及如何使用它，不會(huì)讓用戶產(chǎn)生困惑。

這里，我認(rèn)為以下9個(gè)用戶體驗(yàn)設(shè)計(jì)原則是創(chuàng)建好的移動(dòng)端用戶體驗(yàn)的關(guān)鍵。

1.減少噪音

用戶注意力是一個(gè)寶貴的資源，應(yīng)該合理分配。雜亂和信息過(guò)載的界面：每添加一個(gè)按鈕，圖像，或是文本都會(huì)讓界面變得更復(fù)雜。

在客戶端或網(wǎng)站上雜亂的界面體驗(yàn)很差，如果出現(xiàn)在移動(dòng)端上則糟糕一百倍。圖片來(lái)源：ftrain

法國(guó)著名作家Antoine de Saint-Exupéry說(shuō)道“達(dá)到完美，并不是好得不能再好，而是好得一點(diǎn)都不多余”在移動(dòng)端設(shè)計(jì)當(dāng)中，一個(gè)很重要的事情就是做減法，將那些不是絕對(duì)必要的東西刪掉，減少這些噪音將會(huì)幫助用戶提高注意力。

一個(gè)簡(jiǎn)單的法則：一個(gè)界面關(guān)注一個(gè)主要目標(biāo)。在你設(shè)計(jì)的APP里面的每一個(gè)界面都需要支持 僅有一個(gè)有真正價(jià)值的行動(dòng) 。這會(huì)易于用戶學(xué)習(xí)、使用，或在必要的時(shí)候易于其添加和創(chuàng)建。一百個(gè)簡(jiǎn)潔明了的界面好過(guò)一個(gè)混亂糟糕的界面。

以Uber為例，Uber清楚用戶的使用目標(biāo)是為了打車，所以在其app上面并沒(méi)有其他的信息干擾用戶：基于地理數(shù)據(jù)自動(dòng)檢測(cè)用戶位置，用戶唯一要做的就是選擇上車位置。

好的用戶體驗(yàn)的基本規(guī)則之一：減少用戶達(dá)到目標(biāo)而投入的成本。 

2.讓導(dǎo)航顯而易見(jiàn)

幫助用戶指明方向是每個(gè)app高優(yōu)先級(jí)的事情。好的導(dǎo)航應(yīng)該像一雙看不見(jiàn)的手來(lái)引導(dǎo)用戶使用。畢竟，即使是最酷的功能，最引人入勝的內(nèi)容，用戶找不到也沒(méi)有用。好的移動(dòng)端導(dǎo)航滿足以下幾點(diǎn):

1）移動(dòng)端導(dǎo)航必須是 條理清晰 的。你應(yīng)該使用合適的意符（signifiers）(正確的視覺(jué)隱喻)，這樣的導(dǎo)航不需要任何解釋就可以確保每個(gè)導(dǎo)航元素(如icon)引導(dǎo)用戶去到正確的目的地。

2）移動(dòng)端導(dǎo)航必須是連貫一致的。不要企圖移動(dòng)導(dǎo)航控件到一個(gè)新的位置或隱藏在不同的頁(yè)面，這只會(huì)讓用戶感到困惑。

3）移動(dòng)端導(dǎo)航應(yīng)該讓用戶清晰知道當(dāng)前所處的位置。瀏覽app菜單，無(wú)法指示當(dāng)前位置可能是最常見(jiàn)的錯(cuò)誤?！拔以谀膬?”這是成功導(dǎo)航需要回答的問(wèn)題之一。

3.創(chuàng)建一個(gè)無(wú)縫/連續(xù)的體驗(yàn)

移動(dòng)端設(shè)計(jì)不應(yīng)該是孤立的。創(chuàng)建一個(gè)無(wú)縫/連續(xù)體驗(yàn)貫穿移動(dòng)端、桌面客戶端和平板電腦對(duì)你的用戶來(lái)說(shuō)是非常重要的。

Apple Music

以Apple Music為例，你可以設(shè)置播放列表在你的Mac上,它會(huì)立即同步到你的iPhone。Apple方面承認(rèn)同時(shí)為移動(dòng)端設(shè)計(jì)是非常重要的，創(chuàng)建一個(gè)無(wú)縫/連續(xù)的體驗(yàn)貫穿iPhone、桌面客戶端和iPad對(duì)用戶來(lái)說(shuō)至關(guān)重要。 

4.設(shè)計(jì)友好的觸碰目標(biāo)

小到難以準(zhǔn)確觸碰的目標(biāo)對(duì)用戶來(lái)說(shuō)無(wú)疑是種打擊。特別是你在為移動(dòng)端界面設(shè)計(jì)的時(shí)候，最好讓你的目標(biāo)足夠大，這樣易于用戶去觸發(fā)。

創(chuàng)建目標(biāo)控件的尺寸在7-10毫米，這樣用戶的手指很輕易置于目標(biāo)范圍內(nèi)，利于其準(zhǔn)確點(diǎn)擊觸發(fā)。當(dāng)用戶觸發(fā)目標(biāo)時(shí)，目標(biāo)的邊緣必須是可見(jiàn)的，這為他們提供了明確的視覺(jué)反饋，也是為了讓用戶能準(zhǔn)確觸發(fā)目標(biāo)。

用戶界面的控件必須大到足以輕易的被指尖觸發(fā)。圖片來(lái)源:Apple

同時(shí)，也要確保在可觸碰目標(biāo)之間有足夠的空隙。

5.清晰的文本內(nèi)容

與臺(tái)式電腦相比，智能手機(jī)屏幕相對(duì)較小，這意味著為移動(dòng)端設(shè)計(jì)你將面臨在相對(duì)狹小的界面里面容耐大量信息的挑戰(zhàn)。你可能有過(guò)企圖將盡可能多的信息塞滿進(jìn)去的想法，但你必須抵制這種誘惑。

一個(gè)簡(jiǎn)單的法則：文本至少需要11pt，這樣在正常的閱讀距離下它是清晰的。

圖片來(lái)源：Apple

增加行高和字間距有利于提高易讀性。充足的留白能讓凌亂的界面看起來(lái)誘人和簡(jiǎn)單。

好的用戶界面有足夠令人喘息的空間。圖片來(lái)源:Apple

6.令界面元素清晰可見(jiàn)

使用 顏色 和 對(duì)比度 來(lái)幫助用戶閱讀和理解你的內(nèi)容。在界面里面區(qū)分好顏色的主次關(guān)系，提高可用性。確保元素之間有足夠的色彩對(duì)比保證低視力用戶能夠正常閱讀和使用你的app。

確保文字顏色和背景之間有足夠的對(duì)比以保證文本可讀性。根據(jù)W3C Web內(nèi)容的可訪問(wèn)性指南(WCAG)：

1）小型文本與背景的比例至少是4.5:1。

2）大型文本(14pt的粗體/18pt常規(guī)體或以上)應(yīng)該有一個(gè)至少3:1的對(duì)比度。

不滿足上述建議的文本很難被用戶閱讀，圖片來(lái)源: Apple

對(duì)于移動(dòng)端設(shè)計(jì)來(lái)說(shuō)，有足夠的對(duì)比度是極其重要的：用戶在室外因?yàn)楣饩€原因?qū)е缕聊粚?duì)比度低。

這個(gè)淺灰色頁(yè)面在室內(nèi)看起來(lái)不錯(cuò)，但在戶外就不好了，圖片來(lái)源：usertesting

icon以及其他重要的元素也應(yīng)該使用上面推薦的比率。

icon不遵守上述建議將很難與背景區(qū)分，圖片來(lái)源：Material Design 

7.基于手的操控范圍進(jìn)行設(shè)計(jì)

Steven Hoober在他的移動(dòng)設(shè)備使用研究當(dāng)中,發(fā)現(xiàn)49%的人依靠單手一個(gè)拇指來(lái)觸摸手機(jī)屏幕。下圖你能根據(jù)顏色分辨出用戶與屏幕交互的情況。

單手操作屏幕的舒適區(qū)域。圖片來(lái)源:uxmatters 

綠色區(qū)域表示用戶可以輕易觸摸；黃色區(qū)域，需要用手挪動(dòng)一段距離；紅色區(qū)域，則需要用戶改變手持設(shè)備方式才能觸碰到。手持的位置影響著移動(dòng)端控件的擺放:

1）頂級(jí)菜單是很重要的地方，經(jīng)常被觸發(fā)的控件以及常見(jiàn)的操作都發(fā)生在屏幕的這塊綠色區(qū)域，因?yàn)槟粗冈谠搮^(qū)域發(fā)生交互是最舒適的。

Tumblr常見(jiàn)操作，圖片來(lái)源：Capptivate 

2）將消極的行為（比如刪除）放置在很難觸碰到的紅色區(qū)域，以免用戶不小心觸發(fā)它。

8.減少用戶輸入需要

在移動(dòng)端上，輸入文字是一個(gè)緩慢且容易出錯(cuò)的過(guò)程。因此最好是盡量減少所需輸入：

1）保持表單盡可能的簡(jiǎn)短，移除任何不必要的字段。

沒(méi)有人喜歡填寫表單。相對(duì)于長(zhǎng)而復(fù)雜的表單，那些看起來(lái)少而簡(jiǎn)短的表單用戶更容易投入時(shí)間去填寫。圖片來(lái)源：Lukew

2）在合適的地方使用自動(dòng)補(bǔ)全和調(diào)用個(gè)人數(shù)據(jù)，最大限度的減少用戶輸入。

自動(dòng)補(bǔ)全國(guó)家信息 

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

當(dāng)在一個(gè)大的桌面屏幕上瀏覽時(shí)，所有的移動(dòng)端設(shè)計(jì)看起來(lái)都很好，但在實(shí)際的測(cè)試時(shí)，近半的app可用性出現(xiàn)問(wèn)題，不能正常被使用。即使是在用戶體驗(yàn)方面投入大量精力的移動(dòng)端設(shè)計(jì)，在使用的時(shí)候也會(huì)暴露出一些之前看不見(jiàn)的缺陷。這就是為什么讓真實(shí)用戶在 不同的移動(dòng)設(shè)備 上測(cè)試是非常重要的事情。對(duì)真實(shí)用戶進(jìn)行可用性測(cè)試，你將會(huì)看到你的設(shè)計(jì)如何被其執(zhí)行。把你的app當(dāng)作一個(gè)不斷進(jìn)化的實(shí)體，分析用戶反饋，不斷提高產(chǎn)品的用戶體驗(yàn)。

總結(jié)：

就像其他設(shè)計(jì)原理一樣，上面這些只不過(guò)是一個(gè)開端，你還是需要結(jié)合自己的想法不斷去實(shí)踐。必須記住，你應(yīng)該為了用戶去設(shè)計(jì)，而不是為了設(shè)計(jì)師（自己）。

 

文章來(lái)源：簡(jiǎn)書