北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京UI设计培训 UI设计中的表单设计

时间:2016年08月18日 来源:火星人

在移动端快速发展的今天,想让我们不下载APP都难,APP给我们的生活带来了很大的便利。作为UI设计师的我们,可能会更在意的是APP的设计。更多的APP在第一次使用的时候是让我们注册登录,表单的设计会给我们留下印象,我们心中也会给这个APP打出一个分数。

今天要给大家介绍的就是UI设计中的表单设计,可能在设计日常的设计中表单设计很不起眼,但是小小的表单的设计也包含着很多规范,感谢作者@三达不留点gpj,原文地址:http://www.jianshu.com/p/af743808296b

译文地址:https://uxdesign.cc/design-better-forms-96fadca0f49c#.q9x1ddl3n

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

1.表单排成一列。

多排会分散用户的注意力

北京web前端培训

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

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

3标签顶部对齐。

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

北京web前端培训

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

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

北京web前端培训

5、避免全部大写

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

北京web前端培训

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

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

北京web前端培训

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

若将选项隐藏至下拉列表中,用户需要执行两次点击才能完成选择;这种方法最好在选

项数量多于5个时再去使用,当数量甚至超过25个时,最好将搜索也融入其中。

北京web前端培训

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

一个行为召唤类按钮应该描述其目标意图 北京web前端培训

9、在行内指明错误

在错误发生的地方告诉用户,并指明原因 北京web前端培训

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

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

北京web前端培训

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

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

北京web前端培训

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

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

北京web前端培训

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

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

北京web前端培训

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

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

北京web前端培训

15、将关联信息分组显示

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

北京web前端培训

关键词:北京UI设计培训,北京UI培训,北京UI设计,表单设计,APP设计

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号