設(shè)計(jì)移動(dòng)應(yīng)用程序，有很多事情需要考慮。本文總結(jié)了許多可以應(yīng)用于設(shè)計(jì)的實(shí)用建議，供大家一起參考和學(xué)習(xí)。

應(yīng)用程序之間的好壞區(qū)別通常在于其用戶體驗(yàn)（UX）的質(zhì)量。如今，移動(dòng)用戶對(duì)應(yīng)用程序寄予厚望：加載時(shí)間短，易于使用且在交互過(guò)程中倍感愉悅。

如果要使應(yīng)用程序成功，則UX必須是產(chǎn)品策略的重要組成部分。

一、最小化用戶認(rèn)知負(fù)荷

認(rèn)知負(fù)荷是指使用該應(yīng)用所需的腦力。人腦的處理能力有限，當(dāng)應(yīng)用程序一次提供太多信息時(shí)，可能會(huì)使用戶不知所措，從而使他們放棄任務(wù)。

1. 清除雜亂

消除雜亂是“ 移動(dòng)UX設(shè)計(jì)的十大原則 ”中的主要建議之一。頁(yè)面雜亂是優(yōu)秀設(shè)計(jì)的最大敵人之一，雜亂的頁(yè)面會(huì)給用戶增加過(guò)多的信息：每個(gè)添加的按鈕，圖像和圖標(biāo)都會(huì)使屏幕更加復(fù)雜。

頁(yè)面雜亂在PC端上非常糟糕，但在移動(dòng)設(shè)備上則更加糟糕（這是因?yàn)槲覀冊(cè)谝苿?dòng)設(shè)備上的空間遠(yuǎn)沒(méi)有PC端那么多）。在移動(dòng)設(shè)計(jì)中去除任何不必要的東西是很重要的，因?yàn)闇p少雜亂會(huì)提高理解能力。

1）極簡(jiǎn)主義可以幫助你處理凌亂的UI問(wèn)題：

• 盡量減少內(nèi)容（僅向用戶提供他們需要知道的內(nèi)容）
• 盡量減少界面元素，簡(jiǎn)單的設(shè)計(jì)將使用戶放心使用該產(chǎn)品

(簡(jiǎn)潔的標(biāo)簽欄（右）比凌亂的標(biāo)簽欄（左）好得多）

2）使用漸進(jìn)式呈現(xiàn)技術(shù)顯示更多選項(xiàng)

2. 減少重復(fù)性任務(wù)

在設(shè)計(jì)中尋找需要用戶努力的任何事物（這可能是輸入數(shù)據(jù)，做出決定等），并尋找替代方法。

例如，在某些情況下，你可以重復(fù)使用以前輸入的數(shù)據(jù)，而不必要求用戶鍵入更多數(shù)據(jù)，或使用已有的信息來(lái)設(shè)置智能默認(rèn)值。

3. 將任務(wù)分解為小任務(wù)

如果任務(wù)需要用戶執(zhí)行大量的步驟和操作，則最好將此類(lèi)任務(wù)劃分為多個(gè)子任務(wù)。該原則在移動(dòng)設(shè)計(jì)中非常重要，因?yàn)槟悴幌胍淮螢橛脩魩?lái)太多復(fù)雜性。

一個(gè)很好的例子是電子商務(wù)應(yīng)用程序中的分步付款流程，其中設(shè)計(jì)人員將復(fù)雜的結(jié)帳任務(wù)分解成若干個(gè)小任務(wù)，讓用戶完成每個(gè)小任務(wù)。

不同的小任務(wù)還可以幫助連接兩個(gè)不同的活動(dòng)（例如瀏覽和購(gòu)買(mǎi)）。當(dāng)一個(gè)流程被表示為邏輯上相互連接的多個(gè)步驟時(shí)，用戶可以更輕松地進(jìn)行操作。

(查找電影并購(gòu)買(mǎi)電影院門(mén)票）

4. 使用熟悉的屏幕

熟悉的屏幕是指用戶在許多應(yīng)用程序中都會(huì)看到的屏幕?！叭腴T(mén)”，“新功能”和“搜索結(jié)果”等屏幕已成為移動(dòng)應(yīng)用程序的實(shí)際標(biāo)準(zhǔn)。它們不需要額外的解釋?zhuān)驗(yàn)橛脩粢呀?jīng)很熟悉它們。這使用戶可以使用以前的經(jīng)驗(yàn)與該應(yīng)用進(jìn)行交互，而無(wú)需學(xué)習(xí)。

(Quora應(yīng)用程序中的用戶個(gè)人資料屏幕）

5. 最小化用戶輸入

在小巧的手機(jī)屏幕上打字不是最舒適的體驗(yàn)。實(shí)際上，它經(jīng)常容易出錯(cuò)。用戶輸入的最常見(jiàn)情況是填寫(xiě)表格。以下是一些實(shí)用的建議，可簡(jiǎn)化此過(guò)程：

1）刪除任何不必要的字段，使表格盡可能短

(表單設(shè)計(jì)的經(jīng)驗(yàn)法則是，越短越好。將多個(gè)字段合并為一個(gè)易于填充的字段）

2）提供輸入原型

字段原型是一種幫助用戶格式化輸入文本的技術(shù)。一旦用戶將注意力集中在某個(gè)字段上，就會(huì)出現(xiàn)一個(gè)需要輸入的格式，該原型會(huì)在填寫(xiě)該字段時(shí)自動(dòng)設(shè)置文本格式，從而幫助用戶專(zhuān)注于所需的數(shù)據(jù)并更容易地注意到錯(cuò)誤。

3）使用自動(dòng)填寫(xiě)等智能功能

例如，填寫(xiě)地址字段通常是任何注冊(cè)表單中最有問(wèn)題的部分。使用“ 自動(dòng)填寫(xiě)地址”工具，使用戶能夠以比常規(guī)輸入字段更少的擊鍵次數(shù)輸入他們正確的地址。

4）動(dòng)態(tài)驗(yàn)證字段值

在提交數(shù)據(jù)后，當(dāng)你不得不返回并更正錯(cuò)誤時(shí)，這很令人沮喪。盡可能在輸入后立即檢查字段值，以便用戶立即進(jìn)行更正。

(內(nèi)聯(lián)驗(yàn)證）

5）為填寫(xiě)字段的類(lèi)型自定義鍵盤(pán)

詢問(wèn)電話號(hào)碼時(shí)顯示數(shù)字鍵盤(pán)，詢問(wèn)電子郵件地址時(shí)顯示@按鈕。確保該特性在整個(gè)應(yīng)用程序中得到一致的實(shí)現(xiàn)，而不是只針對(duì)某些表單。

(使鍵盤(pán)與所需的文本輸入匹配）

5. 預(yù)測(cè)用戶的需求

主動(dòng)尋找用戶使用中可能需要幫助的步驟。例如，下面的屏幕快照顯示了用戶需要提供特定信息的部分。

(輸入字段旁邊的簡(jiǎn)明幫助文本將幫助用戶找到條形碼的信息）

6. 利用視覺(jué)權(quán)重來(lái)表示重要性

屏幕上最重要的元素應(yīng)該具有最大的視覺(jué)權(quán)重。通過(guò)字體的粗細(xì)、大小和顏色，可以roid或 iOS 構(gòu)建應(yīng)用程序時(shí)，不要從其他平臺(tái)移植UI元素。

圖標(biāo)，功能元素（輸入字段，復(fù)選框，開(kāi)關(guān)）和字體應(yīng)具有原生感，盡可能多地使用自己的組件，這樣人們才會(huì)信任你的應(yīng)用。

1）使移動(dòng)應(yīng)用程序與網(wǎng)站保持一致

這是外部一致性的一個(gè)例子。如果你具有Web服務(wù)和移動(dòng)應(yīng)用程序，請(qǐng)確保它們都具有相似的特征。這將使得用戶在移動(dòng)應(yīng)用程序和web之間進(jìn)行平滑的過(guò)渡。設(shè)計(jì)不一致（例如，不同的導(dǎo)航方案或不同的配色方案）可能會(huì)引起混亂

二、讓用戶來(lái)控制

1. 保持交互元素熟悉且可預(yù)測(cè)

可預(yù)測(cè)性是用戶體驗(yàn)設(shè)計(jì)的基本原則。當(dāng)事情按照用戶預(yù)期的方式運(yùn)行時(shí)，他們會(huì)有一種更強(qiáng)的控制感。與PC不同，在PC上，用戶可以使用懸停效果來(lái)了解事物是否是交互式的，而在移動(dòng)設(shè)備上，用戶只能通過(guò)點(diǎn)擊某個(gè)元素來(lái)檢查交互性。這就是為什么，對(duì)于按鈕和其他交互元素，必須考慮設(shè)計(jì)如何傳達(dá)可視性。

2. “返回”按鈕應(yīng)正常工作

創(chuàng)建不正確的“返回”按鈕會(huì)給用戶帶來(lái)很多問(wèn)題。防止在一個(gè)多步驟的過(guò)程中點(diǎn)擊“返回”按鈕把用戶帶回到主屏幕。

好的設(shè)計(jì)可以使用戶更輕松地返回并進(jìn)行修改。當(dāng)用戶知道可以再次查看他們提供的數(shù)據(jù)或選擇的選項(xiàng)時(shí)，這使他們可以輕松地繼續(xù)。

3. 有意義的錯(cuò)誤提示

人非圣賢孰能。人們與應(yīng)用互動(dòng)時(shí)會(huì)發(fā)生錯(cuò)誤。有時(shí)，它們的發(fā)生是因?yàn)橛脩舴噶艘粋€(gè)錯(cuò)誤。有時(shí)，它們的發(fā)生是因?yàn)閼?yīng)用程序失敗。無(wú)論是什么原因，這些錯(cuò)誤及其處理方式都會(huì)對(duì)UX產(chǎn)生巨大影響。不當(dāng)?shù)奶幚礤e(cuò)誤消息加上無(wú)用的錯(cuò)誤信息會(huì)讓用戶感到沮喪，這可能是用戶放棄應(yīng)用程序的原因。

以Spotify中的錯(cuò)誤狀態(tài)為例。它不能幫助用戶理解上下文，也不能幫助他們找到“我能做什么?”這個(gè)問(wèn)題的答案。

(屏幕僅顯示“發(fā)生錯(cuò)誤”，并未提供有關(guān)解決問(wèn)題的任何建設(shè)性建議）

不要假設(shè)用戶有足夠的技術(shù)知識(shí)來(lái)解決問(wèn)題?？偸怯弥卑椎恼Z(yǔ)言告訴別人哪里不對(duì)。每個(gè)錯(cuò)誤消息應(yīng)該告訴用戶:

• 哪里出錯(cuò)了，為什么？
• 用戶應(yīng)該采取什么措施來(lái)修復(fù)錯(cuò)誤？

三、設(shè)計(jì)無(wú)障礙的界面

無(wú)障礙設(shè)計(jì)使所有能力的用戶都能成功使用產(chǎn)品。考慮有視力障礙，聽(tīng)力障礙和其他殘疾的用戶如何與你的應(yīng)用互動(dòng)。

1. 注意色盲人群

全球人口中有4.5％患有色盲（每12名男性中有1名，每200名女性中有1名），有4％的人視力低下（每30人中有1人），有0.6％的人是盲人（每188人中有1人）。很容易忘記我們是為這類(lèi)用戶設(shè)計(jì)的，因?yàn)榇蠖鄶?shù)設(shè)計(jì)師都不會(huì)遇到此類(lèi)問(wèn)題。

舉一個(gè)簡(jiǎn)單的例子。移動(dòng)端表單的成功和錯(cuò)誤消息通常分別以綠色和紅色顯示，但是紅色和綠色是受色覺(jué)不足影響最大的顏色。填寫(xiě)表格時(shí)，你很可能已經(jīng)看到以下錯(cuò)誤消息：“紅色字段為必填項(xiàng)”？雖然這看起來(lái)似乎不是一件大事，但此錯(cuò)誤消息與以下示例中的表格相結(jié)合，對(duì)于色覺(jué)不足的人來(lái)說(shuō)可能是極其令人沮喪的體驗(yàn)。

(色盲用戶無(wú)法區(qū)分以紅色突出顯示的字段）

正如 W3C的指導(dǎo)原則所指出的那樣，顏色不應(yīng)該用作傳達(dá)信息，指示操作，提示響應(yīng)或區(qū)分視覺(jué)元素的唯一視覺(jué)手段。使用其他視覺(jué)指示符以確保用戶能夠與界面進(jìn)行交互非常重要。

(使用圖標(biāo)和標(biāo)簽顯示哪些字段無(wú)效可以更好地將信息傳達(dá)給色盲用戶）

2. 將動(dòng)畫(huà)設(shè)為可選

暈車(chē)的用戶通常會(huì)在其OS設(shè)置中關(guān)閉動(dòng)畫(huà)效果。在輔助功能偏好設(shè)置中啟用減少動(dòng)作選項(xiàng)后，你的應(yīng)用應(yīng)最小化或消除其自己的動(dòng)畫(huà)。

四、簡(jiǎn)化導(dǎo)航

每個(gè)應(yīng)用程序都應(yīng)優(yōu)先考慮幫助用戶使用導(dǎo)航。如果人們找不到它們，則應(yīng)用程序具有的所有出色功能和引人入勝的內(nèi)容都將無(wú)關(guān)緊要；同樣，如果花太多時(shí)間或精力去發(fā)現(xiàn)如何使用你的產(chǎn)品，你很可能會(huì)失去用戶。

用戶應(yīng)該能夠直觀地探索該應(yīng)用程序，并且無(wú)需任何解釋即可完成所有主要任務(wù)。

1. 使用標(biāo)準(zhǔn)導(dǎo)航組件

最好使用標(biāo)準(zhǔn)的導(dǎo)航模式，例如標(biāo)簽欄（對(duì)于iOS）和抽屜式導(dǎo)航欄（對(duì)于Android）。大多數(shù)用戶都熟悉兩種導(dǎo)航模式，并且會(huì)直觀地知道如何使用你的應(yīng)用程序。

(側(cè)抽屜（Android））

(標(biāo)簽欄（iOS））

2. 優(yōu)先考慮導(dǎo)航選項(xiàng)

根據(jù)用戶與你的應(yīng)用互動(dòng)的方式確定導(dǎo)航的優(yōu)先級(jí)。為常見(jiàn)的用戶任務(wù)分配不同的優(yōu)先級(jí)（高，中，低）。在UI中突出顯示具有高優(yōu)先級(jí)和頻繁使用的路徑和目的地。使用這些路徑定義導(dǎo)航。以一種需要最少數(shù)量的單擊、滑動(dòng)和屏幕來(lái)組織你的信息結(jié)構(gòu)。

3. 不要混雜導(dǎo)航模式

當(dāng)你為你的應(yīng)用選擇一個(gè)主要的導(dǎo)航模式時(shí)，要始終如一地使用它。不應(yīng)該有這樣的情況，你的應(yīng)用程序的一部分有一個(gè)標(biāo)簽欄，而另一部分有一個(gè)抽屜式導(dǎo)航欄。

4. 導(dǎo)航可見(jiàn)

正如雅各布·尼爾森所說(shuō)，認(rèn)識(shí)某件事比記住它容易。通過(guò)使操作和選項(xiàng)可見(jiàn)來(lái)最小化用戶的使用負(fù)擔(dān)。導(dǎo)航應(yīng)該在任何時(shí)候都可用，而不僅僅是在我們預(yù)期用戶需要它的時(shí)候才可用。

5. 明確當(dāng)前位置

在許多移動(dòng)應(yīng)用程序菜單中，不指明當(dāng)前位置是一個(gè)非常常見(jiàn)的問(wèn)題。人們隨時(shí)都應(yīng)該知道他們?cè)趹?yīng)用程序中的位置。

(Health data被突出顯示和Activity在布局的頂部可見(jiàn)）

6. 使用功能性動(dòng)畫(huà)闡明導(dǎo)航的轉(zhuǎn)換

動(dòng)畫(huà)是描述狀態(tài)轉(zhuǎn)換的最佳工具。它可以幫助用戶了解頁(yè)面布局中的狀態(tài)更改，觸發(fā)更改的原因以及在需要時(shí)如何再次發(fā)起更改。

(復(fù)雜的過(guò)渡易于理解）

7. 在UI中小心使用手勢(shì)

在交互設(shè)計(jì)中使用手勢(shì)可能很誘人，但是在大多數(shù)情況下，最好避免這種誘惑。當(dāng)手勢(shì)用作主要導(dǎo)航選項(xiàng)時(shí)，它們會(huì)導(dǎo)致糟糕的UX。為什么？因?yàn)?strong>手勢(shì)是隱藏的控件。

正如托馬斯·約斯指出的在用戶界面中使用手勢(shì)的最大缺點(diǎn)是學(xué)習(xí)曲線。每次將可見(jiàn)控件替換為手勢(shì)時(shí)，應(yīng)用程序的學(xué)習(xí)曲線就會(huì)上升。發(fā)生這種情況是因?yàn)槭謩?shì)的可發(fā)現(xiàn)性較低——它們始終是隱藏的，并且人們需要能夠識(shí)別這些選項(xiàng)才能使用它們，這就是為什么僅使用廣泛接受的手勢(shì)的原因。

在UI中使用手勢(shì)時(shí)，請(qǐng)遵循一些簡(jiǎn)單的規(guī)則：

1）使用標(biāo)準(zhǔn)手勢(shì)

“標(biāo)準(zhǔn)”是指你所在類(lèi)別中最適合應(yīng)用的手勢(shì)。人們熟悉標(biāo)準(zhǔn)手勢(shì)，因此無(wú)需額外的努力即可發(fā)現(xiàn)或記住它們。

2）提供手勢(shì)作為可見(jiàn)導(dǎo)航選項(xiàng)的補(bǔ)充，而不是替代

手勢(shì)可以用作導(dǎo)航的快捷方式，但不能完全替代可見(jiàn)菜單。因此，即使這意味著一些額外的操作，也始終提供一種簡(jiǎn)單可見(jiàn)的導(dǎo)航方式。

本文作者：Nick Babich

原文地址：
https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/

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

題圖來(lái)自Unsplash，基于CC0協(xié)議