編輯導(dǎo)語(yǔ)：所有產(chǎn)品都離不開(kāi)表單，注冊(cè)需要表單、填寫收貨地址需要表單、報(bào)名需要表單，就連支付時(shí)都需要輸入一個(gè)數(shù)字，所以優(yōu)秀的表單設(shè)計(jì)對(duì)提高產(chǎn)品體驗(yàn)至關(guān)重要；作為一個(gè)填表多年的“偽表單老司機(jī)”，今天繼續(xù)給大家分享全方位表單設(shè)計(jì)指南的第二個(gè)方面：表單元素設(shè)計(jì)。

全方位表單設(shè)計(jì)指南系列共三篇文章，上一篇文章用四千字給大家介紹了表單的“出生”階段需要考慮的幾個(gè)方面并講述了每個(gè)階段需要遵循的設(shè)計(jì)原則。

本篇文章重點(diǎn)為大家講解表單本身的組成元素以及每種元素該如何設(shè)計(jì)。

表單是網(wǎng)頁(yè)中負(fù)責(zé)數(shù)據(jù)輸入的重要途徑，是表單體系的核心組成部分，一個(gè)完整的表單應(yīng)該由四個(gè)重要元素組成：

1. 標(biāo)簽
2. 表單域
3. 表單按鈕
4. 幫助信息

一、標(biāo)簽

標(biāo)簽是指表單的名稱，用來(lái)表明表單域要求輸入的內(nèi)容。標(biāo)簽的設(shè)計(jì)我們需要遵循的原則是：

1. 簡(jiǎn)潔、易懂
2. 選用恰當(dāng)?shù)膶?duì)齊方式

1. 簡(jiǎn)潔、易懂

第一篇文章中說(shuō)過(guò)用戶是不愿意填寫表單的，我們需要盡可能的減少用戶填寫表單的成本。

越簡(jiǎn)潔的標(biāo)簽用戶閱讀和思考的時(shí)間就越短，這一點(diǎn)在填寫表單之后復(fù)查表單時(shí)表現(xiàn)的尤為明顯，很多用戶習(xí)慣用掃視的方式快速瀏覽表單，如果表單標(biāo)簽過(guò)于繁瑣無(wú)疑會(huì)減慢用戶的瀏覽速度。

對(duì)比下方左右兩種標(biāo)簽命名方式，很明顯右側(cè)的命名更加一目了然便于閱讀：

需要注意的是：“簡(jiǎn)潔”和“易懂”是兩個(gè)詞。

雖然大多數(shù)情況下簡(jiǎn)潔的語(yǔ)言更易懂，但是還是要考慮特殊的不同的情境和產(chǎn)品意圖，比如你的產(chǎn)品面對(duì)的用戶群體主要是小朋友，那么將“姓名”替換為“你叫什么名字呢？”會(huì)更利于理解和接受；再比如如果你希望你的用戶在填寫表單時(shí)認(rèn)真思考而不要過(guò)于匆忙，也可以試著用更多的字來(lái)命名表單標(biāo)簽。

總之，優(yōu)化標(biāo)簽的目標(biāo)是為了更利于閱讀更利于理解和接受降低用戶填寫表單的成本。

2.? 選用恰當(dāng)?shù)膶?duì)齊方式

對(duì)齊是指標(biāo)簽與表單域的相對(duì)位置，不同的對(duì)齊方式有不同的優(yōu)點(diǎn)和弊端，適用于不同的應(yīng)用場(chǎng)景。

標(biāo)簽常見(jiàn)的對(duì)齊方式有：

1. 頂對(duì)齊
2. 左對(duì)齊
3. 右對(duì)齊
4. 表單域內(nèi)對(duì)齊

1）頂對(duì)齊

頂對(duì)齊的方式使得用戶在瀏覽表單時(shí)視線流更容易在一條線，從而降低視線從標(biāo)簽切換到表單域再?gòu)谋韱斡蚯袚Q到下一個(gè)標(biāo)簽的時(shí)間。

眼動(dòng)研究的結(jié)果表明：頂對(duì)齊的方式視線從標(biāo)簽移動(dòng)到輸入框只要50毫秒，左對(duì)齊需要500毫秒，右對(duì)齊需要240毫秒——可以發(fā)現(xiàn)頂對(duì)齊是最有利于減少用戶填寫表單時(shí)間的對(duì)齊方式。

頂對(duì)齊的方式還能夠節(jié)省頁(yè)面的橫向空間，從而可以讓標(biāo)簽的命名有了更多可能；相反的頂對(duì)齊的方式會(huì)占用更多的垂直空間，當(dāng)表單數(shù)量過(guò)多時(shí)會(huì)顯的頁(yè)面非常的長(zhǎng)從而讓用戶產(chǎn)生疲勞。

2）左對(duì)齊

當(dāng)表單不同的表單縱向排列時(shí)，左對(duì)齊的方式會(huì)使得同一列標(biāo)簽的第一個(gè)字符在一條直線上，這樣的方式更易于瀏覽標(biāo)簽的內(nèi)容。

如果你的表單總是需要用戶挑選部分表單填寫，左對(duì)齊的方式會(huì)更利于用戶快速找到自己需要填寫的表單；在標(biāo)簽作為一個(gè)二級(jí)入口出現(xiàn)時(shí)使用左對(duì)齊而不是右對(duì)齊，也是利用了左對(duì)齊易于閱讀的的優(yōu)點(diǎn)。

當(dāng)表單標(biāo)簽的內(nèi)容為用戶陌生的內(nèi)容時(shí)使用利用左對(duì)齊易于閱讀的優(yōu)點(diǎn)可以一定程度上幫助用戶理解標(biāo)簽內(nèi)容。

但是左對(duì)齊標(biāo)簽有一個(gè)致命的缺點(diǎn)：增大了標(biāo)簽與表單域之間的距離，特別是存在長(zhǎng)標(biāo)簽時(shí)經(jīng)常使得某些標(biāo)簽距離表單域很遠(yuǎn)；使得用戶不得不仔細(xì)的對(duì)照標(biāo)簽與相應(yīng)的表單域以防止出錯(cuò)，這樣會(huì)極大的增加填寫表單的難度和時(shí)間。

這個(gè)缺點(diǎn)是左對(duì)齊標(biāo)簽很少被大家采用的一個(gè)重要原因。

3）右對(duì)齊

右對(duì)齊的方式能讓標(biāo)簽與表單域相鄰，用戶能夠準(zhǔn)確的將標(biāo)簽與相應(yīng)的表單域?qū)?yīng)；也減少了視線從標(biāo)簽移動(dòng)到表單域的距離，兩方面的共同作用降低了用戶的填表時(shí)間。

但是右對(duì)齊的方式會(huì)導(dǎo)致同一列標(biāo)簽的左側(cè)層次不齊，這樣不利于用戶閱讀瀏覽，加上我們的閱讀習(xí)慣是從左往右閱讀，如果某些情況下一個(gè)標(biāo)簽出現(xiàn)兩行字的話會(huì)更加不利于閱讀。

4）表單域內(nèi)對(duì)齊

表單域內(nèi)對(duì)齊是將標(biāo)簽放在表單域內(nèi)部顯示，這種方式最大的優(yōu)點(diǎn)就是節(jié)省空間，既節(jié)省了橫向空間又節(jié)省了垂直空間。

但是由于將標(biāo)簽放在了表單域內(nèi)部，填寫表單域時(shí)標(biāo)簽就必須消失，這樣就產(chǎn)生了一個(gè)問(wèn)題：當(dāng)需要填寫的表單很多時(shí)，用戶很容易忘記已經(jīng)填寫的表單分別是什么。

所以這種方式僅適合表單數(shù)量較少時(shí)使用，比如搜索框、登錄。

將標(biāo)簽放在表單域內(nèi)還會(huì)導(dǎo)致顯示方式與下拉菜單沖突，當(dāng)選中一個(gè)選項(xiàng)時(shí)所選擇的選項(xiàng)也是在下拉菜單的輸入框中顯示，所以當(dāng)為下拉菜單采用表單域內(nèi)對(duì)齊的方式時(shí)務(wù)必將標(biāo)簽與選項(xiàng)區(qū)分開(kāi)。

二、表單域

表單域是數(shù)據(jù)輸入的入口，是用戶與表單發(fā)生交互的最重要部分。常見(jiàn)的表單域分為五種類型。

1. 文本框
2. 單選按鈕
3. 復(fù)選框
4. 下拉菜單
5. 列表框

1. 文本框

文本框是最常見(jiàn)的表單域類型，分為單行文本框和多行文本框；文本框允許輸入任意類型和數(shù)量（除非程序做了限制）的字符，靈活性是它最大的優(yōu)點(diǎn)。

但是也正是由于文本框的靈活，它的防錯(cuò)能力十分低下；比如當(dāng)使用文本框來(lái)輸入付款錢數(shù)時(shí)，如果用戶輸入了漢字就會(huì)導(dǎo)致提交付款時(shí)代碼報(bào)錯(cuò)，所以這種情況必須在用戶輸入錯(cuò)誤類型時(shí)給出相應(yīng)的提示，而實(shí)際上這些提示對(duì)用戶完成表單填寫是多余的干擾。

因?yàn)槲谋究虻妮斎胄枰蕾囨I盤，在不同的文本框之間進(jìn)行切換時(shí)需要依賴點(diǎn)擊，所以用戶在填寫含有大量文本框的表單時(shí)就需要經(jīng)常的在點(diǎn)擊和鍵盤之間來(lái)回切換（在PC上可以使用Tab鍵切換，但是很多人并不習(xí)慣或并不知道Tab鍵切換），這樣極大的損害了操作的流暢程度。

2. 單選按鈕

單選按鈕由一組互斥的選擇項(xiàng)組成，每組單選按鈕只可選擇其中一個(gè)選擇項(xiàng)。

由于單選按鈕限定了可選擇的數(shù)據(jù)范圍所以它的防錯(cuò)能力比較突出，避免了用戶輸入錯(cuò)誤類型數(shù)據(jù)的發(fā)生。

另外單選按鈕只需要點(diǎn)擊一次即可完成數(shù)據(jù)的輸入，所以從提高輸入效率上單選按鈕會(huì)表現(xiàn)的不錯(cuò)。

但是由于單選按鈕需要將可供選擇的項(xiàng)一一列舉，所以采用單選按鈕的表單無(wú)法承載過(guò)多的可選項(xiàng)，極大的限制的可輸入數(shù)據(jù)的范圍。

因此單選按鈕僅適用于選項(xiàng)較少的輸入場(chǎng)景，目前普遍的做法是僅將單選按鈕用于只有兩個(gè)可選項(xiàng)的表單輸入，比如性別的選擇。

使用單選按鈕時(shí)需要注意點(diǎn)擊輸入框或者標(biāo)簽文字都應(yīng)該能觸發(fā)選中的動(dòng)作。

3. 復(fù)選框

復(fù)選框同單選按鈕一樣也是由多個(gè)可選項(xiàng)組成，不同的是復(fù)選框允許同時(shí)選擇多個(gè)選項(xiàng)，這樣既保持了單選按鈕限定可輸入數(shù)據(jù)范圍從而防錯(cuò)的優(yōu)點(diǎn)又增加了可輸入數(shù)據(jù)的多樣性。

但是跟單選按鈕有著同樣的缺點(diǎn)：無(wú)法承載過(guò)多的可選擇項(xiàng)，否則很容易導(dǎo)致頁(yè)面布局變得混亂。

4.? 下拉菜單

下拉菜單將多個(gè)選項(xiàng)隱藏在了一個(gè)可選擇的輸入框中，激活輸入框可以以下拉列表的形式展示出所有可選項(xiàng)，允許從多個(gè)可選項(xiàng)中選擇其中一個(gè)。

首先下拉菜單同樣限定了可輸入數(shù)據(jù)的范圍，但是因?yàn)橄吕藛斡幸粋€(gè)隱藏的下拉列表，所以可容納的可選項(xiàng)相較于單選按鈕和復(fù)選框有極大的提升。

在增加搜索功能的前提下，下拉菜單可以容納數(shù)以百計(jì)的可選項(xiàng)，能達(dá)到防止輸錯(cuò)的同時(shí)又方便選擇的目的。

相較于單選按鈕和復(fù)選框，下拉菜單還可以節(jié)省頁(yè)面空間。

但是下拉菜單需要先激活菜單顯示可選項(xiàng)然后點(diǎn)擊選項(xiàng)完成選擇，從操作效率上比較低下；另外由于下拉菜單在未選擇狀態(tài)下輸入框中也會(huì)有相應(yīng)的提示文本，因此很容易在輸入時(shí)被忽略掉。

5. 列表框

列表框在形式上沿用了下拉列表用一個(gè)可滾動(dòng)的區(qū)域來(lái)顯示選項(xiàng)的方式，與下拉列表不同的是列表框既允許選擇一個(gè)選項(xiàng)也允許選擇多個(gè)選擇項(xiàng)。

所以列表框完全繼承了下拉列表可防止輸錯(cuò)、容納較多選擇項(xiàng)的優(yōu)點(diǎn)，同時(shí)又支持了可選擇多項(xiàng)的操作。

列表框還可以像下拉列表一樣設(shè)計(jì)成初始不顯示選項(xiàng)，激活后顯示選項(xiàng)列表的形式，從而節(jié)省空間。

但是由于列表框既支持多選又支持單選的特性，很容易讓用戶迷惑到底應(yīng)該選擇一個(gè)還是多個(gè)，所以適用場(chǎng)景不是很多，或者需要增加必要的輸入校驗(yàn)和提示文字。

三、表單按鈕

表單按鈕是用來(lái)完成表單的觸發(fā)器，分為主要按鈕和輔助按鈕。

常見(jiàn)的表單按鈕有保存、提交、確定、登錄等等，列舉的這幾個(gè)按鈕都是完成表單必不可少的按鈕我們稱之為主要按鈕；還有一些按鈕例如預(yù)覽、幫助、撤銷、重置等并非是完成表單的必要按鈕我們稱之為輔助按鈕。

按鈕的設(shè)計(jì)需要注意將主要按鈕與次要按鈕設(shè)計(jì)成視覺(jué)差異清晰的不同樣式，這樣做的目的：一是為了能快速的定位主要按鈕以完成表單，二是防止誤將輔助按鈕當(dāng)做主要按鈕使用造成嚴(yán)重的錯(cuò)誤。

很多時(shí)候主要按鈕和輔助按鈕是相鄰擺放的，比如提交和預(yù)覽、保存和重置、確定和取消，試想一下如果保存和重置兩個(gè)按鈕的外觀完全相同，很容易點(diǎn)擊保存時(shí)錯(cuò)誤的點(diǎn)擊了重置；這個(gè)時(shí)候用戶辛辛苦苦填寫完的表單因?yàn)橐粋€(gè)誤操作需要重新填寫一遍，是不是很糟糕?

盡量將主要按鈕放在用戶填寫表單的視線流內(nèi)，這樣能方便用戶定位主要按鈕，如果輔助按鈕放在了填寫表單的視線流內(nèi)或其他顯眼的位置很容易誤導(dǎo)用戶誤操作。

輔助按鈕可以根據(jù)表單輸入的情況在特定的時(shí)機(jī)出現(xiàn)，例如只有在文本框被激活時(shí)才顯示相應(yīng)的幫助信息圖標(biāo)按鈕，但是主要按鈕必須始終顯示；否則容易讓用戶無(wú)法預(yù)知完成表單的操作路徑而感到疑惑，試想一下如果你看到的登錄頁(yè)面沒(méi)有登錄按鈕會(huì)不會(huì)很疑惑怎么才能完成登錄？

而當(dāng)你帶著疑惑輸入完了賬號(hào)和密碼后登錄按鈕出現(xiàn)了，你會(huì)不會(huì)十分想吐槽一句：什么XX反人類設(shè)計(jì)?。?/p>

操作按鈕設(shè)計(jì)一部分還涉及到交互設(shè)計(jì)，這部分我們?cè)诘谌恼陆换ピO(shè)計(jì)部分再進(jìn)行說(shuō)明。

四、幫助信息

幫助信息是一套輔助用戶完成表單填寫的信息，很多時(shí)候用戶在填寫表單時(shí)會(huì)遇到自己意料之外的困難；我們需要靠幫助信息來(lái)告訴用戶該怎么填寫表單、遇到問(wèn)題該怎么處理或者讓用戶確信自己完成了某個(gè)操作。

幫助信息分為三種：

1. 幫助信息
2. 錯(cuò)誤信息
3. 成功信息

1. 幫助信息

幫助信息是指在用戶不知如何填寫表單時(shí)，頁(yè)面上提供的用于說(shuō)明表單該如何填寫的信息。

幫助信息一般不是用戶必需的信息，即：只有在用戶需要幫助時(shí)出現(xiàn)才會(huì)有意義，否則出現(xiàn)幫助信息在大多數(shù)情況下都是一種不必要的干擾。

幫助信息出現(xiàn)的時(shí)機(jī)有以下兩種情況：

• 自動(dòng)即時(shí)幫助；
• 主動(dòng)激活的幫助；

1）自動(dòng)即時(shí)幫助

自動(dòng)即時(shí)幫助隨著用戶填寫表單的動(dòng)作自動(dòng)實(shí)時(shí)出現(xiàn)，實(shí)時(shí)出現(xiàn)的幫助信息一般適用于簡(jiǎn)單的、字?jǐn)?shù)較少的幫助內(nèi)容；一般在用戶激活某個(gè)輸入框時(shí)，自動(dòng)顯示在輸入框的旁邊或者以彈窗的形式顯示在輸入框上方，字?jǐn)?shù)稍多一點(diǎn)時(shí)可以在頁(yè)面右側(cè)留出一塊專門的區(qū)域用來(lái)顯示即時(shí)出現(xiàn)的幫助信息；他們都是在輸入框激活時(shí)自動(dòng)出現(xiàn)，在光標(biāo)離開(kāi)輸入框時(shí)即自動(dòng)消失。

需要注意的是，當(dāng)將即時(shí)幫助信息自動(dòng)展示在輸入框附近時(shí)有可能會(huì)導(dǎo)致頁(yè)面排版因?yàn)槎喑鰜?lái)的文本而變形。

2）主動(dòng)激活的幫助

主動(dòng)激活的幫助與自動(dòng)即時(shí)幫助的不同在于，幫助信息不會(huì)在用戶操作表單時(shí)自動(dòng)出現(xiàn)，而是需要用戶主動(dòng)點(diǎn)擊文字鏈接或者幫助圖標(biāo)才會(huì)出現(xiàn)。

這種方式適用于所填寫的內(nèi)容都是大家普遍了解的情況，頻繁的自動(dòng)出現(xiàn)幫助信息容易對(duì)用戶造成干擾；因此可以只顯示一個(gè)用來(lái)觸發(fā)顯示的入口，這個(gè)入口可以是一個(gè)文字鏈接也可以是一個(gè)圖標(biāo)。

這種方式同樣需要注意幫助信息導(dǎo)致其他表單位置發(fā)生變化的問(wèn)題，這會(huì)使得用戶的視線總是隨著位置不停變化的表單不停的跳動(dòng)。

所以采用這種方式時(shí)可以只在提示文本較少時(shí)使用，或者將提示文本出現(xiàn)的位置放在一個(gè)不會(huì)影響其他頁(yè)面元素的位置，或者使用彈窗顯示提示文本。

有一種情況必須使用主動(dòng)激活的幫助而不能使用自動(dòng)即時(shí)幫助，這種情況就是需要大量的復(fù)雜的解釋甚至是教程來(lái)告訴用戶如何完成表單時(shí)。

這種情況下需要顯示的幫助信息十分龐大復(fù)雜，有時(shí)候還會(huì)用到圖表，我們必須單獨(dú)使用一塊區(qū)域來(lái)承載這些復(fù)雜的信息，這個(gè)時(shí)候使用一個(gè)獨(dú)立的模態(tài)彈窗或者新的頁(yè)面來(lái)展示幫助信息是一個(gè)好的選擇。

另外，有些需要反復(fù)輸入的表單使用這種提示方式也會(huì)更好，這些獨(dú)立的彈窗或頁(yè)面就像是擺在旁邊的一本書(shū)，你隨時(shí)可能需要看一眼。

這種方式在office套裝中經(jīng)?？梢砸?jiàn)到。

2. 錯(cuò)誤信息

錯(cuò)誤信息是由于系統(tǒng)出錯(cuò)或者用戶輸入的數(shù)據(jù)類型不符合要求，而導(dǎo)致不被表單接受被動(dòng)出現(xiàn)的幫助信息，比如用戶在填寫金額的文本框里輸入了漢字或者程序出現(xiàn)了尚未解決的Bug；前者我們需要用錯(cuò)誤信息告訴用戶當(dāng)前過(guò)程出現(xiàn)了錯(cuò)誤、錯(cuò)誤在哪里、該如何解決；后者除此之外我們還應(yīng)該向用戶道歉。

由于錯(cuò)誤信息屬于遇到錯(cuò)誤時(shí)被動(dòng)即時(shí)出現(xiàn)的錯(cuò)誤提示，嚴(yán)重阻礙了用戶填寫表單的過(guò)程，因此我們需要用清晰且明顯的方式對(duì)用戶進(jìn)行提示，以讓用戶能立刻明白現(xiàn)在有錯(cuò)誤發(fā)生并迅速了解需要怎么處理。

我們可以遵循以下原則處理：

1）在情境中提示錯(cuò)誤，以便于用戶得知錯(cuò)誤后進(jìn)行修改

在情境中提示錯(cuò)誤即：將錯(cuò)誤提示直接顯示在出錯(cuò)的位置附近，這樣用戶看到錯(cuò)誤信息后無(wú)需再去尋找錯(cuò)誤位置即可直接進(jìn)行修改。

2）使用多重視覺(jué)提示，使提醒更加明顯同時(shí)方便色盲用戶

使用顏色、樣式等多種方式展示錯(cuò)誤信息，這樣在視覺(jué)上形成的沖擊效果更強(qiáng)烈更容易讓人意識(shí)到錯(cuò)誤的發(fā)生也更容易定位錯(cuò)誤的位置。

使用可以突出顯示的顏色來(lái)處理錯(cuò)誤信息是我們最習(xí)慣的處理方式，但是我們需要考慮色盲用戶的使用情況；除了顏色之外我們需要至少提供一種其他的可以不依賴顏色識(shí)別錯(cuò)誤信息的方式，比如可以對(duì)錯(cuò)誤信息使用不同的字體、增加圖標(biāo)的顯示、給錯(cuò)誤信息增加底色等方式。

3）在錯(cuò)誤較多時(shí)可以將錯(cuò)誤信息在頁(yè)面頂部統(tǒng)一展示，以便于用戶清楚所有錯(cuò)誤

這種方式適用于頁(yè)面表單較多時(shí)，提交表單時(shí)檢測(cè)到多處表單發(fā)生錯(cuò)誤，如果僅僅在相應(yīng)的錯(cuò)誤表單旁標(biāo)注錯(cuò)誤信息很難清楚一共有多少錯(cuò)誤發(fā)生，用戶處理錯(cuò)誤的過(guò)程很容易就變成了一次盲目找錯(cuò)的過(guò)程；所以這種情況可以在頁(yè)面頂部將所有錯(cuò)誤都列出來(lái)，使用這種方式時(shí)同時(shí)需要將出錯(cuò)的表單標(biāo)注出來(lái)以便于定位錯(cuò)誤表單。

需要注意的是任何一種處理方式都需要全局保持一致的錯(cuò)誤消息顯示樣式，不能有的采用增加圖標(biāo)有的采用彈窗有的增加了底色，這樣會(huì)顯示非常的凌亂從而降低用戶的視覺(jué)體驗(yàn)。

3. 成功信息

成功信息是表單填寫完成提交后給出的提示信息，經(jīng)常有人在設(shè)計(jì)時(shí)忘記設(shè)計(jì)成功信息，用戶在提交表單之后什么提示都沒(méi)有直接跳轉(zhuǎn)到下一個(gè)頁(yè)面，有些僅僅顯示了很簡(jiǎn)短的成功信息，類似“操作完成！”“已提交！”。

提交表單之后給出明確的成功信息是非常必要的，用戶需要明確的知道自己剛才的操作是否正確完成而且成功生效了；否則用戶很可能會(huì)產(chǎn)生疑惑進(jìn)而產(chǎn)生是不是自己沒(méi)正確提交的顧慮，這種顧慮在一些重要信息的提交時(shí)表現(xiàn)的尤為明顯，比如支付、報(bào)名。

而簡(jiǎn)短的成功信息已經(jīng)可以讓用戶對(duì)自己的操作有“已經(jīng)正確完成了”的信心，但是仍然有很大的優(yōu)化空間。

可以從以下幾個(gè)方面進(jìn)行優(yōu)化：

1）使用動(dòng)畫讓成功消息表現(xiàn)的更形象

人類本能的更容易理解動(dòng)畫所表達(dá)的含義，用適當(dāng)?shù)膭?dòng)畫或者動(dòng)效來(lái)配合成功消息的展示會(huì)更容易讓人確信自己的操作已成確完成。

比如向列表中剛剛添加成功的數(shù)據(jù)的背景色自動(dòng)漸變，逐漸從一個(gè)特殊的顏色淡化為與其他已添加的數(shù)據(jù)一致的顏色，會(huì)讓人更確信這條數(shù)據(jù)已經(jīng)成功的完成添加。

2）贊揚(yáng)用戶，借機(jī)增加用戶使用產(chǎn)品的愉悅感

當(dāng)用戶成功的完成并提交了表單時(shí)，他們實(shí)際上是完成了一項(xiàng)任務(wù)或者達(dá)成了某個(gè)目標(biāo)，這些是用戶填寫表單的真正目的，試著把這個(gè)結(jié)果用肯定的語(yǔ)氣告訴用戶會(huì)讓他們備受鼓舞。

• 比如報(bào)名完成時(shí)告訴用戶已經(jīng)獲得了參加某某考試的資格，支付完成時(shí)告訴用戶已經(jīng)買到了自己心儀的商品，會(huì)讓用戶有一種已經(jīng)實(shí)現(xiàn)目標(biāo)的成就感，最后可以適當(dāng)?shù)脑黾右恍┳ＹR的語(yǔ)句。
• 比如用戶要報(bào)名一次考試，提交報(bào)名信息后用戶很可能會(huì)希望再看一眼自己的報(bào)名內(nèi)容，有可能會(huì)需要修改所以在用戶提交報(bào)名之后轉(zhuǎn)向報(bào)名信息的核對(duì)頁(yè)面是一個(gè)比較好的處理。
• 比如用戶要向商品庫(kù)中增加一個(gè)新商品，新增完成后用戶很可能還需要繼續(xù)增加新的商品，所以此時(shí)提示完成添加后繼續(xù)留在新增商品的頁(yè)面更符合用戶的預(yù)期。
• 比如用戶完成了機(jī)票的購(gòu)買，很可能會(huì)希望給自己的手機(jī)發(fā)送一條行程記錄，此時(shí)在提示已完成購(gòu)買機(jī)票之后提供自動(dòng)發(fā)送行程短信的功能會(huì)讓用戶感覺(jué)到很方便和貼心。

五、結(jié)語(yǔ)

至此，《360°全方位表單設(shè)計(jì)指南》的第二篇文章就結(jié)束了，感謝大家抽出時(shí)間閱讀這篇文章，歡迎大家在評(píng)論區(qū)提出自己寶貴的意見(jiàn)，讓我們一起成長(zhǎng)！

下一篇文章會(huì)給大家分享表單交互設(shè)計(jì)的相關(guān)知識(shí)，歡迎感興趣的朋友關(guān)注小弟，第一時(shí)間接收文章推送哦！

360°全方位表單設(shè)計(jì)指南（一）

360°全方位表單設(shè)計(jì)指南（三）

作者：時(shí)光時(shí)光慢些吧，公眾號(hào)：pmreport

本文由 @時(shí)光時(shí)光慢些吧 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議