表單是用戶和數(shù)據(jù)庫之間的橋梁，好的表單的設(shè)計(jì)會極大地增加用的滿意度。本篇筆者就什么是表單設(shè)計(jì)和表單設(shè)計(jì)需要注意的相關(guān)問題進(jìn)行分析總結(jié)，與大家分享。

本文開始前先問一個問題，為什么總結(jié)這些內(nèi)容？

我認(rèn)為一個好的產(chǎn)品想要在這個方向深耕，必須要有有自己的一套理論和工作習(xí)慣，并隨著自己的不斷地深入學(xué)習(xí)，把自己的理論體系不斷地完善和迭代，同時筆者認(rèn)為方法論的總結(jié)是對自己近期學(xué)習(xí)成果的一個復(fù)盤，能把我們的知識結(jié)構(gòu)歸攏整合。

其實(shí)筆者近期一直在學(xué)習(xí)和總結(jié)一些關(guān)于產(chǎn)品的知識點(diǎn)，只不過比較零散，不好歸攏在一起，所以近期一直沒有和大家分享。

大家都知道一旦入了產(chǎn)品的坑，就意味著自己持續(xù)學(xué)習(xí)的腳步就不可能松懈，因?yàn)楫a(chǎn)品這個方向不但要求知識體系的深度，也要有廣度，還要跟緊互聯(lián)網(wǎng)如此快速發(fā)展的腳步。

筆者是一個入行不久的“產(chǎn)品狗”，自己關(guān)于行業(yè)的認(rèn)知、自身知識體系的建設(shè)明顯還有很大的不足，目前還沒有能力對行業(yè)、或者某一個單一的產(chǎn)品進(jìn)行分析，所以筆者認(rèn)為自己現(xiàn)在首要的任務(wù)是不斷地豐富自己的知識庫、夯實(shí)自己的基礎(chǔ)，才能把“自己這個產(chǎn)品”持續(xù)的更新迭代。

以上是對我近期的一個小總結(jié)，希望能引發(fā)讀者尤其是產(chǎn)品新人有些啟發(fā)能加強(qiáng)對自身知識體系的規(guī)劃。

這里再聊一聊方法論的作用：建立自己的知識體系，能更好的記住設(shè)計(jì)中的要點(diǎn)，不會遺漏重要的內(nèi)容。

下面讓我們來一起討論一下本文的主題——表單的設(shè)計(jì)。

首先我們先從基礎(chǔ)入手，了解什么是表單，表單是用戶和數(shù)據(jù)庫之間的橋梁，好的表單的設(shè)計(jì)會極大地增加用戶滿意度。想想我們在使用產(chǎn)品的過程中，很多時候是因?yàn)樘顚懶畔⑻爆崳o我們帶來的極不好的使用體驗(yàn)，從而放棄了對該產(chǎn)品的使用。

表單的設(shè)計(jì)屬于產(chǎn)品設(shè)計(jì)中最基礎(chǔ)的內(nèi)容，但想把表單設(shè)計(jì)好可不那么容易的事情；表單在設(shè)計(jì)之前要明確自己的表單的應(yīng)用場景。

一、表單的應(yīng)用場景

應(yīng)用場景一：數(shù)據(jù)錄入

比如賬號注冊個人信息的填寫、新增內(nèi)容，對應(yīng)的是產(chǎn)品設(shè)計(jì)“增刪改查顯算傳異”（上一篇文章有總結(jié)《產(chǎn)品功能設(shè)計(jì)丨產(chǎn)品功能設(shè)計(jì)的套路總結(jié)》）中的增項(xiàng)

應(yīng)用場景二：校驗(yàn)數(shù)據(jù)

比如賬號登錄，輸入賬號密碼，因?yàn)樵O(shè)計(jì)數(shù)據(jù)庫賬號密碼的比對，所以登錄頁表單的設(shè)計(jì)屬于數(shù)據(jù)的校驗(yàn)

應(yīng)用場景三：展示數(shù)據(jù)

比如信息臺賬的展示，是數(shù)據(jù)庫的信息通過表單向用戶展示信息內(nèi)容。

下面以較為復(fù)雜的數(shù)據(jù)錄入表單為例，整體來看表單設(shè)計(jì)遵循“三結(jié)構(gòu)、四元素”的設(shè)計(jì)套路

二、表單設(shè)計(jì)——三結(jié)構(gòu)

合理的結(jié)構(gòu)能夠極大的提升用戶的使用體驗(yàn)，比如如果表單的字段過多可對表單分組進(jìn)行排布，如果存在邏輯關(guān)系可分頁進(jìn)行填寫，從而不讓用戶感到焦慮。

結(jié)構(gòu)一：結(jié)構(gòu)類型

• 單列
• 多列

單列的表單結(jié)構(gòu)用戶在填寫時自上而下填寫，在視覺上更清晰，能更好的引導(dǎo)用戶按照產(chǎn)品設(shè)計(jì)的邏輯逐步填寫信息。

多列的表單結(jié)構(gòu)讓用戶以橫向和縱向交錯的查看填寫字段，會降低用戶的理解速度，可能會造成用戶偏離產(chǎn)品設(shè)計(jì)預(yù)期的信息線，造成填寫邏輯錯誤或漏填信息。

綜上，在表單結(jié)構(gòu)類型的選擇中，最好盡量選擇單列的結(jié)構(gòu)類型，給用戶更好的視覺體驗(yàn)。

結(jié)構(gòu)二：順序

以什么順序進(jìn)行排列更符合用戶的習(xí)慣，例如在賬號注冊時，總是先填寫昵稱、手機(jī)號、再填寫驗(yàn)證碼，用戶熟悉的填寫喜歡，我們應(yīng)該按照這個習(xí)慣去設(shè)計(jì)，而不是去向新的方案。

結(jié)構(gòu)三：分組

對表單進(jìn)行歸類展示，更有條理，這樣用戶的體驗(yàn)會好很多，讓用戶在完一組后有可休息調(diào)整的時間，降低用戶的心理壓力，不然密密麻麻的一大片，自己看著都頭痛。

三、表單設(shè)計(jì)——四元素

元素即表單中詳細(xì)涵蓋的內(nèi)容，在這里筆者把元素總結(jié)為四個大類，標(biāo)簽、表單域、提示信息、操作按鈕

元素一：標(biāo)簽

（1）左標(biāo)簽

目前比較常見的一種標(biāo)簽樣式，但左標(biāo)簽也有其缺點(diǎn)，比如所占的橫向空間比較大，尤其是在移動端產(chǎn)品的設(shè)計(jì)時左標(biāo)簽還分為左對齊和右對齊，左對齊有利于用戶對標(biāo)簽的查看，能清楚表單頁整體都要填寫什么信息，但因其距離表單域稍遠(yuǎn)，不利于用戶的填寫（因?yàn)榇蟛糠钟脩舻拈喿x習(xí)慣都是從左往右的）；

右對齊和左對齊反之，有利于用戶的填寫，但是不利于用戶對標(biāo)簽信息的查看。

（2）頂部標(biāo)簽

頂部標(biāo)簽是標(biāo)簽對表單域的上方，與表單域左垂直對齊，這樣設(shè)計(jì)會節(jié)省橫向的空間、用戶在填寫時也比較方便，可以在移動端產(chǎn)品的設(shè)計(jì)中使用，但是會時縱向空間增大如果字段多的話可能需要下拉拖動。

（3）行內(nèi)標(biāo)簽

標(biāo)簽相當(dāng)于提示文字，直接在表單域中，這樣設(shè)計(jì)能極大地節(jié)省橫向空間，但在點(diǎn)擊輸入獲取焦點(diǎn)后標(biāo)簽文字消失，經(jīng)常會忘記要填寫的內(nèi)容，這樣會給用戶帶來極不好的使用體驗(yàn)；

所以現(xiàn)在經(jīng)常使用的行內(nèi)標(biāo)簽一般是圖標(biāo)+文字標(biāo)簽的形式，在獲取焦點(diǎn)后文字標(biāo)簽消失，但是圖標(biāo)還在，用戶通過圖標(biāo)能知道要輸入的內(nèi)容，但這就要求圖標(biāo)的設(shè)計(jì)非常的重要，要和標(biāo)簽的名稱保持高度的契合不要產(chǎn)生歧義。

元素二：表單域

（1）文本框

是必填還是選填，最好有明顯的標(biāo)注提示，常用的標(biāo)注提示是在文本框?qū)?yīng)的標(biāo)簽后加個紅色的*號表示為必填項(xiàng)，同時要注意根據(jù)預(yù)估填寫文本內(nèi)容的大小設(shè)計(jì)表單域的大小，這樣更能合理的利用空間同時合適的大小設(shè)計(jì)會減少輸入的不確定性。

（2）選擇框

包括下拉列表、選框、開關(guān)、日期選擇器等，關(guān)于選擇框中默認(rèn)值的選擇，筆者認(rèn)為最好不要設(shè)置默認(rèn)值，因?yàn)檫@會增加出錯率，用戶在有默認(rèn)值的選項(xiàng)中可能會直接跳過，總之根據(jù)不同的場景讓進(jìn)行不同的設(shè)計(jì)，總之能讓用戶選的，盡量不讓用戶輸入。

元素三：提示信息

（1）輸入提示信息

一般位于表單域中，在文本框獲取焦點(diǎn)后提示文字會消失，提示文字最好是簡潔明了的幾個字，如果是大篇幅的解釋性內(nèi)容應(yīng)放在幫助文字中。

（2）幫助文字

在表單的設(shè)計(jì)中如果應(yīng)用的是非常生僻的字段名稱或者字段名稱存在歧義再或者該字段有什么要強(qiáng)調(diào)的規(guī)則，都會在幫助文字中明確，幫助文字的設(shè)計(jì)一般在表單域的前/后有一個幫助按鈕，點(diǎn)擊按鈕會有一個toast彈窗，幫助文字在彈窗中展示。

（3）錯誤提示信息（可能是文字可也能是圖標(biāo)）

設(shè)置表單域的輸入規(guī)則，若用戶輸入的內(nèi)容不符合規(guī)則，則在表單域后/下方以文字的提示提醒輸入錯誤原因，比如“請輸入11位的手機(jī)號碼”；或者在和數(shù)據(jù)庫校驗(yàn)數(shù)據(jù)時，比如密碼不對，提示“密碼輸入錯誤”等等。

元素四：操作按鈕

（1）主按鈕-提交

主按鈕禁用原則，當(dāng)表單信息位填寫完整時（必填信息），提交按鈕一般為灰色狀態(tài)，不可點(diǎn)擊提交，當(dāng)表單完善后，提交按鈕由灰色狀態(tài)變?yōu)榭牲c(diǎn)擊的亮色狀態(tài)。

（2）次按鈕-返回

主次按鈕之間一定要有視覺上的區(qū)分，降低次要按鈕的視覺突出，減少用戶的出錯率。

總結(jié)

盡可能減少用戶的輸入，有自動配置、智能聯(lián)想，比如在郵箱的輸入中，在輸入到@時可自動彈框qq.com、163.com、126.com等減少用戶的輸入。

錄入前、中、后動作按鈕、表單框、提示內(nèi)容隨狀態(tài)的改變而改變

保護(hù)按鈕，比如在密碼的輸入時，為了密碼信息的安全，可設(shè)計(jì)密文/明文的顯示，通常在密碼的輸入框后面有個小眼睛按鈕

理清楚是局部校驗(yàn)還是全局校驗(yàn)，局部校驗(yàn)一般都屬于前端校驗(yàn)，在輸入完一項(xiàng)后經(jīng)過前端設(shè)置的規(guī)則判斷后，然后提示該填寫信息正確，或文字提示“請?zhí)顚懻_的信息”；全局校驗(yàn)一般先判斷填寫的內(nèi)容是否符合規(guī)定的格式，這也是通過前端來判斷的；

在一個提交信息的表單里如果所有的信息填寫完后，點(diǎn)擊提交，如果全部填寫的信息符合規(guī)定要求，直接Toast彈窗提示用戶“提交成功”，如果有字段不符合要求，在該字段的后面直接文字提示“請?zhí)顚懻_的信息”；

在一個登錄表單里，用戶填寫完表單信息后，點(diǎn)擊提交，首先前端會校驗(yàn)是否符合要求，如果符合要求后端會通過數(shù)據(jù)庫已有的賬號、密碼和你輸入的賬號密碼進(jìn)行比對校驗(yàn)，校驗(yàn)通過后顯示才會登陸成功。

當(dāng)表單的字段非常多時，要考慮有重置按鈕，用戶在輸入完信息后，想重新填寫，因?yàn)樽侄蝺?nèi)容非常多，要一個一個的刪除相信是一個非常不好的使用體驗(yàn)，重置按鈕能非常好的解決這個問題，當(dāng)然比較小的表單就沒必要加這個內(nèi)容了。

數(shù)據(jù)持久化，用戶在輸入完表單內(nèi)容后沒有點(diǎn)提交按鈕，或者在分頁填寫表單的情況下，填完一頁點(diǎn)擊下一步進(jìn)入新的頁面后不小心關(guān)閉了頁面，此時如果再進(jìn)入表單填寫頁需要重頭開始填寫相信每個用戶都有想罵大街的沖動，此時就要用到了數(shù)據(jù)持久化，數(shù)據(jù)持久化簡單來說就是前端對已填寫未保存的數(shù)據(jù)的緩存。

方便用戶再填寫未保存的情況下，再次進(jìn)入填寫頁面填寫過得數(shù)據(jù)還在，數(shù)據(jù)持久化功能相當(dāng)于kano模型中的基本需求，有了這個功能不一定能提高用戶的滿意度，但是沒有這個功能一定會降低用戶的滿意度。

當(dāng)然所有的總結(jié)歸納都不是一成不變的，僅僅是為了能在下次的設(shè)計(jì)中提高效率、更更快更好的完成設(shè)計(jì)，在實(shí)際的工作中還要結(jié)合自己的實(shí)際的工作場景和用戶的使用習(xí)慣來具體設(shè)計(jì)。

本文由 @Marvin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。