今天這篇文章談設(shè)計(jì)模型的第一個 — 輸入框。只要是網(wǎng)站肯定會涉及到輸入框蛙奖，搜索潘酗、登錄等等，都會需要雁仲。設(shè)計(jì)好輸入框仔夺，是贏得用戶的第一步。以下是整理的十一種輸入框攒砖。
一：填空型表單（Mad Libs Forms）
填空型表單在國內(nèi)外都很罕見缸兔，Luke Wroblewski（前雅虎設(shè)計(jì)師）在他的博客中提到：2010 年 "Vast.com" 通過 A/B testing 發(fā)現(xiàn)日裙，這種樣式的表單將轉(zhuǎn)化率提高了 25% - 40%。它看起來更加的輕松惰蜜，也很有個性昂拂。但是，沒有被普遍采用抛猖，還是有原因的：輸入?yún)^(qū)域要么太模糊要么太空洞格侯。不過，我們還是可以參考下 OKCupid（約會社交類網(wǎng)站）是如何使用的：通過下拉選擇性別和性取向财著，用戶不需要花太多時(shí)間思考該填什么联四，簡短的“I am a...”文字，增強(qiáng)了用戶的參與感撑教。
要點(diǎn)：
1.輸入?yún)^(qū)域帶有下劃線朝墩；
2.使用第一人稱進(jìn)行敘述；
3.由于這種方式會帶來很多額外的信息負(fù)擔(dān)伟姐，所以建議填空不超過 5 個收苏。如果需要用戶填很多信息，建議采取傳統(tǒng)方式玫镐。
二：輸入提示（Input Hints）
輸入提示的作用是告訴用戶輸入正確類型的信息倒戏。HTML5 讓在輸入框添加文本占位符變得簡單了。并且恐似，提示能夠以鼠標(biāo)懸停時(shí)彈出的形式存在杜跷。
要點(diǎn)：
1.在可能的情況下，盡量自動獲得用戶信息（如通過地理追蹤矫夷，自動獲取用戶位置）葛闷，但是應(yīng)允許用戶修改：
2.如果可輸入的類型不止一種，提示需要列出多個例子双藕，如 yelp：
3.用戶輸入時(shí)淑趾，提示自動消失；
4.提示文字應(yīng)當(dāng)簡潔并簡短忧陪，否則會增加認(rèn)知負(fù)擔(dān)扣泊；
三：撤銷（Undo）
“撤銷”操作能夠鼓勵用戶積極探索，“撤銷”選項(xiàng)也會減少用戶“確認(rèn)”操作嘶摊。與將用戶的操作牢牢鎖死相比延蟹，“撤銷”操作能夠釋放用戶，讓用戶盡情探索叶堆。最有名的例子即是“Gmail”：用戶進(jìn)行重要操作后阱飘，會有“撤銷”提示浮出。如果用戶操作正確，可以忽略并進(jìn)行下一步操作沥匈，一段時(shí)間后撤銷提示會自動消失蔗喂。
要點(diǎn)：
1.撤銷提示不需要太明顯，一段時(shí)間后自動消失高帖。對于重要的操作缰儿，不建議采用這種方式，而是在操作完成前進(jìn)行確認(rèn)棋恼。例如返弹，將 Gmail 中的郵件移動到另一個文件夾后可以出現(xiàn)“撤銷”，但是如果要刪除通訊錄中的聯(lián)系人則需要先確認(rèn)爪飘；
2.記住“撤銷”功能的目標(biāo)是讓用戶流暢的完成任務(wù)义起，因此應(yīng)把握撤銷出現(xiàn)的時(shí)機(jī)，不能分散用戶完成任務(wù)的注意力师崎。
四：默認(rèn)值和自動填充（Default Values & Autocomplete）
通過預(yù)測用戶輸入默终，自動填充能減少輸入時(shí)間和難度，需要隨著用戶的輸入不斷提高精準(zhǔn)度犁罩。82%的電商網(wǎng)站都在使用這項(xiàng)技術(shù)齐蔽。Google 搜索在 2008 年運(yùn)用了這項(xiàng)技術(shù)，并且一直是這個領(lǐng)域的領(lǐng)頭羊床估。由于很多用戶都會不止一次搜索同一個內(nèi)容含滴，通過積累搜索歷史，達(dá)到了節(jié)省用戶時(shí)間的目的丐巫。Twitter 在此基礎(chǔ)上更進(jìn)一步谈况，輸入特定名字后直接顯示到主頁的鏈接，還會顯示相似的用戶递胧。
要點(diǎn)：
1.輸入信息和建議信息要有明顯區(qū)分（如輸入文字以粗體顯示碑韵，提示文字正常樣式）；
2.鍵盤導(dǎo)航：允許用戶通過“ESC 鍵”退出建議列表缎脾；
3.建議信息最多 10 條祝闻，不要出現(xiàn)滾動條；
4.如果用戶輸入信息和提示信息匹配遗菠，提示信息自動跳到列表最上方联喘。
五：行內(nèi)檢驗(yàn)（Inline Validation）
行內(nèi)及時(shí)檢驗(yàn)?zāi)軌虮苊庖騿雾?xiàng)的輸入錯誤，而全部重新輸入辙纬。讓用戶盡早知道輸入的數(shù)據(jù)是否正確耸袜，并且無論正確與否都需要給出相應(yīng)反饋。
要點(diǎn)：
1.強(qiáng)烈建議表格較長或者數(shù)據(jù)較復(fù)雜時(shí)使用牲平；
2.建議能夠提供實(shí)時(shí)內(nèi)嵌反饋（例如“郵箱格式不正確”等），這樣可以節(jié)約用戶時(shí)間域滥。簡書在這里做的似乎不夠好：
3.在這里也可以用來展示品牌特性纵柿，可以讓錯誤提示帶上情感色彩蜈抓，但是要確保文字簡單清晰易懂。
4.錯誤提示用紅色或黃色展示昂儒，考慮文字顏色和提示顏色的搭配時(shí)沟使，需要考慮到色盲用戶。
六：聯(lián)系表單（Contact Forms）
將比較傳統(tǒng)的地址渊跋、電話腊嗡、郵箱反饋形式，網(wǎng)頁表單更具有交互性拾酝。設(shè)計(jì)出發(fā)點(diǎn)是鼓勵用戶反饋燕少，并且交互讓反饋?zhàn)兊萌菀住?/p>
要點(diǎn)：
1.告知用戶反饋內(nèi)容會在24小時(shí)內(nèi)被閱讀，避免用戶感覺反饋信息無人理睬蒿囤；
2.可以參考 Awwwards整理的25個聯(lián)系表單：http://www.awwwards.com/25-impressive-contact-forms.html
七：鍵盤快捷鍵（Keyboard Shortcuts）
資深用戶非常喜歡用快捷鍵客们，因此可以用這種方式建立熟悉感，讓用戶專注于任務(wù)流材诽。不要試圖去改變常用的快捷方式底挫，例如通用的 Copy 和 Paste，在此基礎(chǔ)上你可以創(chuàng)建自己的快捷鍵脸侥，如 Dropbox建邓。
要點(diǎn)：
1.對于重復(fù)性很強(qiáng)的動作來說，快捷方式非常有用睁枕；
2.盡量使用國際通用的快捷鍵官边，不要試圖去改變那些常用的快捷鍵；
3.考慮到有些用戶會有定制化需求譬重，允許用戶自行定制快捷鍵拒逮。
八：可擴(kuò)展的輸入（Expandable Inputs）
正常情況下， 可擴(kuò)展的輸入框是被隱藏的臀规，在搜索欄經(jīng)常使用滩援。同樣適用于輸入框需要輸入很多文字，可以依據(jù)輸入的文字來擴(kuò)展輸入框大小塔嬉，對社交媒體類網(wǎng)站非常適用玩徊。如上圖 Twitter 發(fā) post 的輸入框，而新浪微博并沒有考慮到這一點(diǎn)：
要點(diǎn)：
1.對于核心功能谨究，不要使用可擴(kuò)展的輸入恩袱，它只是可選的；
2.處于節(jié)省更多空間來考慮胶哲，可以在行內(nèi)添加輸入提示畔塔。
九：第三方登錄（Social Login）
第三方登錄能夠簡化用戶登錄程序，國外通常使用“Facebook”、“Twitter”澈吨、“Google”把敢，而國內(nèi)通常是“微信”、“QQ”和“新浪微博”谅辣。如果只能選擇一個修赞，國外一定是 Facebook，而國內(nèi)一定是微信桑阶。
要點(diǎn)：
1.并不是每個人都使用社交媒體柏副，因此還需要提供傳統(tǒng)的注冊方式；
2.提供的社交登錄選項(xiàng)應(yīng)放在明顯的位置蚣录，這樣可以保證用戶不會在填寫注冊信息后割择，才意識到有其他選項(xiàng)；
3.雖然社交登錄極其便利包归，但是有些用戶會擔(dān)心個人信息被濫用锨推。因此告知用戶不會在未經(jīng)同意的情況下使用用戶信息非常重要，而這類信息通常出現(xiàn)在第二步（“確認(rèn)”的下一步）公壤。第三方通常也會在授權(quán)頁顯示相關(guān)信息换可。
十：分段式表單（Stepped Forms）
當(dāng)涉及到大量的數(shù)據(jù)輸入，如購物或其他特定服務(wù)時(shí)厦幅，需要考慮將整個流程分解為多個步驟展現(xiàn)沾鳄，有時(shí)候上一步的操作會影響下一步數(shù)據(jù)。
多步驟表格同樣適用于管理和教程類網(wǎng)站确憨，這種網(wǎng)站通常無法一步完成译荞。對于這種類型的網(wǎng)站，在起步時(shí)僅獲取需要的內(nèi)容休弃，例如僅在涉及到購買的時(shí)候提供家庭地址和銀行卡號吞歼。
航空網(wǎng)站經(jīng)常看到這種模型塔猾。預(yù)定機(jī)票比購物需要更多的信息篙骡，而所有的信息在一個頁面呈現(xiàn)會對用戶產(chǎn)生困擾。航空公司依據(jù)用戶的選擇定制下一步的內(nèi)容：
要點(diǎn)：
1.顯示完整的步驟丈甸，讓用戶知道完成全部信息填寫預(yù)計(jì)需要多長時(shí)間糯俗；
2.即使用分步驟策略，輸入大量信息對用戶來說也是相當(dāng)大的負(fù)擔(dān)睦擂，消除任何不需要的流程得湘，將步驟縮減到最少；
3.如果你的表格需要至少五步顿仇，可以考慮增加一個“剩余步驟”來顯示還有多少步淘正。
十一：完成指數(shù)/進(jìn)度條（Completeness Meters /Progress Bar）
用文字告知用戶每一步相應(yīng)的內(nèi)容摆马，完成指數(shù)通常在以下四個領(lǐng)域用到：
教程
填寫個人資料
信息表單
電商訂單操作
除了以上領(lǐng)域，機(jī)票預(yù)定網(wǎng)站也經(jīng)常用到鸿吆。完成指數(shù)的顯示方式不需要一樣今膊，可以用數(shù)字也可以用進(jìn)度條：
要點(diǎn)：
1.在填寫用戶資料時(shí)，這種方法能鼓勵用戶填寫更詳細(xì)的資料伞剑；
2.如果用分步表示，告訴用戶總共多少步市埋，現(xiàn)在進(jìn)行到第幾步（如“1/5”）黎泣；
3.如果步數(shù)太多，試著再向上總結(jié)整體步驟缤谎。例如抒倚，Amazon 下訂單總體只有四步（注冊，運(yùn)輸和付款坷澡，禮物選項(xiàng)托呕，生成訂單）。然而频敛，“運(yùn)輸和付款”其實(shí)包含了三到四個小步驟项郊，這種簡化格式讓下訂單看起來更易操作。
