表单的运用_服务器

在UX表单设计中的小诀窍

用户可能不愿意填写表单。作为设计师，我们应该尽可能简化这个过程。标签显示方式的微小变化可以显著提高表单的可用性。

比较表单标签的所有趋势

2013年8月首次将输入模式改为浮动标签模式。想法很简单:动画占位符文本在输入旁边显示图标，这样用户就不会在当前糟糕的情况下迷路。

浮动标签创意的起源-输入它旁边的图标

这个想法随着时间一点一点地进行着。图标没有完全达到它的目的。这非常令人沮丧，因为我不知道没有标签什么是正确的。这时图标创意被抛弃，只有文字设计诞生了。现在，浮动标签进入屏幕，带有轻微的文本动画。当有人进入输入框时，浮动标签将向上动画显示，并将颜色更改为活动。

版本2:浮动标签的文本模式(图片来源:DerekTorsani)

浮动标签作为一种解决方案，保存了界面空，使其看起来清晰简洁，又不放弃可用性。

顶部对齐标签和浮动标签模式

1。扫描顶部对齐标签上的更多元素

在上面顶部对齐的表单中，只有4个字段。但是当你扫描表格的时候，你会觉得有很多要填。这是因为用户必须扫描8种不同的元素。

和标签字段是由空分隔的独立元素。因此，用户可以使用八个独立的视觉夹具来处理这些元素。额外的视觉效果让用户有更多的扫描要做，让他们觉得有很多东西要填写。

2。提交前最后检查输入

使用顶部的对齐选项卡，并在最后不要很快地交叉检查输入。用户必须上下扫视标签以查看是否匹配。空白线和场界阻碍了它们的视觉路径，减缓了它们的流动。

在输入字段被填充后标签消失的其他模式也是有问题的。消失的标签迫使用户回忆起标签的内容。

关于方便用户在提交表单前交叉检查输入。

使用第三种模式(浮动标签模式)来检查用户输入既快速又简单。标签不会消失，也没有视觉障碍，比如顶部对齐的表格。相反，需要对每个字段进行视觉固定，以比较标签和输入。

样式还可以帮助用户更快地检查他们的输入。通过将输入文本加粗，标签文本变小，用户可以一目了然。

3。字段焦点

焦点对于移动界面来说非常重要。这是因为用户在打字时看着键盘。打完之后，他们会回头看看自己打的是什么，位置是否正确。

输入字段中所有三种标签模式的比较

这通常发生在三种模式下:

在模式一(顶部对齐的标签)中，字段被突出显示，但它不是文本标签。

在模式二中(当标签在用户类型中消失时)，字段会高亮显示，但文本标签可能会消失或变暗。

在模式三(浮动标签)中，边框环绕字段，标签和输入突出显示。

显然，第三种模式(浮动标签)是最强的，因为用户可以随时清楚地看到自己所在的字段和正在键入的内容。

4。提交时出现错误消息

如果表单已经填写，但是在表单域的外部或顶部看不到标签，用户必须返回到每个域来显示描述，以便修复错误。

[IMP]:测试你的接口形式

老实说，我们讨论了艰难的用户体验中的最佳实践、时尚和趋势，你永远无法确定用户会对界面做出怎样的反应。用户对界面趋势的影响，应用程序类型的使用，他们所属的年龄组，等等。最好的设计形式版本是和用户一起测试，知道哪一个最适合你的品牌。

我们使用CanvasFlip查看表单上的热图和用户视频。我相信你也会同样受益。A/B测试对做任何决定都很有帮助。

在得出任何结论之前测试表格

结论

可用性测试在表单设计中是不可或缺的。通常，只需做一些测试或简单地要求您的合作伙伴完成表单的原型，就可以让您很好地了解表单的可用性。

原地址:https://uxlanet.org/float-label-pattern-in-UX-form-design-7ab5e33010ab

作者:CanvasFlip

译者:SKYUI

欢迎分享，转载请注明来源：内存溢出

表单的运用