表單作為B端產(chǎn)品重要的信息載體，有著舉足輕重的作用，通過設(shè)計的手段來提高表單的易用性不僅能夠改善用戶體驗，降低錯誤率，提高填寫效率，還能增加用戶參與度和完成率，同時對企業(yè)或組織而言提高效率和減少成本。
提升用戶體驗：
易用性是用戶體驗的核心要素之一。通過設(shè)計易用的表單，用戶在填寫表單的過程中將更加輕松、愉快，減少用戶的困惑和不滿意，從而提升用戶對產(chǎn)品或服務(wù)的整體感受。
降低用戶錯誤率
：易用的表單設(shè)計可以減少用戶填寫時的錯誤率。通過清晰的標(biāo)簽、合理的表單驗證和錯誤提示等設(shè)計，可以引導(dǎo)用戶正確填寫信息，提高數(shù)據(jù)的準(zhǔn)確性和完整性。
提高填寫效率：
易用的表單設(shè)計可以簡化填寫過程，減少用戶填寫的工作量和時間消耗。例如，使用默認(rèn)值、預(yù)填選項、自動填充等技術(shù)，可以快速填寫常見、重復(fù)的信息，提高填寫效率。
增加用戶參與度和完成率：
易用的表單設(shè)計可以降低用戶的參與門檻，激發(fā)用戶的積極性和參與度。通過減少復(fù)雜度、提供指導(dǎo)和幫助，可以鼓勵用戶完成表單填寫，降低填寫過程中的放棄率。
對企業(yè)或組織而言提高效率和減少成本：
易用的表單設(shè)計可以減少用戶填寫過程中的錯誤和糾正，從而減少后續(xù)的溝通和處理成本。同時，易用的表單設(shè)計還可以提高數(shù)據(jù)的準(zhǔn)確性和可用性，為企業(yè)或組織提供更精確和有用的信息。
①當(dāng)表單中僅有極少數(shù)是選填，其他都是必填時，可以通過去掉提示符來進(jìn)行降噪處理。
②隱藏非必填的字段，只保留用戶必須填寫的信息，如下圖，把選填項收進(jìn)“展示更多”。
即使明知用戶沒有強(qiáng)烈意愿填寫非必填項，設(shè)置選填項也是有一定原因的：
提供更多信息的機(jī)會：
一些用戶可能有意愿提供更多的信息，以便獲得更個性化的服務(wù)或更符合其需求的產(chǎn)品。因此，設(shè)置選填項可以為有意愿的用戶提供一個自由填寫的空間，從而更好地滿足其需求。
降低填寫壓力
：明確標(biāo)識哪些項目是必填項，哪些是選填項，可以減輕用戶的填寫壓力，讓用戶更輕松地填寫表單。有時候用戶可能會覺得需要填寫的信息太多或太麻煩，設(shè)置選填項可以減少用戶對表單填寫的抗拒感。
用戶意愿變化：
有些用戶一開始可能沒有意愿填寫選填項，但在填寫過程中可能會因為某些原因發(fā)生變化，因此設(shè)置選填項給予了用戶更多的選擇靈活性。
收集額外信息：
對于企業(yè)或產(chǎn)品方面來講，收集一些額外的信息可能有助于更好地了解用戶需求、行為和喜好，進(jìn)行更精準(zhǔn)的定制推薦或個性化服務(wù)。
在表單設(shè)計中保證清晰明了的標(biāo)簽和填寫指引是至關(guān)重要的：
幫助用戶理解：
清晰的標(biāo)簽和填寫指引可以幫助用戶準(zhǔn)確理解每個字段的含義和填寫規(guī)則，降低用戶填寫時的困惑和錯誤率。
提升用戶體驗：
用戶在填寫表單時，如果能夠清晰地知道每個字段的作用和要求，將會感受到更加愉快和輕松的用戶體驗。
降低填寫難度：
對于一些復(fù)雜的表單或需要填寫大量信息的表單而言，清晰的標(biāo)簽和填寫指引可以降低用戶的填寫難度，讓用戶更容易完成填寫。
減少錯誤和糾正：
如果用戶填寫表單時存在理解上的偏差或誤解，可能會導(dǎo)致填寫錯誤。清晰的標(biāo)簽和指引可以減少用戶填寫錯誤的可能性，降低后續(xù)糾正的成本和工作量。
因此，保證表單中的標(biāo)簽清晰明了、填寫指引清晰易懂是設(shè)計表單時必須要考慮的重要因素，它直接影響到用戶填寫體驗的質(zhì)量和表單數(shù)據(jù)的準(zhǔn)確性。
當(dāng)用戶面臨一個長表單時，巨量的填寫內(nèi)容會給用戶造成填寫壓力。如果業(yè)務(wù)本身具有流程化的特性（如注冊、認(rèn)證、發(fā)布等），將表單分成多個步驟并提供清晰的導(dǎo)航，以逐步引導(dǎo)用戶填寫信息，就可以降低填寫壓力，提升用戶體驗。
但是分步填寫也有個小缺點，即用戶無法第一時間感知所有的填寫項，必須完成當(dāng)前這一步操作才能看到下一步操作。
在用戶輸入內(nèi)容后，實時對用戶的輸入進(jìn)行驗證，及時就近反饋用戶填寫錯誤或格式不正確，并提供相應(yīng)的修正建議，這樣能讓用戶準(zhǔn)確的獲取到錯誤提示，并快速定位到相關(guān)項。
為一些常見的選項設(shè)置默認(rèn)值，或者根據(jù)用戶之前的選擇自動填入相關(guān)字段，能夠減少用戶的輸入操作，提高填寫效率。
合理的利用智能輔助可以有效的提高數(shù)據(jù)收集效率和準(zhǔn)確性，還能顯著改善用戶的填寫體驗，減少用戶的挫敗感和放棄率。常見的智能場景有：
利用瀏覽器已存儲的信息或者數(shù)據(jù)庫中的相關(guān)數(shù)據(jù)來預(yù)測和自動填充表單字段，例如根據(jù)手機(jī)號帶出用戶姓名；根據(jù)地址帶出郵政編碼；根據(jù)身份信息帶出生日。
如例圖，如果用戶選擇“是”選項，則展開填寫開啟寄售信息的相關(guān)字段；如果選擇“否”，則這部分字段隱藏。
根據(jù)是or否的條件邏輯進(jìn)行展示或隱藏表單的特定部分
對于一些標(biāo)準(zhǔn)證件信息的錄入，如身份證件、特定類型發(fā)票等，可以通過 OCR 識別文件內(nèi)容。當(dāng)用戶上傳圖片后，運用圖像識別技術(shù)提取關(guān)鍵信息并自動填入結(jié)果。OCR （Optical Character Recognition，光學(xué)字符識別）是指電子設(shè)備檢查紙上打印的字符，通過檢測暗、亮的模式確定其形狀，然后用字符識別方法將形狀翻譯成計算機(jī)文字的過程。
采用響應(yīng)式設(shè)計能確保表單在不同設(shè)備上都能夠正常顯示，以適應(yīng)不同屏幕尺寸和分辨率，提供一致的用戶體驗。
B端設(shè)計師如果設(shè)計時不考慮適配，前端工程師就會站在他的角度根據(jù)自己的認(rèn)為合理的方式進(jìn)行適配，在實際使用時就會導(dǎo)致體驗不好，后面想在調(diào)整就得重新等排期了，因此在設(shè)計時就需要根據(jù)使用場景把適配方式定好，例如只會在有臺式機(jī)或筆記本的情況下操作，那么一套適配即可；如果既可以在電腦上操作又可以在移動端上操作，那就要做多端適配。 表單在設(shè)計時一般有2種適配方式，一種是固定適配，一種是間距適配。
固定適配指表單中信息寬度固定不隨分辨率變化而變化，要保證最小分辨率能夠正常顯示。所謂最小分辨率是指客戶公司使用的最小屏幕分辨率。比如客戶公司用的統(tǒng)一是高配4K顯示器的電腦，那么就設(shè)定最小兼容分辨率是3840；如果客戶公司除了高配4K還有較老的顯示設(shè)備，如1280x720，那么最小兼容分辨率就要設(shè)計為1280；如果客戶要求在移動端也能使用，那么就應(yīng)該按照移動端的設(shè)計規(guī)范重新設(shè)計單獨適配。
間距適配就是使用固定的左右間距，不跟隨頁面的寬度變化。當(dāng)頁面寬度變大時，組件自適應(yīng)變寬。
該適應(yīng)方式在彈窗、抽屜中較為使用，表單頁中不太推薦使用該方式，因為當(dāng)分辨率變大，眼動的視覺變大，不利于信息瀏覽。
我見過許多B端產(chǎn)品，在移動端上套用PC端的組件，非常難用的同時還特別容易出現(xiàn)bug。Android 和 iOS 都有用于特定類型數(shù)據(jù)輸入的默認(rèn)組件，盡可能使用這些內(nèi)置的組件，這樣用戶會更熟悉原生的選項，表現(xiàn)和體驗會更好。
在設(shè)計表單的標(biāo)簽時，目標(biāo)是最少的字段和最大的清晰度。日常項目中的產(chǎn)品原型中，會遇到一些標(biāo)簽字段特別長的情況，這時設(shè)計師就需要研究如何用更簡潔的語言來表達(dá)。
當(dāng)填寫電話號碼、身份證、銀行卡、訂單號等較長的數(shù)字時只需要一個輸入字段，避免將數(shù)字拆分為多個輸入字段。分成多個字段雖然看起來清楚，但需要用戶多次點擊輸入，操作更繁瑣。而且考慮有復(fù)制字段的場景，更不能分為多個字段。
所謂防錯糾錯，就是通過對表單字段格式的限制，來減少用戶輸入的誤差。
比如像手機(jī)號、銀行卡號、金額等純數(shù)字字段，在開發(fā)階段就要對格式加上限制，即該字段的輸入框內(nèi)只能輸入0-9的阿拉伯?dāng)?shù)字，輸入其他字符無效，且要限制不同字段的數(shù)字上限，如手機(jī)號碼11位，身份證號18位等，這樣就可以極大的避免誤輸入其他字符的情況。
又比如車牌號這種字段，是沒有I和O的，同時為了避免省份簡稱輸入錯誤，需要用車牌號專用虛擬鍵盤來輸入，可以極大的避免輸入錯誤。
封閉不正確道理是指把有可能進(jìn)行誤操作的路徑堵死，此路不通。例如客戶需要配置一個banner，這個banner的時效是未來N天，那么為了數(shù)據(jù)的真實有效，就需要將超出時間選擇范圍的日期置灰，避免把開始時間或結(jié)束時間配成今天之前的無效時間。
“需要在哪里輸出，就要允許在哪里輸入”這句話是交互之父阿蘭·庫珀（Alan Cooper）說的。
在一些列表中，有時候需要對字段內(nèi)容進(jìn)行編輯，比如修改數(shù)據(jù)或者修改備注等信息，雖然大多時候需要彈編輯框口或跳轉(zhuǎn)到編輯頁，但在可編輯數(shù)據(jù)量不大的情況下，最好的方式是在當(dāng)前列表中直接修改編輯，這樣整個操作都在用戶的視線內(nèi)完成，無需進(jìn)行頁面跳轉(zhuǎn)打斷當(dāng)前注意力。
試想一下，當(dāng)你花了十幾個小時編輯了一篇文章，啪，很快啊，停電了；繼續(xù)想一下，你小心翼翼的把一個巨量信息的表單填完了還沒點提交，結(jié)果鼠標(biāo)誤點了一個button，啪，很快啊，加載出了一個新頁面。怎么樣？血壓有沒有升高？有沒有同時想起被PS的保存機(jī)制支配的恐懼？
表單設(shè)計中要做自動保存功能有幾個重要原因：
防止數(shù)據(jù)丟失：
自動保存功能可以在用戶填寫表單時定期保存其輸入的內(nèi)容。這樣，即使用戶在填寫過程中意外關(guān)閉了頁面或瀏覽器，也能夠保證填寫的數(shù)據(jù)不會丟失，從而提高用戶的填寫體驗和滿意度。
減少用戶操作
：自動保存功能可以減少用戶手動保存的需求，節(jié)省用戶的操作時間和精力。用戶不需要擔(dān)心頻繁地手動保存，而是可以專注于填寫表單，提高填寫的效率和順暢度。
增強(qiáng)用戶信心：
有了自動保存功能，用戶填寫表單時會感到更加放心，因為他們知道即使發(fā)生意外情況，他們的數(shù)據(jù)也能夠被安全地保存下來。這種信心可以促使用戶更傾向于完成表單填寫，而不會因為擔(dān)心數(shù)據(jù)丟失而中途放棄。
提升用戶體驗：
自動保存功能可以提升用戶的整體填寫體驗。用戶不必?fù)?dān)心數(shù)據(jù)丟失或重復(fù)填寫，填寫過程更加流暢和愉快，從而增加用戶對產(chǎn)品的好感度和滿意度。
常見保存分為三類，手動保存、自動保存、提示保存。其中手動保存是主動行為，這里就不介紹了，著重聊下自動保存和提示保存。
目前市面上大部分產(chǎn)品都具備延遲存儲功能，例如：Word、Axure、Xmind、ZBrush、CAD、PohtoShop等等；特點：
-
-
如果連續(xù)工作沒有暫停，則每隔X分鐘自動保存一次（時間可由用戶設(shè)置）；
-
在后臺默默地保存，沒有提示和進(jìn)度條，不會干擾用戶；
-
-
-
所有自動保存的版本都留著，可以隨時回退到其中的任何一個版本(如figma)；
-
在站酷上撰寫和編輯帖子和頁面時，所做的更改每隔幾秒鐘會自動保存一次。
條件存儲顧名思義就是由某個條件觸發(fā)從而達(dá)到保存的目的，比如PohtoShop中的歷史記錄功能。特點：
-
每隔一段時間或者一個觸發(fā)條件自動保存一次；
-
當(dāng)用戶手動關(guān)閉文檔之后，自動保存的版本會被清空（部分可選擇是否保存歷史記錄）；
-
如果是非正常關(guān)閉，如電腦死機(jī)或者斷電，異常自動保存的版本會保存在硬盤上；
-
當(dāng)你打開文件時，如果檢測到一個異常自動保存的文件，它會提示你保存或者打開該文件；
提示保存是B端設(shè)計中非常重要的保存方式。它和自動保存不同的是，自動保存是幫你兜底，而提示保存是防止你誤操作。因為復(fù)雜的B端系統(tǒng)到處都是可點擊項，一不小心誤操作發(fā)生頁面跳轉(zhuǎn)，沒有保存的前提下必然會導(dǎo)致已編輯的內(nèi)容丟失。
當(dāng)監(jiān)測到用戶有編輯行為但沒有保存就想跳轉(zhuǎn)或離開當(dāng)前頁面的時候，彈出一個溫馨的提示：您是否需要保存呢？用戶可以選擇去保存或者直接離開，用提示保存的辦法就可以基本杜絕用戶忘記保存的問題。
表單頁可以對填寫的物料內(nèi)容進(jìn)行映射，展示真實的效果預(yù)覽。在設(shè)計中，可以利用開發(fā)工具或框架支持的預(yù)覽功能，確保在移動端、網(wǎng)頁、小程序等不同的平臺或設(shè)備上都能準(zhǔn)確地展現(xiàn)填寫后的最終效果。同時，該預(yù)覽功能可以降低用戶對操作結(jié)果不確定性的心理負(fù)擔(dān)，提升用戶體驗。
如圖例，左欄用于選擇組件，中間欄顯示可視化的表單編輯區(qū)，右欄則用來對選中的組件進(jìn)行具體的編輯和設(shè)置。這種布局有助于清晰地看到編輯內(nèi)容與表單結(jié)構(gòu)的關(guān)系。
在CMS系統(tǒng)的富文本編輯器中，也可以加入不同端的預(yù)覽模式，能做到編輯器中排版的樣式即時預(yù)覽，可極大提高用戶體驗。
對表單進(jìn)行用戶測試，或者收集用戶反饋，了解用戶在填寫表單過程中遇到的問題，以持續(xù)優(yōu)化和改進(jìn)表單設(shè)計。
使用B端的人，通常是該行業(yè)最前線的人，他們非常了解自己的業(yè)務(wù)流程，也知道使用B端產(chǎn)品中會有哪些痛點，B端產(chǎn)品設(shè)計師需要積極的從用戶那收集反饋，使表單更符合用戶的使用習(xí)慣，只有不斷的打磨，才能讓產(chǎn)品更完美，更高效，更安全。
如下面的貸款審核模塊，優(yōu)化前審核人員只能一個訂單一個訂單的進(jìn)行審核，不斷重復(fù)“查看-審核-提交-關(guān)閉-查看”的動作。
聽取審核人員建議后，新增審核模式，可以對未審核的訂單進(jìn)行批量審核，減少了不必要的操作路徑，極大的提高了審核效率。
