必考考點(diǎn)！這些表單設(shè)計(jì)的基本準(zhǔn)則你都知道嘛？

2017-12-05 2053 0

表單可能是日常UI設(shè)計(jì)中最常見的設(shè)計(jì)元素了，它廣泛的應(yīng)用范疇、多年來的積淀使得表單設(shè)計(jì)牽涉到大量的、約定俗成的設(shè)計(jì)規(guī)則。今天我們來聊聊這些最常見的表單設(shè)計(jì)準(zhǔn)則~

無論是注冊網(wǎng)站還是內(nèi)容輸入，總是回避不了表單這種UI控件。表單幾乎是每一個數(shù)字產(chǎn)品都無法規(guī)避的組成部分，它的作用近乎無可替代。不過，表單這種控件應(yīng)用范疇極為廣泛，應(yīng)用情況牽涉到方方面面，所以請注意，今天的文章里我們所提及的設(shè)計(jì)準(zhǔn)則都只是一般準(zhǔn)則，每一種其實(shí)都有例外的情況。不過作為一般準(zhǔn)則，它們可以很好地引導(dǎo)你設(shè)計(jì)出一個可用性極佳的表單，同時，作為設(shè)計(jì)師的你還需要根據(jù)實(shí)際情況，靈活地調(diào)整細(xì)節(jié)。

接下來，我們一起來看看這些準(zhǔn)則都包含了哪些內(nèi)容吧。

盡量使用單列設(shè)計(jì)

多列的表單容易讓人分心，無法完全垂直瀏覽一口氣完成填寫。

頂部標(biāo)簽對齊

標(biāo)簽和輸入框縱向排列靠左對齊的設(shè)計(jì)，比起兩者并排擺放效果更好。一方面，這種設(shè)計(jì)在桌面端和移動端都足夠友好，另一方面，這樣的設(shè)計(jì)可以更好兼容不同類型、長短的標(biāo)簽，便于用戶視線的縱向掃視。不過標(biāo)簽置于輸入框左邊的設(shè)計(jì)也有其優(yōu)勢所在：布局更為緊湊，表單長度被壓縮，顯得更短，在特定的頁面布局需求下，可能是更好的選擇。

關(guān)聯(lián)標(biāo)簽和輸入框

讓相互關(guān)聯(lián)的標(biāo)簽和輸入框更加靠近，組成分組，讓不同的分組保持相對較大的距離，確保用戶不會產(chǎn)生迷惑。

避免字母全大寫

全部字母大寫會難于閱讀和快速掃視。

低于6個選項(xiàng)就全部展示

當(dāng)表單中需要選取不同選項(xiàng)的時候，低于6個選項(xiàng)就不要使用下拉選框來選取了，因?yàn)橄吕x框需要兩次點(diǎn)擊完成結(jié)果的選擇，而直接選擇來的更快。而超過5個選項(xiàng)的時候，選項(xiàng)過多，適合下拉選框的展示形式。

避免將標(biāo)簽作為占位符使用

為了讓布局更緊湊，將標(biāo)簽作為占位符放置于輸入框內(nèi)是很有誘惑力的做法，但是這樣存在一定的可用性問題：讓部分用戶迷惑內(nèi)容已經(jīng)被填寫；點(diǎn)擊輸入的時候占位符消失，有的用戶會忘記輸入內(nèi)容屬性。

復(fù)選框應(yīng)當(dāng)縱向排列

縱向排列復(fù)選框讓用戶可以更快的掃視內(nèi)容，便于進(jìn)行選取。

表述清晰的行為召喚按鈕

行為召喚按鈕中的標(biāo)簽必須使用簡短而明確的詞匯，讓用戶明確行為的意圖和功能。

指明出錯的內(nèi)容

當(dāng)用戶填寫內(nèi)容出錯的時候，應(yīng)當(dāng)指明發(fā)生錯誤的條目，以及錯誤的原因。

在用戶填寫完后再驗(yàn)證

除了需要在輸入過程中進(jìn)行實(shí)時驗(yàn)證，普通的內(nèi)容輸入應(yīng)當(dāng)在用戶輸入完成之后再對內(nèi)容的格式、屬性進(jìn)行驗(yàn)證，這些時候盡量避免使用內(nèi)嵌驗(yàn)證。

不要隱藏基本的幫助文本

將基本的幫助文本直接展示出來，除非你的幫助文本超過100個單詞，信息量過大。如果幫助文本內(nèi)容過長，建議置于靠近標(biāo)簽或者輸入框的地方，光標(biāo)懸停時展示。

區(qū)分主要操作和次要操作

主要操作和次要操作是要進(jìn)行區(qū)分的，而這個要根據(jù)使用場景和需求來分析和區(qū)分。

讓內(nèi)容長度和輸入框長度對應(yīng)

輸入框的長度應(yīng)該同輸入內(nèi)容進(jìn)行對應(yīng)。諸如郵政編碼、電話號碼和銀行卡號這樣的字段，長度都是固定的，在設(shè)計(jì)它們的輸入框的時候，輸入框的長度是很好確定的。

正確區(qū)分必填字段和選填字段

用戶有的時候并不知道哪些字段是必須填寫哪些可以不用填寫的，通常會使用星號（*）來區(qū)分兩者，但是星號有的時候并不能為用戶理解，所以盡量用文字來標(biāo)識差異。

值得思考的問題

設(shè)計(jì)師應(yīng)當(dāng)考慮可選字段是否真的必要，并且盡量從更多的渠道搜集數(shù)據(jù)。

用戶數(shù)據(jù)的搜集和錄入日趨完善甚至日益復(fù)雜化。智能設(shè)備本身所搜集的用戶信息越來越多，通過用戶授權(quán)，APP和網(wǎng)頁可以獲取大量不同類型、不同體量的數(shù)據(jù)，這些數(shù)據(jù)還可能來自第三方的帳號，有或者某個其他的APP，這些信息對于產(chǎn)品而言都有巨大的價值，而體現(xiàn)在表單設(shè)計(jì)上最直接的好處，就是用戶可以少填寫很多重復(fù)的信息。

讓表單有趣

時間寶貴，生命短暫，誰想將大量的時間耗費(fèi)在填寫表單上呢？其實(shí)表單的填寫可以更加有趣的，設(shè)計(jì)師可以將情緒、情感通過合理的表單設(shè)計(jì)強(qiáng)化品牌的氣質(zhì)與特征。在不違反上述一般法則的基礎(chǔ)上，設(shè)計(jì)師能做的事情還有很多，為什么不讓表單更有趣呢?