起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識 15000字，詳解10個常見的表單設計疑問?。ㄏ拢?/h2>
表單設計是互聯網產品設計里常見的模塊之一，那么你知道在表單設計里，存在著哪些需要注意的常見事項或問題嗎？本篇文章里，作者便羅列了常見的幾個表單設計疑問，一起來看看作者的總結和解答吧。
之前跟大家聊了聊我們在設計表單的時候常常遇到的困擾及糾結的設計點的前面4個部分，今天繼續來聊聊后面的幾個部分。
二、表單域的設計疑問指南
1. 開關、單選、復選框三個組件如何選擇？
這個問題是我做表單設計的時候，與產品經理爭論頻次最高的，比如業務型產品經理，他的主要精力在業務上，一些表單組件的選擇上就沒有深度考慮。
在表單設計中，特別是只有兩種狀態下，比如開啟/關閉、啟用/關閉、顯示/隱藏、同意/不同意、默認/自定義等等….選擇哪個組件更合適呢？下面詳細聊聊我經常和產品溝通的總結：
1）開關Switch
① 簡要了解開關
開關組件的產生就是作為仿照物理開關的映射，提供了兩種最為簡單、直接的對立選項，比如開/關、啟動/禁用等。設計來源于生活中控制燈泡的開關，點擊燈泡立即亮起。
② 開關組件的特點
- 標簽名稱須傳達清晰，能夠讓用戶能夠明確感知操作后的動作開啟或關閉什么；
- 主體標簽信息和按鈕是分離的，兩個視覺焦點；
- 一般點擊后會立即反饋；
- 沒有 hovering 效果，有動作效果，更適合手指操作（說明開關按鈕更常用于移動端）。
③ 蘋果公司對開關組件的設計規范
- 開關的視覺權重比較高，需避免使用開關控制局部細節或者次要的設置。一般用它控制內容較多更為合適，比如可以將它作為總開關打開或關閉一組設置。
- 通常不要用開關替代復選框，如果我們的規范中定義了復選框，則盡可能保持一致的使用規范。
④ 開關使用場景舉例
通過對開關組件特點，結合蘋果組件的規范，我們基本可以梳理出以下幾條主要使用場景：
開關的標簽的含義需傳達清晰：
和單選、復選框不一樣的是，因為開關主體的信息和按鈕是分離的。所以用戶在點擊開關按鈕前，必須清晰告知用戶點擊后會發生什么，甚至有時我們需要通過增加副標題來加以說明。
一般只為立即生效的場景使用開關按鈕：
在表單填寫時，往往最終會有「提交」按鈕作為結束態，開關作為表單字段的填寫，用戶點擊后并不能夠立即生效，而是需要再次點擊「提交」按鈕，這樣處理會讓開關的特點所滯后。
有風險時，需著重提醒用戶：
開關的視覺權重較高，在復雜的表單信息中，相比于單選器、多選器來說，它能夠很快吸引到用戶的注意力，并能夠給用戶以視覺提醒。
避免大面積使用開關：
開關在視覺感知上它和按鈕上有些接近，需要盡可能避免在表單中大量使用開關來控制局部層級內容，一般使用開關控制局部細節或者次要設置，如果需要大面積控制時，推薦使用復選框來替代開關作為局部。
把它作為高層級內容控制或信息設置：
把它用來作為總控制來顯示更高層級內容，避免 web 表單中大面積的使用開關按鈕，會和其他的基本組件造成視覺干擾。這樣可以既凸顯其重要性，又能提升用戶瀏覽表單的效率。
⑤ 小結
開關按鈕視覺突出且反應快。用戶瀏覽表單、填寫內容組之間，一般不需要很強的視覺差異。如果填寫的表單信息之間對比差異過大，開關往往給用戶造成過大的視覺干擾，反而阻礙用戶瀏覽表單的效率，所以盡量避免讓無數開關出現在表單中。
2）單選Radio
① 簡要了解單選按鈕
單選按鈕最早的設計模型，來源于收音機切換頻道的按鍵，當我們按下其中一個，其他的按鈕就會被彈出，按下的那個按鈕就成為了選中的狀態，單選按鈕只能二選一。
② 單選按鈕的特點
單選按鈕的優點是，將所有信息條件暴露給到用戶，它不像開關在使用上帶有去猜測、探索的必要。
- 每個選擇都非常直觀，如果希望用戶閱讀完所有選項，可以采用單選。
- 拓展性更強，相較于開關、復選框，單選能承載兩個或兩個以上選擇。
- 必須提供默認值，且默認值可以承載內容。
③ 場景舉例分析
a. 需要讓用戶明確知道兩者的區別，甚至需要強調兩個選項的不同
如果采用復選框，用戶需要在兩個差距較大的選項中去做思考，這個時候單選更加合適。
b. 開啟/關閉的單選狀態，使用復選框
復選框對于絕大多數用戶都是非常清楚，使用復選框在空間、視覺焦點更是更集中的，所以如果只針對開啟/關閉的狀態，推薦使用復選框。
c. 每個選項都關聯內容時，使用單選按鈕
在表單設計中一個好的默認選項，會讓很多人保持選擇默認選項。提升表單提升效率。需注意給用戶提供的默認選擇，一定要是安全、方便的選項。
如下圖，如果采用復選框或者開關，用戶就不得不去探索思考開啟后是什么，還要擔心理解開啟/關閉后帶來的影響，而對于絕大多數用戶來說，系統默認內容無需改動。
d. 如果是較長需隱藏拆分的內容情況，使用單選按鈕
在表單設計中，如果遇到的內容需要重新組織或者拆分時，選擇使用單選按鈕。這樣不僅能夠做到表單信息簡潔，也能夠提高用戶的瀏覽效率。
e. 垂直排列單選，信息閱讀更佳
如果字段名稱較長，需要添加副標題加以說明，這時單選按鈕承載的信息較多，使用垂直排列讓用戶有一致的起始閱讀線，眼球轉動幅度最小，信息獲取體驗更佳。
如果標簽文字較少，也可以橫排不至于占用太多的垂直空間。
④ 小結
復選框的應用拓展性比開關更強，它既可以作為層級內容使用，又可以作為單獨的設置項，點擊后并立即生效，不用配合其他提交按鈕，也可以作為表單填寫的一部分。它也不會像單選按鈕閱讀有信息阻斷的問題，不會像開關有強視覺干擾，它會讓我們的視覺焦點更集中表單信息上。
3）復選框Checkbox
① 簡要了解復選框
讓用戶在多選項中進行選擇，勾選后和未勾選表示“是/否、要/不要、開啟/關閉…” 等問題。
② 復選框的特點
- 復選框的標簽內容是簡短一句話，不會用逗號去作隔開。
- 作為單選狀態時，操作對象和標簽主體內容視覺焦點是不分開的，選擇后就知道它被選中了。（比如登錄頁面的用戶需知）
- 可直接表示標簽內容的開啟、關閉。
③ 場景舉例分析
a. 使用復選框時候，用戶可以基本清楚會發生什么
如果使用開關或者單選框，我們會發現視覺干擾特別嚴重，一般表單內容不需要特別去強調每一個字段的開啟狀態。
當然如果排版限制，我們也是可以將復選框放到標簽的右側（放右側復選框需對齊）。
b. 表單中的復選框生效，需要配合提交按鈕
復選框的主體標簽信息和復選按鈕在一起，特別是對于批量填寫或設置一批字段，使用復選框效率更高。
一般情況下，表單填寫中，復選框不會像開關點擊后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看他們填寫的表單，更有助于在信息防錯。
c. 用復選框來控制表單局部細節
如果控制對象的功能是表單的一個局部，或信息內容不是很多，用戶也清楚知道選擇后會是什么，這時候復選框更適合。這時我們不需要過重的給用戶強調什么，用復選框會比使用開關讓整個表單的結構內容更清晰。
d. 小結
單選按鈕是二選一，互不干擾的條件，希望用戶閱讀完這兩個選項，使用單選按鈕再好不過了，考慮到單選按鈕提供的默認選項，提供的要是絕大多數用戶需要的，且是安全方便的，如果單選按鈕標簽文字過多，在排版時垂直排列拓展性更強，閱讀體驗更佳。
三、按鈕的最佳設計位置
按鈕放在頁面左下角比較好還是放右下角比較好？
這個問題是我在設計表單時常常糾結的問題，上一篇文章聊表單的基礎內容，還有朋友在后臺留言關于按鈕位置的問題，可想，這個問題也困擾了很多的設計師朋友。
在復雜些的表單中，分別會在header區、body區、footer區放置影響全局屬性、僅影響跟隨對象、有“完結流程”屬性的按鈕。
要了解按鈕位置問題，我們需要先了解兩個比較重要的設計實驗：
1. 尼爾森F型眼動瀏覽路線模型
尼爾森（Jakob Nielsen）是一位人機交互博士，畢業于哥本哈根大學，于1995年發表了「十大可用性原則」。尼爾森的「十大可用性原則」是尼爾森博士分析了兩百多個可用性問題而提煉出的十項通用型原則。它是產品設計與用戶體驗設計的重要參考標準，是設計師值得深入研究與運用的理論。
從上面的這個模型中就可以演變出來web端界面常見的“f型瀏覽路徑”的縱橫操作優先級，如下圖所示：
可以看出來我們的視線由“1-3”這三個操作節點的最為重要：
用到我們常見的“表格頂欄”上的一行操作區來說，從左到右操作優先級依次為“高—中—高（中高）”，1 號位置所在地放置操作類行為是這一行【最高】的；其次是 3 號位置，最后是中間的 2 號位置。
2. 古騰堡原則
20 世紀 50 年代，古騰堡在設計報紙的過程中，提出了一項原則，認為人的閱讀方式應該是遵循某種習慣進行的，好像讀書一樣除了從左到右，還有從上到下的方式。
但這里面蘊含著什么信息呢？經過多方研究，他最終得出了被后人熟知的「古騰堡原則」，并附上了一張圖，名為「古騰堡圖」。
法則指出用戶在瀏覽頁面或一些布局時，視線往往趨向于從左上角到右下角進行掃描。古騰堡圖將顯示介質分為四個象限：左上角的「第一視覺區」，也叫「主光學區域」，類似自然光的落點；右下角的「最終視覺區」；右上角的「強休息區」和左下角的「弱休息區」。
從上圖中可以看出，左上角是第一視覺落點區（主視區），而右下角是最終視覺落點區（終點區）。與之相對，右上角和左下角則是視覺盲點。用戶的視覺移動端規則是從上到下，從左到右。
所以得出結論，界面中的左上和右下是用戶視覺最為重點關注的位置。遵循古騰堡法則，設計師應該把界面的關鍵元素放在主視區，終點區可以放按鈕、強提示，盲點區可以用來放一些相對次要的內容，如輔助圖形、文字信息。
我們需要注意的是：
- 頂部按鈕的設計，關鍵還在于可編輯內容區域，而不是按鈕本身，頂部按鈕更適用于「編輯頁面」，需要用戶謹慎操作。
- 而底部按鈕的核心在于按鈕本身，而不是內容。底部按鈕更適合全局最終的確定，提交等操作按鈕。
- 當我們在設計表單中的組合按鈕時，比如：取消與確認、提現與充值。根據古騰堡法則，用戶使用界面時從第一視覺落點區是主視覺區(Primary Optical Area)，最終停留在結尾的終點區(Terminal Area)。
四、表單設計的視覺平衡
B端產品有C端產品不同，會有很多需要填寫表單，甚至特別復雜的表單的情況。那么這種情況如何提升表單的用戶體驗，如何設計更快更好用的表單設計成為考驗設計師能力的核心問題。
我平時的工作中經常會遇到數據量很大的表單，看似簡單排列的表單，其實可能是我經歷過很多次設計出的最終結果，所以這里總結一下我平時設計復雜表單的一些思路。
1. 表單視覺可以不平衡
在設計表單時，我們總覺得視覺重心偏左，因此在設計時我們總想讓視覺變得更平衡。
比如小鵝通，信息全集中在左邊，感覺視覺有點失衡。而類似飛書的居中設計，視覺會更平衡。所以這就引起我思考在設計時要不要用居中設計的方式呢？
但是當我繼續查找資料時發現，其實在表單的設計中我們不用過度的追求視覺平衡，首先人的視覺動線遵循F模型，同時根據行業相關信息可讀性研究，眼動舒適角度為30度。
因此當表單信息較少，不考慮屏效時，采用從上往下居左邊的方式，據研究這是能夠最高效完成任務的布局方式。
當然也并不是所有的表單都是需要左側設計，比如飛書設置類表單就是局中設計。
為什么呢？其實，設置類表單，數據項較少，相對比較簡單，使用居中設計可以讓用戶更聚焦。
而其他大部分的表單設計，比如CRM、ERP、云產品、OA、項目研發、文檔產、HR、BI等系統產品的錄入類表單均采用的視覺偏左的設計方式，不管表單拓展多復雜的信息，都不會影響整體的一致性。
所以，在設計表單時不用過度追求視覺平衡，而是需要優先考慮信息操作效率，信息閱讀效率。
2. 4個策略優化數據量大的表單設計
1）保留（Keep）
第一步，整理篩選，保留那些用戶真正關心的是問題內容和為何要問這些問題的內容，在適當的情境下問合適的問題，可以保留。
2）刪減（Cut）
第二步，有些問題并不需要馬上得到答案，對于一些非必填問題，可以考慮拿掉。
3）延遲（Postpone）
第三步，有些問題馬上就問，會讓人產生戒備，這時可以采取延遲發問，直到問題不會讓人感覺多余或者有侵略性。或者有些問題比較棘手或者是敏感的信息，如果你一上來就問這些信息，用戶可能會比較反感，可以從易到難，從基礎到敏感問題，讓用戶慢慢卸下心防。
比如，站酷的新版滿意度調查.“如果你愿意接受回訪，請留下你的聯系方式？就是放在了最后，標注選填的方式。
4）解釋（Explain）
有些問題對公司真的有價值，則可以解釋編寫簡短友好的理由，確保能為用戶帶來好處。
比如，“填寫聯系方式，能讓我們后續解決問題以后告訴到您。”
五、提示的最佳位置
表單中錯誤提示的常見位置一般是在右邊或者下邊，這也是經過很多的產品及用戶測試驗證過的結論，那么你知道是為什么嗎？
表單可選的錯誤提示位置：
1. 提示位置在表單域頂部
頂部顯示所有錯誤信息，會給用戶的記憶造成較高的認知負荷，會強制用戶回憶每個錯誤輸入框中的錯誤消息。
當標簽頂部對齊時，錯誤提示和輸入框中的提示這兩個文本靠得很近會產生視覺噪音，用戶注意力被分散，很難專注于其中一個，并且可能混淆它們。
2. 提示位置在表單域下邊
表單域下邊的錯誤信息提示，雖然不符合從左到右的閱讀習慣，但它與從上至下的閱讀流程相對應。是減少記憶認知負荷的有效方法，可以幫助當場識別錯誤而不是靠回憶錯誤，縮短反應時間，提高表單填寫效率。
手機屏幕缺少水平空間，把錯誤信息提示放置在下方是個不錯的選擇。
3. 提示位置在表單域右邊
符合人們從左到右的閱讀習慣，用戶視覺路徑自然流暢，很大程度上減少了用戶的精力和視覺工作。
4. 提示位置在表單域左邊
提示位置在左邊與用戶期望相違背，因為左側放置更高優先級的元素，是我們的直覺。但事實上用戶需要專注于糾正他們的輸入，因此輸入框應該是更重要的元素。
綜上所述如上圖，錯誤提示的最佳位置是輸入域下邊或者輸入域右邊。
當表單是左右對齊時，最佳提示位置是選擇輸入域在下邊。當表單是頂部對其時，最佳提示位置是選擇輸入域在右邊。如果是移動端則放置在下邊。一般情況，為了提高開發效率，會選擇都放置下邊，方便適配。
六、總結
關于表單設計其實還有很多可以去仔細研究的空間，不管是To C 還是To B，都是為了實現用戶的需求、幫用戶解決問題。
當然，理論是死的，設計是活的，當業務與原則出現矛盾時，可以結合具體的業務情況進行適當的調整。
以上便是個人對常見的表單糾結點的經驗總結，文章中如果有不嚴謹、錯誤的地方希望大家給予指正。作為一名剛剛將自己工作內容進行沉淀并分享給大家的設計師，希望大家可以多多點贊評論鼓勵下。
長達15000+字，文章很長，感謝您的耐心閱讀。
參考文獻：
- 來源鏈接：https://ant.design/docs/spec/research-form-cn（來源：Ant Design）
- 表單設計需要注意：http://t.cn/EhMmZPf
- 《Web表單設計·創建高可用性的網頁表單》中，作者（卡羅琳·賈雷特）
- B端表單設計優化http://www.aharts.cn/ucd/5327215.html
- 《Type & Layout：How Typography and Design Can Get Your Message Across or Getin the Way》
本文由 @三原設計 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
表單設計是互聯網產品設計里常見的模塊之一，那么你知道在表單設計里，存在著哪些需要注意的常見事項或問題嗎？本篇文章里，作者便羅列了常見的幾個表單設計疑問，一起來看看作者的總結和解答吧。
之前跟大家聊了聊我們在設計表單的時候常常遇到的困擾及糾結的設計點的前面4個部分，今天繼續來聊聊后面的幾個部分。
二、表單域的設計疑問指南
1. 開關、單選、復選框三個組件如何選擇？
這個問題是我做表單設計的時候，與產品經理爭論頻次最高的，比如業務型產品經理，他的主要精力在業務上，一些表單組件的選擇上就沒有深度考慮。
在表單設計中，特別是只有兩種狀態下，比如開啟/關閉、啟用/關閉、顯示/隱藏、同意/不同意、默認/自定義等等….選擇哪個組件更合適呢？下面詳細聊聊我經常和產品溝通的總結：
1）開關Switch
① 簡要了解開關
開關組件的產生就是作為仿照物理開關的映射，提供了兩種最為簡單、直接的對立選項，比如開/關、啟動/禁用等。設計來源于生活中控制燈泡的開關，點擊燈泡立即亮起。
② 開關組件的特點
- 標簽名稱須傳達清晰，能夠讓用戶能夠明確感知操作后的動作開啟或關閉什么；
- 主體標簽信息和按鈕是分離的，兩個視覺焦點；
- 一般點擊后會立即反饋；
- 沒有 hovering 效果，有動作效果，更適合手指操作（說明開關按鈕更常用于移動端）。
③ 蘋果公司對開關組件的設計規范
- 開關的視覺權重比較高，需避免使用開關控制局部細節或者次要的設置。一般用它控制內容較多更為合適，比如可以將它作為總開關打開或關閉一組設置。
- 通常不要用開關替代復選框，如果我們的規范中定義了復選框，則盡可能保持一致的使用規范。
④ 開關使用場景舉例
通過對開關組件特點，結合蘋果組件的規范，我們基本可以梳理出以下幾條主要使用場景：
開關的標簽的含義需傳達清晰：
和單選、復選框不一樣的是，因為開關主體的信息和按鈕是分離的。所以用戶在點擊開關按鈕前，必須清晰告知用戶點擊后會發生什么，甚至有時我們需要通過增加副標題來加以說明。
一般只為立即生效的場景使用開關按鈕：
在表單填寫時，往往最終會有「提交」按鈕作為結束態，開關作為表單字段的填寫，用戶點擊后并不能夠立即生效，而是需要再次點擊「提交」按鈕，這樣處理會讓開關的特點所滯后。
有風險時，需著重提醒用戶：
開關的視覺權重較高，在復雜的表單信息中，相比于單選器、多選器來說，它能夠很快吸引到用戶的注意力，并能夠給用戶以視覺提醒。
避免大面積使用開關：
開關在視覺感知上它和按鈕上有些接近，需要盡可能避免在表單中大量使用開關來控制局部層級內容，一般使用開關控制局部細節或者次要設置，如果需要大面積控制時，推薦使用復選框來替代開關作為局部。
把它作為高層級內容控制或信息設置：
把它用來作為總控制來顯示更高層級內容，避免 web 表單中大面積的使用開關按鈕，會和其他的基本組件造成視覺干擾。這樣可以既凸顯其重要性，又能提升用戶瀏覽表單的效率。
⑤ 小結
開關按鈕視覺突出且反應快。用戶瀏覽表單、填寫內容組之間，一般不需要很強的視覺差異。如果填寫的表單信息之間對比差異過大，開關往往給用戶造成過大的視覺干擾，反而阻礙用戶瀏覽表單的效率，所以盡量避免讓無數開關出現在表單中。
2）單選Radio
① 簡要了解單選按鈕
單選按鈕最早的設計模型，來源于收音機切換頻道的按鍵，當我們按下其中一個，其他的按鈕就會被彈出，按下的那個按鈕就成為了選中的狀態，單選按鈕只能二選一。
② 單選按鈕的特點
單選按鈕的優點是，將所有信息條件暴露給到用戶，它不像開關在使用上帶有去猜測、探索的必要。
- 每個選擇都非常直觀，如果希望用戶閱讀完所有選項，可以采用單選。
- 拓展性更強，相較于開關、復選框，單選能承載兩個或兩個以上選擇。
- 必須提供默認值，且默認值可以承載內容。
③ 場景舉例分析
a. 需要讓用戶明確知道兩者的區別，甚至需要強調兩個選項的不同
如果采用復選框，用戶需要在兩個差距較大的選項中去做思考，這個時候單選更加合適。
b. 開啟/關閉的單選狀態，使用復選框
復選框對于絕大多數用戶都是非常清楚，使用復選框在空間、視覺焦點更是更集中的，所以如果只針對開啟/關閉的狀態，推薦使用復選框。
c. 每個選項都關聯內容時，使用單選按鈕
在表單設計中一個好的默認選項，會讓很多人保持選擇默認選項。提升表單提升效率。需注意給用戶提供的默認選擇，一定要是安全、方便的選項。
如下圖，如果采用復選框或者開關，用戶就不得不去探索思考開啟后是什么，還要擔心理解開啟/關閉后帶來的影響，而對于絕大多數用戶來說，系統默認內容無需改動。
d. 如果是較長需隱藏拆分的內容情況，使用單選按鈕
在表單設計中，如果遇到的內容需要重新組織或者拆分時，選擇使用單選按鈕。這樣不僅能夠做到表單信息簡潔，也能夠提高用戶的瀏覽效率。
e. 垂直排列單選，信息閱讀更佳
如果字段名稱較長，需要添加副標題加以說明，這時單選按鈕承載的信息較多，使用垂直排列讓用戶有一致的起始閱讀線，眼球轉動幅度最小，信息獲取體驗更佳。
如果標簽文字較少，也可以橫排不至于占用太多的垂直空間。
④ 小結
復選框的應用拓展性比開關更強，它既可以作為層級內容使用，又可以作為單獨的設置項，點擊后并立即生效，不用配合其他提交按鈕，也可以作為表單填寫的一部分。它也不會像單選按鈕閱讀有信息阻斷的問題，不會像開關有強視覺干擾，它會讓我們的視覺焦點更集中表單信息上。
3）復選框Checkbox
① 簡要了解復選框
讓用戶在多選項中進行選擇，勾選后和未勾選表示“是/否、要/不要、開啟/關閉…” 等問題。
② 復選框的特點
- 復選框的標簽內容是簡短一句話，不會用逗號去作隔開。
- 作為單選狀態時，操作對象和標簽主體內容視覺焦點是不分開的，選擇后就知道它被選中了。（比如登錄頁面的用戶需知）
- 可直接表示標簽內容的開啟、關閉。
③ 場景舉例分析
a. 使用復選框時候，用戶可以基本清楚會發生什么
如果使用開關或者單選框，我們會發現視覺干擾特別嚴重，一般表單內容不需要特別去強調每一個字段的開啟狀態。
當然如果排版限制，我們也是可以將復選框放到標簽的右側（放右側復選框需對齊）。
b. 表單中的復選框生效，需要配合提交按鈕
復選框的主體標簽信息和復選按鈕在一起，特別是對于批量填寫或設置一批字段，使用復選框效率更高。
一般情況下，表單填寫中，復選框不會像開關點擊后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看他們填寫的表單，更有助于在信息防錯。
c. 用復選框來控制表單局部細節
如果控制對象的功能是表單的一個局部，或信息內容不是很多，用戶也清楚知道選擇后會是什么，這時候復選框更適合。這時我們不需要過重的給用戶強調什么，用復選框會比使用開關讓整個表單的結構內容更清晰。
d. 小結
單選按鈕是二選一，互不干擾的條件，希望用戶閱讀完這兩個選項，使用單選按鈕再好不過了，考慮到單選按鈕提供的默認選項，提供的要是絕大多數用戶需要的，且是安全方便的，如果單選按鈕標簽文字過多，在排版時垂直排列拓展性更強，閱讀體驗更佳。
三、按鈕的最佳設計位置
按鈕放在頁面左下角比較好還是放右下角比較好？
這個問題是我在設計表單時常常糾結的問題，上一篇文章聊表單的基礎內容，還有朋友在后臺留言關于按鈕位置的問題，可想，這個問題也困擾了很多的設計師朋友。
在復雜些的表單中，分別會在header區、body區、footer區放置影響全局屬性、僅影響跟隨對象、有“完結流程”屬性的按鈕。
要了解按鈕位置問題，我們需要先了解兩個比較重要的設計實驗：
1. 尼爾森F型眼動瀏覽路線模型
尼爾森（Jakob Nielsen）是一位人機交互博士，畢業于哥本哈根大學，于1995年發表了「十大可用性原則」。尼爾森的「十大可用性原則」是尼爾森博士分析了兩百多個可用性問題而提煉出的十項通用型原則。它是產品設計與用戶體驗設計的重要參考標準，是設計師值得深入研究與運用的理論。
從上面的這個模型中就可以演變出來web端界面常見的“f型瀏覽路徑”的縱橫操作優先級，如下圖所示：
可以看出來我們的視線由“1-3”這三個操作節點的最為重要：
用到我們常見的“表格頂欄”上的一行操作區來說，從左到右操作優先級依次為“高—中—高（中高）”，1 號位置所在地放置操作類行為是這一行【最高】的；其次是 3 號位置，最后是中間的 2 號位置。
2. 古騰堡原則
20 世紀 50 年代，古騰堡在設計報紙的過程中，提出了一項原則，認為人的閱讀方式應該是遵循某種習慣進行的，好像讀書一樣除了從左到右，還有從上到下的方式。
但這里面蘊含著什么信息呢？經過多方研究，他最終得出了被后人熟知的「古騰堡原則」，并附上了一張圖，名為「古騰堡圖」。
法則指出用戶在瀏覽頁面或一些布局時，視線往往趨向于從左上角到右下角進行掃描。古騰堡圖將顯示介質分為四個象限：左上角的「第一視覺區」，也叫「主光學區域」，類似自然光的落點；右下角的「最終視覺區」；右上角的「強休息區」和左下角的「弱休息區」。
從上圖中可以看出，左上角是第一視覺落點區（主視區），而右下角是最終視覺落點區（終點區）。與之相對，右上角和左下角則是視覺盲點。用戶的視覺移動端規則是從上到下，從左到右。
所以得出結論，界面中的左上和右下是用戶視覺最為重點關注的位置。遵循古騰堡法則，設計師應該把界面的關鍵元素放在主視區，終點區可以放按鈕、強提示，盲點區可以用來放一些相對次要的內容，如輔助圖形、文字信息。
我們需要注意的是：
- 頂部按鈕的設計，關鍵還在于可編輯內容區域，而不是按鈕本身，頂部按鈕更適用于「編輯頁面」，需要用戶謹慎操作。
- 而底部按鈕的核心在于按鈕本身，而不是內容。底部按鈕更適合全局最終的確定，提交等操作按鈕。
- 當我們在設計表單中的組合按鈕時，比如：取消與確認、提現與充值。根據古騰堡法則，用戶使用界面時從第一視覺落點區是主視覺區(Primary Optical Area)，最終停留在結尾的終點區(Terminal Area)。
四、表單設計的視覺平衡
B端產品有C端產品不同，會有很多需要填寫表單，甚至特別復雜的表單的情況。那么這種情況如何提升表單的用戶體驗，如何設計更快更好用的表單設計成為考驗設計師能力的核心問題。
我平時的工作中經常會遇到數據量很大的表單，看似簡單排列的表單，其實可能是我經歷過很多次設計出的最終結果，所以這里總結一下我平時設計復雜表單的一些思路。
1. 表單視覺可以不平衡
在設計表單時，我們總覺得視覺重心偏左，因此在設計時我們總想讓視覺變得更平衡。
比如小鵝通，信息全集中在左邊，感覺視覺有點失衡。而類似飛書的居中設計，視覺會更平衡。所以這就引起我思考在設計時要不要用居中設計的方式呢？
但是當我繼續查找資料時發現，其實在表單的設計中我們不用過度的追求視覺平衡，首先人的視覺動線遵循F模型，同時根據行業相關信息可讀性研究，眼動舒適角度為30度。
因此當表單信息較少，不考慮屏效時，采用從上往下居左邊的方式，據研究這是能夠最高效完成任務的布局方式。
當然也并不是所有的表單都是需要左側設計，比如飛書設置類表單就是局中設計。
為什么呢？其實，設置類表單，數據項較少，相對比較簡單，使用居中設計可以讓用戶更聚焦。
而其他大部分的表單設計，比如CRM、ERP、云產品、OA、項目研發、文檔產、HR、BI等系統產品的錄入類表單均采用的視覺偏左的設計方式，不管表單拓展多復雜的信息，都不會影響整體的一致性。
所以，在設計表單時不用過度追求視覺平衡，而是需要優先考慮信息操作效率，信息閱讀效率。
2. 4個策略優化數據量大的表單設計
1）保留（Keep）
第一步，整理篩選，保留那些用戶真正關心的是問題內容和為何要問這些問題的內容，在適當的情境下問合適的問題，可以保留。
2）刪減（Cut）
第二步，有些問題并不需要馬上得到答案，對于一些非必填問題，可以考慮拿掉。
3）延遲（Postpone）
第三步，有些問題馬上就問，會讓人產生戒備，這時可以采取延遲發問，直到問題不會讓人感覺多余或者有侵略性。或者有些問題比較棘手或者是敏感的信息，如果你一上來就問這些信息，用戶可能會比較反感，可以從易到難，從基礎到敏感問題，讓用戶慢慢卸下心防。
比如，站酷的新版滿意度調查.“如果你愿意接受回訪，請留下你的聯系方式？就是放在了最后，標注選填的方式。
4）解釋（Explain）
有些問題對公司真的有價值，則可以解釋編寫簡短友好的理由，確保能為用戶帶來好處。
比如，“填寫聯系方式，能讓我們后續解決問題以后告訴到您。”
五、提示的最佳位置
表單中錯誤提示的常見位置一般是在右邊或者下邊，這也是經過很多的產品及用戶測試驗證過的結論，那么你知道是為什么嗎？
表單可選的錯誤提示位置：
1. 提示位置在表單域頂部
頂部顯示所有錯誤信息，會給用戶的記憶造成較高的認知負荷，會強制用戶回憶每個錯誤輸入框中的錯誤消息。
當標簽頂部對齊時，錯誤提示和輸入框中的提示這兩個文本靠得很近會產生視覺噪音，用戶注意力被分散，很難專注于其中一個，并且可能混淆它們。
2. 提示位置在表單域下邊
表單域下邊的錯誤信息提示，雖然不符合從左到右的閱讀習慣，但它與從上至下的閱讀流程相對應。是減少記憶認知負荷的有效方法，可以幫助當場識別錯誤而不是靠回憶錯誤，縮短反應時間，提高表單填寫效率。
手機屏幕缺少水平空間，把錯誤信息提示放置在下方是個不錯的選擇。
3. 提示位置在表單域右邊
符合人們從左到右的閱讀習慣，用戶視覺路徑自然流暢，很大程度上減少了用戶的精力和視覺工作。
4. 提示位置在表單域左邊
提示位置在左邊與用戶期望相違背，因為左側放置更高優先級的元素，是我們的直覺。但事實上用戶需要專注于糾正他們的輸入，因此輸入框應該是更重要的元素。
綜上所述如上圖，錯誤提示的最佳位置是輸入域下邊或者輸入域右邊。
當表單是左右對齊時，最佳提示位置是選擇輸入域在下邊。當表單是頂部對其時，最佳提示位置是選擇輸入域在右邊。如果是移動端則放置在下邊。一般情況，為了提高開發效率，會選擇都放置下邊，方便適配。
六、總結
關于表單設計其實還有很多可以去仔細研究的空間，不管是To C 還是To B，都是為了實現用戶的需求、幫用戶解決問題。
當然，理論是死的，設計是活的，當業務與原則出現矛盾時，可以結合具體的業務情況進行適當的調整。
以上便是個人對常見的表單糾結點的經驗總結，文章中如果有不嚴謹、錯誤的地方希望大家給予指正。作為一名剛剛將自己工作內容進行沉淀并分享給大家的設計師，希望大家可以多多點贊評論鼓勵下。
長達15000+字，文章很長，感謝您的耐心閱讀。
參考文獻：
- 來源鏈接：https://ant.design/docs/spec/research-form-cn（來源：Ant Design）
- 表單設計需要注意：http://t.cn/EhMmZPf
- 《Web表單設計·創建高可用性的網頁表單》中，作者（卡羅琳·賈雷特）
- B端表單設計優化http://www.aharts.cn/ucd/5327215.html
- 《Type & Layout：How Typography and Design Can Get Your Message Across or Getin the Way》
本文由 @三原設計 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
不錯，挺細節