课程咨询 :15265420612
QQ:2720475033

烟台UI培训 > 达内新闻 > 常见表单设计样式与注意事项
  • 常见表单设计样式与注意事项

    发布:济南ui培训      来源:济南ui培训      时间:2016-09-12

  • 无论是注册流程,多视图步进或单调的数据输入界面,表单都是数字产品的设计中最重要的组成部分之一。本文重点介绍了常见的表单设计样式和要避免的注意事项。但请记住,这些都是一般准则,每一个规则都有例外。

    1、表单应该排成一列

    多列排布会分散用户的竖向注意力

    2、标签顶部对齐

    相比使用左对齐的标签,使用顶部对齐的标签后,更高比例的用户会完成表单的填写;顶部对齐的方式也更适用于小屏幕的手机。不过,在面临多选项多数据的输入时,尽量还是考虑左对齐标签,这样用户更容易一起浏览。

    3、将标签跟输入框作为绑定的一组

    把标签和输入框靠在一起,相邻输入框间设置合适的距离避免用户困惑。

    4、避免全部大写

    全部大写的标签会造成阅读和浏览上的困难。

    5、如果可选项少于6个,全部显示出来

    若将选项隐藏至下拉列表中,用户需要执行两次点击才能完成选择;这种方法最好在选项数量多于5个时再去使用,当数量甚至超过25个时,最好将搜索也融入其中。

    6、避免使用占位文本作为标签

    使用占位文本确实能优化屏幕空间的利用,但其会带来一些可用性问题,

    7、将复选框(或单选按钮组)垂直排列

    将复选框垂直排列易于阅读。

    8、使“行为召唤”类按钮具有描述性

    一个行为召唤类按钮应该描述其目标意图

    9、在行内指明错误

    在错误发生的地方告诉用户,并指明原因

    10、在用户完成输入后再执行行内校验(除非在输入过程中执行有用)

    用户输入过程中不要使用行内校验——除非确实能帮到用户——比如在设置密码、用户名过程中字符长度唱超过限制时。

    11、不要隐藏基本的帮助文本

    要尽可能显示出基本的帮助文本。对于复杂的帮助文本,可以考虑在输入框获得焦点后将其放置于输入框旁边。

    12、主要选项和辅助选项要做区分

    关于是否应该显示辅助选项甚至在哲学界引发了一场很大的争论。

    13、使用合适的输入框长度

    输入框的长度应该令用户可预见能够输入的字符长度,面对有明确长度边界的字段时(比如手机号、邮编),最好这样做:

    14、避开使用*,标示出可选项

    用户并不总是知道标签后的*暗示什么,还是最好将可选项标示出来。

    15、将关联信息分组显示

    批量性的长表单通常令用户无法忍受,通过将相关信息分成合理的一组,用户能够更快的理解表单元素间的关联。

    推荐文章

上一篇:云音乐WIN10 BETA版的设计经验总结

下一篇:UI新闻:土豆网改版力求区别于优酷

最新开班日期  |  更多

第一阶段 平面设计培训

第一阶段 平面设计培训

开班日期:12月29

第二阶段 网页设计培训

第二阶段 网页设计培训

开班日期:12月29

第三阶段 美工培训

第三阶段 美工培训

开班日期:12月29

第四阶段 ui设计培训

第四阶段 ui设计培训

开班日期:12月29

  • 地址:烟台市芝罘区海港路 25 号 阳光 100A 座 4 层 0403室
  • 课程培训电话:15265420612
    QQ:2720475033     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56