
课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
表单是ui设计师在设计网页的时候会经常用到的一个元素组件类型,下面我们就通过案例分析来简单了解一下,表单设计都有哪些注意事项。
1、标签
标签主要是解释输入项的含义,用户会根据标签输入相应的内容,一般不宜太长,需要简洁明了,快速让用户理解。
表单标签的常见展现形式有4种,分别是顶对齐、左对齐、右对齐、表单内对齐。
顶对齐
标签位于输入框上方,并与输入框保持左对齐。
优点:当页面字段不多时,标签靠近输入框,这种方式可以保持人眼水平方向集中在一个较小的区域。
用户目光可以更快的从标签移到输入字段,可以快速完成并减少认知负担。
同时标签单独占一行,不受长度的影响,更适应产品国际化。
缺点:标签加输入框的样式,占用垂直空间较大。当表单数量过多时会显得页面非常长,让用户感到疲劳。屏幕利用率降低,适用于字段较少的表单。
左对齐
标签和输入框并排显示,且所有标签左对齐。
优点:占用较少的垂直空间,当标签内容为陌生内容时,左对齐易于阅读,可以让用户很容易感知标签和输入框的联系。
缺点:因为标签的长度不同,左对齐后会导致部分标签和输入框距离很远,需要更多横向空间。标签和输入框之间的空白边缘不一致,不利于用户填写。
右对齐
标签和输入框并排显示,且所有标签都右对齐。
优点:占用较少的垂直空间,标签和输入框的距离一致,有利于用户填写。
缺点:因为标签的长度不同,左边空白边缘不一致,会降低用户的可阅读性。
表单内对齐
标签显示在输入框内部。
优点:节约空间,不受垂直空间、标签长度的影响,既节省横向空间又节省垂直空间。非常适合用在用户熟悉的字段,方便用户填写。
缺点:在用户输入字符后,内部的标签就会隐藏,不适合较长或较复杂的表单,不利于表单的完成。
2、表单域
表单域是表单的核心,是录入信息的核心交互部分;为了便于不同信息的录入,通常会采用不同的交互组件。
3、操作按钮
通常,表单都会有一个提交动作:点击表单按钮,则表单信息录入完成。而操作动作,通常又分为主要按钮和辅助按钮。
常见的表单按钮有保存、提交、确定、登录……这些完成表单必不可少的按钮,称之为主要按钮。
还有一些按钮例如预览、重置、撤销等,不属于完成表单的必要操作的按钮,称之为辅助按钮。
为了让用户视觉聚焦和快速完成任务,通常主任务操作为主要按钮,次任务操作为次要按钮,并且一个场景中通常只有一个主按钮。
【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销,赚更多好礼。