在當今這個互聯(lián)網(wǎng)時代，填寫表單對用戶來說就是家常便飯，在網(wǎng)站進行注冊登錄時、在網(wǎng)上購物時，都免不了填寫表單這一環(huán)。表單是網(wǎng)頁設計中重要的組成部分之一，在獲取用戶信息方面發(fā)揮著不可或缺的作用，它是用戶和網(wǎng)站的一種互動形式，這種形式的互動越順暢，網(wǎng)站的用戶轉(zhuǎn)化率就越高。這也是為什么許多站長們一直在研究如何設計表單才能讓用戶快速高效地填寫。如今，關于表單設計的方法也越來越豐富，這不，最近又興起了浮動標簽式的表單，不少設計師認為這種設計手法在提升用戶體驗方面的效果很是顯著。所以今天小飛就來介紹一下浮動標簽式表單的發(fā)展歷程以及它究竟有哪些優(yōu)勢。
在介紹浮動標簽式表單之前，我們先來了解一下表單的組成部分：
標簽：告訴用戶表單問題是什么;
輸入框：供用戶填寫答案信息;
動作：用戶提交表單，即用戶點擊一個按鈕或鏈接，執(zhí)行一個操作;
幫助文字：為如何填寫表單提供幫助;
輸入反饋：針對用戶輸入給出反饋，輸入正確還是錯誤;
浮動標簽式表單的發(fā)展歷程：
階段一：文本占位符旁的圖標動畫
早在2013年，浮動標簽式這個概念就已經(jīng)出現(xiàn)了。當時設計師的想法很簡單，在占位符文本中，借助動畫加入一個圖標顯示，以確保用戶不會在填寫信息的過程中迷失。不過，這種形式有一個缺陷：并不是所有的文本標簽都有可以搭配的圖標，沒有圖標搭配的文本標簽在傳遞信息時不夠清晰。
階段二：浮動標簽
雖然浮動式圖標動畫沒有達成效果，但卻給了設計師一些啟發(fā)和靈感。隨之而來的就是浮動式的標簽式設計了。在這種設計中，當用戶點擊輸入框的時候，作為占位符的文本標簽會向上浮動到輸入框的上方，這種動畫效果能讓用戶明白標簽和輸入內(nèi)容之間的關系。另外，標簽的顏色也會有相應的改變，能讓用戶知道哪個輸入框正處于活動狀態(tài)。浮動式標簽的優(yōu)勢很明顯：簡潔、清晰、可用性高。
看到這里，相信大家對浮動式標簽已經(jīng)有了一定的了解。下面小飛將通過傳統(tǒng)的頂部固定標簽和浮動式標簽的對比，讓大家對浮動式標簽的優(yōu)點有更加深刻的認識：
1. 更小的視覺壓力
雖然固定式和浮動式的標簽同樣只有4個字段，但是在頂部固定標簽式的表單中，用戶其實需要瀏覽更多的內(nèi)容，這是因為固定式標簽和輸入框是分開的，是有一定空白區(qū)域的，在用戶看來，這完全是8個需要瀏覽的字段。用戶在進行視覺處理時會下意識覺得信息量比較密集，需要填寫的內(nèi)容很多。而在浮動式標簽中，標簽字段相對而言占據(jù)較小的位置，主體輸入字段更加顯眼，不會給用戶帶來視覺上或心理上的壓力。
2. 更容易檢查
在表單填寫好之后，用戶通常都會快速地檢查一遍其中內(nèi)容，再進行提交。而在頂部固定式標簽中，彼此獨立的標簽和輸入框會讓用戶在檢查字段內(nèi)容時浪費不少時間。這是因為標簽和輸入框之間有一定的分界線，用戶必須上下掃視匹配輸入內(nèi)容和對應標簽，以確保填寫的字段是正確的，這無形之中就讓檢查工作變得繁瑣復雜。
除了頂部固定標簽外，這還有一種可用的表單設計模式。那就是讓標簽作為占位符置于輸入框中，當用戶點擊輸入時候就自動消失。這種設計同樣也存在問題，雖然它們看上去很是簡約，但用戶在輸入內(nèi)容時很容易忘記需要輸入的字段是什么。這種需要考察記憶力的設計方式加重了用戶的認知負擔。
而第三種解決方案就是我們現(xiàn)在所說的浮動式標簽，它結(jié)合了前面兩者的優(yōu)點，又成功的規(guī)避了兩者的缺陷。一方面，浮動式標簽占據(jù)位置較少，不會產(chǎn)生固定標簽那樣的視覺障礙，簡約的設計有助于數(shù)據(jù)的順暢檢查;另一方面，標簽在用戶輸入的時候只會自動上移而不會消失，這不會讓用戶感到疑惑，降低了認知壓力。
3. 更明顯的視覺焦點
在移動界面中，如何控制視覺焦點是很重要的。這是因為由于屏幕的限制，用戶一般都是看著界面打字的。只有他們完成了內(nèi)容輸入后，他們才會回過頭去看自己輸入了什么，以及輸入的自動是否正確。輸入框的視覺焦點越明顯，用戶在填寫信息時會覺得越方便。下面是3種不同的表單設計模式下的輸入?yún)^(qū)域的可辨識度對比：
第一種是頂部固定標簽。這種設計中輸入框的字段突出，但標簽的識別度不夠(為了區(qū)分輸入字段和標簽，大部分表單都是這樣設計的);
第二種是用戶輸入時標簽消失的設計。這種模式下字段足夠突出，但是文本標簽就完全看不到了，用戶無法判斷輸入內(nèi)容是否符合要求;
第三種是浮動式標簽。這種模式下標簽和輸入字段在色彩和尺寸上都作了區(qū)分，且邊框和標簽都圍繞著字段，主次分明，視覺效果較好。
4. 更清晰的報錯反饋
不管表單采取哪種設計模式，當用戶輸入信息錯誤時，表單都需要即時報錯讓用戶調(diào)整內(nèi)容。在這種需求下，頂部固定標簽和浮動標簽的設計模式都能更為清晰地傳遞報錯信息，而輸入時隱藏標簽的設計則只能通過輸入框的色彩來識別，相對而言可識別度較差。
老實說，不管我們探究出了多少最佳的網(wǎng)站實例，多少最新的潮流設計趨勢，我們也無法確保用戶對網(wǎng)站的反應。因為影響用戶與網(wǎng)站進行互動的因素實在是太多了：用戶對設計趨勢的熟悉程度，用戶的使用習慣等等，甚至不同年齡段的用戶針對同一種設計都會呈現(xiàn)出不同的反應。所以說，測試必不可少，畢竟實踐才是檢驗真理的唯一渠道。在進行表單設計時，我們也要針對目標群體、不同設備等進行測試，這樣才能知道哪種設計模式更符合自己的品牌特征，更能發(fā)揮效用。
最后，小飛想說，用戶填寫表單時，很容易產(chǎn)生遲疑而放棄。要想通過表單獲取用戶信息、提升用戶體驗、提高用戶轉(zhuǎn)化率。我們必須盡量簡化這個過程，關注每一點細微的變化，無論是標簽的顯示形式還是標簽的顏色，盡量增強它的可用性?？靵砥痫w頁自助建站平臺（http://www.qifeiye.com/?t_wd=a5）搭建一個響應式網(wǎng)站吧!
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
