現(xiàn)在老板對(duì)注冊(cè)量抓的很緊，當(dāng)注冊(cè)里的表單設(shè)計(jì)的太過(guò)繁瑣或缺乏人情味，會(huì)直接讓訪(fǎng)客不想和你交朋友，哪怕是留虛假信息。

我只想說(shuō)，網(wǎng)頁(yè)中的快速填表功能非常重要。而國(guó)情卻是很多網(wǎng)站沒(méi)有快速注冊(cè)表單。
千萬(wàn)不要覺(jué)得注冊(cè)只是開(kāi)發(fā)者的工作，這也需要設(shè)計(jì)師的積極參與，設(shè)計(jì)可以極大的提高可用性。

相關(guān)閱讀：
表單設(shè)計(jì)的就應(yīng)該就像個(gè)溫柔有禮貌的服務(wù)生
向左走、向右走？表單元素設(shè)計(jì)大揭密

優(yōu)秀的填表設(shè)計(jì)，能夠清楚的讓用戶(hù)明白：我輸入的東西準(zhǔn)確無(wú)誤的填寫(xiě)到輸入域了、我填寫(xiě)的注冊(cè)信息正在處理中。作為設(shè)計(jì)師，我們的任務(wù)便是：讓用戶(hù)看到清晰、保證用戶(hù)輸入的過(guò)程中是愉悅的。在細(xì)節(jié)方面，那些錯(cuò)誤提示，以及填寫(xiě)時(shí)的友情貼士都帶有足夠的人情味！

指示幫助

有的時(shí)候用戶(hù)對(duì)表單很厭煩，我們大可以在設(shè)計(jì)的形式上給用戶(hù)帶來(lái)新穎的視覺(jué)沖擊。這可不是無(wú)關(guān)痛癢的小問(wèn)題，這關(guān)系到用戶(hù)體驗(yàn)，表單填寫(xiě)作為用戶(hù)交互中的第一環(huán)，體驗(yàn)一定要優(yōu)秀。
為了給予用戶(hù)提示，應(yīng)該在表單域下方或者附近添加幫助性文本，這叫做Microcopy(縮微文本)

排列與對(duì)齊

我們也可以通過(guò)設(shè)計(jì)控制用戶(hù)填表速度。
我們可以通過(guò)標(biāo)簽排列和輸入域的對(duì)齊來(lái)提高用戶(hù)填表速度。
整齊有序的表格可以提高用戶(hù)掃描速度，提高表格可用性。

如果需要用戶(hù)精確的填寫(xiě)信息，那么可以至上而下的堆疊標(biāo)簽/輸入域，這樣就能減緩用戶(hù)填寫(xiě)表格的速度。
但是這種方法需要不斷的測(cè)試來(lái)提高可用性。
花上幾分鐘，思考一下，你的網(wǎng)站需要快速填表還是精確填表？用戶(hù)對(duì)你設(shè)計(jì)的表格會(huì)有什么樣的感受？用戶(hù)會(huì)怎樣填表？

現(xiàn)在我們來(lái)看看5個(gè)優(yōu)秀的填表設(shè)計(jì)案例

01. Squarespace

Squarespace博客平臺(tái)的做法很值得借鑒。

節(jié)省了空間，提高了填表速度：將各個(gè)填表域的標(biāo)題置于其中。

02. Desk

Desk的方法也很適合快速填表，同樣的標(biāo)題內(nèi)置，但是彈出窗口設(shè)計(jì)的很棒，能夠起到視覺(jué)焦點(diǎn)的作用，讓用戶(hù)更專(zhuān)注于填寫(xiě)信息。

03. Basecamp

Basecamp是項(xiàng)目管理工具，簡(jiǎn)單設(shè)計(jì)，易于理解，箭頭這一視覺(jué)符號(hào)非常傳神。

04. Virb

Virb的注冊(cè)表格是個(gè)優(yōu)秀的范例，展示了如何利用設(shè)計(jì)以及縮微文本，讓填表看起來(lái)便捷簡(jiǎn)約。

05. Weightshift

Weightshift的填表也很不錯(cuò)。
字體清晰，排列有序，看起來(lái)異常整齊，而且在輸入時(shí)，周?chē)鷷?huì)出現(xiàn)黃色高亮，以避免用戶(hù)因分心而出錯(cuò)。

綜合以上，5大要素：

1、節(jié)約用地：空間不足時(shí)，表單域的標(biāo)題可內(nèi)置于表單域；

2、雷厲風(fēng)行：彈出層不要有太緩慢的動(dòng)效，不要刻意炫技；

3、人情味：多多利用視覺(jué)符號(hào)及可愛(ài)的人物來(lái)指引用戶(hù)，那些小貼士和提醒不要總是用醒目的叉子和紅色字體。提示語(yǔ)可以溫馨賣(mài)萌會(huì)比冷冰冰的文字好百倍；

4、有序排列：字段和輸入框最好柵格化對(duì)其，并且用戶(hù)的輸入路徑在一條豎線(xiàn)上！這是適合所有快速填表設(shè)計(jì)的殺手锏；

5、高亮填表：如何避免用戶(hù)分心，高亮填表設(shè)計(jì)是個(gè)不錯(cuò)的思路；

原文地址：http://www.creativebloq.com/web-design/five-killer-ways-use-fast-forms-10134938
優(yōu)設(shè)網(wǎng)翻譯:@MartinRGB
轉(zhuǎn)摘請(qǐng)注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座：每月邀請(qǐng)國(guó)內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語(yǔ)音（YY頻道：156982）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量56萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：