Web端表單設(shè)計小總結(jié)

時間：2023-10-04 18:36:01 | 來源：網(wǎng)站運營

時間：2023-10-04 18:36:01 來源：網(wǎng)站運營

Web端表單設(shè)計小總結(jié)：前言

由于近期接觸的一些項目，頻繁的接觸到web端表單設(shè)計。然而，自身知識體系的建設(shè)不足，對于表單設(shè)計的知識點太過零散，在設(shè)計的過程中，往往用最直覺的設(shè)計經(jīng)驗，去解決一些界面設(shè)計的問題。輸出的設(shè)計稿，總感覺不太友好。

加強(qiáng)對自身知識體系的規(guī)劃，對于Ui設(shè)計來說是非常必要的。接下來的這篇文章，將對近期表單設(shè)計中的知識點進(jìn)行整合，歸攏起來，加深自己對表單設(shè)計的理解，夯實自己的基礎(chǔ)。

【作者】Molly

1.最基礎(chǔ)的作用

表單在web或 app 中主要用于數(shù)據(jù)采集。常見于很多B端后臺產(chǎn)品、業(yè)務(wù)系統(tǒng)等場景，C端注冊、登錄、個人信息填寫、問卷調(diào)查等場景中。

所以，大部分起到數(shù)據(jù)采集功能的模塊，我們都可以稱其為表單。

2.表單的構(gòu)成

表單主要由這四類元素組成：標(biāo)簽、輸入域、操作按鈕、提示信息。

2.1 標(biāo)簽

標(biāo)簽：告訴用戶該表單需要填寫什么類型的信息。文案需要簡潔明了，快速讓用戶理解。

標(biāo)簽的排列方式有以下幾種：

2.1.1 頂對齊：從上到下瀏覽順序，有利于用戶獲取信息，從而減少表單填寫時間；增加了橫向屏幕的空間，但是也會占用較多的縱向垂直屏幕空間。如果表單內(nèi)容太多，整張變得則會太長，會增加用戶填寫表單的壓力和視覺偏左的效果。

2.1.2 左對齊：占用垂直空間較少。如果標(biāo)簽長短不一，那么表單標(biāo)簽和輸入框距離就會比較遠(yuǎn)，從而會延長用戶從左至右瀏覽時間。對于一些內(nèi)容校對，相對敏感的信息，需要減少用戶的出錯率，放慢用戶填寫表單的速度時，使用做對齊的方式會比較合適。


2.1.3 右對齊：右對齊和做對齊一樣，可以減少表單占用垂直屏幕空間，但是相比于左對齊，標(biāo)簽與輸入框相鄰，更方便于填寫。

但是，布局上會造成左側(cè)參差不齊，影響用戶游覽表單的效率；若標(biāo)簽文字寬度變寬，右對齊還存在靈活度問題。

如果屏幕上下空間有限，又需要用戶快速填寫表單，使用右對齊的方式會更合適。


2.1.4 內(nèi)對齊：將標(biāo)簽放在輸入框內(nèi)部，用作提示用戶輸入什么內(nèi)容，這種結(jié)構(gòu)在移動端常見（例如，注冊/登錄頁），移動端屏幕小，這種結(jié)構(gòu)的空間占比很小，對移動端的小屏來說，是非常友好的。但交互如果沒有設(shè)計好，會有很大的缺陷。表單內(nèi)容要足夠短少，而且通熟易懂的。因為用戶在輸入內(nèi)容的時候，內(nèi)部的標(biāo)簽/提示性文字就會消失，用戶需要判斷自己輸入的信息是否正確。


2.2 輸入域

用來收集用戶操作的信息。主要包括：文本輸入框（單行/多行）、單選框、復(fù)選框、開關(guān)、滑塊、選擇器、上傳（文件/圖片）、數(shù)字輸入框、金額輸入框、等等

2.2.1 輸入域限制

限制通常有兩種：對表單域輸入的信息進(jìn)行字?jǐn)?shù)限制和屬性限制

對輸入域做限制，一來可以確定頁面的展現(xiàn)形式，二來可以減輕數(shù)據(jù)庫的壓力。

字?jǐn)?shù)限制：在輸入域右邊或者右下角，告知用戶最大字?jǐn)?shù)，用戶輸入過程中，需提醒用戶還剩多少字，避免內(nèi)容過長提交不了。提升用戶體驗。

屬性限制：對數(shù)字、文字、字母等輸入框做限制，這就極大地增加了用戶的錯誤率。


2.2.1 輸入域大小

在真實場景中，大部分輸入框是存在理想長度的，而不一樣的長短的輸入框，能夠給客戶提供一種心理暗示。在填寫輸入框時，用戶自然地會去思考為什么這樣。

雖然不同的長度，會提醒用戶在填寫的信息的時候進(jìn)行思考，但是設(shè)定太多的寬度，這樣會導(dǎo)致表單看起來凌亂；需要設(shè)置一個適合的寬度模度值和數(shù)量。

首先，根據(jù)具體的適用場景，設(shè)置一個默認(rèn)寬度。在這個寬度的基礎(chǔ)上，長度做規(guī)律的增加，從而定義出不同的模度。


2.2.3 多行文字規(guī)則

多行文字一般出現(xiàn)在兩個地方：標(biāo)簽和輸入框

對于左右結(jié)構(gòu)的表單，標(biāo)簽文字盡可能的要精簡，控制在5個字之內(nèi)，如果出現(xiàn)標(biāo)簽很長，那么需要給文字設(shè)定寬度和行高，比如最多五個字，超出部分換行，設(shè)定文字行高標(biāo)。

輸入域大小設(shè)定時，我們需要給出橫向字?jǐn)?shù)寬度，和上下左右的間距。對于一些文本框內(nèi)容過多的情況，通常有以下幾種處理方法：

第一，限定輸入框大小。比如，設(shè)定顯示5行文字，文字超過 5行，輸入框大小不變，輸入框內(nèi)上下滾動展示全部內(nèi)容。設(shè)計時需要注意，右邊顯示滾動條或者輸入框底部顯示部分遮擋文字，這樣可以提醒用戶還有未展示的文字。一般采用的方式是對最上方一行文字遮擋一半。

上述情況，可以確定頁面的展現(xiàn)形式，文字的多少，不會改變頁面的布局，輸入框空間占比小。


第二種，不限定輸入框大小，自適應(yīng)高度。同時也要限制一定的字符數(shù)，當(dāng)超過一定的字符時給用戶提示。


第三種，自適應(yīng)高度+滾動條，指定最小行數(shù)，和最大行數(shù)。超出部分顯示滾動條，同時也要限制一定的字符數(shù)。

輸入框的大小會影響用戶對該輸入框內(nèi)容輸入多少對判斷，輸入框尺寸大，在用戶潛意識里則會認(rèn)為可以輸入文字很多。

2.3 操作按鈕

用戶信息錄入完成后，點擊繼續(xù)或取消任務(wù)的觸發(fā)器。按鈕位置一般位于最后一個輸入項后面。一般來說，左邊放“取消”按鈕，右邊放用戶最可能點擊的按鈕。當(dāng)然【執(zhí)行/確定】按鈕到底是放左，還是放右，其實都可以都可以，只要保證統(tǒng)一即可。

2.4 提示信息

錄入提示：幫助用戶更具象的理解錄入的信息內(nèi)容；

幫助提示：通常，當(dāng)標(biāo)簽信息無法讓用戶完成理解或需強(qiáng)調(diào)其重要性，可以在標(biāo)簽前/后加一個幫助提示icon，點擊/鼠標(biāo)懸浮按鈕出現(xiàn)有幫助信息的彈窗。

錯誤提示：提示用戶錄入信息哪里出錯或者怎么修改。

3.表單的使用場景

3.1 彈窗（字段少）

在實際業(yè)務(wù)中，當(dāng)表單字段較為簡短，并且填寫表單不需要關(guān)注底部頁面的信息，可才有彈窗的形式。

3.2 頁面

當(dāng)表單信息龐大時，可以采用新頁面呈現(xiàn)。使用單獨頁面，能好地展示表單信息減少其它信息的干擾。頁面布局主要有以下三種方式：

2.2.1多列布局（較復(fù)雜）

當(dāng)頁面空間有限，我們可以將具有相關(guān)聯(lián)字段放在一個卡片區(qū)域中進(jìn)行歸類，形成多列排布的暗提示幫助用戶更好理解。

2.2.2分組布局（中度復(fù)雜）

表單較為復(fù)雜，信息量較大，可將具有相關(guān)聯(lián)字段進(jìn)行分類并以標(biāo)題區(qū)分的形式進(jìn)行字段分組，并且表單字段都在一個卡片區(qū)域內(nèi)。

2.2.3 卡片分組布局（高度復(fù)雜）

上述分組布局，通過留白或者分割線的形式對相關(guān)聯(lián)字段進(jìn)行分組，當(dāng)頁面要承載更大的表單字段時，我們可以采用卡片分組布局的形式來處理這種更為復(fù)雜類型表單。將信息相關(guān)性弱的字段拆分為多個部分，并通過多個卡片分組承載不同類型字段。

3. 抽屜式（內(nèi)容信息較多，且與底部信息強(qiáng)關(guān)聯(lián)）

抽屜表單是從屏幕邊緣滑出的浮層面板。抽屜會從屏幕的上下左右任意一側(cè)滑出。用戶在抽屜內(nèi)操作時不必離開當(dāng)前任務(wù)，操作完成后，可以平滑地回到原任務(wù)。

抽屜承載的內(nèi)容比彈窗多，交互的形式比彈窗和頁面型表單靈活。信息相對較多且與底部信息關(guān)系較強(qiáng)，可以采用此形式的表單。用戶在錄入表單的過程中，可以根據(jù)底部信息來輔助完成，這樣能夠提高填表的效率和用戶體驗。

---

歡迎關(guān)注技術(shù)團(tuán)隊的本站賬號我們憑團(tuán)隊實例運作以下專欄， 必須干貨！
互聯(lián)網(wǎng)創(chuàng)業(yè)專欄 (我們小伙伴的創(chuàng)業(yè)歷程)
與您一起聊技術(shù) (APP、微信公眾號、小程序、H5 技術(shù)總結(jié))
互聯(lián)網(wǎng)產(chǎn)品研發(fā)管理 (我們公司對產(chǎn)品結(jié)構(gòu)的管理思路)
產(chǎn)品君的案例庫（產(chǎn)品小伙伴深刻總結(jié)）