表單是設計中很常見且重要的元素。作為收集信息的一環，表單的用戶體驗非常重要，需要根據觸發條件、使用的終端設備、場景等結合，來設計用戶不同的輸入、選擇、編輯行為，以保證順利且高效地完成表單填寫任務。

在一款軟件設計中，表單控件的統一與運用會提高設計與開發的效率，今天我們就如何設計一款表單編輯器來和大家一起探討。

更多B端干貨：

一、什么是表單

表單，主要是收集或展示數據信息，由不同的控件組成的信息采集工具。其運用場景非常廣泛，但不限于用表單完成常見的調查問卷、個人信息錄入，審批業務申請等任務。

二、基本構成與屬性

一張表單結構上會有標簽，輸入區，操作按鈕幾部分組成。我們將從這幾個方面入手分析，去自定義不同場景的表單屬性。

1. 字段標簽的對齊方式

左對齊、右對齊、頂部對齊

標簽是告訴用戶需要輸入什么內容，讓用戶更快速的理解。而表單整體里的標簽的長短決定著其對齊方式。各種對齊方式都有優缺點，馬泰奧·彭佐 根據表單標簽對齊方式研究過，從效率角度看，頂對齊標簽>右對齊>左對齊，但是布局上頁面更長。

2. 標簽最大換行字數

當標簽文字字數多導致長度過長時，可設置超過一定數值則換行展示，以達到統一的視覺效果。

3. 標簽末尾是否展示冒號

由于早期屏幕閱讀器必須依賴各種技巧才能理解標記不明的表單，所以才用冒號做標記。但是現在可以用“label”標簽做正確的標記，通過標記（markup）把標簽（label）和相應的字段對應起來，則無需再借助冒號。

所以用不用冒號并不影響表單的使用效率，交給用戶決定即可，但是需要統一。

4. 值對齊方式

左對齊、右對齊、頂部對齊

由于在 pc 端與 web 端都是從左到右的閱讀習慣，這里不討論這兩種情況。更多地用于移動端，可以根據場景來選擇輸入值的展示方式。

5. 必填標識位置

文字右側，文字左側

一般用紅星*來標記表單中必填標簽。在文字左側還是右側，可以結合標簽值的對齊方式來決定。

還有一些其他的全局屬性，比如是否支持表單打印，是否支持保存草稿，是否支持再次申請等等。

三、信息輸入控件屬性設計

表單的輸入區，是整個表單的核心，是與用戶發生交互的區域，根據標簽內容來輸入不同的值與交互方式，一共列舉了以下的控件：

對以上控件提供合適的輸入格式、合理的輸入提示、適當的自動輸入、來提升用戶完成表單的效率。

可以對其屬性進行設置，來達到設計表單的不同任務。

1. 標簽值

標簽值顯示的內容，明確該項應輸入或者選擇什么內容，也可以沒有標簽，例如登錄頁，可以用圖標、默認提示來代替文字。

2. 提示文字

用來提示用戶標簽值填寫的說明、注意事項等，幫助用戶更好理解該標簽值的意思。當光標插入或有內容輸入時就消失。并不是所有標簽值都需要提示文字，為了視覺的統一，使用“請輸入”、“請選擇”也可以。

3. 默認值

根據標簽內容自動給用戶填寫或者選擇一個預設的值，來減少用戶的輸入而提高效率。

4. 是否只讀

控制該標簽是支持輸入還是只展示，展示上通常用置灰效果來區別。

5. 文本類型

根據不同標簽，文本類型可以限制是純字母，純數字等類型。也可以在輸入的時候根據文本類型來控制鍵盤是否需要切換為數字鍵盤等方式。雖然用戶可以系統輸入法與第三方輸入法之間自由切換，但站在用戶體驗角度，調出內置的純數字鍵盤可減少無關元素（字母/符號）的干擾。
當是純數字時，還要進一步設置以下幾個內容：

6. 字符大小限制

限制輸入字符的最小與最大值。對于有規定字數的特殊場景，需要提醒用戶可輸入字數，做到實時提醒。避免用戶在輸入之后才發現不合適規則，還要重新組織語言。例如多行輸入框、注冊賬號、設置密碼等場景。

7. 是否必填

為了不增加用戶填寫表單的負擔，盡量告知用戶必填字段，做好標記。

8. 數據驗證

程序上分為前端驗證和后端驗證，如是前端驗證，無須提交驗證，在光標離開輸入區域時即可驗證是否負責規則，例如手機號位數是否正確，內容格式是否合規，密碼錯誤等。且將錯誤提示及時反饋顯示在對應的標簽項附近，方便用戶及時修改。

而后端驗證，需要提交到服務器時，校驗判斷數據是否合規，通常是用 toast 或者對話彈窗頁面來提示用戶錯誤內容。

四、信息輸入控件展示

1. 文本輸入框

輸入框類型根據輸入值的格式，有這幾種類型：單行輸入框、多行輸入框、特定值輸入框（包括但不限于手機號、身份證、郵箱）。

其中，多行輸入框可以增加是否顯示字數統計屬性，實時提醒用戶當前的輸入進度。

手機號可增加是否展示空格分隔屬性，即用 344 的分割法來展示手機位數，方便用戶一眼查看輸入位數是否正確。

2. 金額輸入框

金額作為一個比較特殊的字段，往往在表單的展示中，需要有強調作用，放大，且有安全提示等效果。

由此可見，金額輸入框應增加特有的屬性：

1. 幣種展示￥符號或者“元”文字
2. 當幣種為人民幣時，可設置是否顯示大寫
3. 是否顯示計數單位，即用戶輸入金額時，實時顯示“個十百千萬”等計數單位
4. 可設置金額范圍區間，最小值與最大值

3. 選擇框組

當輸入的表單內容由系統設定并超過一條時，可以用選項的方式供用戶選擇，根據是否支持多選簡單分成單選與多選。

單選選擇：使用傳統的單選框時，可以選擇選中的樣式是圓點還是打鉤，橫向平鋪或者縱向平鋪。且要考慮有選中、未選中、不可選狀態。

多選框：有一個或多選項供用戶選擇，可在同一選項上重復點擊進行選中/未選中操作。可以設置是否支持全選設置。

無論單選還是多選，都可以根據選項數量的多少及單項的長短，來選擇不同的展示方式。
展示方式通常有以下幾種：

1. 彈窗選擇：當選項較多時且不便中斷當前操作，可使用半模態彈窗給用戶選擇。
2. 標簽式選擇：當選項較少且單條字數在 3-5 個字時，可以做成標簽式給用戶選擇。
3. 跳轉頁面：當選項很多且內容字數不可控時，使用跳轉新頁面更好，不會增加當前頁面的負擔。
4. 下拉選擇：多在 PC 端應用，有效幫助用戶縮小選擇范圍

除此之外，當選項過多時，還要考慮是否增加搜索功能；

4. 日期選擇

表單中經常需要用到日期選擇，可根據不同場景設計日期控件。日期細分可分成年、月、周、日、時段（上午/下午）、時、分。

根據這些單位可組合成各種展示格式。

1. 年/月/日
2. 年/月/日 上午/下午
3. 年/月/日 時分
4. 年/月/日 星期
5. 年/月/日 星期 時分

其他基本屬性：

1. 可提供預設值：默認當前時間、選擇固定日期，以減少用戶操作。
2. 日期選擇范圍：不限時間、過去時間、當前時間之后。（如果不控制日期，可選擇的范圍太多，增加用戶負擔）

如果是選擇 2 個日期區間，則可以增加計算區間時長屬性。例如常用的請假申請。

5. 附件

常見的附件有圖片，文件，電子發票等類型，由于附件的類型眾多，文件大小不一，在上傳文件時增加用戶效率顯得尤為重要。且盡量對文件上傳的狀態給出即時反饋，以告知用戶當前操作的進度。

其特殊屬性有：

1. 最大上傳數量：一次性支持上傳幾個附件
2. 最大上傳內存：單個附件最大內存
3. 支持上傳文件類型：常見的有 img、word、PDF、txt、excel、PPT、video、music 等。

不同的狀態有不同的操作：

1. 正在上傳時：暫停、取消上傳
2. 上傳失?。褐匦律蟼?，取消上傳
3. 上傳完成：刪除，繼續上傳

圖片類型的上傳，可以在展示形式上稍加變化，更加貼近圖片樣式，讓用戶一眼就知道需要上傳圖片類型。

6. 明細組

當表單內容需要增加多個相同項目時，可以用一個明細組將其組裝起來，可保證每一個明細組里的表單控制都是一致的。

7. 地點

表單中經常會遇到要填寫地址信息的情況，而地址信息涉及省市區與詳細地址都比較長，在選擇過程中會有很多個步驟需要交互，在適當的場景中增加一些小技巧會提高用戶填寫效率。比如自動定位、用自動識別面板等，直接將用戶復制的地址信息填入表單中。地址表現格式有：

1. 省市
2. 省市區
3. 省市區-街道
4. 省市區-街道-詳細地址

8. 分組

若表單填寫的內容過多，需要用戶花費較多時間完成，會造成用戶產生厭惡情緒甚至放棄填寫。則可以將相近內容，相同邏輯的表單項進行分組，支持折疊展開分組，盡量不要將內容一次性展示給用戶。會讓用戶覺得更容易填寫，對表單有清晰的完成預期。

9. 其他模塊

在表單中還有其他小但有用的控件，來構建更加完善的表單。

開關：作為選擇組，只存在 2 個選項且選項具有判斷性質，觸發之后能夠立即生效，即可使用波動開關，有開啟、關閉兩種樣式。

步進器：一般用于輸入數量較小的場景，例如，購物車修改數量?？梢栽O置是否允許直接編輯，每次遞增遞減的倍數數字，步進器值的范圍等。

說明文字：用戶可能產生的疑問，而提示文字不足以說明清楚時，可作為一個補充信息再次展示。對于一些專業詞匯或較難理解的概念，要給予明確的解釋。例如：溫馨提示，注意事項。

分割線：跟分組的作用差不多，但是視覺分量上比分組小，且不需要增加標題時可使用分割線來對表單項目進行分類。

后綴圖標/文字：在輸入區的右邊可以用圖標展示，來代替一些操作。比如，選擇常用賬號，選擇通訊錄，下拉展開與收起等。

四、表單的交互反饋

表單控件不僅僅要考慮展示方式，也要考慮交互前的初始狀態、交互中的操作、交互后狀態等。

1. 初始狀態：進入表單當用戶未觸發任何操作時，表單的默認頁面。部分輸入區中有提示文字，或者有預設值。
2. 聚焦狀態：光標插入輸入區，提示文字消失，當前輸入框應展示不同交互；
3. 只讀狀態：無法輸入，一般置灰展示
4. 完成狀態：輸入完成光標離開，數據填寫完成，若有驗證規則則立即反饋，數據無誤則回到正常輸入后的狀態。

五、總結

通過以上一系列的設置，則可以構建一款自定義的表單，去適配不同的場景下不同的交互規則，而不用死板的為了統一而統一。每一種設置都沒有絕對的好壞，只有適不適合當下場景，能否解決問題，改善用戶體驗，真正的提高用戶填寫表單的效率，最終完成表單的填寫。

歡迎關注團隊微信公眾號：兆日 UCD