設(shè)計(jì)表單的時(shí)候,為什么懸浮式標(biāo)簽體驗(yàn)更好?

2017-8-15    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


表單設(shè)計(jì)中,各種設(shè)計(jì)模式和技巧已經(jīng)越來(lái)越成熟了。在諸多設(shè)計(jì)技巧當(dāng)中,懸浮標(biāo)簽這一設(shè)計(jì)手法,應(yīng)該是對(duì)于用戶體驗(yàn)提升最明顯的一種。早在2013年8月的時(shí)候,我第一次考慮在自己設(shè)計(jì)的表單中運(yùn)用懸浮標(biāo)簽,這個(gè)想法很簡(jiǎn)單,在占位符文本中,借助動(dòng)畫加入一個(gè)圖標(biāo)顯示,確保用戶不會(huì)在填寫過(guò)程中迷失。

懸浮標(biāo)簽最初的形態(tài):文本占位符旁邊的小圖標(biāo)動(dòng)畫

這一想法隨著時(shí)間的推移而逐步改變。懸浮的圖標(biāo)動(dòng)效沒(méi)有達(dá)成目的,因?yàn)闆](méi)有相互搭配的標(biāo)簽,其實(shí)還是不夠清晰。但是隨之而來(lái)的,就是懸浮標(biāo)簽設(shè)計(jì)了。現(xiàn)在,懸浮標(biāo)簽和動(dòng)畫結(jié)合到了一起,當(dāng)用戶點(diǎn)擊輸入框的時(shí)候,作為占位符的文本標(biāo)簽會(huì)向上浮動(dòng)到輸入框的上方,兼顧了UI的清晰簡(jiǎn)潔,也讓用戶通過(guò)動(dòng)畫明白了標(biāo)簽和輸入內(nèi)容的關(guān)系,還通過(guò)色彩讓用戶明白哪個(gè)輸入框正處于活動(dòng)狀態(tài)。

第二個(gè)版本:懸浮標(biāo)簽

懸浮標(biāo)簽的優(yōu)勢(shì)很明顯,簡(jiǎn)潔,節(jié)省空間,清晰,而且可用性良好。

頂部固定標(biāo)簽 vs 懸浮標(biāo)簽?zāi)J?

1、固定標(biāo)簽讓用戶需要瀏覽更多內(nèi)容

雖然同樣都只有四個(gè)字段,但是當(dāng)你采用頂部固定標(biāo)簽的時(shí)候,用戶其實(shí)需要瀏覽的更多的內(nèi)容,因?yàn)樾枰榭吹脑赜?個(gè)。

標(biāo)簽和需要輸入的空白字段是完全分開的8個(gè)元素。當(dāng)用戶的視覺(jué)在處理這些信息的時(shí)候,會(huì)自然地覺(jué)得信息量比較密集,感覺(jué)上要處理的內(nèi)容是比較密集的。

2、提交數(shù)據(jù)前最后的檢查

表單填寫完成之后,用戶通常是會(huì)快速地檢查一遍其中內(nèi)容的正確性,再提交的。用戶必須上下掃視輸入內(nèi)容和對(duì)應(yīng)標(biāo)簽來(lái)匹配,確保填寫的字段是正確的。這個(gè)時(shí)候,輸入框的邊界會(huì)阻擋視線,即使借助相關(guān)元素靠近原則來(lái)設(shè)計(jì)的空間關(guān)系,在這個(gè)過(guò)程中也不會(huì)顯得那么清晰而明顯,這一切都會(huì)讓最后的檢查工作變得不那么快速。

除此之外,還有一種設(shè)計(jì)模式是讓標(biāo)簽作為占位符置于輸入框中,當(dāng)用戶點(diǎn)擊輸入時(shí)候就自動(dòng)消失。這種設(shè)計(jì)固然簡(jiǎn)約,但是用戶在輸入的時(shí)候很容易忘記他們需要輸入的字段是什么,也會(huì)產(chǎn)生問(wèn)題。

而第三種解決方案就是我們現(xiàn)在所說(shuō)的懸浮標(biāo)簽,它結(jié)合了前面兩者的優(yōu)點(diǎn),又成功的規(guī)避了兩者的缺陷。降低了第一種模式的視覺(jué)障礙,保持了簡(jiǎn)約的設(shè)計(jì),同時(shí),標(biāo)簽在用戶輸入的時(shí)候會(huì)自動(dòng)上浮不會(huì)消失,不會(huì)讓用戶感到迷惑。

3、字段和焦點(diǎn)

表單設(shè)計(jì)中,視覺(jué)的焦點(diǎn)控制也是頗為重要的因素。當(dāng)用戶在輸入過(guò)程中不斷在輸入框和鍵盤之間切換,完成輸入之后還要檢查輸入的內(nèi)容,確保所有的字段都填寫正確了。

這種局面下,我們可以對(duì)比之前說(shuō)的三種模式下的字段的視覺(jué)識(shí)別度:

·第一種是頂部固定標(biāo)簽設(shè)計(jì),字段突出,標(biāo)簽的識(shí)別度不足(為了區(qū)分,通常會(huì)這么設(shè)計(jì))
·第二種是用戶輸入時(shí)字段消失,這種模式下字段足夠突出,但是文本標(biāo)簽就完全看不到了,用戶無(wú)從判斷輸入內(nèi)容是否符合要求
·第三種是懸浮標(biāo)簽,標(biāo)簽和字段內(nèi)容有色彩和尺寸區(qū)分,并且邊框和標(biāo)簽都圍繞著字段,主次分明。

4、提交時(shí)的報(bào)錯(cuò)信息

在三種模式中,當(dāng)用戶輸入錯(cuò)誤的時(shí)候,表單需要即時(shí)報(bào)錯(cuò)讓用戶調(diào)整內(nèi)容填寫。而這種需求下,頂部固定標(biāo)簽的設(shè)計(jì)模式和懸浮標(biāo)簽?zāi)J较露寄芨鼮榍逦貍鬟f報(bào)錯(cuò)信息,而輸入時(shí)隱藏標(biāo)簽的設(shè)計(jì)則只能通過(guò)輸入框色彩來(lái)識(shí)別,相對(duì)識(shí)別度較差。

最后還是繞不開測(cè)試

老實(shí)說(shuō),我們?cè)谔接懩欠N設(shè)計(jì)的用戶體驗(yàn)更好、哪些設(shè)計(jì)更時(shí)尚、更符合趨勢(shì),你永遠(yuǎn)不知道用戶在實(shí)際交互中會(huì)出現(xiàn)什么狀況。用戶的真實(shí)反映可能和你想的不同,這種局面的原因有很多,可能是用戶對(duì)于UI設(shè)計(jì)趨勢(shì)的了解多寡,之前的使用習(xí)慣的影響,甚至不同年齡段的用戶都會(huì)呈現(xiàn)出不同的反應(yīng),等等等等。最好的表單設(shè)計(jì)總是要結(jié)合你的品牌特征和用戶測(cè)試才能設(shè)計(jì)出來(lái)的。

我們使用 CanvasFlip 做熱圖測(cè)試來(lái)檢測(cè)用戶的實(shí)際交互狀況。我相信你如果多做做這樣的測(cè)試也同樣能從中獲益。結(jié)合A/B測(cè)試,你能得出更加具體的結(jié)果。

結(jié)語(yǔ)

用戶填寫表單的時(shí)候,總會(huì)因?yàn)楦鞣N原因而產(chǎn)生遲疑,所以,作為設(shè)計(jì)師的我們要盡量簡(jiǎn)化這個(gè)過(guò)程,關(guān)注每一點(diǎn)細(xì)微的變化,無(wú)論是標(biāo)簽的顯示形式還是色彩,盡力增強(qiáng)它的可用性??捎眯詼y(cè)試在整個(gè)表單設(shè)計(jì)中是絕對(duì)不可或缺的,經(jīng)常通過(guò)測(cè)試來(lái)驗(yàn)證設(shè)計(jì)和構(gòu)思,能夠讓你的產(chǎn)品設(shè)計(jì)更加優(yōu)秀。

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.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ù)


日歷

鏈接

個(gè)人資料

存檔