表單的目的、內(nèi)容、大小長度等雖然各不相同，但基本元素比較固定；合理組織這些元素有助于用戶輕松完成表單填寫。
Amazon創(chuàng)建賬戶表單解析
i. 標(biāo)題：這個元素幫助用戶引導(dǎo)完成表單填寫的整個過程，當(dāng)你把信息分成很多組來讓用戶填寫的時候，標(biāo)題就特別有用。例如：個人資料、職業(yè)詳情、財務(wù)明細(xì)。
ii. 標(biāo)簽：標(biāo)簽告訴用戶在任何特定的輸入?yún)^(qū)域期望他們填寫什么內(nèi)容。
iii. 占位符 ：占位符是對標(biāo)簽進(jìn)行額外的信息描述。
iv. 錯誤信息提示：錯誤信息提示給予用戶錯誤反饋，提醒用戶為什么填錯了。
v. 動作按鈕：動作按鈕是在表單的結(jié)尾，有個確認(rèn)提交的動作控件。
表單狀態(tài)
基本上，表單在用戶的交互過程中需要經(jīng)歷三個階段。
i. 默認(rèn)狀態(tài)：用戶在未進(jìn)行任何操作前表單的狀態(tài)。
ii. 聚焦?fàn)顟B(tài)：這個狀態(tài)強(qiáng)調(diào)用戶正在填寫的區(qū)域，幫助用戶聚焦和減少反復(fù)掃描屏幕的時間。
ii. 反饋狀態(tài)：反饋狀態(tài)是指用戶收到的反饋時的頁面狀態(tài)(大多數(shù)是指錯誤信息反饋)。有時候，有時候?qū)τ谏弦粋€輸入信息的反饋在用戶聚焦到下一個填寫區(qū)域時就會顯示。然而，如果數(shù)據(jù)不能得到立即驗(yàn)證的話，就要等到用戶點(diǎn)擊提交按鈕后再給予反饋提示。
Amazon創(chuàng)建賬戶表單的“默認(rèn)、聚焦、反饋”頁面狀態(tài)
最佳實(shí)踐
1. 保持簡潔
讓你的表單保持簡短精煉，只保留最有必要的數(shù)據(jù)，避免以驗(yàn)證的名義讓用戶重復(fù)輸入，例如不要重復(fù)密碼字段，取而代之的是要讓用戶直接看到他們輸入的密碼。
2. 使用及時驗(yàn)證
當(dāng)給予用戶輸入進(jìn)行報錯時，最好將反饋定位到具體位置。
Facebook和Amazon采用了兩種不同的驗(yàn)證反饋方式
3. 將相近的字段打組
將相關(guān)信息進(jìn)行分組并按照常見規(guī)則排序很重要。這樣的話可以幫助用戶減少認(rèn)知負(fù)荷和注意力消耗。
付款頁面相近的功能區(qū)域被適當(dāng)?shù)胤纸M
4. 將標(biāo)簽左對齊
要將標(biāo)簽放置到輸入框上面（像上面所解析的Amazon的表單一樣）。不要把占位符文字作為輸入框的標(biāo)簽，那樣的話用戶輸入完成后將看不到標(biāo)簽，用戶將很難對已輸入的內(nèi)容做最終的核對，會讓他們思考很多。
始終將標(biāo)簽放置在輸入框上面并左對齊，有一個很全面的研究報告來說明這是高效率的做法。（詳見鏈接https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php）
5. 輸入?yún)^(qū)域與內(nèi)容類型或尺寸相匹配
簡單地說，要保證輸入字段的長度與預(yù)期的輸入類型相匹配，例如：地址就要比郵政編碼長。
Flutterwave’s Rave的登錄頁面，輸入?yún)^(qū)域的尺寸與預(yù)期的輸入字段的長度比例一致
payporte的輸入?yún)^(qū)域與預(yù)期的輸入字段的長度比例不匹配
6. CTA（call to action）按鈕
在表單的末尾通常會有個確認(rèn)按鈕或者下一步按鈕，在有些場景下，必須有一個以上的按鈕。要強(qiáng)調(diào)主要的按鈕，弱化次要按鈕。
Amazon的主要次要按鈕處理的很好
當(dāng)運(yùn)用模態(tài)彈窗進(jìn)行信息收集時（表單在模態(tài)彈窗上），那么次要按鈕有時候就是關(guān)閉按鈕，另一種弱化它的方法就是使用X icon代替關(guān)閉按鈕，如下所示。
Medium的登錄模態(tài)彈窗使用X icon 來代表關(guān)閉按鈕
7. 搜索區(qū)域
不要隱藏你的搜索框，特別是你的網(wǎng)站內(nèi)有大量內(nèi)容時，搜索或許是最好的選擇。
Amazon的搜索框特別的顯眼
當(dāng)用戶執(zhí)行了搜索操作后并顯示了搜索結(jié)果，不要立即清除搜索框內(nèi)的內(nèi)容，以便讓可以用戶很容易地去回顧他起初所搜索的內(nèi)容。
Medium沒有清除搜索后的輸入內(nèi)容
8. 清晰
給用戶傳達(dá)清楚的信息，給予他們所預(yù)期的，不要模棱兩可。沒有人喜歡填寫表單，沒有人愿意填寫兩遍。
Cowrywise的標(biāo)簽內(nèi)容非常的清晰，甚至按鈕的文字都描述得很好
本文所有的案例既不是廣告，也沒有貶義，僅用于學(xué)習(xí)。
原文地址：blog.prototypr
譯文地址：點(diǎn)融設(shè)計中心DDC
原文作者：Momoh Silm
譯文作者：孫夢超
]]>
]]>
創(chuàng)建表單時，交互設(shè)計師總是會面臨一個選擇，選用哪種UI元素來表示可選項(xiàng)的操作。當(dāng)然，我們每個人都有自己的法則。但是，在選用可選項(xiàng)控件時，仍然要多加考慮。
可選項(xiàng)可以用勾選框、開關(guān)、單選框和下拉菜單表示。選擇得當(dāng)?shù)脑挘魏我环N都非常出色。本文中，我們重點(diǎn)關(guān)注勾選框和開關(guān)。
勾選框
勾選框用在一系列選項(xiàng)中，用戶可以選擇任意數(shù)量，包括0個、1個，或者許多個。換言之，每個勾選框在列表中都是相互獨(dú)立的，勾上一個框并不會取消其他選項(xiàng)。
帶有標(biāo)簽的勾選框
開關(guān)
開關(guān)組件是在仿照物理開關(guān)，讓用戶打開或關(guān)閉某個項(xiàng)目。
開關(guān)提供了兩種簡單直接的對立選項(xiàng)
開關(guān)組件通常用于表現(xiàn)一個動作（例如開始或停止某個操作）。它類似于電燈開關(guān)：
開關(guān)通常用在電燈開關(guān)上
勾選框和開關(guān)的最佳實(shí)踐
使用標(biāo)準(zhǔn)的視覺表現(xiàn)
勾選框應(yīng)當(dāng)是一個小方框，選中時有一個勾，或者一個叉。
選中和未選中的勾選框組件。圖片來源：Material Design
開關(guān)應(yīng)當(dāng)看起來有開和關(guān)的狀態(tài)
選中和未選中狀態(tài)的開關(guān)組件。圖片來源：Material Design
用戶在操作各種控件時，應(yīng)當(dāng)提供清晰的視覺反饋。細(xì)微的動畫能讓體驗(yàn)更細(xì)致——在移動應(yīng)用中尤其如此，
iOS7/8的開關(guān)按鈕。來源：Dribbble
縱向排列列表
縱向展示列表，每行一個選項(xiàng)。這對于開關(guān)和勾選框都有效。如果一定要橫向排列，一行有多個選項(xiàng)，就要調(diào)整好按鈕和標(biāo)簽的距離，哪個選項(xiàng)對應(yīng)哪個標(biāo)簽清晰明了。下面的例子中，元素之間的距離都太近了。
很難確定選項(xiàng)4對應(yīng)的到底是哪個選框
開關(guān)的當(dāng)前狀態(tài)應(yīng)該在控件外面
設(shè)計開關(guān)時，你應(yīng)該避免狀態(tài)和操作的歧義。我們以iOS6的開關(guān)設(shè)計為例，注意看寫著ON的藍(lán)色狀態(tài)按鈕。
并不能確定標(biāo)簽（例子中是“ON”）是指當(dāng)前狀態(tài)，還是按下的操作
你能判斷按鈕當(dāng)前是開著的嗎，或者拖動滑塊、點(diǎn)擊、點(diǎn)按時會開啟？“ON”在這里是個狀態(tài)（名詞）還是動作（動詞）？并不清楚。
不應(yīng)該讓用戶感到困惑，區(qū)分出操作和狀態(tài)非常重要。實(shí)際上，高亮顯示當(dāng)前狀態(tài)，能夠讓它更加友好。
文字顏色表明了現(xiàn)在的狀態(tài)（亮起的是ON）
勾選框使用肯定的文案
使用肯定、有效的文案作為勾選框的標(biāo)簽，用戶就很清楚如果勾上選框會發(fā)生什么。避免“不要給我發(fā)郵件”這樣的否定文案，這就意味著用戶要勾上選框來阻止某些事發(fā)生。
勾選框永遠(yuǎn)都應(yīng)該使用肯定的指令，不能用否定文案，例如“請勿……”
勾選框使用Label標(biāo)簽，增大操作區(qū)域
所有的勾選框都有標(biāo)簽，但并非都使用label標(biāo)簽。勾選框本質(zhì)上很小，但是根據(jù)費(fèi)茨定律，它們就很難點(diǎn)擊或者點(diǎn)按。要增大操作區(qū)域，讓用戶在點(diǎn)擊或點(diǎn)按標(biāo)簽與相關(guān)文字時就能選中選項(xiàng)，而不僅僅是那個小方框。
讓用戶通過點(diǎn)擊方框或它的標(biāo)簽來選中選項(xiàng)
勾選框只用來改變設(shè)置，不能作為操作按鈕
作為一個二元選擇，勾選框和開關(guān)的主要區(qū)別，是勾選框是狀態(tài)，而開關(guān)是操作。如果一個操作適合用物理開關(guān)表示，那么開關(guān)可能就是最適合的控件。
下面的例子很明顯，在開關(guān)中，無線網(wǎng)絡(luò)是開著的。但在勾選框里，用戶還需要思考無線網(wǎng)絡(luò)是否開啟，是否需要勾選這個框來開啟無線網(wǎng)絡(luò)。
用開關(guān)來開啟或關(guān)閉服務(wù)或硬件組成，例如WIFI
勾選框和開關(guān)的提交操作
勾選框的操作可以延后（例如作為表單的一部分），但開關(guān)的操作應(yīng)當(dāng)立即觸發(fā)。
良好的用戶體驗(yàn)，是立即改變開關(guān)對應(yīng)的設(shè)置項(xiàng)，而不是點(diǎn)按了“保存”或返回上個界面之后才保存。我們在現(xiàn)實(shí)生活中對開關(guān)的期望就是如此（例如我們知道，按下開關(guān)燈立刻就亮了）。
iOS中的開啟WIFI
當(dāng)用戶必須執(zhí)行額外步驟才能讓改變生效時，使用勾選框。
當(dāng)用戶必須點(diǎn)擊“提交”或“下一步”按鈕，修改才能生效時，選用勾選框
結(jié)論
設(shè)計界面時，交互元素的選擇要保持一致、可預(yù)期。遵循設(shè)計標(biāo)準(zhǔn)，能讓用戶更好預(yù)測控件的功能、如何操作。相反，違背標(biāo)準(zhǔn)會讓界面感覺很脆弱——好像會毫無預(yù)兆發(fā)生任何事情。
非常感謝！
原文鏈接：http://babich.biz/checkbox-and-toggle/
譯文鏈接：http://colachan.com/post/3510
作者信息：
Nick Babich
1、表單應(yīng)該排成一列
多列排布會分散用戶的豎向注意力
2、標(biāo)簽頂部對齊
相比使用左對齊的標(biāo)簽，使用頂部對齊的標(biāo)簽后，更高比例的用戶會完成表單的填寫；頂部對齊的方式也更適用于小屏幕的手機(jī)。不過，在面臨多選項(xiàng)多數(shù)據(jù)的輸入時，盡量還是考慮左對齊標(biāo)簽，這樣用戶更容易一起瀏覽，
3、將標(biāo)簽跟輸入框作為綁定的一組
把標(biāo)簽和輸入框靠在一起，相鄰輸入框間設(shè)置合適的距離避免用戶困惑
4、避免全部大寫
全部大寫的標(biāo)簽會造成閱讀和瀏覽上的困難
5、如果可選項(xiàng)少于6個，全部顯示出來
若將選項(xiàng)隱藏至下拉列表中，用戶需要執(zhí)行兩次點(diǎn)擊才能完成選擇；這種方法最好在選項(xiàng)數(shù)量多于5個時再去使用，當(dāng)數(shù)量甚至超過25個時，最好將搜索也融入其中
6、避免使用占位文本作為標(biāo)簽
使用占位文本確實(shí)能優(yōu)化屏幕空間的利用，但其會帶來一些可用性問題，詳見這里：https://www.nngroup.com/articles/form-design-placeholders/
7、將復(fù)選框（或單選按鈕組）垂直排列
將復(fù)選框垂直排列易于閱讀
8、使“行為召喚”類按鈕具有描述性
一個行為召喚類按鈕應(yīng)該描述其目標(biāo)意圖
9、在行內(nèi)指明錯誤
在錯誤發(fā)生的地方告訴用戶，并指明原因
10、在用戶完成輸入后再執(zhí)行行內(nèi)校驗(yàn)（除非在輸入過程中執(zhí)行有用）
用戶輸入過程中不要使用行內(nèi)校驗(yàn)——除非確實(shí)能幫到用戶——比如在設(shè)置密碼、用戶名過程中字符長度唱超過限制時
11、不要隱藏基本的幫助文本
要盡可能顯示出基本的幫助文本。對于復(fù)雜的幫助文本，可以考慮在輸入框獲得焦點(diǎn)后將其放置于輸入框旁邊
12、主要選項(xiàng)和輔助選項(xiàng)要做區(qū)分
關(guān)于是否應(yīng)該顯示輔助選項(xiàng)甚至在哲學(xué)界引發(fā)了一場很大的爭論
13、使用合適的輸入框長度
輸入框的長度應(yīng)該令用戶可預(yù)見能夠輸入的字符長度，面對有明確長度邊界的字段時（比如手機(jī)號、郵編），最好這樣做
14、避開使用*，標(biāo)示出可選項(xiàng)
用戶并不總是知道標(biāo)簽后的*暗示什么，還是最好將可選項(xiàng)標(biāo)示出來
15、將關(guān)聯(lián)信息分組顯示
批量性的長表單通常令用戶無法忍受，通過將相關(guān)信息分成合理的一組，用戶能夠更快的理解表單元素間的關(guān)聯(lián)
原文鏈接：https://uxdesign.cc/design-better-forms-96fadca0f49c#.q9x1ddl3n
]]>“輸入框表單元素應(yīng)該合理分布，以便于使你的大腦可以處理表單框架和與之相關(guān)的頁面區(qū)域”選自文章《HTML: the Definitive Guide》
工作中可能會遇到的問題，我們通過如下圖示分析一下“標(biāo)簽”和“表單”的關(guān)系：
]]>