編輯導語：B端的表單設計，對産品的體驗起着至關重要的作用。作為收集信息、開展工作任務、形成産品閉環的關鍵步驟，表單要怎麼設計更好呢？一起來看一下吧。
表單作為收集信息、開展工作任務、形成産品閉環的關鍵步驟。在一系列 B 端産品中，有較為高頻的應用場景。随着 B 端設計的精細化，表單設計對 B 端産品的體驗起到愈發關鍵作用。
本文從高效和清晰兩個表單設計原則出發，闡述b端産品的表單優化思路。通過制定設計規範，對複雜的業務場景提供設計決策依據。
一、表單定義表單頁是一種用于信息添加、錄入的頁面類型。用來确保用戶按照要求錄入信息提交給系統使用或引導用戶進行應用設置。表單的常見類型 基礎表單、分組表單、分步表單。
是一種較為簡單的表單類型，通常隻需要少量的信息既可以完成的任務。如登陸注冊界面頁面等。
将複雜的填寫内容按照線性流程進行組織，并拆解成若幹步驟。
好處：可以給予用戶明确的任務預期，快速了解填寫流程和進度；降低用戶的填寫負擔，減少出錯率。
1）常規分步表單
用戶需要在每個步驟完成之前點擊确認才能進入下一步，更加适用于具有明确線性順序的填寫步驟。
在實際應用中用戶未通過第一步的填寫和校驗，不可以進行後面步驟的操作。也可以理解成如果不具備後面步驟的填寫條件，可以在第一步時就選擇放棄，這樣反而不會被用戶反感。但是，如果僅僅是因為填寫内容過長，而選擇常規分布表單，似乎無意地增加了用戶的填寫步驟，這時就比較推薦靈活分布表單。
2）靈活分步表單
在給予用戶分步選擇的同時（給予用戶充分預期）。将所有輸入字段直接展示出來，用戶也可以按照操作需求自定義輸入的順序。
此種方式更像是步驟條和錨點定位的組合，好處是用戶不必點擊下一步，也不必按照既有的線性順序，更加靈活完成信息錄入。
将需要填寫複雜的内容歸類分組，分組内容具有一定的相似性和可歸納性。和分步驟表單類似可以減輕用戶的操作負擔，提高操作效率。
小思考：這裡大家可能會糾結，靈活分步表單和分組表單會比較類似。我的觀點是，首先要根據業務場景去選擇合适的表單樣式，其次這裡的“靈活分步表單”可以是對分步表單的升級，也可以是對分組表單的升級，叫什麼名稱其實不重要，重要的是能否幫助用戶高效地完成填寫任務。
二、背景
1）用戶側
在過往的工作中，我們通過對用戶調研，并對反饋進行整理。發現用戶對表單使用問題集中表現為使用效率低，填寫複雜。
2）設計側
設計師在設計表單時，對一些設計細節點認知不一緻，往往憑借已有的設計經驗開展設計工作。需要一個表單設計規範，去引導和規範設計工作。
三、設計策略
我們通過對現狀的分析，結合用戶調研，确定設計目标為高效、清晰、組件化，并将設計目标拆解為具體的可執行動作。
目的：通過合理的信息組織，使用戶快速完成表單填寫。
目的：幫助用戶理解表單填寫項的含義，準确的填寫表單，降低出錯率。
1）更少的浏覽時間 – Lable 和 Input 的對齊方式
Lable 和 Input 的對齊方式，推薦選擇右對齊和頂對齊的方式。
Matteo Penzo 通過眼動追蹤實驗的方式，對表單中 Lable 的放置位置進行深入研究。研究發現，對于用戶來說，需要有一個從 Lable 到 Input 掃視的時間，來感知之間的聯系。其中，左對齊需要 500 毫秒，右對齊需要 240 毫秒，頂對齊需要 50 毫秒。填寫速度從快到慢依次是頂對齊、左對齊、右對齊。
為了提升表單在業務場景中使用效率，同時考慮到系統的美觀、有序，防止設計者僅憑個人經驗選擇 Lable 的對齊方式，我們推薦選擇頂對齊和右對齊兩種方式。
那麼我們該如何對左對齊和頂對齊進行選擇呢？
最直觀的區别是占空間大小和視覺美觀。頂對齊視覺相對平衡，所占橫向空間最小，缺點是需要較長的屏幕縱向空間。右對齊因為受限 Lable 的寬度不固定，視覺效果較為參差，占橫向空間較大，但所占縱向空間較少。
考慮到内部 B 端産品會涉及到大量的表單輸入項，為了節約縱向空間提升屏效。我們推薦一個系統優先使用左對齊的方式，同時保留兩種對齊方式。并給出如下的選擇條件供設計師判斷。
頂對齊：
左對齊：
2）更短的視覺路徑 – 單列和多列
多列布局的格式，對相似的選項進行閱讀。視覺路徑更長，閱讀效率相對更低。
在 B 端業務中推薦運用單列布局的形式，更短的視覺路徑，更高的閱讀效率。
但是在特定的業務訴求下，用戶對屏效的要求比較高，也可以采用多列布局的形式。
3）更快的決策路徑 – 按鈕的位置
參考 Ant Design ，“我們确定了一個清晰的設計策略來決策按鈕區位置：應将按鈕放置于用戶浏覽路徑中，便于被用戶發現，并且應盡量靠近其所控制的對象。在未刻意建立信息層級引導視覺路徑時，經典 “F” “Z” 網頁浏覽模式作為了我們按鈕位置放置規則的基礎指導。”
F形閱讀模式：用戶的視線首先是水平移動的浏覽内容區域的頂部，這是F的第一橫。接下來用戶的視線會沿着屏幕的左側向下移動，如果找到感興趣的點，視線會繼續向右移動，這是F的第二橫。最後用戶的視線會繼續沿着屏幕垂直向下移動。
Z字形閱讀（古騰堡法則）：用戶關注流(通常含鼠标移動)遵循一個 Z 字形模式。視線流從左上到右下，左上角為第一視覺區，右下角為視覺終點區。
為了提升用戶的決策效率，我們對表單按鈕的擺放位置進行了統一。當單列布局時，按鈕的位置選擇跟随表單。當多列布局時，按鈕的位置在右下角。
1）暗示輸入長度 – Input 定寬
目前對 Input 的寬度常見的處理方式有定款和自适應兩種。常見在實際的業務場景中，大部分 Input 都有理想的輸入長度。Input 的寬度應該向用戶暗示需要輸入字符的長短，給用戶明确的填寫預期。基于此，我們選擇定寬的處理方式。
牛頓說：“如果我看的更遠，那是因為我站在巨人的肩上。”
我們不妨站在巨人的肩膀上看問題，根據 Ant Design 的研究，得出5種高頻的表單寬度區間。寬度值是 XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。
為了呈現出錯落有緻的排列效果，倡導組合 Input 和單個 Input 的對齊概率最大化，這樣Input的寬度差值可以呈現出一個固定規律，且總結出一種不同寬度尺碼的排列公式。
我們設定 XS 尺寸可以容納 7 個中文字段的 input 或 99999.00 的 number input。根據設計規範，此時寬度剛好為 100PX。并且根據公式推算出5種 Input的寬度，以及應用場景。分别是XS=108PX、S=208PX、M=316PX、L=424PX、XL=532PX。
XS：我們設定支持輸入 5～7 個中文字符，7～10 個英文字符， 寬度為 108PX。
适用于：較短文本、短數字、選項、價格、數量。如：課程價格、學員性别、選擇時間點等。
S：支持輸入 14～16 中文字符，寬度為 208PX。
适用于：短文本和選項，如：學員姓名、學員電話、學員微信、郵箱、身份證、學員 ID 、課程 ID、日期段選擇等。
M：顯示23～25個中文字段，寬度為 316PX。
适用于：常規輸入框大小，适用于大部分字段長度。如：課程名稱、班級名稱、模版名稱、日期時間段選擇等。
L：寬度為 424PX。
适用于：較長字段錄入，适用于長網址、标簽組展示、文件路徑、集聯選擇器等。
XL：寬度為 532PX。
适用于：超長文本的輸入，如：正文、描述、備注、簡介等。
小結：我們根據此規範，對真實使用場景做優化，有較為顯著的提升效果。在滿足填寫需求的同時，我們也通過設定的 Input 尺寸，給予用戶所輸入内容長短的心理預期。與表單自适應規則不同，Input 定寬的處理方式可以降低适配過程中的視覺風險。同時，錯落有緻的布局，更接近真實的使用場景也符合設計美感。
2）視覺降噪 – 必填和選填的抉擇
大量的必填項小紅點會增加用戶的認知負荷，産生焦躁的情緒，增加填錯的風險。表單中的視覺噪聲越少可讀性越強。
當必填項過多時，推薦選擇非必填提示的形式。
3）合理的預期-提示反饋
用戶在初次使用表單時，對各種定義、用途、使用條件等概念往往理解不清晰。我們希望用戶在填寫表單時，給予用戶清晰的引導和明确的填寫預期。這裡我們對輸入說明、輸入線索、錯誤提示進行規範。
輸入說明：指在空白文本字段的旁邊或下方，放置一個短語或示例，解釋輸入内容或提示輸入要求。
作用：
輸入線索：指用示例或說明文本，以占位符的形式，引導、提示用戶輸入内容。
作用：
錯誤提示：是表單出現輸入錯誤時，為用戶展示的一條引人注目的解釋性消息。
作用：
本文根據用戶對于表單的使用痛點，挖掘出用戶目标。将用戶目标轉化為設計目标，找到設計抓手。并将表單設計的思考，總結為規範，引導設計工作。
這裡對表單設計規範作用的理解，不僅是為一些簡單的業務場景，提供設計模版供設計師直接使用。更重要的意義是，面對複雜和未覆蓋的場景，設計規範可以為設計者決策提供設計依據和設計邊界。
感謝閱讀。
本文由 @
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
