小紐扣

本文將分享一篇關于手機App設計的最全備忘錄。設計師們在App設計過程中或發布到AppStore/GooglePlay之前,都可隨時查看,查漏補缺。

 

文章將主要從以下幾個部分進行展開說明:

1. 登錄/注冊

2. 用戶初體驗

3. 用戶日常體驗

4. 提示通知

5. 賬號設置

6. Feed流頁面

7. 搜索

8. AppStore/GooglePlay

 

登錄/注冊

1. 啟動頁

啟動頁(Splash screen)是用戶啟動手機App時,最先看到的頁面。 它直接影響著用戶對軟件的第一印象。所以,為提升用戶體驗,降低跳出率,啟動頁設計需盡量做到有趣吸睛(例如直接添加趣味小動畫或小游戲等),且頁面展示時間也請盡量控制在10秒以內,避免時間太長,引起用戶反感。

Logo啟動頁

Logo啟動頁

 

2. 找回密碼功能設計

現今, 幾乎90%以上的人們都在線注冊和使用著大量需要密碼登錄的工具或服務。然而,同時使用著如此多的賬號,卻少有人能夠記清所有密碼。據統計,大約21%的新注冊用戶會在兩周后忘記相關密碼,而25%的新用戶則幾乎每天至少忘記一個密碼。所以,如若你也正好在設計一款需要登錄的手機應用,則千萬不要忘記“找回密碼”相關功能的設計。

Logo啟動頁

 

用戶初體驗

3. 引導頁

引導頁(Onboarding screens)是手機App中用于引導用戶了解產品, 并快速上手的相關頁面。優秀的引導頁設計不僅能夠有效提升用戶初次使用的愉悅度,還能成功將新用戶升級成為付費或全職用戶。所以,引導頁的設計也不容忽視。

Logo啟動頁

 

4. 身份驗證頁面

現今大部分手機App都添加身份驗證環節。在用戶填寫完相關注冊登錄信息之后, 通過手機或郵箱進行身份驗證,以確保相關信息的準確性和安全性。如下圖:

Logo啟動頁

而設計此類頁面的過程中,設計師需要注意以下兩點:

  • 手機驗證需要提供“重新發送驗證碼”功能
  • 郵箱驗證則需提供一定的驗證引導(例如,提供方便用戶搜索查詢的郵件標題、必要時及時查看垃圾郵箱等引導說明。)

 

5. 空狀態頁面

軟件App頁面本就是用于展示產品或軟件內容,收集用戶數據, 以便更好的服務用戶,順利實現其商業價值。 但在實際使用過程中,也難免會出現用戶無法提供相關數據,從而導致頁面沒有數據展示的情況。而此時,程序應用所展示的頁面就叫做“空頁面”。

但是,空頁面并不意味著就必須為空。相反,設計師可巧妙結合引導頁,潛移默化地教育和引導用戶,以提升用戶體驗。

Logo啟動頁

 

6. 默認頭像

據美國首席咨詢師Jared M.spool 最新研究顯示:大約95%的新注冊用戶不會在初次使用軟件應用的過程中,修改其默認設置。那就意味著,大多數用戶也不會在這一過程中修改他們的默認頭像。

所以,在最初設計App的過程中,如若設計師就能提供更加美觀吸睛、有趣生動的默認頭像,則更容易留住用戶。例如,選用一系列可愛的動物圖標、有趣生動的表情包、品牌Logo或吉祥物相關的設計元素等作為默認頭像,則更能吸引和留住用戶。

Logo啟動頁

 

用戶日常體驗

7. 授權頁面

當用戶打開一個全新的應用程序時,最不希望遇到的就是:一連串的授權提示框不斷彈出:

  • 是否允許獲取你的位置
  • 是否允許獲取手機通信錄讀取權限
  • 是否允許獲取手機相機權限

顯然,此類授權請求面往往會帶來極大的負面影響,有時甚至導致用戶棄用。因此,設計過程中,設計師需要在涉及到類似權限時,才彈出相關授權請求,用戶體驗會更佳。

Logo啟動頁

 

8. 多樣的交互狀態

按鈕和其它交互組件往往不止一個交互狀態。所以,設計過程中,需要設計師為每個交互組件添加更加豐富的交互狀態,例如按鈕組件,可添加默認、已按下和已禁用等交互狀態設計。

Logo啟動頁

 

9. 圖標集

設計過程中,為統一視覺設計風格,設計師需要使用一系列相同樣式的圖標設計。

Logo啟動頁

 

10. 錯誤提示

眾所周知,最好的錯誤提示,是在做好周全的用戶引導后,永遠不會彈出的提示設計。但是,當錯誤真實出現時,一款成功的錯誤提示設計,不僅能夠正確引導用戶,還能夠考慮到用戶的情感體驗,以增強用戶的繼續使用的信心。

Logo啟動頁

以下是錯誤提示設計需要考慮到的情況:

  • 沒有網絡(即考慮用戶在沒有網絡連接的情況下,應該顯示怎樣的提示)
  • 輸入錯誤
  • 系統錯誤

 

11. 加載狀態

誠然,應用程序能夠及時響應無疑是最好。但是,當應用程序由于某些原因,例如網絡情況不佳或頁面數據太多,無法做到及時響應時,設計師則需要考慮添加頁面加載狀態的設計。

為了及時給予用戶反饋, 讓用戶了解到應用程序正在運行他們的請求,且花費的時間并不長時,設計師可以嘗試添加一些動態的加載指示器設計,以優化整個加載頁面。

Logo啟動頁

 

12. 完成狀態

完成狀態是當用戶完成數據上傳或某個操作時彈出的頁面狀態,以便及時給予用戶必要的完成反饋。而設計師在設計過程中,需要考慮以下兩種情況:

  • 成功狀態:用戶第一次完成重要任務時,App所展示的頁面反饋狀態。它也是產品與用戶創建積極情感聯系的重要途徑。所以,設計此類頁面狀態時,設計師需要盡量站在用戶的角度,真心的祝賀他們的成功和成長,以獲取情感共鳴,提升情感聯系。
  • 確認狀態:確認設計是電子商務類應用程序必備的設計。當用戶成功購買之后, 及時確認并展示產品和購買相關細節,能夠有效消除用戶一些不必要的疑慮。

Logo啟動頁

 

13. 自動設計

設計過程中,設計師還需要減少不必要的操作,以降低頁面交互成本,提升用戶體驗。 例如,表單設計中,設計師們可以通過自動填充設計,減少用戶點擊和輸入次數,從而簡化用戶信息填寫過程。

Logo啟動頁

 

14. 撤銷按鈕

每個人都會犯錯。用戶在使用手機App的過程中,也難免會不小心點錯或刪錯某些信息。所以, 為提升用戶體驗,設計過程中,設計師也需要添加一些撤銷選項或按鈕設計,以方便用戶能夠及時恢復重要數據或內容。

Logo啟動頁

 

15. 本地化和國際化

當今,很多產品都面向全球進行銷售。為提升銷售量,其手機端應用的本地化和國際化設計也相當重要。例如, 在選擇App頁面視覺元素屬性(例如尺寸等)和頁面文案時,需要根據不同的銷售地點和文化,有所側重和調整。將設計真正做到本地化和國際化。

Logo啟動頁

 

16. 幫助中心

當遇到問題時,用戶的第一反應往往是去應用程序的幫助中心,搜尋相關的解決方案。所以,設計師在提供全面實用的幫助文檔的同時,也需要在應用程序適當位置添加通往幫助中心或常見問題中心的鏈接/按鈕,以方便用戶能夠及時點擊前往查看。

Logo啟動頁

 

17. 可訪問性

應用程序的可訪問性設計, 便于用戶感知和理解App的相關內容,并幫助實現人機交互。所以,應用程序的可訪問性設計也不容忽視。

 

提示通知

18. 提示通知

你知道頻繁的提示通知是用戶棄用軟件的首要原因嗎?

Logo啟動頁

不用擔心。設計師們需要的僅僅只是一個更加人性化的推送策略。例如,大家可嘗試以下信息推送策略:

  • 盡量避免在短時間內推送過多信息
  • 只推送真正對用戶有用的信息
  • 推送信息盡可能清晰易懂,一目了然
  • 添加跳轉鏈接,方便用戶迅速查看詳情
  • 選擇準確的推送時間

 

19. 推送偏好設置

推送過程中,如若能夠為用戶提供一定選擇自由,用戶愉悅度會有效提升。簡單講,就是在推送內容中,添加一些用戶能夠自由選擇接收信息的設計。

Logo啟動頁

 

賬號設置

20. 個人頁面頭像編輯工具

提供類似工具,用戶不僅能夠輕松上傳頭像,還能夠能根據各自喜好,修改和裁剪頭像,用戶體驗將更佳。

Logo啟動頁

 

21. 查看或修改個人信息設計

提供此類設計,能夠有效方便用戶隨時修改個人信息。尤其是電商類App中的發貨或付費頁面,個人信息選項一定要保持可編輯性,以確保用戶能夠根據具體情況,實時修改。

Logo啟動頁

 

22. 注銷頁面

如果你的應用程序需要用戶登錄,那么也需要確保用戶能夠實時注銷退出。

Logo啟動頁

 

23. 用戶協議

在應用程序設計中,添加用戶協議,以避免不必要的用戶糾紛。

Logo啟動頁

 

24. 隱私協議

添加隱私協議設計,不僅能夠方便用戶查看和共享公司數據,還能夠方便用戶自定義個人數據,確保個人信息安全。

Logo啟動頁

 

25. 反饋頁面

通過提供方便快捷的反饋設計,不僅能夠從用戶那里搜集到真正實用的意見,還能夠帶給他們信心,鼓勵他們更加深入地學習和使用工具,從而提出更具價值的反饋和建議。

Logo啟動頁

 

Feed流頁面

26. 滾動狀態(數據頁面)

相較于尺寸更寬的電腦屏幕,手機端屏幕所能展示的內容相對有限。為了節省空間,設計師常常盡量優先展示最重要的信息,并隱藏對用戶沒有太大價值的相關設計。

這也是為什么很多feed頁面都有兩種狀態:默認狀態(用戶進入feed頁面時看到的屏幕狀態)和滾動狀態(用戶滑動頁面查看更多內容時的屏幕狀態)。

Logo啟動頁

 

搜索

27. 默認搜索

設計師需要事先決定搜索結果的默認展示策略。例如,當設計師需要為電子商務類應用程序設計搜索結果頁面時,需要決定是否應該按照最佳匹配結果、價格或交付時間等策略進行排列展示。

 

28. 分享或收藏

允許用戶分享或收藏某個搜索結果。

Logo啟動頁

 

29. 無搜索結果設計

當用戶搜索特定內容,應用程序無法找到匹配結果時,除了直接展示“無搜索結果”等字樣,設計師還需要添加一些用戶引導設計,引導用戶下一步該怎么做,以避免用戶直接跳出或棄用等情況出現。

Logo啟動頁

 

AppStore/GooglePlay

30. 應用圖標

在將應用程序上傳到AppStore/GooglePlay之前,設計師還需要為應用程序設計一款特色圖標,既反映產品應用的性質, 又能夠輕松激起用戶興趣,從而提升產品點擊和下載量。

Logo啟動頁

 

原文地址:UX Planet

譯文地址:Mockplus

作者:Nick Babich

譯者:Snow

 

轉載請注明:學UI網 » 【寶典在手,設計不愁】2019最全App設計備忘錄,助你輕松查漏

登錄收藏
 
你可能喜歡的:
平面設計中的格式塔與視知覺原理平面設計中的格式塔與視知覺原理
2020年最值得推薦的10款UI動效設計工具2020年最值得推薦的10款UI動效設計工具
產品的風格到底是什么來決定的?(下)產品的風格到底是什么來決定的?(下)
2019年海外設計趨勢回顧2019年海外設計趨勢回顧
如何快速又精準的確定產品風格?(上)如何快速又精準的確定產品風格?(上)
深耕“用戶界面”(上篇)- 界面表現層自查深耕“用戶界面”(上篇)- 界面表現層自查
設計前必須和客戶確認的20個問題設計前必須和客戶確認的20個問題
稀缺性的正反價值稀缺性的正反價值
PRD分享:「網易云音樂-登錄/注冊模塊」產品需求文檔PRD分享:「網易云音樂-登錄/注冊模塊」產品需求文檔
圖標造型時,你是否考慮過這兩個問題?圖標造型時,你是否考慮過這兩個問題?
?
5星腾龙时时彩做号软件 新浪体育围棋 最赚钱的卡通明星 gta5怎么能快速赚钱 剑网三 跑商怎么赚钱吗 腾讯火锅视频怎么赚钱的 湖南幸运赛车 创业赚钱项目冬季 如何卖赚钱项目 股票即时指数 弹珠机能赚钱么 湖北30选5今天开奖号码 bet007网球比分 赚钱的能力和学历有关吗 007大赢家即时比分网 捕鱼达人3游戏下载 小赢家赚钱吗