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