起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識表單第三趴 | B端設計師繞不過去的10個靈魂拷問
編輯導語：表單的存在可以讓用戶更加清晰地獲取反饋結果，進而推動系統與用戶之間的信息與數據傳遞。但表單的每一個細節都是設計師一點點分析修改出來的。本文作者分享了開會過程中關于表單的十個靈魂拷問，希望能給你帶來幫助。
早上9：30，A產品的產品設計規范評審會如期展開。
設計師、產品經理、研發小哥哥悉數到場。
產品經理主持會議，說明了今天的會議主題后，設計師開始介紹產品設計規范的設計理念了。
當設計師介紹到表單規范時，大家問了很多問題。
設計師一臉懵，但只得一個個問題耐心解釋著……
這些問題，很多B端設計師都遇到過，今天，我們一起來看看吧~
一、必填項的*「要」還是「不要」
靈魂拷問場景：
拷問者說：我們的表單項默認都是要填寫的，還有必要在label前加個「*」嗎？我們覺得沒必要。
設計師說：要「*」。
1. 「要*」的理由
- *是用戶判斷表單項是否必填的符號，如果不帶*，會給用戶產生模棱兩可的感覺，不利于用戶明確任務目標。
- 若用戶沒有填寫某一項，點擊了表單提交后才發現該表單項為必填，用戶會感覺人與系統交互的過程是滯后的。而通過加*，會讓人感覺系統更人性化。
2. 「不要*」的場景
雖然以上場景建議加上*，但也有一些場景例外。比如，表格查詢區域、注冊登錄、默認選項等的場景。
結果：采納設計師的建議。
二、必填項用「*」還是「必填、選填」
靈魂拷問場景：
拷問者說：實在想不好必填項用「*」還是「必填、選填」，說說你為什么用「*」吧。
設計師說：「*」比「必填、選填」在視覺上明顯，且不會加長label的長度。
1. 用「必填、選填」的場景
大部分設計規范是用「*」來表示必填，但也有一些產品選擇了「必填、選填」，原因在于：假如總共有10個表單項，有9個表單項必填，1個選填，那么為了界面整潔，就可以給選填的表單項備注「選填」。
假設剛好相反，那么給必填的表單項備注「必填」。如果它倆勢均力敵，那就標注「必填」項。
結果：采納設計師的建議。
三、必填項在label「左邊」還是「右邊」
靈魂拷問場景：
拷問者說：我們現在表單label都是右對齊，把必填項「*」放右邊，顯得整齊。
設計師說：還是把必填項「*」放左邊好。
1. 放「右邊」的理由
由于「*」位置統一，用戶直接在一個位置掃一眼，就知道必填項的多少，很方便。
2. 放「左邊」的理由
用戶是從左往右閱讀文字，因此「*」放label放左邊，符合用戶閱讀習慣，讓用戶閱讀時一眼明了哪些必填。并且目前公司大部分上線的產品均采用必填項「*」放左邊，還未有用戶提出問題，運行良好。
結果：采納設計師的建議。
四、用「select」還是「radio」
靈魂拷問場景：
拷問者說：這個場景下，「是、否」選項用戶已經習慣通過select來操作了，不要用radio。
設計師說：只有「是、否」兩個選項，直接展示給用戶操作更直觀，用戶操作路徑也短。
1. 「select」的使用場景
用戶需要通過點擊輸入框喚出下拉面板來選擇自己需要的選項，通常選項數多于5項，可以考慮使用選擇器。建議選項按照業務需求進行排序，使用戶可以快速找到，并盡量讓內容顯示完整。
2. 「radio」的使用場景
radio組件的所有選項平鋪展現給用戶，方便用戶直接選擇，選項不宜過多，一般在2-5個之間，同時必定會有一個選項處于選中狀態。
結果：采納拷問者的建議。
雖然拷問者認同設計師給出的設計思路，但B端用戶習慣不敢隨意挑戰。用戶習慣是產品迭代與創新路上的大難題、攔路虎，設計師經常被用戶習慣這個理由打回去改設計稿，怎么破呢？
五、用「線索模式」還是「說明模式」
靈魂拷問場景：
拷問者說：你來說說放在輸入框里的文字和放在輸入框下面的文字有啥不同，我看都是提示文字。
設計師說：嗯，還是有很大不同的。
1. 線索模式
大家記不記得時間控件中有“請選擇日期”，搜索框中會有“請輸入IP地址”等線索文字，這就是線索設計模式。假如搜索框中什么文字也沒有，用戶就會搜索一次錯一次，因為設計者沒有給用戶框定搜索邊界。因此線索設計模式可以讓界面不言自明。
2. 說明模式
說明模式是輸入框下面的文字，該文字是用來解釋輸入框中內容的輸入標準、注意事項、要求等的，會比線索模式的文字更完善和具有指向性。采用信息說明模式時，建議文案精簡、設計直觀，保證用戶在無需猜測，便可以根據說明自己操作和成功完成操作。
結果：采納設計師的建議。
拷問者覺得設計師說的很有道理，這塊上再也不糾結了，直接按照設計師定的設計規范來。
六、說明文字的句號「要」還是「不要」
靈魂拷問場景：
拷問者說：我看好多產品，表單項的說明文字都是不帶「句號」的，但是我覺得它們是一整句完整的話，是不是應該帶句號呢？
設計師說：我覺得應該不帶句號，界面看起來整潔一些，而且就如你說的，大部分產品也確實這么做。
1. 一番深挖
設計師不放心，會后繼續深挖了一下。
還別說，有類似疑問的小伙伴還挺多的。比如，有人問：插圖（手繪插畫、攝影圖片）下面的說明文字需要加句號嗎？還有人問：“特此通知”“特此證明”究竟要不要加句號？
看來一個小小的句話，讓很多人產生了疑惑啊。
《標點符號用法》（GB/T 15834-2011）標準規定了現代漢語標點符號的用法。該標準適用于漢語的書面語（包括漢語和外語混合排版時的漢語部分）。
其中說到了“圖或表的短語式說明文字，中間可用逗號，但末尾不用句號。即使有時說明文字較長，前面的語段已出現句號，最后結尾處仍不用句號”。
可見，說明類文字，可以不加句號。當然加也可以，只是會顯得多余。
結果：采納設計師的建議。
七、用「加減」還是「上下」數字選擇器
靈魂拷問場景：
拷問者說：element數字選擇器是「加減」設計；antd是「上下」設計，而且還是鼠標hover顯示的「上下」圖標，你怎么看？我們用哪種？
設計師說：我們產品目前兩種都不用，是antd的「上下」設計，但不是鼠標hover顯示，而是常顯。
1. 理由
唐納德·諾曼在《日常的設計》中說：產品外觀必須能夠說明問題，能自然而明顯地體現外觀與其作用之間的關系，使用戶一看就明白。
「加減」數字選擇器其實是個不錯的選擇，它符合唐納德·諾曼的說法。但「加減」在選擇器的兩端，對用戶來說，需要通過鼠標左右跨度移動才能完成操作行為，比較費力費時。
而antd的「上下」hover設計，對于用戶來說不夠直觀，用戶并不能一眼知曉這是數字選擇器，表象上來說，就是一個文字輸入框。但優勢是，鼠標停留在一個區域，就可以完成數字的增減。
因此，結合了它們兩者的設計優勢，及抹去了設計劣勢，我們用了現在的數字輸入框。
結果：采納設計師的建議。
拷問者連連拍手稱贊，認為設計師有思考，做的好。
八、用「checkbox」還是「switch」
靈魂拷問場景：
拷問者說：這個“節點復用”字段不要用「checkbox」，用「switch」，它看著更好看點。
設計師說：不能因為它長得好看而用它，還是要以用戶認知和操作提效角度出發。
1. 「checkbox」的使用場景
checkbox用于在一組選項可以多選時使用。單個復選框可以表示在兩種狀態間切換，例如我們在注冊APP時，APP會讓我們選擇“是否同意該協議”，如果同意，我們在checkbox上打鉤即可。
2. 「switch」的使用場景
switch用于切換單個選項的狀態，類似電燈按鈕的開和關。在開關本身可以表達清楚狀態的情況下，可以不在開關上加文字。若無法表達清楚的情況下，建議在開關內加入例如“禁用/啟用”等說明狀態的文字。
由上我們可以發現：
checkbox（單個復選框）和switch都有讓用戶在兩個狀態下選擇的寓意，但switch最初的設計起源就是與“開和關”相關的，后來才慢慢被拓展使用。在使用switch時，給用戶的感覺更是強調開/關之類的動作態的互斥狀態。
checkbox的優勢是，可以讓整個組件描述會更清晰，就像在做填空題一般。
結果：采納拷問者的建議。
“節點復用”并不需要如做填空題一般，復用/關閉是和開/關一樣的動作態選項。
九、label用「左對齊」還是「右對齊」
靈魂拷問場景：
拷問者說：我看業界產品表單項的label左對齊和右對齊都有，你說說我們該用哪種呢？
設計師說：定義一種，特殊場景再定義。
1. 一番深挖
馬泰奧·彭佐在2006年進行了label對齊的眼動實驗，結果如表所示。
可見，從用戶填寫速度、完成率、認知壓力等方面來說，“label頂對齊”優于“label右對齊”優于“label左對齊”。
對于“label頂對齊”來說：雖然占用大量的垂直空間，但label和輸入框非常緊密，有利于用戶瀏覽和填寫。
對于“label右對齊”來說：人類的閱讀習慣是從左往右讀，而偏偏label左邊是不對齊的，因此會有些影響用戶的閱讀效率，但label與輸入框聯系緊密，填寫速度也較快。
對于“label左對齊”來說：label與輸入框聯系不緊密，特別是當label之間的長短差距非常大的時候，還會導致用戶填寫表單的時間過長，但label可讀性較強，且界面整體看起來較為清晰。
除上述外，還有一種“輸入框內label”的設計模式，這種模式會讓界面干凈整潔，且與輸入框聯系很緊密，唯一的缺點是，當用戶激活輸入框準備輸入內容時，label會消失，不利于他們回憶表單所需要他們填寫的信息。
結果：采納設計師的建議。
拷問者聽完設計師的闡述，認為這塊在自己的認知范圍之外，聽設計師的沒錯。
十、短頁面表單主次操作按鈕怎么擺放
靈魂拷問場景：
拷問者說：我看表單的主次按鈕順序有好多種，到底哪種比較合理呢？
設計師說：這個有人做過實驗，我們一起來看看。
1. 一番深挖
Luke Wroblewski和倫敦的可用性專家Etre做過一次實驗，專門對網頁表單設計的主次按鈕進行眼動研究。首先確定什么是主次按鈕。例如我們期望用戶對表單進行保存的，那么此就是主按鈕，取消則為次按鈕。
他們還討論了例如“重置”按鈕有無必要，因為很多用戶會誤點，但調查發現，重置按鈕在某些場景下也是有用的，因此，好的辦法是將主次按鈕視覺上區別對待。
他們的實驗選取了以上6個表單場景。最后發現，ABCDF都能使得用戶成功完成任務，并且用戶完成時間也差異不大，且用戶的滿意度評價也不錯。出乎意料的是，B是表現最好的。
我們常說，主按鈕與次按鈕要區分視覺樣式，加快用戶操作效率，而事實上，不論按鈕是否顏色不同，用戶在做出選擇前，總是會再次確認按鈕上寫的是什么。
這就像C的一部分用戶所說，將主次按鈕進行區分，反而讓我們認為按鈕怎么了？減慢了他們的決策，讓他們再次核對自己是否正在點擊正確的按鈕。
結果：采納設計師的建議。
拷問者聽完設計師的闡述，認為這塊在自己的認知范圍之外，聽設計師的沒錯。
十一、RRRA原則
從這10個靈魂拷問我們可以發現，一些看似不同的設計方法之間，對用戶的決策和操作影響不大；而另一些不同的設計之間，對用戶會產生不同的決策影響。我們能做的，就是記錄、假設、驗證、沉淀，我們不能做的就是憑感覺。
這里知果總結了表單設計的RRRA原則來指導我們的表單設計，分別是：
1. 減少（reduce）用戶思考時間
使用表單需要啟動用戶的邏輯思維，沒有人喜歡使用表單，越讓用戶少思考，對用戶來說他們是越開心的。因此，結構化表單內容、簡化表單信息、清晰排版布局等，有利于減少用戶思考的時間。
2. 減少（reduce）用戶操作時長
必填信息有提示、專業術語有解釋、默認選項有預填等，都可以減少用戶的操作時長。
3. 減少（reduce）用戶操作錯誤
金額、卡號、身份證自動格式化，填錯信息及時友好反饋等，可減少用戶操作錯誤。
4. 提升（improve）用戶操作效率
無必要不亂拆解步驟、簡化及清晰文案表達、扁平化交互等，可提升用戶操作效率。
任何形式的表單設計，符合以上4個原則，那么距離用戶認為好的表單設計就不遠了。記住，任何表現形式或設計方法，不服務于用戶需求，不能達到用戶所望，都可以說是還值得在進一步思考的設計。
十二、寫在最后
表單是連接產品與用戶的重要橋梁。而表單的設計細節多之又多，每更換一個產品，同樣的表單問題會需要設計師再處理一遍。
通過上述第三趴的表單整理，相信大家對表單又有了進一步的認識。
表單設計不可怕，最怕我們不了解業務場景、流程與用戶訴求，僅僅按照經驗來設計。
很多時候，個場景下驗證有效的設計策略，放在另一個產品中就不適用了。
好了，今天知果的分享就到這里，我們下期見~
#專欄作家#
知果，公眾號：知果日記，人人都是產品經理專欄作家。浙江工商大學品牌設計專業碩士，《B端思維-產品經理的自我修煉》作者。在產品設計流程、產品設計原則、產品設計方法、產品設計規范方面均有豐富經驗
本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
三篇都看完了，干貨很足
六
線索模式：告訴用戶要輸入什么內容
說明模式：告訴用戶對輸入內容的要求
七
選擇的是常顯？就是鼠標hover嗎？
九
頂部對齊放個案例就好了，目前認知中又左中右對齊，頂部對齊是指？
好好好
非常好，專程留言點贊
請問什么是節點復用？
表單設計確實有很多細節需要注意，最終完整頁面誕生還是挺不容易的。
是的，非常多呢
哈哈這種一問一答的靈魂拷問可真是讓人代入感極強，已經開始禿頭了
哈哈，真的禿頭了
這十個拷問真的是太讓我有代入感了，讓我陷入工作的陰影之中了
越挫越勇哇，哈哈
第一次看到這種格式的文章，感覺很新穎唉。這種對話的文章很讓人有代入感
那下次多給你們這種的，一遍學習，一遍放松下。
業務場景、流程與用戶訴求這些方面真的要落到實處才能真正設計出體驗感舒適的產品
是的，需要一直打磨和迭代。