對于任何手機應(yīng)用程序，如果沒有來自用戶的一些初始和正在進行的輸入，就不會發(fā)生任何事情。因此，手機產(chǎn)品設(shè)計師、開發(fā)人員和產(chǎn)品經(jīng)理必須了解允許用戶這樣做的最佳方式。

雖然手機應(yīng)用程序以及使用它們的用戶通常是獨一無二的，但是有許多常見的模式(新模式和舊模式)被用來解決這個特定的問題。

用戶輸入設(shè)計的6個目標

在我們深入研究模式之前，了解用戶輸入設(shè)計的六個主要目標是很重要的：

1. 選擇合適的輸入和資料登錄方法

2. 減少輸入量

3. 設(shè)計有吸引力的數(shù)據(jù)輸入屏幕

4. 使用驗證檢查來減少輸入錯誤

5. 設(shè)計所需的輸入文檔

6. 制定有效的輸入控制

模式的概述

在記住以上設(shè)計目標的前提下，下面是我們在將本文中詳細介紹的設(shè)計模式的概述，在我們的電子書《2014年手機用戶界面設(shè)計模式》中有更詳細的介紹:

1.智能鍵盤
2.默認值&自動完成
3.立即沉浸(或“惰性注冊”)
4.操作欄
5.社交賬號登錄
6.巨大按鈕
7.滑動操作
8.通知
9.顯性控件
10.可擴展輸入
11.撤銷

1.智能鍵盤

Facebook記事本，Android聯(lián)系人

問題
用戶希望快速輸入信息。

解決方案
當用戶點擊應(yīng)用程序中允許輸入信息的部分時，給他們與輸入數(shù)據(jù)相關(guān)的鍵盤。這使他們不必在字母數(shù)字屏幕之間尋找正確的按鈕，或者多走一步來訪問鍵盤。這不僅方便了用戶，而且還指示了需要從用戶那里得到什么類型的輸入。手機平臺允許相應(yīng)地標記文本字段，這允許在哪些按鈕顯示在更顯著位置方面有一定的靈活性。

例如，在地址簿或撥號器中輸入電話號碼時，用戶不需要完整的鍵盤。當他們點擊這些字段時，數(shù)字小鍵盤就會彈出，而不是整個鍵盤，這樣就減少了不必要的按鈕，簡化了操作過程。類似地，點擊瀏覽器中的URL欄會彈出一個稍微修改過的鍵盤，其中“/”和“。com”按鈕顯示在空格鍵旁邊，而不是符號鍵后面。通過連接到系統(tǒng)提供的這些智能鍵盤類型，你的UI可以根據(jù)用戶當前嘗試的操作進行調(diào)整。

2.默認值&自動完成

Skype, Flightboard

問題
用戶希望快速完成操作。

解決方案
通過為用戶提供預(yù)先填充的默認值或基于先前輸入的數(shù)據(jù)的提示，預(yù)測頻繁選擇的項并使用戶更容易地進行數(shù)據(jù)輸入。這可以與自動完成功能相匹配，比如在谷歌Play Store搜索中，通過加速來顯著改善用戶體驗。這種模式在標準化用戶輸入和在問題發(fā)生之前預(yù)測問題方面特別有用。例如，Skype會自動為輸入的電話號碼匹配國家代碼。從用戶的角度來看，這是有意義的，因為他們不習(xí)慣定期輸入這些信息，但在這種情況下，這種匹配很重要，因為Skype是一個國際電話應(yīng)用程序。

另一種實現(xiàn)方法是保存用戶輸入的最后一項，并在用戶再次輸入或搜索時顯示這些最近使用過的項。例如，F(xiàn)lightboard在搜索框下面列出了以前使用過的位置，以避免用戶再次輸入。大多數(shù)地圖或?qū)Ш綉?yīng)用程序也采用這種模式，在搜索方向時自動輸入用戶當前位置，為用戶節(jié)省幾次點擊，因為這是最常見的情況。

3.立即沉浸（或“惰性注冊”）

Wunderlist

問題
用戶希望在注冊之前先嘗試一下。

解決方案
越來越多的應(yīng)用程序允許用戶在任何事情發(fā)生之前——甚至是注冊或登錄之前——立即沉浸在應(yīng)用程序中。

記住，他們一次只能做一件事，而且測試每個新產(chǎn)品的時間有限。隨著應(yīng)用程序的日益專業(yè)化，在扶持它們之前找到高質(zhì)量的用戶或客戶越來越重要——他們可能會討厭你的產(chǎn)品或很快意識到它不是他們想要的。向用戶詢問注冊賬戶所需的信息可能是一件很困難的事情，而且會降低甚至是適合的訪問者的注冊率。在積極的方面，通過讓他們立即體驗?zāi)愕漠a(chǎn)品，他們更有可能被吸引，因為他們能夠在第一次體驗時深入探索應(yīng)用程序。這比我們接下來討論的onboarding walkthrough UI模式更好，因為它向用戶展示而非告訴他們應(yīng)用程序如何工作。

對于Carousel或Duolingo等依賴用戶數(shù)據(jù)來運行的應(yīng)用程序來說，允許延遲注冊是沒有意義的，但Wunderlist或Houzz等應(yīng)用程序可以允許用戶在要求他們確認身份之前進入并使用該應(yīng)用程序。通常情況下，注冊會帶來一些額外的好處，比如在Wunderlist中進行跨設(shè)備同步，或者在Houzz中創(chuàng)建一本想法書，這會讓注冊變得更有吸引力。延遲注冊并不總是一個好主意，但是選擇“注冊前試用”可以很好地提高你的應(yīng)用程序的參與度。

4.操作欄

Facebook Paper, Behance

問題
用戶希望快速訪問常用的操作。

解決方案
從應(yīng)用程序的操作欄(或iOS術(shù)語中的“工具欄”)提供對重要操作的快速訪問。雖然導(dǎo)航條主導(dǎo)了web和早期的手機應(yīng)用程序設(shè)計, 但其他模式的使用，如折疊、滑出式工具欄和側(cè)邊欄、指向所有內(nèi)容的鏈接、按鈕轉(zhuǎn)換、垂直的和基于內(nèi)容的導(dǎo)航，產(chǎn)生了更簡單的應(yīng)用程序視圖，用戶可以專注于一級和二級操作，而不是二級導(dǎo)航。常見的操作有：在應(yīng)用程序中搜索、共享和創(chuàng)建新內(nèi)容。這個存留的菜單可以幫助用戶熟悉UI，還可以通過專注于與用戶相關(guān)的重要操作清除一些混亂。

5.社交賬號登錄

Beats Music, Flipboard

問題
用戶需要一種更簡單的注冊和登錄方式。

解決方案
整合社交賬號登錄方法，允許用戶通過現(xiàn)有賬戶登錄。這意味著他們少了一個需要擔心的用戶名/密碼組合，同時，你也不必擔心密碼的安全性。Facebook、Twitter和谷歌是主要的OAuth登錄提供商，根據(jù)平臺和目標受眾的不同，你可以在你的應(yīng)用程序中提供所有這些或其中之一，而不是讓用戶建立一個他們可能會也可能不會在未來使用的單獨的帳戶。使用這個注冊和登錄模式也可以為你提供一些基本的關(guān)于用戶的數(shù)據(jù)(當他們使用應(yīng)用程序時，會自動填充數(shù)據(jù)), 同時，通過不強迫用戶在剛下載的陌生應(yīng)用程序中輸入他們的詳細信息，讓他們更加舒適。這個簡單的特性可以在很大程度上改進你的UX，因此這種模式正在成為一種期望。

6.巨大按鈕

Tinder, Shazam

問題
用戶希望立即知道他們可以采取哪些操作。

解決方案
理想的觸屏點擊目標大小可能是72 px,但是一些應(yīng)用程序，像Tinder，也會給你巨大的按鈕讓你確切地知道該做什么, 無論你在什么位置，無論你在做什么，你都能很快完成操作——很難錯過這些巨大的按鈕,即使你沒在仔細看。這在更簡單的應(yīng)用程序中尤其有價值，因為在這些應(yīng)用程序中，用戶需要執(zhí)行的操作非常有限，因此更有理由讓他們在各種情境中更容易地執(zhí)行這些操作。例如，Shazam是用來看電視或聽音樂的，它實際上只做一件事。對于試圖在這種分心狀態(tài)下進行多任務(wù)處理的用戶來說，巨大的按鈕是一個巨大的改進。

7.滑動操作

Carousel

問題
用戶希望關(guān)注特定的內(nèi)容。

解決方案
允許內(nèi)容被滑動或移動。這為用戶提供了一種非常直觀的方式來處理屏幕上的信息。例如，谷歌中的“卡片”現(xiàn)在可以在你不需要的時候被滑走，以清理雜物;類似地，Tinder中的配置文件可以向左或向右滑動，以表示積極或消極的響應(yīng)。這個模式與我們在導(dǎo)航模式中討論的滑動視圖不同。在這里，滑動手勢被用于一項操作，而不僅僅是瀏覽。有些應(yīng)用程序結(jié)合了兩種滑動模式，比如Carousel，它可以讓你通過將照片滑動到一邊來瀏覽多張照片，也可以通過向上或向下滑動來分享或隱藏照片。郵箱推廣了電子郵件客戶端的左右滑動操作，允許你分別通過向右或向左滑動將郵件標記為已讀或安排為待處理。Secret用讓你發(fā)現(xiàn)新菜單的方式來讓你發(fā)現(xiàn)新動作。向左滑動一個secret代表你喜歡它。

8.通知

LinkedIn, Facebook

問題
用戶希望了解他們應(yīng)該瀏覽的新活動或操作。

解決方案
通過標記新內(nèi)容來突出最近的活動。這個模式有幾種實現(xiàn)方式。例如，在標簽上放置一個計數(shù)徽章是由iOS推廣開來的，但現(xiàn)在這也可以在許多其他應(yīng)用程序中看到，如LinkedIn、Facebook或Quora。Twitter在通知按鈕上也這樣做，但它在時間軸圖標的頂部還有一個小點，以更微妙的方式指示新的活動。另一種顯示通知的方式是在應(yīng)用程序中使用一個向下拉的橫幅來顯示新活動。Facebook應(yīng)用程序也能做到這一點，當新聞推送中出現(xiàn)新條目時，它會彈出一個小窗口。

9.顯性控件

Secret

問題
用戶希望快速訪問那些二級的或僅與應(yīng)用程序中的特定部分或內(nèi)容相關(guān)的控件。

解決方案
清理雜物，讓用戶只在需要時才發(fā)現(xiàn)特定的操作。這些看不見的控件可以通過任何手勢來訪問——滑動、輕擊、雙擊、長按等等(我們在手勢模式中討論過)。這使你能夠?qū)⑦@些操作保留在屏幕之外，從而節(jié)省一些寶貴的空間。例如，Secret使用手勢而不是可視控件。向右滑動，就會出現(xiàn)一個動作菜單，這是我們前面介紹過的折疊模式的簡化版。在創(chuàng)建內(nèi)容時，用戶可以在背景上水平滑動或垂直滑動手指來改變背景的顏色和圖案，或者在使用圖片時，可以改變圖片的亮度、飽和度或模糊度。沒有其他控件允許你這樣做——也不應(yīng)該有其他控件。這種UI設(shè)計模式非常直觀、清晰，你一定會看到更多這種類型的交互。Pinterest是另一個使用手勢隱藏動作按鈕的應(yīng)用程序。長時間按下一個圖像，就會出現(xiàn)一個按鈕，用戶可以通過將彈出控件拖動到該按鈕上來對其進行固定或評論。

Uber是這種設(shè)計模式的另一種實現(xiàn)方式。Uber還可以讓你在預(yù)訂和查看車費估算之間進行切換，只要你選擇了你想要的乘車類型，就可以通過點擊滑塊按鈕來查看車費估算。這是一個簡單而又重要的UI設(shè)計模式，每當我在做五件事的同時還想搭個便車，同時還要確保Uber不會用峰時價格來騙我的時候，它都會讓我微笑。Snapchat和Facebook Messenger允許你在需要的時候通過滑走所有朋友的賬戶來訪問這些功能。

10.可擴展輸入

YouTube

問題
用戶希望關(guān)注內(nèi)容，而不是犧牲屏幕空間給控件。

解決方案
設(shè)計當用戶點擊時會展開的控件。這使得大多數(shù)控件在用戶需要它們之前都不會出現(xiàn)。例如，YouTube和Facebook通過將搜索欄隱藏在一個圖標后面來節(jié)省屏幕空間，當用戶點擊這個圖標時，它就會展開成一個搜索欄。

11.撤銷

Gmail, Chrome

問題
用戶希望在沒有中斷(例如:確認)的情況下快速地執(zhí)行操作，但是可以選擇恢復(fù)意外操作。

解決方案
為用戶提供一個簡單的方法來撤銷他們的操作，而不只是要求他們事先確認。在某些情況下，某個操作可能會導(dǎo)致不方便或數(shù)據(jù)丟失，例如刪除電子郵件或編輯一些文本。用戶可能因為不知道會發(fā)生什么而完成了一個動作;一個寬容的用戶界面可以讓他們體驗到更多的參與感和友好。對于高級用戶來說，撤銷功能也很強大，他們會喜歡在整個過程中不用UI反復(fù)詢問他們是否確定要繼續(xù)操作，就能更好地控制局面。在解釋將要發(fā)生的事情時，確認彈出窗口可能很有用，但是用戶可能直到看到操作的結(jié)果才會理解其含義。在這種情況下，最好是讓開，同時提供一個安全網(wǎng)絡(luò)，以防出現(xiàn)錯誤。

獲取用戶的輸入
時刻記錄你應(yīng)該從用戶那里獲得輸入的位置，他們是否曾經(jīng)查看過這些輸入?yún)^(qū)域，他們使用這些輸入控件的頻率，他們從哪里來，又從哪里進入應(yīng)用程序(即用戶流)，等等。不斷地重新安排、重新排序、調(diào)整大小和調(diào)整這些控件，直到你獲得更多所需的操作。當然，當用戶能夠提供輸入時，要深入考慮他們實際上是如何使用你的移動應(yīng)用程序的——確保你在設(shè)計應(yīng)用程序時沒有遺漏什么明顯的東西。

文章來源：站酷  作者：馬克筆設(shè)計留學(xué)

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)