在B的設(shè)計(jì)中、表單是我們最為常見的設(shè)計(jì)內(nèi)容。下面我們來學(xué)習(xí)如何做好表單設(shè)計(jì)這部分內(nèi)容。
我理解表單就是系統(tǒng)為和用戶進(jìn)行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺(tái)產(chǎn)品中對(duì)我們數(shù)據(jù)做的增、刪、改、查、驗(yàn)都可以通過表單完成。
表單是一種用于收集用戶輸入的HTML元素，通常用于創(chuàng)建用戶與網(wǎng)頁交互的表單。表單可以包含各種輸入字段，如文本框、復(fù)選框、單選按鈕、下拉列表和提交按鈕等。當(dāng)用戶填寫表單并提交后，數(shù)據(jù)將被發(fā)送到服務(wù)器進(jìn)行處理。在web開發(fā)中，表單是實(shí)現(xiàn)用戶交互和數(shù)據(jù)收集的重要手段之一。
在我們的后臺(tái)系統(tǒng)中、我們表單在70%的場(chǎng)景上都會(huì)使用到。采集錄入數(shù)據(jù)信息、編輯數(shù)據(jù)信息等。如我們SaaS管理平臺(tái)的學(xué)員錄入、檔案查詢、獎(jiǎng)勵(lì)規(guī)則設(shè)置等。
設(shè)計(jì)原則是任何一種解決方案的指路燈。我們?cè)诒韱蔚脑O(shè)計(jì)中需要遵循以下原則、
簡(jiǎn)潔明了、清晰高效、適應(yīng)業(yè)務(wù)、及時(shí)反饋。
表單的設(shè)計(jì)應(yīng)該簡(jiǎn)潔明了，避免過多的裝飾和元素干擾用戶填寫表單。
表單中的各個(gè)字段和選項(xiàng)應(yīng)該清晰可見。用戶應(yīng)該能夠快速找到需要填寫的字段和選項(xiàng)，并且填寫過程中不會(huì)遇到過多的困難。
應(yīng)該符合我們的業(yè)務(wù)應(yīng)用場(chǎng)景、滿足我們的業(yè)務(wù)需求。
在用戶填寫表單的過程中，應(yīng)該提供適當(dāng)?shù)姆答仯巛斎腧?yàn)證、錯(cuò)誤提示等，以便用戶能夠及時(shí)了解自己的輸入是否正確。
我們通常的表單都基本都是由、標(biāo)簽、域、提示、操作按鈕這四個(gè)部分構(gòu)成的。
標(biāo)簽文本主要是解釋輸入項(xiàng)的含義，一般不宜太長(zhǎng)，需要簡(jiǎn)明扼要，快速讓用戶理解。輸入框標(biāo)簽在布局上可以分為
左標(biāo)簽、頂標(biāo)簽、行內(nèi)標(biāo)簽
。這三種設(shè)計(jì)在許多情況下可以提高可讀性和用戶友好性，但也有一些潛在的缺點(diǎn)。
優(yōu)點(diǎn)
：可讀性強(qiáng)、減少用戶的認(rèn)知負(fù)擔(dān)。布局直觀、提高填寫速度。
缺點(diǎn)
：不適合長(zhǎng)標(biāo)簽、對(duì)業(yè)務(wù)場(chǎng)景適用性差。
優(yōu)點(diǎn)
：節(jié)省空間、減少表單的長(zhǎng)度和寬度。視覺層次清晰。
缺點(diǎn)
：需要額外的間距、縱向空間利用率不高
優(yōu)點(diǎn)
：節(jié)省空間、簡(jiǎn)潔易于閱讀
缺點(diǎn)
：可讀性有限、對(duì)于長(zhǎng)標(biāo)簽或復(fù)雜內(nèi)容可讀性降低、不適合大部分的場(chǎng)景。
表單的域表示的是一個(gè)空間。這個(gè)空間里可以是
輸入內(nèi)容、選擇內(nèi)容、選則時(shí)間、選擇數(shù)值、觸發(fā)交互按鈕（上傳資料）
等
一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。
在我們系統(tǒng)設(shè)計(jì)里。我是更愿意把按鈕放在頁面的底部。至于為什么可以看一下、我之前的《按鈕的基礎(chǔ)設(shè)計(jì)知識(shí)的文章》
除了上面表單的基礎(chǔ)知識(shí)外，為了我們表單設(shè)計(jì)的更好我們就需要在細(xì)節(jié)上下功夫了。畢竟優(yōu)秀的設(shè)計(jì)師注重細(xì)節(jié)的表現(xiàn)的。
最初是因?yàn)槠聊伙@示的原因所以才加的冒號(hào)、隨著技術(shù)的進(jìn)步。現(xiàn)在可加可不加。系統(tǒng)內(nèi)統(tǒng)一就行。
輸入框的寬度是自適應(yīng)的、輸入框的寬度是有暗示左右的。在真實(shí)場(chǎng)景中，大部分輸入框是存在理想長(zhǎng)度的，那么就應(yīng)該向用戶暗示所需輸入內(nèi)容的長(zhǎng)度來減輕判斷負(fù)擔(dān)。下圖就是典型案例，一個(gè)實(shí)際不需要花多少錢的金額輸入框在左圖中進(jìn)行等寬處理，反而容易誤導(dǎo)用戶對(duì)輸入金額的判斷，造成一種不安全感。
在表單中我們采用多種布局方式。
信息分組、內(nèi)容列表、標(biāo)簽頁、分步驟。
在信息傳遞上。這集中布局方式本質(zhì)都是一樣的。將信息進(jìn)行分類展示。來更好效的進(jìn)行信息的傳遞和展示。理論支持、格式塔原理
我們?nèi)绾芜x則適用那種布局方式呢。很簡(jiǎn)單需要展示內(nèi)容的多少。
為了讓我們表單的用戶體驗(yàn)做到極致、我們還有注意這些交互上的細(xì)節(jié)。做好這些細(xì)節(jié)將大幅提升我們的用戶體檢。
驗(yàn)證用戶輸入活提交信息是否正確、驗(yàn)證方法有三種、實(shí)時(shí)、提交后、服務(wù)器。因?yàn)樗麄儠r(shí)效性不同所以應(yīng)用的場(chǎng)景也不同。
錯(cuò)誤提示要適用積極地的語言、不清楚的告訴用戶存在哪里、要如何修復(fù)。
之前好像看過一個(gè)什么定律忘了。他的大致意思是，如果系統(tǒng)能處理的問題盡量讓系統(tǒng)去處理、不用留給用戶去操作。
滿足多數(shù)人需要的地方放置選擇，來幫助用戶作出明智選擇。互聯(lián)網(wǎng)表單中有很多地方能利用智能默認(rèn)減少必要的選擇次數(shù)，加速表單完成過程。
保留用戶登陸信息、重復(fù)填寫內(nèi)容。例如、之前去醫(yī)院需要手機(jī)登陸的那段時(shí)間。在去過一次后。掃完填寫信息制藥填一個(gè)名字、其他信息都帶出來了。
我們?cè)跐M足大部分用戶的同時(shí)、在某些場(chǎng)景里還要提高額外的輸入框給需要的人用。同時(shí)不會(huì)阻礙不需要的人。這類輸入框常常被作為高級(jí)選項(xiàng)或者額外選項(xiàng)。
一個(gè)結(jié)構(gòu)充分的表單就像一個(gè)與用戶的良好對(duì)話。所以記住這一點(diǎn)，仔細(xì)規(guī)劃結(jié)構(gòu)。
從簡(jiǎn)單問題開始，用戶已經(jīng)很清楚答案了。將不相關(guān)的信息按邏輯分組展示。來幫助用戶理解。
至于這些的方式的選擇、總的來說還是信息呈現(xiàn)多少的不同。單步的轉(zhuǎn)化率更高。但多步卻更適合復(fù)雜信息的收集。
守的蓮開結(jié)伴游、約開萍葉上蘭舟。每次寫完一篇文章、都會(huì)有所收獲。希望能和優(yōu)秀的你一起前行。這里都是打工族純一線設(shè)計(jì)師、也許能夠幫助你。
作者：彪形大漢pro
鏈接：https://www.zcool.com.cn/article/ZMTYwNzU2OA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
