網頁 UI 設計模型 — 輸入框
今天這篇文章談設計模型的第一個 — 輸入框。只要是網站肯定會涉及到輸入框，搜索、登錄等等，都會需要。設計好輸入框，是贏得用戶的第一步。以下是整理的十一種輸入框。
一：填空型表單（Mad Libs Forms）
填空型表單在國內外都很罕見，Luke Wroblewski（前雅虎設計師）在他的博客中提到：2010 年 "http://Vast.com" 通過 A/B testing 發現，這種樣式的表單將轉化率提高了 25% - 40%。它看起來更加的輕鬆，也很有個性。但是，沒有被普遍採用，還是有原因的：輸入區域要麼太模糊要麼太空洞。不過，我們還是可以參考下 OKCupid（約會社交類網站）是如何使用的：通過下拉選擇性別和性取向，用戶不需要花太多時間思考該填什麼，簡短的「I am a...」文字，增強了用戶的參與感。
要點：
1.輸入區域帶有下劃線；
2.使用第一人稱進行敘述；3.由於這種方式會帶來很多額外的信息負擔，所以建議填空不超過 5 個。如果需要用戶填很多信息，建議採取傳統方式。二：輸入提示（Input Hints）
輸入提示的作用是告訴用戶輸入正確類型的信息。HTML5 讓在輸入框添加文本佔位符變得簡單了。並且，提示能夠以滑鼠懸停時彈出的形式存在。
要點：
1.在可能的情況下，盡量自動獲得用戶信息（如通過地理追蹤，自動獲取用戶位置），但是應允許用戶修改：
2.如果可輸入的類型不止一種，提示需要列出多個例子，如 yelp：
3.用戶輸入時，提示自動消失；
4.提示文字應當簡潔並簡短，否則會增加認知負擔；三：撤銷（Undo）
「撤銷」操作能夠鼓勵用戶積極探索，「撤銷」選項也會減少用戶「確認」操作。與將用戶的操作牢牢鎖死相比，「撤銷」操作能夠釋放用戶，讓用戶盡情探索。最有名的例子即是「Gmail」：用戶進行重要操作後，會有「撤銷」提示浮出。如果用戶操作正確，可以忽略並進行下一步操作，一段時間後撤銷提示會自動消失。
要點：
1.撤銷提示不需要太明顯，一段時間後自動消失。對於重要的操作，不建議採用這種方式，而是在操作完成前進行確認。例如，將 Gmail 中的郵件移動到另一個文件夾後可以出現「撤銷」，但是如果要刪除通訊錄中的聯繫人則需要先確認；
2.記住「撤銷」功能的目標是讓用戶流暢的完成任務，因此應把握撤銷出現的時機，不能分散用戶完成任務的注意力。
四：默認值和自動填充（Default Values & Autocomplete）
通過預測用戶輸入，自動填充能減少輸入時間和難度，需要隨著用戶的輸入不斷提高精準度。82%的電商網站都在使用這項技術。Google 搜索在 2008 年運用了這項技術，並且一直是這個領域的領頭羊。由於很多用戶都會不止一次搜索同一個內容，通過積累搜索歷史，達到了節省用戶時間的目的。Twitter 在此基礎上更進一步，輸入特定名字後直接顯示到主頁的鏈接，還會顯示相似的用戶。
要點：
1.輸入信息和建議信息要有明顯區分（如輸入文字以粗體顯示，提示文字正常樣式）；
2.鍵盤導航：允許用戶通過「ESC 鍵」退出建議列表；3.建議信息最多 10 條，不要出現滾動條；4.如果用戶輸入信息和提示信息匹配，提示信息自動跳到列表最上方。五：行內檢驗（Inline Validation）
行內及時檢驗能夠避免因單項的輸入錯誤，而全部重新輸入。讓用戶儘早知道輸入的數據是否正確，並且無論正確與否都需要給出相應反饋。
http://OKCupid.com
要點：
1.強烈建議表格較長或者數據較複雜時使用；
2.建議能夠提供實時內嵌反饋（例如「郵箱格式不正確」等），這樣可以節約用戶時間。簡書在這裡做的似乎不夠好：
3.在這裡也可以用來展示品牌特性，可以讓錯誤提示帶上情感色彩，但是要確保文字簡單清晰易懂。
4.錯誤提示用紅色或黃色展示，考慮文字顏色和提示顏色的搭配時，需要考慮到色盲用戶。六：聯繫表單（Contact Forms）
將比較傳統的地址、電話、郵箱反饋形式，網頁表單更具有交互性。設計出發點是鼓勵用戶反饋，並且交互讓反饋變得容易。
要點：
1.告知用戶反饋內容會在24小時內被閱讀，避免用戶感覺反饋信息無人理睬；
2.可以參考 Awwwards整理的25個聯繫表單：25 Impressive Contact forms七：鍵盤快捷鍵（Keyboard Shortcuts）
資深用戶非常喜歡用快捷鍵，因此可以用這種方式建立熟悉感，讓用戶專註於任務流。不要試圖去改變常用的快捷方式，例如通用的 Copy 和 Paste，在此基礎上你可以創建自己的快捷鍵，如 Dropbox。
要點：
1.對於重複性很強的動作來說，快捷方式非常有用；
2.盡量使用國際通用的快捷鍵，不要試圖去改變那些常用的快捷鍵；3.考慮到有些用戶會有定製化需求，允許用戶自行定製快捷鍵。
八：可擴展的輸入（Expandable Inputs）
正常情況下， 可擴展的輸入框是被隱藏的，在搜索欄經常使用。同樣適用於輸入框需要輸入很多文字，可以依據輸入的文字來擴展輸入框大小，對社交媒體類網站非常適用。如上圖 Twitter 發 post 的輸入框，而新浪微博並沒有考慮到這一點：
要點：
1.對於核心功能，不要使用可擴展的輸入，它只是可選的；
2.處於節省更多空間來考慮，可以在行內添加輸入提示。九：第三方登錄（Social Login）
第三方登錄能夠簡化用戶登錄程序，國外通常使用「Facebook」、「Twitter」、「Google」，而國內通常是「微信」、「QQ」和「新浪微博」。如果只能選擇一個，國外一定是 Facebook，而國內一定是微信。
要點：
1.並不是每個人都使用社交媒體，因此還需要提供傳統的註冊方式；
2.提供的社交登錄選項應放在明顯的位置，這樣可以保證用戶不會在填寫註冊信息後，才意識到有其他選項；3.雖然社交登錄極其便利，但是有些用戶會擔心個人信息被濫用。因此告知用戶不會在未經同意的情況下使用用戶信息非常重要，而這類信息通常出現在第二步（「確認」的下一步）。第三方通常也會在授權頁顯示相關信息。
十：分段式表單（Stepped Forms）
當涉及到大量的數據輸入，如購物或其他特定服務時，需要考慮將整個流程分解為多個步驟展現，有時候上一步的操作會影響下一步數據。
多步驟表格同樣適用於管理和教程類網站，這種網站通常無法一步完成。對於這種類型的網站，在起步時僅獲取需要的內容，例如僅在涉及到購買的時候提供家庭地址和銀行卡號。
航空網站經常看到這種模型。預定機票比購物需要更多的信息，而所有的信息在一個頁面呈現會對用戶產生困擾。航空公司依據用戶的選擇定製下一步的內容：
要點：
1.顯示完整的步驟，讓用戶知道完成全部信息填寫預計需要多長時間；
2.即使用分步驟策略，輸入大量信息對用戶來說也是相當大的負擔，消除任何不需要的流程，將步驟縮減到最少；3.如果你的表格需要至少五步，可以考慮增加一個「剩餘步驟」來顯示還有多少步。十一：完成指數/進度條（Completeness Meters /Progress Bar）
用文字告知用戶每一步相應的內容，完成指數通常在以下四個領域用到：
教程
填寫個人資料信息表單電商訂單操作除了以上領域，機票預定網站也經常用到。完成指數的顯示方式不需要一樣，可以用數字也可以用進度條：
要點：
1.在填寫用戶資料時，這種方法能鼓勵用戶填寫更詳細的資料；
2.如果用分步表示，告訴用戶總共多少步，現在進行到第幾步（如「1/5」）；
3.如果步數太多，試著再向上總結整體步驟。例如，Amazon 下訂單總體只有四步（註冊，運輸和付款，禮物選項，生成訂單）。然而，「運輸和付款」其實包含了三到四個小步驟，這種簡化格式讓下訂單看起來更易操作。
推薦閱讀：
※產品推廣規劃【職場教育產品訓練其五】
※產品經理，有節操你就輸了！
※用產品觀分析《人人都是產品經理》
※十年老產品經理教你管理需求池