2023-8-16 ui設(shè)計(jì)分享達(dá)人
表單是什么??
表單在我們的工作生活中非常見,表單對于企業(yè)和個(gè)人同樣至關(guān)重要,當(dāng)涉及到數(shù)據(jù)收集時(shí),我們大多數(shù)情況下會采用表單。比如,我們在出國申請護(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ū)動不同填寫元素。由于標(biāo)簽與輸入框的上線排布方式,用戶填寫時(shí)需要上下調(diào)整視覺線來確認(rèn)填表信息,存在一定的閱讀障礙。
2.頂對齊標(biāo)簽
標(biāo)簽位于輸入框的頂部,優(yōu)點(diǎn)是節(jié)約橫向空間;瀏覽速度和處理速度是最快的;標(biāo)簽的長度彈性大。缺點(diǎn):會占用垂直空間
使用場景:希望用戶快速的填寫表單時(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)簽,浮動標(biāo)簽
?a.行內(nèi)文本標(biāo)簽
可以用文字清晰表明輸入框需要填寫的內(nèi)容,但由于行內(nèi)標(biāo)簽的標(biāo)簽文本在輸入框激活或已輸入狀態(tà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)簽無法檢查的弊端。但是很多文字標(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.浮動標(biāo)簽
他是在未填寫或未激活的狀態(tài)為行內(nèi)標(biāo)簽樣式,在激活或已填寫的狀態(tài)下為頂部標(biāo)簽。浮動標(biāo)簽是行內(nèi)標(biāo)簽和頂部標(biāo)簽的結(jié)合體,移動端推薦此設(shè)計(jì);消除了頂部標(biāo)簽的閱讀障礙,同時(shí)解決了行內(nèi)標(biāo)簽填寫后高效無法檢查的弊端。
舉個(gè)栗子:
浮動標(biāo)簽圖示
優(yōu)秀的標(biāo)簽設(shè)計(jì)可以讓用戶快速清晰的了解表單目的,高效完成填寫,避免產(chǎn)生歧義。
通常放置在表單文本框之外居左或上方的位置。極少數(shù)情況下也會放置于文本輸入框內(nèi),激活輸入框,則消失。
優(yōu)秀的標(biāo)簽設(shè)計(jì)可以讓用戶快速清晰的了解表單目的,高效完成填寫,避免產(chǎn)生歧義。
通常放置在表單文本框之外居左或上方的位置。極少數(shù)情況下也會放置于文本輸入框內(nèi),激活輸入框,則消失。
?
?必填項(xiàng)和非必填項(xiàng)的區(qū)別:
必填項(xiàng)是指用戶必須要輸入有效的文本信息,否則,該表單就不能正常提交、保存等操作;必填項(xiàng)一般要有明確標(biāo)識,除非全部是必填項(xiàng),且必填項(xiàng)數(shù)量在7個(gè)以內(nèi)。選填項(xiàng)比較少時(shí),互聯(lián)網(wǎng)產(chǎn)品一般必填項(xiàng)不做標(biāo)識,非必填項(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)容,信息錄用效率將大大降低,會使用戶花費(fèi)更多的時(shí)間成本去學(xué)習(xí)。
引導(dǎo)提示和反饋圖示
提示信息
任何一個(gè)產(chǎn)品,即使用戶界面做的再好,也離不開用戶引導(dǎo)和信息提示。提示信息是用來告訴用戶需要知道什么、采取什么樣行動的內(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)簽、浮動標(biāo)簽。
3.必填項(xiàng)指用戶必須要輸入的文本信息, 一般會用明確顏色凸顯, 非必填項(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)知識,標(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.jghy.net