B端產(chǎn)品設(shè)計(jì)——表單設(shè)計(jì)終極秘籍（設(shè)計(jì)指南）

一、表單結(jié)構(gòu)

單從效率角度看，頂對(duì)齊>右對(duì)齊>左對(duì)齊，根據(jù)不同的業(yè)務(wù)場(chǎng)景，效率并不是唯一的考慮指標(biāo)。

• 希望用戶放慢速度，好好考慮每個(gè)表單內(nèi)容填寫，那么采用左對(duì)齊；
• 頂對(duì)齊針對(duì)標(biāo)簽文字過多或者需要英文時(shí)，延展性更好
• 右對(duì)齊要考慮能否精簡(jiǎn)標(biāo)簽內(nèi)容，確定好表單與界面的間距

1.表單標(biāo)簽

B端平臺(tái)在條件搜索或新建表單的業(yè)務(wù)場(chǎng)景下條件量偏多，為盡量減少表單占用垂直屏幕空間，右對(duì)齊能提供較高效完成任務(wù)的效率。新手用戶掃視（眼睛運(yùn)動(dòng)）右對(duì)齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時(shí)間分別約在170毫秒和240毫秒，而填寫完成時(shí)間比左對(duì)齊快2倍

優(yōu)勢(shì)：標(biāo)簽右對(duì)齊標(biāo)簽與輸入框相鄰（方便快速填寫）

劣勢(shì)：右對(duì)齊布局造成左側(cè)不齊，影響快速游覽表單的效率問題；若標(biāo)簽文字寬度變寬，右對(duì)齊還有靈活度問題。

• 適用場(chǎng)景：既要減少垂直空間，又要加快填寫速度的場(chǎng)景
  

2.必填標(biāo)記

必填

• 表單大量字段為必填字段，為便于用戶易讀，必填標(biāo)記展示在文本標(biāo)簽前
• 必填有兩種方式：星號(hào)*（紅色）和“必填”提示。
• 星號(hào)*在PC端已經(jīng)很常見，用戶熟悉其含義這樣更符合用戶認(rèn)知。
• 星號(hào)*放置在標(biāo)簽前，用戶只需掃視標(biāo)簽的最左邊字符，就能輕松定位必填哪些字段。
• 星號(hào)*作為一種視覺標(biāo)記，考慮在表單中的標(biāo)識(shí)位置。標(biāo)識(shí)在標(biāo)簽左邊能指引用戶迅速瀏覽界面，并判斷出必填項(xiàng)。

非必填字段標(biāo)記：非必填字段在表單錄入時(shí)，我們提供較為友好的引導(dǎo)提示來提升產(chǎn)品體驗(yàn)

3.表單域（輸入域）

3.1、定義：輸入域是用來采集用戶數(shù)據(jù)信息的核心內(nèi)容，每個(gè)輸入域字段都包含一個(gè)類型的數(shù)據(jù)信息。選擇合適的輸入域：對(duì)于用戶來說，表單的填寫體驗(yàn)再好也會(huì)造成一定的負(fù)擔(dān)，所以表單設(shè)計(jì)的時(shí)候盡可能減少用戶的思考、理解，選擇合適的輸入域類型，提升表單的輸入效率。

3.2、默認(rèn)值：表單域提供一些默認(rèn)值有非常必要，在Web表單中某些地方利用智能默認(rèn)減少不必要的選擇次數(shù)或輸入，加速表單完成過程。通過提供合理的默認(rèn)，能有效節(jié)省用戶時(shí)間，分擔(dān)了用戶思考或輸入答案的工作，用戶會(huì)非常感激。

默認(rèn)值不是用戶想要的，誤導(dǎo)用戶怎么辦？

在設(shè)計(jì)有默認(rèn)值的表單域時(shí)，要考慮默認(rèn)值是否是大多數(shù)用戶可以接受的答案，如果不肯定可以先去做一下用戶調(diào)研，了解用戶的心聲；就算默認(rèn)值真的不是用戶想要的，至少你也為他提供了一個(gè)示例來告訴用戶答案應(yīng)該是什么樣子的。這一點(diǎn)也可以節(jié)省用戶幾秒的思考時(shí)間——或避免一條錯(cuò)誤信息。但并不代表所有的表單域都要給出默認(rèn)值，我們只是盡可能的讓用戶節(jié)省時(shí)間。

3.3輸入域采用模式：「線索模式」or「說明模式」

3.3.1. 線索模式：時(shí)間控件中有“請(qǐng)選擇日期”，搜索框中會(huì)有“請(qǐng)輸入xxx”等線索文字，這就是線索設(shè)計(jì)模式。假如搜索框中什么文字也沒有，用戶就會(huì)搜索一次錯(cuò)一次，因產(chǎn)品沒有給用戶框定搜索邊界。因此線索設(shè)計(jì)模式可以讓界面不言自明。

3.3.2. 說明模式：說明模式是輸入框下面給出明確的提示文字，該文字是用來解釋輸入框中內(nèi)容的輸入標(biāo)準(zhǔn)、注意事項(xiàng)、要求等的，比線索模式的文字更完善和具有指向性。采用信息說明模式時(shí)，建議文案精簡(jiǎn)、設(shè)計(jì)直觀，讓用戶無需猜測(cè)可以根據(jù)說明自己操作和成功完成操作。

4.表單動(dòng)作

表單的動(dòng)作分為主動(dòng)作和次動(dòng)作。

例如提交、保存或下一步等完成表單填寫的動(dòng)作屬于主動(dòng)作；

取消、重置、上一步等允許撤銷輸入的屬于次動(dòng)作。

5.表單消息

在表單中，消息的類型分為三類：幫助消息、錯(cuò)誤消息、成功消息。

5.1 幫助消息

• 幫助消息分為幫助文字和幫助系統(tǒng)。

5.1.1幫助文字

幫助說明如何填寫表單，但在表單中應(yīng)盡量減少幫助文字內(nèi)容，避免混淆表單重要信息。幫助文字最適合解釋用戶不熟悉或者需要特定的操作和內(nèi)容。放置的位置通常在鄰近輸入框的位置。幫助文字：通過簡(jiǎn)明扼要的文字傳達(dá)必要信息

5.1.2 幫助系統(tǒng)

幫助消息分為即時(shí)幫助系統(tǒng)和用戶觸發(fā)的幫助系統(tǒng)。一些復(fù)雜表單的幫助文字如果超過表單本身長(zhǎng)度，使用幫助文字會(huì)讓用戶感到表單復(fù)雜且煩躁，這時(shí)候動(dòng)態(tài)幫助系統(tǒng)是更為合理的選擇。

即時(shí)幫助系統(tǒng)：

優(yōu)點(diǎn)是幫助文字與問題相鄰，當(dāng)用戶觸發(fā)到此問題時(shí)才會(huì)出現(xiàn)，可以節(jié)省大量的空間，讓表單看起來干凈整潔。

缺點(diǎn)是只有開始填寫時(shí)，用戶才知道是否有幫助文字。因此一般用戶知道如何回答問題，但系統(tǒng)需要給出更多解釋時(shí)可以使用。

用戶觸發(fā)的幫助系統(tǒng)

用戶通過問號(hào)圖標(biāo)等感知到幫助信息的存在，當(dāng)需要時(shí)可以輕松找到。這種方法的缺點(diǎn)是只有當(dāng)鼠標(biāo)觸發(fā)到熱點(diǎn)時(shí)，幫助信息才會(huì)出現(xiàn)，表單所含問題復(fù)雜或者表單會(huì)被相同的人重復(fù)使用，那么這類幫助系統(tǒng)是不錯(cuò)的選擇。

5.2 錯(cuò)誤消息

用戶在填寫表單時(shí)，免不了出錯(cuò)，錯(cuò)誤消息讓用戶知道無法繼續(xù)進(jìn)行，并且明確告知如何改正。

視覺表現(xiàn)：采用醒目的色彩和視覺元素來對(duì)比突出。目的是引起關(guān)注。

• 位置：指導(dǎo)文字鄰近產(chǎn)生錯(cuò)誤的輸入框，可以更快更便捷的提供改進(jìn)幫助。
• 
  
• 時(shí)機(jī)：在適當(dāng)時(shí)機(jī)出現(xiàn)，避免過度使用，否則讓用戶產(chǎn)生沮喪情緒。（例：在用戶輸入進(jìn)程中停止提示，確保輸入完成才出現(xiàn)）
• 

5.3 成功消息

成功消息是鼓勵(lì)或感謝用戶的友好方式，感謝用戶完成了枯燥的表單填寫，同時(shí)告知用戶已經(jīng)完成任務(wù)。成功消息應(yīng)當(dāng)簡(jiǎn)短貼心，語言讓用戶感到愉快。

二、表單域布局設(shè)計(jì)

表現(xiàn)形式：表單表現(xiàn)形式錯(cuò)落有致為用戶填寫提供有用線索，采用不同長(zhǎng)度的文本框提供了暗示；這種暗示是一種有用線索，當(dāng)輸入框長(zhǎng)度長(zhǎng)短不定時(shí)，用戶會(huì)很自然地思考為什么這樣；填寫輸入框時(shí)會(huì)自然考慮這些線索。

三、嘀加表單模度設(shè)計(jì)

以下模度以L為基準(zhǔn)模板：

以下模度以L為基準(zhǔn)模板：

XL=L+XS+Spacing   L=2S+Spacing=M+S+Spacing   M=S+XS+N=3XS+2Spacing  S=2XS+Spacing；Spacing為固定值12px

下一期：B端產(chǎn)品設(shè)計(jì)——表單交互設(shè)計(jì)

Powered by Froala Editor