編輯導語：表單的存在可以讓用户更加清晰地獲取反饋結果，進而推動系統與用户之間的信息與數據傳遞。但表單的每一個細節都是設計師一點點分析修改出來的。本文作者分享了開會過程中關於表單的十個靈魂拷問，希望能給你帶來幫助。
早上9：30，A產品的產品設計規範評審會如期展開。
設計師、產品經理、研發小哥哥悉數到場。
產品經理主持會議，説明了今天的會議主題後，設計師開始介紹產品設計規範的設計理念了。
當設計師介紹到表單規範時，大家問了很多問題。
設計師一臉懵，但只得一個個問題耐心解釋着……
這些問題，很多B端設計師都遇到過，今天，我們一起來看看吧~
一、必填項的*「要」還是「不要」靈魂拷問場景：
拷問者説：我們的表單項默認都是要填寫的，還有必要在label前加個「*」嗎？我們覺得沒必要。
設計師説：要「*」。
1. 「要*」的理由- *是用户判斷表單項是否必填的符號，如果不帶*，會給用户產生模稜兩可的感覺，不利於用户明確任務目標。
- 若用户沒有填寫某一項，點擊了表單提交後才發現該表單項為必填，用户會感覺人與系統交互的過程是滯後的。而通過加*，會讓人感覺系統更人性化。
雖然以上場景建議加上*，但也有一些場景例外。比如，表格查詢區域、註冊登錄、默認選項等的場景。
結果：採納設計師的建議。
二、必填項用「*」還是「必填、選填」靈魂拷問場景：
拷問者説：實在想不好必填項用「*」還是「必填、選填」，説説你為什麼用「*」吧。
設計師説：「*」比「必填、選填」在視覺上明顯，且不會加長label的長度。
大部分設計規範是用「*」來表示必填，但也有一些產品選擇了「必填、選填」，原因在於：假如總共有10個表單項，有9個表單項必填，1個選填，那麼為了界面整潔，就可以給選填的表單項備註「選填」。
假設剛好相反，那麼給必填的表單項備註「必填」。如果它倆勢均力敵，那就標註「必填」項。
結果：採納設計師的建議。
三、必填項在label「左邊」還是「右邊」靈魂拷問場景：
拷問者説：我們現在表單label都是右對齊，把必填項「*」放右邊，顯得整齊。
設計師説：還是把必填項「*」放左邊好。
由於「*」位置統一，用户直接在一個位置掃一眼，就知道必填項的多少，很方便。
2. 放「左邊」的理由用户是從左往右閲讀文字，因此「*」放label放左邊，符合用户閲讀習慣，讓用户閲讀時一眼明瞭哪些必填。並且目前公司大部分上線的產品均採用必填項「*」放左邊，還未有用户提出問題，運行良好。
結果：採納設計師的建議。
四、用「select」還是「radio」靈魂拷問場景：
拷問者説：這個場景下，「是、否」選項用户已經習慣通過select來操作了，不要用radio。
設計師説：只有「是、否」兩個選項，直接展示給用户操作更直觀，用户操作路徑也短。
用户需要通過點擊輸入框喚出下拉麪板來選擇自己需要的選項，通常選項數多於5項，可以考慮使用選擇器。建議選項按照業務需求進行排序，使用户可以快速找到，並儘量讓內容顯示完整。
2. 「radio」的使用場景radio組件的所有選項平鋪展現給用户，方便用户直接選擇，選項不宜過多，一般在2-5個之間，同時必定會有一個選項處於選中狀態。
結果：採納拷問者的建議。
雖然拷問者認同設計師給出的設計思路，但B端用户習慣不敢隨意挑戰。用户習慣是產品迭代與創新路上的大難題、攔路虎，設計師經常被用户習慣這個理由打回去改設計稿，怎麼破呢？
五、用「線索模式」還是「説明模式」靈魂拷問場景：拷問者説：你來説説放在輸入框裏的文字和放在輸入框下面的文字有啥不同，我看都是提示文字。
設計師説：嗯，還是有很大不同的。
1. 線索模式大家記不記得時間控件中有“請選擇日期”，搜索框中會有“請輸入IP地址”等線索文字，這就是線索設計模式。假如搜索框中什麼文字也沒有，用户就會搜索一次錯一次，因為設計者沒有給用户框定搜索邊界。因此線索設計模式可以讓界面不言自明。
2. 説明模式説明模式是輸入框下面的文字，該文字是用來解釋輸入框中內容的輸入標準、注意事項、要求等的，會比線索模式的文字更完善和具有指向性。採用信息説明模式時，建議文案精簡、設計直觀，保證用户在無需猜測，便可以根據説明自己操作和成功完成操作。
結果：採納設計師的建議。
拷問者覺得設計師説的很有道理，這塊上再也不糾結了，直接按照設計師定的設計規範來。
六、説明文字的句號「要」還是「不要」靈魂拷問場景：
拷問者説：我看好多產品，表單項的説明文字都是不帶「句號」的，但是我覺得它們是一整句完整的話，是不是應該帶句號呢？
設計師説：我覺得應該不帶句號，界面看起來整潔一些，而且就如你説的，大部分產品也確實這麼做。
1. 一番深挖設計師不放心，會後繼續深挖了一下。
還別説，有類似疑問的小夥伴還挺多的。比如，有人問：插圖（手繪插畫、攝影圖片）下面的説明文字需要加句號嗎？還有人問：“特此通知”“特此證明”究竟要不要加句號？
看來一個小小的句話，讓很多人產生了疑惑啊。
《標點符號用法》（GB/T 15834-2011）標準規定了現代漢語標點符號的用法。該標準適用於漢語的書面語（包括漢語和外語混合排版時的漢語部分）。
其中説到了“圖或表的短語式説明文字，中間可用逗號，但末尾不用句號。即使有時説明文字較長，前面的語段已出現句號，最後結尾處仍不用句號”。
可見，説明類文字，可以不加句號。當然加也可以，只是會顯得多餘。
結果：採納設計師的建議。
七、用「加減」還是「上下」數字選擇器靈魂拷問場景：
拷問者説：element數字選擇器是「加減」設計；antd是「上下」設計，而且還是鼠標hover顯示的「上下」圖標，你怎麼看？我們用哪種？
設計師説：我們產品目前兩種都不用，是antd的「上下」設計，但不是鼠標hover顯示，而是常顯。
唐納德·諾曼在《日常的設計》中説：產品外觀必須能夠説明問題，能自然而明顯地體現外觀與其作用之間的關係，使用户一看就明白。
「加減」數字選擇器其實是個不錯的選擇，它符合唐納德·諾曼的説法。但「加減」在選擇器的兩端，對用户來説，需要通過鼠標左右跨度移動才能完成操作行為，比較費力費時。
而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協議