起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識360°全方位表單設(shè)計指南（二）
編輯導(dǎo)語：所有產(chǎn)品都離不開表單，注冊需要表單、填寫收貨地址需要表單、報名需要表單，就連支付時都需要輸入一個數(shù)字，所以優(yōu)秀的表單設(shè)計對提高產(chǎn)品體驗至關(guān)重要；作為一個填表多年的“偽表單老司機”，今天繼續(xù)給大家分享全方位表單設(shè)計指南的第二個方面：表單元素設(shè)計。
全方位表單設(shè)計指南系列共三篇文章，上一篇文章用四千字給大家介紹了表單的“出生”階段需要考慮的幾個方面并講述了每個階段需要遵循的設(shè)計原則。
本篇文章重點為大家講解表單本身的組成元素以及每種元素該如何設(shè)計。
表單是網(wǎng)頁中負(fù)責(zé)數(shù)據(jù)輸入的重要途徑，是表單體系的核心組成部分，一個完整的表單應(yīng)該由四個重要元素組成：
- 標(biāo)簽
- 表單域
- 表單按鈕
- 幫助信息
一、標(biāo)簽
標(biāo)簽是指表單的名稱，用來表明表單域要求輸入的內(nèi)容。標(biāo)簽的設(shè)計我們需要遵循的原則是：
- 簡潔、易懂
- 選用恰當(dāng)?shù)膶R方式
1. 簡潔、易懂
第一篇文章中說過用戶是不愿意填寫表單的，我們需要盡可能的減少用戶填寫表單的成本。
越簡潔的標(biāo)簽用戶閱讀和思考的時間就越短，這一點在填寫表單之后復(fù)查表單時表現(xiàn)的尤為明顯，很多用戶習(xí)慣用掃視的方式快速瀏覽表單，如果表單標(biāo)簽過于繁瑣無疑會減慢用戶的瀏覽速度。
對比下方左右兩種標(biāo)簽命名方式，很明顯右側(cè)的命名更加一目了然便于閱讀：
需要注意的是：“簡潔”和“易懂”是兩個詞。
雖然大多數(shù)情況下簡潔的語言更易懂，但是還是要考慮特殊的不同的情境和產(chǎn)品意圖，比如你的產(chǎn)品面對的用戶群體主要是小朋友，那么將“姓名”替換為“你叫什么名字呢？”會更利于理解和接受；再比如如果你希望你的用戶在填寫表單時認(rèn)真思考而不要過于匆忙，也可以試著用更多的字來命名表單標(biāo)簽。
總之，優(yōu)化標(biāo)簽的目標(biāo)是為了更利于閱讀更利于理解和接受降低用戶填寫表單的成本。
2.? 選用恰當(dāng)?shù)膶R方式
對齊是指標(biāo)簽與表單域的相對位置，不同的對齊方式有不同的優(yōu)點和弊端，適用于不同的應(yīng)用場景。
標(biāo)簽常見的對齊方式有：
- 頂對齊
- 左對齊
- 右對齊
- 表單域內(nèi)對齊
1）頂對齊
頂對齊的方式使得用戶在瀏覽表單時視線流更容易在一條線，從而降低視線從標(biāo)簽切換到表單域再從表單域切換到下一個標(biāo)簽的時間。
眼動研究的結(jié)果表明：頂對齊的方式視線從標(biāo)簽移動到輸入框只要50毫秒，左對齊需要500毫秒，右對齊需要240毫秒——可以發(fā)現(xiàn)頂對齊是最有利于減少用戶填寫表單時間的對齊方式。
頂對齊的方式還能夠節(jié)省頁面的橫向空間，從而可以讓標(biāo)簽的命名有了更多可能；相反的頂對齊的方式會占用更多的垂直空間，當(dāng)表單數(shù)量過多時會顯的頁面非常的長從而讓用戶產(chǎn)生疲勞。
2）左對齊
當(dāng)表單不同的表單縱向排列時，左對齊的方式會使得同一列標(biāo)簽的第一個字符在一條直線上，這樣的方式更易于瀏覽標(biāo)簽的內(nèi)容。
如果你的表單總是需要用戶挑選部分表單填寫，左對齊的方式會更利于用戶快速找到自己需要填寫的表單；在標(biāo)簽作為一個二級入口出現(xiàn)時使用左對齊而不是右對齊，也是利用了左對齊易于閱讀的的優(yōu)點。
當(dāng)表單標(biāo)簽的內(nèi)容為用戶陌生的內(nèi)容時使用利用左對齊易于閱讀的優(yōu)點可以一定程度上幫助用戶理解標(biāo)簽內(nèi)容。
但是左對齊標(biāo)簽有一個致命的缺點：增大了標(biāo)簽與表單域之間的距離，特別是存在長標(biāo)簽時經(jīng)常使得某些標(biāo)簽距離表單域很遠(yuǎn)；使得用戶不得不仔細(xì)的對照標(biāo)簽與相應(yīng)的表單域以防止出錯，這樣會極大的增加填寫表單的難度和時間。
這個缺點是左對齊標(biāo)簽很少被大家采用的一個重要原因。
3）右對齊
右對齊的方式能讓標(biāo)簽與表單域相鄰，用戶能夠準(zhǔn)確的將標(biāo)簽與相應(yīng)的表單域?qū)?yīng)；也減少了視線從標(biāo)簽移動到表單域的距離，兩方面的共同作用降低了用戶的填表時間。
但是右對齊的方式會導(dǎo)致同一列標(biāo)簽的左側(cè)層次不齊，這樣不利于用戶閱讀瀏覽，加上我們的閱讀習(xí)慣是從左往右閱讀，如果某些情況下一個標(biāo)簽出現(xiàn)兩行字的話會更加不利于閱讀。
4）表單域內(nèi)對齊
表單域內(nèi)對齊是將標(biāo)簽放在表單域內(nèi)部顯示，這種方式最大的優(yōu)點就是節(jié)省空間，既節(jié)省了橫向空間又節(jié)省了垂直空間。
但是由于將標(biāo)簽放在了表單域內(nèi)部，填寫表單域時標(biāo)簽就必須消失，這樣就產(chǎn)生了一個問題：當(dāng)需要填寫的表單很多時，用戶很容易忘記已經(jīng)填寫的表單分別是什么。
所以這種方式僅適合表單數(shù)量較少時使用，比如搜索框、登錄。
將標(biāo)簽放在表單域內(nèi)還會導(dǎo)致顯示方式與下拉菜單沖突，當(dāng)選中一個選項時所選擇的選項也是在下拉菜單的輸入框中顯示，所以當(dāng)為下拉菜單采用表單域內(nèi)對齊的方式時務(wù)必將標(biāo)簽與選項區(qū)分開。
二、表單域
表單域是數(shù)據(jù)輸入的入口，是用戶與表單發(fā)生交互的最重要部分。常見的表單域分為五種類型。
- 文本框
- 單選按鈕
- 復(fù)選框
- 下拉菜單
- 列表框
1. 文本框
文本框是最常見的表單域類型，分為單行文本框和多行文本框；文本框允許輸入任意類型和數(shù)量（除非程序做了限制）的字符，靈活性是它最大的優(yōu)點。
但是也正是由于文本框的靈活，它的防錯能力十分低下；比如當(dāng)使用文本框來輸入付款錢數(shù)時，如果用戶輸入了漢字就會導(dǎo)致提交付款時代碼報錯，所以這種情況必須在用戶輸入錯誤類型時給出相應(yīng)的提示，而實際上這些提示對用戶完成表單填寫是多余的干擾。
因為文本框的輸入需要依賴鍵盤，在不同的文本框之間進行切換時需要依賴點擊，所以用戶在填寫含有大量文本框的表單時就需要經(jīng)常的在點擊和鍵盤之間來回切換（在PC上可以使用Tab鍵切換，但是很多人并不習(xí)慣或并不知道Tab鍵切換），這樣極大的損害了操作的流暢程度。
2. 單選按鈕
單選按鈕由一組互斥的選擇項組成，每組單選按鈕只可選擇其中一個選擇項。
由于單選按鈕限定了可選擇的數(shù)據(jù)范圍所以它的防錯能力比較突出，避免了用戶輸入錯誤類型數(shù)據(jù)的發(fā)生。
另外單選按鈕只需要點擊一次即可完成數(shù)據(jù)的輸入，所以從提高輸入效率上單選按鈕會表現(xiàn)的不錯。
但是由于單選按鈕需要將可供選擇的項一一列舉，所以采用單選按鈕的表單無法承載過多的可選項，極大的限制的可輸入數(shù)據(jù)的范圍。
因此單選按鈕僅適用于選項較少的輸入場景，目前普遍的做法是僅將單選按鈕用于只有兩個可選項的表單輸入，比如性別的選擇。
使用單選按鈕時需要注意點擊輸入框或者標(biāo)簽文字都應(yīng)該能觸發(fā)選中的動作。
3. 復(fù)選框
復(fù)選框同單選按鈕一樣也是由多個可選項組成，不同的是復(fù)選框允許同時選擇多個選項，這樣既保持了單選按鈕限定可輸入數(shù)據(jù)范圍從而防錯的優(yōu)點又增加了可輸入數(shù)據(jù)的多樣性。
但是跟單選按鈕有著同樣的缺點：無法承載過多的可選擇項，否則很容易導(dǎo)致頁面布局變得混亂。
4.? 下拉菜單
下拉菜單將多個選項隱藏在了一個可選擇的輸入框中，激活輸入框可以以下拉列表的形式展示出所有可選項，允許從多個可選項中選擇其中一個。
首先下拉菜單同樣限定了可輸入數(shù)據(jù)的范圍，但是因為下拉菜單有一個隱藏的下拉列表，所以可容納的可選項相較于單選按鈕和復(fù)選框有極大的提升。
在增加搜索功能的前提下，下拉菜單可以容納數(shù)以百計的可選項，能達(dá)到防止輸錯的同時又方便選擇的目的。
相較于單選按鈕和復(fù)選框，下拉菜單還可以節(jié)省頁面空間。
但是下拉菜單需要先激活菜單顯示可選項然后點擊選項完成選擇，從操作效率上比較低下；另外由于下拉菜單在未選擇狀態(tài)下輸入框中也會有相應(yīng)的提示文本，因此很容易在輸入時被忽略掉。
5. 列表框
列表框在形式上沿用了下拉列表用一個可滾動的區(qū)域來顯示選項的方式，與下拉列表不同的是列表框既允許選擇一個選項也允許選擇多個選擇項。
所以列表框完全繼承了下拉列表可防止輸錯、容納較多選擇項的優(yōu)點，同時又支持了可選擇多項的操作。
列表框還可以像下拉列表一樣設(shè)計成初始不顯示選項，激活后顯示選項列表的形式，從而節(jié)省空間。
但是由于列表框既支持多選又支持單選的特性，很容易讓用戶迷惑到底應(yīng)該選擇一個還是多個，所以適用場景不是很多，或者需要增加必要的輸入校驗和提示文字。
三、表單按鈕
表單按鈕是用來完成表單的觸發(fā)器，分為主要按鈕和輔助按鈕。
常見的表單按鈕有保存、提交、確定、登錄等等，列舉的這幾個按鈕都是完成表單必不可少的按鈕我們稱之為主要按鈕；還有一些按鈕例如預(yù)覽、幫助、撤銷、重置等并非是完成表單的必要按鈕我們稱之為輔助按鈕。
按鈕的設(shè)計需要注意將主要按鈕與次要按鈕設(shè)計成視覺差異清晰的不同樣式，這樣做的目的：一是為了能快速的定位主要按鈕以完成表單，二是防止誤將輔助按鈕當(dāng)做主要按鈕使用造成嚴(yán)重的錯誤。
很多時候主要按鈕和輔助按鈕是相鄰擺放的，比如提交和預(yù)覽、保存和重置、確定和取消，試想一下如果保存和重置兩個按鈕的外觀完全相同，很容易點擊保存時錯誤的點擊了重置；這個時候用戶辛辛苦苦填寫完的表單因為一個誤操作需要重新填寫一遍，是不是很糟糕?
盡量將主要按鈕放在用戶填寫表單的視線流內(nèi)，這樣能方便用戶定位主要按鈕，如果輔助按鈕放在了填寫表單的視線流內(nèi)或其他顯眼的位置很容易誤導(dǎo)用戶誤操作。
輔助按鈕可以根據(jù)表單輸入的情況在特定的時機出現(xiàn)，例如只有在文本框被激活時才顯示相應(yīng)的幫助信息圖標(biāo)按鈕，但是主要按鈕必須始終顯示；否則容易讓用戶無法預(yù)知完成表單的操作路徑而感到疑惑，試想一下如果你看到的登錄頁面沒有登錄按鈕會不會很疑惑怎么才能完成登錄？
而當(dāng)你帶著疑惑輸入完了賬號和密碼后登錄按鈕出現(xiàn)了，你會不會十分想吐槽一句：什么XX反人類設(shè)計??？
操作按鈕設(shè)計一部分還涉及到交互設(shè)計，這部分我們在第三篇文章交互設(shè)計部分再進行說明。
四、幫助信息
幫助信息是一套輔助用戶完成表單填寫的信息，很多時候用戶在填寫表單時會遇到自己意料之外的困難；我們需要靠幫助信息來告訴用戶該怎么填寫表單、遇到問題該怎么處理或者讓用戶確信自己完成了某個操作。
幫助信息分為三種：
- 幫助信息
- 錯誤信息
- 成功信息
1. 幫助信息
幫助信息是指在用戶不知如何填寫表單時，頁面上提供的用于說明表單該如何填寫的信息。
幫助信息一般不是用戶必需的信息，即：只有在用戶需要幫助時出現(xiàn)才會有意義，否則出現(xiàn)幫助信息在大多數(shù)情況下都是一種不必要的干擾。
幫助信息出現(xiàn)的時機有以下兩種情況：
- 自動即時幫助；
- 主動激活的幫助；
1）自動即時幫助
自動即時幫助隨著用戶填寫表單的動作自動實時出現(xiàn)，實時出現(xiàn)的幫助信息一般適用于簡單的、字?jǐn)?shù)較少的幫助內(nèi)容；一般在用戶激活某個輸入框時，自動顯示在輸入框的旁邊或者以彈窗的形式顯示在輸入框上方，字?jǐn)?shù)稍多一點時可以在頁面右側(cè)留出一塊專門的區(qū)域用來顯示即時出現(xiàn)的幫助信息；他們都是在輸入框激活時自動出現(xiàn)，在光標(biāo)離開輸入框時即自動消失。
需要注意的是，當(dāng)將即時幫助信息自動展示在輸入框附近時有可能會導(dǎo)致頁面排版因為多出來的文本而變形。
2）主動激活的幫助
主動激活的幫助與自動即時幫助的不同在于，幫助信息不會在用戶操作表單時自動出現(xiàn)，而是需要用戶主動點擊文字鏈接或者幫助圖標(biāo)才會出現(xiàn)。
這種方式適用于所填寫的內(nèi)容都是大家普遍了解的情況，頻繁的自動出現(xiàn)幫助信息容易對用戶造成干擾；因此可以只顯示一個用來觸發(fā)顯示的入口，這個入口可以是一個文字鏈接也可以是一個圖標(biāo)。
這種方式同樣需要注意幫助信息導(dǎo)致其他表單位置發(fā)生變化的問題，這會使得用戶的視線總是隨著位置不停變化的表單不停的跳動。
所以采用這種方式時可以只在提示文本較少時使用，或者將提示文本出現(xiàn)的位置放在一個不會影響其他頁面元素的位置，或者使用彈窗顯示提示文本。
有一種情況必須使用主動激活的幫助而不能使用自動即時幫助，這種情況就是需要大量的復(fù)雜的解釋甚至是教程來告訴用戶如何完成表單時。
這種情況下需要顯示的幫助信息十分龐大復(fù)雜，有時候還會用到圖表，我們必須單獨使用一塊區(qū)域來承載這些復(fù)雜的信息，這個時候使用一個獨立的模態(tài)彈窗或者新的頁面來展示幫助信息是一個好的選擇。
另外，有些需要反復(fù)輸入的表單使用這種提示方式也會更好，這些獨立的彈窗或頁面就像是擺在旁邊的一本書，你隨時可能需要看一眼。
這種方式在office套裝中經(jīng)?？梢砸姷?。
2. 錯誤信息
錯誤信息是由于系統(tǒng)出錯或者用戶輸入的數(shù)據(jù)類型不符合要求，而導(dǎo)致不被表單接受被動出現(xiàn)的幫助信息，比如用戶在填寫金額的文本框里輸入了漢字或者程序出現(xiàn)了尚未解決的Bug；前者我們需要用錯誤信息告訴用戶當(dāng)前過程出現(xiàn)了錯誤、錯誤在哪里、該如何解決；后者除此之外我們還應(yīng)該向用戶道歉。
由于錯誤信息屬于遇到錯誤時被動即時出現(xiàn)的錯誤提示，嚴(yán)重阻礙了用戶填寫表單的過程，因此我們需要用清晰且明顯的方式對用戶進行提示，以讓用戶能立刻明白現(xiàn)在有錯誤發(fā)生并迅速了解需要怎么處理。
我們可以遵循以下原則處理：
1）在情境中提示錯誤，以便于用戶得知錯誤后進行修改
在情境中提示錯誤即：將錯誤提示直接顯示在出錯的位置附近，這樣用戶看到錯誤信息后無需再去尋找錯誤位置即可直接進行修改。
2）使用多重視覺提示，使提醒更加明顯同時方便色盲用戶
使用顏色、樣式等多種方式展示錯誤信息，這樣在視覺上形成的沖擊效果更強烈更容易讓人意識到錯誤的發(fā)生也更容易定位錯誤的位置。
使用可以突出顯示的顏色來處理錯誤信息是我們最習(xí)慣的處理方式，但是我們需要考慮色盲用戶的使用情況；除了顏色之外我們需要至少提供一種其他的可以不依賴顏色識別錯誤信息的方式，比如可以對錯誤信息使用不同的字體、增加圖標(biāo)的顯示、給錯誤信息增加底色等方式。
3）在錯誤較多時可以將錯誤信息在頁面頂部統(tǒng)一展示，以便于用戶清楚所有錯誤
這種方式適用于頁面表單較多時，提交表單時檢測到多處表單發(fā)生錯誤，如果僅僅在相應(yīng)的錯誤表單旁標(biāo)注錯誤信息很難清楚一共有多少錯誤發(fā)生，用戶處理錯誤的過程很容易就變成了一次盲目找錯的過程；所以這種情況可以在頁面頂部將所有錯誤都列出來，使用這種方式時同時需要將出錯的表單標(biāo)注出來以便于定位錯誤表單。
需要注意的是任何一種處理方式都需要全局保持一致的錯誤消息顯示樣式，不能有的采用增加圖標(biāo)有的采用彈窗有的增加了底色，這樣會顯示非常的凌亂從而降低用戶的視覺體驗。
3. 成功信息
成功信息是表單填寫完成提交后給出的提示信息，經(jīng)常有人在設(shè)計時忘記設(shè)計成功信息，用戶在提交表單之后什么提示都沒有直接跳轉(zhuǎn)到下一個頁面，有些僅僅顯示了很簡短的成功信息，類似“操作完成！”“已提交！”。
提交表單之后給出明確的成功信息是非常必要的，用戶需要明確的知道自己剛才的操作是否正確完成而且成功生效了；否則用戶很可能會產(chǎn)生疑惑進而產(chǎn)生是不是自己沒正確提交的顧慮，這種顧慮在一些重要信息的提交時表現(xiàn)的尤為明顯，比如支付、報名。
而簡短的成功信息已經(jīng)可以讓用戶對自己的操作有“已經(jīng)正確完成了”的信心，但是仍然有很大的優(yōu)化空間。
可以從以下幾個方面進行優(yōu)化：
1）使用動畫讓成功消息表現(xiàn)的更形象
人類本能的更容易理解動畫所表達(dá)的含義，用適當(dāng)?shù)膭赢嫽蛘邉有砼浜铣晒ο⒌恼故緯菀鬃屓舜_信自己的操作已成確完成。
比如向列表中剛剛添加成功的數(shù)據(jù)的背景色自動漸變，逐漸從一個特殊的顏色淡化為與其他已添加的數(shù)據(jù)一致的顏色，會讓人更確信這條數(shù)據(jù)已經(jīng)成功的完成添加。
2）贊揚用戶，借機增加用戶使用產(chǎn)品的愉悅感
當(dāng)用戶成功的完成并提交了表單時，他們實際上是完成了一項任務(wù)或者達(dá)成了某個目標(biāo)，這些是用戶填寫表單的真正目的，試著把這個結(jié)果用肯定的語氣告訴用戶會讓他們備受鼓舞。
- 比如報名完成時告訴用戶已經(jīng)獲得了參加某某考試的資格，支付完成時告訴用戶已經(jīng)買到了自己心儀的商品，會讓用戶有一種已經(jīng)實現(xiàn)目標(biāo)的成就感，最后可以適當(dāng)?shù)脑黾右恍┳ＹR的語句。
- 比如用戶要報名一次考試，提交報名信息后用戶很可能會希望再看一眼自己的報名內(nèi)容，有可能會需要修改所以在用戶提交報名之后轉(zhuǎn)向報名信息的核對頁面是一個比較好的處理。
- 比如用戶要向商品庫中增加一個新商品，新增完成后用戶很可能還需要繼續(xù)增加新的商品，所以此時提示完成添加后繼續(xù)留在新增商品的頁面更符合用戶的預(yù)期。
- 比如用戶完成了機票的購買，很可能會希望給自己的手機發(fā)送一條行程記錄，此時在提示已完成購買機票之后提供自動發(fā)送行程短信的功能會讓用戶感覺到很方便和貼心。
五、結(jié)語
至此，《360°全方位表單設(shè)計指南》的第二篇文章就結(jié)束了，感謝大家抽出時間閱讀這篇文章，歡迎大家在評論區(qū)提出自己寶貴的意見，讓我們一起成長！
下一篇文章會給大家分享表單交互設(shè)計的相關(guān)知識，歡迎感興趣的朋友關(guān)注小弟，第一時間接收文章推送哦！
作者：時光時光慢些吧，公眾號：pmreport
本文由 @時光時光慢些吧 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
淺藍(lán)色背景搭配白色和灰色文字看完文章眼睛花了