在形态设计中，各种设计方式和方法已经越来越成熟。在众多的设计方法中，浮动标签的设计技巧应该是改善用户感受最显著的一种。早在2013年8月，我就首次考虑在自己设计的表单中应用浮动标签。这个想法非常简单。在占位符文本中，添加了一个徽标，通过动画来显示信息，以确保用户在整个填写过程中不会轻易迷路。
浮动标签的初始形状:文本占位符旁边的小图标动画。
这种观念随着时间的变化逐渐改变。浮动logo的动画效果并没有达到目的，实际上也并不清晰，因为没有匹配的标签。但随之而来的是浮动标签的设计。如今，浮动标签和动画融合在一起。当用户点击输入框时，作为占位符的文本标签会向上波动到输入框的顶部，这样不仅可以让UI变得清晰简单，还可以让用户根据动画了解标签和输入内容的关系，还可以根据颜色让用户知道哪个输入框被激活。
第二个版本号:浮动标签
悬浮标签的优点很明显，简单，节省空间空，清晰易用。
顶部的固定标签与浮动标签
1。固定标签让用户不得不访问大量内容
虽然同时只有四个字段，但是如果选择顶部固定标签，用户实际上要访问的内容很多，因为必须查询的元素有八个。
必须输入的标签和空missing字段是完全分开的八个元素。当用户的视觉效果在解决这类信息内容时，自然会觉得数据量是相对聚合的，要解决的内容也是相对聚合的。
2。提交数据信息前的最终检查
填写完表单后，用户通常会在提交之前快速检查其中内容的准确性。用户必须查看输入和匹配的标签，以确保填充的字段是适当的。此时输入框的边界会遮挡视线，即使相关元素接近度标准设计的室内空关联也不容易在整个过程中看起来如此清晰明显，这一切都会让最终的检查工作越来越不迅速。
此外，还有一种设计方法是将标签作为占位符放在输入框中，当用户点击输入时会自动淡化。这种设计虽然简单，但是非常容易让用户在输入的时候忘记要输入哪些字段，也会产生问题。
第三种解决方案是浮动标签，它结合了前两者的优点，成功地避免了它们的缺点。减少了第一种方法的视觉效果障碍，并保持了简单的设计。另外，标签会在用户输入的情况下自动凸起，不容易褪色，也不容易让用户有被蒙蔽的感觉。
3、字段和焦点
在桌子设计中，视觉效果的焦点处理也是非常重要的元素。当用户在整个输入过程中不断在输入框和电脑键盘之间切换时，输入后要检查输入内容，确保所有字段填写正确。
在这种情况下，我们可以用前面提到的三种方法来比较田地的视觉识别系统:
第一种是固定顶的标签设计，字段突出，标签的区分度不够(为了更好区分，通常是这样设计的)。
第二个是当用户输入时，字段逐渐消失。这样字段足够突出，但是文字标签完全看不见，用户很难分辨输入的内容是否符合规定。
第三种是浮动标签，标签和字段内容之间有颜色和规格差异，外框和标签紧紧围绕在字段周围，顺序清晰。
4。提交期间错误消息的内容
在三种方式中，当用户输入不正确时，表单必须在当天报错，供用户填写调整后的内容。但在这样的要求下，顶部固定标签和浮动标签模式的设计模式可以更清晰地传递错误信息内容，而输入时隐藏标签的设计只能根据输入框的颜色来识别，相对区分度较弱。
最后还是绕不过去
说实话，我们讨论的是用户对什么样的设计感觉更好，什么样的设计更时尚，更符合发展趋势。你永远不知道在具体的交互中，用户会发生什么。用户的真实体现大概和你想要的不一样。造成这种情况的原因有很多，比如用户对UI设计发展趋势的掌握程度，之前应用习惯的危害，甚至不同年龄段的用户都会表现出不同的反映等等。是的，最好的形态设计，只有融合你熟知的品牌特征和用户测试，才能设计出来。
大家用CanvasFlip做热图检测，查看用户的具体交互。如果我有更多这样的测试，我肯定会从中受益。通过融合A/B检测，可以得到更实际的结果。
摘要
用户在填表的时候，会因为各种原因犹豫不决。因此，作为设计师，我们应该尽可能简化整个过程，关注每一个细微的变化，无论是标签显示信息的方式，还是颜色，尽力提高其可用性。可用性测试在所有表单设计中都是绝对必要的。经常需要根据测试来验证设计和设计思路，可以让你的产品设计更好。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）