網(wǎng)頁(yè)表單UI設(shè)計(jì)原則

無(wú)論是注冊(cè)網(wǎng)站還是內(nèi)容輸入，總是回避不了表單這種UI控件。表單幾乎是每一個(gè)數(shù)字產(chǎn)品都無(wú)法規(guī)避的組成部分，它的作用近乎無(wú)可替代。不過(guò)，表單這種控件應(yīng)用范疇極為廣泛，應(yīng)用情況牽涉到方方面面，所以請(qǐng)注意，今天的文章里我們所提及的設(shè)計(jì)準(zhǔn)則都只是一般準(zhǔn)則，每一種其實(shí)都有例外的情況。不過(guò)作為一般準(zhǔn)則，它們可以很好地引導(dǎo)你設(shè)計(jì)出一個(gè)可用性極佳的表單，同時(shí)，作為設(shè)計(jì)師的你還需要根據(jù)實(shí)際情況，靈活地調(diào)整細(xì)節(jié)。
接下來(lái)，我們一起來(lái)看看這些準(zhǔn)則都包含了哪些內(nèi)容吧。
1.盡量使用單列設(shè)計(jì)
●○●多列的表單容易讓人分心，無(wú)法完全垂直瀏覽一口氣完成填寫(xiě)。
2.頂部標(biāo)簽對(duì)齊
●○●標(biāo)簽和輸入框縱向排列靠左對(duì)齊的設(shè)計(jì)，比起兩者并排擺放效果更好。一方面，這種設(shè)計(jì)在桌面端和移動(dòng)端都足夠友好，另一方面，這樣的設(shè)計(jì)可以更好兼容不同類(lèi)型、長(zhǎng)短的標(biāo)簽，便于用戶視線的縱向掃視。不過(guò)標(biāo)簽置于輸入框左邊的設(shè)計(jì)也有其優(yōu)勢(shì)所在：布局更為緊湊，表單長(zhǎng)度被壓縮，顯得更短，在特定的頁(yè)面布局需求下，可能是更好的選擇。
3.關(guān)聯(lián)標(biāo)簽和輸入框
●○● 讓相關(guān)聯(lián)的標(biāo)簽和輸入框更靠近，組成分組，讓不同的分組保持相對(duì)大的距離，確保用戶不會(huì)產(chǎn)生困惑。
4.避免字母全大寫(xiě)
●○●全部字母大寫(xiě)會(huì)不便于閱讀和快速掃視。
5.低于6個(gè)選項(xiàng)就全部展示
●○● 當(dāng)表單中需要選取不同選項(xiàng)的時(shí)候，低于6個(gè)選項(xiàng)就不要使用下拉選框來(lái)選取了，因?yàn)橄吕x框需要兩次點(diǎn)擊完成結(jié)果的選擇，而直接選擇來(lái)的更快。而超過(guò)5個(gè)選項(xiàng)的時(shí)候，選項(xiàng)過(guò)多，適合下拉選框的展示形式。
6.避免將標(biāo)簽作為占位符使用
●○●為了讓布局更緊湊，將標(biāo)簽作為占位符放置于輸入框內(nèi)是很有誘惑力的做法，但是這樣存在一定的可用性問(wèn)題：讓部分用戶迷惑內(nèi)容已經(jīng)被填寫(xiě)；點(diǎn)擊輸入的時(shí)候占位符消失，有的用戶會(huì)忘記輸入內(nèi)容屬性。
7.復(fù)選框應(yīng)當(dāng)縱向排列
●○●縱向排列復(fù)選框讓用戶可以更快的掃視內(nèi)容，便于進(jìn)行選取。
8.表述清晰的行為召喚按鈕
●○●行為召喚按鈕中的標(biāo)簽必須使用簡(jiǎn)短而明確的詞匯，讓用戶明確行為的意圖和功能。
9.指明出錯(cuò)的內(nèi)容
●○●當(dāng)用戶填寫(xiě)內(nèi)容出錯(cuò)的時(shí)候，應(yīng)當(dāng)指明發(fā)生錯(cuò)誤的條目，以及錯(cuò)誤的原因。
10.在用戶填寫(xiě)完后再驗(yàn)證
●○● 除了需要在輸入過(guò)程中進(jìn)行實(shí)時(shí)驗(yàn)證，普通的內(nèi)容輸入應(yīng)當(dāng)在用戶輸入完成之后再對(duì)內(nèi)容的格式、屬性進(jìn)行驗(yàn)證，這些時(shí)候盡量避免使用內(nèi)嵌驗(yàn)證。
11.不要隱藏基本的幫助文本
●○●將基本的幫助文本直接展示出來(lái)，除非你的幫助文本超過(guò)100個(gè)單詞，信息量過(guò)大。如果幫助文本內(nèi)容過(guò)長(zhǎng)，建議置于靠近標(biāo)簽或者輸入框的地方，光標(biāo)懸停時(shí)展示。
12.區(qū)分主要操作和次要操作
●○● 主要操作和次要操作是要進(jìn)行區(qū)分的，而這個(gè)要根據(jù)使用場(chǎng)景和需求來(lái)分析和區(qū)分。
13.讓內(nèi)容長(zhǎng)度和輸入框長(zhǎng)度對(duì)應(yīng)
●○●輸入框的長(zhǎng)度應(yīng)該同輸入內(nèi)容進(jìn)行對(duì)應(yīng)。諸如郵政編碼、電話號(hào)碼和銀行卡號(hào)這樣的字段，長(zhǎng)度都是固定的，在設(shè)計(jì)它們的輸入框的時(shí)候，輸入框的長(zhǎng)度是很好確定的。
14.正確區(qū)分必填字段和選填字段
●○● 用戶有的時(shí)候并不知道哪些字段是必須填寫(xiě)哪些可以不用填寫(xiě)的 ，通常會(huì)使用星號(hào)（*）來(lái)區(qū)分兩者，但是星號(hào)有的時(shí)候并不能為用戶理解，所以盡量用文字來(lái)標(biāo)識(shí)差異。
15.相關(guān)信息分組
●○●過(guò)長(zhǎng)的表單常常會(huì)讓用戶感到煩躁和不知所措，應(yīng)當(dāng)根據(jù)特定的邏輯、內(nèi)容屬性將相關(guān)的內(nèi)容分組，強(qiáng)化表單整體的形式感，用戶覺(jué)得更容易填寫(xiě)表單，也更容易完成。
過(guò)長(zhǎng)的表單常常會(huì)讓用戶感到煩躁和不知所措，應(yīng)當(dāng)根據(jù)特定的邏輯、內(nèi)容屬性將相關(guān)的內(nèi)容分組，強(qiáng)化表單整體的形式感，用戶覺(jué)得更容易填寫(xiě)表單，也更容易完成。
值得思考的問(wèn)題
設(shè)計(jì)師應(yīng)當(dāng)考慮可選字段是否真的必要，并且盡量從更多的渠道搜集數(shù)據(jù)。
用戶數(shù)據(jù)的搜集和錄入日趨完善甚至日益復(fù)雜化。智能設(shè)備本身所搜集的用戶信息越來(lái)越多，通過(guò)用戶授權(quán)，APP和網(wǎng)頁(yè)可以獲取大量不同類(lèi)型、不同體量的數(shù)據(jù)，這些數(shù)據(jù)還可能來(lái)自第三方的帳號(hào)，有或者某個(gè)其他的APP，這些信息對(duì)于產(chǎn)品而言都有巨大的價(jià)值，而體現(xiàn)在表單設(shè)計(jì)上最直接的好處，就是用戶可以少填寫(xiě)很多重復(fù)的信息。
讓表單有趣
時(shí)間寶貴，生命短暫，誰(shuí)想將大量的時(shí)間耗費(fèi)在填寫(xiě)表單上呢？其實(shí)表單的填寫(xiě)可以更加有趣的，設(shè)計(jì)師可以將情緒、情感通過(guò)合理的表單設(shè)計(jì)強(qiáng)化品牌的氣質(zhì)與特征。在不違反上述一般法則的基礎(chǔ)上，設(shè)計(jì)師能做的事情還有很多，為什么不讓表單更有趣呢?
原文作者：AndrewCoyle
原文地址：uxdesign
翻譯：陳子木
譯文地址：http://www.uisdc.com/design-better-forms

當(dāng)前題目：網(wǎng)頁(yè)表單UI設(shè)計(jì)原則
路徑分享：http://www.muchs.cn/news39/117789.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、靜態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)