2023-8-16 ui設(shè)計(jì)分享達(dá)人
表單是什么？?
表單在我們的工作生活中非常見，表單對于企業(yè)和個(gè)人同樣至關(guān)重要，當(dāng)涉及到數(shù)據(jù)收集時(shí)，我們大多數(shù)情況下會(huì)采用表單。比如，我們在出國申請護(hù)照的時(shí)候，我們需要填寫的紙質(zhì)的申請資料，就是表單。我們在淘寶京東下單買東西時(shí)填寫的個(gè)人信息，地址的時(shí)候，也是表單。表單有數(shù)據(jù)收集，校驗(yàn)和提交的功能，其中核心功能是采集數(shù)據(jù)信息，可以看成是采集、傳遞、提交數(shù)據(jù)的中間媒介。表其作為獲取用戶輸入的重要交互方式，也承擔(dān)著將問題和答案進(jìn)行配對的角色。包含復(fù)選框，單選框，輸入框，下拉選擇框等元素。
表單一般運(yùn)用在什么地方：?
表單頁通常用來執(zhí)行登錄、注冊、預(yù)定、下單、評論等任務(wù)，是產(chǎn)品中數(shù)據(jù)錄入必不可少的頁面模式。因此，舒適的表單設(shè)計(jì)，可以引導(dǎo)用戶高效地完成表單背后的工作流程。
舉個(gè)栗子：
淘寶的登陸、注冊、紙質(zhì)的單子便是表單
表單的構(gòu)成元素：
表單通常由標(biāo)簽、輸入域、填寫提示、操作按鈕等控件組成。用以收集，校驗(yàn)，提交數(shù)據(jù)。
事實(shí)上，在設(shè)計(jì)表單之前，我們就要先對表單的標(biāo)簽進(jìn)行優(yōu)化，標(biāo)簽字段盡可能的簡約。每個(gè)組的表單，標(biāo)簽都必須是對齊的，輸入框/選擇框也應(yīng)是對齊的。下面我們就來說說怎么高效合理的運(yùn)用標(biāo)簽。
一．標(biāo)簽的定義：
標(biāo)簽一般為每個(gè)輸入項(xiàng)的名稱（eg：賬號、身份證號、服務(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)是對橫向空間占用較大；填寫速度慢；標(biāo)簽長度??；輸入框彈性小。
左對齊標(biāo)簽使用場景：希望用戶能夠放慢閱讀速度，仔細(xì)思考表單中的每個(gè)輸入框輸入信息時(shí)。
在對齊方式上可以分為左對齊標(biāo)簽和右對齊標(biāo)簽
a.左對齊標(biāo)簽
左對齊標(biāo)簽，左側(cè)對齊有清晰的閱讀線，用戶可以快讀了解表單需要回答的問題，缺點(diǎn)是右側(cè)不對齊導(dǎo)致標(biāo)簽和相關(guān)輸入框相鄰間距增大，增加了用戶填寫表單的難度。
左對齊標(biāo)簽使用場景：需要用戶謹(jǐn)慎填寫的情況下推薦使用左側(cè)對齊標(biāo)簽。
舉個(gè)栗子：
左對齊標(biāo)簽圖示
b.右對齊標(biāo)簽
右對齊標(biāo)簽與右側(cè)相關(guān)輸入框緊密相鄰，優(yōu)點(diǎn)是填寫的難度降低；節(jié)約垂直空間。缺點(diǎn)是左側(cè)不對齊，沒有清晰的閱讀線，降低了可讀性；標(biāo)簽長度?。惠斎肟驈椥孕?。
右標(biāo)簽使用場景：項(xiàng)目有頁面高度限制時(shí)；需要加快用戶填寫速度時(shí)；
小貼士：左對齊標(biāo)簽的表單瀏覽時(shí)間＞右對齊標(biāo)簽的表單瀏覽時(shí)間＜頂部對齊標(biāo)簽的表單瀏覽時(shí)間
舉個(gè)栗子：
右標(biāo)簽對齊圖示
傳統(tǒng)的頂部固定標(biāo)簽布局，設(shè)計(jì)時(shí)需要注意留出合理元素的行間距以驅(qū)動(dòng)不同填寫元素。由于標(biāo)簽與輸入框的上線排布方式，用戶填寫時(shí)需要上下調(diào)整視覺線來確認(rèn)填表信息，存在一定的閱讀障礙。
2.頂對齊標(biāo)簽
標(biāo)簽位于輸入框的頂部，優(yōu)點(diǎn)是節(jié)約橫向空間；瀏覽速度和處理速度是最快的；標(biāo)簽的長度彈性大。缺點(diǎn)：會(huì)占用垂直空間
使用場景：希望用戶快速的填寫表單時(shí)
小貼士：左對齊標(biāo)簽的表單瀏覽時(shí)間＞右對齊標(biāo)簽的表單瀏覽時(shí)間＜頂部對齊標(biāo)簽的表單瀏覽時(shí)間
?舉個(gè)栗子：
頂標(biāo)簽對齊圖示
3.行內(nèi)標(biāo)簽
即標(biāo)簽位于輸入框內(nèi)，擁有節(jié)約縱向和橫向空間的優(yōu)勢。行內(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ì)給用戶在填寫中或者填寫完成的檢查過程中帶來困難。產(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)簽無法檢查的弊端。但是很多文字標(biāo)簽是無法準(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)簽填寫后高效無法檢查的弊端。
舉個(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ù)用戶的意愿和需求度來自愿選擇填亦或不填。
?
舉例：在下面表但設(shè)計(jì)中，姓名，性別，生日等必填項(xiàng)的前面有號指引，無號則是非必填項(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)行說明。反饋提示發(fā)生在輸入中或輸入后，界面根據(jù)用戶的輸入而顯示的提示信息。
?
為提升數(shù)據(jù)錄入效率，通常可以在輸入框內(nèi)增加暗提示以幫助提醒用戶。
注：輸入框通常與標(biāo)簽（label）搭配使用，標(biāo)簽（label）默認(rèn)放于輸入?yún)^(qū)域的左側(cè)，當(dāng)文案過長或英文環(huán)境下也可放于在上方，但同個(gè)系統(tǒng)中需保持統(tǒng)一
?
反饋：
為了幫助用戶了解應(yīng)用當(dāng)前要做什么，也給用戶的下一步行為做參考，以及了解操作后所產(chǎn)生的結(jié)果，當(dāng)用戶和系統(tǒng)需要交互時(shí)，使用不同的模式來反饋信息或結(jié)果。當(dāng)設(shè)計(jì)者使用反饋或者自定義一些反饋時(shí)，請注意：
為用戶在各個(gè)階段提供必要、積極、即時(shí)的反饋；
避免過度反饋，以免給用戶帶來不必要的打擾，能夠及時(shí)看到效果的、簡單的操作，可以省略反饋提示
?
舉例：
圖中用戶昵稱框內(nèi)就是引導(dǎo)提示，可以減少用戶的時(shí)間成本和學(xué)習(xí)成本，提高錄用效率。
手機(jī)號后面的紅色錯(cuò)誤提示便是反饋提示，是對填寫信息的一個(gè)反饋結(jié)果。
如果沒有提示內(nèi)容，信息錄用效率將大大降低，會(huì)使用戶花費(fèi)更多的時(shí)間成本去學(xué)習(xí)。
引導(dǎo)提示和反饋圖示
提示信息
任何一個(gè)產(chǎn)品，即使用戶界面做的再好，也離不開用戶引導(dǎo)和信息提示。提示信息是用來告訴用戶需要知道什么、采取什么樣行動(dòng)的內(nèi)容。
?
?總結(jié)：
1．表單通常由標(biāo)簽、輸入框、填寫提示、操作按鈕等控件組成, 常出現(xiàn)于登錄、注冊、評論等需要用戶填寫信息的頁面。
2．標(biāo)簽在展示樣式上分為左標(biāo)簽、頂標(biāo)簽、行內(nèi)標(biāo)簽三種。
左標(biāo)簽有左對齊和右對齊兩種形式, 行內(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)行提示說明。
反饋提示發(fā)生在輸入中或輸入后,通過實(shí)時(shí)判斷信息字段是否符合規(guī)定,進(jìn)行提升反饋,減免錯(cuò)誤。
?
這一期給大家分享了標(biāo)簽的相關(guān)知識(shí)，標(biāo)簽的定義，分類，如何在標(biāo)簽中區(qū)分必填項(xiàng)和非必填項(xiàng)及提示信息與反饋的運(yùn)用。希望大家能在此有所收獲。
作者：設(shè)計(jì)獅有話說
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn