這30件事情,移動端設(shè)計(jì)需要注意
文章對移動端設(shè)計(jì)不同部分的需要注意注意的事項(xiàng)進(jìn)行了盤點(diǎn)總結(jié),與大家分享。
本文是一份備忘錄,它將提醒您有關(guān)將應(yīng)用程序發(fā)送到AppStore / GooglePlay之前需要進(jìn)行設(shè)計(jì)的事情。
該列表分為幾個重要部分:
- 登錄/注冊
- 初次體驗(yàn)
- 日?;?/li>
- 通知
- 帳戶設(shè)置
- 飼料
- 搜索
- 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)重要的是提供:
- 重新發(fā)送確認(rèn)碼的選項(xiàng)(用于手機(jī)號碼)
- 有關(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)限:
- 應(yīng)用想要訪問您的位置
- 應(yīng)用想要訪問您的聯(lián)系人
- 應(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ì)的一些錯誤情況:
- 沒有網(wǎng)絡(luò)連接??紤]用戶在沒有互聯(lián)網(wǎng)連接時會看到什么。
- 用戶輸入錯誤。
- 系統(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):
- 令人愉快的狀態(tài)(首次成功)。用戶首次完成一項(xiàng)重要任務(wù)的那一刻,對您來說是一個極好的機(jī)會,可以在他們與您的產(chǎn)品之間建立積極的情感聯(lián)系。通過認(rèn)可自己的進(jìn)步并與用戶一起慶祝成功,讓您的用戶知道自己的成就。
- 確認(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é)議
這機(jī)翻……我估計(jì)作者翻譯完了都沒有自己閱讀一遍。
哈哈哈哈這樣的啊 我還覺得寫的挺專業(yè)啊