表單是什么？是用戶和網(wǎng)站之間的對(duì)話。設(shè)計(jì)表單如同設(shè)計(jì)一個(gè)產(chǎn)品，取決于你的理念是從產(chǎn)品目標(biāo)還是用戶目標(biāo)出發(fā)。作者通過(guò)對(duì)表單設(shè)計(jì)中基本規(guī)范和輸入方式的分析，提出了表單設(shè)計(jì)中需要注意的事項(xiàng)。

交互體驗(yàn)對(duì)于而今的互聯(lián)網(wǎng)產(chǎn)品來(lái)講，無(wú)論怎樣重視都不為過(guò)。對(duì)于用戶接觸較多的表單設(shè)計(jì)，想必每位產(chǎn)品經(jīng)理都有自己的心得體會(huì)，今天就和大家聊聊表單設(shè)計(jì)的基本規(guī)范和注意事項(xiàng)，疏漏之處，還請(qǐng)各位同行多多指教，共同探討。

在開(kāi)啟正篇之前，先請(qǐng)大家看幾個(gè)有欠考慮的表單設(shè)計(jì)，我們一起看看問(wèn)題到底出在哪里了？

案例①：某人事考試平臺(tái)網(wǎng)站

案例②：

案例③：

看完以上三例，不知大家作何感想，筆者在考試報(bào)名的時(shí)候，就碰到了案例①的表單。

那么，為什么他們敢用這樣的表單？

因?yàn)椤皠傂琛?、“壟斷”，就像偉大?230X、擠成照片的地鐵，某三甲醫(yī)院的高傲態(tài)度等等。

但是，朋友們，不是我們所做的所有產(chǎn)品都能有這樣的場(chǎng)景吧，所以還是要老老實(shí)實(shí)的優(yōu)化我們的用戶體驗(yàn)，對(duì)嗎？

好，言歸正傳，首先要在此申明一下，表單設(shè)計(jì)的核心原則，也可以說(shuō)是鐵律。

• 表單內(nèi)容能減則減；
• 能給默認(rèn)值的就不讓用戶選；
• 能讓用戶選的就不讓用戶輸；
• 必須輸入的能給提示，一定要給提示。

一、基本規(guī)范

下面，我們從如下幾點(diǎn)來(lái)聊聊表單設(shè)計(jì)的基本規(guī)范。

1.1 合理的結(jié)構(gòu)

1、如果表單的字段過(guò)多，而又無(wú)法避免的時(shí)候，可按照業(yè)務(wù)邏輯進(jìn)行分類，把冗長(zhǎng)的表單劃分成幾部分進(jìn)行排布。

2、如果表單內(nèi)容存在前后步驟上的邏輯關(guān)系，可以將其按步驟劃分。

3、一些不影響主流程的信息，可以在需要啟動(dòng)該流程的時(shí)候，再讓用戶填寫。

1.2 合適的位置

1、輸入框標(biāo)簽的位置，通常有左對(duì)齊、右對(duì)齊、頂對(duì)齊、行內(nèi)標(biāo)簽幾種情況。根據(jù)眼動(dòng)實(shí)驗(yàn)數(shù)據(jù)表明，在理論效率上，頂對(duì)齊>右對(duì)齊>左對(duì)齊。

其中頂對(duì)齊的問(wèn)題在于，在垂直方向上占用空間較大。

行內(nèi)標(biāo)簽由于位置所限。優(yōu)點(diǎn)在于占用位置小，缺點(diǎn)在于填寫完畢，標(biāo)簽的提示文字就消失了，復(fù)核信息較困難。因此，常在輸入較少量信息時(shí)可使用，例如，登錄。

2、輸入框提示信息的位置，一般推薦將提示信息放在操作的上下文中，最為明確。

3、提示信息在文本框的上下左右四個(gè)位置中，一般來(lái)講右側(cè)最受用戶歡迎。（相關(guān)調(diào)研的結(jié)果供參考）

1.3 恰當(dāng)?shù)恼Z(yǔ)言

1、設(shè)計(jì)中，恰當(dāng)?shù)氖褂梦陌?，?huì)為產(chǎn)品增色不少。文案的核心原則是清晰、明確，語(yǔ)言風(fēng)格要根據(jù)產(chǎn)品定位詳加斟酌。

2、有些必要的操作，可以通過(guò)提示信息給用戶解釋清楚，為什么需要用戶填寫此內(nèi)容？填寫之后能為用戶帶來(lái)什么益處？這樣用戶在輸入的時(shí)候會(huì)感受到自己并非被迫的。

3、可以通過(guò)一些動(dòng)效來(lái)增加情感聯(lián)系，例如我曾經(jīng)看到過(guò)一個(gè)登錄頁(yè)面，在用戶填寫賬戶時(shí)，貓頭鷹會(huì)閉上眼睛。

1.4 合適的顏色

一般來(lái)說(shuō)，錯(cuò)誤為紅色，通知為藍(lán)色，警告為黃色，成功確認(rèn)為綠色。

1.5 適宜的時(shí)間

推薦在用戶輸入完該項(xiàng)信息后，立即顯示驗(yàn)證的成功/失敗信息。同時(shí)還可以考慮為用戶提供解決方法。

二、輸入方式

在表單設(shè)計(jì)中，存在多種輸入方式，那么在設(shè)計(jì)產(chǎn)品的過(guò)程中，我們?cè)撊绾芜x擇，如何取舍呢？以下是我在日常工作中的一些摸索，也包括借鑒前輩的一些經(jīng)驗(yàn)。供大家參考。

2.1 文本框

注意事項(xiàng)：

1、合適的尺寸，根據(jù)輸入內(nèi)容的長(zhǎng)度確定文本框的尺寸。

2、自動(dòng)匹配特定數(shù)字的輸入格式問(wèn)題：

• 手機(jī)號(hào)碼?????? 示例：138 ?1174 ?6893
• 銀行賬號(hào)?????? 示例：6226 ?8005 ?2365 ?6879
• 身份證號(hào)?????? 示例：110 ?108 ?19861203 ?1020

在顯示銀行賬號(hào)、身份證號(hào)碼等敏感信息時(shí)，宜隱藏部分內(nèi)容，避免信息泄露問(wèn)題。針對(duì)卡號(hào)等復(fù)雜信息，現(xiàn)在很多銀行的app都支持直接掃描卡片獲取賬號(hào)。

3、提供幫助和解釋性文字，消除用戶疑慮和困惑。

4、文字輸入最好有自動(dòng)補(bǔ)全、自動(dòng)建議功能。

5、如有限制字符數(shù)，明確提示給用戶為宜。

6、表單輸入內(nèi)容過(guò)多時(shí)，可增加一鍵清空、復(fù)制按鈕。

7、移動(dòng)端特有問(wèn)題：彈出鍵盤與需要輸入的文本類型相匹配。

8、在英文語(yǔ)境下，要避免英文全大寫的情況發(fā)生。

2.2 下拉列表

優(yōu)點(diǎn)：占用空間小，不需要輸入驗(yàn)證，技術(shù)難度低，用戶熟悉。

適用場(chǎng)景：適用于當(dāng)下拉選項(xiàng)數(shù)量過(guò)多時(shí)。

注意事項(xiàng)：

1、允許用戶檢索下拉選項(xiàng)更為友好。

2、盡可能合理的排列選項(xiàng)，最容易選擇的放到上面（如果無(wú)法確定默認(rèn)選項(xiàng)的話）。例如攜程的目的地的選擇。

3、下拉列表的提示信息也很重要，要讓用戶明確自己選擇的是什么。

2.3 單選框、復(fù)選框

注意事項(xiàng)：

1、按一定的邏輯進(jìn)行選項(xiàng)排序，例如根據(jù)發(fā)生的可能性、難易程度、風(fēng)險(xiǎn)大小來(lái)排序。

2、選項(xiàng)應(yīng)該易于理解，容易區(qū)分。

3、盡可能提供默認(rèn)選項(xiàng)。

多選：

單選：

2.4 其他輸入方式

1、滑塊：

① 適用于精度要求不高的數(shù)據(jù)輸入，滑塊的精度可以根據(jù)產(chǎn)品定義，最小值可以自行設(shè)定。

② 滑塊亦可配合數(shù)字輸入，微調(diào)鈕等一并使用。

2、switch開(kāi)關(guān)：

3、tab框：

注意事項(xiàng)：推薦在2>選項(xiàng)數(shù)量>6時(shí)，使用，且文案字?jǐn)?shù)較少時(shí)。

2.5 日期選擇器

目前，在互聯(lián)網(wǎng)產(chǎn)品上，日期選擇器都得到了普遍的使用，很少有產(chǎn)品在要求用戶手動(dòng)輸入日期了。

那么日期選擇器的使用應(yīng)該注意哪些問(wèn)題呢？

1、需要區(qū)分是選擇時(shí)間點(diǎn)還是選擇時(shí)間段。

2、是否允許手動(dòng)輸入日期，允許手動(dòng)輸入日期的同時(shí)，要能準(zhǔn)確識(shí)別用戶輸入日期的格式。

3、是否需要給用戶提供默認(rèn)值。

4、限制不可用日期。

5、時(shí)間選擇的顆粒度。

6、周末是否需要特殊標(biāo)識(shí)。

最后一點(diǎn)要說(shuō)的是，表單校驗(yàn)的形式分為兩種，一種是提交后校驗(yàn)，一種是在用戶填寫完該條信息之后立即校驗(yàn)，一般推薦后者。

好啦，關(guān)于表單設(shè)計(jì)的幾點(diǎn)問(wèn)題就聊到這里了，不周之處還請(qǐng)各位多多指教，互相學(xué)習(xí)。

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

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議