萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> 平面設計理論

移動端用戶輸入設計:11大經典模式深度解析

任何移動應用,若無用戶初始且持續的輸入,則萬事不啟。因此,設計師、開發者與產品經理必須深諳最佳輸入方式。儘管應用與用戶各異,仍存通用模式(新舊兼具)以解決此核心難題。本文譯自@十萬個為什麽,詳述當下最熱門的11種設計模式,附深度講解與APP實例,皆為多年沉澱的通用經驗,堪稱百裡挑一的乾貨。

用戶輸入設計的六大核心目標

探討模式前,先明確六大目標:

  • 選擇適配的輸入與數據錄入方式
  • 減少輸入工作量
  • 設計具吸引力的數據錄入界面
  • 通過驗證檢查減少錯誤
  • 設計必填項說明
  • 開發有效的輸入控件

模式總覽

記住上述目標,以下11種模式將逐一展開:

  1. 智能鍵盤
  2. 默認值與自動補全
  3. 直接進入(快速登錄)
  4. 操作欄
  5. 社交賬號登錄
  6. 大按鈕
  7. 滑動操作
  8. 通知
  9. 隱藏式控件
  10. 擴展式輸入框
  11. 撤銷

1. 智能鍵盤

案例:Facebook Paper、Android通訊錄

問題:用戶欲快速鍵入信息。

解決方案:用戶點按輸入區塊時,提供與數據相關的鍵盤。免去字母/數字鍵盤切換、尋找按鈕、額外激活步驟。這不僅為便利,更作為指示,明確用戶應輸入何類數據。輸入框可高亮顯示,增加靈活性,決定哪些按鈕突出。例如:通訊錄/撥號器輸入手機號彈出數字鍵盤;瀏覽器地址欄彈出含「/」「.com」鍵的鍵盤。深入了解系統智能鍵盤類型,UI可隨用戶操作動態調整。

2. 默認值與自動補全

案例:Skype、Flightboard

問題:用戶欲快速完成操作。

解決方案:提供預置默認值,或基於歷史輸入生成快速選項,預測常用選項,降低錄入難度。搭配實用自動補全(如Google Play搜索),顯著提升體驗。此模式適用於輸入標準化、可預知問題的場景。Skype自動添加國家碼,符合國際呼叫場景;Flightboard列出歷史地理位置,免再次輸入;地圖/導航應用自動填入當前位置,減少點按,因這是最高頻場景。

3. 直接進入(快速登錄)

案例:Wunderlist

問題:用戶想在決策前先試用。

解決方案:允許用戶直接進入,無需註冊/登錄。用戶同時只能做一事,無時間嘗試每個新產品。隨應用細分化,培育用戶前,獲取高質量/種子用戶愈發關鍵——他們可能討厭產品,或迅速發現不合適。索要註冊信息困難,低轉化率抵消註冊用戶數。正面看,直接體驗更易吸引用戶,取決於首次體驗深度。比引導頁UI模式更有效,因直接呈現而非告知如何使用。對Carousel、Duolingo這類依賴用戶數據的應用無效,但Wunderlist、Houzz可先用後註冊,註冊僅增額外價值(跨設備同步、創建靈感集)。「註冊前試用」是提升吸引力的好策略。

4. 操作欄

案例:Facebook Paper、Behance

問題:用戶需常用操作快捷入口。

解決方案:在操作欄(iOS稱toolbar)提供重要操作快速入口。雖導航欄曾主宰網頁與早期移動端,但抽屜菜單、側滑欄、鏈接集合、按鈕變換、垂直基於內容導航等模式興起,造就更簡潔界面,聚焦主次要操作,忽略副導航。常用操作多為搜索、分享、創建新內容。固定菜單不僅增強用戶UI熟悉度,更去除雜亂,聚焦用戶相關的重要操作。

5. 社交賬號登錄

案例:Beats Music、Flipboard

問題:用戶想要更簡單的註冊登錄方式。

解決方案:整合社交媒體註冊,用戶可用現有賬號登錄。意味著少記一組用戶名/密碼,開發者也毋須過度擔心密碼安全。Facebook、Twitter、Google為主要OAuth提供方,可依平台與目標用戶整合全部或部分。用戶無需為陌生應用設置可能不用的獨立賬號,保持註冊流程簡捷。此模式亦能自動獲取用戶基本數據,極大提升體驗,眾望所歸。

6. 大按鈕

案例:Tinder、Shazam

問題:用戶想立刻知道該採取哪個操作。

解決方案:理想觸控點按尺寸或為72像素,但Tinder等應用給出巨大按鈕,讓用戶一目了然、甚至不看也能操作。在簡單應用中極具價值——用戶操作有限,更有理由在各種環境下降低難度。Shazam用於看電視/聽音樂多任務狀態,單一功能配巨大按鈕,極大改善體驗。

7. 滑動操作

案例:Carousel

問題:用戶想關注具體內容。

解決方案:允許內容滑出/移出屏幕,提供直觀信息處理方式。Google Now卡片可滑動刪除清理雜亂;Tinder左右滑表示贊同/否定。此模式不同於導航中的滑動視圖,此處滑動是操作而非純瀏覽。Carousel結合兩者:滑邊瀏覽照片,上/下滑分享/隱藏。Mailbox發揚郵件客戶端左右滑(標記已讀/稍後處理);Secret中左滑秘密表示喜歡。

8. 通知

案例:LinkedIn、Facebook

問題:……(原文截斷,此處略)

copyright © 萬盛學電腦網 all rights reserved