整理了一篇斷斷續(xù)續(xù)寫了很久的文章，結(jié)合最近的讀書筆記和自己的工作經(jīng)歷探討一下表單設(shè)計中的一二。
如何定義表單，表單的構(gòu)成元素有哪些
表單無處不在，表單主宰者我們生活中涉及到信息輸入的一切，表單在互聯(lián)網(wǎng)產(chǎn)品中有著十分重要的作用，我想可以毫不夸張的說，表單是人們與網(wǎng)絡(luò)世界發(fā)生互動的入口，表單的重要性不言而喻。那么什么樣的形式才能被稱為表單，先下一個模糊的定義：只要有允許用戶輸入信息和提交信息的頁面，都可以稱作為表單（傳統(tǒng)的紙質(zhì)的手寫的表格也屬于表單），可以說表單承載著所有手動的信息源錄入的入口，優(yōu)秀的表單設(shè)計可以極大的提高信息錄入的效率。
哪些信息的綜合才能被成為表單呢，表單的構(gòu)成元素主要分為三塊：信息標簽，信息輸入控件，動作。具體的內(nèi)容將會在下文詳細闡述
信息標簽
在一個表單中文本相關(guān)的內(nèi)容都可以被歸納到信息標簽一類中，常見的內(nèi)容包括標題、提示信息、幫助文字、狀態(tài)信息等，本質(zhì)上來說這些信息標簽的存在都是為了人們能夠更高效的完成表單而存在。首先我們來說一說標題，標題對于一張表單來說就像是一個表單的眼睛，標明當前表單主要目的一句文字描述，對于用戶來說猛然進入到表單頁面，一個能夠說明當前是在做什么的表單標題對于消除用戶的疑慮有著很顯著的作用，表單標題的文字描述不需要在標題中使用過多的修飾詞（甚至不使用修飾詞），告訴人們在填什么表單，填完后能干什么，提示信息、幫助文字和狀態(tài)信息也是如此，以簡潔高效的傳達信息為主。對于表單填寫頁面來說，需要盡可能的去除任何會分散用戶填寫表單時注意力的媒體信息，以營造沉浸式的表單填寫環(huán)境。
對于這一類的信息標簽，我們在撰寫的時候需要遵循以下幾個關(guān)鍵的描述方式：
· 文字描述盡量簡潔直觀，避免出現(xiàn)冗長累贅的文本需要用戶閱讀
· 用詞盡可能能夠貼近用戶的使用場景
· 盡量使用簡潔肯定的語氣描述
· 同一類的信息標簽字數(shù)上盡量滿足視覺上一致性的要求
常見的表單信息輸入控件
文本框
表單最基礎(chǔ)也是應用最廣泛的控件，主要作用是用于輸入內(nèi)容（文本或者符號），根據(jù)需要可進行字符數(shù)或文本格式限制
單選框
僅允許用戶從一組數(shù)量較少的相互獨立的選項中選擇一項，須有默認選項
復選框
允許用戶從一組相互獨立的選項中選擇不止一項，應確保所有的選項都能夠被激活
下拉列表
允許用戶能夠從一組數(shù)量較多的相互獨立的選項中選擇一項，下拉菜單需要有明顯的下拉箭頭顯示更多選項，下拉菜單對頁面空間的利用率較高，對于數(shù)量較多的單選項來說優(yōu)先選擇下拉菜單，但是因為有下拉菜單的存在，展示區(qū)域有限，盡量避免在下拉菜單中放入過多的選項
穿梭框
在多欄之間移動某些特定信息單元，點擊中間的方向按鈕完成選擇行為
圖片、文件等文件上傳器
上傳圖片或者文件的入口，需要有上傳文件的進度提醒，一般會在前端進行文件格式和大小的校驗
時間選擇器、級聯(lián)選擇器等復合型選擇器
特殊用途的輸入框，僅為特定場景定制使用，如時間選擇器幾乎都只用在需要進行時間選擇的地方，級聯(lián)選擇器用在所選擇的信息已經(jīng)被準確的進行層級分類（如省市區(qū)地址一類）
表單中的動作設(shè)計
對表單動作的設(shè)計也是組成表單非常重要的一個模塊，合理設(shè)計的動作可以減少用戶對表單產(chǎn)生誤操作的概率，也可以提高表單的使用效率。上述列舉了表單的基礎(chǔ)構(gòu)成，那么當一個表單僅僅是一堆表單控件的堆砌，并不能構(gòu)成一個完成的表單，也并不能讓用戶完成表單的填寫，更不可能得到我們期望的填寫體驗。
根據(jù)填寫表單的動作時間可以分為三類：起始動作、過程動作和終止動作
· 起始動作：開始（表單入口）
· 過程動作：進程指示器，快捷鍵設(shè)計（主要為Tab鍵等快速切換），分步按鈕，外部鏈接
· 終止動作：撤銷，重置，分步按鈕，提交（完成）
開始
一般為開始填寫表單的入口，需要有明確的入口信息
進程指示器
進程指示器優(yōu)先使用在有明確步驟劃分的表單填寫進程中，一整個表單可以被劃分為一系列的小步驟，并且這些小步驟之間確實存在一定的先后順序。進程指示器會詳細的告訴用戶當前處在表單填寫的那一個步驟，以及距離完成還需要多好個步驟。進程指示器必須要顯示實時的填寫進度，每個步驟建議采用一致的常見的編號方式對進度進行編號（數(shù)字、字母等）
快捷鍵設(shè)計
在進行動作設(shè)計時，必須要考慮使用快捷鍵進行跳轉(zhuǎn)的問題，包括使用tab鍵、enter鍵或上下左右鍵的來控制對輸入框的切換。常規(guī)的切換順序建議按照目標用戶的閱讀習慣來設(shè)計，如大部分的時候我們都會依照從左至右自上而下的切換順序。
外部鏈接
外部鏈接的跳轉(zhuǎn)在表單中也很常見的動作之一，除非在非常必要的情況下添加外部鏈接，否則建議不要在表單中使用外部鏈接，因為外部鏈接很容易打斷用戶當前填寫表單的沉浸體驗
撤銷
撤銷屬于對于單個表單控件的破壞習慣動作，對于撤銷操作的設(shè)計需要基于用戶可逆的返回操作，比如常見的在win系統(tǒng)中為Ctrl+Z和Ctrl+Y(在Mac中為Cmd+Z和Cmd+Y)
重置
重置也屬于對于整個表單的破壞性動作，對于重置這里一類破壞性較強的操作，一般在視覺上進行弱化處理，和主動作在視覺上形成明顯的層級對比。在進行重置按鈕式，一般建議讓用戶進行二次確認，并且提供簡單的恢復方式，
分步按鈕
在采用進程指示器的表單中，我們經(jīng)常能夠看到類似于"下一步”一類含義的按鈕，這類按鈕存在的價值一方面是檢查當前步驟中的必要信息的填寫完整性，還有一方面是在當前步驟結(jié)束后給予用戶明確的反饋。
提交（完成）
此類操作意味著當前表單的結(jié)束，甚至包含部分在當前流程中不可逆的成分存在，所以提交與完成動作的設(shè)計也需要相當謹慎，提交完成按鈕的設(shè)計建議是是是校驗表單所需的必要信息完整性，滿足條件時才釋放可點擊狀態(tài)，當一個頁面中存才不止一個按鈕時，我們更需要把視覺焦點放在提交（完成）的操作上。不過現(xiàn)在很多時候提交按鈕經(jīng)常與一些條款類文件的“同意閱讀”綁定在一起，如“同意條款并立即提交”“提交即視為同意服務(wù)協(xié)議”等，這樣的結(jié)合其實一定程度上優(yōu)化了降低了用戶發(fā)生模棱兩可心理活動的機會：不同意這個條款我還能不能提交信息？我點了同意之后真的能夠提交信息嗎？將兩個具有從屬關(guān)系且都是唯一性的操作合并在一起，避免引起復雜化。
表單的反饋設(shè)計
我們期望用戶給我們是有用數(shù)據(jù)，也希望用戶能夠一氣呵成完成表單的填寫，但是當用戶費盡心思的填寫表單時，難免會對表單列出的內(nèi)容發(fā)生誤解，從而輸入了一些錯誤的信息，這時候就需要觸發(fā)表單的校驗反饋機制。我們不得不打斷整個沉浸的填寫過程，告訴他：不好意思，剛剛這個地方你填的不對。
那么在表單的反饋中，該如何設(shè)計反饋機制才能將這種錯落感降到最低，首先就是我們對有特定要求的數(shù)據(jù)進行實時校驗。哪些數(shù)據(jù)最好進行實時校驗呢，首先就是類似于手機號碼、證件號碼這一類有著明顯格式屬性的信息，這一類信息一旦錯誤，對我們來說將毫無價值，還有一類如密碼的設(shè)置這類信息需要對其安全性進行校驗和計算，通過頁面反饋基于用戶當前安全、重要程度的提示.
根據(jù)長期的表單設(shè)計的經(jīng)驗，總結(jié)了一下幾點：
· 表單項目填寫時的錯誤反饋，實時校驗，盡早驗證給予用戶反饋
· 表單填寫完成后給予用戶正向激勵式的反饋
· 填寫表單的過程中的慎用彈窗反饋
（彈窗實際上是一種用戶體驗非常差的交互機制，一而再的彈窗會打斷人們思考問題的邏輯，會增加了操作的復雜性，彈窗后還需要去閱讀彈窗內(nèi)容，尋找關(guān)閉彈窗的方式）
我們需要盡可能的去營造沉浸的填寫體驗，使表單填寫一氣呵成
簡單易用的表單的其他一些關(guān)鍵特征
由于文章篇幅的原因，還有很多綜合性的表單設(shè)計技巧無法一一詳細展開敘述，整理了以下一些我認為比較關(guān)鍵的因素與大家分享。
· 一頁表單只做一個主題的事，沉浸在當前的信息中，對于較長的表單建議采用分步導航
· 頁面上盡可能的排除與填寫當前表單無關(guān)的一些視覺元素
· 將表單的內(nèi)容最好按照邏輯順序進行分組
· 在有大量表單的頁面，視覺效果上應該盡可能的采用簡潔的設(shè)計風格，過多的視覺信息會打破沉浸的填寫體驗，弄巧成拙
· 表單的控件要兼容市面上的全部主流瀏覽器
· 表單在填寫時，視覺上最好能夠擁有一條清晰的自上而下的視覺線
· 表單的排版方式：左對齊>頂部對齊>右對齊（具體的原因?qū)谄渌恼轮屑氄f）
上文主要和大家討論了我在僅有的交互設(shè)計工作經(jīng)歷中總結(jié)的一些心得，肯定有很多觀點還存在不成熟的地方，接下來仍會不斷的學習，同時完成本篇文章時也吸收和借鑒了很多前輩們的書籍和文章中的觀點，在此一并表示敬意。
參考資料：
《Web Form Design: Filling in the Blanks 》
《Forms taht Works Designing Web Forms for Usability》
原創(chuàng)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載
