編者按：今天@十萬個為什麼 同學(xué)的譯文討論了當(dāng)下最熱門的11種設(shè)計模式，每種模式都有特別深入的講解以及對應(yīng)的APP范例，全是多年沉淀下來的通用型設(shè)計經(jīng)驗(yàn)，絕對是百里挑一的干貨。

任何移動應(yīng)用，若沒有用戶起初和持續(xù)不斷的輸入，就什么也不會發(fā)生。因此，移動產(chǎn)品設(shè)計師、開發(fā)者和產(chǎn)品經(jīng)理要了解最佳的輸入方式，這點(diǎn)至關(guān)重要。盡管移動應(yīng)用——還有使用它們的用戶——通常都很獨(dú)特，但仍有很多通用模式（新舊都有）用來解決這一特殊問題。

用戶輸入設(shè)計的6項(xiàng)目標(biāo)

深入探討這些模式之前，理解用戶輸入設(shè)計的6項(xiàng)主要目標(biāo)非常重要——我把它們列在下面：

1. 選擇一種適合的輸入和數(shù)據(jù)錄入方式
2. 減少輸入的工作量
3. 設(shè)計有吸引力的數(shù)據(jù)錄入界面
4. 通過驗(yàn)證檢查來減少輸入錯誤
5. 設(shè)計必填項(xiàng)說明
6. 開發(fā)有效的輸入控件

模式總覽

記住上面幾項(xiàng)目標(biāo)，以下設(shè)計模式，在本文中都有詳細(xì)討論。

1. 智能鍵盤
2. 默認(rèn)值和自動補(bǔ)全
3. 直接進(jìn)入（或者說“快速登錄”）
4. 操作欄
5. 社交賬號登錄
6. 大按鈕
7. 滑動操作
8. 通知
9. 隱藏式控件
10. 擴(kuò)展式輸入框
11. 撤銷

1. 智能鍵盤

Facebook Paper, Android通訊錄

問題

用戶想要快速鍵入信息。

解決方案

用戶點(diǎn)按進(jìn)入應(yīng)用某個輸入?yún)^(qū)塊，在他們鍵入時要提供與數(shù)據(jù)相關(guān)的鍵盤。這樣免去他們在字母與數(shù)字鍵盤間切換，不用尋找所需的按鈕，或者多一步操作來激活鍵盤。這不僅為了用戶方便，也可作為一種指示，注明用戶應(yīng)該輸入什么類型的數(shù)據(jù)。因此移動平臺的輸入框可以高亮顯示，這增加了靈活性，決定了哪些按鈕應(yīng)該突出顯示。

例如，在通訊錄或撥號器里輸入手機(jī)號碼時，用戶并不需要完整鍵盤。點(diǎn)按這些輸入框時，會彈出數(shù)字鍵盤，而非完整鍵盤。去掉了令人分心的不必要的按鈕，流程更加順暢。類似的，點(diǎn)按瀏覽器地址欄，會彈出一個略有改動的鍵盤，“/”和“.com”按鈕就顯示在空格鍵旁邊，而非隱藏于符號內(nèi)。深入了解系統(tǒng)提供的這些智能鍵盤類型，你的UI可以根據(jù)用戶當(dāng)前的操作而調(diào)整。

2. 默認(rèn)值和自動補(bǔ)全

Skype, Flightboard

問題

用戶想要快速完成操作。

解決方案

向用戶提供預(yù)置的默認(rèn)值，或者基于之前輸入的數(shù)據(jù)生成的快速選項(xiàng)。由此預(yù)測常用選項(xiàng)，讓用戶更容易進(jìn)行信息錄入。這可以和實(shí)用的自動補(bǔ)全進(jìn)行搭配，就像Google Play商店的搜索那樣，加快速度，顯著提升用戶體驗(yàn)。這種模式尤其適用于用戶輸入的標(biāo)準(zhǔn)化，并預(yù)知問題的發(fā)生。以Skype為例，自動在電話號碼前加上國家碼前綴。這在用戶的角度是有意義的，因?yàn)樗麄兺ǔ２⒉涣?xí)慣輸入這些信息，但它在這個環(huán)境中很重要，因?yàn)镾kype是個國際呼叫應(yīng)用。

另一種方式是保存用戶上次輸入的信息，當(dāng)用戶輸入或搜索時，展現(xiàn)這些最近使用的選項(xiàng)。例如，F(xiàn)lightboard在搜索框下面列出了之前使用過的地理位置，讓用戶免于再次輸入。多數(shù)地圖或?qū)Ш綉?yīng)用也采用了這種模式，搜索方位時自動輸入用戶當(dāng)前位置，減少用戶點(diǎn)按次數(shù)。因?yàn)檫@是最常發(fā)生的情況。

3. 直接進(jìn)入（或者說“快速登錄”）

Wunderlist

問題

用戶想在做決定前嘗試一下。

解決方案

很多應(yīng)用允許用戶直接進(jìn)入，其他什么也不用做——甚至包括注冊或登錄。

記住，用戶同時只能做一件事，他們沒有足夠時間嘗試每個新產(chǎn)品。隨著應(yīng)用越來越細(xì)分化，在培育用戶之前，找到高質(zhì)量用戶或領(lǐng)袖用戶愈發(fā)重要——他們可能會討厭你的產(chǎn)品，或者迅速意識到這不是他們要的。向用戶索要賬號注冊信息比較困難，低的注冊轉(zhuǎn)化率會與注冊用戶數(shù)相互抵消。從積極方面來看，讓用戶直接體驗(yàn)產(chǎn)品，他們更容易被吸引，這取決于首次體驗(yàn)時能探索多深。這比引導(dǎo)頁的UI模式更有效，我們會在下次講到那些。因?yàn)樗苯映尸F(xiàn)在用戶面前，而不是告訴用戶如何使用。

推遲注冊對于Carousel或Duolingo這樣的應(yīng)用就不起作用，它們依賴用戶數(shù)據(jù)來運(yùn)轉(zhuǎn)。但像Wunderlist或Houzz這樣應(yīng)用可以讓用戶直接進(jìn)來，在注冊前先使用這個應(yīng)用。通常，注冊只是增加了額外的好處，使它更具吸引力，比如Wunderlist的跨設(shè)備同步，或是在Houzz中創(chuàng)建靈感集。推遲注冊不一定總是好的，不過“注冊前嘗試”是個提升應(yīng)用吸引力的好辦法。

4. 操作欄

Facebook Paper, Behance

問題

用戶需要常用操作的快捷入口。

解決方案

在應(yīng)用的操作欄（用iOS術(shù)語叫“toolbar”）提供重要操作的快速入口。盡管導(dǎo)航欄主宰著網(wǎng)頁和早期的移動應(yīng)用設(shè)計，其他一些模式的使用，諸如抽屜菜單、滑動側(cè)邊欄、鏈接集合、按鈕變換、垂直的基于內(nèi)容的導(dǎo)航等，造就了更簡潔的應(yīng)用界面，讓人關(guān)注主要和次要操作項(xiàng)，忽略副導(dǎo)航。這些應(yīng)用的常用操作，就是搜索、分享和創(chuàng)建新內(nèi)容。固定菜單不僅讓用戶更加熟悉UI，也去除了雜亂，聚焦于用戶相關(guān)的重要操作。

5. 社交賬號登錄

Beats Music, Flipboard

問題

用戶想要更簡單的注冊和登錄方式

解決方案

整合社交媒體注冊可以讓用戶通過已有賬號登錄。這意味著他們要少操心一組用戶名/密碼，同時你也不必太擔(dān)心密碼安全。Facebook、Twitter和Google是最主要的OAuth登錄提供方，你可以依據(jù)平臺和目標(biāo)用戶，整合其中所有或部分到應(yīng)用中，用戶不必再設(shè)置一個未來可能不會用到的獨(dú)立賬號。使用這種登錄注冊模式也能為你提供用戶的一些基本數(shù)據(jù)（他們使用時自動輸入的數(shù)據(jù)），不強(qiáng)迫他們在剛剛下載的陌生應(yīng)用中輸入詳細(xì)信息，始終保持注冊流程的簡捷。這個簡單的功能可以極大提升用戶體驗(yàn)，毫無疑問這種模式是眾望所歸。

6. 大按鈕

Tinder, Shazam

問題

用戶想立刻知道他們該采取哪個操作。

解決方案

理想的觸摸屏點(diǎn)按尺寸可能是72像素，但某些應(yīng)用比如Tinder，給出了巨大的按鈕。你就清楚知道該怎么做。無論何時、正在做什么，你都能迅速操作——即使你沒有在看，也很難忽略這些大塊的按鈕。這在相對簡單的應(yīng)用中尤其有價值，其中用戶只有有限的操作，因此就更有理由在各種環(huán)境中使它更容易。以Shazam為例，旨在看電視或聽音樂時使用，它確實(shí)只有這一個功能。在這種令人分心的多任務(wù)狀態(tài)下，巨大的按鈕是非常棒的改善。

7. 滑動操作

Carousel

問題

用戶想關(guān)注具體內(nèi)容。

解決方案

允許內(nèi)容滑出或移出屏幕。這給用戶提供了非常直觀的信息處理方式。例如Google Now的“卡片”，當(dāng)你不需要時可以滑動刪除，清除雜亂。類似的，Tinder的個人資料也可以右滑或左滑來表示贊同或否定。這種模式與我們之前在導(dǎo)航模式中討論的滑動視圖不同。此處，滑動操作被當(dāng)做一種操作，而非純粹瀏覽。有些應(yīng)用結(jié)合了這兩種滑動模式，例如Carousel，滑到一邊可以瀏覽大量照片，同時上滑或下滑操作可以分享或隱藏。Mailbox使左右滑動操作在郵件客戶端中發(fā)揚(yáng)光大，通過相應(yīng)的左滑和右滑操作，你可以將郵件分別標(biāo)記為已讀或稍后處理。在Secret中，發(fā)現(xiàn)新操作與探索新菜單的方式相同。在一條秘密上左滑表示喜歡。

8. 通知

LinkedIn, Facebook

問題

用戶想知道新動態(tài)或操作，他們要瞄一眼

解決方案

在視覺上通過高亮來標(biāo)記新內(nèi)容。這種模式有很多方式。例如，iOS引領(lǐng)的帶數(shù)字的小紅點(diǎn)，如今很多其他應(yīng)用中也能看到，例如LinkedIn、Facebook或Quora。Twitter也這樣處理通知按鈕，不過在時間軸圖標(biāo)上方也有個小點(diǎn)，用一種更微妙的方式來表示新動態(tài)。另一種表現(xiàn)通知的方式，是在應(yīng)用中滑出一條banner來顯示新動態(tài)。Facebook應(yīng)用也這么做了，當(dāng)信息流中有新項(xiàng)目時顯示一個小彈出提示。

9. 隱藏式控件

Secret

問題

用戶要在應(yīng)用中快速激活次要控件，還有那些只與特定區(qū)域或內(nèi)容相關(guān)的控件。

解決方案

清理雜亂，讓用戶只在需要時發(fā)現(xiàn)特定操作。這些隱形的控件可以通過各種手勢來觸發(fā)——滑動、點(diǎn)按、雙擊、長按等等。（這些我們在手勢模式中討論過）。這讓你可以將這些東西置于屏幕外，節(jié)省寶貴的屏幕空間。以Secret為例，就使用手勢代替了可見的控件。右滑觸發(fā)操作菜單，這是我們之前提過的抽屜的極簡版。創(chuàng)建內(nèi)容時，用戶可以水平滑動或在背景上垂直滑動來改變顏色與模式，如果用了圖片，還能改變亮度、飽和度與模糊度。沒有其他控件來控制這些——也不應(yīng)該有。這種UI設(shè)計模式如此直觀和干凈，你一定會看到更多此類交互。Pinterest也使用手勢來代替按鈕的應(yīng)用。長按圖片會顯示采集或評論按鈕，拖動彈出控件到按鈕上執(zhí)行。

Uber是這種設(shè)計模式的又一個案例。選擇座駕類型后，通過點(diǎn)按滑動按鈕，Uber會在預(yù)訂座駕和費(fèi)用估算間切換。這是簡單卻重要的UI設(shè)計模式，我每次試著呼叫座駕，又不想被Uber的溢價剝削時，都會為此會心一笑。Snapchat和Facebook Messenger中，在任何朋友上左滑，都能及時觸發(fā)相應(yīng)功能。

10. 擴(kuò)展式輸入框

YouTube

問題

用戶想專注于內(nèi)容，不愿為了控件犧牲屏幕空間。

解決方案

將控件設(shè)計成點(diǎn)按展開式的。這能在用戶不需要時隱藏多數(shù)控件。例如YouTube和Facebook把搜索欄藏在一個圖標(biāo)里面，用戶點(diǎn)按時搜索欄才展開，節(jié)省了屏幕空間。

11. 撤銷

Gmail, Chrome

問題

用戶希望沒有阻礙地快速操作（比如對話框），但要有還原意外操作的選項(xiàng)。

解決方案

提供一個簡便的方法讓用戶撤銷操作，不要在操作前提醒他們確認(rèn)。有些由于意外或匆忙而產(chǎn)生的操作，會導(dǎo)致不便或數(shù)據(jù)損失，例如刪除郵件或編輯文字。用戶可能在不知道結(jié)果的情況下會完成一項(xiàng)操作，寬容的UI會讓他們嘗試，這更加友好有吸引力。撤銷功能對高級用戶也很有用，他們會贊賞這種操控感。UI不會在操作過程中反復(fù)阻攔他們，詢問是否確定。確認(rèn)對話框用來解釋當(dāng)前狀況時很有用，但用戶真正看見操作結(jié)果后才能理解其中含義。為避免如此，最好去掉它們，并提供一種彌補(bǔ)錯誤的防護(hù)措施。

獲取用戶的輸入

追蹤有用戶輸入的地方，看他們是否注意到那些輸入框，是否經(jīng)常使用輸入控件，他們從應(yīng)用中的什么界面進(jìn)入，將要前往哪里（也就是使用流程）等等。持續(xù)改變排列、順序、尺寸，調(diào)整這些控件，讓用戶更多執(zhí)行你希望的操作。當(dāng)然，還要深入考慮，用戶在輸入時是如何在使用你的移動應(yīng)用——確保設(shè)計應(yīng)用時沒有忽略明顯的要點(diǎn)。