2021-1-20 周周
降本增效一直是為B端賦能的首要宗旨，那么我們該如何從設設層面為用戶提高表單錄入的效率呢？
什么是表單頁
表單都是界面中最 常見、最 重要 的組件之一，屬于 數據錄入 板塊。
表單是2B產品“管理”的第一步。軟件/系統/平臺本身是沒有信息的，像是一個空的架子，表單是用戶向系統輸入信息的一種非常重要的手段，只有用戶向系統添加了豐富的信息，系統才能實現其價值。
表單是信息添加、錄入的通用形式；主要作用是負責數據采集，是最常用的信息錄入工具，隨著互聯網興起，特別是最近幾年B端的興起，表單的重要性顯得越來越突出。
表單的設計原則
- 充分考慮用戶填寫表單的目的，區分必填項和非必填項，刪減不必要的表單信息（例如：填寫了身份證就無需再填寫出生日期，因身份證信息內包含出生日期，系統自動識別即可），確定完表單內容。必要的時候對信息分組，表單項并非從上到下無序羅列，而是根據表單內容，按照一定的邏輯或者用戶熟悉的模式順序，對表單項進行排序和分組，才能讓用戶瀏覽和填寫流暢且。
準確- 信息表達要準確無誤，避免歧義，提示說明要合適，不要給正確的廢話，例如：填寫備注的提示用“請輸入備注”沒有意義，換成“不超過100字”更有助用戶對表單的理解。
一致- 組件的規范和操作的規范同樣重要。同一套系統同一個組件使用一個樣式即可，這樣才能保證頁面的視覺統一。同一個功能按鈕，在A頁面點擊給的彈窗，在B頁面也同樣要為彈窗。
易懂- 給予高質量的信息提示及反饋，如果需要輸入某種特殊格式，請給出具體要求（例如：密碼長度8-20位)；錯誤提示的時候要給用戶錯誤的具體內容（例如：登錄時不能單純去提示“您輸入的信息有誤”，需準確提示是賬號格式錯誤，還是密碼長度錯誤）。
我們先看看表單主構成，表單主要由這5部分構成：
分組標題：表單項較多的情況下建議分組，分組標題有引導用戶完成表單填寫的作用。
表單標簽：也就是填寫或操作內容的標題。標簽規范的方式時標題后帶冒號，還是不帶冒號呢？這個其實都可以，沒有硬性的標準，自定義一個規范去執行就可以了。
表單域：表單是用來數據采集的容器，也可以視為一個對象。包含了文本框、多行文本框、密碼框、隱藏域、復選框、單選框、下拉選擇框和文件上傳等，用于采集用戶的輸入或選擇的數據。
提示信息：分為說明性提示信息和操作反饋提示。提示信息可以放在表單域里邊（例如：備注的提示“不超過100字”），也可以在表單域或后邊，還可以收進“問號icon”里，鼠標hover后給氣泡提示展示信息即可。
操作按鈕：操作按鈕為頁面的全局操作，為滿足用戶隨時對表單進行操作的需求，操作按鈕會懸浮在頁面底部。一般情況按鈕最多只有一個主按鈕，可以有多個次按鈕。
(1) 分類
左標簽：優勢-節約縱向空間，信息表達明確，多用于web端；劣勢-橫向空間利用率不高，不適用移動端等狹窄空間。
頂標簽：優勢-視覺舒適，節約橫向空間；劣勢-縱向空間利用率不高。
行內標簽：優勢-最節省空間，多用于注冊登錄等字段少的表單；劣勢-輸入時和輸入后標簽消失，令用戶迷茫（可優化為浮動標簽，在光標鍵入時，標簽展示輸入框上），字段多的表單不建議使用行內標簽及浮動標簽。
(2) 對齊方式
左對齊：從左至右的閱讀順序，符合人們的閱讀習慣，一般用于詳情的陳列。
右對齊：也被稱為“冒號對齊”，右對齊使得標簽和輸入之間的距離固定，有明確的視覺關聯，操作效率高，非常適合表單錄入。
表單域大致分為以下5個大類：輸入、內容選擇、日期時間選擇、數值范圍和上傳。
選擇適合的控件，不光能在視覺上做到統一規范，還能提高用戶操作效率。
(1) 輸入
文本框：選擇適合的大小，它的大小應該向用戶暗示所需輸入內容的長度，以此減輕判斷負擔（注意：文章類超長文本不適用于長文本輸入框，建議使用富文本編輯器）。
特定前/后綴：涉及到金額輸入時，當用戶輸入的金額超過千時，出現千分位最數據進行分組，方便用戶快速識別金額。
帶icon或按鈕：“日期選擇”和“時間選擇”一般都附帶icon，便于用戶快速識別。帶按鈕的表單項在“密碼輸入”用的最多，可做隱藏密碼和顯示密碼的切換用，因為盲輸及可能會出錯。
(2) 選擇
內容選擇：含單選、多選、選擇器（常用的有下拉單選/多選）、級聯選擇（多層級聯動選擇）、樹選擇、穿梭框、開關。
1、單選框、復選框：一般用于選項不多且相對固定的情況，選項控制在6個以內為宜，用戶可以一眼看到所有內容。單選框只能是其中一個選項，多選框則可以選擇其中一個或多個選項。
2、開關：使用開關控件的條件是選項的性質互斥（例如：是和否、打開和關閉、開啟和禁用等）；
3、選擇器：當選擇項超6個，就需要考慮用到選擇器了。下拉列表是網頁中一種最省頁面空間的選擇方式，單擊下拉按鈕后能看到最多展示的8個選項，少于8個則顯示實際個數自適應，多余8個則出現滾動條。下拉選擇器根據屏幕位置決定向下展示或者向上展示。
選擇器適用廣泛，同類選項（例如：選擇客戶、商品名稱、貨物編號等）、增量選項（例如：年份選擇）。
4、級聯選擇、樹選擇：二者都屬層級選擇，區別在于級聯選好選項后框內顯示的是含層級的內容選項，且只能選擇需最子集選項（例如：江蘇省/蘇州市/工業園區，不能選擇江蘇省，因為前面的選項只為導航至最子集），而樹選擇框內展示的是單個選項的內容，不展示層級，但可以選擇任何層級（例如下圖：浙江?。?
日期及時間選擇：分為日期選擇、時間選擇、日期時間選擇，可以是單個時間，也可以是時間區間；他們很特殊，只為日期和時間選項而生。
1、日期、時間選擇：當用戶需要一個時間/日期，可以點擊標準輸入框，彈出選擇面板進行選擇，或者輸入時間后自動定位到該選項，無需手動選擇。
2、日期時間選擇：相當于將日期和時間這兩個選擇項集為一身，在同一個選擇器里選擇（年月日時分秒）；下例相當于兩個下拉框切換使用，步驟1先彈出日期選擇框選擇年月日，選擇好日期后點擊“確定按鈕”旁邊的“選擇時間”，則切換為步驟2的時間選擇框。
數值范圍：
1、滑動輸入器：滑動型輸入器，展示當前值和可選范圍，通過拖動滑塊在一個固定區間內進行選擇。
2、步進器：也稱為計數器，僅允許輸入自定義范圍內標準的數字值，當自定義標準數字值為整數時，輸入小數點后回車，帶小數點的數字只保留整數呈現。上下按鈕也不是每點擊一次數值±1，可以設置跳每點擊一次±N，N可以為任何數字，也可以為小數。
(3) 上傳
文件、圖片上傳：第一種情況是上傳圖片和文件合在一個上傳控件里；第二種情況是區分了圖片上傳和除了圖片之外的其他文件的上傳，這種情況下的圖片成功上傳后是有縮略圖的；根據需求選擇其中一種即可。要注意的是上傳有四種狀態：上傳前、上傳中、上傳后的成功狀態、上傳后的失敗狀態，UI都需要設計出來，一個都不能少。
(1) 占位符
占位符就是先占據一個固定的位置，等著用戶往里面添加內容的符號或文字。在鍵入信息前，出現在輸入框和下拉框里的提示信息就是占位符。占位符需要注意的是，要避免使用“正確的廢話”，因為給不到用戶任何提示幫助，如果表單項沒有制定規則，可用表單項編輯方式占位“請輸入”/“請選擇”，以新增商品為案例：
(2) 幫助信息
幫助信息和占位符類似，也是在輸入編輯前給用戶的提示信息。和占位符不同點在于“幫助信息”不占據輸入編輯的位置，不會因為鍵入信息后消失，屬于表單中的常駐信息。三種方式可以同時運用在一套系統內，視當前表單情況選定。
(3) 校驗信息
校驗信息是在輸入后或者提交后，系統對編輯的信息進行的校驗，分為前端校驗和后端校驗兩種。
前端校驗：一般校驗顯示錯誤和格式錯誤：必填項、（郵箱、電話號、地址）格式、密碼強度等。快速反饋，直接提醒用戶錯誤內容，讓用戶及時知曉并更改。
后端校驗：唯一性驗證、驗證碼、敏感詞等，觸發校驗請求后系統會去數據庫查詢校驗信息，再給予用戶相應的反饋。
(1) 分布的位置
表單頂部、表單底部：用于放置全局按鈕，兩個位置的功能按鈕是一樣的，只是出現的條件不同。默認顯示表單頂部按鈕，當頂部按鈕因為頁面上滑被遮蓋了，底部按鈕才懸浮在窗口底部。目的在于用戶無需上下滑動到固定位置才能對表單進行操作，省時增效。
跟隨表單項：這種情況很少用到，一般是需要校驗的情況下使用，或者可手動增減的表單項。
分組底部：一般是對于這個分組進行的操作按鈕。
溫馨提示：當操作按鈕超三個時，可以將相對低頻的操作按鈕折疊收起，點擊或鼠標hover“更多操作”時下拉展開顯示所有按鈕。
(2) 閱讀順序、按鈕層級、對齊方式
其實這三者的規則都是一樣的，當按鈕右對齊頁面的時候，閱讀順序自然是從右向左，而按鈕層級也是從右向左遞減，比如頂部的提交、保存、取消三個按鈕；商品列表的“添加商品”和“刪除全部商品”，左對齊頁面，閱讀順序和層級自然也是從左至右。
表單頁面主要的交互方式有四種：原位編輯、氣泡卡片、彈窗/抽屜、頁面跳轉。表單頁面在交互方式的選擇取決于表單容量及表單親密度。
原位編輯是輕量型信息采集表單，適用于表單編輯項較少（盡量低于5個編輯項），且屬于主功能分支的場景。其優點在于操作便捷，隨時啟用與退出，能夠保證用戶對主要功能的操作流暢度。其存在的意義在于完善或者增強主功能的操作，而不是打斷。
使用場景：常用于列表及卡片，詳情內也可以使用原位編輯（例如：詳情內只有A和B可以編輯，且需分別編輯，此時建議用原位編輯進行操作），需要注意的是，盡量不要用在長文本編輯。
激活方式：信息展示區域通過雙擊、單擊、hover或點擊“編輯”按鈕即變為激活編輯狀態。最常見的比如：微信/企業微信修改群名就是單擊激活，列表、表格的點擊“編輯”激活，相比之下hover去激活相對用的少。
與頁面的親密度：親密度高，編輯內容即為展示內容，當編輯內容不止表格內展示的字段數量，且存在聯動關系時，需慎重（例如：“部門”和“班次”屬于上下級聯動關系，列表內只顯示“部門”，而“班次”在詳情頁面顯示，則不適用原位編輯）。
使用場景：常用于條件篩選的設置，點擊或hover后顯示氣泡卡片內容（建議不超過5個設置項）。觸發生效機制可以是設置項點擊即生效，也可以多個設置項選擇后，觸發操作按鈕生效（操作按鈕建議不超過2個），觸發機制可以根據項目實際需求而定。
與頁面的親密度：親密度高，所見即所得，編輯前/后都不遮擋列表，用戶剛剛操做了什么，即在當前展示操作后的結果，讓用戶感受到一切都在掌握之中，不會出現斷裂感，交互很友好；
(1) 彈窗
雖說設計上對彈窗的使用都是持謹慎態度的，但希望大家也不要談彈窗就色變。彈窗的好處在于讓用戶更聚焦，且不用離開當前頁面就能更快速更容易完成任務。
其實該使用彈窗的時候也是要用的，特別是在B端，如果彈窗能解決的問題，不建議頻繁的跳頁面去操作。如下例：下單錄入涉及添加產品，而產品信息字段又很多，不是一個模糊搜索就能解決的，此時建議使用彈窗而不是跳頁面去操作。來回跳頁面頻繁刷新，不如用彈窗選擇操作更為簡單，在當前頁的彈窗選擇產品，再將產品信息帶入當前錄入頁面，此流程更符合用戶操作時的心理預期。
使用場景：所有頁面均可，3個以上的錄入項即可使用彈窗；需要注意保持交互一致性（例如：在列表“新增會員”點擊觸發是彈窗，在其他頁面也同樣要是彈窗）；當然也有特殊情況，例如：快捷新增時只需錄入一個名稱，可以先使用快捷操作添加極少的信息，后續在編輯頁面進行補充；
與頁面的親密度：可以有強關聯，也可以沒有關聯。有強關聯指的是，比如說：點擊“新增會員”按鈕彈出來的此彈窗，在其他也要用這個“新增會員”名稱，避免用戶迷茫（當然了，很多新增和編輯其實用的同一個彈窗，這個特殊情況除外）。沒有關聯是指，可以在列表頁面使用“新增會員”彈窗，也可以在工作臺或者其他有需求的頁面去使用“新增會員”彈窗。
(2) 抽屜
抽屜彈窗也被稱為側彈窗，彈窗抽屜和彈窗很類似，使用場景和親密度都是一樣的。相比彈窗，抽屜的側邊彈出的交互方式，其操作成本和用戶使用心理負擔會小很多。
注意事項：如果系統大部分用的彈窗，就優先選用彈窗，如果表單內增加了更多字段，可以換成抽屜彈窗；
使用場景：超出了彈窗/抽屜的承載量，就要用到頁面跳轉了，一般一級模塊的設置項也會用到頁面跳轉，因為會牽一發動全身。還有初始化入駐也需要跳轉頁面進行操作，不光因為需要提交大量信息，還因為各種認證審核需要一項一項進行，此時用抽屜和彈窗承載內容顯然不合適，因為彈窗和抽屜，代表著快速完成。
與頁面的親密度：跳轉了頁面，不管是新開頁面還是刷新原頁面，與原頁面的關聯性已經沒那么強了，只能說他們屬于同一條路徑下不同頁面。
根據內容的多少及親密程度來決定，我們設計時應選用哪種交互方式，或者可以直接根據內容承載量做判斷也是可以的，從少到多依次此為：氣泡卡片-原位編輯-彈窗-抽屜-頁面跳轉。
排版布局的方式有四種：平鋪、分組、標簽頁、分步驟。根據內容項的多少及實際需求相應合理的布局。
輸入信息的分類，是有效的減少用戶操作疲勞度的方法。分類的維度有多種，根據表單輸入內容的相關性、內容的所屬類別，可以將同類型的數據統一輸入，減少用戶輸入信息的跨度，提高輸入效率。
使用場景：平鋪顧名思義就是指表單項不做分組，全部平鋪展開，很多注冊和登錄都是這種布局。適用于表單項少，或者多但表單項之間親密性很強，就無需額外分組，直接將表單項平鋪開展示，簡單明了。
對于內容過多的表單輸入頁面，分組、分模塊的排版方式讓用戶感覺更友好，不是密密麻麻一大片，讓人喘不過氣來，而是有條理的布局，張弛有度，疏密有致。用戶可以在填寫好一段內容后進行心理上停頓休息，減少視覺疲勞和心理壓力。
(1) 標題分組
使用場景：超過了7個設置項，且較為復雜的表單，標題分組之間的關聯性較弱，就可以去分類歸納表單信息，位的是降低用戶的認知負擔，提高用戶體驗。注意：分組內組內設置項要有強關聯性，否則不能歸為一組，不能因為字段多，為了分組去分組。
(2) 卡片分組
使用場景：7-15個設置項，用標題分組不足以給信息做層級區分，為了讓用戶在操作時更聚焦，也需要給用戶更明確的操作引導，即可使用卡片分組。
卡片分組之間關聯性更弱，分類更明確，多個設置項，多個分類。需要注意，一個表單項不要分過多的卡片分組，不能每兩項做一個分組，這反而會造成用戶視覺壓力和操作負擔。
使用場景：當標題分組和卡片分組都不足以對表單進行分組時，就可以考慮用tab切換了。每個設置都包含多個錄入，且使用了標簽。
注意事項：tab標簽的填寫沒有先后順序的規則，標簽頁彼此之間沒有特定的關聯性，可獨立去設置。也就是說先填寫tab1還是先填寫tab2，對表單的其他tab項沒有任何影響，不存在聯動關系。
標簽頁對應的詳情展示：一項一項上下鋪出來，但如果表單詳情信息過長，可以考慮將錨點定位，點擊錨點定位的標題即可自動定位到該區域，方便用戶快速定位瀏覽位置。
使用場景：對輸入表單進行分步驟的處理，可以降低用戶的操作頻率，給與用戶一定的休息空間，用戶會有階段性的成就感，同時分步驟的輸入還有利于減少信息的錯誤率。如果輸入表單的內容較多，同時輸入內容有邏輯上的先后順序，此時可以考慮將輸入表單進行分步驟處理。
利用步驟條，將大型、復雜任務拆解為多個部分，并按照相關性分組，可以提高用戶處理的專注度，降低頁面的復雜性，減輕用戶操作負擔，降低用戶出錯率，提高用戶體驗。
根據內容關聯性的強弱程度來決定，我們設計時應選用哪種布局方式，或者可以直接根據復雜程度做選擇也是可以的，從弱到強依次此為：平鋪-標題分組-卡片分組-標簽頁/分步驟轉。
提高易用性的方式有以下四種分別為：視覺清晰、信息降噪、智能、準確易懂，每個表單，每個頁面都要應用這四項準則，不光是在表單頁面，所有頁面都適用。
布局方式-單列布局：常見的表單布局為單列信息展示布局，比如：蘋果、飛書、釘釘、有贊、微盟等首選使用單列布局進行頁面排版。設計中盡量采用單列布局，是為保證用戶的視覺動線流暢，不容易遺漏信息；
在輸入項較多時，每次填寫完一項都要鼠標選中下一個輸入框，很容易讓用戶失去耐心，而單列布局恰好能解決這個問題并提高用戶體驗，輸入完一項按enter鍵可快速切換至下一項，提高用戶操作效率。
當然了按Tab鍵也是一樣的效果，只是，一般情況下，大眾都更習慣也更熟悉回車鍵的位置，需要注意的是，長文本輸入框的屬性里回車鍵是文本換行的意思，需要區別設置兩者的操作機制。
布局方式-橫向布局：橫向布局也是單列布局，是它的發散版本。如果出于業務方復雜需求的考慮，必須在橫向增加內容，那增加的表單項一定要和前表單項有關聯，才可作為分組橫向排列，還需注意不能出現Y軸平行豎向分組（如下圖），避免用戶迷?；蜻z漏信。
(1) 合理設置必填項
正常情況下，我們標示“*”標就是為了提示用戶此項必須要填寫方能提交單據。
但當一個編輯頁面的必填項非常多時，就可以無需標注必填，只標明哪些是非必填項就行。
當編輯頁全部都是必填項時，可在大標題處用標示必填即可。
(2) 折疊不重要非必填信息
在能完整獲取需要信息的前提下，輸入項越少越好，當表單頁很長，且有些信息非必填，或者說填寫后的意義不大。這樣的情況下可以考慮將非必要信息折疊收起，點擊“展示更多”下拉展開全部表單項，讓用戶可以選擇性錄入不重要的信息。
(1) 智能填寫
根據上下文信息可自動獲取的，無需用戶再次填寫。如下例：通過客戶名稱數據庫可自動匹配客戶手機號，或者通過手機號匹配客戶名稱。填寫郵寄信息的時候，只需選擇省市區，郵政編碼便自動填充，減少了用戶查找郵政編碼的繁瑣（甚至可以提議“郵政編碼”字段直接去掉）。而生日和性別都可以在身份證號內提取。
(2) 智能排序
默認高頻：當選擇器內容超過5個選則項時，可以對內容選項進行一定排序規則（首字母排序、數字排序或設置默認高頻選項等），方面用戶提前預知選項的大致位置，檢索找到相應的選項。
(3) 智能聯想
智能聯想是給予用戶鍵入字段的聯想功能，用戶少量輸入后進行選擇。錄入方式由原來的輸入變成半輸入后選擇，減少用戶的輸入成本，提高用戶操作效率。
自動搜索：當下拉選項超過16個時，建議加入輸入選擇功能，用戶可使用下拉選擇，也可以輸入關鍵字后智能匹配顯示對應的選項?；蛘呖梢栽偌由闲畔⑴判?，根據點擊頻次進行排序，高頻選項前置。
后綴聯想：一般用于郵箱信息的錄入，當輸入內容后，自動將默認高頻的郵箱后綴作為補充數據填充在后方，減少用戶的輸入。
操作直觀：去除冗余且無用的部件：切換“開關”操作后會立即生效展示結果，無需與操作按鈕搭配使用，避免造成用戶的誤解，導致體驗不友好。
準確的錯誤提示：反饋提示是頁面系統對用戶的輸入的內容進行的校驗，并對校驗結果予以展示的提示形式。可分為前端校驗和后端校驗兩種。
錯誤提示的時候要給用戶錯誤的具體內容，而非簡單粗暴的錯誤提示。例如：登錄時不能單純去提示“您輸入的信息有誤”，需準確提示是賬號信息錯誤，還是密碼校驗錯誤。
前端校驗：也被稱為“即時校驗”，一般是校驗顯現的數據內容，比如字符長度、格式（是否包含非法字符）、是否為空等。該方式的校驗條件多在本地，無需實時向服務器發命令而得到反饋。
后端校驗：包含“局部校驗”和“全局校驗”，局部校驗：在注冊賬號時，輸入完整用戶名以后，提示用戶名是否可用，則為局部校驗反饋。全局校驗反饋：多指在輸入完成提交或者階段性完成（分步驟跳轉下一步）時，系統給出的校驗反饋。在用戶操作反饋動作按鈕后，界面在相應位置（一般為單個輸入框的下方或右側）一次性給出對應的錯誤提示。
文章來源：UI中國 作者：AI-玲玲
藍藍設計( m.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務