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