編輯導語：表單的存在可以讓用戶更加清晰地獲取反饋結果，進而推動系統與用戶之間的信息與數據傳遞。但表單的每一個細節都是設計師一點點分析修改出來的。本文作者分享了開會過程中關於表單的十個靈魂拷問，希望能給你帶來幫助。
早上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協議