UX表單設(shè)計(jì)中的小訣竅

用戶在填寫表單時(shí)可能會猶豫，作為設(shè)計(jì)師，我們應(yīng)該盡可能地簡化這個(gè)過程。標(biāo)簽顯示方式的輕微變化，可明顯增加表單的可用性。

比較表單標(biāo)簽的所有趨勢

輸入模式首次改為浮動標(biāo)簽?zāi)Ｊ绞?013年8月。這個(gè)想法很簡單：動畫占位文本在輸入旁邊顯示的是圖標(biāo)，以至于用戶不會在當(dāng)前壞境中迷失。

浮動標(biāo)簽想法的起源——輸入旁邊的圖標(biāo)

這個(gè)想法隨著時(shí)間一點(diǎn)點(diǎn)推移。圖標(biāo)并沒有完全達(dá)到目的，令人非常沮喪的是因?yàn)闆]有標(biāo)簽不知道什么是正確的。這時(shí)圖標(biāo)想法被廢棄，只有文本設(shè)計(jì)誕生了。現(xiàn)在，浮動標(biāo)簽用文字的輕微動畫進(jìn)入畫面。當(dāng)有人輸入輸入框時(shí)，浮動標(biāo)簽將向上動畫，并將顏色更改為活動狀態(tài)。

版本2：浮動標(biāo)簽的文字模式(圖片來源：Derek?Torsani)

浮動標(biāo)簽作為一個(gè)解決方案，節(jié)省了界面空間，使之看起來清晰簡潔，且沒有放棄可用性。

頂部對齊標(biāo)簽與浮動標(biāo)簽?zāi)Ｊ?

1、在頂部對齊的標(biāo)簽上掃描更多元素

在上面的頂部對齊形式中，只有4個(gè)字段。但是當(dāng)你掃描表單時(shí)，會感覺有很多的需要填寫的。這是因?yàn)橛脩舯仨殥呙?個(gè)不同的元素。

標(biāo)簽和字段是由空格分隔的單獨(dú)元素。因此，用戶可以使用8個(gè)獨(dú)立的視覺固定來處理這些元素。額外的視覺效果給用戶更多的掃描做，讓他們覺得有很多要填寫。

2、提交前最后檢查輸入

使用頂部對齊標(biāo)簽，到最后不是很快地交叉檢查輸入。用戶必須從標(biāo)簽上向上和向下掃視，看看是否匹配?？瞻仔泻妥侄芜吔缱璧K了他們的視覺路徑，并減緩了它們的流向。

輸入字段填寫后標(biāo)簽消失的其他模式也是有問題的。消失的標(biāo)簽迫使用戶去回憶標(biāo)簽的內(nèi)容。

關(guān)于用戶在提交表單之前交叉檢查輸入的方便

使用第三種模式(浮動標(biāo)簽?zāi)Ｊ?檢查用戶輸入是快速且容易的。標(biāo)簽不會消失，也沒有視覺障礙，如頂部對齊的表格。相反，每個(gè)字段的一個(gè)視覺固定是比較標(biāo)簽和輸入所需要的。

文本樣式也可以幫助用戶更快地檢查其輸入。通過使輸入文本粗體大小，標(biāo)簽文本較小，用戶可以一目了然。

3、字段焦點(diǎn)

字段焦點(diǎn)對于移動界面是非常重要的。這是因?yàn)橛脩粼诖蜃謺r(shí)看著鍵盤。打完打字后，他們會回頭看看他們打字的內(nèi)容，以及是否處于正確的位置。

輸入字段中所有三種標(biāo)簽?zāi)Ｊ降谋容^

這是3種模式通常發(fā)生的情況：

模式一(頂部對齊的標(biāo)簽)中，字段突出顯示，但不是文本標(biāo)簽。

模式二(標(biāo)簽在用戶類型消失時(shí))，字段突出顯示，但文本標(biāo)簽可能消失或變暗。

模式三(浮動標(biāo)簽)中，邊框圍繞字段，標(biāo)簽和輸入都突出顯示。

很明顯，第三種模式(浮動標(biāo)簽)是最強(qiáng)的，因?yàn)橛脩艨梢郧宄乜吹剿麄兯诘淖侄我约叭魏螘r(shí)候他們所打字的內(nèi)容。

4、提交時(shí)出現(xiàn)錯(cuò)誤信息

如果表單已填寫完成，但在表單域之外或頂部沒有標(biāo)簽可見，用戶必須返回每個(gè)字段以顯示描述，以便修復(fù)錯(cuò)誤。

[IMP]：測試你的界面表單

老實(shí)說，我們談?wù)摿嗽陔y度很高的用戶體驗(yàn)中的好做法、時(shí)尚和趨勢，你永遠(yuǎn)都不能確定用戶如何響應(yīng)界面。響應(yīng)可能會有所不同，具體取決于許多參數(shù)：用戶對界面趨勢的影響，應(yīng)用程序類型的使用，他們所屬的年齡組等等。最好的設(shè)計(jì)表單版本是與用戶進(jìn)行測試，便知道哪個(gè)最適合您的品牌。

我們使用CanvasFlip來查看表單上的熱圖和用戶視頻。相信你會受益于同樣的。A / B測試對于作出任何決定都是非常有幫助的。

在得出任何結(jié)論前的測試表格

結(jié)論

可用性測試在表單設(shè)計(jì)中是不可或缺的。通常情況下，僅進(jìn)行一些測試或者簡單地要求同伴完成表單的原型可以讓你對表單的可用性有一個(gè)很好的了解。

分享題目：UX表單設(shè)計(jì)中的小訣竅
分享地址：http://www.muchs.cn/news13/165663.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、微信公眾號、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)公司、Google、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)