編輯導(dǎo)語(yǔ)：表單的存在可以讓用戶更加清晰地獲取反饋結(jié)果，進(jìn)而推動(dòng)系統(tǒng)與用戶之間的信息與數(shù)據(jù)傳遞。那么，一個(gè)完整且合理的表單由哪些部分構(gòu)成？本篇文章里，作者對(duì)B端設(shè)計(jì)組件之一——表單進(jìn)行了總結(jié)，一起來(lái)看一下。

在B端產(chǎn)品中，表單是用戶向系統(tǒng)傳遞和修改數(shù)據(jù)信息的主要方式，同時(shí)也是系統(tǒng)獲取用戶數(shù)據(jù)、響應(yīng)反饋結(jié)果的主要方式，可以說(shuō)表單是人機(jī)交互中重要的數(shù)據(jù)媒介。

一、表單構(gòu)成

一個(gè)完整的表單通常包括標(biāo)題、必填提示、標(biāo)簽、提示信息、占位符、輸入?yún)^(qū)、操作按鈕等幾部分。

• 標(biāo)題：一個(gè)表單模塊的主題，起到說(shuō)明表單模塊是什么的作用。尤其是在分組表單中的作用更為明顯。
• 必填提示：區(qū)分多個(gè)表單內(nèi)容項(xiàng)的必填和非選填，一般常用紅色的“*”表示。
• 標(biāo)簽：表單內(nèi)容項(xiàng)的名稱，說(shuō)明對(duì)應(yīng)表單含義以及向用戶說(shuō)明應(yīng)該錄入信息的類型。
• 提示：輔助用戶理解操作表單，有引導(dǎo)信息 (說(shuō)明提示) 和反饋信息用戶操作提示兩種。
• 占位符：一種輔助用戶的錄入線索，位于輸入?yún)^(qū)。
• 輸入?yún)^(qū)：表單結(jié)構(gòu)中的核心區(qū)域，是用戶交互最集中、向系統(tǒng)傳遞信息的最前線，樣式和類型也最為豐富。
• 操作按鈕：“完結(jié)”表單操作流程的觸發(fā)器，用于向服務(wù)器提交數(shù)據(jù)或者放棄操作。較復(fù)雜表單結(jié)構(gòu)中的按鈕也更為復(fù)雜。

二、表單形式

1. 標(biāo)題

概括表單模塊的主題，讓用戶快速了解接下來(lái)的要交互信息內(nèi)容。相對(duì)簡(jiǎn)單、容易被用戶理解的表單可以沒(méi)有標(biāo)題，但表單相對(duì)復(fù)雜或者表單內(nèi)容項(xiàng)多需要分類組織的時(shí)候，標(biāo)題的重要性就突顯出來(lái)了。

2. 標(biāo)簽

根據(jù)標(biāo)簽與輸入?yún)^(qū)的位置來(lái)區(qū)分，可以分為左對(duì)齊、右對(duì)齊、頂對(duì)齊、內(nèi)聯(lián)式、浮動(dòng)式幾種。

1）左對(duì)齊

標(biāo)簽位于輸入域左側(cè)，字段左對(duì)齊。

“I”字型的視覺(jué)動(dòng)線更加符合現(xiàn)代人們的閱讀習(xí)慣，閱讀效率高的同時(shí)也利于用戶對(duì)標(biāo)簽的整體瀏覽。但由于表單字段長(zhǎng)短不一，造成部分標(biāo)簽和輸入?yún)^(qū)之間的距離較大，從而降低了這些表單標(biāo)簽和與其對(duì)應(yīng)輸入?yún)^(qū)的親密性，用戶的錄入的效率也會(huì)隨之降低，橫向排列對(duì)頁(yè)面橫向空間有一定要求。

• 優(yōu)點(diǎn)：視覺(jué)動(dòng)線符合人們閱讀習(xí)慣，在一定程度上節(jié)約縱向空間。
• 缺點(diǎn)：標(biāo)簽與相對(duì)應(yīng)的輸入?yún)^(qū)間距大小不一，錄入效率降低，標(biāo)簽、輸入?yún)^(qū)寬度度彈性小。

任何事物都是具有兩面性的，標(biāo)簽與對(duì)應(yīng)的輸入?yún)^(qū)距離過(guò)大會(huì)造成視覺(jué)斷點(diǎn)，影響閱讀的連續(xù)性，但有些場(chǎng)景需求就是需要引起人們注意，需要嚴(yán)肅、謹(jǐn)慎對(duì)待的時(shí)候，此時(shí)應(yīng)用這種設(shè)計(jì)策略會(huì)達(dá)到較理想的效果。

2）右對(duì)齊

也叫冒號(hào)對(duì)齊，標(biāo)簽位于輸入?yún)^(qū)左側(cè)，字段右對(duì)齊。

右對(duì)齊表單的標(biāo)簽和輸入?yún)^(qū)之間的距離是固定的，標(biāo)簽和輸入?yún)^(qū)之間有明確的視覺(jué)關(guān)聯(lián)，兩者之間的親密性較高。相對(duì)標(biāo)簽簡(jiǎn)短的表單，用戶閱讀、填寫的效率較高，但對(duì)于標(biāo)簽長(zhǎng)短不一的多個(gè)內(nèi)容項(xiàng)，左側(cè)的參差不齊又會(huì)使得標(biāo)簽不易于完整閱讀。橫向排列結(jié)構(gòu)對(duì)頁(yè)面的橫向空間有一定的要求。

• 優(yōu)點(diǎn)：標(biāo)簽與輸入?yún)^(qū)有明確的視覺(jué)關(guān)聯(lián)，閱讀、錄入效率較高，也在一定程度上節(jié)約縱向空間。
• 缺點(diǎn)：表單左側(cè)排列參差不齊，整體閱讀性差，標(biāo)簽、輸入?yún)^(qū)寬度彈性小。

3）頂對(duì)齊

標(biāo)簽位于輸入?yún)^(qū)上方，字段與輸入?yún)^(qū)左對(duì)齊。標(biāo)簽和輸入?yún)^(qū)的親密性強(qiáng)，“I”字型的視覺(jué)動(dòng)線使得用戶閱讀、填寫效果較高。對(duì)于標(biāo)簽字符長(zhǎng)度大，尤其是外文標(biāo)簽，頂對(duì)齊表單的適應(yīng)性更強(qiáng)。上下排列結(jié)構(gòu)對(duì)頁(yè)面的縱向空間有一定要求。

• 優(yōu)點(diǎn)：對(duì)齊方式符合視覺(jué)動(dòng)線，閱讀、錄入效率高，標(biāo)簽、輸入?yún)^(qū)的橫向彈性大。
• 缺點(diǎn)：一定程度上占用縱向空間。

擴(kuò)展：“I”字型視覺(jué)動(dòng)線從上到下，“Z”字型視覺(jué)動(dòng)線從左到右再?gòu)纳系较隆，F(xiàn)實(shí)生活中，人們對(duì)于左右的反應(yīng)要弱于對(duì)上下，很多人對(duì)于分辨左右方向需要一定的反應(yīng)時(shí)間，但對(duì)于上下幾乎是不假思索的。

4）內(nèi)聯(lián)式

標(biāo)簽在輸入?yún)^(qū)內(nèi)，類似于輸入?yún)^(qū)的占位符。在用戶輸入過(guò)程中文字標(biāo)簽隱藏，可能會(huì)引起用戶的迷茫，用戶填寫完成時(shí)不易復(fù)核，使用體驗(yàn)一般。另外擴(kuò)展性也較差，對(duì)輸入框較友好，而其他類型的表單 (平鋪單選、開(kāi)關(guān)) 則會(huì)受到限制。

另一變種形式——圖標(biāo)內(nèi)聯(lián)式，雖在一定程度上緩解了用戶迷茫和懷疑心理，但一些語(yǔ)義性不強(qiáng)的圖標(biāo)也會(huì)可能造成用戶的認(rèn)知負(fù)擔(dān)，加大用戶學(xué)習(xí)成本。

• 優(yōu)點(diǎn)：橫向空間要求相對(duì)低，表單橫向彈性大。
• 缺點(diǎn)：可能會(huì)造成用戶迷茫，加大用戶認(rèn)知負(fù)擔(dān)和學(xué)習(xí)成本。

5）浮動(dòng)式

標(biāo)簽在輸入前位于輸入?yún)^(qū)類似占位符，輸入中 (后)，標(biāo)簽向上移動(dòng)并變小，節(jié)約了空間的同時(shí)，標(biāo)簽依然存在。

變小后的標(biāo)簽雖一定程度上降低了可視性，但也保障了用戶錄入信息的準(zhǔn)確性和可復(fù)核性。與其他幾種表單相比，開(kāi)發(fā)實(shí)現(xiàn)的難度也相對(duì)應(yīng)的增加了一些。

• 優(yōu)點(diǎn)：表單橫向彈性大，對(duì)縱向空間的要求也不高。
• 缺點(diǎn)：需要一定的開(kāi)發(fā)難度。

3. 輸入?yún)^(qū)錄入方式

輸入?yún)^(qū)是用戶交互最多也是最能影響使用體驗(yàn)的區(qū)域，不同類型數(shù)據(jù)選擇與之相應(yīng)的錄入方式，對(duì)提高表單操作效率和用戶體驗(yàn)大有裨益。依據(jù)錄入方式的不同可以分為：文本錄入、選擇錄入、上傳錄入三種方式。

1）文本錄入

文本錄入是以文本形式提交信息的交互方式，操作成本較高且過(guò)程中又充滿不確定性，極易引起用戶情緒的波動(dòng)。在處理這類表單的時(shí)候要著重考慮用戶錄入效率和使用體驗(yàn)。

① 文本框（Input）：輸入字符總數(shù)較少單行錄入形式。

② 文本域（Textarea）：輸入字符總數(shù)較大且單一文本數(shù)據(jù)的錄入形式。

③ 搜索（Search）：輸入關(guān)鍵字符快速?gòu)臄?shù)據(jù)池中匹配與之對(duì)應(yīng)的數(shù)據(jù)，幫助用戶縮小選擇范圍，快速獲取目標(biāo)數(shù)據(jù)。

2）選擇錄入

選擇錄入是在已有的備選數(shù)據(jù)中做選擇，相較于文本錄入步驟更少、無(wú)輸入錯(cuò)誤風(fēng)險(xiǎn)，錄入效率也更高。

① 單選框 (Radio)：允許用戶在一組默認(rèn)選項(xiàng)中選擇一個(gè)，每個(gè)選項(xiàng)互斥，有選中和未選中兩種狀態(tài)。

② 復(fù)選框 (Checkbox)：用戶在一組默認(rèn)選項(xiàng)中選擇多個(gè)，單個(gè)選項(xiàng)間相互獨(dú)立，常配合全選復(fù)選框使用，有全選、半選、未選三種狀態(tài)。

③ 開(kāi)關(guān)（Switch）：用于切換單個(gè)選項(xiàng)的狀態(tài)，適用于兩種相對(duì)立的狀態(tài)，如：開(kāi)和關(guān)、顯示和隱藏、禁用和啟用等。

④ 下拉菜單（Dropdown）：允許用戶從已有備選項(xiàng)中選擇一個(gè)選項(xiàng)或多個(gè)選項(xiàng)，相對(duì)于單選和復(fù)選，下拉菜單可以容納更多的選項(xiàng)數(shù)量，選項(xiàng)數(shù)量過(guò)于大時(shí)常與搜索框結(jié)合使用。

⑤ 滑塊選擇（Slider）：用戶可以在一個(gè)連續(xù)或非連續(xù)的區(qū)間內(nèi)，通過(guò)滑動(dòng)錨點(diǎn)來(lái)選擇一個(gè)合適的數(shù)值或范圍。

需求精度要求不高的場(chǎng)景下使用「連續(xù)滑塊」可得到更靈活便捷的操作；需求精度要求高的場(chǎng)景下可配合「數(shù)字輸入」使用。

⑥ 日期選擇器（DatePicker）：幫助用戶瀏覽和選擇日期，常見(jiàn)有日期選擇、時(shí)間選擇、日期時(shí)間選擇和相對(duì)應(yīng)的范圍選擇。

選擇錄入數(shù)據(jù)的方式多種多樣，還有穿梭框、評(píng)分等日常使用頻率不高的形式。

3）文件上傳

文件上傳是上傳信息到服務(wù)器的一種數(shù)據(jù)錄入方式，常見(jiàn)有點(diǎn)擊上傳、縮略圖上傳、拖拽上傳。

① 點(diǎn)擊上傳：通過(guò)點(diǎn)擊上傳按鈕喚起的文件管理器來(lái)選擇需要上傳的文件，常用于單個(gè)文件上傳且不需要預(yù)覽的場(chǎng)景。

② 縮略圖上傳：也是通過(guò)文件管理器來(lái)選擇需要上傳的文件，常用于圖片上傳，上傳的圖片在頁(yè)面中呈縮略圖顯示，一般還可以直接在縮略圖片上賦予其他的交互 (查看、刪除等)。

③ 拖拽上傳：用戶拖拽文件到指定區(qū)域即可完成上傳，也支持點(diǎn)擊上傳。

4. 提示

提示信息的存在是為了輔助用戶更好地理解表單、提高錄入效率、順利完成操作任務(wù)的。主要有輸入前的引導(dǎo)信息和輸入中、輸入后的反饋信息。

1）引導(dǎo)信息

對(duì)表單填寫內(nèi)容進(jìn)行解釋說(shuō)明的提示信息，給用戶提供錄入引導(dǎo)和暗示。有全局引導(dǎo)和內(nèi)容項(xiàng)引導(dǎo)兩種。

① 全局引導(dǎo)：對(duì)整個(gè)表單的解釋說(shuō)明，對(duì)于一些包含敏感信息表單，全局提示還包括信息的用途、安全性、保密性等，以此消除用戶不信任。

② 內(nèi)容項(xiàng)引導(dǎo)：針對(duì)單個(gè)的內(nèi)容進(jìn)行精確引導(dǎo)提示，提示的形式也多種多樣，示例型占位符提示、說(shuō)明文字提示、圖標(biāo)和氣泡組合提示、輸入框聚焦提示等，其中圖標(biāo)和氣泡的組合提示最為常用，對(duì)新手用戶、熟練用戶都很友好。

2）反饋信息

包括實(shí)時(shí) (操作中) 校驗(yàn)用戶錄入數(shù)據(jù)的合規(guī)性，和告知用戶操作后的結(jié)果狀態(tài)兩種。前者主要是前端校驗(yàn)，用來(lái)判斷數(shù)據(jù)格式正確與否；后者主要是后端校驗(yàn)，與數(shù)據(jù)庫(kù)進(jìn)行交互匹配。

反饋信息要精準(zhǔn)

表單錄入過(guò)程中需要留意反饋信息的時(shí)候，大概率是用戶錄入數(shù)據(jù)錯(cuò)誤的時(shí)候（正確的話進(jìn)行下面的操作了），此時(shí)輸入錯(cuò)誤的反饋信息要足夠精確的描述錯(cuò)誤原因，幫助用戶快速定位錯(cuò)誤，輔助用戶合規(guī)錄入。

比如密碼錄入錯(cuò)誤，不要僅僅提示“密碼輸入錯(cuò)誤”，要盡可能提示能幫助用戶正確輸入密碼的話術(shù)如“密碼是區(qū)分字母大小寫和數(shù)字的組合，如：AAbb123”。

5. 操作按鈕

這里的操作按鈕常規(guī)意義上指的是“完結(jié)”表達(dá)操作的按鈕，常見(jiàn)在一些較簡(jiǎn)單的表單場(chǎng)景。在復(fù)雜些的表單中，分別會(huì)在header區(qū)、body區(qū)、footer區(qū)放置影響全局屬性、僅影響跟隨對(duì)象、有“完結(jié)流程”屬性的按鈕。

按鈕本就是B端設(shè)計(jì)中的一個(gè)重大模塊，更多詳見(jiàn)“B端設(shè)計(jì)組件：按鈕”。

6. 必填提示

必填提示是在一個(gè)表單模塊中，用來(lái)區(qū)分哪些內(nèi)容項(xiàng)是必填寫的，哪些是非必填的。通常用一個(gè)紅色的“*”表示，過(guò)多“*”會(huì)造成頁(yè)面視覺(jué)噪點(diǎn)的增多，給本就枯燥的表單頁(yè)面增加視覺(jué)壓力；有些情況下，紅色作為一種有特殊含義的顏色，會(huì)引起用戶誤解。

為避免過(guò)多的視覺(jué)噪點(diǎn)，我們可以利用標(biāo)簽或者占位符來(lái)提示用戶哪些內(nèi)容項(xiàng)是必填的，哪些是非必填的。

7. 占位符

位于輸入?yún)^(qū)內(nèi)起引導(dǎo)用戶錄入作用，用戶錄入數(shù)據(jù)時(shí)就會(huì)消失，有示例型占位符和通用型占位符兩種。也可以算是一種輕量化的提示信息，與其他提示信息相比，視覺(jué)負(fù)擔(dān)較小，占用空間更小，與輸入內(nèi)容的關(guān)聯(lián)性更強(qiáng)。

三、表單應(yīng)用

B端業(yè)務(wù)場(chǎng)景復(fù)雜多樣，面對(duì)各種各樣的表單需求，怎么在滿足業(yè)務(wù)需求的前提下，兼顧頁(yè)面展示效率，保證用戶操作效率和使用體驗(yàn)?zāi)?？根?jù)表單任務(wù)復(fù)雜度的不同，將表單分為下面幾種形式去探討。

1. 基礎(chǔ)表單 (直鋪)

適合于內(nèi)容項(xiàng)較少，內(nèi)容項(xiàng)無(wú)明顯相關(guān)性的表單。

1）單列布局

在表單頁(yè)面橫向方向上放置一列表單，比較符合人們的閱讀習(xí)慣，“I”字型的視覺(jué)動(dòng)線引導(dǎo)用戶從上到下瀏覽、填寫表單，內(nèi)容項(xiàng)不多的前提下，是表單操作效率最高的布局方式。

2）多列布局

在表單頁(yè)面橫向方向上放置兩列或多列表單，這樣的布局會(huì)讓頁(yè)面的利用率得到提升，但“Z”字型的視覺(jué)動(dòng)線引導(dǎo)用戶從左到右，再?gòu)纳系较碌拈喿x，會(huì)使操作效率和用戶體驗(yàn)在一定程度上打折扣。

2. 分組表單（卡片分組）

適合于內(nèi)容項(xiàng)較多，且不同內(nèi)容之中存在明顯相關(guān)性分類歸納的表單。

化繁為簡(jiǎn)是人處理復(fù)雜事物常用的方法，通過(guò)分組的方式，我們可以將一個(gè)較大的的任務(wù)分解為幾個(gè)較小任務(wù)，化解表單在用戶視覺(jué)上的重量，相鄰小任務(wù)之間的間隔也相當(dāng)于給用戶設(shè)置心理休息點(diǎn)，降低用戶面對(duì)大量錄入時(shí)的心理壓力。

3. 分步表單

適用于內(nèi)容項(xiàng)復(fù)雜、有明確先后順序的的表單內(nèi)容，將其按照一定的邏輯關(guān)系組織成線性流程，利用步驟條告知用戶完整流程和進(jìn)度，當(dāng)前流程只展示此流程下的表單內(nèi)容，數(shù)據(jù)校驗(yàn)也在此流程結(jié)束時(shí)完成。也是將復(fù)雜表單任務(wù)切割，提高錄入效率，提升用戶體驗(yàn)的常用方式。

4. tab頁(yè)簽表單

適用于內(nèi)容項(xiàng)復(fù)雜，且不同內(nèi)容可以通過(guò)一定的邏輯進(jìn)行分類歸納的表單內(nèi)容，不同類別之間相互獨(dú)立，用戶可以切換不同類別瀏覽填寫所有表單數(shù)據(jù)，表單footer區(qū)放置具有“完結(jié)”流程屬性的操作按鈕。也屬于一種將復(fù)雜表單簡(jiǎn)單化的方案。

5. 動(dòng)態(tài)可編輯表單

動(dòng)態(tài)可編輯是指表單內(nèi)容項(xiàng)是不固定的，用戶可以按照實(shí)際業(yè)務(wù)需求對(duì)某些內(nèi)容項(xiàng)進(jìn)行動(dòng)態(tài)增減。適用于內(nèi)容項(xiàng)復(fù)雜，多任務(wù)嵌套使用的場(chǎng)景，常見(jiàn)有動(dòng)態(tài)表單、動(dòng)態(tài)表格、折疊面板、彈窗/抽屜編輯等。

1）動(dòng)態(tài)表單

用戶通過(guò)動(dòng)態(tài)增減表單數(shù)目來(lái)滿足業(yè)務(wù)需求，常見(jiàn)形式有一個(gè)固定的表單，通過(guò)增減按鈕可以設(shè)置表單數(shù)目，一般動(dòng)態(tài)表單數(shù)目≤3。

2）動(dòng)態(tài)表格

和動(dòng)態(tài)表單的交互邏輯基本一致，外觀上是以表格形式展示，增減的動(dòng)態(tài)數(shù)據(jù)數(shù)目建議3~6個(gè)。

3）折疊面板

適用于表單中明顯嵌套子任務(wù)的模式，收起狀態(tài)下只讀子任務(wù)設(shè)置，展開(kāi)狀態(tài)則可以對(duì)子任務(wù)的設(shè)置進(jìn)行編輯修改。

4）彈窗/抽屜編輯

常見(jiàn)的處理包含子任務(wù)流程、內(nèi)容項(xiàng)復(fù)雜的表單模式，相較于折疊面板擴(kuò)展性更強(qiáng)，承載的信息更多，一般而言，抽屜的信息承載能力大于彈窗。模態(tài)的彈窗/抽屜會(huì)打斷用戶的當(dāng)前主流程，任務(wù)的切割感強(qiáng)。

四、實(shí)際應(yīng)用中的一些思考

1. 表單輸入?yún)^(qū)的寬度要不要整齊劃一？

很多設(shè)計(jì)師在拿到表單需求的時(shí)候，都會(huì)潛意識(shí)地追求視覺(jué)上整齊劃一，強(qiáng)行將表單的寬度定為統(tǒng)一寬度。這種處理方式?jīng)]有深入思考表單應(yīng)用規(guī)范和用戶填寫感受。事實(shí)上有秩序的“不一致”也不一定要比“整齊”的視覺(jué)感受差。

每一類型的表單的輸入?yún)^(qū)都會(huì)因其錄入需求存在合理的寬度，輸入?yún)^(qū)的寬度應(yīng)該匹配和暗示其填寫的內(nèi)容。合理的輸入?yún)^(qū)寬度，不僅能夠給用戶的輸入量提供心理預(yù)判，還提升整個(gè)表單操作過(guò)程中的掌控感。

表單在B端項(xiàng)目的應(yīng)用場(chǎng)景十分豐富且復(fù)雜，針對(duì)每一種場(chǎng)景去定制也是不現(xiàn)實(shí)的。怎么去兼顧美觀和用戶的使用體驗(yàn)?zāi)兀?/p>

結(jié)合Ant_Design的解決方案，我們可以定義一個(gè)基準(zhǔn)輸入?yún)^(qū)寬度和幾個(gè)不同尺寸的輸入?yún)^(qū)，其寬度按照一定的內(nèi)在邏輯去生長(zhǎng)擴(kuò)展。例如：基準(zhǔn)輸入寬度XS = 128px，以其倍數(shù) (n) 加上 (n-1) 倍的間距 (8px) 為規(guī)則，分為5種不同尺寸 (XS、S、M、L、XL)。

表單的外觀視覺(jué)雖呈現(xiàn)錯(cuò)落有致，但在內(nèi)在邏輯的約束下做到了“有秩序的不一致”。不僅解決了暗示用戶輸入量多少的問(wèn)題，更是避免了設(shè)計(jì)師在面對(duì)表單時(shí)不必要的主觀和感性，同時(shí)開(kāi)發(fā)人員也更容易地做到對(duì)設(shè)計(jì)稿的精準(zhǔn)還原。

2. 表單中的隱藏交互

1）行內(nèi)編輯

一種隱藏較深的富交互模式，一般應(yīng)用于表格中的較短字段。

用戶鼠標(biāo)滑過(guò)字段熱區(qū)通常會(huì)給予明顯的視覺(jué)反饋，向用戶提出交互邀請(qǐng)，點(diǎn)擊后原來(lái)的只讀狀態(tài)變成可編輯狀態(tài)，用戶修改后點(diǎn)擊頁(yè)面空白地方即可完成操作，被編輯字段除了的字段本身變化外，背景色也可以高亮一會(huì)來(lái)反饋用戶剛剛發(fā)生的編輯動(dòng)作。

2）氣泡卡片

也是一種隱藏較深的一種富交互模式，用戶鼠標(biāo)滑過(guò)字段熱區(qū)通常會(huì)給予明顯的視覺(jué)反饋，點(diǎn)擊后原來(lái)的只讀狀態(tài)變成可編輯狀態(tài)，并彈出氣泡編輯面板，用戶修改后點(diǎn)擊操作按鈕完成編輯，氣泡面板隨之消失，被編輯字段的背景高亮 (3秒)，反饋用戶的編輯動(dòng)作。

可給予用戶更大的操作自由度來(lái)防止用戶犯錯(cuò)，在提示用戶操作成功的的全局提示框內(nèi)，添加“撤銷”按鈕，給予用戶一定的“后悔藥”。一定時(shí)間 (5s) 后，全局提示消失，“撤銷”按鈕也隨之消失，用戶編輯的內(nèi)容也就不能撤回。

3. 按鈕沒(méi)有滿足觸發(fā)條件時(shí)要不要禁用？

表單內(nèi)容項(xiàng)沒(méi)有填寫完成的時(shí)候，操作區(qū)的主按鈕要不要禁用，處于一種置灰不可點(diǎn)擊的狀態(tài)，只有當(dāng)滿足操作條件時(shí)才會(huì)高亮并有交互事件?

當(dāng)表單的內(nèi)容項(xiàng)非常少 (≤3) 時(shí)可以使用主按鈕禁用，用戶輸入內(nèi)容按鈕高亮，這種反饋很容易被捕捉到，也易于用戶理解。當(dāng)表單內(nèi)容項(xiàng)多有必填和非必填同時(shí)存在的時(shí)候，此時(shí)主按鈕禁用會(huì)使得用戶產(chǎn)生疑問(wèn)，過(guò)長(zhǎng)的表單也使用戶也不易捕捉到按鈕反饋，此時(shí)可采用提交校驗(yàn)來(lái)對(duì)表單信息是否完整進(jìn)行提示，不建議使用主按鈕禁用。

4. 修改輸入?yún)^(qū)的內(nèi)容，要不要快速清除按鈕？

修改表單輸入?yún)^(qū)已填寫內(nèi)容時(shí)，有的會(huì)存在快速清除按鈕 (如：密碼輸入框)，有的則沒(méi)有，這是為什么呢？

這里的關(guān)注點(diǎn)其實(shí)還是個(gè)效率的問(wèn)題，這里的效率不只是一個(gè)個(gè)清除和一鍵清除的對(duì)比，還要考慮到重新錄入的效率。

面對(duì)一個(gè)需要修改的表單我們大概率會(huì)在清除后再次錄入的，這時(shí)候就要考慮錄入成本的高低。密碼輸入錯(cuò)誤一鍵清除后，再次錄入也會(huì)很快地完成，此時(shí)應(yīng)該為了提高效率應(yīng)該使用一鍵清除；而表單中若是我們精心編寫的一段話，潤(rùn)色也花費(fèi)了不少時(shí)間，清除后重新錄入的的成本就會(huì)高很多，此時(shí)就應(yīng)該謹(jǐn)慎提供一鍵清除。

判斷是否需要一鍵清空按鈕，首先需要判斷修改成本的高低，低輸入成本可以使用一鍵清空按鈕，輸入成本較高時(shí)，慎用一鍵清空按鈕。

5. 表單設(shè)計(jì)小技巧

1)?優(yōu)先考慮選擇錄入

表單樣式能用選擇的就不要用文本錄入，盡量讓用戶做選擇，而不是填空 （填空的不確定性、成本高），除非想要降低操作效率。選擇錄入不僅僅交互步驟少，更能避免用戶對(duì)表單的一頭霧水以及輸入錯(cuò)誤的情況。

2) 有限制輸入時(shí)，給予用戶明確的提示，增加用戶感知，減少出錯(cuò)率。

3) 內(nèi)容排列有邏輯

下拉菜單選項(xiàng)按照一定的邏輯排序，例如：根據(jù)重要程度。

4) 聯(lián)系上下自動(dòng)補(bǔ)全

在實(shí)際的應(yīng)用場(chǎng)景中，有些表單的信息是可以根據(jù)已填寫數(shù)據(jù)聯(lián)想得到的，此時(shí)就應(yīng)該讓這些表單關(guān)聯(lián)已填寫的內(nèi)容自動(dòng)填寫，從而提升整個(gè)表單的錄入效率和使用體驗(yàn)。

例如：在填寫一些與個(gè)人信息相關(guān)的表單時(shí)，輸入身份證號(hào)后，像省份、出生年月、性別、戶籍地址等可以從身份證號(hào)中關(guān)聯(lián)到的信息就應(yīng)該自動(dòng)填寫顯示出來(lái)，讓用戶檢查關(guān)聯(lián)出的信息正確與否以及修改錯(cuò)誤信息即可。

更多表單設(shè)計(jì)小技巧 詳見(jiàn)第一篇文章《提升表單設(shè)計(jì)效果的18個(gè)技巧》

以上是作者在學(xué)習(xí)和實(shí)際工作中關(guān)于表單的一些思考和總結(jié)，歡迎大家指正交流。

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

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