編輯導(dǎo)語(yǔ)：表單的存在可以讓用戶更加清晰地獲取反饋結(jié)果，進(jìn)而推動(dòng)系統(tǒng)與用戶之間的信息與數(shù)據(jù)傳遞。但表單的每一個(gè)細(xì)節(jié)都是設(shè)計(jì)師一點(diǎn)點(diǎn)分析修改出來(lái)的。本文作者分享了開(kāi)會(huì)過(guò)程中關(guān)于表單的十個(gè)靈魂拷問(wèn)，希望能給你帶來(lái)幫助。

早上9：30，A產(chǎn)品的產(chǎn)品設(shè)計(jì)規(guī)范評(píng)審會(huì)如期展開(kāi)。

設(shè)計(jì)師、產(chǎn)品經(jīng)理、研發(fā)小哥哥悉數(shù)到場(chǎng)。

產(chǎn)品經(jīng)理主持會(huì)議，說(shuō)明了今天的會(huì)議主題后，設(shè)計(jì)師開(kāi)始介紹產(chǎn)品設(shè)計(jì)規(guī)范的設(shè)計(jì)理念了。

當(dāng)設(shè)計(jì)師介紹到表單規(guī)范時(shí)，大家問(wèn)了很多問(wèn)題。

設(shè)計(jì)師一臉懵，但只得一個(gè)個(gè)問(wèn)題耐心解釋著……

這些問(wèn)題，很多B端設(shè)計(jì)師都遇到過(guò)，今天，我們一起來(lái)看看吧~

一、必填項(xiàng)的*「要」還是「不要」

靈魂拷問(wèn)場(chǎng)景：

拷問(wèn)者說(shuō)：我們的表單項(xiàng)默認(rèn)都是要填寫的，還有必要在label前加個(gè)「*」嗎？我們覺(jué)得沒(méi)必要。

設(shè)計(jì)師說(shuō)：要「*」。

1. 「要*」的理由

1. *是用戶判斷表單項(xiàng)是否必填的符號(hào)，如果不帶*，會(huì)給用戶產(chǎn)生模棱兩可的感覺(jué)，不利于用戶明確任務(wù)目標(biāo)。
2. 若用戶沒(méi)有填寫某一項(xiàng)，點(diǎn)擊了表單提交后才發(fā)現(xiàn)該表單項(xiàng)為必填，用戶會(huì)感覺(jué)人與系統(tǒng)交互的過(guò)程是滯后的。而通過(guò)加*，會(huì)讓人感覺(jué)系統(tǒng)更人性化。

2. 「不要*」的場(chǎng)景

雖然以上場(chǎng)景建議加上*，但也有一些場(chǎng)景例外。比如，表格查詢區(qū)域、注冊(cè)登錄、默認(rèn)選項(xiàng)等的場(chǎng)景。

結(jié)果：采納設(shè)計(jì)師的建議。

二、必填項(xiàng)用「*」還是「必填、選填」

靈魂拷問(wèn)場(chǎng)景：

拷問(wèn)者說(shuō)：實(shí)在想不好必填項(xiàng)用「*」還是「必填、選填」，說(shuō)說(shuō)你為什么用「*」吧。

設(shè)計(jì)師說(shuō)：「*」比「必填、選填」在視覺(jué)上明顯，且不會(huì)加長(zhǎng)label的長(zhǎng)度。

1. 用「必填、選填」的場(chǎng)景

大部分設(shè)計(jì)規(guī)范是用「*」來(lái)表示必填，但也有一些產(chǎn)品選擇了「必填、選填」，原因在于：假如總共有10個(gè)表單項(xiàng)，有9個(gè)表單項(xiàng)必填，1個(gè)選填，那么為了界面整潔，就可以給選填的表單項(xiàng)備注「選填」。

假設(shè)剛好相反，那么給必填的表單項(xiàng)備注「必填」。如果它倆勢(shì)均力敵，那就標(biāo)注「必填」項(xiàng)。

結(jié)果：采納設(shè)計(jì)師的建議。

三、必填項(xiàng)在label「左邊」還是「右邊」

靈魂拷問(wèn)場(chǎng)景：

拷問(wèn)者說(shuō)：我們現(xiàn)在表單label都是右對(duì)齊，把必填項(xiàng)「*」放右邊，顯得整齊。

設(shè)計(jì)師說(shuō)：還是把必填項(xiàng)「*」放左邊好。

1. 放「右邊」的理由

由于「*」位置統(tǒng)一，用戶直接在一個(gè)位置掃一眼，就知道必填項(xiàng)的多少，很方便。

2. 放「左邊」的理由

用戶是從左往右閱讀文字，因此「*」放label放左邊，符合用戶閱讀習(xí)慣，讓用戶閱讀時(shí)一眼明了哪些必填。并且目前公司大部分上線的產(chǎn)品均采用必填項(xiàng)「*」放左邊，還未有用戶提出問(wèn)題，運(yùn)行良好。

結(jié)果：采納設(shè)計(jì)師的建議。

四、用「select」還是「radio」

靈魂拷問(wèn)場(chǎng)景：

拷問(wèn)者說(shuō)：這個(gè)場(chǎng)景下，「是、否」選項(xiàng)用戶已經(jīng)習(xí)慣通過(guò)select來(lái)操作了，不要用radio。

設(shè)計(jì)師說(shuō)：只有「是、否」兩個(gè)選項(xiàng)，直接展示給用戶操作更直觀，用戶操作路徑也短。

1. 「select」的使用場(chǎng)景

用戶需要通過(guò)點(diǎn)擊輸入框喚出下拉面板來(lái)選擇自己需要的選項(xiàng)，通常選項(xiàng)數(shù)多于5項(xiàng)，可以考慮使用選擇器。建議選項(xiàng)按照業(yè)務(wù)需求進(jìn)行排序，使用戶可以快速找到，并盡量讓內(nèi)容顯示完整。

2. 「radio」的使用場(chǎng)景

radio組件的所有選項(xiàng)平鋪展現(xiàn)給用戶，方便用戶直接選擇，選項(xiàng)不宜過(guò)多，一般在2-5個(gè)之間，同時(shí)必定會(huì)有一個(gè)選項(xiàng)處于選中狀態(tài)。

結(jié)果：采納拷問(wèn)者的建議。

雖然拷問(wèn)者認(rèn)同設(shè)計(jì)師給出的設(shè)計(jì)思路，但B端用戶習(xí)慣不敢隨意挑戰(zhàn)。用戶習(xí)慣是產(chǎn)品迭代與創(chuàng)新路上的大難題、攔路虎，設(shè)計(jì)師經(jīng)常被用戶習(xí)慣這個(gè)理由打回去改設(shè)計(jì)稿，怎么破呢？

五、用「線索模式」還是「說(shuō)明模式」

靈魂拷問(wèn)場(chǎng)景：

拷問(wèn)者說(shuō)：你來(lái)說(shuō)說(shuō)放在輸入框里的文字和放在輸入框下面的文字有啥不同，我看都是提示文字。

設(shè)計(jì)師說(shuō)：嗯，還是有很大不同的。

1. 線索模式

大家記不記得時(shí)間控件中有“請(qǐng)選擇日期”，搜索框中會(huì)有“請(qǐng)輸入IP地址”等線索文字，這就是線索設(shè)計(jì)模式。假如搜索框中什么文字也沒(méi)有，用戶就會(huì)搜索一次錯(cuò)一次，因?yàn)樵O(shè)計(jì)者沒(méi)有給用戶框定搜索邊界。因此線索設(shè)計(jì)模式可以讓界面不言自明。

2. 說(shuō)明模式

說(shuō)明模式是輸入框下面的文字，該文字是用來(lái)解釋輸入框中內(nèi)容的輸入標(biāo)準(zhǔn)、注意事項(xiàng)、要求等的，會(huì)比線索模式的文字更完善和具有指向性。采用信息說(shuō)明模式時(shí)，建議文案精簡(jiǎn)、設(shè)計(jì)直觀，保證用戶在無(wú)需猜測(cè)，便可以根據(jù)說(shuō)明自己操作和成功完成操作。

結(jié)果：采納設(shè)計(jì)師的建議。

拷問(wèn)者覺(jué)得設(shè)計(jì)師說(shuō)的很有道理，這塊上再也不糾結(jié)了，直接按照設(shè)計(jì)師定的設(shè)計(jì)規(guī)范來(lái)。

六、說(shuō)明文字的句號(hào)「要」還是「不要」

靈魂拷問(wèn)場(chǎng)景：

拷問(wèn)者說(shuō)：我看好多產(chǎn)品，表單項(xiàng)的說(shuō)明文字都是不帶「句號(hào)」的，但是我覺(jué)得它們是一整句完整的話，是不是應(yīng)該帶句號(hào)呢？

設(shè)計(jì)師說(shuō)：我覺(jué)得應(yīng)該不帶句號(hào)，界面看起來(lái)整潔一些，而且就如你說(shuō)的，大部分產(chǎn)品也確實(shí)這么做。

1. 一番深挖

設(shè)計(jì)師不放心，會(huì)后繼續(xù)深挖了一下。

還別說(shuō)，有類似疑問(wèn)的小伙伴還挺多的。比如，有人問(wèn)：插圖（手繪插畫、攝影圖片）下面的說(shuō)明文字需要加句號(hào)嗎？還有人問(wèn)：“特此通知”“特此證明”究竟要不要加句號(hào)？

看來(lái)一個(gè)小小的句話，讓很多人產(chǎn)生了疑惑啊。

《標(biāo)點(diǎn)符號(hào)用法》（GB/T 15834-2011）標(biāo)準(zhǔn)規(guī)定了現(xiàn)代漢語(yǔ)標(biāo)點(diǎn)符號(hào)的用法。該標(biāo)準(zhǔn)適用于漢語(yǔ)的書面語(yǔ)（包括漢語(yǔ)和外語(yǔ)混合排版時(shí)的漢語(yǔ)部分）。

其中說(shuō)到了“圖或表的短語(yǔ)式說(shuō)明文字，中間可用逗號(hào)，但末尾不用句號(hào)。即使有時(shí)說(shuō)明文字較長(zhǎng)，前面的語(yǔ)段已出現(xiàn)句號(hào)，最后結(jié)尾處仍不用句號(hào)”。

可見(jiàn)，說(shuō)明類文字，可以不加句號(hào)。當(dāng)然加也可以，只是會(huì)顯得多余。

結(jié)果：采納設(shè)計(jì)師的建議。

七、用「加減」還是「上下」數(shù)字選擇器

靈魂拷問(wèn)場(chǎng)景：

拷問(wèn)者說(shuō)：element數(shù)字選擇器是「加減」設(shè)計(jì)；antd是「上下」設(shè)計(jì)，而且還是鼠標(biāo)hover顯示的「上下」圖標(biāo)，你怎么看？我們用哪種？

設(shè)計(jì)師說(shuō)：我們產(chǎn)品目前兩種都不用，是antd的「上下」設(shè)計(jì)，但不是鼠標(biāo)hover顯示，而是常顯。

1. 理由

唐納德·諾曼在《日常的設(shè)計(jì)》中說(shuō)：產(chǎn)品外觀必須能夠說(shuō)明問(wèn)題，能自然而明顯地體現(xiàn)外觀與其作用之間的關(guān)系，使用戶一看就明白。

「加減」數(shù)字選擇器其實(shí)是個(gè)不錯(cuò)的選擇，它符合唐納德·諾曼的說(shuō)法。但「加減」在選擇器的兩端，對(duì)用戶來(lái)說(shuō)，需要通過(guò)鼠標(biāo)左右跨度移動(dòng)才能完成操作行為，比較費(fèi)力費(fèi)時(shí)。

而antd的「上下」hover設(shè)計(jì)，對(duì)于用戶來(lái)說(shuō)不夠直觀，用戶并不能一眼知曉這是數(shù)字選擇器，表象上來(lái)說(shuō)，就是一個(gè)文字輸入框。但優(yōu)勢(shì)是，鼠標(biāo)停留在一個(gè)區(qū)域，就可以完成數(shù)字的增減。

因此，結(jié)合了它們兩者的設(shè)計(jì)優(yōu)勢(shì)，及抹去了設(shè)計(jì)劣勢(shì)，我們用了現(xiàn)在的數(shù)字輸入框。

結(jié)果：采納設(shè)計(jì)師的建議。

拷問(wèn)者連連拍手稱贊，認(rèn)為設(shè)計(jì)師有思考，做的好。

八、用「checkbox」還是「switch」

靈魂拷問(wèn)場(chǎng)景：

拷問(wèn)者說(shuō)：這個(gè)“節(jié)點(diǎn)復(fù)用”字段不要用「checkbox」，用「switch」，它看著更好看點(diǎn)。

設(shè)計(jì)師說(shuō)：不能因?yàn)樗L(zhǎng)得好看而用它，還是要以用戶認(rèn)知和操作提效角度出發(fā)。

1. 「checkbox」的使用場(chǎng)景

checkbox用于在一組選項(xiàng)可以多選時(shí)使用。單個(gè)復(fù)選框可以表示在兩種狀態(tài)間切換，例如我們?cè)谧?cè)APP時(shí)，APP會(huì)讓我們選擇“是否同意該協(xié)議”，如果同意，我們?cè)赾heckbox上打鉤即可。

2. 「switch」的使用場(chǎng)景

switch用于切換單個(gè)選項(xiàng)的狀態(tài)，類似電燈按鈕的開(kāi)和關(guān)。在開(kāi)關(guān)本身可以表達(dá)清楚狀態(tài)的情況下，可以不在開(kāi)關(guān)上加文字。若無(wú)法表達(dá)清楚的情況下，建議在開(kāi)關(guān)內(nèi)加入例如“禁用/啟用”等說(shuō)明狀態(tài)的文字。

由上我們可以發(fā)現(xiàn)：

checkbox（單個(gè)復(fù)選框）和switch都有讓用戶在兩個(gè)狀態(tài)下選擇的寓意，但switch最初的設(shè)計(jì)起源就是與“開(kāi)和關(guān)”相關(guān)的，后來(lái)才慢慢被拓展使用。在使用switch時(shí)，給用戶的感覺(jué)更是強(qiáng)調(diào)開(kāi)/關(guān)之類的動(dòng)作態(tài)的互斥狀態(tài)。

checkbox的優(yōu)勢(shì)是，可以讓整個(gè)組件描述會(huì)更清晰，就像在做填空題一般。

結(jié)果：采納拷問(wèn)者的建議。

“節(jié)點(diǎn)復(fù)用”并不需要如做填空題一般，復(fù)用/關(guān)閉是和開(kāi)/關(guān)一樣的動(dòng)作態(tài)選項(xiàng)。

九、label用「左對(duì)齊」還是「右對(duì)齊」

靈魂拷問(wèn)場(chǎng)景：

拷問(wèn)者說(shuō)：我看業(yè)界產(chǎn)品表單項(xiàng)的label左對(duì)齊和右對(duì)齊都有，你說(shuō)說(shuō)我們?cè)撚媚姆N呢？

設(shè)計(jì)師說(shuō)：定義一種，特殊場(chǎng)景再定義。

1. 一番深挖

馬泰奧·彭佐在2006年進(jìn)行了label對(duì)齊的眼動(dòng)實(shí)驗(yàn)，結(jié)果如表所示。

可見(jiàn)，從用戶填寫速度、完成率、認(rèn)知壓力等方面來(lái)說(shuō)，“l(fā)abel頂對(duì)齊”優(yōu)于“l(fā)abel右對(duì)齊”優(yōu)于“l(fā)abel左對(duì)齊”。

對(duì)于“l(fā)abel頂對(duì)齊”來(lái)說(shuō)：雖然占用大量的垂直空間，但label和輸入框非常緊密，有利于用戶瀏覽和填寫。

對(duì)于“l(fā)abel右對(duì)齊”來(lái)說(shuō)：人類的閱讀習(xí)慣是從左往右讀，而偏偏label左邊是不對(duì)齊的，因此會(huì)有些影響用戶的閱讀效率，但label與輸入框聯(lián)系緊密，填寫速度也較快。

對(duì)于“l(fā)abel左對(duì)齊”來(lái)說(shuō)：label與輸入框聯(lián)系不緊密，特別是當(dāng)label之間的長(zhǎng)短差距非常大的時(shí)候，還會(huì)導(dǎo)致用戶填寫表單的時(shí)間過(guò)長(zhǎng)，但label可讀性較強(qiáng)，且界面整體看起來(lái)較為清晰。

除上述外，還有一種“輸入框內(nèi)label”的設(shè)計(jì)模式，這種模式會(huì)讓界面干凈整潔，且與輸入框聯(lián)系很緊密，唯一的缺點(diǎn)是，當(dāng)用戶激活輸入框準(zhǔn)備輸入內(nèi)容時(shí)，label會(huì)消失，不利于他們回憶表單所需要他們填寫的信息。

結(jié)果：采納設(shè)計(jì)師的建議。

拷問(wèn)者聽(tīng)完設(shè)計(jì)師的闡述，認(rèn)為這塊在自己的認(rèn)知范圍之外，聽(tīng)設(shè)計(jì)師的沒(méi)錯(cuò)。

十、短頁(yè)面表單主次操作按鈕怎么擺放

靈魂拷問(wèn)場(chǎng)景：

拷問(wèn)者說(shuō)：我看表單的主次按鈕順序有好多種，到底哪種比較合理呢？

設(shè)計(jì)師說(shuō)：這個(gè)有人做過(guò)實(shí)驗(yàn)，我們一起來(lái)看看。

1. 一番深挖

Luke Wroblewski和倫敦的可用性專家Etre做過(guò)一次實(shí)驗(yàn)，專門對(duì)網(wǎng)頁(yè)表單設(shè)計(jì)的主次按鈕進(jìn)行眼動(dòng)研究。首先確定什么是主次按鈕。例如我們期望用戶對(duì)表單進(jìn)行保存的，那么此就是主按鈕，取消則為次按鈕。

他們還討論了例如“重置”按鈕有無(wú)必要，因?yàn)楹芏嘤脩魰?huì)誤點(diǎn)，但調(diào)查發(fā)現(xiàn)，重置按鈕在某些場(chǎng)景下也是有用的，因此，好的辦法是將主次按鈕視覺(jué)上區(qū)別對(duì)待。

他們的實(shí)驗(yàn)選取了以上6個(gè)表單場(chǎng)景。最后發(fā)現(xiàn)，ABCDF都能使得用戶成功完成任務(wù)，并且用戶完成時(shí)間也差異不大，且用戶的滿意度評(píng)價(jià)也不錯(cuò)。出乎意料的是，B是表現(xiàn)最好的。

我們常說(shuō)，主按鈕與次按鈕要區(qū)分視覺(jué)樣式，加快用戶操作效率，而事實(shí)上，不論按鈕是否顏色不同，用戶在做出選擇前，總是會(huì)再次確認(rèn)按鈕上寫的是什么。

這就像C的一部分用戶所說(shuō)，將主次按鈕進(jìn)行區(qū)分，反而讓我們認(rèn)為按鈕怎么了？減慢了他們的決策，讓他們?cè)俅魏藢?duì)自己是否正在點(diǎn)擊正確的按鈕。

結(jié)果：采納設(shè)計(jì)師的建議。

拷問(wèn)者聽(tīng)完設(shè)計(jì)師的闡述，認(rèn)為這塊在自己的認(rèn)知范圍之外，聽(tīng)設(shè)計(jì)師的沒(méi)錯(cuò)。

十一、RRRA原則

從這10個(gè)靈魂拷問(wèn)我們可以發(fā)現(xiàn)，一些看似不同的設(shè)計(jì)方法之間，對(duì)用戶的決策和操作影響不大；而另一些不同的設(shè)計(jì)之間，對(duì)用戶會(huì)產(chǎn)生不同的決策影響。我們能做的，就是記錄、假設(shè)、驗(yàn)證、沉淀，我們不能做的就是憑感覺(jué)。

這里知果總結(jié)了表單設(shè)計(jì)的RRRA原則來(lái)指導(dǎo)我們的表單設(shè)計(jì)，分別是：

1. 減少（reduce）用戶思考時(shí)間

使用表單需要啟動(dòng)用戶的邏輯思維，沒(méi)有人喜歡使用表單，越讓用戶少思考，對(duì)用戶來(lái)說(shuō)他們是越開(kāi)心的。因此，結(jié)構(gòu)化表單內(nèi)容、簡(jiǎn)化表單信息、清晰排版布局等，有利于減少用戶思考的時(shí)間。

2. 減少（reduce）用戶操作時(shí)長(zhǎng)

必填信息有提示、專業(yè)術(shù)語(yǔ)有解釋、默認(rèn)選項(xiàng)有預(yù)填等，都可以減少用戶的操作時(shí)長(zhǎng)。

3. 減少（reduce）用戶操作錯(cuò)誤

金額、卡號(hào)、身份證自動(dòng)格式化，填錯(cuò)信息及時(shí)友好反饋等，可減少用戶操作錯(cuò)誤。

4. 提升（improve）用戶操作效率

無(wú)必要不亂拆解步驟、簡(jiǎn)化及清晰文案表達(dá)、扁平化交互等，可提升用戶操作效率。

任何形式的表單設(shè)計(jì)，符合以上4個(gè)原則，那么距離用戶認(rèn)為好的表單設(shè)計(jì)就不遠(yuǎn)了。記住，任何表現(xiàn)形式或設(shè)計(jì)方法，不服務(wù)于用戶需求，不能達(dá)到用戶所望，都可以說(shuō)是還值得在進(jìn)一步思考的設(shè)計(jì)。

十二、寫在最后

表單是連接產(chǎn)品與用戶的重要橋梁。而表單的設(shè)計(jì)細(xì)節(jié)多之又多，每更換一個(gè)產(chǎn)品，同樣的表單問(wèn)題會(huì)需要設(shè)計(jì)師再處理一遍。

通過(guò)上述第三趴的表單整理，相信大家對(duì)表單又有了進(jìn)一步的認(rèn)識(shí)。

表單設(shè)計(jì)不可怕，最怕我們不了解業(yè)務(wù)場(chǎng)景、流程與用戶訴求，僅僅按照經(jīng)驗(yàn)來(lái)設(shè)計(jì)。

很多時(shí)候，個(gè)場(chǎng)景下驗(yàn)證有效的設(shè)計(jì)策略，放在另一個(gè)產(chǎn)品中就不適用了。

好了，今天知果的分享就到這里，我們下期見(jiàn)~

#專欄作家#

知果，公眾號(hào)：知果日記，人人都是產(chǎn)品經(jīng)理專欄作家。浙江工商大學(xué)品牌設(shè)計(jì)專業(yè)碩士，《B端思維-產(chǎn)品經(jīng)理的自我修煉》作者。在產(chǎn)品設(shè)計(jì)流程、產(chǎn)品設(shè)計(jì)原則、產(chǎn)品設(shè)計(jì)方法、產(chǎn)品設(shè)計(jì)規(guī)范方面均有豐富經(jīng)驗(yàn)

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議