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

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

用戶輸入設(shè)計(jì)的6個(gè)目標(biāo)

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

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

2. 減少輸入量

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

4. 使用驗(yàn)證檢查來減少輸入錯(cuò)誤

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

6. 制定有效的輸入控制

模式的概述

在記住以上設(shè)計(jì)目標(biāo)的前提下，下面是我們?cè)趯⒈疚闹性敿?xì)介紹的設(shè)計(jì)模式的概述，在我們的電子書《2014年手機(jī)用戶界面設(shè)計(jì)模式》中有更詳細(xì)的介紹:

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

1.智能鍵盤

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

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

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

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

2.默認(rèn)值&自動(dòng)完成

Skype, Flightboard

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

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

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

3.立即沉浸（或“惰性注冊(cè)”）

Wunderlist

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

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

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

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

4.操作欄

Facebook Paper, Behance

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

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

5.社交賬號(hào)登錄

Beats Music, Flipboard

問題
用戶需要一種更簡(jiǎn)單的注冊(cè)和登錄方式。

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

6.巨大按鈕

Tinder, Shazam

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

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

7.滑動(dòng)操作

Carousel

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

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

8.通知

LinkedIn, Facebook

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

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

9.顯性控件

Secret

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

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

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

10.可擴(kuò)展輸入

YouTube

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

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

11.撤銷

Gmail, Chrome

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

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

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

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

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