表單是什么？?
表單在我們的工作生活中非常見(jiàn)，表單對(duì)于企業(yè)和個(gè)人同樣至關(guān)重要，當(dāng)涉及到數(shù)據(jù)收集時(shí)，我們大多數(shù)情況下會(huì)采用表單。比如，我們?cè)诔鰢?guó)申請(qǐng)護(hù)照的時(shí)候，我們需要填寫的紙質(zhì)的申請(qǐng)資料，就是表單。我們?cè)谔詫毦〇|下單買東西時(shí)填寫的個(gè)人信息，地址的時(shí)候，也是表單。表單有數(shù)據(jù)收集，校驗(yàn)和提交的功能，其中核心功能是采集數(shù)據(jù)信息，可以看成是采集、傳遞、提交數(shù)據(jù)的中間媒介。表其作為獲取用戶輸入的重要交互方式，也承擔(dān)著將問(wèn)題和答案進(jìn)行配對(duì)的角色。包含復(fù)選框，單選框，輸入框，下拉選擇框等元素。

表單一般運(yùn)用在什么地方：?
表單頁(yè)通常用來(lái)執(zhí)行登錄、注冊(cè)、預(yù)定、下單、評(píng)論等任務(wù)，是產(chǎn)品中數(shù)據(jù)錄入必不可少的頁(yè)面模式。因此，舒適的表單設(shè)計(jì)，可以引導(dǎo)用戶高效地完成表單背后的工作流程。
舉個(gè)栗子：

淘寶的登陸、注冊(cè)、紙質(zhì)的單子便是表單

表單的構(gòu)成元素：
表單通常由標(biāo)簽、輸入域、填寫提示、操作按鈕等控件組成。用以收集，校驗(yàn)，提交數(shù)據(jù)。
事實(shí)上，在設(shè)計(jì)表單之前，我們就要先對(duì)表單的標(biāo)簽進(jìn)行優(yōu)化，標(biāo)簽字段盡可能的簡(jiǎn)約。每個(gè)組的表單，標(biāo)簽都必須是對(duì)齊的，輸入框/選擇框也應(yīng)是對(duì)齊的。下面我們就來(lái)說(shuō)說(shuō)怎么高效合理的運(yùn)用標(biāo)簽。

一．標(biāo)簽的定義：
標(biāo)簽一般為每個(gè)輸入項(xiàng)的名稱（eg：賬號(hào)、身份證號(hào)、服務(wù)器名稱）。用于標(biāo)記和選擇。標(biāo)簽是整個(gè)表單中用戶第一時(shí)間接觸的元素，用戶告知用戶表單需要填寫什么，按所要填寫信息的必要性又可分為必填項(xiàng)和非必填項(xiàng)。
標(biāo)簽在展示樣式上分為左標(biāo)簽、頂部標(biāo)簽、行內(nèi)標(biāo)簽三種。

1.左標(biāo)簽：
左標(biāo)簽在web端是比較主流的設(shè)計(jì)，優(yōu)點(diǎn)是可讀性比較強(qiáng)；節(jié)約垂直空間。缺點(diǎn)是對(duì)橫向空間占用較大；填寫速度慢；標(biāo)簽長(zhǎng)度?。惠斎肟驈椥孕?。
左對(duì)齊標(biāo)簽使用場(chǎng)景：希望用戶能夠放慢閱讀速度，仔細(xì)思考表單中的每個(gè)輸入框輸入信息時(shí)。
在對(duì)齊方式上可以分為左對(duì)齊標(biāo)簽和右對(duì)齊標(biāo)簽

a.左對(duì)齊標(biāo)簽
左對(duì)齊標(biāo)簽，左側(cè)對(duì)齊有清晰的閱讀線，用戶可以快讀了解表單需要回答的問(wèn)題，缺點(diǎn)是右側(cè)不對(duì)齊導(dǎo)致標(biāo)簽和相關(guān)輸入框相鄰間距增大，增加了用戶填寫表單的難度。
左對(duì)齊標(biāo)簽使用場(chǎng)景：需要用戶謹(jǐn)慎填寫的情況下推薦使用左側(cè)對(duì)齊標(biāo)簽。
舉個(gè)栗子：

左對(duì)齊標(biāo)簽圖示

b.右對(duì)齊標(biāo)簽
右對(duì)齊標(biāo)簽與右側(cè)相關(guān)輸入框緊密相鄰，優(yōu)點(diǎn)是填寫的難度降低；節(jié)約垂直空間。缺點(diǎn)是左側(cè)不對(duì)齊，沒(méi)有清晰的閱讀線，降低了可讀性；標(biāo)簽長(zhǎng)度小；輸入框彈性小。
右標(biāo)簽使用場(chǎng)景：項(xiàng)目有頁(yè)面高度限制時(shí)；需要加快用戶填寫速度時(shí)；
小貼士：左對(duì)齊標(biāo)簽的表單瀏覽時(shí)間＞右對(duì)齊標(biāo)簽的表單瀏覽時(shí)間＜頂部對(duì)齊標(biāo)簽的表單瀏覽時(shí)間
舉個(gè)栗子：

右標(biāo)簽對(duì)齊圖示

傳統(tǒng)的頂部固定標(biāo)簽布局，設(shè)計(jì)時(shí)需要注意留出合理元素的行間距以驅(qū)動(dòng)不同填寫元素。由于標(biāo)簽與輸入框的上線排布方式，用戶填寫時(shí)需要上下調(diào)整視覺(jué)線來(lái)確認(rèn)填表信息，存在一定的閱讀障礙。

2.頂對(duì)齊標(biāo)簽
標(biāo)簽位于輸入框的頂部，優(yōu)點(diǎn)是節(jié)約橫向空間；瀏覽速度和處理速度是最快的；標(biāo)簽的長(zhǎng)度彈性大。缺點(diǎn)：會(huì)占用垂直空間
使用場(chǎng)景：希望用戶快速的填寫表單時(shí)
小貼士：左對(duì)齊標(biāo)簽的表單瀏覽時(shí)間＞右對(duì)齊標(biāo)簽的表單瀏覽時(shí)間＜頂部對(duì)齊標(biāo)簽的表單瀏覽時(shí)間
?舉個(gè)栗子：

頂標(biāo)簽對(duì)齊圖示

3.行內(nèi)標(biāo)簽
即標(biāo)簽位于輸入框內(nèi)，擁有節(jié)約縱向和橫向空間的優(yōu)勢(shì)。行內(nèi)標(biāo)簽可分為齊行內(nèi)文本標(biāo)簽，行內(nèi)圖標(biāo)標(biāo)簽，浮動(dòng)標(biāo)簽
?a.行內(nèi)文本標(biāo)簽
可以用文字清晰表明輸入框需要填寫的內(nèi)容，但由于行內(nèi)標(biāo)簽的標(biāo)簽文本在輸入框激活或已輸入狀態(tài)就消失了，會(huì)給用戶在填寫中或者填寫完成的檢查過(guò)程中帶來(lái)困難。產(chǎn)品設(shè)計(jì)應(yīng)盡量避免使用此類標(biāo)簽。
舉個(gè)栗子：
行內(nèi)文本標(biāo)簽圖示

b.行內(nèi)圖標(biāo)標(biāo)簽
可以配合行內(nèi)輸入提示，在最左側(cè)加入圖標(biāo)標(biāo)簽，以優(yōu)化行內(nèi)標(biāo)簽無(wú)法檢查的弊端。但是很多文字標(biāo)簽是無(wú)法準(zhǔn)確由圖標(biāo)描述的，所以在不確定是否能準(zhǔn)確用圖標(biāo)表明標(biāo)簽意圖的情況下，應(yīng)謹(jǐn)慎使用行內(nèi)圖標(biāo)標(biāo)簽。
舉個(gè)栗子：

行內(nèi)圖標(biāo)標(biāo)簽圖示

c.浮動(dòng)標(biāo)簽
他是在未填寫或未激活的狀態(tài)為行內(nèi)標(biāo)簽樣式，在激活或已填寫的狀態(tài)下為頂部標(biāo)簽。浮動(dòng)標(biāo)簽是行內(nèi)標(biāo)簽和頂部標(biāo)簽的結(jié)合體，移動(dòng)端推薦此設(shè)計(jì)；消除了頂部標(biāo)簽的閱讀障礙，同時(shí)解決了行內(nèi)標(biāo)簽填寫后高效無(wú)法檢查的弊端。
舉個(gè)栗子：

浮動(dòng)標(biāo)簽圖示

優(yōu)秀的標(biāo)簽設(shè)計(jì)可以讓用戶快速清晰的了解表單目的，高效完成填寫，避免產(chǎn)生歧義。
通常放置在表單文本框之外居左或上方的位置。極少數(shù)情況下也會(huì)放置于文本輸入框內(nèi)，激活輸入框，則消失。
優(yōu)秀的標(biāo)簽設(shè)計(jì)可以讓用戶快速清晰的了解表單目的，高效完成填寫，避免產(chǎn)生歧義。
通常放置在表單文本框之外居左或上方的位置。極少數(shù)情況下也會(huì)放置于文本輸入框內(nèi)，激活輸入框，則消失。
?
?必填項(xiàng)和非必填項(xiàng)的區(qū)別：
必填項(xiàng)是指用戶必須要輸入有效的文本信息，否則，該表單就不能正常提交、保存等操作；必填項(xiàng)一般要有明確標(biāo)識(shí)，除非全部是必填項(xiàng)，且必填項(xiàng)數(shù)量在7個(gè)以內(nèi)。選填項(xiàng)比較少時(shí)，互聯(lián)網(wǎng)產(chǎn)品一般必填項(xiàng)不做標(biāo)識(shí)，非必填項(xiàng)后面則標(biāo)注選填字樣。
非必填項(xiàng)是指該項(xiàng)信息用戶可填可不填，根據(jù)用戶的意愿和需求度來(lái)自愿選擇填亦或不填。
?
舉例：在下面表但設(shè)計(jì)中，姓名，性別，生日等必填項(xiàng)的前面有號(hào)指引，無(wú)號(hào)則是非必填項(xiàng)，與產(chǎn)品相關(guān)的用戶信息，應(yīng)當(dāng)是必填項(xiàng)。例如員工信息錄入中姓名，性別等關(guān)鍵信息一定是必填項(xiàng)

舉個(gè)栗子：

必填項(xiàng)非必填項(xiàng)圖示

填寫項(xiàng)目在什么情況下有提示內(nèi)容：
提示一般可分為引導(dǎo)提示和反饋提示兩類。
引導(dǎo)提示發(fā)生在用戶輸入前，引導(dǎo)用戶正確輸入信息或?qū)斎胄畔⒌囊筮M(jìn)行說(shuō)明。反饋提示發(fā)生在輸入中或輸入后，界面根據(jù)用戶的輸入而顯示的提示信息。
?
為提升數(shù)據(jù)錄入效率，通?？梢栽谳斎肟騼?nèi)增加暗提示以幫助提醒用戶。
注：輸入框通常與標(biāo)簽（label）搭配使用，標(biāo)簽（label）默認(rèn)放于輸入?yún)^(qū)域的左側(cè)，當(dāng)文案過(guò)長(zhǎng)或英文環(huán)境下也可放于在上方，但同個(gè)系統(tǒng)中需保持統(tǒng)一
?
反饋：
為了幫助用戶了解應(yīng)用當(dāng)前要做什么，也給用戶的下一步行為做參考，以及了解操作后所產(chǎn)生的結(jié)果，當(dāng)用戶和系統(tǒng)需要交互時(shí)，使用不同的模式來(lái)反饋信息或結(jié)果。當(dāng)設(shè)計(jì)者使用反饋或者自定義一些反饋時(shí)，請(qǐng)注意：
為用戶在各個(gè)階段提供必要、積極、即時(shí)的反饋；
避免過(guò)度反饋，以免給用戶帶來(lái)不必要的打擾，能夠及時(shí)看到效果的、簡(jiǎn)單的操作，可以省略反饋提示
?
舉例：
圖中用戶昵稱框內(nèi)就是引導(dǎo)提示，可以減少用戶的時(shí)間成本和學(xué)習(xí)成本，提高錄用效率。
手機(jī)號(hào)后面的紅色錯(cuò)誤提示便是反饋提示，是對(duì)填寫信息的一個(gè)反饋結(jié)果。
如果沒(méi)有提示內(nèi)容，信息錄用效率將大大降低，會(huì)使用戶花費(fèi)更多的時(shí)間成本去學(xué)習(xí)。

引導(dǎo)提示和反饋圖示

提示信息
任何一個(gè)產(chǎn)品，即使用戶界面做的再好，也離不開(kāi)用戶引導(dǎo)和信息提示。提示信息是用來(lái)告訴用戶需要知道什么、采取什么樣行動(dòng)的內(nèi)容。
?
?總結(jié)：

1．表單通常由標(biāo)簽、輸入框、填寫提示、操作按鈕等控件組成, 常出現(xiàn)于登錄、注冊(cè)、評(píng)論等需要用戶填寫信息的頁(yè)面。
2．標(biāo)簽在展示樣式上分為左標(biāo)簽、頂標(biāo)簽、行內(nèi)標(biāo)簽三種。
左標(biāo)簽有左對(duì)齊和右對(duì)齊兩種形式, 行內(nèi)標(biāo)簽有行內(nèi)文本標(biāo)簽、行內(nèi)圖標(biāo)標(biāo)簽、浮動(dòng)標(biāo)簽。
3．必填項(xiàng)指用戶必須要輸入的文本信息, 一般會(huì)用明確顏色凸顯, 非必填項(xiàng)一般是讓用戶選擇是否需要填寫。
4．提示有引導(dǎo)提示和反饋提示兩類;
引導(dǎo)提示發(fā)生在用戶輸入前，引導(dǎo)用戶正確輸入信息或?qū)π枰斎氲男畔⑦M(jìn)行提示說(shuō)明。
反饋提示發(fā)生在輸入中或輸入后,通過(guò)實(shí)時(shí)判斷信息字段是否符合規(guī)定,進(jìn)行提升反饋,減免錯(cuò)誤。

?
這一期給大家分享了標(biāo)簽的相關(guān)知識(shí)，標(biāo)簽的定義，分類，如何在標(biāo)簽中區(qū)分必填項(xiàng)和非必填項(xiàng)及提示信息與反饋的運(yùn)用。希望大家能在此有所收獲。

作者：設(shè)計(jì)獅有話說(shuō)
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。