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