2015-7-13 周周
編者按：今天@十萬個為什麼 同學(xué)的譯文討論了當(dāng)下最熱門的11種設(shè)計模式，每種模式都有特別深入的講解以及對應(yīng)的APP范例，全是多年沉淀下來的通用型設(shè)計經(jīng)驗，絕對是百里挑一的干貨。
任何移動應(yīng)用，若沒有用戶起初和持續(xù)不斷的輸入，就什么也不會發(fā)生。因此，移動產(chǎn)品設(shè)計師、開發(fā)者和產(chǎn)品經(jīng)理要了解最佳的輸入方式，這點至關(guān)重要。盡管移動應(yīng)用——還有使用它們的用戶——通常都很獨特，但仍有很多通用模式（新舊都有）用來解決這一特殊問題。
深入探討這些模式之前，理解用戶輸入設(shè)計的6項主要目標非常重要——我把它們列在下面：
記住上面幾項目標，以下設(shè)計模式，在本文中都有詳細討論。
Facebook Paper, Android通訊錄
問題
用戶想要快速鍵入信息。
解決方案
用戶點按進入應(yīng)用某個輸入?yún)^(qū)塊，在他們鍵入時要提供與數(shù)據(jù)相關(guān)的鍵盤。這樣免去他們在字母與數(shù)字鍵盤間切換，不用尋找所需的按鈕，或者多一步操作來激活鍵盤。這不僅為了用戶方便，也可作為一種指示，注明用戶應(yīng)該輸入什么類型的數(shù)據(jù)。因此移動平臺的輸入框可以高亮顯示，這增加了靈活性，決定了哪些按鈕應(yīng)該突出顯示。
例如，在通訊錄或撥號器里輸入手機號碼時，用戶并不需要完整鍵盤。點按這些輸入框時，會彈出數(shù)字鍵盤，而非完整鍵盤。去掉了令人分心的不必要的按鈕，流程更加順暢。類似的，點按瀏覽器地址欄，會彈出一個略有改動的鍵盤，“/”和“.com”按鈕就顯示在空格鍵旁邊，而非隱藏于符號內(nèi)。深入了解系統(tǒng)提供的這些智能鍵盤類型，你的UI可以根據(jù)用戶當(dāng)前的操作而調(diào)整。
Skype, Flightboard
問題
用戶想要快速完成操作。
解決方案
向用戶提供預(yù)置的默認值，或者基于之前輸入的數(shù)據(jù)生成的快速選項。由此預(yù)測常用選項，讓用戶更容易進行信息錄入。這可以和實用的自動補全進行搭配，就像Google Play商店的搜索那樣，加快速度，顯著提升用戶體驗。這種模式尤其適用于用戶輸入的標準化，并預(yù)知問題的發(fā)生。以Skype為例，自動在電話號碼前加上國家碼前綴。這在用戶的角度是有意義的，因為他們通常并不習(xí)慣輸入這些信息，但它在這個環(huán)境中很重要，因為Skype是個國際呼叫應(yīng)用。
另一種方式是保存用戶上次輸入的信息，當(dāng)用戶輸入或搜索時，展現(xiàn)這些最近使用的選項。例如，F(xiàn)lightboard在搜索框下面列出了之前使用過的地理位置，讓用戶免于再次輸入。多數(shù)地圖或?qū)Ш綉?yīng)用也采用了這種模式，搜索方位時自動輸入用戶當(dāng)前位置，減少用戶點按次數(shù)。因為這是最常發(fā)生的情況。
Wunderlist
問題
用戶想在做決定前嘗試一下。
解決方案
很多應(yīng)用允許用戶直接進入，其他什么也不用做——甚至包括注冊或登錄。
記住，用戶同時只能做一件事，他們沒有足夠時間嘗試每個新產(chǎn)品。隨著應(yīng)用越來越細分化，在培育用戶之前，找到高質(zhì)量用戶或領(lǐng)袖用戶愈發(fā)重要——他們可能會討厭你的產(chǎn)品，或者迅速意識到這不是他們要的。向用戶索要賬號注冊信息比較困難，低的注冊轉(zhuǎn)化率會與注冊用戶數(shù)相互抵消。從積極方面來看，讓用戶直接體驗產(chǎn)品，他們更容易被吸引，這取決于首次體驗時能探索多深。這比引導(dǎo)頁的UI模式更有效，我們會在下次講到那些。因為它直接呈現(xiàn)在用戶面前，而不是告訴用戶如何使用。
推遲注冊對于Carousel或Duolingo這樣的應(yīng)用就不起作用，它們依賴用戶數(shù)據(jù)來運轉(zhuǎn)。但像Wunderlist或Houzz這樣應(yīng)用可以讓用戶直接進來，在注冊前先使用這個應(yīng)用。通常，注冊只是增加了額外的好處，使它更具吸引力，比如Wunderlist的跨設(shè)備同步，或是在Houzz中創(chuàng)建靈感集。推遲注冊不一定總是好的，不過“注冊前嘗試”是個提升應(yīng)用吸引力的好辦法。
Facebook Paper, Behance
問題
用戶需要常用操作的快捷入口。
解決方案
在應(yīng)用的操作欄（用iOS術(shù)語叫“toolbar”）提供重要操作的快速入口。盡管導(dǎo)航欄主宰著網(wǎng)頁和早期的移動應(yīng)用設(shè)計，其他一些模式的使用，諸如抽屜菜單、滑動側(cè)邊欄、鏈接集合、按鈕變換、垂直的基于內(nèi)容的導(dǎo)航等，造就了更簡潔的應(yīng)用界面，讓人關(guān)注主要和次要操作項，忽略副導(dǎo)航。這些應(yīng)用的常用操作，就是搜索、分享和創(chuàng)建新內(nèi)容。固定菜單不僅讓用戶更加熟悉UI，也去除了雜亂，聚焦于用戶相關(guān)的重要操作。
Beats Music, Flipboard
問題
用戶想要更簡單的注冊和登錄方式
解決方案
整合社交媒體注冊可以讓用戶通過已有賬號登錄。這意味著他們要少操心一組用戶名/密碼，同時你也不必太擔(dān)心密碼安全。Facebook、Twitter和Google是最主要的OAuth登錄提供方，你可以依據(jù)平臺和目標用戶，整合其中所有或部分到應(yīng)用中，用戶不必再設(shè)置一個未來可能不會用到的獨立賬號。使用這種登錄注冊模式也能為你提供用戶的一些基本數(shù)據(jù)（他們使用時自動輸入的數(shù)據(jù)），不強迫他們在剛剛下載的陌生應(yīng)用中輸入詳細信息，始終保持注冊流程的簡捷。這個簡單的功能可以極大提升用戶體驗，毫無疑問這種模式是眾望所歸。
Tinder, Shazam
問題
用戶想立刻知道他們該采取哪個操作。
解決方案
理想的觸摸屏點按尺寸可能是72像素，但某些應(yīng)用比如Tinder，給出了巨大的按鈕。你就清楚知道該怎么做。無論何時、正在做什么，你都能迅速操作——即使你沒有在看，也很難忽略這些大塊的按鈕。這在相對簡單的應(yīng)用中尤其有價值，其中用戶只有有限的操作，因此就更有理由在各種環(huán)境中使它更容易。以Shazam為例，旨在看電視或聽音樂時使用，它確實只有這一個功能。在這種令人分心的多任務(wù)狀態(tài)下，巨大的按鈕是非常棒的改善。
Carousel
問題
用戶想關(guān)注具體內(nèi)容。
解決方案
允許內(nèi)容滑出或移出屏幕。這給用戶提供了非常直觀的信息處理方式。例如Google Now的“卡片”，當(dāng)你不需要時可以滑動刪除，清除雜亂。類似的，Tinder的個人資料也可以右滑或左滑來表示贊同或否定。這種模式與我們之前在導(dǎo)航模式中討論的滑動視圖不同。此處，滑動操作被當(dāng)做一種操作，而非純粹瀏覽。有些應(yīng)用結(jié)合了這兩種滑動模式，例如Carousel，滑到一邊可以瀏覽大量照片，同時上滑或下滑操作可以分享或隱藏。Mailbox使左右滑動操作在郵件客戶端中發(fā)揚光大，通過相應(yīng)的左滑和右滑操作，你可以將郵件分別標記為已讀或稍后處理。在Secret中，發(fā)現(xiàn)新操作與探索新菜單的方式相同。在一條秘密上左滑表示喜歡。
LinkedIn, Facebook
問題
用戶想知道新動態(tài)或操作，他們要瞄一眼
解決方案
在視覺上通過高亮來標記新內(nèi)容。這種模式有很多方式。例如，iOS引領(lǐng)的帶數(shù)字的小紅點，如今很多其他應(yīng)用中也能看到，例如LinkedIn、Facebook或Quora。Twitter也這樣處理通知按鈕，不過在時間軸圖標上方也有個小點，用一種更微妙的方式來表示新動態(tài)。另一種表現(xiàn)通知的方式，是在應(yīng)用中滑出一條banner來顯示新動態(tài)。Facebook應(yīng)用也這么做了，當(dāng)信息流中有新項目時顯示一個小彈出提示。
Secret
問題
用戶要在應(yīng)用中快速激活次要控件，還有那些只與特定區(qū)域或內(nèi)容相關(guān)的控件。
解決方案
清理雜亂，讓用戶只在需要時發(fā)現(xiàn)特定操作。這些隱形的控件可以通過各種手勢來觸發(fā)——滑動、點按、雙擊、長按等等。（這些我們在手勢模式中討論過）。這讓你可以將這些東西置于屏幕外，節(jié)省寶貴的屏幕空間。以Secret為例，就使用手勢代替了可見的控件。右滑觸發(fā)操作菜單，這是我們之前提過的抽屜的極簡版。創(chuàng)建內(nèi)容時，用戶可以水平滑動或在背景上垂直滑動來改變顏色與模式，如果用了圖片，還能改變亮度、飽和度與模糊度。沒有其他控件來控制這些——也不應(yīng)該有。這種UI設(shè)計模式如此直觀和干凈，你一定會看到更多此類交互。Pinterest也使用手勢來代替按鈕的應(yīng)用。長按圖片會顯示采集或評論按鈕，拖動彈出控件到按鈕上執(zhí)行。
Uber是這種設(shè)計模式的又一個案例。選擇座駕類型后，通過點按滑動按鈕，Uber會在預(yù)訂座駕和費用估算間切換。這是簡單卻重要的UI設(shè)計模式，我每次試著呼叫座駕，又不想被Uber的溢價剝削時，都會為此會心一笑。Snapchat和Facebook Messenger中，在任何朋友上左滑，都能及時觸發(fā)相應(yīng)功能。
YouTube
問題
用戶想專注于內(nèi)容，不愿為了控件犧牲屏幕空間。
解決方案
將控件設(shè)計成點按展開式的。這能在用戶不需要時隱藏多數(shù)控件。例如YouTube和Facebook把搜索欄藏在一個圖標里面，用戶點按時搜索欄才展開，節(jié)省了屏幕空間。
Gmail, Chrome
問題
用戶希望沒有阻礙地快速操作（比如對話框），但要有還原意外操作的選項。
解決方案
提供一個簡便的方法讓用戶撤銷操作，不要在操作前提醒他們確認。有些由于意外或匆忙而產(chǎn)生的操作，會導(dǎo)致不便或數(shù)據(jù)損失，例如刪除郵件或編輯文字。用戶可能在不知道結(jié)果的情況下會完成一項操作，寬容的UI會讓他們嘗試，這更加友好有吸引力。撤銷功能對高級用戶也很有用，他們會贊賞這種操控感。UI不會在操作過程中反復(fù)阻攔他們，詢問是否確定。確認對話框用來解釋當(dāng)前狀況時很有用，但用戶真正看見操作結(jié)果后才能理解其中含義。為避免如此，最好去掉它們，并提供一種彌補錯誤的防護措施。
追蹤有用戶輸入的地方，看他們是否注意到那些輸入框，是否經(jīng)常使用輸入控件，他們從應(yīng)用中的什么界面進入，將要前往哪里（也就是使用流程）等等。持續(xù)改變排列、順序、尺寸，調(diào)整這些控件，讓用戶更多執(zhí)行你希望的操作。當(dāng)然，還要深入考慮，用戶在輸入時是如何在使用你的移動應(yīng)用——確保設(shè)計應(yīng)用時沒有忽略明顯的要點。
藍藍設(shè)計的小編 http://www.teruid.com