導讀：表單作為B端産品中的基礎通用組件，也是在各個B端産品中出現頻率最高的元素之一。表單的設計也是比較考驗設計師綜合能力和設計細節的。一定程度上，表單設計的好壞也決定了産品的成敗。本文作者分享了自己關于B端表單設計優化的經驗，一起來看看吧。

一、什麼是表單設計

“錄入”是B端産品常見的任務場景，常用于向用戶收集或驗證信息。

在設計錄入表單時，應盡量減少用戶的思考和理解負擔，提高表單的操作效率，降低用戶出錯的概率，才能提高錄入任務的完成度和滿意度。

針對不同的用戶數據要進行不同的表單設計，以便适用各個場景功能。

表單入口

新零售行業中，表單應用場景無處不在

二、表單種類

1. 基礎表單

基礎表單是目前最常用的錄入模式，在系統内用一個獨立頁面承載表單内容。頁面内通常會包含：頁面标題、表單區和操作區三部分。

适用範圍：适用于錄入項較少的表單，所有錄入項在一個頁面内呈現。

操作按鈕的位置：

1.若錄入項很少不足半屏時，操作按鈕可放置在表單結尾處展示，減少鼠标移動路徑；

2.若錄入項較多時，操作按鈕懸浮頁面底部展示。

2. 分步表單

該類表單錄入模式通常用于拆分複雜錄入流程。步驟條的展示可以較好地幫助用戶理解完成任務所需步驟，以及當前所處階段。

适用範圍：适用于錄入項較多，且填寫任務有先後之分的表單；在完成上一步任務的填寫時，才可進入下一步。

有些場景下，系統隻需要用戶錄入簡單的信息，此時可以考慮使用錄入彈窗模式。還有些情況，比如用戶處在一個任務流程中，當需要進行某些任務操作時，系統需要向用戶采集信息，但又不想打斷用戶所處的流程，此時可以運用錄入彈窗的模式，降低頁面跳出感。

适用範圍：通常用于輕量級任務，彈窗内可承載少量的錄入項。

注意事項：

• 彈窗不适用于複雜錄入場景，若采用分步錄入彈窗，一般不超過三步。
• 彈窗内的錄入項平鋪展示，一般不做頁面内滾動，若錄入項較多可使用基礎表單頁承載。

3. 分組表單

對于錄入項較多的頁面，将信息按一定規律分組呈現，将大大降低用戶的理解和操作成本。

這裡可以按如下原則進行分組：

以必填項劃分：若表單内有必填項和非必填項，且各項之前關聯度不高，可采用将必填項劃分為一組進行優先呈現。該種方式有助于讓用戶快速發現自己需要錄入的内容。

以相關性劃分：若錄入項較多，且各項内容之間存在明顯的關聯度區分，可考慮以内容相關性進行信息分組。該種方式有助于讓用戶理解各項内容間的邏輯關系。

以操作成本劃分：若錄入項間的操作存在差異或用戶對需要錄入的内容的信息獲取途徑存在難易之分，可将易錄入或易獲取信息的錄入項放在表單靠前的位置，優先展示。該種方式有助于降低用戶的錄入門檻。

三、表單的組成

表單由表單标簽、表單域、提示信息、操作按鈕組成。

1. 标簽

簽用于提示用戶需要輸入什麼信息。

合理的标簽布局結構，能夠提高用戶的閱讀效率，還能降低信息填寫時的錯誤率。常見的标簽布局形式有：左右結構、上下結構和内部結構。

1.1 左右結構

左右結構是目前常見的表單布局形式，它減少了頁面的垂直占用空間，而增加了橫向占用空間。因PC端的橫向空間很大，當錄入項不多時，可以采用該種結構。

左右結構又分為右對齊标簽和左對齊标簽。

右左對齊标簽

左對齊标簽

1.2 上下結構

上下結構擁有較強的信息浏覽和填寫效率，用戶的視覺浏覽路徑相對左右結構來說較短。該種結構适用于一行需要放置多項錄入項的情況，或标簽名稱通常較長的表單。

上下标簽

1.3 内部結構

内部結構很少出現在B端，有時會用在C端。這裡對于用戶需要輸入的内容，隻保留了提示性文字，當用戶進行輸入時，内部的标簽/提示性文字就會消失，将導緻用戶很難判别輸入的信息是否準确。這種形式适用于極少輸入項的表單（如登錄）。

馬泰奧·彭佐研究得出标簽對齊方式的時間表

根據馬泰奧·彭佐的對齊方式研究出的時間表總結：單從效率角度看，頂對齊>右對齊>左對齊，根據不同的業務場景，效率并不是唯一的考慮指标。

• 希望用戶放慢速度，好好考慮每個表單内容填寫，那麼采用左對齊；
• 頂對齊針對标簽文字過多或者需要英文時，延展性更好
• 右對齊要考慮能否精簡标簽内容，确定好表單與界面的間距。

2. 輸入域

輸入域是用來采集用戶數據信息的核心内容，每個輸入域字段都包含一個類型的數據信息。

選擇合适的輸入域：對于用戶來說，表單的填寫體驗再好也會造成一定的負擔，所以表單設計的時候盡可能減少用戶的思考、理解，選擇合适的輸入域類型，提升表單的輸入效率。

四、表單設計原則

通過SaaS新零售表單設計總結出表單設計的3大原則：明确、高效、安全感

1. 明确

1.1 視覺降噪

根據倒金字塔設計原則，最先呈現最重要的資料，然後呈現附加的詳細信息，重要性依先後順序遞減，能夠快速傳遞重要信息，讓浏覽變得更有效率。

通過合理的信息輸入組件&頁面布局&交互方式可以使用戶快速完成表單也的信息填寫任務。

例：必填項和非必填項标星（此規則非必須，根據不同業務屬性靈活調整0

• 全部為必填or非必填時，不标識
• 必填項比重很大，可适當提示非必填項，而非全部添加“*”，降低用戶的視覺幹擾，增加心裡負擔

1.2 準确性

輸入框的長度根據用戶輸入信息的多少進行智能設置，非必要情況下，不需要為了讓輸入框長度保持一緻，而出現太長或太短的情況，需要結合實際情況，設置長度，提前給用戶心理預期。太長的輸入框會增加用戶負擔。

表現形式要為用戶填寫提供有用線索，采用不同長度的文本框提供了暗示。

長度不同的輸入框比相同尺寸的輸入框視覺看上去更加和諧

注意：根據産品的模度值設置幾個通用的長度，不要設定太多寬度，會讓表單顯得淩亂。

Tips：什麼是模度值？受柯布西耶模度的啟發，追求「秩序之美」，Ant Design提取了一組可以用于 UI 布局空間決策的數組，他們都保持了 8 倍數的原則、具備動态的韻律感。經過驗證，可以在一定程度上幫助我們更快更好的實現布局空間上的設計決策。模度具體落實在設計上，先梳理産品中常見的表單類型，然後設置一個默認寬度在這裡的使用，根據模度的規則，設置了XS、S、 M、L、XL五個尺寸，根據輸入内容選擇不同長度的輸入框。

如何确定輸入框的長度

2. 高效

依據尼爾森十大可用性原則中的靈活高效和協助記憶原則，做到靈活、易用、高效、智能，盡量減少用戶對操作目标的記憶負荷。

2.1 設置合理默認值

系統還可以自動為用戶填寫一部分表單，從而降低錄入成本，讓用戶減少操作步驟，提高操作效率

将一些輸入框給默認的值會提升表單提交效率

2.2 自動獲取/搜索

有些業務場景，用戶大概率會複用之前已填寫的内容作為模闆，并在上面稍作修改，此時在新建立的錄入頁面時，可以默認帶入用戶之前的數據。

系統根據上下文或搜索自動獲取填寫信息，降低用戶的記憶負荷，提升效率。

在新零售業務場景中，這類輸入通常是輸入商品名稱或者商品名稱，我們采用「模糊搜索」的方式。

2.3 智能錄入

對于一些标準證件類信息的錄入，可以通過OCR識别文件内容。當用戶上傳圖片後，運用圖像識别技術提取關鍵信息并自動填入結果。值得注意的是，如果圖片不清晰或存在水印，将大大降低識别準确度。此時應提供修正渠道，讓用戶可以逐一校對并修改文本内容。

2.4 組件化設計

通過設計評審敲定後提煉出規範，組建标準，提取組合用法以覆蓋各個業務場景。實現設計和開發一體化，讓設計面向開發，讓開發貼近設計，減少設計及開發人員的額外工作量，讓工作變得十分高效。

目前工作階段處于中台全面改版中，改版的最大難題在于組件庫落地，我們在實際工作中，總結梳理了通用組件庫和實際業務場景結合的定制組件庫，根據下圖進行實際的開發跟進。

3. 可信任

依據尼爾森十大可用性原則中的容錯、防錯以及反饋原則，在操作的前中後分别進行防錯、實時反饋、提醒和糾錯。比在發生錯誤時設置提醒彈窗更好的設計方式，是在這個錯誤發生之前就避免它。可以幫助用戶排除一些容易出錯的情況，或在用戶提交之前給他一個确認的選項。在此，特别要注意在用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。

1.預防錯誤

2.實時反饋

3.提醒/糾錯

4.所見即所得

依據尼爾森十大可用性原則中的貼近場景原則，遵循真實場景的認知、習慣，讓信息的呈現更加自然，易于辨識和接受。

五、總結與反思

表單的優化，對于整個産品的體驗都有着重大的意義，需要結合實際的業務場景，不停的優化細節，為商業和用戶助力。

• 提升表單的易用性可以讓公司降本增效，減少現場實施的工作量，提升用戶的簽約率。
• 對于設計師而言，運用組件化的設計思維，可以大大提高工作效率，将精力投入到設計驗證和用戶研究中，發揮更大的設計價值。

本文由@萌夏夏夏 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Pexels，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部