散文網(wǎng) » 生活 »日常 » B端UI設(shè)計(jì)｜表單系列開啟｜從表單的基本認(rèn)識(shí)開始剖析

B端UI設(shè)計(jì)｜表單系列開啟｜從表單的基本認(rèn)識(shí)開始剖析

2023-01-10 11:47 作者:酸梅干超人的電話亭 0人讀過 | 我要投稿

之前我們已經(jīng)分享過成套的表格設(shè)計(jì)思路，接下來我們就聚焦在表單部分的干貨整理和分享中，幫助大家更好的理解和設(shè)計(jì)表單。

1.1 表單是什么，為什么重要

表單這個(gè)詞匯雖然很常見，但相信不少同學(xué)對(duì)這個(gè)詞匯本身的理解是很陌生的、一知半解的。所以我們首要目標(biāo)就是認(rèn)識(shí)它是什么，以及它在B端項(xiàng)目中的作用、使用場(chǎng)景。

和表格類似，表單也是現(xiàn)代電子計(jì)算機(jī)系統(tǒng)中最重要的組成部分之一，但和表格不同的是，從我們9年義務(wù)教育開學(xué)的第一天，甚至更早，就已經(jīng)在接觸和使用表單了。

表單就是用來收集和錄入數(shù)據(jù)的列表清單，是我們過去填寫的試卷、個(gè)人資料、業(yè)務(wù)辦理等紙質(zhì)清單的數(shù)字化應(yīng)用方式。

比如登陸流程的賬號(hào)密碼填寫，注冊(cè)流程的郵箱、用戶名等信息填寫，都是表單應(yīng)用的常見案例，計(jì)算機(jī)需要通過它來收集用戶指定的數(shù)據(jù)信息。

輸入框、選擇控件等都是表單的一部分，但要注意的是，表單是一個(gè)合集概念，是一個(gè)整體的 “清單”，而不是單一的功能控件、組件。比如上圖的登陸表單、注冊(cè)表單，都包含了若干的輸入控件。

在軟件編程中，通常也需要先定義出表單的整體對(duì)象，再去創(chuàng)建下級(jí)的控件。比如 HTML 需要先添加 <Form> 表單標(biāo)簽，再在它的下級(jí)定義相關(guān)的輸入框、下拉菜單、選項(xiàng)、按鈕等元素。

這和現(xiàn)實(shí)邏輯是高度一致的，也就是每個(gè)表單都會(huì)有相關(guān)的頂級(jí)目標(biāo)，不管是收集個(gè)人信息、健康狀況、工作經(jīng)驗(yàn)亦或消費(fèi)記錄。然后再根據(jù)這個(gè)目標(biāo)所需的具體明細(xì)羅列出相關(guān)的數(shù)據(jù)清單，例如個(gè)人信息收集所需的姓名、性別、年齡、身高、體重等等。

表單設(shè)計(jì)，就是根據(jù)收集目標(biāo)，設(shè)計(jì)若干數(shù)據(jù)收集控件的合集。

而它之所以重要，就是因?yàn)槌耸褂帽砀?、圖表等模塊查看信息之外，還包含大量的數(shù)據(jù)錄入需求。有相當(dāng)一部分項(xiàng)目中所產(chǎn)生的數(shù)據(jù)，都是通過系統(tǒng)內(nèi)的表單輸入的，它們會(huì)占用用戶大量的精力和時(shí)間。

所以優(yōu)秀的表單設(shè)計(jì)除了提升基礎(chǔ)的視覺效果外，還可以非常好的提升表單操作過程的體驗(yàn)和效率，是 B 端設(shè)計(jì)師的必備能力之一。

1.2 表單的主要應(yīng)用場(chǎng)景

表單是用來收集數(shù)據(jù)的前面我們已經(jīng)解釋了，但收集數(shù)據(jù)這個(gè)目標(biāo)并不是只有把你填的內(nèi)容記錄到數(shù)據(jù)庫中這一個(gè)而已，還包含執(zhí)行特定程序時(shí)的必要數(shù)據(jù)收集。

所以，我把表單應(yīng)用的主要場(chǎng)景拆分成4個(gè)大類：

場(chǎng)景1：數(shù)據(jù)錄入

就是最基礎(chǔ)的用來將數(shù)據(jù)收集并保存到數(shù)據(jù)庫的場(chǎng)景，主要應(yīng)用在對(duì)特定數(shù)據(jù)對(duì)象的創(chuàng)建和編輯上。

場(chǎng)景2：數(shù)據(jù)篩選

即通過若干的條件來篩選出指定的對(duì)象和數(shù)據(jù)內(nèi)容，常見于表格和列表數(shù)據(jù)的篩選。

場(chǎng)景3：功能設(shè)置

通過若干的條件設(shè)置來實(shí)現(xiàn)對(duì)應(yīng)的功能或服務(wù)，比如在 CMS 系統(tǒng)設(shè)置推送消息條件，或設(shè)置相關(guān)的程序、機(jī)器的運(yùn)作執(zhí)行條件。

場(chǎng)景4：數(shù)據(jù)校驗(yàn)

即針對(duì)特定數(shù)據(jù)信息進(jìn)行驗(yàn)證的場(chǎng)景，例如賬號(hào)登陸，非機(jī)器人驗(yàn)證，財(cái)務(wù)、刪除的二次確認(rèn)等等。

這4個(gè)場(chǎng)景的目標(biāo)不同，自然在設(shè)計(jì)的樣式和交互上會(huì)有一定的差異，后面我們會(huì)分別對(duì)它們展開講解，先能理解并分辨它們即可。

1.3 表單的主要結(jié)構(gòu)和類型

一個(gè)完整的表單通常會(huì)包含3個(gè)要素，標(biāo)題、數(shù)據(jù)項(xiàng)、按鈕。

標(biāo)題就是這個(gè)表單的名稱，讓用戶理解填寫數(shù)據(jù)的目的。

數(shù)據(jù)項(xiàng)則是該表單內(nèi)每一條要收集的數(shù)據(jù)對(duì)象，根據(jù)數(shù)據(jù)類型和特征會(huì)有不同的控件類型和交互形式。

按鈕則是針對(duì)整個(gè)表單的操作（不是針對(duì)某個(gè)數(shù)據(jù)項(xiàng)），例如發(fā)布、重制、恢復(fù)默認(rèn)等。

數(shù)據(jù)項(xiàng)是我們要重點(diǎn)探討的對(duì)象，每一個(gè)數(shù)據(jù)項(xiàng)都包含三個(gè)基礎(chǔ)的要素，數(shù)據(jù)名稱、數(shù)據(jù)內(nèi)容、操作對(duì)象。

數(shù)據(jù)名稱就是該項(xiàng)的命名，讓用戶識(shí)別操作的數(shù)據(jù)是什么，它可以獨(dú)立顯示在畫布中，也可以置入到輸入框等操作對(duì)象內(nèi)。

數(shù)據(jù)內(nèi)容，則是該數(shù)據(jù)項(xiàng)中要收集的數(shù)據(jù)特征，這是最核心的設(shè)計(jì)需求來源。數(shù)據(jù)特征是個(gè)總稱，里面包含很多要素，比如最基礎(chǔ)的一環(huán) —— 數(shù)據(jù)類型。

這是一個(gè)開發(fā)術(shù)語，任何數(shù)據(jù)要被記錄，都會(huì)定義它的類型再進(jìn)行存儲(chǔ)和使用。常見的數(shù)據(jù)類型包含數(shù)值（Number）、字符串（String）、日期（data）三個(gè)大類，且每個(gè)大類根據(jù)具體使用場(chǎng)景還會(huì)拆分出細(xì)分類型，比如下面的案例：

技術(shù)上的概念并不需要太深入理解，只要知道它從屬于哪個(gè)大類即可。更進(jìn)一步，技術(shù)上的數(shù)據(jù)類型劃分在實(shí)際應(yīng)用上仍是有局限性的，比如用戶名和密碼，本質(zhì)上它們都以字符串的形式保存，但它們從工作中的稱呼、樣式的設(shè)計(jì)都是全然不同的。

除了數(shù)據(jù)類型，還有一個(gè)特別重要的就是數(shù)據(jù)內(nèi)容，每個(gè)數(shù)據(jù)項(xiàng)都會(huì)明確想要獲取的數(shù)據(jù)結(jié)果是什么樣的。有可能是用戶手動(dòng)輸入的，也可能是在已經(jīng)存在的選項(xiàng)中挑選出來。還有對(duì)數(shù)據(jù)內(nèi)容的長(zhǎng)度、格式、數(shù)量、遞進(jìn)、范圍、過濾的要求等。

在稍微復(fù)雜點(diǎn)的項(xiàng)目中，產(chǎn)品經(jīng)理都會(huì)根據(jù)業(yè)務(wù)需要對(duì)數(shù)據(jù)類型進(jìn)行定義，并在設(shè)計(jì)表單需求的時(shí)候，具體的規(guī)劃每個(gè)數(shù)據(jù)項(xiàng)的數(shù)據(jù)類型，比如創(chuàng)建一個(gè)下面的表格來描述。

之所以這個(gè)要講這個(gè)，因?yàn)閷?duì)數(shù)據(jù)內(nèi)容的整理決定了最終應(yīng)該設(shè)計(jì)什么樣的——操作對(duì)象。

操作對(duì)象就是該數(shù)據(jù)項(xiàng)的具體表現(xiàn)形式，包括了視覺樣式和交互方法。比如上方的商品名，就是一個(gè)簡(jiǎn)單的輸入框，但是因?yàn)樯唐访麆?dòng)輒字?jǐn)?shù)非常多，這個(gè)輸入框的設(shè)計(jì)肯定不會(huì)像用戶名一樣短。