2023年Web表單設(shè)計(jì)-你不知道的冷知識(shí)

Web表單設(shè)計(jì)——你不知道的冷知識(shí)當(dāng)我們?cè)O(shè)計(jì)Web表單時(shí)，往往用最直覺的設(shè)計(jì)閱歷本能驅(qū)動(dòng)我們?nèi)ソ鉀Q一些看似在界面設(shè)計(jì)中最簡(jiǎn)潔的問題，但每每到微小之處，又會(huì)有很多疑問從細(xì)節(jié)中冒出來給我們的設(shè)計(jì)造成困擾。

例如：在表單界面Label（標(biāo)簽）和Input（輸入框）上下還是左右排列合理、Label要不要加冒號(hào)、輸入框究竟多寬合適等等

以上這類問題看起來并不影響用戶完成任務(wù)，很久以來也少有人關(guān)懷這些微小之處會(huì)不會(huì)對(duì)用戶有什么影響。

以至于，我表達(dá)想寫一篇探究這些細(xì)節(jié)的文章時(shí)，同事會(huì)偷笑說：你都開頭討論標(biāo)簽?zāi)┪惨灰用疤?hào)了嗎太冷了——真是個(gè)冷學(xué)問！

的確如此，這些偏門、細(xì)碎的內(nèi)容，鮮少有人會(huì)去留意和思索。因此我在寫下這些共享內(nèi)容時(shí)期望可以達(dá)到目標(biāo)是：“冷學(xué)問雖然冷，但有用”。用我了解的這些表單設(shè)計(jì)冷學(xué)問：?jiǎn)l(fā)你的冷思維、引出你的熱思索。

話不閑聊，我們開頭爭(zhēng)論第一個(gè)問題。

聽起來似乎都有些道理，那究竟誰更對(duì)呢！

首先，我們追溯一下Web進(jìn)展史，早期可訪問性核對(duì)清單中通常堅(jiān)持要標(biāo)簽帶冒號(hào)，由于屏幕閱讀器一度必需依靠各種技巧才能理解標(biāo)記不明的表單。

而隨著技術(shù)進(jìn)展，Web表單使用“l(fā)abel”標(biāo)簽（tag）可以做正確的標(biāo)記，那么屏幕閱讀器就能通過標(biāo)記（markup）把標(biāo)簽（label）和相應(yīng)的字段對(duì)應(yīng)起來則無需再借助冒號(hào)。

不過在客戶端又有些意外！曾經(jīng)WindowsVista指南中明確要求使用冒號(hào)，MacAqua也有此要求但規(guī)章會(huì)稍敏捷一些。

這種狀況是由于某些狀況下屏幕閱讀器在桌面環(huán)境與可閱讀源代碼的網(wǎng)頁標(biāo)記相比會(huì)遇到一些困難，桌面環(huán)境不會(huì)直接顯示代碼。也是這個(gè)歷史緣由，造成Vista和Aqua各自都有大量其標(biāo)簽包含冒號(hào)的歷史表單。由于實(shí)在沒有必要把它們?nèi)扛牡?，直到今日客戶端的表單照舊連續(xù)這一規(guī)章。

通過Web進(jìn)展史我們明白表單標(biāo)簽帶冒號(hào)的產(chǎn)生是為了解決早期屏幕閱讀器的識(shí)別，如今的屏幕閱讀器技術(shù)已轉(zhuǎn)變?yōu)樽R(shí)別標(biāo)簽的底層代碼，無需借助這種形式了。所以從這點(diǎn)來看要求標(biāo)簽帶冒號(hào)已經(jīng)站不住腳了。

那從情感角度分析標(biāo)簽帶冒號(hào)的是否對(duì)用戶體驗(yàn)有影響呢？

回到最開頭，我和同事們的爭(zhēng)辯……

先簡(jiǎn)潔說下答案，無任何影響！

在《Web表單設(shè)計(jì)·創(chuàng)建高可用性的網(wǎng)頁表單》中，（卡羅琳·賈雷特）曾經(jīng)做過大量的表單測(cè)試，最終證明從未有一名用戶談?wù)撁疤?hào)是否消失，即使是有些在其他環(huán)境中很介意標(biāo)點(diǎn)符號(hào)的人好像在線上表單中也未曾留意到。

從以上兩個(gè)角度不難發(fā)覺，無論是從技術(shù)進(jìn)展還是情感體驗(yàn)，都證明可不必要求表單帶冒號(hào)；由于可用性訪問清單不再有這樣的要求，用戶討論也證明幾乎沒有人會(huì)留意表單冒號(hào)是否消失。

這樣的結(jié)論，看似表單帶冒號(hào)是失敗了……但這并不阻礙它作為一種習(xí)慣或傳統(tǒng)連續(xù)至今，無論在客戶端還是Web設(shè)計(jì)系統(tǒng)中仍舊常見。例如：蘋果電腦的Mac系統(tǒng)，國內(nèi)阿里的AntDesignWeb設(shè)計(jì)系統(tǒng)。

因此，得到以下幾點(diǎn)建議：

假如你盼望自己的網(wǎng)頁表單與流行的桌面環(huán)境保持全都，請(qǐng)使用冒號(hào)。假如你已有大量使用冒號(hào)的表單，請(qǐng)保持連續(xù)使用下去。假如你在建立一個(gè)新的系統(tǒng)，你也可以干脆拋硬幣打算，不過要嚴(yán)格遵循一種方法。

1）優(yōu)勢(shì)

最利于削減表單填寫時(shí)間（標(biāo)簽和輸入框位置最為靠近）；用戶視線固定，動(dòng)線始終向下（清楚的完成路徑）；節(jié)約大量橫向空間（可用于以多種方式組合的相關(guān)輸入框）。

2）劣勢(shì)

占用額外的垂直空間（假如可供應(yīng)使用的垂直屏幕空間較小，應(yīng)當(dāng)謹(jǐn)慎使用頂對(duì)齊標(biāo)簽）；建議使用輸入框50%至75%的高度作為相鄰輸入框間距。

3）適用場(chǎng)景

盼望用戶快速填寫表單，完成任務(wù)；同時(shí)，當(dāng)輸入項(xiàng)存在主次之分時(shí)，對(duì)標(biāo)簽擴(kuò)展性要求高。

1）優(yōu)勢(shì)

標(biāo)簽與輸入框相鄰（便利快速填寫）。

2）劣勢(shì)

右對(duì)齊布局造成左側(cè)不齊，影響了快速巡游表單的效率問題；若標(biāo)簽文字寬度變寬，右對(duì)齊還存在敏捷度問題。

3）適用場(chǎng)景

既要削減垂直空間，又要加快填寫速度的場(chǎng)景。

1）優(yōu)勢(shì)

簡(jiǎn)單巡游標(biāo)簽；占用垂直空間較少。

2）劣勢(shì)

標(biāo)簽和輸入框的相鄰間距增大；適合于用戶不熟識(shí)表單要收集的數(shù)據(jù)或問題無法分成易處理的內(nèi)容組，左對(duì)齊標(biāo)簽巡游表單問題會(huì)更簡(jiǎn)單。用戶只要上上下下閱讀標(biāo)簽左欄，不會(huì)被輸入框打斷。

3）適用場(chǎng)景

表單中存在較多的簡(jiǎn)單或敏感信息，盼望用戶放慢速度、認(rèn)真思索（在一些注冊(cè)類表單中較多使用）。

單從效率角度看，頂對(duì)齊標(biāo)簽右對(duì)齊左對(duì)齊，但是依據(jù)應(yīng)用場(chǎng)景，效率快并不是我們選擇標(biāo)簽對(duì)齊方式的唯一的指標(biāo)。

因此，得到以下幾點(diǎn)建議。

假如你盼望用戶放慢速度，認(rèn)真思索表單中每個(gè)表單項(xiàng)，左對(duì)齊標(biāo)簽是個(gè)好選擇，特殊是含有大量可選輸入框或高級(jí)設(shè)置的生疏數(shù)據(jù)時(shí)。

而頂對(duì)齊標(biāo)簽在一些國際化產(chǎn)品的表單設(shè)計(jì)時(shí)，會(huì)有更好的延展性。

至于，右對(duì)齊標(biāo)簽雖然與表單域聯(lián)系緊密，便于用戶填寫，但是要考慮好標(biāo)簽的長短不齊如何解決。能否精簡(jiǎn)標(biāo)簽內(nèi)容，以及確定好表單與界面的邊距。

先簡(jiǎn)潔回答：是確定的，用戶有時(shí)需要通過必填標(biāo)記來評(píng)估工作量，了解輸入信息量的最低限度。我會(huì)在下面詳細(xì)解釋緣由。

你可能會(huì)問：默認(rèn)值不是用戶想要的，誤導(dǎo)用戶怎么辦？

在設(shè)計(jì)有默認(rèn)值的表單域時(shí)，你要思索默認(rèn)值是否是大多數(shù)用戶可以接受的答案，假如不確信可以先去做一下用戶調(diào)研，了解用戶的心聲。

就算默認(rèn)值真的不是用戶想要的，至少你也為他供應(yīng)了一個(gè)示例來告知用戶答案應(yīng)當(dāng)是什么樣子的。這一點(diǎn)也可以節(jié)約用戶幾秒的思索時(shí)間——或避開一條錯(cuò)誤信息。

但并不代表全部的表單域都要給出默認(rèn)值，我們只是盡可能的讓用戶節(jié)約時(shí)間。

如何使用：

在第一次向用戶顯示表單時(shí)，用一個(gè)合理的默認(rèn)值預(yù)先填寫文本框、組合框或者其他控件。也可以使用用戶之前供應(yīng)給應(yīng)用的信息來動(dòng)態(tài)地給出默認(rèn)值（例：通過身份證自動(dòng)識(shí)別誕生日期；利用郵編，推導(dǎo)出對(duì)應(yīng)省/市）。

假如只是由于你覺得不應(yīng)當(dāng)留下空白的輸入域，那么不要使用默認(rèn)模式。只有當(dāng)你有理由確信絕大部分用戶，在絕大多數(shù)狀況下，不會(huì)修改這個(gè)取值時(shí)才供應(yīng)默認(rèn)值——否則，這將會(huì)給用戶帶來額外的工作！

表現(xiàn)形式要為用戶填寫供應(yīng)有用線索，采納不同長度的文本框供應(yīng)了示意；這種示意是一種有用線索，當(dāng)輸入框長度長短不定時(shí)，用戶會(huì)很自然地思索為什么這樣；填寫輸入框時(shí)會(huì)自然考慮這些線索。

請(qǐng)留意！保證示意效果的同時(shí)，不要設(shè)定太多的寬度，反而會(huì)讓表單顯得凌亂；太少又會(huì)讓表單看起來都像四四方方的盒子。最佳方法是找到適合產(chǎn)品的最佳模度值和數(shù)量。

什么是模度值和數(shù)量呢！

落在詳細(xì)設(shè)計(jì)上要先梳理產(chǎn)品中常見的表單類型，然后設(shè)置一個(gè)默認(rèn)寬度。以此為基礎(chǔ)來有規(guī)律的增加長度，并考慮清晰它們的適用場(chǎng)景；從而定義出不同的模度，最終制定出干凈有序的模度規(guī)范。這樣就可以讓一線的設(shè)計(jì)師們跳過部分繁瑣磨人的細(xì)節(jié)思索，快速搭建出合適的表單寬度并合理有效。

六、結(jié)語

本篇文章更多是從表單設(shè)計(jì)中的一些冷門內(nèi)容，即易忽視的一些設(shè)計(jì)點(diǎn)在綻開爭(zhēng)論，利用問題加案例的形式對(duì)表單設(shè)計(jì)進(jìn)行剝離拆解，沒有系統(tǒng)地、成本成套的來分析表單的構(gòu)成和交互細(xì)節(jié)等等。由于這類內(nèi)容講的