發(fā)布時間：2021-10-2 分類： 行業(yè)資訊
在設(shè)計移動產(chǎn)品時，有許多事情需要考慮。在本文中，作者總結(jié)了基于我所經(jīng)歷的各種項目的移動產(chǎn)品設(shè)計中的一些建議，希望能夠激發(fā)讀者的興趣。
如今，人們比歷史上任何時候都更依賴手機。美國的每個人都使用手機長達五個小時，其中大部分用于應(yīng)用程序和瀏覽網(wǎng)頁。
用戶體驗是衡量移動應(yīng)用程序卓越性的最重要標準，尤其是用戶對應(yīng)用程序的期望：快速加載，易用性，有趣。如果您想使您的應(yīng)用程序成功，那么用戶體驗是必不可少的，并且必須始終考慮產(chǎn)品設(shè)計的每個階段。
在設(shè)計移動產(chǎn)品時，有許多事情需要考慮。在本文中，作者總結(jié)了基于我所經(jīng)歷的各種項目的移動產(chǎn)品設(shè)計中的一些建議，希望能夠激發(fā)讀者的興趣。
文章較長，文章目錄如下，學(xué)生可以根據(jù)自己的需要閱讀。
減少認知負擔
滿足用戶的控制感
接口可訪問性設(shè)計
導(dǎo)航欄設(shè)計
導(dǎo)航中的運動設(shè)計
專注于用戶的首次發(fā)布
加快應(yīng)用響應(yīng)速度
提高內(nèi)容呈現(xiàn)的質(zhì)量
觸控設(shè)計
情感設(shè)計
優(yōu)化消息推送
移動設(shè)備優(yōu)化
應(yīng)用程序設(shè)計應(yīng)適應(yīng)新興市場
測試和反饋
1.減少認知負擔
認知負荷是指用戶使用App所需的大腦能量。人類的大腦處理能力有限，當應(yīng)用程序同時提供太多信息時，它可能會給用戶一種壓迫感并促使他們放棄。
1.1。完成界面
減少產(chǎn)品的混亂是一種有效的方法。凌亂是壞產(chǎn)品的最大特點。如果界面充滿雜亂的元素，用戶必須攜帶太多信息：每個新按鈕，圖片和圖標都會使界面更加臃腫。
凌亂的桌面讓我們心煩意亂，凌亂的產(chǎn)品讓用戶更加惱火（這很容易理解，智能手機的屏幕更小，雜亂的感覺會相應(yīng)地放大）。產(chǎn)品經(jīng)理和交互設(shè)計師應(yīng)該嘗試從應(yīng)用程序中刪除不必要的元素，因為減少混亂可以幫助提高用戶的理解。簡單的界面和功能設(shè)計是一個很好的解決方案：
將內(nèi)容量保持在最低水平，僅顯示用戶必須知道的內(nèi)容;
最小化界面元素并使產(chǎn)品界面更清晰，這也有助于減少認知負荷;
右側(cè)顯示的標簽欄明顯優(yōu)于左側(cè)（圖像來源：Apple）
使用Progressive Disclosure方法顯示更多元素或選項。
單擊以展開更多隱藏項目（來源：Ramotion）
1.2。減少任務(wù)
查找產(chǎn)品計劃中可能需要用戶思考的任何模塊（可能是表單輸入或選項選擇）并尋找替代方案。例如，在某些情況下，數(shù)據(jù)可以通過本地緩存記錄，而不是要求用戶每次都在同一個地方重復(fù)輸入;另外，可以根據(jù)用戶的使用行為和使用習(xí)慣為用戶設(shè)置默認值。
1.3。分解任務(wù)
如果任務(wù)包含多個步驟并要求用戶執(zhí)行多個操作，則最好將其分解為多個相關(guān)的子任務(wù)。這個原則在移動產(chǎn)品的設(shè)計中非常重要，因為不應(yīng)允許用戶同時攜帶太多復(fù)雜的任務(wù)。一個很好的例子是電子商務(wù)應(yīng)用程序的訂單購買過程。在電子商務(wù)購買任務(wù)中，復(fù)雜任務(wù)被分解為一系列邏輯漸進子任務(wù)，并且用戶分別執(zhí)行每個子任務(wù)。操作。
任務(wù)分解后，用戶在任務(wù)上的難度降低（來源：Murat Mutlu）
一方面，分解任務(wù)減少了用戶的認知負擔，另一方面，它也起到連接不同任務(wù)的作用。例如，瀏覽和購買在邏輯上是相關(guān)的，但它們在實際操作中是無關(guān)緊要的，但由于每個任務(wù)中用戶的操作復(fù)雜性基本相同，因此從瀏覽到購買有更好的過渡，并且當用戶不會連接時連接不同的任務(wù)。感覺很尷尬。
分解購買電影票（資料來源：Anton Skvortsov）
1.4。使用通用界面設(shè)計解決方案
通用界面設(shè)計解決方案是指大多數(shù)應(yīng)用程序使用的設(shè)計方案，包括導(dǎo)航欄位置，交互模式和標簽對話。在過去十年的移動產(chǎn)品開發(fā)中，許多界面元素被設(shè)計為例程，并且不需要指定或解釋它們，因為用戶已經(jīng)熟悉這種設(shè)計。當用戶使用既定的使用習(xí)慣來使用新應(yīng)用時，他們可以避免學(xué)習(xí)成本和潛在損失。
Quora的用戶頁面
1.5。最小化用戶輸入
在移動電話的屏幕上打字的用戶體驗非常差，僅僅因為物理尺寸太小，并且軟件性能無關(guān)緊要，并且熟練的用戶將是錯誤的。需要用戶手動輸入的最常見方案是填寫表單。以下是一些參考建議：
刪除任何不必要的字段，縮短表單的長度，并確保用戶輸入的內(nèi)容最少;
表單設(shè)計的指南盡可能短，并且可以合并多個字段（來源：Luke W。）
使用輸入掩碼，這是一個幫助用戶格式化輸入文本的插件。它可以執(zhí)行諸如切斷和分組輸入內(nèi)容等操作，幫助用戶專注于表單填寫，使用戶更容易發(fā)現(xiàn)錯誤;
（資料來源：Josh Morony）
使用自動填充等智能功能。例如，填寫地址是任何注冊表單中最有問題的地方。您可以根據(jù)手機位置自動填寫地址信息，因此在大多數(shù)情況下，用戶只需要進行簡單的更正;
動態(tài)驗證字段值。提交后，您將知道輸入錯誤，然后返回到更正。用戶體驗非常差。如果可能，應(yīng)在用戶輸入后立即檢查輸入字段的準確性，以便用戶可以立即糾正它們;
在線實時驗證（來源：Baymard）
根據(jù)字段類型顯示鍵盤類型。輸入電話號碼時，應(yīng)顯示數(shù)字鍵盤;如果您要輸入電子郵件地址，還需要包含@鍵。確保此功能在整個應(yīng)用程序中保持一致，而不僅僅是某些表單。
將鍵盤與所需的文本類型匹配（圖像源：ThinkWithGoogle）
1.6。估計用戶需求
在產(chǎn)品設(shè)計階段，產(chǎn)品需要根據(jù)用戶的操作路徑使用，并積極發(fā)現(xiàn)使用過程中隱藏的痛點。例如，在下圖中，它會提示用戶需要提供信息的具體位置。
此字段旁邊的簡潔幫助文本非常有效（圖像來源：Hotjar）
1.7。通過視覺重量傳達重要性
界面中最重要的元素應(yīng)該具有最直觀的權(quán)重。通過改變重量，尺寸，顏色等可以實現(xiàn)增加元件的重量。
大尺寸元素比小尺寸元素更引人注目
1.8。避免使用術(shù)語
在任何移動產(chǎn)品設(shè)計中，清晰準確的信息是最重要的。使用目標用戶習(xí)慣使用的表達式，而不是生產(chǎn)研究團隊習(xí)慣使用的表達式（或行業(yè)術(shù)語）。
行業(yè)術(shù)語或短語會增加用戶的認知負擔（來源：ThinkWithGoogle）
1.9。一致的設(shè)計
一致性是設(shè)計的基本原則，一致性有助于減少混淆。在應(yīng)用程序設(shè)計中，一致性意味著以下內(nèi)容：
視覺一致性：應(yīng)用中的字體，按鈕樣式和文本標簽樣式需要保持一致;
功能的一致性：交互和交互元素應(yīng)跨頁面保持一致;
產(chǎn)品之間的一致性：同一系列中不同產(chǎn)品（如網(wǎng)易郵箱和網(wǎng)易云音樂）之間的一致性，可以降低使用相關(guān)產(chǎn)品的用戶的學(xué)習(xí)成本。
關(guān)于設(shè)計一致性，有以下建議：
遵循平臺準則/規(guī)范
每個移動操作系統(tǒng)都有標準的界面設(shè)計指南，例如Apple的界面設(shè)計規(guī)范。遵循平臺規(guī)范是很重要的，因為用戶已經(jīng)熟悉他的移動操作系統(tǒng)，并且任何與該系統(tǒng)的交互模式相矛盾的產(chǎn)品在使用過程中都會被摩擦并引起用戶不適。
不要在其他平臺上模仿UI設(shè)計
在為Android或iOS設(shè)計應(yīng)用程序時，請不要參考其他平臺的UI設(shè)計。圖標，功能模塊（輸入框，復(fù)選框，開關(guān)等），字體等應(yīng)保持系統(tǒng)的原生感。盡可能使用本機系統(tǒng)的組件，這增強了用戶的信任。
在不同的終端上保持相同的產(chǎn)品一致
這是產(chǎn)品之間的一致性類別。如果您的產(chǎn)品同時具有網(wǎng)絡(luò)和移動功能，您應(yīng)該保持兩者的風(fēng)格盡可能一致，這將減少用戶在PC和手機之間的不適感。兩者之間的不一致（例如不同的導(dǎo)航方法或不同的配色方案）可能引起混淆并增加用戶的認知負荷。
2.滿足用戶的控制感
2.1。交互式元素是可預(yù)測且用戶友好的
可預(yù)測性是用戶體驗設(shè)計的基本原則。當事物按照用戶期望的方向運行時，用戶具有強烈的控制感。在PC上，用戶可以使用鼠標懸停以確定是否可以單擊或交互元素，但是在移動設(shè)備上，用戶只能單擊以確定它是否是交互元素。這是移動側(cè)按鈕等的交互式元件設(shè)計的原因。用戶如何清楚地將元素視為按鈕？該按鈕應(yīng)與非交互式UI元素清楚地區(qū)分開。
2.2。請使用“退貨”按鈕
正確“return”的使用不正確按鈕會導(dǎo)致很多問題。用戶點擊“返回”按鈕。想要返回上一頁的關(guān)鍵，以避免用戶點擊&&“返回”按鈕直接返回主頁。一個好的設(shè)計應(yīng)該是讓用戶更容易返回并糾正錯誤。當用戶知道他們可以再次查看填寫的表單或選定的選項時，用戶將能夠更輕松地轉(zhuǎn)到下一頁。
2.3。有效的錯誤消息
這個錯誤是有道理的。有時用戶不小心碰到或誤操作，有時程序本身運行不正確。無論什么情況，錯誤及其解決方案都會對用戶體驗產(chǎn)生巨大影響。通知用戶無用的錯誤消息，而不是告訴用戶正確的解決方案，可能會導(dǎo)致用戶體驗受挫，甚至導(dǎo)致用戶丟失。
以Spotify的錯誤頁面為例。此頁面不會告訴用戶如何生成錯誤，也不會告訴用戶如何解決錯誤。然后用戶會感到困惑：“我現(xiàn)在能做什么？”“rd”;
Spotify的錯誤頁面只有“錯誤”，沒有解決方案
不要希望用戶的技能是熟練的，你可以自己解決問題，你應(yīng)該用簡單明了的單詞告訴用戶發(fā)生了什么。錯誤消息應(yīng)包含以下內(nèi)容：
出了什么問題，可能的原因;
為了修復(fù)錯誤，用戶應(yīng)該做什么。
3.界面友好的設(shè)計
可訪問性設(shè)計意味著設(shè)計應(yīng)支持使用各種人群。考慮盲人，聾人或其他殘疾人應(yīng)該如何使用您的應(yīng)用程序？
3.1。照顧有色盲的人
全球色盲或弱者占4.5％，弱視人群占4％，盲人占0.6％。在設(shè)計產(chǎn)品時，我們可以輕松忽略用戶的這一部分，因為大多數(shù)產(chǎn)品經(jīng)理和交互設(shè)計師都沒有遇到過這樣的問題。
有一個簡單的例子，成功和錯誤提示填寫應(yīng)用程序中的表單分別是綠色和紅色，但這兩種顏色是最難區(qū)分色盲或色弱的人。許多產(chǎn)品在表格填寫頁面提示;紅色標記字段是必需的。 “雖然這是一個細節(jié)，但如果設(shè)計如下，那對色盲人來說是一場災(zāi)難。
色盲用戶無法區(qū)分紅色突出顯示的字段
顏色可以用來傳達信息，但它不應(yīng)該是傳達信息，表示動作，提示或辨別視覺元素的唯一視覺手段。使用顏色時，應(yīng)使用其他可視符號以確保任何用戶都能清楚地了解界面信息。
使用標簽，圖標和顏色傳遞信息
3.2。動態(tài)效果是可選的
一些用戶習(xí)慣于在操作系統(tǒng)設(shè)置中關(guān)閉動畫效果。當用戶選擇關(guān)閉動畫時，應(yīng)用程序應(yīng)盡可能地阻止效果。
4.導(dǎo)航欄設(shè)計
導(dǎo)航欄設(shè)計應(yīng)該是應(yīng)用程序設(shè)計中優(yōu)先級最高的作業(yè)之一。如果用戶找不到該功能或內(nèi)容條目，即使該應(yīng)用程序的功能很酷且內(nèi)容良好，也無濟于事。此外，如果您花費太多時間和精力來設(shè)計產(chǎn)品的導(dǎo)航結(jié)構(gòu)，那么它也可能適得其反并失去用戶。導(dǎo)航的設(shè)計標準應(yīng)該是允許用戶自然而直觀地使用App，無需任何解釋或幫助信息即可完成所有主要任務(wù)。
4.1。使用標準化導(dǎo)航組件
最好使用標準化導(dǎo)航組件，例如iOS中的標簽欄和Android中的導(dǎo)航抽屜。大多數(shù)用戶習(xí)慣于這兩種導(dǎo)航模式，即使他們第一次使用該應(yīng)用程序，也會更容易上手。
Android的滑動菜單（來源：Material Design）
適用于iOS的標簽欄（來源：Ramotion）
4.2。不要混合導(dǎo)航模式
選擇核心導(dǎo)航模式時，請勿混用其他導(dǎo)航模式。避免標簽欄和導(dǎo)航欄位于同一個應(yīng)用程序中的情況。
4.3。導(dǎo)航欄可見
正如雅各布尼爾森所說，認知比記憶更容易。始終保持操作和選項可見，最大限度地減少用戶的內(nèi)存負載。導(dǎo)航的位置應(yīng)清晰易讀并保證隨時可用，而不僅僅是在用戶必須使用時。
4.4。標記當前位置或級別標題
在頁面中沒有當前位置或?qū)哟谓Y(jié)構(gòu)是許多應(yīng)用程序的常見問題。 “我在哪里？”這是用戶需要了解的基本問題，以及產(chǎn)品必須通知用戶的基本內(nèi)容。為了確保用戶清楚其當前位置，在大多數(shù)情況下，用戶將忽略頁面標題或位置提示，但是當用戶想知道但無法知道時，用戶體驗將大大減少。
Apple的Health App提供當前頁面的信息
5.導(dǎo)航中的運動效果
動畫是描述狀態(tài)轉(zhuǎn)換的最佳工具。動畫可幫助用戶了解頁面之間的狀態(tài)更改，觸發(fā)的內(nèi)容以及如何恢復(fù)。
功能動畫可以有效地引導(dǎo)用戶的注意力，使復(fù)雜的轉(zhuǎn)換得到更好的理解（來源：Jae-seong，Jeong）
5.1。謹慎使用手勢交互
在交互設(shè)計中添加手勢確實很誘人，但在大多數(shù)情況下，最好避免這種誘惑。當手勢用作一級導(dǎo)航時，大多數(shù)手勢會導(dǎo)致用戶體驗混亂。為什么？由于手勢不可見，因此使用率不高，大多數(shù)都需要額外的使用指南。
Thomas Joos在他的文章中指出：跳出按鈕——打開手勢驅(qū)動的產(chǎn)品設(shè)計。在產(chǎn)品設(shè)計中使用手勢的最大障礙是用戶學(xué)習(xí)成本高。每次使用手勢替換可見控件時，應(yīng)用程序的學(xué)習(xí)成本都會增加一個數(shù)量級。這是因為用戶更難找到隱藏的手勢交互，建議僅使用已在產(chǎn)品設(shè)計中使用的手勢。
在產(chǎn)品設(shè)計中使用手勢交互時，建議遵循以下幾點：
使用標準手勢
所謂的“標準”是指用戶使用應(yīng)用程序時的自然習(xí)慣手勢，因為用戶習(xí)慣了它，可以避免額外的學(xué)習(xí)成本和內(nèi)存負荷。
手勢是視覺導(dǎo)航的補充，而不是替代
手勢提供了一種快速導(dǎo)航方式，但它們并不能完全取代導(dǎo)航欄。因此，即使可視導(dǎo)航欄占用了界面空間，也沒有必要。
6.注意用戶的首次發(fā)布——第一印象決定最終印象
首次推出是該應(yīng)用程序成功的關(guān)鍵部分。在用戶首次推出時，該產(chǎn)品只有一次機會。如果產(chǎn)品設(shè)計失敗，新用戶很可能成為無聲用戶（研究表明，24％的新用戶將永遠保持沉默）。
6.1。避免登錄使用
某些產(chǎn)品不提供訪問者模型，僅對注冊/登錄用戶是強制性的，這是用戶放棄產(chǎn)品的常見原因之一。用戶在被迫注冊時放棄產(chǎn)品，這對于品牌認知度低和產(chǎn)品特性不明確的產(chǎn)品尤為致命。
Pinterest要求用戶在使用之前登錄
根據(jù)經(jīng)驗，用戶只需要在必要時注冊/登錄（例如，應(yīng)用程序的核心功能僅為登錄用戶開發(fā)），即使在這種情況下，最好延遲登錄，讓用戶體驗一會兒，然后輕輕提醒用戶注冊，而不是粗暴強制，這也可以提高注冊轉(zhuǎn)換率。
6.2。優(yōu)化用戶指南頁面的用戶體驗
高質(zhì)量的用戶指南頁面是確保用戶保留的重要手段之一。用戶指南頁面的設(shè)計原則是準確有效地告知用戶應(yīng)用程序的功能和價值。
對于用戶指南頁面，一個建議非常有效：場景設(shè)計。場景設(shè)計意味著用戶指南僅在用戶需要時才會發(fā)生。 Duolingo是應(yīng)用程序告訴用戶如何通過漸進式訪問使用每個功能的一個很好的例子。
Duolingo指南頁面的快速測試
另一個建議是，當用戶首次使用它時，默認頁面為空白，引導(dǎo)用戶通過數(shù)據(jù)填充數(shù)據(jù)。除了通知用戶頁面內(nèi)容之外，空白狀態(tài)還指導(dǎo)用戶如何使用該應(yīng)用程序。用戶在空白頁面下操作，并且任何操作都可以快速查看反饋，這可以加快用戶的學(xué)習(xí)速度。
首次啟動時，Expensify為空白，以便通知用戶如何使用
6.3。第一次啟動時，請勿讓用戶執(zhí)行任何設(shè)置操作
有些應(yīng)用會強制用戶在首次啟動時設(shè)置一些參數(shù)。此功能的體驗非常糟糕。用戶下載并啟動應(yīng)用程序，我希望立即使用它。因此，應(yīng)根據(jù)公眾的需要預(yù)先設(shè)置一些個性化設(shè)置，并提供一些用戶配置的操作門戶。
嘗試從操作系統(tǒng)獲取設(shè)置信息。如果產(chǎn)品所需的設(shè)置信息與用戶，設(shè)備或系統(tǒng)有關(guān)，請盡可能多地詢問操作系統(tǒng)，而不是讓用戶自己配置。
6.4。避免在開頭要求各種權(quán)限
阻止用戶在應(yīng)用首次啟動時看到請求權(quán)限的各種類型的對話框。與強制登錄和強制設(shè)置類似，當應(yīng)用程序的核心功能需要特定權(quán)限時，應(yīng)從用戶請求權(quán)限。如果用戶必須同意特定任務(wù)中的許可請求，則用戶不會感到不安。例如，在編輯照片時，用戶非常清楚為什么會彈出訪問相冊的請求。
Google推薦的權(quán)限請求模式（來源：Material Design）
嘗試在用戶使用期間請求權(quán)限，這更有可能獲得用戶的許可。
（來源：集群）
只需詢問您的應(yīng)用需求
不要求所有權(quán)限。如果應(yīng)用程序的權(quán)限請求似乎不是必需的，則會使用戶不受信任。例如，鬧鐘應(yīng)用程序需要訪問地址簿，這無疑是非常奇怪的。
如果原因不明顯，請解釋您需要此權(quán)限的原因
有時您需要在權(quán)限請求中添加更多介紹性副本。
7.加快應(yīng)用程序的響應(yīng)
加載時間對用戶體驗至關(guān)重要。隨著技術(shù)的進步，用戶變得越來越不耐煩，而今天，47％的用戶希望頁面加載時間為2秒或更短。
應(yīng)用加載得越快，用戶體驗就越好（來源：Google）
用戶流失率與頁面加載時間成比例，這就是在開發(fā)應(yīng)用程序時加載速度是優(yōu)先級的原因。但無論應(yīng)用程序的性能有多好，有些時候都無法避免。加載時間還受許多因素的影響，例如網(wǎng)絡(luò)速度，硬件性能和操作系統(tǒng)性能。但即使您無法再減少加載時間，也應(yīng)該改善加載過程的用戶體驗。
7.1。在可見區(qū)域內(nèi)加載內(nèi)容
優(yōu)先加載可見區(qū)域的內(nèi)容，并且可以在加載第一屏幕之后加載滾動的內(nèi)容。這樣做的好處是用戶可以快速使用初始內(nèi)容，有時用戶甚至感覺不到剩余內(nèi)容的加載過程。
7.2。顯示加載時間
如果在加載內(nèi)容時頁面為空白或靜態(tài)，則用戶無法區(qū)分內(nèi)容是否已加載或應(yīng)用程序崩潰，這可能導(dǎo)致認知障礙并可能導(dǎo)致丟失。至少顯示基本加載動畫以通知用戶這是加載內(nèi)容。如果等待時間很長，建議顯示進度條和估計的加載時間，這將增強用戶的安全感和控制感。
7.3。分散用戶的注意力
如果在加載內(nèi)容時向用戶提供一些有趣的“小工具”，則用戶將不會過多關(guān)注加載自身，即分散用戶的注意力。建議改善加載動畫的樂趣。
精心制作的動畫可以給用戶一個小小的驚喜（來源：UI8）
當然，無論動畫設(shè)計有多么有趣和優(yōu)秀，如果它被過度使用，它也會使用戶煩惱。在考慮使用加載動畫時，首先要問：用戶第一次看到動畫時是否會感到無聊？加載動畫只是一個小小的驚喜。您不能忽略動畫設(shè)計而忽略產(chǎn)品性能，然后購物車顛倒了。
7.4。加載骨架屏幕
占位符是臨時內(nèi)容網(wǎng)格，是內(nèi)容加載過程的轉(zhuǎn)換頁面。
占位符可以立即顯示（來源：Slack）
當應(yīng)用加載數(shù)據(jù)時，占位符地圖會給用戶留下一個印象，即應(yīng)用響應(yīng)迅速且效果良好。加載時的“Chrysanthemum”只是告訴用戶發(fā)生了什么，占位符圖表顯示了更詳細的加載進度。
（來源：Tandem Seven）
8.提高內(nèi)容呈現(xiàn)的質(zhì)量
設(shè)計產(chǎn)品時不能忽略內(nèi)容。在大多數(shù)情況下，用戶使用應(yīng)用程序來獲得高質(zhì)量的內(nèi)現(xiàn)在僅僅達到高質(zhì)量的精益標準是不夠的，用戶也可以方便地了解吸收。
8.1。提高文本可讀性的可讀性
說到內(nèi)容，我們主要是指排版。正如Oliver Reichenstein在《Web Design Is 95% Typography》中所說的那樣（《網(wǎng)頁設(shè)計中95%的工作都是排版》）：
“優(yōu)化的排版是優(yōu)化可讀性，可訪問性，可用性以及整體圖像和文本平衡。 ”的
移動端排版的關(guān)鍵是可讀性和易讀性。有幾個易讀性的建議：
字體大小
通常，任何小于16像素（或11）的內(nèi)容都不適用于任何屏幕。
字體
大多數(shù)用戶更喜歡清晰易讀的字體。容易出錯的選擇是系統(tǒng)的默認字體（iOS的默認字體是舊金山，Android是Roboto的默認字體）。
對比度
淺色字體（例如淺灰色）可能看起來很漂亮，但是用戶更難識別，特別是當光強時。確保字體顏色和背景之間有足夠的對比度，以便于閱讀。
當光強時，低對比度界面幾乎不可能讀取
以下是一些可讀性建議：
避免使用大寫字母
當您不需要仔細閱讀時，所有大寫字母都可以輕松吸引用戶的注意力（例如縮寫和徽標），但對于需要沉浸的內(nèi)容，所有大寫字母都缺乏可讀性。
限制每行的單詞數(shù)
建議將每行的字符數(shù)限制為30到40個字符。
行間距應(yīng)適中
如果行間距太小，則會增加讀取壓力，行間距會使用戶感覺到少量信息。
8.2。高清圖片和適當?shù)膶捀弑?/p>
屏幕分辨率的提高為高清圖像奠定了基礎(chǔ)。在高分辨率屏幕上，圖像清晰度應(yīng)盡可能多。
使用的圖片應(yīng)該是正確的寬高比，圖片太寬或太長會降低吸引力。
最近幾個月，許多移動互動設(shè)計師面臨一個新問題：iPhone X的優(yōu)化.iPhone X的畫板尺寸與任何iPhone尺寸都不同。
（來源：Apple）
8.3。垂直播放視頻
視頻和短視頻正成為許多用戶的主要觀看內(nèi)容。據(jù)YouTube稱，移動視頻觀看率每年提高100％，到2020年，超過75％的全球移動數(shù)據(jù)將成為視頻內(nèi)容。這意味著視頻必須針對縱向模式觀看進行優(yōu)化，使用戶在縱向方向上仍能正常觀看。
Facebook直播支持垂直播放，同時查看用戶評論/評論（圖片來源：Giphy）
9.觸摸設(shè)計
觸摸設(shè)計的目標是減少錯誤輸入的數(shù)量并優(yōu)化用戶和應(yīng)用之間的交互式體驗。
9.1。設(shè)計手指，而不是光標
在為移動設(shè)備設(shè)計界面元素時，請確保每個元素足夠大，以避免因小元素而導(dǎo)致的錯誤觸摸。
較小的元素增加了錯誤觸摸的可能性（來源：Apple）
在設(shè)計元件尺寸時，您可以參考MIT Touch Lab的研究結(jié)果：10mm * 10mm是合理的觸摸尺寸。
10 * 10是最佳觸摸尺寸（來源：UXmag）
除了正確選擇元素大小外，元素之間必須有足夠的空間以防止誤觸摸。
（來源：材料設(shè)計）
9.2。拇指觸摸區(qū)域
一方面應(yīng)該在設(shè)計中考慮拇指觸摸的區(qū)域，因為拇指和屏幕之間的接觸面積較大，另一方面，因為用戶習(xí)慣于握住設(shè)備。許多用戶單手使用手機，因此拇指自然使用，只有拇指操作的區(qū)域稱為自然拇指區(qū)域。在下圖中，可以看到自然拇指區(qū)域的大致范圍。
（來源：Smashing Magazine）
屏幕尺寸越大，自然拇指區(qū)域的相對面積越小。
（來源：Smashing Magazine）
在設(shè)計應(yīng)用程序時應(yīng)考慮所有方面：
綠色區(qū)域是導(dǎo)航欄或頻繁交互的最佳位置（例如操作按鈕）;
紅色區(qū)域是潛在危險選項的最佳位置（例如“刪除”或“清除”），用戶不太可能意外觸摸此區(qū)域。
9.3?；臃答?/p>
用戶期望電子產(chǎn)品或互聯(lián)網(wǎng)產(chǎn)品及時提供運營反饋。在產(chǎn)品設(shè)計中，有必要為用戶的每個操作設(shè)計相應(yīng)的反饋方法。如果某個操作沒有提供及時的反饋，用戶可能想知道他們是否已經(jīng)這樣做或者錯過了什么。反饋可以是視覺（突出顯示的點擊按鈕）或觸覺（設(shè)備振動）。
使用動畫及時向用戶反饋（來源：Vadim Gromov）
10.情緒設(shè)計
用戶體驗不僅僅是可用性，更重要的是，它可以響應(yīng)用戶的情緒。當我們回顧具有良好用戶體驗的產(chǎn)品時，我們經(jīng)常會想到精心設(shè)計的產(chǎn)品并讓我們感到驚訝。
10.1。個性化體驗
今天，個性化已成為App的主要功能之一。產(chǎn)品的作用是與用戶聯(lián)系并提供他們所需的內(nèi)容，個性化可以使過程感覺更真實。
通過個性化或個性化，有無數(shù)種方法可以改善應(yīng)用程序的用戶體驗。可根據(jù)用戶的位置，搜索歷史記錄和購買歷史記錄提供個性化內(nèi)容。例如，如果您的用戶希望每月購買特定商品，則該應(yīng)用可以記錄這些商品并在合適的時間將其推薦給用戶。
星巴克應(yīng)用程序遵循這一思路。星巴克根據(jù)用戶的購買歷史（例如普通咖啡）提供特別優(yōu)惠。
10.2。可愛的動畫
功能動畫是提高信息傳遞和用戶理解的有效性;有趣可愛的動畫更適合用戶的心理感受，是一種情感設(shè)計?？蓯鄣膭赢嬊逦貍鬟_了一個信息：App的研發(fā)團隊專注于用戶的內(nèi)心感受。
（來源：Serhii Hanushchak）
11.優(yōu)化消息推送
惱人的消息推送是用戶卸載應(yīng)用程序的首要原因（71％的受訪者選擇此選項）。
（來源：Appiterate Survey）
由于能夠推送消息，所以不要隨意推送。任何信息都應(yīng)該仔細篩選并且有價值。
11.1。推動有價值的內(nèi)容
當用戶開始使用該應(yīng)用時，他們不介意接收消息推送，只要該消息是有價值的。幾乎一半的用戶感謝收到感興趣的通知，個性化的消息推送是關(guān)鍵點。 Netflix在推送有價值的內(nèi)容方面做得非常出色：根據(jù)用戶的觀看，收集等方式為每位用戶提供個性化推薦。
Netflix根據(jù)用戶需求個性化推送通知
11.2。避免在短時間內(nèi)發(fā)送多個通知
在短時間內(nèi)發(fā)送多個通知可能會導(dǎo)致過度推送，從而迫使用戶忽略大部分通知。應(yīng)該組織消息推送的類型，然后應(yīng)該限制推送的總數(shù)。
11.3。將消息推送到控制的時間
推送的時間與推送的內(nèi)容一樣重要。不要在無法解釋的點（例如午夜）推送消息。消息推送的最佳時間段是手機使用的高峰期：下午6點到晚上10點。
（來源：comScore）
11.4?？紤]其他渠道來傳遞信息
消息推送不是傳遞消息的唯一方式。您還可以使用SMS通知，電子郵件，應(yīng)用程序通知等。應(yīng)根據(jù)郵件的緊急程度和內(nèi)容類型選擇適當?shù)那馈?
（來源：Appboy）
12.移動設(shè)備的優(yōu)化
12.1?？紤]到中斷
我們的生活充滿了干擾，許多事情讓我們分心，更不用說移動設(shè)備的大部分使用場景都在戶外。當用戶在等待汽車時使用App時，用戶的使用過程可能在任何時間點被中斷。當應(yīng)用程序再次打開時，如果清除了最后一個瀏覽位置，則不能說它是一個很好的用戶體驗。當發(fā)生中斷時，應(yīng)用程序應(yīng)保持其當前狀態(tài)并支持用戶繼續(xù)在上面的斷點處使用它。
12.2。利用移動設(shè)備的功能
移動設(shè)備具有許多可用于改善用戶體驗的傳感器（攝像機，定位，加速度傳感器等）。以下是您可能使用的一些功能：
相機
您可以使用相機和相機簡化表格填寫，例如，您可以打開相機以自動識別銀行卡號。
（來源：Business Insider）
位置跟蹤
應(yīng)用程序可以使用設(shè)備的位置數(shù)據(jù)來提供與用戶位置相關(guān)的內(nèi)容或簡化某些操作。例如，用于快遞服務(wù)或外賣服務(wù)的應(yīng)用程序可以自動檢測用戶的當前位置并要求用戶確認或修改它，而不必完全依賴于用戶的手動輸入。
優(yōu)步使用手機定位服務(wù)來減少用戶手動輸入
生物認證
使用指紋識別或面部識別等功能可以減少登錄步驟。
指紋登錄功能
iPhone X人臉識別（來源：Tesco）
12.3。擴大產(chǎn)品渠道
不要以為應(yīng)用程序是孤立存在的。在用戶任務(wù)和用戶體驗方面，最終目標應(yīng)該是在所有終端上創(chuàng)建無縫的用戶體驗，無論用戶是從移動設(shè)備切換到PC還是平板電腦。任務(wù)。據(jù)Appticles稱，37％的用戶在移動端瀏覽，但在PC端完成購買。
13.應(yīng)用程序設(shè)計應(yīng)適應(yīng)新興市場
谷歌報告說，它將在未來幾年增加10億連接用戶，其中大部分來自新興市場（被稱為手機新興市場，包括印度，印度尼西亞，巴西，尼日利亞等），這些市場的用戶將使用移動設(shè)備網(wǎng)絡(luò)，這些用戶的體驗和用戶需求也不同于成熟市場（如中國，美國，歐洲等）。
如果您對全球化感興趣，有必要深入研究新興市場用戶的需求。
13.1。缺乏網(wǎng)絡(luò)滲透
在網(wǎng)絡(luò)成熟的地區(qū)，用戶習(xí)慣于無處不在的4G或3G網(wǎng)絡(luò)，但并非全世界都在使用。新興市場的產(chǎn)品必須適應(yīng)不良的網(wǎng)絡(luò)滲透。用戶可能會從Wifi切換到3G到2G，甚至失去網(wǎng)絡(luò)連接。應(yīng)用程序必須考慮每種情況的異常處理方案。
對于這些新興市場，有以下建議：
確保即使網(wǎng)絡(luò)斷開連接也可以使用該應(yīng)用程序，允許緩存數(shù)據(jù);
優(yōu)化產(chǎn)品的加載速度。通過壓縮圖像等來最小化頁面大小。
YouTube Go提供了一個很好的例子。首先，該應(yīng)用程序支持離線使用;第二，它允許用戶緩存視頻并可以選擇不同的分辨率;最后，它還支持在離線時與附近的設(shè)備共享視頻。
Youtube Go的離線分享視頻功能
谷歌新聞和天氣方法也值得參考。該應(yīng)用程序具有一個名為“精簡模式”的功能，專為慢速用戶設(shè)計。激活此模式時，只會加載重要內(nèi)容，因此加載速度會大大提高。據(jù)Google稱，此模式所需的流量僅為正常模式的三分之一。當應(yīng)用程序檢測到網(wǎng)絡(luò)速度較慢時，它將自動激活到精簡模式。
13.2。有限的數(shù)據(jù)
在大約95％的新興市場中，移動數(shù)據(jù)的價格比居民的收入要荒謬得多。用戶只能購買固定數(shù)量的數(shù)據(jù)，而且很多人每月只能支付250Mb的流量。這些用戶重視預(yù)加載內(nèi)容所需的數(shù)據(jù)量，以及在Wifi和流量數(shù)據(jù)下加載產(chǎn)品時自動暫停產(chǎn)品的能力。
下圖是YouTube的另一個例子。在用戶選擇視頻之后，他或她可以選擇視頻的清晰度，并且應(yīng)用將告知用戶視頻將花費多少流量。
13.3。設(shè)備性能有限
在新興市場，智能手機的屏幕分辨率與iPhone相差甚遠。新興市場中的大多數(shù)設(shè)備成本不到100美元，因此在設(shè)計產(chǎn)品時必須考慮有限的存儲和處理能力，以確保該應(yīng)用適合低端和低端操作系統(tǒng)。
13.4。結(jié)合當?shù)匚幕兔缹W(xué)特色
極簡主義的設(shè)計理念在當今西方世界很流行，但對于其他文化而言可能被認為過于簡單。如果您想讓您的產(chǎn)品在新興市場取得成功，您需要在文化和美學(xué)上習(xí)慣于當?shù)匚幕Ｊ艿皆摰貐^(qū)流行產(chǎn)品的啟發(fā)，您還可以聘請熟悉用戶偏好的本地設(shè)計師。根據(jù)當?shù)氐膶徝懒?xí)慣設(shè)計產(chǎn)品將使產(chǎn)品更加可靠。
13.5。根據(jù)區(qū)域特征設(shè)計產(chǎn)品功能
當谷歌設(shè)計印度版谷歌地圖時，它認為印度是世界上最大的兩輪車市場，數(shù)百萬摩托車和自行車騎手的需求與汽車司機不同。所以印度版谷歌地圖發(fā)布了一個兩輪模式，顯示了兩輪車的路線，這是不適用于汽車和卡車。
14.測試和反饋
以上所有原則可以幫助您更好地設(shè)計應(yīng)用程序，但您無法取代用戶研究和產(chǎn)品測試。產(chǎn)品經(jīng)理仍需要進行用戶訪談和可用性測試，以確定是否需要進行任何調(diào)整。
14.1。反饋機制
鼓勵用戶反饋并珍惜用戶的每一條反饋。為了更好地收集用戶反饋，需要在產(chǎn)品中建立反饋機制。該反饋機制可以是問卷或用戶消息，只要用戶的反饋建議可以準確地傳達給產(chǎn)品經(jīng)理。
14.2。設(shè)計是一個永無止境的過程
客觀地說，設(shè)計是一個持續(xù)改進的過程，設(shè)計不是最優(yōu)的，只是優(yōu)越的。作為產(chǎn)品設(shè)計師，我們應(yīng)該使用數(shù)據(jù)分析，用戶反饋等手段不斷改進產(chǎn)品體驗。
15.摘要
偉大的產(chǎn)品是用戶體驗和功能的完美結(jié)合，這是我們不懈的追求。但不要指望應(yīng)用程序的初始版本是完美的。相反，我們應(yīng)該將產(chǎn)品視為一個不斷改進和不斷調(diào)整的長期項目。冷凍三尺不是冷天，結(jié)合數(shù)據(jù)，測試，反饋，需求分析等手段不斷改進產(chǎn)品，不斷優(yōu)化經(jīng)驗，是產(chǎn)品設(shè)計的正確姿態(tài)。
譯者：李曉新
原作者：Nick Babich，開發(fā)人員，技術(shù)愛好者和用戶體驗愛好者他在軟件行業(yè)工作了10年，專注于開發(fā)他將廣告，心理學(xué)和電影視為他無數(shù)的興趣
原始地址：https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/
本文是大家的產(chǎn)品經(jīng)理翻譯團隊@李小新翻譯發(fā)布，未經(jīng)本網(wǎng)站許可，禁止轉(zhuǎn)載。
該地圖來自PEXELS，基于CC0協(xié)議
-
周一周五 8:30 - 18:00
客服QQ