起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)
在UX表單設(shè)計(jì)中的浮動(dòng)標(biāo)簽?zāi)Ｊ?/h2>
用戶在填寫(xiě)表單時(shí)可能會(huì)猶豫，所以作為設(shè)計(jì)師我們應(yīng)該盡可能地簡(jiǎn)化這個(gè)過(guò)程
比較表單標(biāo)簽的所有趨勢(shì)
輸入模式首次改為浮動(dòng)標(biāo)簽?zāi)Ｊ绞?013年8月。這個(gè)想法很簡(jiǎn)單——?jiǎng)赢?huà)占位文本在輸入旁邊顯示的是圖標(biāo)，以至于用戶不會(huì)在當(dāng)前壞境中迷失。
浮動(dòng)標(biāo)簽想法的起源——輸入旁邊的圖標(biāo)
這個(gè)想法隨著時(shí)間一點(diǎn)點(diǎn)推移。圖標(biāo)并沒(méi)有完全達(dá)到目的，令人非常沮喪的是因?yàn)闆](méi)有標(biāo)簽不知道什么是正確的。這時(shí)圖標(biāo)想法被廢棄，只有文本設(shè)計(jì)誕生了?，F(xiàn)在，浮動(dòng)標(biāo)簽用文字的輕微動(dòng)畫(huà)進(jìn)入畫(huà)面。當(dāng)有人輸入輸入框時(shí)，浮動(dòng)標(biāo)簽將向上動(dòng)畫(huà)，并將顏色更改為活動(dòng)狀態(tài)。
版本2：浮動(dòng)標(biāo)簽的文字模式（圖片來(lái)源：Derek?Torsani）
浮動(dòng)標(biāo)簽作為一個(gè)解決方案，節(jié)省了界面空間，使之看起來(lái)清晰簡(jiǎn)潔，且沒(méi)有放棄可用性。
頂部對(duì)齊標(biāo)簽與浮動(dòng)標(biāo)簽?zāi)Ｊ?/h2>
1. 在頂部對(duì)齊的標(biāo)簽上掃描更多元素
在上面的頂部對(duì)齊形式中，只有4個(gè)字段。但是當(dāng)你掃描表單時(shí)，會(huì)感覺(jué)有很多的需要填寫(xiě)的。這是因?yàn)橛脩舯仨殥呙?個(gè)不同的元素。
標(biāo)簽和字段是由空格分隔的單獨(dú)元素。因此，用戶可以使用8個(gè)獨(dú)立的視覺(jué)固定來(lái)處理這些元素。額外的視覺(jué)效果給用戶更多的掃描做，讓他們覺(jué)得有很多要填寫(xiě)。
2. 提交前最后檢查輸入
使用頂部對(duì)齊標(biāo)簽，到最后不是很快地交叉檢查輸入。用戶必須從標(biāo)簽上向上和向下掃視，看看是否匹配?？瞻仔泻妥侄芜吔缱璧K了他們的視覺(jué)路徑，并減緩了它們的流向。
輸入字段填寫(xiě)后標(biāo)簽消失的其他模式也是有問(wèn)題的。消失的標(biāo)簽迫使用戶去回憶標(biāo)簽的內(nèi)容。
關(guān)于用戶在提交表單之前交叉檢查輸入的方便
使用第三種模式（浮動(dòng)標(biāo)簽?zāi)Ｊ剑z查用戶輸入是快速且容易的。標(biāo)簽不會(huì)消失，也沒(méi)有視覺(jué)障礙，如頂部對(duì)齊的表格。相反，每個(gè)字段的一個(gè)視覺(jué)固定是比較標(biāo)簽和輸入所需要的。
文本樣式也可以幫助用戶更快地檢查其輸入。通過(guò)使輸入文本粗體大小，標(biāo)簽文本較小，用戶可以一目了然。
3. 字段焦點(diǎn)
字段焦點(diǎn)對(duì)于移動(dòng)界面是非常重要的。這是因?yàn)橛脩粼诖蜃謺r(shí)看著鍵盤。打完打字后，他們會(huì)回頭看看他們打字的內(nèi)容，以及是否處于正確的位置。
輸入字段中所有三種標(biāo)簽?zāi)Ｊ降谋容^
這是3種模式通常發(fā)生的情況：
- 模式一（頂部對(duì)齊的標(biāo)簽）中，字段突出顯示，但不是文本標(biāo)簽。
- 模式二（標(biāo)簽在用戶類型消失時(shí)），字段突出顯示，但文本標(biāo)簽可能消失或變暗。
- 模式三（浮動(dòng)標(biāo)簽）中，邊框圍繞字段，標(biāo)簽和輸入都突出顯示。
很明顯，第三種模式（浮動(dòng)標(biāo)簽）是最強(qiáng)的，因?yàn)橛脩艨梢郧宄乜吹剿麄兯诘淖侄我约叭魏螘r(shí)候他們所打字的內(nèi)容。
4. 提交時(shí)出現(xiàn)錯(cuò)誤信息
如果表單已填寫(xiě)完成，但在表單域之外或頂部沒(méi)有標(biāo)簽可見(jiàn)，用戶必須返回每個(gè)字段以顯示描述，以便修復(fù)錯(cuò)誤。
[IMP]：測(cè)試你的界面表單
老實(shí)說(shuō)，我們談?wù)摿嗽陔y度很高的用戶體驗(yàn)中的最佳做法，時(shí)尚和趨勢(shì)，你永遠(yuǎn)都不能確定用戶如何響應(yīng)界面。響應(yīng)可能會(huì)有所不同，具體取決于許多參數(shù)——用戶對(duì)界面趨勢(shì)的影響，應(yīng)用程序類型的使用，他們所屬的年齡組等等。最好設(shè)計(jì)表單版本是與用戶進(jìn)行測(cè)試便知道哪個(gè)最適合您的品牌。
我們使用CanvasFlip來(lái)查看表單上的熱圖和用戶視頻。相信你會(huì)受益于同樣的。A / B測(cè)試對(duì)于作出任何決定都是非常有幫助的。
在得出任何結(jié)論前的測(cè)試表格
結(jié)論
用戶在填寫(xiě)表單時(shí)可能會(huì)猶豫，所以作為設(shè)計(jì)師我們應(yīng)該盡可能地簡(jiǎn)化這個(gè)過(guò)程。標(biāo)簽顯示方式的輕微變化，可明顯增加表單的可用性。可用性測(cè)試在表單設(shè)計(jì)中是不可或缺的。通常情況下，僅進(jìn)行一些測(cè)試或者簡(jiǎn)單地要求同伴完成表單的原型可以讓你對(duì)表單的可用性有一個(gè)很好的了解。
原文作者：CanvasFlip
原文地址：https://uxplanet.org/float-label-pattern-in-ux-form-design-7ab5e33010ab
譯者：SKYUI
本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels，基于 CC0 協(xié)議
更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
用戶在填寫(xiě)表單時(shí)可能會(huì)猶豫，所以作為設(shè)計(jì)師我們應(yīng)該盡可能地簡(jiǎn)化這個(gè)過(guò)程
比較表單標(biāo)簽的所有趨勢(shì)
輸入模式首次改為浮動(dòng)標(biāo)簽?zāi)Ｊ绞?013年8月。這個(gè)想法很簡(jiǎn)單——?jiǎng)赢?huà)占位文本在輸入旁邊顯示的是圖標(biāo)，以至于用戶不會(huì)在當(dāng)前壞境中迷失。
浮動(dòng)標(biāo)簽想法的起源——輸入旁邊的圖標(biāo)
這個(gè)想法隨著時(shí)間一點(diǎn)點(diǎn)推移。圖標(biāo)并沒(méi)有完全達(dá)到目的，令人非常沮喪的是因?yàn)闆](méi)有標(biāo)簽不知道什么是正確的。這時(shí)圖標(biāo)想法被廢棄，只有文本設(shè)計(jì)誕生了?，F(xiàn)在，浮動(dòng)標(biāo)簽用文字的輕微動(dòng)畫(huà)進(jìn)入畫(huà)面。當(dāng)有人輸入輸入框時(shí)，浮動(dòng)標(biāo)簽將向上動(dòng)畫(huà)，并將顏色更改為活動(dòng)狀態(tài)。
版本2：浮動(dòng)標(biāo)簽的文字模式（圖片來(lái)源：Derek?Torsani）
浮動(dòng)標(biāo)簽作為一個(gè)解決方案，節(jié)省了界面空間，使之看起來(lái)清晰簡(jiǎn)潔，且沒(méi)有放棄可用性。
頂部對(duì)齊標(biāo)簽與浮動(dòng)標(biāo)簽?zāi)Ｊ?/h2>
1. 在頂部對(duì)齊的標(biāo)簽上掃描更多元素
在上面的頂部對(duì)齊形式中，只有4個(gè)字段。但是當(dāng)你掃描表單時(shí)，會(huì)感覺(jué)有很多的需要填寫(xiě)的。這是因?yàn)橛脩舯仨殥呙?個(gè)不同的元素。
標(biāo)簽和字段是由空格分隔的單獨(dú)元素。因此，用戶可以使用8個(gè)獨(dú)立的視覺(jué)固定來(lái)處理這些元素。額外的視覺(jué)效果給用戶更多的掃描做，讓他們覺(jué)得有很多要填寫(xiě)。
2. 提交前最后檢查輸入
使用頂部對(duì)齊標(biāo)簽，到最后不是很快地交叉檢查輸入。用戶必須從標(biāo)簽上向上和向下掃視，看看是否匹配?？瞻仔泻妥侄芜吔缱璧K了他們的視覺(jué)路徑，并減緩了它們的流向。
輸入字段填寫(xiě)后標(biāo)簽消失的其他模式也是有問(wèn)題的。消失的標(biāo)簽迫使用戶去回憶標(biāo)簽的內(nèi)容。
關(guān)于用戶在提交表單之前交叉檢查輸入的方便
使用第三種模式（浮動(dòng)標(biāo)簽?zāi)Ｊ剑z查用戶輸入是快速且容易的。標(biāo)簽不會(huì)消失，也沒(méi)有視覺(jué)障礙，如頂部對(duì)齊的表格。相反，每個(gè)字段的一個(gè)視覺(jué)固定是比較標(biāo)簽和輸入所需要的。
文本樣式也可以幫助用戶更快地檢查其輸入。通過(guò)使輸入文本粗體大小，標(biāo)簽文本較小，用戶可以一目了然。
3. 字段焦點(diǎn)
字段焦點(diǎn)對(duì)于移動(dòng)界面是非常重要的。這是因?yàn)橛脩粼诖蜃謺r(shí)看著鍵盤。打完打字后，他們會(huì)回頭看看他們打字的內(nèi)容，以及是否處于正確的位置。
輸入字段中所有三種標(biāo)簽?zāi)Ｊ降谋容^
這是3種模式通常發(fā)生的情況：
- 模式一（頂部對(duì)齊的標(biāo)簽）中，字段突出顯示，但不是文本標(biāo)簽。
- 模式二（標(biāo)簽在用戶類型消失時(shí)），字段突出顯示，但文本標(biāo)簽可能消失或變暗。
- 模式三（浮動(dòng)標(biāo)簽）中，邊框圍繞字段，標(biāo)簽和輸入都突出顯示。
很明顯，第三種模式（浮動(dòng)標(biāo)簽）是最強(qiáng)的，因?yàn)橛脩艨梢郧宄乜吹剿麄兯诘淖侄我约叭魏螘r(shí)候他們所打字的內(nèi)容。
4. 提交時(shí)出現(xiàn)錯(cuò)誤信息
如果表單已填寫(xiě)完成，但在表單域之外或頂部沒(méi)有標(biāo)簽可見(jiàn)，用戶必須返回每個(gè)字段以顯示描述，以便修復(fù)錯(cuò)誤。
[IMP]：測(cè)試你的界面表單
老實(shí)說(shuō)，我們談?wù)摿嗽陔y度很高的用戶體驗(yàn)中的最佳做法，時(shí)尚和趨勢(shì)，你永遠(yuǎn)都不能確定用戶如何響應(yīng)界面。響應(yīng)可能會(huì)有所不同，具體取決于許多參數(shù)——用戶對(duì)界面趨勢(shì)的影響，應(yīng)用程序類型的使用，他們所屬的年齡組等等。最好設(shè)計(jì)表單版本是與用戶進(jìn)行測(cè)試便知道哪個(gè)最適合您的品牌。
我們使用CanvasFlip來(lái)查看表單上的熱圖和用戶視頻。相信你會(huì)受益于同樣的。A / B測(cè)試對(duì)于作出任何決定都是非常有幫助的。
在得出任何結(jié)論前的測(cè)試表格
結(jié)論
用戶在填寫(xiě)表單時(shí)可能會(huì)猶豫，所以作為設(shè)計(jì)師我們應(yīng)該盡可能地簡(jiǎn)化這個(gè)過(guò)程。標(biāo)簽顯示方式的輕微變化，可明顯增加表單的可用性。可用性測(cè)試在表單設(shè)計(jì)中是不可或缺的。通常情況下，僅進(jìn)行一些測(cè)試或者簡(jiǎn)單地要求同伴完成表單的原型可以讓你對(duì)表單的可用性有一個(gè)很好的了解。
原文作者：CanvasFlip
原文地址：https://uxplanet.org/float-label-pattern-in-ux-form-design-7ab5e33010ab
譯者：SKYUI
本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels，基于 CC0 協(xié)議
學(xué)習(xí)了