起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識360°全方位表單設(shè)計(jì)指南（一）
編輯導(dǎo)語：表單填寫是目前人機(jī)交互最重要的方式?jīng)]有之一，優(yōu)秀的表單設(shè)計(jì)對產(chǎn)品的體驗(yàn)提升至關(guān)重要。表單該怎么布局？表單的組成元素有哪些？表單有什么交互規(guī)范？超長表單該怎么設(shè)計(jì)？等等常見問題；本篇文章作者分享了自己理解和經(jīng)驗(yàn)，希望能幫到你們。
最初接觸表單的時(shí)候目光所及都是標(biāo)簽有沒有對齊、輸入框的位置是不是合理、該有的提示夠不夠友好，再后來研究的深一點(diǎn)會(huì)思考標(biāo)簽的不同對齊方式有什么區(qū)別。
但是關(guān)注點(diǎn)總歸是離不開表單本身的幾個(gè)組成元素，以至于每次做表單優(yōu)化效果總是差強(qiáng)人意卻又不知道問題出在哪里。
PS：水平有限，而且踩了很多前輩的肩膀，表單設(shè)計(jì)大神請繞道。
好像一提到做表單就是指的把一些不同類型的輸入框排排版、標(biāo)清楚必填非必填、哪些表單比較復(fù)雜適當(dāng)?shù)募觽€(gè)說明就完了。
其實(shí)表單設(shè)計(jì)遠(yuǎn)遠(yuǎn)不止這些，表單本身也是一個(gè)小產(chǎn)品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產(chǎn)生到表單在頁面上如何呈現(xiàn)，再到使用表單時(shí)與表單之間的交互，每一步都需要投入大量的思考來做好表單。
其實(shí)做好表單并不難，但是如果思考問題的方向不對（產(chǎn)品思維不及格）加上相關(guān)的設(shè)計(jì)知識掌握的不夠全面，就很容易在遇到問題時(shí)不知從何下手。
為了不讓自己的慘淡過往不在大家身上重演，也為了給自己的學(xué)習(xí)經(jīng)驗(yàn)做一個(gè)總結(jié)，特意寫了本文；因?yàn)橄雽懙娜嬉稽c(diǎn)就構(gòu)思成了一個(gè)小系列，一共三篇文章，希望對大家有所幫助！
本系列文章從表單的出生（選取表單）開始一直到表單的死亡（提交結(jié)束）分別從三個(gè)方面給大家全方位的講解一下如何設(shè)計(jì)一個(gè)優(yōu)秀的表單。
因?yàn)閮?nèi)容比較多，本系列文章分三篇文章分別介紹以下三個(gè)方面的內(nèi)容：
- 表單的選取與組織
- 表單的元素設(shè)計(jì)
- 如何與表單交互
本文介紹第一個(gè)方面：表單的選取與組織
一、表單的選取與組織
表單的選取與組織是表單產(chǎn)生的第一個(gè)過程，任何表單都需要先選定展示的問題然后將選定的問題合理的呈現(xiàn)在頁面上；我們將這個(gè)過程分成兩個(gè)小節(jié)來講解：表單的選取、表單的組織。
1. 表單的選取
表單的選取是指一張表單中應(yīng)該包含哪些問題，我們需要遵循的原則是：
- 非必須收集的信息最好不收集，即：用戶可看到的問題越少越好。
- 必須收集的信息，如果可以延遲收集則延遲收集。
- 平衡好用戶和產(chǎn)品的利益。
1）非必須收集的信息最好不收集，即：用戶可看到的問題越少越好。
每個(gè)用戶都必須填寫表單但是每個(gè)用戶都不想填寫表單，因?yàn)樘顚懕韱尾皇怯脩舻哪康模脩糁詴?huì)填寫表單唯一的原因是不填寫表單無法往下進(jìn)行。
試想一下你購物時(shí)需要填寫收貨地址、你登錄微信前需要先注冊賬號、你報(bào)名雅思時(shí)需要先填寫個(gè)人信息，但是這些是你的目的嗎？
并不是，只是因?yàn)椴惶顚懯肇浀刂纺憔褪詹坏缴唐?、不注冊你就登錄不了微信、不填寫個(gè)人信息你就無法完成報(bào)考；所以從需求的角度，填寫表單并不是用戶的需求，而是產(chǎn)品的需求；實(shí)際上填寫表單的過程特別是填寫長表單是阻礙了用戶使用產(chǎn)品的流暢度，拉低了用戶體驗(yàn)。
所以，表單的選取階段最重要的就是盡量精簡表單，能不提問的問題堅(jiān)決不向用戶提問，比如：當(dāng)你要求用戶填寫一張雅思報(bào)名表時(shí)，大可不必要求用戶填寫家庭住址，除非你需要向用戶寄送紙質(zhì)成績單。
多余的問題不僅僅會(huì)增加用戶的完成成本，經(jīng)常還會(huì)激起用戶的戒備心理。
2）必須收集的信息，如果可以延遲收集則延遲收集。
如果有些信息是產(chǎn)品需要的但是并不是填寫表單當(dāng)時(shí)必須的可以考慮延后填寫，即：調(diào)整一下采集信息的時(shí)機(jī)，將本來繁重的表單填寫任務(wù)拆成幾個(gè)簡單的、隨時(shí)可進(jìn)行的小任務(wù)；比如電商網(wǎng)站的收貨地址大都不會(huì)在用戶注冊賬號時(shí)就要求填寫，而是在用戶購買商品時(shí)要求補(bǔ)充，就是一個(gè)很好的例子。
3）平衡好用戶和產(chǎn)品的利益。
最后，表單選取與組織階段最難處理但是非常重要的一點(diǎn)就是一定要平衡好用戶和產(chǎn)品的利益，填寫表單時(shí)用戶的需求與產(chǎn)品的需求總是矛盾的。
用戶希望盡量少填寫表單以盡快往下進(jìn)行，產(chǎn)品迫于不得不采集（比如想寄送商品給用戶就必須收集地址信息）或者更長遠(yuǎn)的戰(zhàn)略考慮總是希望多收集一些用戶的信息，但是過多的采集信息就損壞了用戶的利益。
這里沒有一成不變的規(guī)則可以參考，只能根據(jù)不同的情況做不同的處理，大家可以參考以下幾個(gè)建議隨機(jī)應(yīng)變：
- 試圖需要用戶承受的底線，兩個(gè)比較好的辦法是選取真實(shí)用戶做易用性測試和數(shù)據(jù)埋點(diǎn)。
- 將產(chǎn)品對用戶信息收集的需求用其他方式解決，比如大數(shù)據(jù)分析。
- 采取適當(dāng)?shù)募?lì)手段鼓勵(lì)用戶提供更多的信息，比如完善信息獲取金幣、參與抽獎(jiǎng)等等。
- 學(xué)好本次的三篇系列文章，用設(shè)計(jì)降低用戶填寫表單的成本。
2. 表單的組織
表單的組織是指將已經(jīng)選定的問題如何呈現(xiàn)在頁面上，以什么樣的方式展示給用戶。
我們需要遵循的原則是：
- 表單命名符合場景。
- 長表單考慮分組或分頁。
- 排版布局不打斷掃描視線。
- 減少干擾。
- 組織頁面時(shí)考慮Tab鍵跳轉(zhuǎn)。
- 運(yùn)用情感化設(shè)計(jì)。
1）表單命名符合場景。
表單的名稱是用來告訴用戶本次填寫的主題的，可以讓用戶在填表之初建立起對接下來要填寫內(nèi)容的心理預(yù)期也有助于填寫表單時(shí)理解表單的內(nèi)容。
所以選取一個(gè)符合本次表單填寫場景的表單名稱至關(guān)重要，一個(gè)“牛頭不對馬首“的標(biāo)題很可能誤導(dǎo)用戶或者增加用戶的疑惑。
舉個(gè)例子：
一個(gè)貨運(yùn)司機(jī)要接單，在接單前需要先完善一張個(gè)人貨運(yùn)資質(zhì)信息的表單，試想一下點(diǎn)擊“接單”后進(jìn)入的頁面頂部寫著“個(gè)人信息填寫”跟寫著“貨運(yùn)資質(zhì)填寫”哪個(gè)更容易讓人理解？
前者很容易讓人產(chǎn)生疑惑（特別是新人），我接單為什么要填寫我的私人信息？會(huì)不會(huì)導(dǎo)致信息泄露？
相反，后者就很容易讓人能理解：我接的是運(yùn)輸?shù)馁I賣，自然需要我的運(yùn)輸資質(zhì)。
2）長表單考慮分組或分頁
當(dāng)表單過多時(shí)，簡單的堆疊排列容易讓用戶產(chǎn)生疲勞感從而放棄填表；這個(gè)時(shí)候我們可以適當(dāng)?shù)母鶕?jù)表單的類型將表單分組展示，這樣能很好的緩解用戶的視覺壓力，讓用戶填寫表單時(shí)更加輕松舒適。
當(dāng)所有表單涉及到的主題都是相同時(shí)使用分組的方式是一個(gè)比較好的選擇，比如：姓名、身份證號、性別、民族、政治面貌、手機(jī)號、QQ號碼、郵箱、家庭地址、工作單位。
這幾個(gè)我們可以把“姓名、身份證號、性別、民族、政治面貌”分為一組命名為“身份信息”、“手機(jī)號、QQ號碼、郵箱、家庭地址、工作單位”分為一組命名為“聯(lián)系信息”；雖然分成了兩個(gè)組單他們都屬于用戶的個(gè)人基本信息，這種情況就適用于分組來處理。
但是如果需要填寫的表單涉及到了不同的主題，可以考慮采用分頁的方式。
比如姓名、身份證號、性別、民族、政治面貌、手機(jī)號、QQ號碼、郵箱、家庭地址、工作單位、駕駛證類型、貨車型號、貨運(yùn)年齡、有誤事故記錄。
上述信息中“姓名、身份證號、性別、民族、政治面貌、手機(jī)號、QQ號碼、郵箱、家庭地址、工作單位”屬于個(gè)人基本信息；“駕駛證類型、貨車型號、貨運(yùn)年齡、有誤事故記錄”屬于資質(zhì)信息；我們大可以將兩類信息分成兩個(gè)頁面展示，讓用戶采用分步的方式逐漸完成填表。
3）排版布局不打斷掃描視線
掃描視線是指的用戶瀏覽表單時(shí)的視線流，清晰、線性的視線流更有助于用戶可以迅速對問題作出答復(fù)，用戶的思維在不同的表單之間轉(zhuǎn)換時(shí)花費(fèi)時(shí)間也最少。
所以盡可能的在排版布局時(shí)將表單布置在一條比較清晰的的視線流中，對比下方左右兩種布局方式，很明顯右側(cè)的布局更易于閱讀。
4）減少干擾
用戶填寫表單的過程是一個(gè)任務(wù)過程，越是簡潔明了的界面風(fēng)格越有利于提高用戶填寫的效率。
很多時(shí)候處于提高界面的視覺效果，一些設(shè)計(jì)師喜歡使用一些復(fù)雜的樣式或圖案或動(dòng)畫，這些在其他頁面的設(shè)計(jì)上無疑是有益的；但是這種思考并不適用于表單填寫頁面，多余的視覺干擾容易打斷填寫表單的思路從而降低填寫效率，甚至當(dāng)用戶因?yàn)闆]有必要的干擾阻斷了填寫思路時(shí)會(huì)產(chǎn)生反感并放棄填寫。
但是并不是說表單填寫頁面不能使用復(fù)雜樣式或一些炫酷的顏色，畢竟我們需要靠這些來區(qū)分、組織表單的不同分組或者不同主題；所以請?jiān)谀苡行У膮^(qū)分、組織頁面的前提下，盡可能減少更多的復(fù)雜元素的出現(xiàn)。
5）組織頁面時(shí)考慮Tab鍵跳轉(zhuǎn)
PC端的網(wǎng)頁，用戶更多的是使用鍵盤與表單進(jìn)行交互，這就涉及到了鼠標(biāo)光標(biāo)在不同輸入框之間進(jìn)行切換時(shí)常用到的Tab鍵，這是很多人都有的操作習(xí)慣所以我們必須重視。
Tab鍵的影響主要是視線的跳轉(zhuǎn)，當(dāng)有兩欄內(nèi)容時(shí)，當(dāng)光標(biāo)定位到第一欄最后一個(gè)表單時(shí)，Tab鍵切換之后光標(biāo)會(huì)繼續(xù)往下走還是會(huì)切換到第二欄的第一個(gè)表單呢？
沒有一個(gè)好的頁面引導(dǎo)的話很容易讓用戶產(chǎn)生困惑（可能用戶以為切換到了同一列的下一個(gè)表單，結(jié)果輸入時(shí)發(fā)現(xiàn)內(nèi)容出現(xiàn)在了第二欄的第一個(gè)表單）。
另外還會(huì)出現(xiàn)表單過長時(shí)有可能Tab鍵切換之后光標(biāo)已經(jīng)切換到了頁面下方的表單，但是由于一屏展示不下，激活的表單是隱藏在頁面下方的，就會(huì)導(dǎo)致出現(xiàn)用戶不知道光標(biāo)跑到了哪里的尷尬。
所以在設(shè)計(jì)時(shí)盡可能讓表單能在主流分辨率顯示器的同一屏出現(xiàn)，在光標(biāo)切換到屏幕之外的表單時(shí)可以使用錨點(diǎn)定位自動(dòng)將視線切換到相應(yīng)的表單位置。
6）運(yùn)用情感化設(shè)計(jì)
情感化設(shè)計(jì)是指的在頁面中采用能引起人類感情共鳴的元素，以此來增加填寫表單時(shí)的趣味性或減少用戶面對大量表單時(shí)的焦慮，情感化設(shè)計(jì)可以遍布在表單設(shè)計(jì)的每一個(gè)階段。
比如在命名表單時(shí)可以適當(dāng)?shù)牟捎脠D片背景來營造與表單主題相符的氛圍；收集地理位置信息時(shí)，將“國家”更換為“您來自哪個(gè)國家？”
以這樣的方式將生硬的表單填寫構(gòu)建成一次用戶與計(jì)算機(jī)的對話；分頁設(shè)計(jì)時(shí)，不同頁面切換時(shí)適當(dāng)?shù)牟捎脛?dòng)效來增加趣味性等等。
二、結(jié)語
到此，360°全方位表單設(shè)計(jì)指南的第一篇文章就結(jié)束了，感謝大家抽出時(shí)間來閱讀這篇文章，也希望對大家能有所幫助。
下篇文章我將會(huì)為大家講解表單設(shè)計(jì)的第二個(gè)方面：表單的元素設(shè)計(jì)——表單的元素設(shè)計(jì)時(shí)表單設(shè)計(jì)的核心部分，也是大家最關(guān)注的部分，同時(shí)還是學(xué)習(xí)效果最容易立桿見影的部分，有感興趣的同學(xué)可以關(guān)注一下！
進(jìn)階提問：情感化設(shè)計(jì)時(shí)將表單的標(biāo)簽名稱用問句替換詞語，不是增加了標(biāo)簽的復(fù)雜程度，加大了閱讀成本嗎？
作為一個(gè)自認(rèn)為填了很多表的“偽表單老司機(jī)”，我將自己學(xué)到的一些理解和經(jīng)驗(yàn)分享給大家，希望同為產(chǎn)品人我們能一同進(jìn)步、成長！
歡迎感興趣的朋友在評論區(qū)討論！
公眾號：pmreport
本文由 @時(shí)光時(shí)光慢些吧 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
學(xué)到了