97爱亚洲综合在线,av无码国产在线看免费app

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

B端——復雜業務表單設計

Nick

2021-03-19

9 評論 26072 瀏覽 276 收藏

33 分鐘

編輯導語：表單在我們的日常工作中經常會用到，一個優質的表單可以提高我們的工作效率，完成一些更多的業務，提高產品體驗；但表單的設計也比較復雜，本文作者分享了關于B端復雜業務表單設計，我們一起來了解一下。

一、前言

表單是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 滑塊選擇

滑塊選擇可以讓我們通過在連續或間斷的區間內滑動錨點來選擇一個合適的數值。這種交互特性使得它在設置諸如音量，亮度，色彩飽和度等需要反映強度等級的選項時是一種極好的選擇?；瑝K的常見樣式有三種，分別是單個連續滑塊、兩個連續滑塊、間續滑塊。

優勢：便于用戶快速瀏覽大量的選項，提供流暢的用戶體驗。
劣勢：有較強的不確定感。
使用場景：適用于輸入結果相對模糊或不準確的場景。

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 反饋提示

反饋提示是在用戶輸入時或輸入后對輸入內容進行的反饋，提示當前輸入域所填寫的內容是否符合填寫規則，一般有正確、錯誤、警告三種狀態。其中，正確狀態通常不給予任何提示，也可采用圖標進行反饋，讓用戶感受更加直觀；反之當用戶錄入的內容與規則不符時，給予錯誤提示信息。警告狀態往往與文本框相結合，當字數超過規則的限制時，給出相對應的反饋。