一、表單的構(gòu)成
1、表單的組成
按照原子理論，表單應(yīng)該屬于一種“組織”。包括了以下組成部分：
- 標(biāo)簽
主要是用來說明表單數(shù)據(jù)域的含義和填寫內(nèi)容；當(dāng)標(biāo)簽無法明確引導(dǎo)用戶或者具有一定的內(nèi)容限制時，需要增加幫助或者說明信息，方便用戶更好地填寫內(nèi)容。
- 表單數(shù)據(jù)域
通常是數(shù)據(jù)錄入型組件，需要用戶以填寫、選擇的方式完成內(nèi)容輸入。
- 操作按鈕
用來提交、保存數(shù)據(jù)信息，完成表單操作。
2、表單的類型
在B端產(chǎn)品審批流程中，不同的用戶會面對不同的表單形式。
對于流程發(fā)起者，需要填寫內(nèi)容后提交審批，這類表單偏向于任務(wù)操作，也是我們最常見、最典型的表單形式。
而對于審批者而言，表單主要是傳遞信息，審批人依據(jù)內(nèi)容做出審批決策，這類表單偏向于信息展示。由于審批類的表單相對簡單，所以我們將主要的精力放在操作型表單上。
二、表單的設(shè)計關(guān)注點
1、表單布局
表單存在兩種布局方式：單列布局和多列布局。
- 單列布局
單列布局信息自上而下，用戶視覺動線更加穩(wěn)定，橫向的視覺跨度更短。所以信息閱讀和填寫的效率更高，是首選的布局方式。但是在長表單場景下，用戶需要滾動屏幕才能查看完整的表單信息。
- 多列布局
多列布局下，一屏可以容納更多信息、屏效更高，有效地避免出現(xiàn)滾動條。對于高頻的長表單操作，采用多列布局的方式，可以減少滾動條帶來的用戶困擾。
當(dāng)然多列布局表單信息密度也更大。一般為左右兩列布局，列數(shù)最好不要超過2列，否則會影響用戶的填寫效率。
常見的搜索表單大都與表格寬度一致，可以容納3列或4列。主要是搜索關(guān)鍵詞與表格一致，業(yè)務(wù)屬性不強，并且表單項沒有強制性，用戶可以自由填寫，不會存在漏填的情況。采用多列布局對用戶操作影響不大。
2、標(biāo)簽排列
標(biāo)簽排列方式歷來都是設(shè)計師比較糾結(jié)的問題，常見的標(biāo)簽有3種：左對齊標(biāo)簽、右對齊標(biāo)簽、頂部標(biāo)簽。另外還有內(nèi)聯(lián)標(biāo)簽、浮動標(biāo)簽等形式。
先看閱讀效率數(shù)據(jù)。
2006年，有專家就對3種對齊方式進行了眼動儀數(shù)據(jù)分析。研究結(jié)論表明，頂部標(biāo)簽移動到輸入框效率最高，只要 50 毫秒；右對齊標(biāo)簽次之，需要 240 毫秒左右；而左對齊需要消耗“500 毫秒”，效率最低。單從效率上來說，肯定首選頂部標(biāo)簽。但是面對不同的場景，需要選擇合理的排列方式。
- 頂部標(biāo)簽
（圖片來源于網(wǎng)絡(luò)）
頂部標(biāo)簽的排列方式符合用戶自上而下的瀏覽習(xí)慣，標(biāo)簽與輸入域聯(lián)系更加緊密，視覺橫向移動距離小。所以信息讀取的效率更高。
另外標(biāo)簽單獨占據(jù)一行空間，信息擴展性更強。問題也顯而易見，標(biāo)簽擠占了縱向空間，會增加表單的總體長度。
所以我個人認為，頂部標(biāo)簽更適合信息量不大、簡單的表單場景。例如登錄、注冊等。
- 右對齊標(biāo)簽
（圖片來源于網(wǎng)絡(luò)）
右對齊布局拉近了標(biāo)簽與表單域的距離，并形成固定間距。但是由于標(biāo)簽的長度不同，視線起始點會發(fā)生跳躍，從而影響用戶的閱讀效率。
不過對于普通表單，右對齊標(biāo)簽可以兼顧效率和頁面空間，因此在B端產(chǎn)品中應(yīng)用比較廣泛。
- 左對齊標(biāo)簽
（圖片來源于網(wǎng)絡(luò)）
從整體性上來看，左對齊視覺結(jié)構(gòu)性更強，有利于標(biāo)簽信息閱讀。用戶視線不會受到輸入框的干擾，可以非常順暢地掃視標(biāo)簽，方便用戶快速搜尋必填項。
但是由于標(biāo)簽長度不一，為了保證所有標(biāo)簽都可以正常顯示，會增加標(biāo)簽與表單域的間距，導(dǎo)致信息讀取效率偏低。
左對齊標(biāo)簽可以用在復(fù)雜場景中，減緩用戶的填寫速度，尤其是那些有大量可選輸入框，結(jié)合必*標(biāo)識符快速定位必填項。或者在高級設(shè)置的場景中，字段信息對用戶相對比較陌生時，讓用戶可以仔細考慮表單中的每個信息項。
- 內(nèi)聯(lián)標(biāo)簽
內(nèi)聯(lián)標(biāo)簽是將標(biāo)簽放在輸入域內(nèi)顯示，標(biāo)簽代替了占位提示文字，告訴用戶應(yīng)該填寫什么內(nèi)容。常見于注冊登錄頁，如下圖。
內(nèi)聯(lián)標(biāo)簽解決了標(biāo)簽文字過長的問題，并且可以降低表單的視覺信息量。
但是這也帶來了另一個問題，就是內(nèi)置的標(biāo)簽信息會隨著內(nèi)容信息輸入而消失。通常僅用于登錄頁面，因為用戶對登錄頁的內(nèi)容模式已經(jīng)非常熟悉了，學(xué)習(xí)成本很低，不會帶給用戶困擾。
如果用在其他類型的表單頁面，就容易讓用戶產(chǎn)生疑惑。特別是出錯的場景下，信息提醒不到位，很容易增加用戶的理解成本和使用難度。
- 浮動標(biāo)簽
浮動標(biāo)簽是指用戶在錄入時，內(nèi)部標(biāo)題（輸入性提示信息）進行浮動位移。這在一定程度上彌補了內(nèi)聯(lián)標(biāo)簽消失的問題。不過需要額外的開發(fā)工作量，并且拓展性不強，不適合作為主要的標(biāo)簽形式應(yīng)用在業(yè)務(wù)表單中。
一個系統(tǒng)中最好采用相對一致、穩(wěn)定的標(biāo)簽排列方式，否則頻繁變化的對齊方式也容易讓用戶無所適從。
三、表單的存在形式
表單信息量可大可小。有的可能只有一個字段，有的可能是包含多層卡片內(nèi)容，甚至是相互嵌套。不同的表單信息有著不同的存在形式，梳理歸納后，主要有以下5種。
1、即時表單
常見于表格或者詳情頁面，通過編輯或新增功能觸發(fā)。即時表單與原有內(nèi)容保持一致，更強調(diào)操作的快捷性。
2、浮層表單
同樣是一種輕量化的表單方式，一般用于定向修改特定內(nèi)容。通常浮層空間較小，不用來承載大量的信息內(nèi)容。另外浮層緊隨修改內(nèi)容，操作效率更高。
3、彈窗表單
在抽屜組件出現(xiàn)之前，彈窗應(yīng)該是最為常見的表單交互形式。相比頁面跳轉(zhuǎn)，彈窗操作成本更低，但是空間比較受限，應(yīng)對大表單信息會有一定的難度。另外表單填寫時，可能會出現(xiàn)多層彈窗的情況。
4、抽屜
抽屜組件既可以承載較多的表單信息量，又可以和彈窗一樣在當(dāng)前頁面完成操作，并且相對于居中彈窗，不會對頁面核心內(nèi)容造成過多遮擋。因此在B端產(chǎn)品中應(yīng)用越來越廣泛。
5、頁面
頁面表單通常用于信息量較多的場景。一般會增加頁頭明確告知用戶在做什么，同時也要配置返回按鈕，方便用戶退出表單頁面。
以上就是表單基礎(chǔ)知識的解析。
下期我們來分析下表單設(shè)計的技巧~
原文地址：子牧UXD（公眾號）
作者：子牧先生
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》設(shè)計基礎(chǔ)(6): 表單基礎(chǔ)知識解析
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.xintaizi.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司