B端表單系列|從表單的基本認識開始剖析

需要收集和錄入資料時,表單必不可少,而表單,也是B端設計師的必備能力之一。對此,本文從表單是什麼,為什麼重要?表單的主要應用場景、表單的主要結構和型別三個方面做了介紹和分析,一起來看看吧。

B端表單系列|從表單的基本認識開始剖析

之前我們已經分享過成套的表格設計思路,接下來我們就聚焦在表單部分的乾貨整理和分享中,幫助大家更好的理解和設計表單。

一、表單是什麼,為什麼重要

表單這個詞彙雖然很常見,但相信不少同學對這個詞彙本身的理解是很陌生的、一知半解的。所以我們首要目標就是認識它是什麼,以及它在B端專案中的作用、使用場景。

和表格類似,表單也是現代電子計算機系統中最重要的組成部分之一,但和表格不同的是,從我們9年義務教育開學的第一天,甚至更早,就已經在接觸和使用表單了。

B端表單系列|從表單的基本認識開始剖析

表單就是用來收集和錄入資料的列表清單,是我們過去填寫的試卷、個人資料、業務辦理等紙質清單的數字化應用方式。

比如登陸流程的賬號密碼填寫,註冊流程的郵箱、使用者名稱等資訊填寫,都是表單應用的常見案例,計算機需要透過它來收集使用者指定的資料資訊。

B端表單系列|從表單的基本認識開始剖析

輸入框、選擇控制元件等都是表單的一部分,但要注意的是,表單是一個合集概念,是一個整體的 “清單”,而不是單一的功能控制元件、元件。比如上圖的登陸表單、登錄檔單,都包含了若干的輸入控制元件。

在軟體程式設計中,通常也需要先定義出表單的整體物件,再去建立下級的控制元件。比如 HTML 需要先新增

表單標籤,再在它的下級定義相關的輸入框、下拉選單、選項、按鈕等元素。

所以優秀的表單設計除了提升基礎的視覺效果外,還可以非常好的提升表單操作過程的體驗和效率,是 B 端設計師的必備能力之一。

二、表單的主要應用場景

表單是用來收集資料的前面我們已經解釋了,但收集資料這個目標並不是只有把你填的內容記錄到資料庫中這一個而已,還包含執行特定程式時的必要資料收集。

所以,我把表單應用的主要場景拆分成4個大類:

B端表單系列|從表單的基本認識開始剖析

1. 資料錄入

就是最基礎的用來將資料收集並儲存到資料庫的場景,主要應用在對特定資料物件的建立和編輯上。

B端表單系列|從表單的基本認識開始剖析

2. 資料篩選

即透過若干的條件來篩選出指定的物件和資料內容,常見於表格和列表資料的篩選。

B端表單系列|從表單的基本認識開始剖析

3. 功能設定

透過若干的條件設定來實現對應的功能或服務,比如在 CMS 系統設定推送訊息條件,或設定相關的程式、機器的運作執行條件。

B端表單系列|從表單的基本認識開始剖析

4. 資料校驗

即針對特定資料資訊進行驗證的場景,例如賬號登陸,非機器人驗證,財務、刪除的二次確認等等。

B端表單系列|從表單的基本認識開始剖析

這4個場景的目標不同,自然在設計的樣式和互動上會有一定的差異,後面我們會分別對它們展開講解,先能理解並分辨它們即可。

三、表單的主要結構和型別

一個完整的表單通常會包含3個要素,標題、資料項、按鈕。

B端表單系列|從表單的基本認識開始剖析

標題就是這個表單的名稱,讓使用者理解填寫資料的目的。資料項則是該表單內每一條要收集的資料物件,根據資料型別和特徵會有不同的控制元件型別和互動形式。按鈕則是針對整個表單的操作(不是針對某個資料項),例如釋出、重製、恢復預設等。

資料項是我們要重點探討的物件,每一個數據項都包含三個基礎的要素,資料名稱、資料內容、操作物件。

資料名稱就是該項的命名,讓使用者識別操作的資料是什麼,它可以獨立顯示在畫布中,也可以置入到輸入框等操作物件內。

B端表單系列|從表單的基本認識開始剖析

資料內容,則是該資料項中要收集的資料特徵,這是最核心的設計需求來源。資料特徵是個總稱,裡面包含很多要素,比如最基礎的一環 —— 資料型別。

這是一個開發術語,任何資料要被記錄,都會定義它的型別再進行儲存和使用。常見的資料型別包含數值(Number)、字串(String)、日期(data)三個大類,且每個大類根據具體使用場景還會拆分出細分型別,比如下面的案例:

B端表單系列|從表單的基本認識開始剖析

技術上的概念並不需要太深入理解,只要知道它從屬於哪個大類即可。更進一步,技術上的資料型別劃分在實際應用上仍是有侷限性的,比如使用者名稱和密碼,本質上它們都以字串的形式儲存,但它們從工作中的稱呼、樣式的設計都是全然不同的。

除了資料型別,還有一個特別重要的就是資料內容,每個資料項都會明確想要獲取的資料結果是什麼樣的。有可能是使用者手動輸入的,也可能是在已經存在的選項中挑選出來。還有對資料內容的長度、格式、數量、遞進、範圍、過濾的要求等。

在稍微複雜點的專案中,產品經理都會根據業務需要對資料型別進行定義,並在設計表單需求的時候,具體的規劃每個資料項的資料型別,比如建立一個下面的表格來描述。

B端表單系列|從表單的基本認識開始剖析

之所以這個要講這個,因為對資料內容的整理決定了最終應該設計什麼樣的——操作物件。

操作物件就是該資料項的具體表現形式,包括了視覺樣式和互動方法。比如上方的商品名,就是一個簡單的輸入框,但是因為商品名動輒字數非常多,這個輸入框的設計肯定不會像使用者名稱一樣短。

B端表單系列|從表單的基本認識開始剖析

商品分類中,要從既定的選項中選擇,而商品分類庫本身是樹狀結構的,那麼這個選擇必然要支援層級的表現,同時還要支援多選,所以應該使用下拉的樹狀選擇選單。

B端表單系列|從表單的基本認識開始剖析

如果光看上面這個案例,可能覺得太簡單根本不用想那麼多背後的需求。但在一些專業性更高,包含數十條複雜資料項的表單中,是必然要做出充分理解和分析,才能確保設計的有效性。

後面我們會從常規表單的控制元件和元件型別入手,掌握基礎的知識後再學習如何結合資料需求進行有效的設計。

作者:酸梅乾超人;公眾號:超人的電話亭(ID:Superman_Call)

本文由 @超人的電話亭 原創釋出於人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash ,基於 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供資訊儲存空間服務。

頂部