B端——复杂业务表单设计
作者：nick （轉載已取得作者授權）
一、前言
表單是B端產品中最常用的信息錄入工具，但由于B端產品業務的復雜性，表單往往呈現出字段多、類型雜等特點，增大了它的設計難度；一個糟糕的表單，會極大影響用戶信息的錄入的效率，從而影響到整個產品的體驗。
最近我經歷了云空間產品的項目重構，對于復雜業務表單有了進一步的理解，總理梳理了這篇文章，希望能給大家帶來不一樣的啟示。
二、表單定義與構成
2.1 表單定義
定義：表單在網頁中主要負責數據采集功能，是提交數據的一切形式。
為了充分理解表單定義，我們來看一個例子，大家認為以下圖例屬于表單嗎？
答案：是的。可能在大家的印象中，包含輸入框、下拉選擇框等這些控件才屬于表單，但從定義中能得到表單的本質是提交數據；比如當點擊“立即開通”按鈕，在等待的過程中已經提交了相關的數據信息，所以它就屬于一個表單。
2.2 表單構成
一個表單通常由以下三部分組成：標簽、輸入域、提示信息、動作。
標簽 – 告訴用戶相對應的輸入字段的含義。
輸入域 – 是數據輸入的入口，表單的核心主體。
提示信息 – 幫助用戶更準確的理解輸入域的具體操作。
動作 – 用于將表單數據傳送到服務器上。
三、表單構件解析
3.1 標簽
標簽的功能是表明表單域要求輸入的內容，其文字描述應該盡量的簡潔明了，避免出現冗長難以理解的標簽，避免產生歧義；同時，用詞盡量夠貼近用戶的使用場景或業務場景，使用戶獲得產品體驗的整體一致性。
在實際使用場景中，我們可以將標簽樣式大致分為五種：頂部標簽、左對齊標簽、右對齊標簽、內聯標簽、圖標標簽以及浮動標簽。
3.1.1 頂部標簽
頂部標簽是標簽在輸入域的上方，與輸入域進行左垂直對齊；例如，藍湖和Jira Software采用的就是頂部標簽。
優點：有最快的瀏覽和處理速度；節省水平空間，標簽長度彈性大。
缺點：占用較大的垂直空間，表單項較多時增加頁面滾動。
適用場景：希望用戶快速填寫表單，完成任務；當輸入項存在主次之分時；對標簽擴展性要求高。
3.1.2?左對齊標簽
左對齊標簽是采用文字左對齊的方式放置在輸入域的左邊。這種結構有利于用戶對標簽整體的查看，從而清楚表單整體所需要填寫的內容。
優點：文字開頭按閱讀視線對齊，方便用戶快速瀏覽表單；節約垂直空間。
缺點：標簽與表單域聯系不緊密，視覺跳動大，填表不流暢；標簽和輸入域的彈性長度小。
適用場景：表單中存在較多的復雜敏感數據，希望用戶放慢速度，仔細思考。
3.1.3 右對齊標簽
右對齊標簽是目前使用比較多的一種形式，此結構使得標簽與輸入域的距離是固定的，有明確的視覺關聯。
優點：明確的視覺關聯，有利于用戶進行填寫，節約垂直空間。
缺點：左邊標簽參差不齊，給通覽標簽造成障礙，降低表單可讀性；標簽和輸入域的彈性長度小。
適用場景：既要減少垂直空間，又要加快填寫速度。
3.1.4 內聯標簽
內聯標簽是將標簽放在輸入域內部顯示，標簽代替了占位提示文字，來告訴用戶應該填寫什么內容，常見于注冊登錄頁，如下圖。
優點：同時節省橫向和縱向的空間。
缺點：消失的標簽，用戶產生困惑，拓展性差。
適用場景：表單錄入項較少時可考慮使用，建議錄入項不超過3個。
3.1.5 圖標標簽
圖標標簽是內聯標簽的一種演化形式，采用圖像表意的方法來描述表單填寫內容，如下圖的表單采用就是這種樣式。
優點：同時節省水平和垂直的空間；標簽設計成圖標，使表單更靈活和簡潔。
缺點：抽象的圖標標簽，增加認知負擔和記憶成本。
適用場景：表單錄入項的內容信息區分度大，能用圖形表意的形式輕松識別內容。
3.1.6 浮動標簽
浮動標簽是指用戶在錄入時，內部標題（輸入性提示信息）進行浮動位移，在登錄注冊頁中相當常見，例如谷歌、小鵝通、藍湖等均采用此形式。
優點：同時節省水平和垂直的空間；無需用戶對標簽進行記憶。
缺點：需要一定的開發成本。
適用場景：復雜性和簡易性表單均適用。
3.2 輸入域
輸入域是用來采集用戶數據信息的入口，包含了文本錄入、選框錄入以及文件上傳3種錄入類型，如下圖所示：
對于用戶來說，再好填寫體驗對用戶來說也是一種負擔。所以我們應盡可能的減少用戶思考和理解的成本，降低用戶填寫時的焦躁情緒，同時兼顧表單的錄入效率，輸入域的選擇就尤為重要。
3.2.1 文本錄入
文本錄入為用戶提供了編輯文本的控件，是表單域中最基礎和常見的類型。分為文本框和文本域，當輸入字符總數較少時，使用單行的文本框形式；當輸入錄入長篇幅的單一的文本時，使用多行的文本區域。
優勢：靈活性大，允許輸入任意類型和數量的字符（除非程序做了限制）。
劣勢：當錄入項過多時，造成用戶負擔。
適用場景：適用于文本編輯的錄入場景。
3.2.2 選擇錄入
選擇錄入是讓用戶在一個預定的范圍中進行選擇錄入。包含了選擇列表、單/復選框、開關按鈕、滑塊選擇、日期選擇器、穿梭框等。
3.2.2.1 選擇列表
選擇列表通常也稱為下拉菜單，它允許用戶從預定的列表中選擇一個選項或多個選項，為用戶在選項的數量上提供了更多的靈活性；根據選擇類型，可以分為單選擇器、多選擇器、聯級選擇器以及樹選擇器3種類型。
優勢：占用空間小，在展開所有選項后，可以按重要程度排列。
劣勢：當選項過多時需要滾動，會放慢用戶輸入速度；不點擊下拉，用戶不知道選項都有什么，不方便比較。
適用場景：適用于選項個數較多的場景（一般多于5項）；適用于推薦使用默認選項的場景；適用于選項中存有大量相似的選項的場景。
3.2.2.2 單選框
單選框是將所有選項都列出來，每個選項前面添加單選框，選項之間互斥，允許用戶從多個選項中選擇一個選項。
優勢：選項全部都列出來，方便用戶查看對比。
劣勢：占用空間大。
使用場景：適用于每個選項的重要性一樣，用戶需要進行對比才能選擇的場景；適用于需要優先考慮可見性和快速響應的場景。
3.2.2.3 復選框
復選框[Check Box]由一個方形的選擇框和選項組成，復選框在選中狀態下有標記。
優勢：選項全部都列出來，方便用戶查看對比。
劣勢：占用空間大。
使用場景：適用于有多個選項，同時可以任意選擇(或不選)多個(或一個)選項的場景。
3.2.2.4 開關按鈕
開關按鈕一般用來表示一個動作（比如開始或停止一件事），兩個選項是互相對立的，作用類似于實際生活中的燈控按鈕。允許用戶在兩個相反的狀態之間進行選擇，如：有效或無效、是或否、開或關等。
優勢：操作時體現了狀態，同時可以很明顯的表示所處狀態。
劣勢：只有兩個選項，并且是對立的，使用情況受限。
使用場景：適用于切換單個選項狀態的場景，例如更改首選項、系統功能等。
3.2.2.5 滑塊選擇
滑塊選擇可以讓我們通過在連續或間斷的區間內滑動錨點來選擇一個合適的數值。這種交互特性使得它在設置諸如音量，亮度，色彩飽和度等需要反映強度等級的選項時是一種極好的選擇。滑塊的常見樣式有三種，分別是單個連續滑塊、兩個連續滑塊、間續滑塊。
優勢：便于用戶快速瀏覽大量的選項，提供流暢的用戶體驗。
劣勢：有較強的不確定感。
使用場景：適用于輸入結果相對模糊或不準確的場景。
3.2.2.6 穿梭框
穿梭框用直觀的方式在兩欄中移動元素，完成選擇行為。
優勢：展示更多的可選項、方便用戶對比已選項與未選項以及更改已選內容；
劣勢：占用空間大；
適用場景：適用于需要在多個可選項中進行多選時的場景。3.2.2.7 日期選擇器日期選擇器為用戶提供了一種可視化的方式去瀏覽和選擇一個日期或者日期范圍。當用戶需要輸入一個時間，可以點擊標準輸入框，彈出時間面板進行選擇。
3.2.3 文件上傳
文件上傳是將本地的相應信息(包含本地和云儲存)通過網頁或者上傳工具發布到遠程服務器上的過程?？梢苑譃楹唵吸c擊上傳、顯示縮略圖上傳、拖拽上傳三種。
3.2.4 關于輸入域的幾個思考
3.2.4.1 輸入框的寬度
在實際的業務場景中，大部分輸入框所需填寫內容都存在理想長度，輸入框的寬度暗示填寫內容的長度，合理的寬度將給用戶正確的預期，減少焦慮感、減輕判斷負擔。
這里要注意，如果內容沒有規則無法判斷長短，則輸入框應保持長度一致，給足填寫空間即可，避免長度不一導致用戶混亂。
如何讓輸入框的長度有規律可循？參考Ant design表單設計研究的結論得的5種高頻的寬度需求區間，以尺碼類比分別是：XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。
我們可以根據自己的業務訴求，參考這個XS尺碼的尺寸范圍（80-160px）來定制自己的輸入框尺寸x，然后通過倍數+間距疊加的方式得到不同的寬度尺碼和對齊關系。
例如，我們產品業務中經常要填寫金額，考慮金額輸入的極值來定制我們的最小輸入框尺寸為104px，那么我們就得到了104px*2+8px=216px、104px*3+16px=328px….五種尺寸（如下圖）。
3.2.4.2 可變化的文本框
從使用體驗講，可變化的文本框使頁面整體效果更統一。
固定文的文本框當輸入文本超過其設置的寬度，會出現內滾動條，當頁面上出現兩個滾動條時（大頁面的滾動條），在使用操作上會帶來一定的混亂。
3.2.4.3?輸入格式
根據用戶的記憶結構（7±2法則），采用合理的格式約束，能夠方便用戶更快的完成填寫，而減少錯誤出現。
3.2.4.4 智能聯想
智能聯想是指根據關鍵詞，輸入框可以實現模糊搜索、智能聯想、自動匹配等選項；讓數據庫跑在用戶的前面，能節省用戶更多的時間，相應的提高工作效率，同時也能減少出錯率。
常見的場景有郵箱后綴的聯想、基于IP地址自動填充國家和地區、電話號碼前綴聯想、基于關鍵詞查詢相關短語等。
3.2.4.5 紅色星號
表單的必填字段大多情況下會使用紅色星號表示。但當必填項多于選填項時，頁面就會出現大量的紅色星號從而增加用戶的認知負擔。同時，紅色星號會帶來一些恐懼感，增加表單填寫的出錯率。因此在表單設計中，當必填項多于選填項時，可采用隱藏紅色星號標記，改用暗提示標記可選項的形式來幫助用戶識別，這種形式減少了視覺噪聲，增強了表單的可讀性。
3.3 提示信息
根據輸入流程將用戶輸入過程分為輸入前、輸入中、輸入后三個階段，提示信息在輸入前發生的稱為引導提示，提示信息在輸入中/后發生的叫反饋提示，如圖所示：
3.3.1 引導提示
引導信息是在用戶填寫表單前對表單填寫內容進行解釋說明的提示信息，一般分為輸入性提示與幫助性文字。
3.3.1.1 輸入性提示
輸入性提示信息即占位符，在文本框獲取焦點后提示文字會消失，提示文字最好能簡潔明了給出有效的提示信息，如果是大篇幅的解釋性內容應放在幫助性文字中。
3.3.1.2 幫助性文字
在表單的設計中當標簽不足以對輸入項準確說明時，幫助性文字起到非常重要的作用。幫助性文字可以有多種形式，比如文本提示、圖標提示、隱藏氣泡提示等。
文本提示：包容性強，可運用于詳細的解釋說明、超鏈接、字數限制等。
圖標提示：一般在提示文本較多的情況下使用，比如文本提示超過一行，同時不想多行展示時就可以采用此方式。
隱藏氣泡提示：當鼠標懸停到輸入框上時輸入框上方出現氣泡提示，比如百度賬號的注冊頁。
這里要注意，如果是針對整個表單的解釋說明，幫助性文字一般位于整個表單的最開始位置；如果只是針對某個輸入域的提示，根據格式塔原理，則應將兩者放在一起，讓用戶知道當前處于什么地方，在針對什么進行引導、輔助。
3.3.2 反饋提示
反饋提示是在用戶輸入時或輸入后對輸入內容進行的反饋，提示當前輸入域所填寫的內容是否符合填寫規則，一般有正確、錯誤、警告三種狀態。其中，正確狀態通常不給予任何提示，也可采用圖標進行反饋，讓用戶感受更加直觀；反之當用戶錄入的內容與規則不符時，給予錯誤提示信息。警告狀態往往與文本框相結合，當字數超過規則的限制時，給出相對應的反饋。
這里要注意反饋提示的信息精準度問題，不要讓用戶產生歧義；例如“用戶名填寫錯誤”要提示用戶名具體錯誤的原因“用戶名不能添加符號”“用戶名重復”“用戶名不能超過8個字符”等具體原因，讓用戶明確修改意圖。
3.3 動作
動作是完成表單的關鍵一步，因為我們填寫完表單之后要“提交”。我們可以把一些重要的行為視為“主動作”，如：提交、保存、下一步等。另一些與完成表單填寫的目標相悖的行為可以視為“次動作”，如：取消、撤銷、返回等。
這里的動作也就是所謂的動作按鈕，當表單的必填項未填寫完整時，提交或保存等主按鈕一般為灰色狀態，不可進行下一步操作，當完成必填信息的填寫后按鈕變為高亮可進行下一步操作。
當表單項非常少時（一般為3個或以下），主按鈕禁用原則生效，這里的禁用狀態非常容易被用戶理解，用戶輸入內容就會得到反饋；但表單項超過5個時則不建議使用主按鈕禁用原則，因為表單可能包含必填和選填項等多種選項，主按鈕禁用用戶不易識別，會造成用戶疑問，此時采用提交時校驗反饋的做法會更合適。
四、表單的交互
在B端產品中，表單的交互大致可以分為6種，分別是原位編輯、氣泡卡片、彈窗、抽屜、頁面跳轉以及新開頁面，根據具體的使用場景選擇合適的頁面交互。
4.1 原位編輯
原位編輯的編輯內容也為展示內容，屬于輕量型信息采集表單。一般出現在表格內、卡片中，在信息展示區域中通過鼠標hover、點擊特定字段或操作按鈕即變為激活編輯狀態。
優勢：快捷易操作，隨時啟用與退出，主流程的操作流暢度高。
劣勢：編輯狀態較為隱晦，不宜察覺。
適用場景：適用于輸入內容較少，適用于頻率較低，同時屬于主流程分支的場景。
4.2 氣泡卡片
氣泡卡片可以理解為一個超輕量的對話框（彈窗），允許用戶在當前界面快速對某部分進行編輯，同時不打斷主任務流，也可隨取隨用，隨時退出。
優勢：簡單快捷易操作、主流程的操作流暢度高。
劣勢：擴展性不強，承載的信息不易過多。
適用場景：適用于快速編輯和輸入的場景。
4.3 彈窗
彈窗交互的表單樣式是比較常見的交互樣式，它的拓展性更強，承載的信息更多，可以分為模態彈窗和非模態彈窗兩種。
4.3.1 模態彈窗
模態彈窗通常以對話框的形式呈現，體現了頁面間的層級關系。它能讓用戶不離開主流程的情況下繼續插入性操作。
優勢：簡單易操作、承載的信息量有較大的彈性空間。
劣勢：浮層彈窗給主操作流程造成較強的割裂，降低輸入的流暢度。
適用場景：適用于主流程步驟中需要分支任務行為的場景。
4.3.2 非模態彈窗
非模態彈窗的指的是能讓用戶不離開主頁面的情況下，在當前頁面中打開多個浮層彈窗，對其內容進行編輯操作。
優勢：同時進行多個操作，阻斷性弱。
劣勢：學習成本高，容易產生混亂，誤操作概率高。
適用場景：適用于多任務處理情況有較高的要求的場景。
4.4 抽屜
抽屜指的是從當前界面的“上下左右”側邊滑出相應的表單內容完成相應操作，之前的內容不丟失。
優勢：承載的信息量有較大的彈性空間。
劣勢：由于信息集中在一側，導致視覺焦點不穩定，如果長時間工作，會產生不平衡的感覺。
適用場景：適用于當前任務流中插入臨時任務的場景。
4.5 頁面跳轉
頁面跳轉是指在當面頁面刷新，展示新內容，多運用于初始化類型的表單錄入操作。
優勢：信息承載能力強；有利于用戶對業務流程有更清晰的認識，從而使得主流程的操作流暢度高。
劣勢：及時性反饋較低。
適用場景：適用于特別重要的功能表單的填寫場景。
4.6 新開頁面
新開頁面指的是當前頁面保留，新的內容在新頁面中呈現。停留的頁面可以為當前頁面，也可以為新頁面，是情況而定。
優勢：頁面之間相互獨立，互補不干擾。
劣勢：用戶的焦點丟失，注意力分散（因為系統中大部分的操作在同一個頁面中完成）。
適用場景：適用于需要參照一些文檔來幫助用戶完成表單錄入操作的場景。
五、表單內容組織形式
在表單設計中，根據數據信息的容量來選擇合理的內容組織形式，以此來保證信息屏效比和用戶操作效率。表單內容的組織形式可以分為3種，分別為基礎平鋪、分組歸納、步驟引導。
5.1 基礎平鋪
基礎平鋪指的是將所有需要填寫的表單內容項直接羅列在頁面上，針對內容項較少、內容項無法按照相關性分組的表單可以采用這種方式。
優勢：簡潔直觀、便于操作。
劣勢：全部平鋪的信息會造成一定的用戶負擔。
使用場景：當需要完成一個簡單快速的任務，例如輸入少量信息即可完成創建、注冊登陸表單。
5.2 分組歸納
分組歸納是對表單內容進行分組，將相關聯的內容放在一組，再按組羅列排布，有3種演變形式分別是：標題分組、卡片分組、標簽分組。將相同信息表單數據進行分組，這樣即使有很多信息疊加在一起，用戶在輸入上的心理壓力與視覺疲勞都會得到緩解。
優勢：內容分類歸組，便于快速定位，減輕焦慮感和填寫壓力。
劣勢：占用垂直空間。
使用場景：適用于一次需要填寫很多內容的表單，且不同內容之間存在分類歸納性。
5.3 步驟引導
步驟引導是將用戶需要填寫和確認的信息按照線性流程組織，利用步驟條告知用戶完整流程和進度，常常在最后提交前讓用戶再次確認信息，并在流程結束給與明確的結果反饋。
優勢：任務流程清晰，明確當前用戶目標，減少用戶負擔；及時的反饋校驗，也避免填寫完成后才發現中間的表單填寫有誤，降低用戶的犯錯成本。
劣勢：無法通篇瀏覽表單內容，回溯成本高。
使用場景：適用于具有明確的線性邏輯的任務的場景。
六、結語
以上就是我對表單設計知識點的一些總結，感謝大家抽出時間來閱讀這篇文章，也希望這篇文章可以給你帶來幫助。
下一篇文章我將通過實際項目復盤為大家分享：如何運用這些知識點，結合業務進行場景化的表單設計。
參考文獻
https://ant.design/index-cn
https://zhuanlan.zhihu.com/p/110096160
https://www.uisdc.com/text-fields-forms-design
https://mp.weixin.qq.com/s/8Nndu1yjjBMlBZ35FpSijw
https://www.uisdc.com/mobile-form-design-guide
http://www.woshipm.com/pd/4369965.html
https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0
最后歡迎有問題的小伙伴加微信：yw5201a1?溝通交流。
此外我們的官方網站也上線了，每日分享高質量的文章、原型素材和行業報告，小伙伴可自行前往索取，支持搜索，需要的小伙伴可點擊底部的閱讀原文直接查看，或者復制網址：www.dadaghp.com?打開。
更多干貨可關注微信公眾號：產品劉
想學習更多關于產品、職場、心理、認知等干貨，可長按右邊二維碼，關注我們。
··················END··················
RECOMMEND
推薦閱讀
試用期離職，該如何解釋？
手把手教你做產品經理1.0
面試題，你有看過啥產品經理書籍嘛？
常用中后臺交互設計控件使用場景與規范總結
點擊“閱讀原文”
查看更多干貨
總結
以上是生活随笔為你收集整理的B端——复杂业务表单设计的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一文搞懂C语言typedef关键字
- 下一篇： 中国建筑行业2020年度回顾及未来展望