關(guān)注互聯(lián)網(wǎng)咒循，關(guān)注硅谷堂扶踊。想了解更多關(guān)于互聯(lián)網(wǎng)崗位知識的信息裙盾，關(guān)注微信公眾號：硅谷堂（ID：guigutang）或下載“硅谷堂”APP实胸。
無論是注冊網(wǎng)站還是內(nèi)容輸入他嫡，總是回避不了表單這種UI控件。
表單幾乎是每一個數(shù)字產(chǎn)品都無法規(guī)避的組成部分庐完，它的作用近乎無可替代钢属。
不過，表單這種控件應用范疇極為廣泛门躯，應用情況牽涉到方方面面淆党，所以請注意，今天的文章里我們所提及的設計準則都只是一般準則讶凉，每一種其實都有例外的情況染乌。不過作為一般準則，它們可以很好地引導你設計出一個可用性極佳的表單懂讯，同時荷憋，作為設計師的你還需要根據(jù)實際情況，靈活地調(diào)整細節(jié)域醇。
接下來台谊，我們一起來看看這些準則都包含了哪些內(nèi)容吧。
盡量使用單列設計
●○●多列的表單容易讓人分心譬挚，無法完全垂直瀏覽一口氣完成填寫锅铅。
頂部標簽對齊
●○●標簽和輸入框縱向排列靠左對齊的設計，比起兩者并排擺放效果更好减宣。一方面盐须，這種設計在桌面端和移動端都足夠友好，另一方面漆腌，這樣的設計可以更好兼容不同類型贼邓、長短的標簽，便于用戶視線的縱向掃視闷尿。不過標簽置于輸入框左邊的設計也有其優(yōu)勢所在：布局更為緊湊塑径，表單長度被壓縮，顯得更短填具，在特定的頁面布局需求下统舀，可能是更好的選擇。
關(guān)聯(lián)標簽和輸入框
●○● 讓相關(guān)聯(lián)的標簽和輸入框更靠近劳景，組成分組誉简，讓不同的分組保持相對大的距離，確保用戶不會產(chǎn)生困惑盟广。
避免字母全大寫
●○●全部字母大寫會不便于閱讀和快速掃視闷串。
低于6個選項就全部展示
●○● 當表單中需要選取不同選項的時候，低于6個選項就不要使用下拉選框來選取了筋量，因為下拉選框需要兩次點擊完成結(jié)果的選擇烹吵，而直接選擇來的更快碉熄。而超過5個選項的時候，選項過多年叮，適合下拉選框的展示形式具被。
避免將標簽作為占位符使用
●○●為了讓布局更緊湊玻募，將標簽作為占位符放置于輸入框內(nèi)是很有誘惑力的做法只损，但是這樣存在一定的可用性問題：讓部分用戶迷惑內(nèi)容已經(jīng)被填寫；點擊輸入的時候占位符消失七咧，有的用戶會忘記輸入內(nèi)容屬性跃惫。
復選框應當縱向排列
●○●縱向排列復選框讓用戶可以更快的掃視內(nèi)容，便于進行選取艾栋。
表述清晰的行為召喚按鈕
●○●行為召喚按鈕中的標簽必須使用簡短而明確的詞匯爆存，讓用戶明確行為的意圖和功能。
指明出錯的內(nèi)容
●○●當用戶填寫內(nèi)容出錯的時候蝗砾，應當指明發(fā)生錯誤的條目先较，以及錯誤的原因。
在用戶填寫完后再驗證
●○● 除了需要在輸入過程中進行實時驗證悼粮，普通的內(nèi)容輸入應當在用戶輸入完成之后再對內(nèi)容的格式闲勺、屬性進行驗證，這些時候盡量避免使用內(nèi)嵌驗證扣猫。
不要隱藏基本的幫助文本
●○●將基本的幫助文本直接展示出來菜循，除非你的幫助文本超過100個單詞，信息量過大申尤。如果幫助文本內(nèi)容過長癌幕，建議置于靠近標簽或者輸入框的地方，光標懸停時展示昧穿。
區(qū)分主要操作和次要操作
●○● 主要操作和次要操作是要進行區(qū)分的勺远，而這個要根據(jù)使用場景和需求來分析和區(qū)分。
讓內(nèi)容長度和輸入框長度對應
●○●輸入框的長度應該同輸入內(nèi)容進行對應时鸵。諸如郵政編碼胶逢、電話號碼和銀行卡號這樣的字段，長度都是固定的寥枝，在設計它們的輸入框的時候宪塔，輸入框的長度是很好確定的。
正確區(qū)分必填字段和選填字段
●○● 用戶有的時候并不知道哪些字段是必須填寫哪些可以不用填寫的 囊拜，通常會使用星號（*）來區(qū)分兩者某筐，但是星號有的時候并不能為用戶理解，所以盡量用文字來標識差異冠跷。
相關(guān)信息分組
●○●過長的表單常常會讓用戶感到煩躁和不知所措南誊，應當根據(jù)特定的邏輯身诺、內(nèi)容屬性將相關(guān)的內(nèi)容分組，強化表單整體的形式感抄囚，用戶覺得更容易填寫表單霉赡，也更容易完成。
本文轉(zhuǎn)自：http://www.uisdc.com/design-better-forms#
譯者：陳子木@微博（http://weibo.com/chenzimu7）
