表單的目的、內容、大小長度等雖然各不相同，但基本元素比較固定；合理組織這些元素有助于用戶輕松完成表單填寫。

Amazon創建賬戶表單解析

i. 標題：這個元素幫助用戶引導完成表單填寫的整個過程，當你把信息分成很多組來讓用戶填寫的時候，標題就特別有用。例如：個人資料、職業詳情、財務明細。

ii. 標簽：標簽告訴用戶在任何特定的輸入區域期望他們填寫什么內容。

iii. 占位符 ：占位符是對標簽進行額外的信息描述。

iv. 錯誤信息提示：錯誤信息提示給予用戶錯誤反饋，提醒用戶為什么填錯了。

v. 動作按鈕：動作按鈕是在表單的結尾，有個確認提交的動作控件。

表單狀態

基本上，表單在用戶的交互過程中需要經歷三個階段。

i. 默認狀態：用戶在未進行任何操作前表單的狀態。

ii. 聚焦狀態：這個狀態強調用戶正在填寫的區域，幫助用戶聚焦和減少反復掃描屏幕的時間。

ii. 反饋狀態：反饋狀態是指用戶收到的反饋時的頁面狀態(大多數是指錯誤信息反饋)。有時候，有時候對于上一個輸入信息的反饋在用戶聚焦到下一個填寫區域時就會顯示。然而，如果數據不能得到立即驗證的話，就要等到用戶點擊提交按鈕后再給予反饋提示。

Amazon創建賬戶表單的“默認、聚焦、反饋”頁面狀態

最佳實踐

1. 保持簡潔

讓你的表單保持簡短精煉，只保留最有必要的數據，避免以驗證的名義讓用戶重復輸入，例如不要重復密碼字段，取而代之的是要讓用戶直接看到他們輸入的密碼。

2. 使用及時驗證

當給予用戶輸入進行報錯時，最好將反饋定位到具體位置。

Facebook和Amazon采用了兩種不同的驗證反饋方式

3. 將相近的字段打組

將相關信息進行分組并按照常見規則排序很重要。這樣的話可以幫助用戶減少認知負荷和注意力消耗。

付款頁面相近的功能區域被適當地分組

4. 將標簽左對齊

要將標簽放置到輸入框上面（像上面所解析的Amazon的表單一樣）。不要把占位符文字作為輸入框的標簽，那樣的話用戶輸入完成后將看不到標簽，用戶將很難對已輸入的內容做最終的核對，會讓他們思考很多。

始終將標簽放置在輸入框上面并左對齊，有一個很全面的研究報告來說明這是高效率的做法。（詳見鏈接https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php）

5. 輸入區域與內容類型或尺寸相匹配

簡單地說，要保證輸入字段的長度與預期的輸入類型相匹配，例如：地址就要比郵政編碼長。

Flutterwave’s Rave的登錄頁面，輸入區域的尺寸與預期的輸入字段的長度比例一致

payporte的輸入區域與預期的輸入字段的長度比例不匹配

6. CTA（call to action）按鈕

在表單的末尾通常會有個確認按鈕或者下一步按鈕，在有些場景下，必須有一個以上的按鈕。要強調主要的按鈕，弱化次要按鈕。

Amazon的主要次要按鈕處理的很好

當運用模態彈窗進行信息收集時（表單在模態彈窗上），那么次要按鈕有時候就是關閉按鈕，另一種弱化它的方法就是使用X icon代替關閉按鈕，如下所示。

Medium的登錄模態彈窗使用X icon 來代表關閉按鈕

7. 搜索區域

不要隱藏你的搜索框，特別是你的網站內有大量內容時，搜索或許是最好的選擇。

Amazon的搜索框特別的顯眼

當用戶執行了搜索操作后并顯示了搜索結果，不要立即清除搜索框內的內容，以便讓可以用戶很容易地去回顧他起初所搜索的內容。

Medium沒有清除搜索后的輸入內容

8. 清晰

給用戶傳達清楚的信息，給予他們所預期的，不要模棱兩可。沒有人喜歡填寫表單，沒有人愿意填寫兩遍。

Cowrywise的標簽內容非常的清晰，甚至按鈕的文字都描述得很好

本文所有的案例既不是廣告，也沒有貶義，僅用于學習。

原文地址：blog.prototypr

譯文地址：點融設計中心DDC

原文作者：Momoh Silm

譯文作者：孫夢超

#p#副標題#e#

創建表單時，交互設計師總是會面臨一個選擇，選用哪種UI元素來表示可選項的操作。當然，我們每個人都有自己的法則。但是，在選用可選項控件時，仍然要多加考慮。

可選項可以用勾選框、開關、單選框和下拉菜單表示。選擇得當的話，任何一種都非常出色。本文中，我們重點關注勾選框和開關。

勾選框

勾選框用在一系列選項中，用戶可以選擇任意數量，包括0個、1個，或者許多個。換言之，每個勾選框在列表中都是相互獨立的，勾上一個框并不會取消其他選項。

帶有標簽的勾選框

開關

開關組件是在仿照物理開關，讓用戶打開或關閉某個項目。

開關提供了兩種簡單直接的對立選項

開關組件通常用于表現一個動作（例如開始或停止某個操作）。它類似于電燈開關：

開關通常用在電燈開關上

勾選框和開關的最佳實踐

使用標準的視覺表現

勾選框應當是一個小方框，選中時有一個勾，或者一個叉。

選中和未選中的勾選框組件。圖片來源：Material Design

開關應當看起來有開和關的狀態

選中和未選中狀態的開關組件。圖片來源：Material Design

用戶在操作各種控件時，應當提供清晰的視覺反饋。細微的動畫能讓體驗更細致——在移動應用中尤其如此，

iOS7/8的開關按鈕。來源：Dribbble

縱向排列列表

縱向展示列表，每行一個選項。這對于開關和勾選框都有效。如果一定要橫向排列，一行有多個選項，就要調整好按鈕和標簽的距離，哪個選項對應哪個標簽清晰明了。下面的例子中，元素之間的距離都太近了。

很難確定選項4對應的到底是哪個選框

開關的當前狀態應該在控件外面

設計開關時，你應該避免狀態和操作的歧義。我們以iOS6的開關設計為例，注意看寫著ON的藍色狀態按鈕。

并不能確定標簽（例子中是“ON”）是指當前狀態，還是按下的操作

你能判斷按鈕當前是開著的嗎，或者拖動滑塊、點擊、點按時會開啟？“ON”在這里是個狀態（名詞）還是動作（動詞）？并不清楚。

不應該讓用戶感到困惑，區分出操作和狀態非常重要。實際上，高亮顯示當前狀態，能夠讓它更加友好。

文字顏色表明了現在的狀態（亮起的是ON）

勾選框使用肯定的文案

使用肯定、有效的文案作為勾選框的標簽，用戶就很清楚如果勾上選框會發生什么。避免“不要給我發郵件”這樣的否定文案，這就意味著用戶要勾上選框來阻止某些事發生。

勾選框永遠都應該使用肯定的指令，不能用否定文案，例如“請勿……”

勾選框使用Label標簽，增大操作區域

所有的勾選框都有標簽，但并非都使用label標簽。勾選框本質上很小，但是根據費茨定律，它們就很難點擊或者點按。要增大操作區域，讓用戶在點擊或點按標簽與相關文字時就能選中選項，而不僅僅是那個小方框。

讓用戶通過點擊方框或它的標簽來選中選項

勾選框只用來改變設置，不能作為操作按鈕

作為一個二元選擇，勾選框和開關的主要區別，是勾選框是狀態，而開關是操作。如果一個操作適合用物理開關表示，那么開關可能就是最適合的控件。

下面的例子很明顯，在開關中，無線網絡是開著的。但在勾選框里，用戶還需要思考無線網絡是否開啟，是否需要勾選這個框來開啟無線網絡。

用開關來開啟或關閉服務或硬件組成，例如WIFI

勾選框和開關的提交操作

勾選框的操作可以延后（例如作為表單的一部分），但開關的操作應當立即觸發。

良好的用戶體驗，是立即改變開關對應的設置項，而不是點按了“保存”或返回上個界面之后才保存。我們在現實生活中對開關的期望就是如此（例如我們知道，按下開關燈立刻就亮了）。

iOS中的開啟WIFI

當用戶必須執行額外步驟才能讓改變生效時，使用勾選框。

當用戶必須點擊“提交”或“下一步”按鈕，修改才能生效時，選用勾選框

結論

設計界面時，交互元素的選擇要保持一致、可預期。遵循設計標準，能讓用戶更好預測控件的功能、如何操作。相反，違背標準會讓界面感覺很脆弱——好像會毫無預兆發生任何事情。

非常感謝！

原文鏈接：http://babich.biz/checkbox-and-toggle/

譯文鏈接：http://colachan.com/post/3510

作者信息：
Nick Babich

1、表單應該排成一列

多列排布會分散用戶的豎向注意力

2、標簽頂部對齊

相比使用左對齊的標簽，使用頂部對齊的標簽后，更高比例的用戶會完成表單的填寫；頂部對齊的方式也更適用于小屏幕的手機。不過，在面臨多選項多數據的輸入時，盡量還是考慮左對齊標簽，這樣用戶更容易一起瀏覽，

3、將標簽跟輸入框作為綁定的一組

把標簽和輸入框靠在一起，相鄰輸入框間設置合適的距離避免用戶困惑

4、避免全部大寫

全部大寫的標簽會造成閱讀和瀏覽上的困難

5、如果可選項少于6個，全部顯示出來

若將選項隱藏至下拉列表中，用戶需要執行兩次點擊才能完成選擇；這種方法最好在選項數量多于5個時再去使用，當數量甚至超過25個時，最好將搜索也融入其中

6、避免使用占位文本作為標簽

使用占位文本確實能優化屏幕空間的利用，但其會帶來一些可用性問題，詳見這里：https://www.nngroup.com/articles/form-design-placeholders/

7、將復選框（或單選按鈕組）垂直排列

將復選框垂直排列易于閱讀

8、使“行為召喚”類按鈕具有描述性

一個行為召喚類按鈕應該描述其目標意圖

9、在行內指明錯誤

在錯誤發生的地方告訴用戶，并指明原因

10、在用戶完成輸入后再執行行內校驗（除非在輸入過程中執行有用）

用戶輸入過程中不要使用行內校驗——除非確實能幫到用戶——比如在設置密碼、用戶名過程中字符長度唱超過限制時

11、不要隱藏基本的幫助文本

要盡可能顯示出基本的幫助文本。對于復雜的幫助文本，可以考慮在輸入框獲得焦點后將其放置于輸入框旁邊

12、主要選項和輔助選項要做區分

關于是否應該顯示輔助選項甚至在哲學界引發了一場很大的爭論

13、使用合適的輸入框長度

輸入框的長度應該令用戶可預見能夠輸入的字符長度，面對有明確長度邊界的字段時（比如手機號、郵編），最好這樣做

14、避開使用*，標示出可選項

用戶并不總是知道標簽后的*暗示什么，還是最好將可選項標示出來

15、將關聯信息分組顯示

批量性的長表單通常令用戶無法忍受，通過將相關信息分成合理的一組，用戶能夠更快的理解表單元素間的關聯
 

譯／三達不留點gpj

原文鏈接：https://uxdesign.cc/design-better-forms-96fadca0f49c#.q9x1ddl3n

　　“輸入框表單元素應該合理分布，以便于使你的大腦可以處理表單框架和與之相關的頁面區域”選自文章《HTML: the Definitive Guide》

　　工作中可能會遇到的問題，我們通過如下圖示分析一下“標簽”和“表單”的關系：

#p#副標題#e#

　　一般會應用到的視覺元素：

　　對于上面提到的“左對齊方式”（便于瀏覽標簽并減少屏幕空間），我們可以嘗試規避其缺點即標簽和表單框之間的距離過遠。其中一個有效的方式就是增加不同的背景色，但是這樣會在布局中增加很多視覺元素大約15個包括：橫線，每一個背景色框和豎線，這些會擾亂我們的視線并忽視最重要的信息，正如Edward Tufte 所說“信息由不用性元素組成但同時也帶來了差異性”。

　　當然也不是說這種方式就不能用了，主要選用淡淡的底色或橫線還是可以的，比較理想的方式如圖：

#p#副標題#e#

　　主按鈕和次按鈕

　　主按鈕一般是“提交”“保存”操作比其他按鈕重要，需要重點提示象明亮色、背景色、加粗。一般與文本輸入框上下對齊。相反如“返回”等次要按鈕就要減弱其視覺提示。

　　綜上所述只是初步建議，最好還要經過測試，數據分析（完成率，錯誤等等）。