表單第三趴 | B端設(shè)計(jì)師繞不過去的10個(gè)靈魂拷問
關(guān)鍵詞：表單設(shè)計(jì)
早上9：30，A產(chǎn)品的產(chǎn)品設(shè)計(jì)規(guī)范評(píng)審會(huì)如期展開。
設(shè)計(jì)師、產(chǎn)品經(jīng)理、研發(fā)小哥哥悉數(shù)到場(chǎng)。
產(chǎn)品經(jīng)理主持會(huì)議，說明了今天的會(huì)議主題后，設(shè)計(jì)師開始介紹產(chǎn)品設(shè)計(jì)規(guī)范的設(shè)計(jì)理念了。
當(dāng)設(shè)計(jì)師介紹到表單規(guī)范時(shí)，大家問了很多問題。
設(shè)計(jì)師一臉懵，但只得一個(gè)個(gè)問題耐心解釋著……
這些問題，很多B端設(shè)計(jì)師都遇到過，今天，我們一起來看看吧~
——?1?——
必填項(xiàng)的*「要」還是「不要」
靈魂拷問場(chǎng)景：
拷問者說：我們的表單項(xiàng)默認(rèn)都是要填寫的，還有必要在label前加個(gè)「*」嗎？我們覺得沒必要。
設(shè)計(jì)師說：要「*」。
「要*」的理由：
1、*是用戶判斷表單項(xiàng)是否必填的符號(hào)，如果不帶*，會(huì)給用戶產(chǎn)生模棱兩可的感覺，不利于用戶明確任務(wù)目標(biāo)。
2、若用戶沒有填寫某一項(xiàng)，點(diǎn)擊了表單提交后才發(fā)現(xiàn)該表單項(xiàng)為必填，用戶會(huì)感覺人與系統(tǒng)交互的過程是滯后的。而通過加*，會(huì)讓人感覺系統(tǒng)更人性化。
「不要*」的場(chǎng)景：
雖然以上場(chǎng)景建議加上*，但也有一些場(chǎng)景例外。比如，表格查詢區(qū)域、注冊(cè)登錄、默認(rèn)選項(xiàng)等的場(chǎng)景。
結(jié)果：采納設(shè)計(jì)師的建議。
——?2?——
必填項(xiàng)用「*」還是「必填、選填」
靈魂拷問場(chǎng)景：
拷問者說：實(shí)在想不好必填項(xiàng)用「*」還是「必填、選填」，說說你為什么用「*」吧。
設(shè)計(jì)師說：「*」比「必填、選填」在視覺上明顯，且不會(huì)加長(zhǎng)label的長(zhǎng)度。
用「必填、選填」的場(chǎng)景：
大部分設(shè)計(jì)規(guī)范是用「*」來表示必填，但也有一些產(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ì)師的建議。
——?3?——
必填項(xiàng)在label「左邊」還是「右邊」
靈魂拷問場(chǎng)景：
拷問者說：我們現(xiàn)在表單label都是右對(duì)齊，把必填項(xiàng)「*」放右邊，顯得整齊。
設(shè)計(jì)師說：還是把必填項(xiàng)「*」放左邊好。
放「右邊」的理由：
由于「*」位置統(tǒng)一，用戶直接在一個(gè)位置掃一眼，就知道必填項(xiàng)的多少，很方便。
放「左邊」的理由：
用戶是從左往右閱讀文字，因此「*」放label放左邊，符合用戶閱讀習(xí)慣，讓用戶閱讀時(shí)一眼明了哪些必填。并且目前公司大部分上線的產(chǎn)品均采用必填項(xiàng)「*」放左邊，還未有用戶提出問題，運(yùn)行良好。
結(jié)果：采納設(shè)計(jì)師的建議。
——?4?——
用「select」還是「radio」
靈魂拷問場(chǎng)景：
拷問者說：這個(gè)場(chǎng)景下，「是、否」選項(xiàng)用戶已經(jīng)習(xí)慣通過select來操作了，不要用radio。
設(shè)計(jì)師說：只有「是、否」兩個(gè)選項(xiàng)，直接展示給用戶操作更直觀，用戶操作路徑也短。
「select」的使用場(chǎng)景：
用戶需要通過點(diǎn)擊輸入框喚出下拉面板來選擇自己需要的選項(xiàng)，通常選項(xiàng)數(shù)多于5項(xiàng)，可以考慮使用選擇器。建議選項(xiàng)按照業(yè)務(wù)需求進(jìn)行排序，使用戶可以快速找到，并盡量讓內(nèi)容顯示完整。
「radio」的使用場(chǎng)景：
radio組件的所有選項(xiàng)平鋪展現(xiàn)給用戶，方便用戶直接選擇，選項(xiàng)不宜過多，一般在2-5個(gè)之間，同時(shí)必定會(huì)有一個(gè)選項(xiàng)處于選中狀態(tài)。
結(jié)果：采納拷問者的建議。
雖然拷問者認(rèn)同設(shè)計(jì)師給出的設(shè)計(jì)思路，但B端用戶習(xí)慣不敢隨意挑戰(zhàn)。用戶習(xí)慣是產(chǎn)品迭代與創(chuàng)新路上的大難題、攔路虎，設(shè)計(jì)師經(jīng)常被用戶習(xí)慣這個(gè)理由打回去改設(shè)計(jì)稿，怎么破呢？
——?5?——
用「線索模式」還是「說明模式」
靈魂拷問場(chǎng)景：
拷問者說：你來說說放在輸入框里的文字和放在輸入框下面的文字有啥不同，我看都是提示文字。
設(shè)計(jì)師說：嗯，還是有很大不同的。
線索模式：
大家記不記得時(shí)間控件中有“請(qǐng)選擇日期”，搜索框中會(huì)有“請(qǐng)輸入IP地址”等線索文字，這就是線索設(shè)計(jì)模式。假如搜索框中什么文字也沒有，用戶就會(huì)搜索一次錯(cuò)一次，因?yàn)樵O(shè)計(jì)者沒有給用戶框定搜索邊界。因此線索設(shè)計(jì)模式可以讓界面不言自明。
說明模式：
說明模式是輸入框下面的文字，該文字是用來解釋輸入框中內(nèi)容的輸入標(biāo)準(zhǔn)、注意事項(xiàng)、要求等的，會(huì)比線索模式的文字更完善和具有指向性。采用信息說明模式時(shí)，建議文案精簡(jiǎn)、設(shè)計(jì)直觀，保證用戶在無需猜測(cè)，便可以根據(jù)說明自己操作和成功完成操作。
結(jié)果：采納設(shè)計(jì)師的建議。
拷問者覺得設(shè)計(jì)師說的很有道理，這塊上再也不糾結(jié)了，直接按照設(shè)計(jì)師定的設(shè)計(jì)規(guī)范來。
——?6?——
說明文字的句號(hào)「要」還是「不要」
靈魂拷問場(chǎng)景：
拷問者說：我看好多產(chǎn)品，表單項(xiàng)的說明文字都是不帶「句號(hào)」的，但是我覺得它們是一整句完整的話，是不是應(yīng)該帶句號(hào)呢？
設(shè)計(jì)師說：我覺得應(yīng)該不帶句號(hào)，界面看起來整潔一些，而且就如你說的，大部分產(chǎn)品也確實(shí)這么做。
一番深挖：
設(shè)計(jì)師不放心，會(huì)后繼續(xù)深挖了一下。
還別說，有類似疑問的小伙伴還挺多的。比如，有人問：插圖（手繪插畫、攝影圖片）下面的說明文字需要加句號(hào)嗎？還有人問：“特此通知”“特此證明”究竟要不要加句號(hào)？
看來一個(gè)小小的句話，讓很多人產(chǎn)生了疑惑啊。
《標(biāo)點(diǎn)符號(hào)用法》（GB/T 15834-2011）標(biāo)準(zhǔn)規(guī)定了現(xiàn)代漢語標(biāo)點(diǎn)符號(hào)的用法。該標(biāo)準(zhǔn)適用于漢語的書面語（包括漢語和外語混合排版時(shí)的漢語部分）。其中說到了“圖或表的短語式說明文字，中間可用逗號(hào)，但末尾不用句號(hào)。即使有時(shí)說明文字較長(zhǎng)，前面的語段已出現(xiàn)句號(hào)，最后結(jié)尾處仍不用句號(hào)”。
可見，說明類文字，可以不加句號(hào)。當(dāng)然加也可以，只是會(huì)顯得多余。
結(jié)果：采納設(shè)計(jì)師的建議。
——?7?——
用「加減」還是「上下」數(shù)字選擇器
靈魂拷問場(chǎng)景：
拷問者說：element數(shù)字選擇器是「加減」設(shè)計(jì)；antd是「上下」設(shè)計(jì)，而且還是鼠標(biāo)hover顯示的「上下」圖標(biāo)，你怎么看？我們用哪種？
設(shè)計(jì)師說：我們產(chǎn)品目前兩種都不用，是antd的「上下」設(shè)計(jì)，但不是鼠標(biāo)hover顯示，而是常顯。
理由：
唐納德·諾曼在《日常的設(shè)計(jì)》中說：產(chǎn)品外觀必須能夠說明問題，能自然而明顯地體現(xiàn)外觀與其作用之間的關(guān)系，使用戶一看就明白。
「加減」數(shù)字選擇器其實(shí)是個(gè)不錯(cuò)的選擇，它符合唐納德·諾曼的說法。但「加減」在選擇器的兩端，對(duì)用戶來說，需要通過鼠標(biāo)左右跨度移動(dòng)才能完成操作行為，比較費(fèi)力費(fèi)時(shí)。
而antd的「上下」hover設(shè)計(jì)，對(duì)于用戶來說不夠直觀，用戶并不能一眼知曉這是數(shù)字選擇器，表象上來說，就是一個(gè)文字輸入框。但優(yōu)勢(shì)是，鼠標(biāo)停留在一個(gè)區(qū)域，就可以完成數(shù)字的增減。
因此，結(jié)合了它們兩者的設(shè)計(jì)優(yōu)勢(shì)，及抹去了設(shè)計(jì)劣勢(shì)，我們用了現(xiàn)在的數(shù)字輸入框。
結(jié)果：采納設(shè)計(jì)師的建議。
拷問者連連拍手稱贊，認(rèn)為設(shè)計(jì)師有思考，做的好。
——?8?——
用「checkbox」還是「switch」
靈魂拷問場(chǎng)景：
拷問者說：這個(gè)“節(jié)點(diǎn)復(fù)用”字段不要用「checkbox」，用「switch」，它看著更好看點(diǎn)。
設(shè)計(jì)師說：不能因?yàn)樗L(zhǎng)得好看而用它，還是要以用戶認(rèn)知和操作提效角度出發(fā)。
「checkbox」的使用場(chǎng)景：
checkbox用于在一組選項(xiàng)可以多選時(shí)使用。單個(gè)復(fù)選框可以表示在兩種狀態(tài)間切換，例如我們?cè)谧?cè)APP時(shí)，APP會(huì)讓我們選擇“是否同意該協(xié)議”，如果同意，我們?cè)赾heckbox上打鉤即可。
「switch」的使用場(chǎng)景：
switch用于切換單個(gè)選項(xiàng)的狀態(tài)，類似電燈按鈕的開和關(guān)。在開關(guān)本身可以表達(dá)清楚狀態(tài)的情況下，可以不在開關(guān)上加文字。若無法表達(dá)清楚的情況下，建議在開關(guān)內(nèi)加入例如“禁用/啟用”等說明狀態(tài)的文字。
由上我們可以發(fā)現(xiàn)：
checkbox（單個(gè)復(fù)選框）和switch都有讓用戶在兩個(gè)狀態(tài)下選擇的寓意，但switch最初的設(shè)計(jì)起源就是與“開和關(guān)”相關(guān)的，后來才慢慢被拓展使用。在使用switch時(shí)，給用戶的感覺更是強(qiáng)調(diào)開/關(guān)之類的動(dòng)作態(tài)的互斥狀態(tài)。
checkbox的優(yōu)勢(shì)是，可以讓整個(gè)組件描述會(huì)更清晰，就像在做填空題一般。
結(jié)果：采納拷問者的建議。
“節(jié)點(diǎn)復(fù)用”并不需要如做填空題一般，復(fù)用/關(guān)閉是和開/關(guān)一樣的動(dòng)作態(tài)選項(xiàng)。
——?9?——
label用「左對(duì)齊」還是「右對(duì)齊」
靈魂拷問場(chǎng)景：
拷問者說：我看業(yè)界產(chǎn)品表單項(xiàng)的label左對(duì)齊和右對(duì)齊都有，你說說我們?cè)撚媚姆N呢？
設(shè)計(jì)師說：定義一種，特殊場(chǎng)景再定義。
一番深挖：
馬泰奧·彭佐在2006年進(jìn)行了label對(duì)齊的眼動(dòng)實(shí)驗(yàn)，結(jié)果如表所示。
可見，從用戶填寫速度、完成率、認(rèn)知壓力等方面來說，“l(fā)abel頂對(duì)齊”優(yōu)于“l(fā)abel右對(duì)齊”優(yōu)于“l(fā)abel左對(duì)齊”。
對(duì)于“l(fā)abel頂對(duì)齊”來說：雖然占用大量的垂直空間，但label和輸入框非常緊密，有利于用戶瀏覽和填寫。
對(duì)于“l(fā)abel右對(duì)齊”來說：人類的閱讀習(xí)慣是從左往右讀，而偏偏label左邊是不對(duì)齊的，因此會(huì)有些影響用戶的閱讀效率，但label與輸入框聯(lián)系緊密，填寫速度也較快。
對(duì)于“l(fā)abel左對(duì)齊”來說：label與輸入框聯(lián)系不緊密，特別是當(dāng)label之間的長(zhǎng)短差距非常大的時(shí)候，還會(huì)導(dǎo)致用戶填寫表單的時(shí)間過長(zhǎng)，但label可讀性較強(qiáng)，且界面整體看起來較為清晰。
除上述外，還有一種“輸入框內(nèi)label”的設(shè)計(jì)模式，這種模式會(huì)讓界面干凈整潔，且與輸入框聯(lián)系很緊密，唯一的缺點(diǎn)是，當(dāng)用戶激活輸入框準(zhǔn)備輸入內(nèi)容時(shí)，label會(huì)消失，不利于他們回憶表單所需要他們填寫的信息。
結(jié)果：采納設(shè)計(jì)師的建議。
拷問者聽完設(shè)計(jì)師的闡述，認(rèn)為這塊在自己的認(rèn)知范圍之外，聽設(shè)計(jì)師的沒錯(cuò)。
——?10?——
短頁面表單主次操作按鈕怎么擺放
靈魂拷問場(chǎng)景：
拷問者說：我看表單的主次按鈕順序有好多種，到底哪種比較合理呢？
設(shè)計(jì)師說：這個(gè)有人做過實(shí)驗(yàn)，我們一起來看看。
一番深挖：
Luke Wroblewski和倫敦的可用性專家Etre做過一次實(shí)驗(yàn)，專門對(duì)網(wǎng)頁表單設(shè)計(jì)的主次按鈕進(jìn)行眼動(dòng)研究。首先確定什么是主次按鈕。例如我們期望用戶對(duì)表單進(jìn)行保存的，那么此就是主按鈕，取消則為次按鈕。他們還討論了例如“重置”按鈕有無必要，因?yàn)楹芏嘤脩魰?huì)誤點(diǎn)，但調(diào)查發(fā)現(xiàn)，重置按鈕在某些場(chǎng)景下也是有用的，因此，好的辦法是將主次按鈕視覺上區(qū)別對(duì)待。
他們的實(shí)驗(yàn)選取了以上6個(gè)表單場(chǎng)景。最后發(fā)現(xiàn)，A\B\C\D\F都能使得用戶成功完成任務(wù)，并且用戶完成時(shí)間也差異不大，且用戶的滿意度評(píng)價(jià)也不錯(cuò)。出乎意料的是，B是表現(xiàn)最好的。我們常說，主按鈕與次按鈕要區(qū)分視覺樣式，加快用戶操作效率，而事實(shí)上，不論按鈕是否顏色不同，用戶在做出選擇前，總是會(huì)再次確認(rèn)按鈕上寫的是什么。這就像C的一部分用戶所說，將主次按鈕進(jìn)行區(qū)分，反而讓我們認(rèn)為按鈕怎么了？減慢了他們的決策，讓他們?cè)俅魏藢?duì)自己是否正在點(diǎn)擊正確的按鈕。
結(jié)果：采納設(shè)計(jì)師的建議。
拷問者聽完設(shè)計(jì)師的闡述，認(rèn)為這塊在自己的認(rèn)知范圍之外，聽設(shè)計(jì)師的沒錯(cuò)。
RRRA原則
從這10個(gè)靈魂拷問我們可以發(fā)現(xiàn)，一些看似不同的設(shè)計(jì)方法之間，對(duì)用戶的決策和操作影響不大；而另一些不同的設(shè)計(jì)之間，對(duì)用戶會(huì)產(chǎn)生不同的決策影響。我們能做的，就是記錄、假設(shè)、驗(yàn)證、沉淀，我們不能做的就是憑感覺。
這里知果總結(jié)了表單設(shè)計(jì)的RRRA原則來指導(dǎo)我們的表單設(shè)計(jì)，分別是：
1、減少（reduce）用戶思考時(shí)間
使用表單需要啟動(dòng)用戶的邏輯思維，沒有人喜歡使用表單，越讓用戶少思考，對(duì)用戶來說他們是越開心的。因此，結(jié)構(gòu)化表單內(nèi)容、簡(jiǎn)化表單信息、清晰排版布局等，有利于減少用戶思考的時(shí)間。
2、減少（reduce）用戶操作時(shí)長(zhǎng)
必填信息有提示、專業(yè)術(shù)語有解釋、默認(rèn)選項(xiàng)有預(yù)填等，都可以減少用戶的操作時(shí)長(zhǎng)。
3、減少（reduce）用戶操作錯(cuò)誤
金額、卡號(hào)、身份證自動(dòng)格式化，填錯(cuò)信息及時(shí)友好反饋等，可減少用戶操作錯(cuò)誤。
4、提升（improve）用戶操作效率
無必要不亂拆解步驟、簡(jiǎn)化及清晰文案表達(dá)、扁平化交互等，可提升用戶操作效率。
任何形式的表單設(shè)計(jì)，符合以上4個(gè)原則，那么距離用戶認(rèn)為好的表單設(shè)計(jì)就不遠(yuǎn)了。記住，任何表現(xiàn)形式或設(shè)計(jì)方法，不服務(wù)于用戶需求，不能達(dá)到用戶所望，都可以說是還值得在進(jìn)一步思考的設(shè)計(jì)。
寫在最后
表單是連接產(chǎn)品與用戶的重要橋梁。而表單的設(shè)計(jì)細(xì)節(jié)多之又多，每更換一個(gè)產(chǎn)品，同樣的表單問題會(huì)需要設(shè)計(jì)師再處理一遍。
通過上述第三趴的表單整理，相信大家對(duì)表單又有了進(jìn)一步的認(rèn)識(shí)。
表單設(shè)計(jì)不可怕，最怕我們不了解業(yè)務(wù)場(chǎng)景、流程與用戶訴求，僅僅按照經(jīng)驗(yàn)來設(shè)計(jì)。
很多時(shí)候，個(gè)場(chǎng)景下驗(yàn)證有效的設(shè)計(jì)策略，放在另一個(gè)產(chǎn)品中就不適用了。
好了，今天知果的分享就到這里，我們下期見~
知果日記知果日記分享B端體驗(yàn)、人機(jī)交互 、用戶思維、設(shè)計(jì)方法、認(rèn)知成長(zhǎng)等方面的感悟。知果是一名專注于B端領(lǐng)域的UX設(shè)計(jì)師，著有《B端思維-產(chǎn)品經(jīng)理的自我修煉》。和知果一起拓展眼界、豐富認(rèn)知、共同進(jìn)化。感謝關(guān)注…公眾號(hào)該公眾號(hào)已被封禁知果日記知果日記分享B端體驗(yàn)、人機(jī)交互 、用戶思維、設(shè)計(jì)方法、認(rèn)知成長(zhǎng)等方面的感悟。知果是一名專注于B端領(lǐng)域的UX設(shè)計(jì)師，著有《B端思維-產(chǎn)品經(jīng)理的自我修煉》。和知果一起拓展眼界、豐富認(rèn)知、共同進(jìn)化。感謝關(guān)注…公眾號(hào)該公眾號(hào)已被封禁最近在關(guān)注求職的小伙伴，一定要提前準(zhǔn)備高頻問題，在此我給大家整理了《產(chǎn)品經(jīng)理高頻面試60題及解析》，具體的問題列表可以參考下面的文章：
如果大家目前身處電商行業(yè)或者對(duì)電商感興趣以后想要入職電商行業(yè)，一定要系統(tǒng)學(xué)習(xí)電商相關(guān)的前后端系統(tǒng)，具體可以參考下面的文章：