這30件事情,移動端設(shè)計需要注意
文章對移動端設(shè)計不同部分的需要注意注意的事項進行了盤點總結(jié),與大家分享。
本文是一份備忘錄,它將提醒您有關(guān)將應(yīng)用程序發(fā)送到AppStore / GooglePlay之前需要進行設(shè)計的事情。
該列表分為幾個重要部分:
- 登錄/注冊
- 初次體驗
- 日?;?/li>
- 通知
- 帳戶設(shè)置
- 飼料
- 搜索
- AppStore / GooglePlay
一、登錄/注冊
1. 啟動畫面
啟動屏幕是用戶啟動移動應(yīng)用程序時顯示的屏幕。由于啟動屏幕是用戶看到的第一個屏幕,因此即使在用戶開始使用您的應(yīng)用程序之前,它也會為用戶創(chuàng)造第一印象。
Uber的 Rider啟動過渡
2. 忘記密碼流程
平均每個人都注冊了90個需要密碼的在線服務(wù)。使用了這么多帳戶,很少有人記住他們的密碼。據(jù)統(tǒng)計,有21個用戶在兩周后忘記了密碼,而25%的用戶每天至少一次忘記了一個密碼。如果您的應(yīng)用程序需要登錄,則應(yīng)該提供一個重置密碼的選項。
忘記密碼流由伊曼紐爾·托雷斯(Emmanuel Torres)
二、初次體驗
3. 入職屏幕
入門是UX設(shè)計人員使用的一個術(shù)語,用于描述使用戶“啟動并運行”應(yīng)用程序的過程。成功的入職增加了首次用戶采用產(chǎn)品后成為全職用戶的可能性。
Cuberto的動畫入職體驗
4. 數(shù)據(jù)確認屏幕
許多移動應(yīng)用程序要求確認電子郵件/電話號碼。數(shù)據(jù)確認屏幕通常出現(xiàn)在用戶提供所需的詳細信息并告訴他們?nèi)ゴ_認其電子郵件地址/電話號碼之后。
Diana Caballero的確認畫面
對于數(shù)據(jù)確認屏幕,至關(guān)重要的是提供:
- 重新發(fā)送確認碼的選項(用于手機號碼)
- 有關(guān)如何查找確認消息的說明(即搜索特定標題,在“垃圾郵件”文件夾中搜索等)(用于電子郵件確認消息)
5. 空狀態(tài)為“尚無內(nèi)容”
內(nèi)容是為大多數(shù)應(yīng)用程序提供價值的要素。這是人們將它們用于內(nèi)容的主要原因。因此,考慮如何設(shè)計用戶旅程中用戶可能還沒有內(nèi)容的位置至關(guān)重要。這樣的地方被稱為空狀態(tài),而空狀態(tài)不應(yīng)該……好,空。
空狀態(tài)是注入一些新成員以繼續(xù)指導用戶前進的自然點。您應(yīng)該有效地使用它-進行教育和指南。
Symplicity Career的應(yīng)用程序為空狀態(tài)
6. 默認用戶頭像
大多數(shù)用戶(根據(jù)Jared M. Spool 約為95%)不更改默認設(shè)置。這意味著大多數(shù)用戶將具有默認頭像,您可以為他們選擇默認頭像。
Dropbox中可愛的默認用戶頭像
三、日常經(jīng)驗
7. 權(quán)限請求屏幕
當用戶打開一個新應(yīng)用程序時,他們要查看的最后一件事是連續(xù)出現(xiàn)多個彈出窗口,以請求權(quán)限:
- 應(yīng)用想要訪問您的位置
- 應(yīng)用想要訪問您的聯(lián)系人
- 應(yīng)用程式想存取您的相機
此類權(quán)限請求會對用戶體驗產(chǎn)生非常負面的影響,通常會導致應(yīng)用被放棄。這就是為什么最好在用戶交互的內(nèi)容中請求權(quán)限。
通知權(quán)限對話框,作者Anton Tkachuk
8. 交互式UI元素的各種狀態(tài)
按鈕和其他交互元素通常具有多種狀態(tài)。對于應(yīng)用程序中的每個交互式元素,必須考慮默認狀態(tài)/已按下/已禁用等狀態(tài)。
按鈕的三種狀態(tài)
Vadim Gromov的材料設(shè)計按鈕
9. 圖標集
通過使用相同樣式的圖標,可以使您的UI在視覺上更加一致。
適用于iOS的Twitter應(yīng)用中的選項卡欄圖標
10. 錯誤狀態(tài)
我們都知道,最好的錯誤消息是永遠不會出現(xiàn)的錯誤消息。始終最好通過提前引導用戶正確的方向來防止錯誤的發(fā)生。但是,當確實出現(xiàn)錯誤時,精心設(shè)計的錯誤處理不僅可以幫助用戶教會您如何按預(yù)期使用該應(yīng)用程序,還可以防止用戶感到無知。
Dwinawan的錯誤互動
這是您應(yīng)該設(shè)計的一些錯誤情況:
- 沒有網(wǎng)絡(luò)連接??紤]用戶在沒有互聯(lián)網(wǎng)連接時會看到什么。
- 用戶輸入錯誤。
- 系統(tǒng)錯誤。
11. 加載狀態(tài)
雖然應(yīng)用程序的即時響應(yīng)是最好的,但有時您的應(yīng)用程序?qū)o法遵守速度指南。不良的互聯(lián)網(wǎng)連接可能會導致響應(yīng)緩慢,或者操作本身會花費很長時間。
在這種情況下,為了最大程度地減少用戶的緊張感,您必須向用戶保證該應(yīng)用程序正在根據(jù)他們的要求運行。當應(yīng)用程序未能通知用戶花費時間來完成某項操作時,用戶通常會認為該應(yīng)用程序未收到請求,因此會重試。由于缺乏反饋,導致大量額外的水龍頭。
等待動畫進度指示器是在發(fā)生或加載事件時為用戶提供系統(tǒng)狀態(tài)的最常見形式。
微笑裝載機由AI產(chǎn)品設(shè)計格列布Kuznetsov?
12. 功狀態(tài)
成功狀態(tài)是我們在用戶完成任務(wù)時顯示給他們的屏幕。設(shè)計者應(yīng)考慮以下幾種成功狀態(tài):
- 令人愉快的狀態(tài)(首次成功)。用戶首次完成一項重要任務(wù)的那一刻,對您來說是一個極好的機會,可以在他們與您的產(chǎn)品之間建立積極的情感聯(lián)系。通過認可自己的進步并與用戶一起慶祝成功,讓您的用戶知道自己的成就。
- 確認畫面。確認屏幕是電子商務(wù)應(yīng)用程序的必備屏幕。當用戶完成購買時,我們需要顯示一個屏幕,其中將提供有關(guān)購買的所有基本詳細信息。
Booking.com中的確認屏幕
13. 自動完成
設(shè)計人員應(yīng)始終努力通過消除不必要的動作來最大程度地減少交互成本。自動完成功能通過減少用戶為填寫查詢而必須進行的點擊次數(shù)來簡化用戶輸入。
圖片:Louise Chang
14. 撤消動作
我們所有人都會犯錯,但是在用戶體驗方面,至關(guān)重要的是要提供一個選項來幫助用戶恢復重要數(shù)據(jù)。
撤消刪除項目。圖像:Sashoto Seeam
撤消發(fā)送電子郵件。圖片:泰勒·博尚(Tyler Beauchamp)
15. 本地化/國際化
由于許多產(chǎn)品團隊都有全球范圍的計劃,因此將本地化/國際化作為設(shè)計過程的自然組成部分至關(guān)重要。元素的視覺屬性(例如大?。┖蚒X復制應(yīng)考慮本地化/國際化來選擇。
使用不同語言的Upvote按鈕。圖片:胡綺兒
16. 幫助文檔
當用戶遇到問題時,他們的第一個自然反應(yīng)就是在應(yīng)用內(nèi)搜索解決方案。這就是為什么提供指向應(yīng)用程序“幫助/常見問題解答”部分的鏈接是一個好主意的原因。
Alex Muench的幫助和反饋
17. 輔助功能
可訪問性使具有各種能力的人們能夠感知,理解并與您的產(chǎn)品進行交互。這是Lillian Xiao的精彩總結(jié),內(nèi)容涉及設(shè)計師需要了解的有關(guān)移動輔助功能的知識。
四、通知事項
18. 應(yīng)用程序內(nèi)通知/推送通知
您是否知道糟糕的通知是用戶卸載應(yīng)用的第一大原因?
令人討厭的通知是人們卸載移動應(yīng)用程序的第一大原因(根據(jù)調(diào)查的受訪者中的71%)。
但是,可以將這種反UX模式變成對企業(yè)和用戶都有意義且有用的東西。為了在應(yīng)用內(nèi)通知中獲得良好的結(jié)果,設(shè)計人員需要一種最適合移動媒體的發(fā)布策略。
19. 通知首選項
為用戶提供選擇的自由度總是很棒的。在移動通知的上下文中,這意味著提供機會選擇他們想要接收的通知。
在Slack中調(diào)整通知首選項
五、帳戶設(shè)置
20. 個人資料照片裁剪工具
不僅允許用戶上傳頭像,還可以根據(jù)自己的需要在您的應(yīng)用程序中對其進行修改。
編輯Scott Thomas的個人資料圖片
21. 用于查看/更改個人詳細信息的屏幕
允許用戶直接在移動應(yīng)用中編輯其個人信息。設(shè)計屏幕以預(yù)覽運輸/計費信息并使該信息可編輯。
家庭住址和辦公室地址是可編輯的。選擇送貨地址: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)品反饋的快速途徑,您不僅可以從真實用戶那里收集有關(guān)產(chǎn)品的寶貴見解,還可以使他們相信他們的反饋對您有價值。
Skype for iOS使用戶能夠“提供反饋”,“報告問題”或“建議功能”
六、供稿
26. 滾動狀態(tài)
移動顯示器的屏幕空間有限。為了節(jié)省屏幕空間,設(shè)計人員通常希望優(yōu)化顯示的信息并隱藏對用戶無用的任何內(nèi)容。這就是為什么許多提要屏幕具有兩種狀態(tài)的原因-默認狀態(tài)(用戶進入提要時看到的屏幕)和滾動狀態(tài)(當用戶向上滑動以查看更多內(nèi)容時)。
請注意,標題區(qū)域在滾動時折疊。AurélienSalomon制作的Craiglist Mobile動畫?
七、應(yīng)用內(nèi)搜索
27. 默認搜索行為
您需要確定搜索結(jié)果的默認順序。例如,如果您為電子商務(wù)應(yīng)用程序設(shè)計搜索結(jié)果頁面,則需要確定是否應(yīng)按最佳匹配/價格/交貨時間對輸出進行排序。
28. 分享/為其添加書簽
允許用戶從搜索結(jié)果中共享或添加書簽。
Martin Berbesson的App AE中的“贊”,“書簽”和“共享”選項
29. 空狀態(tài)為“無結(jié)果”
當用戶搜索特定項目時,我們的用戶會看到什么屏幕,但該應(yīng)用沒有任何匹配結(jié)果。“無結(jié)果”屏幕不應(yīng)成為死胡同。因此,我們應(yīng)該設(shè)計一個屏幕來指導用戶并顯示他們下一步可以做什么,而不是在空白頁面上顯示快速提示“無結(jié)果”。
Google Flights應(yīng)用建議用戶清除所有過濾條件以查找航班
八、AppStore / GooglePlay
30. 應(yīng)用程序圖標
您需要為應(yīng)用程序設(shè)計一個令人難忘的圖標,該圖標將反映您應(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é)議
這機翻……我估計作者翻譯完了都沒有自己閱讀一遍。
哈哈哈哈這樣的啊 我還覺得寫的挺專業(yè)啊