本文是作者在表單設(shè)計(jì)過(guò)程中，根據(jù)自身的工作經(jīng)驗(yàn)，同時(shí)尋找搜集了一些案例資料，完成了表單設(shè)計(jì)的歸納與總結(jié)，以供有需要的小伙伴做參考。

最近，筆者在做一個(gè)Web端業(yè)務(wù)較為復(fù)雜的產(chǎn)品系統(tǒng)交互、視覺設(shè)計(jì)工作，涉及到很多表單類型頁(yè)面。

表單的內(nèi)容容量不定且組件形式多樣，工作時(shí)，在用戶輸入流程、頁(yè)面排版、以及形式統(tǒng)一等多方面有較多的掣肘。在優(yōu)化功能交互流程，理清交互布局層次的基礎(chǔ)上，力求提升用戶輸入信息的體驗(yàn)，提升輸入效率，同時(shí)，希冀給用戶帶來(lái)小驚喜。

在表單設(shè)計(jì)過(guò)程中，根據(jù)自身的工作經(jīng)驗(yàn)，同時(shí)尋找搜集了一些案例資料，完成了表單設(shè)計(jì)的歸納與總結(jié)，以供有需要的小伙伴做參考。

本文結(jié)構(gòu)框架

一、表單定義

表單的核心功能是采集數(shù)據(jù)信息，可以看成是采集、傳遞、提交數(shù)據(jù)的中間媒介。其作為獲取用戶輸入的重要交互方式，也承擔(dān)著將問題和答案進(jìn)行配對(duì)的角色。

二、表單構(gòu)成

表單通常由標(biāo)簽、輸入域、填寫提示、操作按鈕等幾部分組成。根據(jù)輸入流程，可將用戶的輸入過(guò)程分為輸入前、輸入中、輸入后。

表單構(gòu)成示例

標(biāo)簽：告訴用戶該表單需要填寫什么類型的信息，通常放置在表單文本框之外居左或上方的位置。極少數(shù)情況下也會(huì)放置于文本輸入框內(nèi)，激活輸入框，則消失。

標(biāo)簽一般為每個(gè)輸入項(xiàng)的名稱（eg：賬號(hào)、身份證號(hào)、服務(wù)器名稱）。按所要填寫信息的必要性又可分為必填項(xiàng)和非必填項(xiàng)。顧名思義，必填項(xiàng)是指用戶必須要輸入有效的文本信息，否則，該表單就不能正常提交、保存等操作；非必填項(xiàng)是指該項(xiàng)信息用戶可填可不填，根據(jù)用戶的意愿和需求度來(lái)自愿選擇填亦或不填。

輸入域：用來(lái)收集用戶操作的信息，每個(gè)輸入域字段包含一類型信息。

輸入域不僅僅是文本輸入框，從交互組件的角度來(lái)看，其包括文本輸入框、單選框、復(fù)選框、開關(guān)、選擇器、步驟條、上傳、Tab切換（主要指按鈕型）、滑塊、步驟條等多種。

填寫提示：幫助用戶有效正確填寫信息的引導(dǎo)內(nèi)容或反饋內(nèi)容。

提示一般可分為引導(dǎo)提示和反饋提示兩類。引導(dǎo)提示發(fā)生在用戶輸入前，引導(dǎo)用戶正確輸入信息或?qū)斎胄畔⒌囊筮M(jìn)行說(shuō)明。反饋提示發(fā)生在輸入中或輸入后，界面根據(jù)用戶的輸入而顯示的提示信息。

操作按鈕是指填寫完表單各項(xiàng)內(nèi)容后，所要進(jìn)行的操作動(dòng)作（eg：保存、取消、提交、確定等）來(lái)結(jié)束當(dāng)前操作流程或在流程之中或之后開啟新的功能操作。

三、表單表現(xiàn)形式

1. 頁(yè)面樣式

表單頁(yè)面的展示形式有三種頁(yè)面跳轉(zhuǎn)、彈窗輸入、就地編輯。影響頁(yè)面形式的因素包括表單輸入容量及操作流程主次關(guān)系（即親密度）。

（1）頁(yè)面跳轉(zhuǎn)

一個(gè)功能的主要操作流程在一個(gè)頁(yè)面中展示，保證主要功能的操作的流暢度。同時(shí)，若輸入內(nèi)容較多，建議采用頁(yè)面跳轉(zhuǎn)。頁(yè)面跳轉(zhuǎn)的信息承載能力強(qiáng)，對(duì)反饋的及時(shí)性要求不高；體量感比較重，給人感覺穩(wěn)定性更高一些，特別重要的功能表單填寫確認(rèn)建議用頁(yè)面跳轉(zhuǎn)。

頁(yè)面跳轉(zhuǎn)包含兩種：新頁(yè)面打開和當(dāng)前頁(yè)面跳轉(zhuǎn)。

新頁(yè)面打開為主要流程步驟中的分支流程，不會(huì)影響用戶對(duì)主流程的繼續(xù)操作，頁(yè)面功能具有一定的獨(dú)立性。

當(dāng)前頁(yè)面跳轉(zhuǎn)則為流程步驟中的關(guān)鍵步驟，提示用戶已進(jìn)入下一步驟。頁(yè)面間的跳轉(zhuǎn)體現(xiàn)了產(chǎn)品的基本使用流程，關(guān)鍵流程關(guān)鍵路徑建議在當(dāng)前頁(yè)面打開，讓產(chǎn)品流程更加清晰，更少的打開頁(yè)減少多余信息對(duì)用戶注意力的分散，讓用戶聚焦在當(dāng)前頁(yè)面的信息中。

（2）輸入彈窗

彈窗樣式的輸入表單詩(shī)當(dāng)前頁(yè)面的分支操作，體現(xiàn)了頁(yè)面間的層級(jí)關(guān)系。輸入彈窗樣式的表單，輸入內(nèi)容的多少處于頁(yè)面跳轉(zhuǎn)和就地編輯兩種樣式之間。內(nèi)容稍多，交互頁(yè)面流程不適合就地編輯，同樣也尚未達(dá)到新頁(yè)面的程度，建議選擇輸入彈窗。

用戶在不離開當(dāng)前頁(yè)的情況下繼續(xù)插入性操作，為流程步驟中的分支行為，可由用戶選擇是否進(jìn)行，不覆蓋用戶已閱讀內(nèi)容。輸入彈窗輕量化，信息承載較頁(yè)面跳轉(zhuǎn)弱、較就地編輯強(qiáng)，輸入內(nèi)容數(shù)量有較大的彈性空間。

該類型的表單會(huì)打斷當(dāng)前的主操作流程需要及時(shí)響應(yīng)，帶給人的感受更局促一些，因此輸入內(nèi)容不宜過(guò)多，且不能過(guò)多地帶離用戶的注意力，否則會(huì)給用戶的主操作流程造成較強(qiáng)的割裂，降低輸入的流暢度。

（3）就地編輯

就地編輯是輕量型信息采集表單，適用于輸入內(nèi)容較少，適用頻率較低，同時(shí)屬于主功能分支的場(chǎng)景。其優(yōu)點(diǎn)在于操作便捷，隨時(shí)啟用與退出，能夠保證用戶對(duì)主要功能的操作流暢度。

就地編輯一般為嵌入在列表內(nèi)、卡片中，信息展示區(qū)域通過(guò)雙擊或點(diǎn)擊特定的操作按鈕即變?yōu)榧せ罹庉嫚顟B(tài)。其存在的意義在于完善或者增強(qiáng)主功能的操作，而不是打斷。

2. 標(biāo)簽樣式

根據(jù)標(biāo)簽與輸入域的位置關(guān)系，其對(duì)齊方式可分為：右對(duì)齊、左對(duì)齊、頂對(duì)齊三種。每一種對(duì)齊方式都有一定的優(yōu)點(diǎn)與局現(xiàn)性，因此在合適的場(chǎng)景下選擇合適的標(biāo)簽樣式，可以提升用戶的輸入效率。

（1）右對(duì)齊

當(dāng)既要減少垂直空間，又要加快填寫速度的場(chǎng)景，使用右對(duì)齊。采用右對(duì)齊方式標(biāo)簽的表單瀏覽時(shí)間，比頂部對(duì)齊標(biāo)簽的表單的時(shí)間長(zhǎng)，但比左對(duì)齊方式所需的瀏覽時(shí)間短。頁(yè)面高度有限的話有限公司推薦這種對(duì)齊方式。

• 優(yōu)點(diǎn)：節(jié)約垂直空間。
• 缺點(diǎn)：降低可讀性，標(biāo)簽長(zhǎng)度和輸入框彈性小。
• 舉個(gè)栗子：騰訊藍(lán)鯨的故障自愈平臺(tái)的告警收斂的新建收斂規(guī)則表單頁(yè)面，采用了左對(duì)齊的布局，方便用戶快速操作，完成新建收斂規(guī)則表單的填寫。

右對(duì)齊案例

（2）頂對(duì)齊

希望用戶快速填寫表單，完成任務(wù)的場(chǎng)景使用頂部對(duì)齊。頂對(duì)齊方式對(duì)眼球移動(dòng)的需求比其他對(duì)齊方式要更少。移動(dòng)端表單頁(yè)面多使用此種形式，手機(jī)為下拉式交互，垂直高度不受限制。

• 優(yōu)點(diǎn)：有最快的瀏覽和處理速度；標(biāo)簽長(zhǎng)度彈性大。
• 缺點(diǎn)：非常占垂直空間。

（3）左對(duì)齊

希望用戶放慢速度，仔細(xì)思考表單中的每個(gè)輸入框的場(chǎng)景使用左對(duì)齊類型。采用左對(duì)齊標(biāo)簽方式的表單是三者之中所需瀏覽時(shí)間最長(zhǎng)的，但這種對(duì)齊方式能夠在你想要用戶放慢速度閱讀，仔細(xì)考慮的時(shí)候使用（如一些重要的輸入）。

• 優(yōu)點(diǎn)：文字開頭按閱讀視線對(duì)齊，方便閱讀，節(jié)約垂直空間。
• 缺點(diǎn)：填寫速度慢，標(biāo)簽長(zhǎng)度和輸入框彈性小。
• 舉個(gè)栗子：騰訊云，購(gòu)買云產(chǎn)品的表單界面，讓用戶細(xì)看、謹(jǐn)慎選擇，采用了左對(duì)齊的方式。

左對(duì)齊案例

3. 輸入域樣式

輸入域是表單的主題與核心。

（1）組件樣式

表單常見的組價(jià)樣式包括文本框、文本域、選擇器、開關(guān)、Checkbox、Radio、步驟條、滑塊、上傳、標(biāo)簽頁(yè)等。對(duì)于組建的選用，在下文中將會(huì)做詳細(xì)探討。

輸入組件間距不宜窄，較大的文字輸入框、適度的留白空間會(huì)讓人更有填寫的欲望。在表單間距處理上，各區(qū)塊之前的間距，如單列中一組字段輸入框與另一組的間距，雙列中左一列及右一列的間距需要尤其注意。

（2）單例與多列布局

在web頁(yè)面中，由于頁(yè)面的關(guān)系，導(dǎo)致跳轉(zhuǎn)頁(yè)面與彈窗的橫向空間較大，縱向空間不足，若出現(xiàn)較多的輸入內(nèi)容時(shí)，且不能采用分模塊、分步驟、高級(jí)等交互布局時(shí)，有的設(shè)計(jì)師會(huì)采用雙列或多列表單，以提高橫向空間的利用，這也是可以接受的。此時(shí)，要注意列與列間距的合理性以及遵守用戶的視覺流，可以參照菲茲定律。

但是作為表單，單列表單的瀏覽及填寫效率是最高的。用戶的視覺流較為順暢，可以提升填寫效率，同時(shí)能夠減少用戶的疲勞度。因此，建議表單多采用單列布局。

（3）分模塊

對(duì)于內(nèi)容過(guò)多的表單輸入組件，分類、分模塊的排版方式讓用戶感覺更好，不是密密麻麻一大片，有條理。用戶可以在填寫好一段內(nèi)容后進(jìn)行心理上停頓休息，減少視覺疲勞和心理壓力。

舉個(gè)栗子：網(wǎng)易七魚客服平臺(tái)的基礎(chǔ)設(shè)置表單頁(yè)面，分為歡迎語(yǔ)設(shè)置、未選擇分類提示、在線會(huì)話關(guān)閉二次確認(rèn)、重復(fù)咨詢識(shí)別、會(huì)話計(jì)時(shí)設(shè)置、服務(wù)時(shí)間設(shè)置、轉(zhuǎn)接確認(rèn)設(shè)置、會(huì)話接入提示等多個(gè)小模塊。層次清晰、分明。

分模塊案例

（4）分步驟

對(duì)于內(nèi)容過(guò)多的表單輸入組件，又有著明確的操作先后關(guān)系，可以選用分步驟，每屏僅展示該步驟下的表單輸入組件，同時(shí)校驗(yàn)反饋也可分步進(jìn)行。

舉個(gè)栗子：優(yōu)云平臺(tái)的注冊(cè)表單被分為賬號(hào)設(shè)置、完善資料、注冊(cè)完成3個(gè)步，讓用戶分步填寫。每屏僅展示當(dāng)前步驟下的輸入組件，讓用戶分步進(jìn)行，明確用戶行為，減少用戶的心理負(fù)擔(dān)。反饋校驗(yàn)及時(shí)，也避免了填寫完才發(fā)現(xiàn)其中某項(xiàng)輸入不正確。

分步驟案例

（5）高級(jí)（非重要必填項(xiàng)默認(rèn)收起，點(diǎn)擊展開）

對(duì)于表單內(nèi)容很多，且存在一些沒那么重要的非必填項(xiàng)，可以選擇默認(rèn)隱藏，用戶有欲望填寫時(shí)點(diǎn)擊展開可進(jìn)行輸入填寫?；蛘咚阉鳁l件太多，默認(rèn)收起，展示更多的信息內(nèi)容；需要搜索時(shí)，點(diǎn)擊展開。

舉個(gè)栗子：阿里云的云服務(wù)器 ECS購(gòu)買表單頁(yè)面里的詳細(xì)價(jià)格總覽模塊，搜索表單內(nèi)容項(xiàng)很多，默認(rèn)收起；用戶點(diǎn)擊展開過(guò)濾器按鈕，則搜索表單展開。節(jié)約頁(yè)面空間，讓用戶在默認(rèn)情況下看到更多列表等其他重要信息。

高級(jí)示例（默認(rèn)收起）

高級(jí)示例（展開）

4. 提示樣式

從提示信息所處的位置和提示出現(xiàn)的時(shí)機(jī)，提示可分為輸入框內(nèi)提示、輸入框外提示、激活輸入框提示、圖標(biāo)懸停提示及單獨(dú)區(qū)域提示等。根據(jù)前文的分類，提示樣式分為引導(dǎo)提示與反饋提示兩種。

（1）引導(dǎo)提示

引導(dǎo)提示是對(duì)用戶輸入信息規(guī)則的注釋與說(shuō)明，在用戶輸入前，輸入框內(nèi)提示、輸入框外提示、激活輸入框提示可歸為引導(dǎo)提示。

可細(xì)分為：全局性提示和定位提示。

• 全局提示：使用場(chǎng)景如下：在告知用戶填寫表單會(huì)帶來(lái)怎樣的益處，有利于用戶完善相關(guān)表單內(nèi)容（益處提示）。在登錄頁(yè)等字段內(nèi)容較少時(shí)或者提示的內(nèi)容項(xiàng)也不多，一般位于整個(gè)表單的上方（注釋說(shuō)明）。告知用戶信息采集的用途以及使用保證（安全提示），解除用戶輸入顧慮。
• 定位提示：適用于表單內(nèi)容比較多，字段內(nèi)容較少時(shí)，應(yīng)在相應(yīng)錯(cuò)誤位置進(jìn)行提示，幫助用戶快速定位到錯(cuò)誤內(nèi)容。

（2）反饋提示

反饋提示是頁(yè)面系統(tǒng)對(duì)用戶的輸入給與校驗(yàn)，并對(duì)校驗(yàn)結(jié)果予以展示的提示形式。反饋提示是根據(jù)用戶輸入而顯示的提示，出現(xiàn)在輸入中與輸入后，可細(xì)分為：即時(shí)校驗(yàn)反饋、局部校驗(yàn)反饋和全局校驗(yàn)反饋。

較為常見的即時(shí)校驗(yàn)反饋是根據(jù)輸入字符數(shù)量而顯示密碼強(qiáng)度，從而時(shí)刻提示用戶當(dāng)前密碼強(qiáng)度是否符合要求。該方式的校驗(yàn)條件多在本地，不需要實(shí)時(shí)向服務(wù)器發(fā)命令，以得到反饋。

舉個(gè)栗子：Behance網(wǎng)站的注冊(cè)表單頁(yè)面，密碼設(shè)置要求用戶輸入的密碼必須要滿足其下方的條件，根據(jù)用戶輸入的密碼實(shí)時(shí)作出相應(yīng)反饋。

即時(shí)校驗(yàn)案例

局部校驗(yàn)反饋：在注冊(cè)賬號(hào)時(shí)，輸入完整用戶名以后，提示用戶名是否可用，則為局部校驗(yàn)反饋。校驗(yàn)內(nèi)容存儲(chǔ)在遠(yuǎn)端，程序需要完整的輸入信息到遠(yuǎn)端進(jìn)行檢驗(yàn)，并給出反饋。

局部校驗(yàn)主要適用于輸入項(xiàng)較多，且某個(gè)輸入項(xiàng)具有先決條件，同時(shí)決定了接下來(lái)的輸入。該方式可以避免不完整輸入的即時(shí)反饋給用戶造成的干擾，同時(shí)可以減少對(duì)服務(wù)器的壓力。一般注冊(cè)、登錄、web端頁(yè)面頁(yè)面會(huì)采用局部校驗(yàn)反饋。

全局校驗(yàn)反饋：多指在輸入完成或者階段性完成時(shí)，界面給出的輸入反饋，用戶需要操作觸發(fā)。在用戶操作反饋動(dòng)作按鈕后，界面在相應(yīng)位置（一般為單個(gè)輸入框的下方或右側(cè)）一次性給出不合乎要求的反饋提示。

5. 操作按鈕形式

操作按鈕：填寫完表單各項(xiàng)內(nèi)容后，所要進(jìn)行的操作動(dòng)作（eg：保存、取消、提交、確定等）。

表單輸入域完成后，必定要進(jìn)行最終的操作反饋，以便讓用戶明確自己所輸入的數(shù)據(jù)信息是否有效留存還是舍棄。操作按鈕無(wú)外乎保存、取消、提交、重置、上（下）一步、保存并提交等。

四、控件選用

對(duì)于用戶來(lái)說(shuō)，最好的體驗(yàn)是沒有表單輸入，體驗(yàn)再好的表單都是都不符合用戶的心理預(yù)期。因此設(shè)計(jì)表單時(shí)，要盡可能的減少用戶的思考、操作、理解負(fù)擔(dān)，減少用戶對(duì)表單的厭煩情緒，同時(shí)提高表單的輸入效率，這是表單輸入最核心的原則。因此，控件類型與樣式的選用尤為重要。

1. 選擇框優(yōu)于輸入框

任何高密度的操作，都會(huì)引起用戶的不適。因此，在輸入項(xiàng)的選擇時(shí)，用選擇來(lái)代替鍵盤輸入。

• 一方面，簡(jiǎn)化用戶的操作，點(diǎn)擊次數(shù)遠(yuǎn)小于輸入，減少用戶的操作密度；
• 另一方面，減輕用戶的認(rèn)知、記憶負(fù)擔(dān)。相較于輸入框，選擇操作步驟少，相對(duì)來(lái)說(shuō)效率較高，同時(shí)，用戶用思考輸入值，也不用承擔(dān)輸入錯(cuò)誤要重新輸入的風(fēng)險(xiǎn)。用戶可以通過(guò)選擇項(xiàng)，清晰明確的知道有哪些值可以選擇，對(duì)于一些無(wú)關(guān)緊要，或者用戶較難理解的輸入項(xiàng)，可以預(yù)制默認(rèn)值，可以照顧到各階段的用戶。

2. 單選框與下拉選擇框

作為同一類型的輸入項(xiàng)，單選框與下拉選擇框的優(yōu)點(diǎn)類似，使用的場(chǎng)景有較大的差異。

單選框較為適合選項(xiàng)較少（少于五個(gè)），同時(shí)選擇項(xiàng)之間較為類似，需要強(qiáng)調(diào)或?qū)Ρ葧r(shí)，可以優(yōu)先考慮單選框。另外，當(dāng)選項(xiàng)能見度和快速響應(yīng)優(yōu)先時(shí)，也建議優(yōu)先考慮單選框。因?yàn)橄噍^于下拉選擇，用戶可以通過(guò)展示出來(lái)的選項(xiàng)，直接選中目標(biāo)選項(xiàng)，提升輸入效率。

下拉選擇框較為適合選項(xiàng)較多（超過(guò)五個(gè)），有默認(rèn)選項(xiàng)，或者選擇項(xiàng)之間有較大差異，同時(shí)下拉選擇最好不要引起隨后輸入項(xiàng)數(shù)量以及頁(yè)面的變化，否則下拉選擇的收起以及頁(yè)面的變化，易引起用戶不適。

若選項(xiàng)過(guò)多，超過(guò)二十個(gè)，最好引入模糊匹配以及一定排序規(guī)則（首字母排序、數(shù)字排序等），方面用戶提前預(yù)知選項(xiàng)的大致位置，或通過(guò)模糊檢索找到相應(yīng)的選項(xiàng)。

3. 合并相鄰字段／結(jié)構(gòu)化格式

當(dāng)兩個(gè)輸入框關(guān)聯(lián)性很強(qiáng)時(shí)，可以前后拼接，減少頁(yè)面空間，即合并相鄰字段。如：服務(wù)器的IP和端口、聯(lián)系方式的區(qū)號(hào)和號(hào)碼、時(shí)間范圍的選擇等。

雖然用戶輸入或選擇的字段操作并沒有減少，但在其視覺會(huì)簡(jiǎn)潔，用戶心理層面上的壓力會(huì)降低。用戶對(duì)輸入的內(nèi)容很熟悉，且系統(tǒng)不希望接受任何偏離期望的格式，可使用結(jié)構(gòu)化輸入框格式。

舉個(gè)栗子：注冊(cè)淘寶網(wǎng)賬號(hào)時(shí)，由于淘寶網(wǎng)用戶群體遍布全球，顧將手機(jī)號(hào)前的與手機(jī)號(hào)碼做了結(jié)構(gòu)化處理，前者只需用戶選擇即可。同時(shí)，驗(yàn)證過(guò)程加入了一個(gè)簡(jiǎn)單有效的動(dòng)畫，給用戶某種程度上的驚喜。

結(jié)構(gòu)化案例

4. 層級(jí)聯(lián)動(dòng)

所在地區(qū)和郵政編碼進(jìn)行聯(lián)動(dòng)，用戶選擇所在區(qū)域后，郵政編碼會(huì)進(jìn)行自動(dòng)識(shí)別填寫，當(dāng)然支持用戶再次進(jìn)行編輯。類似還有很多，省市區(qū)的級(jí)聯(lián)選擇、組織層級(jí)、事物所屬列別等。

層級(jí)聯(lián)動(dòng)示例

5. 智能聯(lián)想

智能聯(lián)想是給予用戶鍵入字段的聯(lián)想功能，方便用戶進(jìn)行選擇，將原有輸入變成了選擇。如：郵件可以給予常見域名的聯(lián)想，@后會(huì)出現(xiàn)163.com、126.com、qq.com等域名讓用戶選擇。

舉個(gè)栗子：注冊(cè)百度賬號(hào)時(shí)，由于百度使用基數(shù)大，注冊(cè)用戶數(shù)多，很多常見的字段都已被注冊(cè)占用。當(dāng)用戶輸入某個(gè)已被注冊(cè)的用戶名時(shí)，除了后方出現(xiàn)的反饋提示，下方還出現(xiàn)了根據(jù)用戶輸入的用戶名相類似的推薦用戶名。

即由用戶輸入的字段智能聯(lián)想到相關(guān)類似可用的用戶名，供用戶選擇。雖然，最終用戶未必會(huì)選擇下方智能聯(lián)想推薦的用戶名，但在一定程度上優(yōu)化了用戶體驗(yàn)，讓用戶感受到設(shè)計(jì)者的用心，有小驚喜。

智能聯(lián)想案例

五、應(yīng)用原則與技巧

1. 明確告知要輸入的信息內(nèi)容

確保用戶了解要提供什么信息，以及為什么要提供這些信息。

為初級(jí)用戶／偶爾訪問的用戶提供白話作為『標(biāo)簽』，為領(lǐng)域?qū)＜姨峁I(yè)術(shù)語(yǔ)作為『標(biāo)簽』。當(dāng)需要用戶提供敏感信息時(shí)，通過(guò)『輸入提示』來(lái)說(shuō)明系統(tǒng)為什么要這么做，例如：需要獲取身份證號(hào)碼、手機(jī)號(hào)碼時(shí)。

2. 讓用戶能在上下文中獲取信息，幫助他完成輸入

使用『良好的默認(rèn)值』、『結(jié)構(gòu)化的格式』、『輸入提示』、『輸入提醒』等方式，避免讓用戶在空白中完成輸入。

3. 標(biāo)簽簡(jiǎn)潔、精確

標(biāo)簽字段簡(jiǎn)潔，既利于標(biāo)簽排版的對(duì)齊，也減輕用戶的閱讀與理解難度。用詞精確可以避免讓用戶有其他的解讀，導(dǎo)致輸入有誤信息。另外，在輸入項(xiàng)較為明確的情況下，標(biāo)簽可省略，如登錄的用戶名和密碼。

4. 必填項(xiàng)

必填項(xiàng)一般要有明確標(biāo)識(shí)，除非全部是必填項(xiàng)，且必填項(xiàng)數(shù)量在7個(gè)以內(nèi)。選填項(xiàng)比較少時(shí)，互聯(lián)網(wǎng)產(chǎn)品一般必填項(xiàng)不做標(biāo)識(shí)，非必填項(xiàng)后面則標(biāo)注選填字樣。

5. 具有容錯(cuò)性

對(duì)錯(cuò)誤敏感，并盡可能寬容，具有容錯(cuò)性。

通過(guò)不同的『校驗(yàn)』規(guī)則和形式進(jìn)行反饋，避免用戶在點(diǎn)擊提交后才剛剛開始『校驗(yàn)』，讓用戶提前糾正錯(cuò)誤。依據(jù)『容錯(cuò)格式』，允許用戶以多種格式和語(yǔ)法輸入，例如：用戶在電話號(hào)碼輸入框中多輸入了一個(gè)空格，系統(tǒng)存儲(chǔ)時(shí)可以主動(dòng)刪掉空格，但是不需要告訴用戶這是一個(gè)錯(cuò)誤。

6. 精簡(jiǎn)不必要的輸入項(xiàng)

在能完整獲取需要信息的前提下，輸入項(xiàng)越少越好，能夠?qū)τ脩舻妮斎胄畔⑦M(jìn)行充分的利用。例如：讓用戶輸入了身份證號(hào)后，就不要讓用戶再一次輸入生日，此時(shí)可以從用戶的身份證號(hào)中讀取用戶的生日，從而減少用戶的輸入。

7. 合理分類

輸入信息的分類，是有效的減少用戶操作疲勞度的方法。分類的維度有多種，根據(jù)表單輸入內(nèi)容的相關(guān)性、內(nèi)容的所屬類別，可以將同類型的數(shù)據(jù)統(tǒng)一輸入，減少用戶輸入信息的跨度，提高輸入效率。

根據(jù)輸入信息的優(yōu)先級(jí)或重要性，進(jìn)行分類，將優(yōu)先級(jí)高的放在前面，優(yōu)先級(jí)低的放到最后或者折疊起來(lái)，將較少用到或建議默認(rèn)值的輸入項(xiàng)放到里面，普通用戶可以忽略這部分的輸入。

8. 合理分步驟

對(duì)輸入表單進(jìn)行分步驟的處理，可以降低用戶的操作頻率，給與用戶一定的休息空間，用戶會(huì)有階段性的成就感，同時(shí)分步驟的輸入還有利于減少信息的錯(cuò)誤率。

如果輸入表單的內(nèi)容較多，同時(shí)輸入內(nèi)容有邏輯上的先后順序，此時(shí)可以考慮將輸入表單進(jìn)行分步驟處理。

9. 主按鈕的禁用原則

當(dāng)輸入框非常少時(shí)（一般少于 3 個(gè)），如果用戶沒有在必填項(xiàng)中輸入內(nèi)容，可禁用『提交』等主按鈕。當(dāng)輸入框非常多時(shí)（超過(guò) 5 項(xiàng)以上），不建議禁用主按鈕。

當(dāng)輸入框非常少時(shí)，用戶一輸入就會(huì)有反饋，因而主按鈕的禁用規(guī)則非常清晰，容易被用戶理解。

舉個(gè)栗子：網(wǎng)易七魚密碼設(shè)置模塊保存主按鈕采用了禁用，當(dāng)用戶正確填寫完愿密碼、新密碼，保存按鈕即時(shí)變?yōu)榭捎脿顟B(tài)。

禁用案例

當(dāng)輸入框非常多時(shí)（尤其是輸入項(xiàng)中交叉了必填項(xiàng)和非必填項(xiàng)），整個(gè)反饋鏈路冗長(zhǎng)又復(fù)雜，禁用規(guī)則難以被識(shí)別，容易引起困惑。

舉個(gè)栗子：網(wǎng)易七魚新增客服表單頁(yè)，一屏展示不完，保存按鈕即使禁用，用戶也很難看到注意到。

不禁用案例

10. 局部校驗(yàn)和全局校驗(yàn)

局部校驗(yàn)需明確平臺(tái)相關(guān)內(nèi)容不只一處是這種操作方式，要不就會(huì)造成用戶使用上的困擾。全局保存要明確相關(guān)按鈕的清晰程度，如果這個(gè)還需要用戶去尋找，那就是明顯的體驗(yàn)上的問題了。

舉個(gè)栗子：大家熟悉的淘寶網(wǎng)注冊(cè)表單頁(yè)面，輸入完手機(jī)號(hào)之后，后面出現(xiàn)相應(yīng)的提示（成功或失敗的原因）。按住滑塊拖動(dòng)完成后，后面出現(xiàn)相應(yīng)的提示（成功或失敗的原因）。

局部校驗(yàn)案例

11. 簡(jiǎn)單有效的動(dòng)畫

填寫表單的過(guò)程中加入一個(gè)簡(jiǎn)單有效的動(dòng)畫，給用戶某種程度上的驚喜?？蓯邸⒑?jiǎn)潔而有趣的動(dòng)畫有助于減輕并降低用戶在輸入表單時(shí)的反感和焦慮，展現(xiàn)了服務(wù)提供方在產(chǎn)品設(shè)計(jì)上具有創(chuàng)新性，以及對(duì)用戶體驗(yàn)極致的追求。

舉個(gè)栗子：Readme的登錄頁(yè)面，輸入 「Email 」時(shí)是明文，貓頭鷹攤開雙手，睜大眼睛去看，展現(xiàn)其比較好奇的心理。輸入「Password」時(shí)是密文，貓頭鷹用雙手捂住眼睛，展現(xiàn)密碼輸入的安全性、隱私性。

• 一方面，提示用戶輸入密碼時(shí)要注意防止他人偷窺以竊取你的賬號(hào)密碼；
• 另一方面，向用戶暗示，服務(wù)提供方非常注重用戶隱私與保護(hù)。（體驗(yàn)網(wǎng)址http://www.daimabiji.com/codedemo/1443）

動(dòng)效示例

寫在最后

看似常見、容易的輸入表單設(shè)計(jì)，設(shè)計(jì)原則與技巧絕不僅限于本文所聊到的這些。要想提高表單使用者的體驗(yàn)，尚需大家多學(xué)習(xí)，多總結(jié)，多實(shí)踐應(yīng)用。文中的不足之處，請(qǐng)讀者多擔(dān)待，期待大家的反饋與交流。

#專欄作家#

弘毅道，公眾號(hào)：UIUX設(shè)計(jì)工作坊，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注to B業(yè)務(wù)，尤其擅長(zhǎng)后臺(tái)程序界面設(shè)計(jì)，包括需求溝通，原型設(shè)計(jì)以及后期的設(shè)計(jì)評(píng)審等。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議