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

早上9：30，A産品的産品設計規範評審會如期展開。

設計師、産品經理、研發小哥哥悉數到場。

産品經理主持會議，說明了今天的會議主題後，設計師開始介紹産品設計規範的設計理念了。

當設計師介紹到表單規範時，大家問了很多問題。

設計師一臉懵，但隻得一個個問題耐心解釋着……

這些問題，很多B端設計師都遇到過，今天，我們一起來看看吧~

一、必填項的*「要」還是「不要」

靈魂拷問場景：

拷問者說：我們的表單項默認都是要填寫的，還有必要在label前加個「*」嗎？我們覺得沒必要。

設計師說：要「*」。

1. 「要*」的理由

1. *是用戶判斷表單項是否必填的符号，如果不帶*，會給用戶産生模棱兩可的感覺，不利于用戶明确任務目标。
2. 若用戶沒有填寫某一項，點擊了表單提交後才發現該表單項為必填，用戶會感覺人與系統交互的過程是滞後的。而通過加*，會讓人感覺系統更人性化。

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協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部