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

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

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

該列表分為幾個(gè)重要部分：

1. 登錄/注冊(cè)
2. 初次體驗(yàn)
3. 日常互動(dòng)
4. 通知
5. 帳戶設(shè)置
6. 飼料
7. 搜索
8. AppStore / GooglePlay

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

Uber的 Rider啟動(dòng)過(guò)渡

2. 忘記密碼流程

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

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

二、初次體驗(yàn) 3. 入職屏幕

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

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

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

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

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

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

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

內(nèi)容是為大多數(shù)應(yīng)用程序提供價(jià)值的要素。這是人們將它們用于內(nèi)容的主要原因。因此，考慮如何設(shè)計(jì)用戶旅程中用戶可能還沒(méi)有內(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中可愛(ài)的默認(rèn)用戶頭像

三、日常經(jīng)驗(yàn) 7. 權(quán)限請(qǐng)求屏幕

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

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

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

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

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

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

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

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

9. 圖標(biāo)集

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

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

10. 錯(cuò)誤狀態(tài)

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

Dwinawan的錯(cuò)誤互動(dòng)

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

1. 沒(méi)有網(wǎng)絡(luò)連接。考慮用戶在沒(méi)有互聯(lián)網(wǎng)連接時(shí)會(huì)看到什么。
2. 用戶輸入錯(cuò)誤。
3. 系統(tǒng)錯(cuò)誤。

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

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

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

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

12. 功狀態(tài)

成功狀態(tài)是我們?cè)谟脩敉瓿扇蝿?wù)時(shí)顯示給他們的屏幕。設(shè)計(jì)者應(yīng)考慮以下幾種成功狀態(tài)：

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

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

13. 自動(dòng)完成

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

圖片：Louise Chang

14. 撤消動(dòng)作

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

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

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

15. 本地化/國(guó)際化

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

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

16. 幫助文檔

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

Alex Muench的幫助和反饋

17. 輔助功能

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

四、通知事項(xiàng) 18. 應(yīng)用程序內(nèi)通知/推送通知

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

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

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

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

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

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

五、帳戶設(shè)置 20. 個(gè)人資料照片裁剪工具

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

編輯Scott Thomas的個(gè)人資料圖片

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

允許用戶直接在移動(dòng)應(yīng)用中編輯其個(gè)人信息。設(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ā)送反饋

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

Skype for iOS使用戶能夠“提供反饋”，“報(bào)告問(wèn)題”或“建議功能”

六、供稿 26. 滾動(dòng)狀態(tài)

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

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

七、應(yīng)用內(nèi)搜索 27. 默認(rèn)搜索行為

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

28. 分享/為其添加書簽

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

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

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

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

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

八、AppStore / GooglePlay 30. 應(yīng)用程序圖標(biāo)

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

原文作者： Nick Babich

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

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

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

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