我們每天都要和大量的表單交互刑棵，表單設(shè)計(jì)的好壞直接影響著我們使用產(chǎn)品的直觀感受声登，同時(shí)表單設(shè)計(jì)的好壞還會(huì)影響公司產(chǎn)品的轉(zhuǎn)化率格遭，公司的利益等等哈街。好的表單設(shè)計(jì)，能夠讓用戶在愉快的操作中完成各種任務(wù)拒迅，而不好的表單設(shè)計(jì)則會(huì)讓用戶產(chǎn)生嚴(yán)重的挫敗感骚秦，最終導(dǎo)致用戶流量丟失的問(wèn)題。與此同時(shí)璧微，表單設(shè)計(jì)也常常被交互設(shè)計(jì)師所忽略作箍，很多設(shè)計(jì)師都沒(méi)有系統(tǒng)的研究過(guò)表單，設(shè)計(jì)表單的時(shí)候全憑“感覺(jué)”前硫。本文將從表單設(shè)計(jì)的概念胞得、原則、元素三個(gè)大的方面來(lái)闡述表單設(shè)計(jì)屹电，希望閱讀完本文后可以對(duì)表單設(shè)計(jì)有個(gè)基本的認(rèn)知阶剑。
（文末附本文內(nèi)容結(jié)構(gòu)）
一.什么是表單
剛剛前文提到，我們每天都會(huì)和大量的表單產(chǎn)生交互危号，那么什么是表單呢牧愁？舉例來(lái)講，日常手機(jī)應(yīng)用的登陸注冊(cè)頁(yè)面是一種表單外莲，淘寶里的購(gòu)物車(chē)的結(jié)算頁(yè)面是一種表單递宅，在線填寫(xiě)的調(diào)查問(wèn)卷也屬于表單。生活中的表單可謂是無(wú)處不在苍狰。正因?yàn)楸韱稳绱说钠毡榘炝洌运闹匾栽诮换ピO(shè)計(jì)中也變得舉足輕重。表單從根本上來(lái)講淋昭，是為了讓用戶可以輕松順利的完成一些任務(wù)俐填，友好的登陸注冊(cè)頁(yè)面，會(huì)提高產(chǎn)品的注冊(cè)率翔忽，復(fù)雜的注冊(cè)頁(yè)面則會(huì)讓用戶望而卻步英融。
二.表單的元素
通過(guò)前文的闡述盏檐，相信你已經(jīng)對(duì)表單有了一個(gè)基本的認(rèn)知，接下來(lái)我們來(lái)系統(tǒng)的認(rèn)識(shí)一下表單驶悟。
表單通常來(lái)講由三個(gè)主要元素構(gòu)成胡野，分別是：標(biāo)簽、輸入框和動(dòng)作痕鳍。除此之外呢硫豆，表單中還可以包含幫助文字、交互反饋等元素笼呆。標(biāo)簽負(fù)責(zé)向用戶提出問(wèn)題熊响，輸入框則是提供給用戶回答問(wèn)題，而動(dòng)作則是幫助用戶提交問(wèn)題诗赌。首先我們來(lái)介紹標(biāo)簽汗茄。
標(biāo)簽
標(biāo)簽主要負(fù)責(zé)向用戶提問(wèn)題，就像登陸頁(yè)面里的“用戶名铭若、密碼”一樣洪碳。好的標(biāo)簽首先在內(nèi)容上就要盡可能的簡(jiǎn)潔明了，最好用幾個(gè)字符就可以闡述清楚你要問(wèn)的問(wèn)題叼屠，切記不要用口語(yǔ)化的表達(dá)方式作為標(biāo)簽瞳腌，比如“你的名字是什么啊，你的密碼是什么啊”环鲤，這樣看上去很人性化的文字實(shí)際上是很愚蠢的。標(biāo)簽的內(nèi)容固然重要憎兽，我在這里最想闡述的還是標(biāo)簽的對(duì)其方式冷离。細(xì)心的同學(xué)在日常填寫(xiě)表單的時(shí)候可能會(huì)注意到，表單的標(biāo)簽會(huì)有幾種對(duì)齊方式纯命，比如頂對(duì)齊西剥、左對(duì)齊和右對(duì)齊。這三種對(duì)齊方式各有利弊亿汞，適用于不同的場(chǎng)景瞭空。
頂對(duì)齊：頂對(duì)齊是三種對(duì)齊方式中，對(duì)減少用戶填寫(xiě)表單的時(shí)間貢獻(xiàn)最大的疗我。因?yàn)轫攲?duì)齊的方式咆畏，給用戶提供了一條清晰的瀏覽線，用戶只需要自上而下自然瀏覽填寫(xiě)就好吴裤。據(jù)數(shù)據(jù)統(tǒng)計(jì)旧找，頂對(duì)齊標(biāo)簽的設(shè)計(jì)形式可以讓用戶更快的識(shí)別信息。但與此同時(shí)麦牺，頂對(duì)齊標(biāo)簽的形式也會(huì)導(dǎo)致垂直空間的浪費(fèi)钮蛛。
左對(duì)齊：左對(duì)齊標(biāo)簽的形式可以很大程度上減少頂對(duì)齊豎空間浪費(fèi)的情況，同時(shí)魏颓，由于人們的瀏覽習(xí)慣是由左向右岭辣，因此左對(duì)齊的方式也更利于人們?yōu)g覽標(biāo)簽。所以甸饱，當(dāng)你的設(shè)計(jì)中沦童，標(biāo)簽內(nèi)容是需要用戶認(rèn)真瀏覽或者用戶不熟悉的情況下，使用左對(duì)齊標(biāo)簽的形式更利于你的設(shè)計(jì)柜候。但是左對(duì)齊也會(huì)導(dǎo)致標(biāo)簽右側(cè)不對(duì)齊搞动，標(biāo)簽和相關(guān)輸入框之間的間距增大，這樣也會(huì)降低表單整體的可讀性渣刷，延長(zhǎng)用戶完成時(shí)間鹦肿。
右對(duì)齊：右對(duì)齊標(biāo)簽的設(shè)計(jì)形式辅柴，同樣可以減少豎空間浪費(fèi)的情況箩溃。由于采用右對(duì)齊的方式，這樣和右側(cè)輸入框之間的關(guān)聯(lián)情況就會(huì)大大提升碌嘀，用戶可以很容找到標(biāo)簽對(duì)應(yīng)的輸入框位置涣旨。但同樣也會(huì)導(dǎo)致標(biāo)簽左側(cè)不齊，導(dǎo)致可讀性降低股冗，延長(zhǎng)用戶完成填寫(xiě)表單的時(shí)間霹陡。
輸入框內(nèi)標(biāo)簽：輸入框內(nèi)標(biāo)簽也是常用的一種標(biāo)簽形式止状，但是這種形式存在一定的特殊性烹棉，鼠標(biāo)光標(biāo)定位后，輸入框內(nèi)的標(biāo)簽就要消失怯疤。這樣的形式可以很大程度上減少空間的浪費(fèi)浆洗，減少表單完成后的信息量。但是當(dāng)用戶填寫(xiě)完表單后集峦，所有的標(biāo)簽都不在了伏社，這對(duì)于用戶想要檢查表單填寫(xiě)的準(zhǔn)確性就會(huì)造成一定的困難。
在這里摘昌，我簡(jiǎn)單介紹了四種標(biāo)簽存在方式。每種形式都有其優(yōu)點(diǎn)和缺點(diǎn)高蜂，我們?cè)谶x擇具體設(shè)計(jì)樣式時(shí)要整體考慮場(chǎng)景第焰，信息量等問(wèn)題，綜合考慮妨马。
輸入框
輸入框是用戶和表單之間交互的主要陣地挺举，輸入框的形式除了文本輸入框還有很多種形式杀赢。包括單選框、復(fù)選框湘纵、下拉列表脂崔、日期面板等等都屬于輸入框的范疇。
設(shè)計(jì)師在設(shè)計(jì)輸入框時(shí)梧喷，應(yīng)該注意以下幾點(diǎn)：
1.提供輸入框內(nèi)容限制砌左，避免用戶輸入錯(cuò)誤信息。舉例來(lái)講铺敌，設(shè)計(jì)購(gòu)票平臺(tái)時(shí)汇歹，購(gòu)票數(shù)量輸入框系統(tǒng)初始狀態(tài)下就不允許用戶輸入負(fù)數(shù)或小數(shù)，這樣在一定程度上會(huì)避免用戶提交錯(cuò)誤信息偿凭，導(dǎo)致系統(tǒng)性能下降等等产弹。
2.輸入框的長(zhǎng)度實(shí)際上是對(duì)用戶輸入內(nèi)容的一種暗示。因此當(dāng)用戶提交的信息字符很短時(shí)就不要將輸入框設(shè)計(jì)的過(guò)長(zhǎng)弯囊。當(dāng)輸入框的長(zhǎng)度不符合用戶預(yù)期時(shí)痰哨，會(huì)讓用戶思考是否輸入錯(cuò)誤，不讓用戶思考是我們?cè)谠O(shè)計(jì)方案時(shí)候的一項(xiàng)準(zhǔn)則匾嘱。
3.設(shè)計(jì)標(biāo)簽和輸入框時(shí)斤斧，可以考慮運(yùn)用柵格系統(tǒng)。
動(dòng)作
在表單設(shè)計(jì)中霎烙，可以將動(dòng)作劃分為主動(dòng)作和次動(dòng)作兩種撬讽。主動(dòng)作主要是指對(duì)用戶行為起正向推動(dòng)作用的，如確定悬垃、完成游昼、下一步等。而次動(dòng)作則與主動(dòng)作相反盗忱，主要對(duì)用戶行為起反向作用的酱床，如取消羊赵，上一步等趟佃。
在設(shè)計(jì)表單設(shè)計(jì)的動(dòng)作時(shí)，應(yīng)該注意以下幾點(diǎn)：
1.通過(guò)視覺(jué)差異來(lái)區(qū)分主動(dòng)作和次動(dòng)作昧捷，主動(dòng)作一般主要起推動(dòng)作用闲昭，因此在設(shè)計(jì)過(guò)程中，可以適度弱化次動(dòng)作的視覺(jué)效果靡挥，引導(dǎo)用戶去點(diǎn)擊主動(dòng)作序矩，推動(dòng)用戶完成表單。
2.當(dāng)設(shè)計(jì)次動(dòng)作時(shí)跋破，可以為其設(shè)計(jì)撤銷(xiāo)路徑簸淀。當(dāng)用戶填寫(xiě)完一篇表單內(nèi)容后瓶蝴，不小心點(diǎn)擊了上一步，所有填寫(xiě)的內(nèi)容都消失了租幕，對(duì)于用戶來(lái)說(shuō)舷手，這是非常不好的使用體驗(yàn)。
3.用戶進(jìn)行主動(dòng)作或次動(dòng)作操作時(shí)劲绪，系統(tǒng)應(yīng)當(dāng)及時(shí)給予用戶視覺(jué)反饋男窟，及時(shí)告訴用戶，他的點(diǎn)擊造成了什么影響贾富，帶來(lái)了哪些變動(dòng)歉眷，讓用戶在使用產(chǎn)品的過(guò)程中有一種計(jì)劃安排之內(nèi)可控的感覺(jué)。
幫助文字
幫助文字是用戶使用產(chǎn)品遇到困難時(shí)颤枪，能夠最先找到解決方法的途徑汗捡。因此就要求，幫助文字的出現(xiàn)要及時(shí)且不會(huì)對(duì)用戶操作本身帶來(lái)干擾汇鞭。
1.什么時(shí)候用戶需要幫助文字：人們不熟悉表單要填入什么數(shù)據(jù)凉唐、人們質(zhì)疑為何要填入特定數(shù)據(jù)、系統(tǒng)推薦數(shù)據(jù)填寫(xiě)方式霍骄、用戶不知道怎么去解決遇到的問(wèn)題台囱。
2.幫助文字，提示信息盡量使用用戶語(yǔ)言读整，不要使用用戶看不懂得語(yǔ)言簿训，因?yàn)榭床欢谜Z(yǔ)言只會(huì)讓用戶更加焦躁，把你的用戶想象成一個(gè)技術(shù)小白米间，去告訴他解決方法强品。
3.不要將產(chǎn)品的可用性寄托在幫助文字上，幫助文字越多屈糊，只能說(shuō)明你設(shè)計(jì)的產(chǎn)品可用性低的榛，無(wú)法讓用戶在不看幫助文字的基礎(chǔ)上完成任務(wù)。我們?cè)O(shè)計(jì)的最終目標(biāo)都要讓用戶在不看幫助文字的情況下都可以完成操作任務(wù)逻锐。
4.幫助文字的出現(xiàn)一定是用戶需要的時(shí)候再出現(xiàn)夫晌，最后可以讓用戶主動(dòng)觸發(fā)，不要到處彈幫助文字昧诱。
錯(cuò)誤與成功
錯(cuò)誤與成功信息的提示晓淀，是用戶使用產(chǎn)品完成任務(wù)時(shí)可以看到的最終反饋。在設(shè)計(jì)方案時(shí)盏档，不要吝嗇成功信息的反饋凶掰，成功信息就好像在鼓勵(lì)用戶說(shuō)“你完成了任務(wù)，真棒”而錯(cuò)誤信息反饋就像在說(shuō)“你太笨了，這都沒(méi)完成”懦窘。試想如果你作為用戶前翎，你最想看到哪種信息反饋呢？
當(dāng)然也不要害怕錯(cuò)誤信息的設(shè)計(jì)畅涂，有效的錯(cuò)誤信息可以幫助用戶解決遇到的問(wèn)題鱼填。
1.通過(guò)視覺(jué)強(qiáng)化，及時(shí)定位錯(cuò)誤原因毅戈，告訴用戶哪里出現(xiàn)了問(wèn)題苹丸。
2.及時(shí)提供高效的解決方案，當(dāng)然在提供解決方案時(shí)苇经，要求也是要運(yùn)用用戶語(yǔ)言赘理，不要使用用戶看不懂的語(yǔ)言。
3.產(chǎn)品中扇单，錯(cuò)誤信息的提示要保證一致性商模，不要出現(xiàn)錯(cuò)誤信息不統(tǒng)一的狀態(tài)，那樣只會(huì)讓用戶感到更加糊涂蜘澜。
4.用戶修改完錯(cuò)誤信息后施流，要及時(shí)反饋用戶修改完成并提示成功信息。
表單設(shè)計(jì)設(shè)計(jì)是一個(gè)系統(tǒng)工程鄙信，在這里推薦《Web表單設(shè)計(jì)-點(diǎn)石成金的藝術(shù)》這本書(shū)瞪醋。
好的表單設(shè)計(jì)，就好像是一副美麗的畫(huà)卷装诡，給人以賞心悅目的感受银受。以上提到的一些內(nèi)容，都是作為設(shè)計(jì)師在設(shè)計(jì)表單時(shí)應(yīng)該考慮到的問(wèn)題鸦采。隨著我們對(duì)交互研究的不斷深入宾巍，設(shè)計(jì)一個(gè)體驗(yàn)好的表單已經(jīng)不再是什么難事，也很難再遇到體驗(yàn)很差的表單設(shè)計(jì)渔伯。表單設(shè)計(jì)以小見(jiàn)大顶霞，把表單的體驗(yàn)設(shè)計(jì)好就可以反推到我們整個(gè)產(chǎn)品設(shè)計(jì)。本文中提到的一些內(nèi)容锣吼，希望可以給各位一些幫助选浑，哪怕只是讀完，感嘆一句“哦吐限，這些點(diǎn)我在設(shè)計(jì)中已經(jīng)注意到了”我覺(jué)得寫(xiě)這篇文章也是有價(jià)值的鲜侥。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 交互學(xué)習(xí)褂始，我一直在路上诸典。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 與君共勉。
