起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識干貨分享：B端表單設計優化
導讀：表單作為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. 可信任
依據尼爾森十大可用性原則中的容錯、防錯以及反饋原則，在操作的前中后分別進行防錯、實時反饋、提醒和糾錯。比在發生錯誤時設置提醒彈窗更好的設計方式，是在這個錯誤發生之前就避免它?？梢詭椭脩襞懦恍┤菀壮鲥e的情況，或在用戶提交之前給他一個確認的選項。在此，特別要注意在用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。
1.預防錯誤
2.實時反饋
3.提醒/糾錯
4.所見即所得
依據尼爾森十大可用性原則中的貼近場景原則，遵循真實場景的認知、習慣，讓信息的呈現更加自然，易于辨識和接受。
五、總結與反思
表單的優化，對于整個產品的體驗都有著重大的意義，需要結合實際的業務場景，不停的優化細節，為商業和用戶助力。
- 提升表單的易用性可以讓公司降本增效，減少現場實施的工作量，提升用戶的簽約率。
- 對于設計師而言，運用組件化的設計思維，可以大大提高工作效率，將精力投入到設計驗證和用戶研究中，發揮更大的設計價值。
本文由@萌夏夏夏 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Pexels，基于CC0協議
想請教下。落地頁表單如何去優化呢，需要填一些用戶的個人信息（手機號、身份證、這些）用戶在填寫時，填寫到身份證跳出率較高，這種時候除了開關久啊，文案引導，怎么樣讓用戶感覺有安全的感覺
等你更新。??
PC端的表單和手機端的表單都很重要，也是需要去適應
對的 但是手機端的表單交互相對比較固定了 px還有很多可以探討的東西
好的表單會給用戶帶來很好的體驗感，要重視起來
產品從可用性到易用性的轉變 會對細節更加重視
表單雖然是一個新的概念，但是已經存在很久了。