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