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