文章對移動端設(shè)計(jì)不同部分的需要注意注意的事項(xiàng)進(jìn)行了盤點(diǎn)總結(jié)，與大家分享。

本文是一份備忘錄，它將提醒您有關(guān)將應(yīng)用程序發(fā)送到AppStore / GooglePlay之前需要進(jìn)行設(shè)計(jì)的事情。

該列表分為幾個重要部分：

1. 登錄/注冊
2. 初次體驗(yàn)
3. 日?；?/li>
4. 通知
5. 帳戶設(shè)置
6. 飼料
7. 搜索
8. AppStore / GooglePlay

一、登錄/注冊

1. 啟動畫面

啟動屏幕是用戶啟動移動應(yīng)用程序時顯示的屏幕。由于啟動屏幕是用戶看到的第一個屏幕，因此即使在用戶開始使用您的應(yīng)用程序之前，它也會為用戶創(chuàng)造第一印象。

Uber的 Rider啟動過渡

2. 忘記密碼流程

平均每個人都注冊了90個需要密碼的在線服務(wù)。使用了這么多帳戶，很少有人記住他們的密碼。據(jù)統(tǒng)計(jì)，有21個用戶在兩周后忘記了密碼，而25％的用戶每天至少一次忘記了一個密碼。如果您的應(yīng)用程序需要登錄，則應(yīng)該提供一個重置密碼的選項(xiàng)。

忘記密碼流由伊曼紐爾·托雷斯（Emmanuel Torres）

二、初次體驗(yàn)

3. 入職屏幕

入門是UX設(shè)計(jì)人員使用的一個術(shù)語，用于描述使用戶“啟動并運(yùn)行”應(yīng)用程序的過程。成功的入職增加了首次用戶采用產(chǎn)品后成為全職用戶的可能性。

Cuberto的動畫入職體驗(yàn)

4. 數(shù)據(jù)確認(rèn)屏幕

許多移動應(yīng)用程序要求確認(rèn)電子郵件/電話號碼。數(shù)據(jù)確認(rèn)屏幕通常出現(xiàn)在用戶提供所需的詳細(xì)信息并告訴他們?nèi)ゴ_認(rèn)其電子郵件地址/電話號碼之后。

Diana Caballero的確認(rèn)畫面

對于數(shù)據(jù)確認(rèn)屏幕，至關(guān)重要的是提供：

1. 重新發(fā)送確認(rèn)碼的選項(xiàng)（用于手機(jī)號碼）
2. 有關(guān)如何查找確認(rèn)消息的說明（即搜索特定標(biāo)題，在“垃圾郵件”文件夾中搜索等）（用于電子郵件確認(rèn)消息）

5. 空狀態(tài)為“尚無內(nèi)容”

內(nèi)容是為大多數(shù)應(yīng)用程序提供價值的要素。這是人們將它們用于內(nèi)容的主要原因。因此，考慮如何設(shè)計(jì)用戶旅程中用戶可能還沒有內(nèi)容的位置至關(guān)重要。這樣的地方被稱為空狀態(tài)，而空狀態(tài)不應(yīng)該……好，空。

空狀態(tài)是注入一些新成員以繼續(xù)指導(dǎo)用戶前進(jìn)的自然點(diǎn)。您應(yīng)該有效地使用它-進(jìn)行教育和指南。

Symplicity Career的應(yīng)用程序?yàn)榭諣顟B(tài)

6. 默認(rèn)用戶頭像

大多數(shù)用戶（根據(jù)Jared M. Spool 約為95％）不更改默認(rèn)設(shè)置。這意味著大多數(shù)用戶將具有默認(rèn)頭像，您可以為他們選擇默認(rèn)頭像。

Dropbox中可愛的默認(rèn)用戶頭像

三、日常經(jīng)驗(yàn)

7. 權(quán)限請求屏幕

當(dāng)用戶打開一個新應(yīng)用程序時，他們要查看的最后一件事是連續(xù)出現(xiàn)多個彈出窗口，以請求權(quán)限：

1. 應(yīng)用想要訪問您的位置
2. 應(yīng)用想要訪問您的聯(lián)系人
3. 應(yīng)用程式想存取您的相機(jī)

此類權(quán)限請求會對用戶體驗(yàn)產(chǎn)生非常負(fù)面的影響，通常會導(dǎo)致應(yīng)用被放棄。這就是為什么最好在用戶交互的內(nèi)容中請求權(quán)限。

通知權(quán)限對話框，作者Anton Tkachuk

8. 交互式UI元素的各種狀態(tài)

按鈕和其他交互元素通常具有多種狀態(tài)。對于應(yīng)用程序中的每個交互式元素，必須考慮默認(rèn)狀態(tài)/已按下/已禁用等狀態(tài)。

按鈕的三種狀態(tài)

Vadim Gromov的材料設(shè)計(jì)按鈕

9. 圖標(biāo)集

通過使用相同樣式的圖標(biāo)，可以使您的UI在視覺上更加一致。

適用于iOS的Twitter應(yīng)用中的選項(xiàng)卡欄圖標(biāo)

10. 錯誤狀態(tài)

我們都知道，最好的錯誤消息是永遠(yuǎn)不會出現(xiàn)的錯誤消息。始終最好通過提前引導(dǎo)用戶正確的方向來防止錯誤的發(fā)生。但是，當(dāng)確實(shí)出現(xiàn)錯誤時，精心設(shè)計(jì)的錯誤處理不僅可以幫助用戶教會您如何按預(yù)期使用該應(yīng)用程序，還可以防止用戶感到無知。

Dwinawan的錯誤互動

這是您應(yīng)該設(shè)計(jì)的一些錯誤情況：

1. 沒有網(wǎng)絡(luò)連接?？紤]用戶在沒有互聯(lián)網(wǎng)連接時會看到什么。
2. 用戶輸入錯誤。
3. 系統(tǒng)錯誤。

11. 加載狀態(tài)

雖然應(yīng)用程序的即時響應(yīng)是最好的，但有時您的應(yīng)用程序?qū)o法遵守速度指南。不良的互聯(lián)網(wǎng)連接可能會導(dǎo)致響應(yīng)緩慢，或者操作本身會花費(fèi)很長時間。

在這種情況下，為了最大程度地減少用戶的緊張感，您必須向用戶保證該應(yīng)用程序正在根據(jù)他們的要求運(yùn)行。當(dāng)應(yīng)用程序未能通知用戶花費(fèi)時間來完成某項(xiàng)操作時，用戶通常會認(rèn)為該應(yīng)用程序未收到請求，因此會重試。由于缺乏反饋，導(dǎo)致大量額外的水龍頭。

等待動畫進(jìn)度指示器是在發(fā)生或加載事件時為用戶提供系統(tǒng)狀態(tài)的最常見形式。

微笑裝載機(jī)由AI產(chǎn)品設(shè)計(jì)格列布Kuznetsov?

12. 功狀態(tài)

成功狀態(tài)是我們在用戶完成任務(wù)時顯示給他們的屏幕。設(shè)計(jì)者應(yīng)考慮以下幾種成功狀態(tài)：

1. 令人愉快的狀態(tài)（首次成功）。用戶首次完成一項(xiàng)重要任務(wù)的那一刻，對您來說是一個極好的機(jī)會，可以在他們與您的產(chǎn)品之間建立積極的情感聯(lián)系。通過認(rèn)可自己的進(jìn)步并與用戶一起慶祝成功，讓您的用戶知道自己的成就。
2. 確認(rèn)畫面。確認(rèn)屏幕是電子商務(wù)應(yīng)用程序的必備屏幕。當(dāng)用戶完成購買時，我們需要顯示一個屏幕，其中將提供有關(guān)購買的所有基本詳細(xì)信息。

Booking.com中的確認(rèn)屏幕

13. 自動完成

設(shè)計(jì)人員應(yīng)始終努力通過消除不必要的動作來最大程度地減少交互成本。自動完成功能通過減少用戶為填寫查詢而必須進(jìn)行的點(diǎn)擊次數(shù)來簡化用戶輸入。

圖片：Louise Chang

14. 撤消動作

我們所有人都會犯錯，但是在用戶體驗(yàn)方面，至關(guān)重要的是要提供一個選項(xiàng)來幫助用戶恢復(fù)重要數(shù)據(jù)。

撤消刪除項(xiàng)目。圖像：Sashoto Seeam

撤消發(fā)送電子郵件。圖片：泰勒·博尚（Tyler Beauchamp）

15. 本地化/國際化

由于許多產(chǎn)品團(tuán)隊(duì)都有全球范圍的計(jì)劃，因此將本地化/國際化作為設(shè)計(jì)過程的自然組成部分至關(guān)重要。元素的視覺屬性（例如大?。┖蚒X復(fù)制應(yīng)考慮本地化/國際化來選擇。

使用不同語言的Upvote按鈕。圖片：胡綺兒

16. 幫助文檔

當(dāng)用戶遇到問題時，他們的第一個自然反應(yīng)就是在應(yīng)用內(nèi)搜索解決方案。這就是為什么提供指向應(yīng)用程序“幫助/常見問題解答”部分的鏈接是一個好主意的原因。

Alex Muench的幫助和反饋

17. 輔助功能

可訪問性使具有各種能力的人們能夠感知，理解并與您的產(chǎn)品進(jìn)行交互。這是Lillian Xiao的精彩總結(jié)，內(nèi)容涉及設(shè)計(jì)師需要了解的有關(guān)移動輔助功能的知識。

四、通知事項(xiàng)

18. 應(yīng)用程序內(nèi)通知/推送通知

您是否知道糟糕的通知是用戶卸載應(yīng)用的第一大原因？

令人討厭的通知是人們卸載移動應(yīng)用程序的第一大原因（根據(jù)調(diào)查的受訪者中的71％）。

但是，可以將這種反UX模式變成對企業(yè)和用戶都有意義且有用的東西。為了在應(yīng)用內(nèi)通知中獲得良好的結(jié)果，設(shè)計(jì)人員需要一種最適合移動媒體的發(fā)布策略。

19. 通知首選項(xiàng)

為用戶提供選擇的自由度總是很棒的。在移動通知的上下文中，這意味著提供機(jī)會選擇他們想要接收的通知。

在Slack中調(diào)整通知首選項(xiàng)

五、帳戶設(shè)置

20. 個人資料照片裁剪工具

不僅允許用戶上傳頭像，還可以根據(jù)自己的需要在您的應(yīng)用程序中對其進(jìn)行修改。

編輯Scott Thomas的個人資料圖片

21. 用于查看/更改個人詳細(xì)信息的屏幕

允許用戶直接在移動應(yīng)用中編輯其個人信息。設(shè)計(jì)屏幕以預(yù)覽運(yùn)輸/計(jì)費(fèi)信息并使該信息可編輯。

家庭住址和辦公室地址是可編輯的。選擇送貨地址：Dhiraj S. Karki

22. 注銷

如果您的應(yīng)用需要登錄，則應(yīng)始終允許用戶退出。

在iOS版Facebook中注銷

23. 服務(wù)條款

將服務(wù)條款添加到您的應(yīng)用中，以避免被起訴。

圖片：克里斯蒂安·迪娜（Cristian Dina）/ Shutterstock

24. 隱私設(shè)置

允許用戶查看他們與公司共享的數(shù)據(jù)，并允許他們自定義設(shè)置。

圖片：維塔利·弗里德曼（Vitaly Friedman）

25. 發(fā)送反饋

通過提供一種共享產(chǎn)品反饋的快速途徑，您不僅可以從真實(shí)用戶那里收集有關(guān)產(chǎn)品的寶貴見解，還可以使他們相信他們的反饋對您有價值。

Skype for iOS使用戶能夠“提供反饋”，“報告問題”或“建議功能”

六、供稿

26. 滾動狀態(tài)

移動顯示器的屏幕空間有限。為了節(jié)省屏幕空間，設(shè)計(jì)人員通常希望優(yōu)化顯示的信息并隱藏對用戶無用的任何內(nèi)容。這就是為什么許多提要屏幕具有兩種狀態(tài)的原因-默認(rèn)狀態(tài)（用戶進(jìn)入提要時看到的屏幕）和滾動狀態(tài)（當(dāng)用戶向上滑動以查看更多內(nèi)容時）。

請注意，標(biāo)題區(qū)域在滾動時折疊。AurélienSalomon制作的Craiglist Mobile動畫?

七、應(yīng)用內(nèi)搜索

27. 默認(rèn)搜索行為

您需要確定搜索結(jié)果的默認(rèn)順序。例如，如果您為電子商務(wù)應(yīng)用程序設(shè)計(jì)搜索結(jié)果頁面，則需要確定是否應(yīng)按最佳匹配/價格/交貨時間對輸出進(jìn)行排序。

28. 分享/為其添加書簽

允許用戶從搜索結(jié)果中共享或添加書簽。

Martin Berbesson的App AE中的“贊”，“書簽”和“共享”選項(xiàng)

29. 空狀態(tài)為“無結(jié)果”

當(dāng)用戶搜索特定項(xiàng)目時，我們的用戶會看到什么屏幕，但該應(yīng)用沒有任何匹配結(jié)果。“無結(jié)果”屏幕不應(yīng)成為死胡同。因此，我們應(yīng)該設(shè)計(jì)一個屏幕來指導(dǎo)用戶并顯示他們下一步可以做什么，而不是在空白頁面上顯示快速提示“無結(jié)果”。

Google Flights應(yīng)用建議用戶清除所有過濾條件以查找航班

八、AppStore / GooglePlay

30. 應(yīng)用程序圖標(biāo)

您需要為應(yīng)用程序設(shè)計(jì)一個令人難忘的圖標(biāo)，該圖標(biāo)將反映您應(yīng)用程序的性質(zhì)并引起潛在用戶的興趣。

原文作者： Nick Babich

原文地址：https://uxplanet.org/30-things-we-often-forget-when-designing-mobile-apps-ae30cc3b2c6b

譯者： CANAAN；譯者公眾號：南設(shè)（ID：shemenglianmeng）

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

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