2023-6-9 高勁
前言
表單是我們生活中常見的信息添加、錄入的方式之一，如何進行表單的設計也是 B 端設計師的必修課。身邊別的部門的同事常常會說：表單不就是幾個輸入框，幾個組件組成的東西么，挺簡單的，有什么好設計的。但通常情況下，越是簡單的東西，要思考的點卻越多，想要把一個表單做好也是一件不容易的事情。
生活中，大多數人都不喜歡表單，比如前段時間有一些許久沒有聯系過的朋友讓我幫忙填寫一下調查問卷，作為一個熱心市民的我，自然是選擇點開鏈接幫忙填寫；一鼓作氣填了一段時間后，看著剩下的問題，我不耐煩的放棄了填寫這個調查問卷。所以作為設計師，我們應該“由內而外”而不是“由外而內”的去設計表單，如何讓表單變得更容易讓人接受也是設計師應該考慮的問題。
更多兆日UCD的干貨：
表單是一種用于信息添加、錄入的頁面類型。是連接用戶與數據庫的橋梁，通過引導用戶進行信息的填寫，從而提交數據給后臺。在用戶填寫提交時，還需要對用戶輸入內容進行校驗與反饋，保證用戶信息填寫的完整度。
填寫表單是一件麻煩事，當我們想做的是投票、網上購物或者添加好友之前，總是會有表單防礙著我們。正因為多數人不喜歡填寫表單，所以在做表單設計時，我們的首要目標是讓人們迅速輕松的完成填寫，同時獲得系統和用戶想要的東西。
1. 表單拆分
基礎表單中會有以下六個元素：
1. 標簽：標簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項。
2. 占位提示：直接展示在輸入項中，采用弱提示文本對所需信息描述，當用戶輸入信息時即消失。
3. 校驗：對輸入項進行驗證，并給出反饋提示，如：用戶未填寫，格式錯誤、內容錯誤等
4. 基礎組件：可交互輸入的區域，是構成表單的核心內容，主要有：輸入框、單（復）選框、上傳、時間選擇器、開關……
5. 提示：描述該輸入項需要的輸入類型，如：上傳的文件類型
6. 按鈕：用戶完成輸入后，點擊按鈕進行提交、進入下一步等，按鈕一般是跟隨的最后一個輸入項后面，若輸入項超出一屏顯示，建議將按鈕懸浮固定在底部。
當我們開始制作某一表單的時候，我們需要強迫自己思考一下每個元素的 UI 問題：
2. 表單錄入模式
表單根據錄入模式可以分為：單步表單、分步表單和高級表單
① 單步表單：
單步錄入指的是在一個頁面即可完成內容輸入。使用于內容較少，結構簡單的場景，我們常見的登錄頁就是典型的單步表單。
② 分步表單：
內容較多、錄入內容的方式差異較大的情況且業務本身具有流程化特性，一般通過添加分步導航展示內容。常見的例如銀行轉賬，修改密碼等等。
③ 高級表單（分組表單）：
高級表單（分組表單）：主要用于需要一次性錄入大批量數據的場景。高級表單與分步表單有點類似，都是為了減輕用戶填寫壓力，將填寫內容進行分塊。不同的點在于，分步表單的流程化明顯，后一步填寫的內容都是基于前一步來填寫、是前一步反饋。
3. 表單的頁面框架
表單的頁面框架指的是承載著整個表單頁的頁面框架，即：整頁式（新頁面）、彈窗式、側邊欄式。因為其頁面面積大小不一樣，所以使用情境有所不同。
整頁式（新頁面）：最常用方式，適用于絕大部分的表單，可以支持構建復雜的表單。
彈窗式：通過小面積的彈窗進行輕量化的編輯，方便快速進行增、刪、改、查；輸入項較少，一般不會有滾動條。
側邊欄式：與彈窗式相似，通過小面積的側邊欄進行編輯；可承載比彈窗更復雜一些的表單內容，可以有滾動條。
我們在選擇頁面框架時通常需要綜合以下三個因素去考慮：
4. 表單的排列方式
① 布局方式
在制作表單的時候分成兩種排列方式：單列布局和多列布局。我們可以通過以下幾個因素去考慮使用什么布局：
1. 在輸入項不多的情況下，建議采用單列布局，因為單列布局，用戶填寫的路徑就是從上至下的一條直線，十分符合用戶的視覺動線，能夠提高用戶瀏覽與填寫的效率。
2. 多列布局的表單會導致用戶的視覺路徑變長，用戶需以 “Z” 字形的視覺動線掃描表單，會提高瀏覽與填寫的效率，并且多列表單容易造成用戶填寫時的混亂，易填錯，體驗差。
但是有時部分業務訴求和某些特性的場景要求，會需要在有限的空間上放入更多的控件來收集用戶的信息，這時就不得不使用多列布局的樣式，因為多列能夠省縱向空間。
單列布局
優勢：視覺路徑清晰，填寫效率高，體驗好；
劣勢：垂直空間占用率高。
建議使用場景：表單內容較少的情況下使用單列布局
多列布局
優勢：省空間，能夠放置更多的控件；
劣勢：視覺路徑模糊，填寫成本高，填寫易出錯。
建議使用場景：關聯性強的填寫項橫向排放，且將該列中最重要填寫項的放于最左側。
② 標簽對齊方式
標簽的對齊方式有：左對齊、右對齊和頂對齊，除了需要考慮單列式布局還是多列式布局，還有我們也需要考慮標簽的對齊方式。
馬泰奧·彭佐在 2006 年 7 月對表單的每種對齊方式做過眼動測試研究，根據研究結論做出以下分析：
頂對齊標簽：
研究中，從標簽移動到輸入框只需 50 毫秒。比左對齊標簽快了 10 倍，后者需要 500 毫秒；比右對齊標簽方式快 2 倍，后者高達 240 秒。能迅速填完頂對齊標簽表單的原因之一，是因為眼球只需要在標簽和輸入框之間進行上下單向運動。
優勢：眼動測試中移動速度最快，最有利于提高用戶填寫表單的效率。標簽字數相比于左右對齊標簽可容納更多字數。
劣勢：縱向空間占用率高，對于小屏用戶不太友好（設計前需要考慮用戶使用場景以及使用設備）
建議使用場景：希望用戶快速完成表單；對標簽的擴展性高，有國際化需求（中文轉英文，英文會比較長）；更適用于彈窗式、側邊欄式布局。
右對齊標簽：
如果要盡量減少表單占用垂直屏幕空間，右對齊能提供快速完成時間。研究中，專家用戶和新手用戶掃視（眼睛運動）右對齊標簽表單的標簽和輸入框的平均時間分別在 170 毫秒和 240 毫秒，而填寫完成時間比左對齊快 2 倍。
優勢：標簽和輸入框位置緊密，更方便填寫
劣勢：右對齊的布局會造成標簽的左側不齊，影響快速閱讀表單的效率問題；如果增加填寫項標題字數過多，整體的表單頁都需要修改，右對齊靈活性低。
建議使用場景：適用于需要填寫效率但受到屏幕垂直面積限制的頁面。更適用于整頁式布局。
左對齊標簽：
在頂、右、左三種方案中，左對齊表單填寫速度最慢。因為左對齊表單解析問題時眼球定位次數最多，用戶一般情況下都能將左對齊布局中的標簽和輸入框聯系起來，只是花費時間較長。在研究中，典型掃視時間為 500 毫秒，很長說明用戶經歷了沉重的認知壓力。
優勢：易瀏覽標簽；占用縱向空間較少
劣勢：標簽和輸入框距離較大，表單填寫效率低
建議使用場景：需要讓用戶認真思考后填寫的頁面；更適用于整頁式布局
輸入字段上方的粗體標簽
在頂對齊的情況下，設計師可能會想：如果我們將標簽進行加重，這增加了它們的視覺重量，并將它們帶到了布局的最前面，這樣說是不是可以讓用戶更好的去完成表單的填寫呢？但事實卻和設想相反：粗體標簽反而增加了用戶填寫的負擔。
粗體標簽導致從標簽移動到輸入字段的掃視時間增加了近 60% ，從沒有粗體標簽的 50 毫秒到有粗體標簽的 80 毫秒，更突出的標簽沒有明顯優勢。粗體標簽更難讓用戶閱讀和感知——可能是因為粗體文本和輸入字段的相鄰粗邊框之間存在更多的視覺混淆。
小結
標簽位置：單從效率角度看，頂對齊>右對齊>左對齊，但是根據應用場景，效率快并不是我們選擇標簽對齊方式的唯一的指標。在大多數情況下，將標簽放在輸入字段上方效果更好，頂對齊的情況下標簽的擴展性更高，且用戶不會被迫分開查看標簽和輸入字段。需要注意在視覺上將下一個輸入字段的標簽與前一個輸入字段分開。
粗體標簽：閱讀粗體標簽對用戶來說有點困難，因此最好使用純文本標簽。但是，當使用粗體標簽時，可能希望將輸入字段設置為沒有粗邊框。
1. 什么是表單的校驗
為了讓用戶準確的填寫表單，在用戶填寫表單中/填寫表單后，常常會增加我們常說的“反饋提示“，針對反饋信息的準確性，我們會采用兩種校驗形式：前端校驗和后端校驗。
① 前端校驗：
主要負責校驗輸入的內容格式是否正確；例如常見的手機號格式是否正確、密碼格式是否符合要求。
② 后端校驗：
與數據庫相關，主要負責校驗輸入內容是否正確；例如常見的手機號是否存在，密碼是否正確。
③ 校驗觸發條件：
④ 報錯方式：
2. 校驗形式
根據不同的校驗觸發條件和報錯方式，我們可以組合成以下幾種校驗形式：
① 輸入時即時驗證，即時報錯
用戶在輸入的過程中進行實時驗證，輸入框處于聚焦時開始提示，隨著輸入的過程，符合要求后已與用戶通過驗證的反饋。例如在注冊阿里云賬號時，設置密碼需要滿足三個條件，這里采取了即時驗證。
優點：可以實時告知用戶表單的填寫時候符合規范
缺點：實時驗證會使用戶分散注意力，也有可能會引起用戶的反感
使用場景：注冊時需要設置密碼，通過密碼不同的組成，時判斷密碼的強度，比如純數字密碼符合最低安全要求密碼，但增加大些字母和小寫字母后就形成了更安全的密碼
② 失去焦點后即時報錯
用戶在輸入完成后進行驗證，輸入框失去聚焦后（即用戶點擊輸入框以外的位置后）與用戶進行反饋。例如在注冊網易郵箱時，填寫完畢后即時報錯。
優點：為用戶修改錯誤節省時間、避免出現很多錯誤需要改正的情況。
缺點：如果輸入有誤，用戶需要多一步操作，點擊會有錯誤的輸入框進行修改。
使用場景：注冊用戶名時，取消聚焦后會反饋用戶名是否可用，不可用的情況下是被注冊還是格式有問題。
③ 操作后（保存/提交/下一步）后全部報錯
用戶完成表單填寫后，點擊操作按鈕（保存/提交/下一步），系統將表單統一上傳到后端數據庫中進行對比后集中與用戶進行反饋。
優點：減少對用戶的打擾，減少后端服務器壓力，提高效率
缺點：用戶只能點擊按鈕后才可以得到反饋，不能及時修改；若表單過長，用戶返回修改的路徑也將增加。
使用場景：登錄賬號是判斷密碼是否正確