表單的作用

• 對(duì)于商業(yè)網(wǎng)站，支付信息表單是不可回避的問(wèn)題。
• 對(duì)于生產(chǎn)力網(wǎng)站，表單有利于內(nèi)容的創(chuàng)建和管理。

表單是什么？是用戶和網(wǎng)站之間的對(duì)話。設(shè)計(jì)表單如同設(shè)計(jì)一個(gè)產(chǎn)品，取決于你的理念是從產(chǎn)品目標(biāo)還是用戶目標(biāo)出發(fā)。從產(chǎn)品目標(biāo)出發(fā)，網(wǎng)站要盡可能多地獲取用戶信息（恨不得生辰八字扒出來(lái)算個(gè)星盤根據(jù)走勢(shì)推薦產(chǎn)品）；然而用戶和你又不熟，就像你去水果店老板說(shuō)不告訴我你電話就不賣你水果，我肯定翻個(gè)白眼就走了。

因此在設(shè)計(jì)表單的時(shí)候，首先要反思產(chǎn)品核心價(jià)值，刪減你的表單；其次，如果確實(shí)需要這個(gè)信息，用友好的方式告訴用戶為什么并說(shuō)服他。比如上面那個(gè)水果店老板，可以和用戶說(shuō)我們這邊逢年過(guò)節(jié)有優(yōu)惠活動(dòng)，如果你留下電話，有活動(dòng)的時(shí)候我會(huì)第一時(shí)間通知您。我們還提供送貨上門服務(wù)，如果您留下地址，當(dāng)然更方便了。如果您告訴我們生日，我們?cè)谀盏臅r(shí)候會(huì)送出驚喜小禮物哦。加一句，這些信息我們不會(huì)透露給別人的。

最后再補(bǔ)一句，先賣完水果再說(shuō)這些，即提交主任務(wù)流程表單后再兜售你的其他增值服務(wù)，讓用戶專注完成一件任務(wù)。

設(shè)計(jì)原則

• 專注當(dāng)下任務(wù)

如前所述，讓用戶專注于一件任務(wù)。表單填寫是一件負(fù)擔(dān)很重的事，因此在填寫表單的時(shí)候盡可能去除不必要的干擾。要推廣告，比如淘寶的相關(guān)購(gòu)買推薦也是在付款結(jié)束的完成頁(yè)面出現(xiàn)的。

為了截個(gè)圖下單我也是蠻拼的

• 步驟化

當(dāng)表單所需信息較多或者所填信息有前后依賴性時(shí)，合理地拆分步驟重新組織內(nèi)容會(huì)減輕用戶填寫的心理壓力并專注于當(dāng)下表單，與之相對(duì)應(yīng)的是需要設(shè)計(jì)清晰的引導(dǎo)線讓用戶明白自己目前所處的步驟。（下圖中“Next”和"Previous"按鈕分別是一級(jí)動(dòng)作和二級(jí)動(dòng)作，設(shè)計(jì)者在設(shè)計(jì)時(shí)做了明顯的區(qū)分引導(dǎo)，下文中會(huì)提及。）

步驟化表單

Uber也利用了步驟化原則，在填寫信用卡信息流程中，先填寫完卡號(hào)，將卡片狀態(tài)切換到填寫過(guò)期時(shí)間和CVV碼，不僅拆分了步驟，并且在一個(gè)輸入框下就完成了整體的輸入。

Uber一個(gè)輸入框填寫信用卡信息.gif

• 清晰的瀏覽線

清晰的瀏覽線

凌亂的瀏覽線

• 情感化
  情感化是增加用戶體驗(yàn)，形成口碑傳播的好方法。表單設(shè)計(jì)中比較容易植入情感化設(shè)計(jì)的，一個(gè)是標(biāo)簽命名的口語(yǔ)化（比如“姓名”，可以換成口語(yǔ)化的，“你可以稱呼我”；另外，也有表單設(shè)計(jì)成填空式的，我叫___，來(lái)自_，一張表單就是一道填充題），另一個(gè)是輸入時(shí)的交互反饋。

  Readme.io的貓頭鷹會(huì)在輸入密碼的時(shí)候遮住眼睛，是不是超萌！

Readme.io蒙眼貓頭鷹

表單元素

標(biāo)簽

根據(jù)馬泰奧·彭佐的2006年的標(biāo)簽對(duì)齊眼動(dòng)實(shí)驗(yàn)，頂對(duì)齊標(biāo)簽移動(dòng)到輸入框需要50毫秒，右對(duì)齊標(biāo)簽需要240毫秒，而左對(duì)齊標(biāo)簽則需要500毫秒。頂對(duì)齊標(biāo)簽的效率是左對(duì)齊標(biāo)簽的10倍之多（當(dāng)然，英文單詞長(zhǎng)短相差太多對(duì)左對(duì)齊標(biāo)簽造成了重傷，中文方塊字標(biāo)簽字?jǐn)?shù)差異不大情況下，左對(duì)齊約等于右對(duì)齊，兼顧兩者之優(yōu)點(diǎn)）。理論效率上，頂對(duì)齊>右對(duì)齊>左對(duì)齊，選擇使用哪一種標(biāo)簽視情況而定。

• 頂對(duì)齊

優(yōu)點(diǎn)：和輸入框聯(lián)系最緊密，效率最高
缺點(diǎn)：增加了垂直空間

頂對(duì)齊標(biāo)簽

• 右對(duì)齊

優(yōu)點(diǎn)：和輸入框聯(lián)系緊密，減少垂直空間占用
缺點(diǎn)：標(biāo)簽可讀性不強(qiáng)

右對(duì)齊標(biāo)簽

• 左對(duì)齊

優(yōu)點(diǎn)：標(biāo)簽可讀性強(qiáng)，減少垂直空間占用

缺點(diǎn)：和輸入框聯(lián)系不緊密

左對(duì)齊標(biāo)簽

• 輸入框內(nèi)標(biāo)簽

優(yōu)點(diǎn)：與輸入框聯(lián)系緊密，同時(shí)減少空間占用

缺點(diǎn)：填寫完畢標(biāo)簽就消失了，復(fù)核表單信息較困難

用途：輸入較少量信息時(shí)可使用（可以輔助圖標(biāo)提示標(biāo)簽信息，如下圖）

輸入框內(nèi)標(biāo)簽-圖標(biāo)輔助

• 靈活運(yùn)用的標(biāo)簽

下面這個(gè)例子就靈活運(yùn)用了輸入框內(nèi)標(biāo)簽和頂標(biāo)簽，在輸入前用輸入框內(nèi)標(biāo)簽占大字符顯示，輸入后變?yōu)樾∽址捻敇?biāo)簽，兼具了提示性，同時(shí)頂標(biāo)簽的顏色提示了當(dāng)前輸入框，經(jīng)過(guò)思考的良心作品！

輸入框內(nèi)標(biāo)簽+頂標(biāo)簽

輸入框

輸入方式

常規(guī)輸入方式有：文字框（text field）、下拉框（dropdown list）、單選框（radio button）、復(fù)選框（checkbox）。

衍生的輸入方式有：滑塊（range slider）、(加減）微調(diào)鈕、開關(guān)鈕（toggle switch）、Tab選框、搜索框等。

表格輸入

效率上，自動(dòng)填充 > 選擇填充 > 自由填充。

輸入值的限制對(duì)表單填寫很重要，是選擇填充優(yōu)于自由填充的要點(diǎn)，也方便了后臺(tái)數(shù)據(jù)管理。下拉框就限定了用戶可輸入的值域，另外，日歷選擇器時(shí)間選擇器（data picker）理論上也是下拉框的衍生品。合理地設(shè)計(jì)“限制”條件來(lái)引導(dǎo)用戶是表單設(shè)計(jì)的一門藝術(shù)。

表單“限制”設(shè)計(jì)的藝術(shù)：日歷與時(shí)間選擇

預(yù)填充

預(yù)填充如字面義是判斷用戶意圖預(yù)先為其填充表單，例如電商中填充用戶默認(rèn)地址，登錄前填充用戶上次用戶名等。Apple Store在再次購(gòu)買時(shí)，同一Apple ID下會(huì)默認(rèn)填充好和上一次相同的信息，如若修改，則可選擇設(shè)置默認(rèn)值。

預(yù)填充設(shè)計(jì)時(shí)可以考慮：默認(rèn)值、可選值、常用值、歷史值、上次填充值等。

反饋

即時(shí)的反饋可以幫助用戶更好地填寫表單而不至于在提交時(shí)出錯(cuò)影響體驗(yàn)，同時(shí)，反饋?zhàn)鳛橐环N交互方式，可以玩出各種花樣，讓你的表單更個(gè)性化。

將注冊(cè)按鈕、出錯(cuò)提示、完成狀態(tài)提醒設(shè)計(jì)合一多態(tài)按鈕，簡(jiǎn)潔實(shí)用。

按鈕、提示、狀態(tài) 合一

小技巧

• 下拉框 vs Tab框（橫向選擇框）

  現(xiàn)在，下拉框有了更好的選擇方式，只要9塊9！就是TAB框，TAB框好處顯而易見，首先，將選項(xiàng)都外露方便選擇，其次只要點(diǎn)一次。下拉框在點(diǎn)選下拉之后才能看到選項(xiàng)，進(jìn)行搜索定位和選擇，點(diǎn)擊兩次。如果選項(xiàng)多的話，下拉框會(huì)更省空間。只有兩個(gè)選項(xiàng)的話就可以做成各種Switch，例如開關(guān)以及切換排序等。

下拉框&TAB框

• 批量操作

  批量操作有個(gè)神器叫做同上。新建一溜兒表格，每個(gè)下拉框選項(xiàng)都叫同上，在禪道上看到的，特別合適批量新建有連續(xù)性的表格。

• 可供性（Affordance）

  可供性指的是實(shí)物表現(xiàn)出來(lái)的其提供行為的可能，比如輸入框的長(zhǎng)度可以暗示所填信息的長(zhǎng)度，比如如果填寫地址的輸入框比填寫郵編的輸入框短，用戶心理一定會(huì)產(chǎn)生疙瘩懷疑自己是否看錯(cuò)或者填錯(cuò)了。另一個(gè)常見的例子是在年月填寫中的MM/YYYY，暗示了填寫方式。

動(dòng)作

提交、保存、下一步、取消等稱為表單的動(dòng)作。一般將動(dòng)作分為主動(dòng)作（Primary Action）和次動(dòng)作（Secondary Action）。例如，步驟中“上一步”相對(duì)于“下一步”是主動(dòng)作，因?yàn)槲覀兿Ｍ蝿?wù)能往下繼續(xù)流?！疤峤弧毕鄬?duì)于“取消”是主動(dòng)作。

在視覺上，可以通過(guò)差異化的設(shè)計(jì)來(lái)區(qū)分主動(dòng)作與次動(dòng)作，引導(dǎo)用戶完成任務(wù)流。

主動(dòng)作與次動(dòng)作

小結(jié)

最近重新改版設(shè)計(jì)了一個(gè)幾乎都是表單的工具，故此先搜集整理資料并做此歸納。表單設(shè)計(jì)在注冊(cè)登錄頁(yè)面和電商購(gòu)買頁(yè)中涉及得較多，留個(gè)作業(yè)，重新設(shè)計(jì)1號(hào)店的注冊(cè)登錄頁(yè)，歡迎留言或者郵件交流。

一些思路：1. 考慮首次購(gòu)買，是否必須注冊(cè)登錄 2. 注冊(cè)和登錄必須分開嗎 3. 必填的信息有哪些，其他可選信息如何說(shuō)服用戶填寫 4. 是否需要用戶一次填完所有信息，如果不是，可以在用戶旅程的哪些觸點(diǎn)引導(dǎo)他們填寫

最后，平安夜快樂~

參考：

《WEB表單設(shè)計(jì)——點(diǎn)石成金的藝術(shù)》

《表單設(shè)計(jì)的思考》

《大家都做表，為什么他們贏了》