表单设计中,各种设计模式和技巧已经越来越成熟了。在诸多设计技巧当中,悬浮标签这一设计手法,应该是对于用户体验提升最明显的一种。今天主要给大家分享ui界面表单设计内容,希望对你们有帮助!
1.固定标签允许用户浏览更多内容
虽然只有四个字段,但是当你采用顶部固定标签时,用户实际上需要浏览更多的内容,因为有8个元素要查看。
要输入的标签和空白字段是完全分开的8个元素,当用户的视觉在处理信息时,会自然感到信息相对密集,并且要处理的内容相对多。
2.提交数据前的最终检查
表单填写完成后,用户通常会在提交前快速检查其内容的正确性。用户必须上下扫描输入内容和相应的标签来匹配,以确保填写的字段是正确的。这时,输入框的边界会挡住视线,即使空间关系是根据相关元素的邻近原则设计的,在这个过程中也不会显得如此清晰和明显,所有这些都将使最终的检查工作变得不那么迅速。
此外,还有一种设计模式,是让标签作为占位符放置在输入框中,当用户单击输入时,标签会自动消失。这种设计很简单,但是用户在输入时很容易忘记需要输入哪些字段,也会导致问题。
第三种解决方案是我们现在所说的悬挂标签,它结合了前两种方法的优点,并成功地避免了两种方法的缺点,减少了第一模式的视觉障碍,并且保持了简约的设计。同时,当用户输入时,标签将自动浮动不会消失,不会让用户迷茫。
3.字段和焦点
在表单设计中,视觉焦点控制也是一个非常重要的因素。当用户在输入过程中连续在输入框和键盘之间切换时,在输入完成后检查输入内容,以确保正确填写所有字段。
在这种情况下,我们可以比较前面提到的三种模式下的视觉识别程度:
第一种是顶部固定标签设计,字段突出,标签的识别度不足;
第二种是当用户输入时,字段消失。在这种模式下,字段足够突出,但文字标签完全不见,用户无法判断输入内容是否满足要求;
第三种是浮动标签,标签和字段内容有颜色和大小的区别,而边框和标签围绕着字段,主次分明。
4.提交时报告信息出错
在这三种模式下,当用户输入错误时,表单需要立即报告错误,并让用户调整内容进行填写。然而,在这种要求下,顶部固定标签和浮动标签的设计模式可以更清晰地传递错误报告信息,而隐藏标签的设计只能通过输入框的颜色来识别,相对识别性较差。