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

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

4. 值對齊方式

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

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

5. 必填標(biāo)識位置

文字右側(cè)，文字左側(cè)

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

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

三、信息輸入控件屬性設(shè)計

表單的輸入?yún)^(qū)，是整個表單的核心，是與用戶發(fā)生交互的區(qū)域，根據(jù)標(biāo)簽內(nèi)容來輸入不同的值與交互方式，一共列舉了以下的控件：

對以上控件提供合適的輸入格式、合理的輸入提示、適當(dāng)?shù)淖詣虞斎?、來提升用戶完成表單的效率?/p>

可以對其屬性進行設(shè)置，來達(dá)到設(shè)計表單的不同任務(wù)。

1. 標(biāo)簽值

標(biāo)簽值顯示的內(nèi)容，明確該項應(yīng)輸入或者選擇什么內(nèi)容，也可以沒有標(biāo)簽，例如登錄頁，可以用圖標(biāo)、默認(rèn)提示來代替文字。

2. 提示文字

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

3. 默認(rèn)值

根據(jù)標(biāo)簽內(nèi)容自動給用戶填寫或者選擇一個預(yù)設(shè)的值，來減少用戶的輸入而提高效率。

4. 是否只讀

控制該標(biāo)簽是支持輸入還是只展示，展示上通常用置灰效果來區(qū)別。

5. 文本類型

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

6. 字符大小限制

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

7. 是否必填

為了不增加用戶填寫表單的負(fù)擔(dān)，盡量告知用戶必填字段，做好標(biāo)記。

8. 數(shù)據(jù)驗證

程序上分為前端驗證和后端驗證，如是前端驗證，無須提交驗證，在光標(biāo)離開輸入?yún)^(qū)域時即可驗證是否負(fù)責(zé)規(guī)則，例如手機號位數(shù)是否正確，內(nèi)容格式是否合規(guī)，密碼錯誤等。且將錯誤提示及時反饋顯示在對應(yīng)的標(biāo)簽項附近，方便用戶及時修改。

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

四、信息輸入控件展示

1. 文本輸入框

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

其中，多行輸入框可以增加是否顯示字?jǐn)?shù)統(tǒng)計屬性，實時提醒用戶當(dāng)前的輸入進度。

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

2. 金額輸入框

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

由此可見，金額輸入框應(yīng)增加特有的屬性：

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

3. 選擇框組

當(dāng)輸入的表單內(nèi)容由系統(tǒng)設(shè)定并超過一條時，可以用選項的方式供用戶選擇，根據(jù)是否支持多選簡單分成單選與多選。

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

多選框：有一個或多選項供用戶選擇，可在同一選項上重復(fù)點擊進行選中/未選中操作?？梢栽O(shè)置是否支持全選設(shè)置。

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

1. 彈窗選擇：當(dāng)選項較多時且不便中斷當(dāng)前操作，可使用半模態(tài)彈窗給用戶選擇。
2. 標(biāo)簽式選擇：當(dāng)選項較少且單條字?jǐn)?shù)在 3-5 個字時，可以做成標(biāo)簽式給用戶選擇。
3. 跳轉(zhuǎn)頁面：當(dāng)選項很多且內(nèi)容字?jǐn)?shù)不可控時，使用跳轉(zhuǎn)新頁面更好，不會增加當(dāng)前頁面的負(fù)擔(dān)。
4. 下拉選擇：多在 PC 端應(yīng)用，有效幫助用戶縮小選擇范圍

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

4. 日期選擇

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

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

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

其他基本屬性：

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

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

5. 附件

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

其特殊屬性有：

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

不同的狀態(tài)有不同的操作：

1. 正在上傳時：暫停、取消上傳
2. 上傳失敗：重新上傳，取消上傳
3. 上傳完成：刪除，繼續(xù)上傳

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

6. 明細(xì)組

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

7. 地點

表單中經(jīng)常會遇到要填寫地址信息的情況，而地址信息涉及省市區(qū)與詳細(xì)地址都比較長，在選擇過程中會有很多個步驟需要交互，在適當(dāng)?shù)膱鼍爸性黾右恍┬〖记蓵岣哂脩籼顚懶?。比如自動定位、用自動識別面板等，直接將用戶復(fù)制的地址信息填入表單中。地址表現(xiàn)格式有：

1. 省市
2. 省市區(qū)
3. 省市區(qū)-街道
4. 省市區(qū)-街道-詳細(xì)地址

8. 分組

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

9. 其他模塊

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

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

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

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

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

后綴圖標(biāo)/文字：在輸入?yún)^(qū)的右邊可以用圖標(biāo)展示，來代替一些操作。比如，選擇常用賬號，選擇通訊錄，下拉展開與收起等。

四、表單的交互反饋

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

1. 初始狀態(tài)：進入表單當(dāng)用戶未觸發(fā)任何操作時，表單的默認(rèn)頁面。部分輸入?yún)^(qū)中有提示文字，或者有預(yù)設(shè)值。
2. 聚焦?fàn)顟B(tài)：光標(biāo)插入輸入?yún)^(qū)，提示文字消失，當(dāng)前輸入框應(yīng)展示不同交互；
3. 只讀狀態(tài)：無法輸入，一般置灰展示
4. 完成狀態(tài)：輸入完成光標(biāo)離開，數(shù)據(jù)填寫完成，若有驗證規(guī)則則立即反饋，數(shù)據(jù)無誤則回到正常輸入后的狀態(tài)。

五、總結(jié)

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

歡迎關(guān)注團隊微信公眾號：兆日 UCD