用戶在填寫表單時可能會猶豫，所以作為設計師我們應該盡可能地簡化這個過程

比較表單標簽的所有趨勢

輸入模式首次改為浮動標簽模式是2013年8月。這個想法很簡單——動畫占位文本在輸入旁邊顯示的是圖標，以至于用戶不會在當前壞境中迷失。

浮動標簽想法的起源——輸入旁邊的圖標

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

版本2：浮動標簽的文字模式（圖片來源：Derek?Torsani）

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

頂部對齊標簽與浮動標簽模式

1. 在頂部對齊的標簽上掃描更多元素

在上面的頂部對齊形式中，只有4個字段。但是當你掃描表單時，會感覺有很多的需要填寫的。這是因為用戶必須掃描8個不同的元素。

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

2. 提交前最后檢查輸入

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

輸入字段填寫后標簽消失的其他模式也是有問題的。消失的標簽迫使用戶去回憶標簽的內容。

關于用戶在提交表單之前交叉檢查輸入的方便

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

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

3. 字段焦點

字段焦點對于移動界面是非常重要的。這是因為用戶在打字時看著鍵盤。打完打字后，他們會回頭看看他們打字的內容，以及是否處于正確的位置。

輸入字段中所有三種標簽模式的比較

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

• 模式一（頂部對齊的標簽）中，字段突出顯示，但不是文本標簽。
• 模式二（標簽在用戶類型消失時），字段突出顯示，但文本標簽可能消失或變暗。
• 模式三（浮動標簽）中，邊框圍繞字段，標簽和輸入都突出顯示。

很明顯，第三種模式（浮動標簽）是最強的，因為用戶可以清楚地看到他們所在的字段以及任何時候他們所打字的內容。

4. 提交時出現(xiàn)錯誤信息

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

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

老實說，我們談論了在難度很高的用戶體驗中的最佳做法，時尚和趨勢，你永遠都不能確定用戶如何響應界面。響應可能會有所不同，具體取決于許多參數(shù)——用戶對界面趨勢的影響，應用程序類型的使用，他們所屬的年齡組等等。最好設計表單版本是與用戶進行測試便知道哪個最適合您的品牌。

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

在得出任何結論前的測試表格

結論

用戶在填寫表單時可能會猶豫，所以作為設計師我們應該盡可能地簡化這個過程。標簽顯示方式的輕微變化，可明顯增加表單的可用性。可用性測試在表單設計中是不可或缺的。通常情況下，僅進行一些測試或者簡單地要求同伴完成表單的原型可以讓你對表單的可用性有一個很好的了解。

原文作者：CanvasFlip

原文地址：https://uxplanet.org/float-label-pattern-in-ux-form-design-7ab5e33010ab

譯者：SKYUI

本文由 @SKYUI 翻譯發(fā)布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協(xié)議