這30件事情,移動端設計需要注意

2 評論 6824 瀏覽 23 收藏 18 分鐘

文章對移動端設計不同部分的需要注意注意的事項進行了盤點總結,與大家分享。

本文是一份備忘錄,它將提醒您有關將應用程序發送到AppStore / GooglePlay之前需要進行設計的事情。

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

  1. 登錄/注冊
  2. 初次體驗
  3. 日?;?/li>
  4. 通知
  5. 帳戶設置
  6. 飼料
  7. 搜索
  8. AppStore / GooglePlay

一、登錄/注冊

1. 啟動畫面

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

Uber的 Rider啟動過渡

2. 忘記密碼流程

平均每個人都注冊了90個需要密碼的在線服務。使用了這么多帳戶,很少有人記住他們的密碼。據統計,有21個用戶在兩周后忘記了密碼,而25%的用戶每天至少一次忘記了一個密碼。如果您的應用程序需要登錄,則應該提供一個重置密碼的選項。

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

二、初次體驗

3. 入職屏幕

入門是UX設計人員使用的一個術語,用于描述使用戶“啟動并運行”應用程序的過程。成功的入職增加了首次用戶采用產品后成為全職用戶的可能性。

Cuberto的動畫入職體驗

4. 數據確認屏幕

許多移動應用程序要求確認電子郵件/電話號碼。數據確認屏幕通常出現在用戶提供所需的詳細信息并告訴他們去確認其電子郵件地址/電話號碼之后。

Diana Caballero的確認畫面

對于數據確認屏幕,至關重要的是提供:

  1. 重新發送確認碼的選項(用于手機號碼)
  2. 有關如何查找確認消息的說明(即搜索特定標題,在“垃圾郵件”文件夾中搜索等)(用于電子郵件確認消息)

5. 空狀態為“尚無內容”

內容是為大多數應用程序提供價值的要素。這是人們將它們用于內容的主要原因。因此,考慮如何設計用戶旅程中用戶可能還沒有內容的位置至關重要。這樣的地方被稱為空狀態,而空狀態不應該……好,空。

空狀態是注入一些新成員以繼續指導用戶前進的自然點。您應該有效地使用它-進行教育和指南。

Symplicity Career的應用程序為空狀態

6. 默認用戶頭像

大多數用戶(根據Jared M. Spool 約為95%)不更改默認設置。這意味著大多數用戶將具有默認頭像,您可以為他們選擇默認頭像。

Dropbox中可愛的默認用戶頭像

三、日常經驗

7. 權限請求屏幕

當用戶打開一個新應用程序時,他們要查看的最后一件事是連續出現多個彈出窗口,以請求權限:

  1. 應用想要訪問您的位置
  2. 應用想要訪問您的聯系人
  3. 應用程式想存取您的相機

此類權限請求會對用戶體驗產生非常負面的影響,通常會導致應用被放棄。這就是為什么最好在用戶交互的內容中請求權限。

通知權限對話框,作者Anton Tkachuk

8. 交互式UI元素的各種狀態

按鈕和其他交互元素通常具有多種狀態。對于應用程序中的每個交互式元素,必須考慮默認狀態/已按下/已禁用等狀態。

按鈕的三種狀態

Vadim Gromov的材料設計按鈕

9. 圖標集

通過使用相同樣式的圖標,可以使您的UI在視覺上更加一致。

適用于iOS的Twitter應用中的選項卡欄圖標

10. 錯誤狀態

我們都知道,最好的錯誤消息是永遠不會出現的錯誤消息。始終最好通過提前引導用戶正確的方向來防止錯誤的發生。但是,當確實出現錯誤時,精心設計的錯誤處理不僅可以幫助用戶教會您如何按預期使用該應用程序,還可以防止用戶感到無知。

Dwinawan的錯誤互動

這是您應該設計的一些錯誤情況:

  1. 沒有網絡連接??紤]用戶在沒有互聯網連接時會看到什么。
  2. 用戶輸入錯誤。
  3. 系統錯誤。

11. 加載狀態

雖然應用程序的即時響應是最好的,但有時您的應用程序將無法遵守速度指南。不良的互聯網連接可能會導致響應緩慢,或者操作本身會花費很長時間。

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

等待動畫進度指示器是在發生或加載事件時為用戶提供系統狀態的最常見形式。

微笑裝載機由AI產品設計格列布Kuznetsov?

12. 功狀態

成功狀態是我們在用戶完成任務時顯示給他們的屏幕。設計者應考慮以下幾種成功狀態:

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

Booking.com中的確認屏幕

13. 自動完成

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

圖片:Louise Chang

14. 撤消動作

我們所有人都會犯錯,但是在用戶體驗方面,至關重要的是要提供一個選項來幫助用戶恢復重要數據。

撤消刪除項目。圖像:Sashoto Seeam

撤消發送電子郵件。圖片:泰勒·博尚(Tyler Beauchamp)

15. 本地化/國際化

由于許多產品團隊都有全球范圍的計劃,因此將本地化/國際化作為設計過程的自然組成部分至關重要。元素的視覺屬性(例如大小)和UX復制應考慮本地化/國際化來選擇。

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

16. 幫助文檔

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

Alex Muench的幫助和反饋

17. 輔助功能

可訪問性使具有各種能力的人們能夠感知,理解并與您的產品進行交互。這是Lillian Xiao的精彩總結,內容涉及設計師需要了解的有關移動輔助功能的知識。

四、通知事項

18. 應用程序內通知/推送通知

您是否知道糟糕的通知是用戶卸載應用的第一大原因?

令人討厭的通知是人們卸載移動應用程序的第一大原因(根據調查的受訪者中的71%)。

但是,可以將這種反UX模式變成對企業和用戶都有意義且有用的東西。為了在應用內通知中獲得良好的結果,設計人員需要一種最適合移動媒體的發布策略。

19. 通知首選項

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

在Slack中調整通知首選項

五、帳戶設置

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

不僅允許用戶上傳頭像,還可以根據自己的需要在您的應用程序中對其進行修改。

編輯Scott Thomas的個人資料圖片

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

允許用戶直接在移動應用中編輯其個人信息。設計屏幕以預覽運輸/計費信息并使該信息可編輯。

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

22. 注銷

如果您的應用需要登錄,則應始終允許用戶退出。

在iOS版Facebook中注銷

23. 服務條款

將服務條款添加到您的應用中,以避免被起訴。

圖片:克里斯蒂安·迪娜(Cristian Dina)/ Shutterstock

24. 隱私設置

允許用戶查看他們與公司共享的數據,并允許他們自定義設置。

圖片:維塔利·弗里德曼(Vitaly Friedman)

25. 發送反饋

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

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

六、供稿

26. 滾動狀態

移動顯示器的屏幕空間有限。為了節省屏幕空間,設計人員通常希望優化顯示的信息并隱藏對用戶無用的任何內容。這就是為什么許多提要屏幕具有兩種狀態的原因-默認狀態(用戶進入提要時看到的屏幕)和滾動狀態(當用戶向上滑動以查看更多內容時)。

請注意,標題區域在滾動時折疊。AurélienSalomon制作的Craiglist Mobile動畫?

七、應用內搜索

27. 默認搜索行為

您需要確定搜索結果的默認順序。例如,如果您為電子商務應用程序設計搜索結果頁面,則需要確定是否應按最佳匹配/價格/交貨時間對輸出進行排序。

28. 分享/為其添加書簽

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

Martin Berbesson的App AE中的“贊”,“書簽”和“共享”選項

29. 空狀態為“無結果”

當用戶搜索特定項目時,我們的用戶會看到什么屏幕,但該應用沒有任何匹配結果?!盁o結果”屏幕不應成為死胡同。因此,我們應該設計一個屏幕來指導用戶并顯示他們下一步可以做什么,而不是在空白頁面上顯示快速提示“無結果”。

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

八、AppStore / GooglePlay

30. 應用程序圖標

您需要為應用程序設計一個令人難忘的圖標,該圖標將反映您應用程序的性質并引起潛在用戶的興趣。

 

原文作者: Nick Babich

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

譯者: CANAAN;譯者公眾號:南設(ID:shemenglianmeng)

本文由 @CANAAN 翻譯發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這機翻……我估計作者翻譯完了都沒有自己閱讀一遍。

    回復
    1. 哈哈哈哈這樣的啊 我還覺得寫的挺專業啊

      來自天津 回復