美文网首页
表单设计

表单设计

作者: 青琰 | 来源:发表于2016-01-18 14:30 被阅读0次

摘自《web表单设计》

0,少即是多的大原则:去掉不必要的问题,甚至可要可不要的问题。

1、大家都知道用户在页面上的视线轨迹是近似Z字形眼动,那么将表单放到用户可视的第一位。

2、如果有多个并列的问题,一般使用输入框高度的50%-70%作为问题之间的间隔高度。

3、问题之间都是有联系的,可以进行分块,有逻辑的组织各个问题。

4、表单应该少使用复杂的交互和视觉样式,以免增加用户负担。

5、但是各组问题之间需要区隔,使用很简单的方法(比如虚线、淡背景色)来区分各组。

6、除了表单自身,页面其他位置尽可能不要让用户注意到,也即是说,页面其他地方的信息用户也不应该注意到,那么最好不放内容。

7、整体流程栏上不要加表示步骤的数字,因为在填写表单的过程中,某个步骤可能会被增加(登录、选择支付方式等)

8、只在必要的地方出现表单。表单上每个问题都要多问自己几次:是不是一定得在这儿让用户填写?

9、不要仅仅要颜色来传递功能(如出错时候的提示),各个用户对颜色的理解是会有偏差的。姐姐方法是应同时使用文字。

10、如果要使用Tab键作为表单内容间的跳转,要考虑到对于两栏表单的从第一栏底部跳到第二栏顶部时的显示问题。

11、一定要有表单名称,并且符合人们的期望,并简述表单的目的

12、顶部对齐/左对齐/右对齐,各有优劣。顶部,符合眼动效率。右对齐,标签和输入框距离近。左对齐,方便用户快速掌握问卷内容。根据场景和表单目的来选择。

13、如果屏幕空间珍贵,标签内容放到输入框中提示。但这并不适用于问题很多或答案很长的情况,因为写完无法check回答的内容是不是符合问题。

14、输入框的长度要和用户对答案的预期长度基本符合。

15、如果要对“必填项”还是“选填项”进行标注,那只有在这两种问题数量差异悬殊时标注有意义。同时要标注问题少的那个。

16、单独出现“ * ”是没有意义的,因为没有图例说明这是必填还是选填。直接用文字。

17、表单完成时有主动作和次动作之分,一般来说“提交”为主动作。主动作标示要显眼。如果可能,去掉次动作的按钮。

18、主动作按钮和主输入框对齐。

19、提交时应有动作提示表单已在提交(特别是网络不好的时候),避免重复提交。

20、帮助文字在需要时才出现,不遮挡页面其他文字,与当前输入框融为一体。·

21、帮助文字在当前输入时不能消失,否则就失去了帮助文字的意义。

22、如果有多输入框都需要相同的帮助文字,该帮助文字保持显示。

23、如果输入有误,先告知“出错”。在出错的地方用不同的颜色/字号/图形显示错误

24、多采用即时验证,比如支付宝的验证码。最适合错误率高,或有特殊格式要求的表单项,但要在输入完成后验证,不要在输入过程中验证。

25、减少问题是必要的,但是不能增加其他问题的复杂程度。

26、尽可能在所有地方提供默认答案,可以根据用户信息或是普遍用户行为推断,要符合大多数用户的预期。

相关文章

  • 关于表单设计的思路

    表单设计的典型流程: 数据建模---------------设计表单------------布局---------...

  • 《Web表单设计》读书笔记

    一、表单结构 1、表单的设计 -设计原则 尽量减少痛苦 说明填写完成途径 考虑情境 确保一致沟通 2、表单...

  • bootstrap学习(二)

    一、表单 基础表单 对于基础表单,Bootstrap并未对其做太多定制性效果设计,仅仅对表单内的fieldset/...

  • 表单设计技巧

    通过对无数的表单设计A/B测试,以及一些大公司花费大量经费对表单设计的研究,下面总结出我认为最好的58个表单设计实...

  • 我的工作流设计

    工作流 表单与流程分离,流程选择某个表单进行绑定和设置 表单 设置分组 对表单进行分组,便于查找和设计权限 表单设...

  • 工作流开发推荐使用表单引擎

    所谓的表单引擎 表单引擎,也可以称为表单流程,流程表单和工作流表单,是基于Web界面上可视化编辑的表单设计系统。它...

  • 基于web的自定义表单引擎

    所谓表单引擎 表单引擎,又可称之为表单流程、流程表单、工作流表单,是基于Web界面上可视化编辑的表单设计系统,可设...

  • 第三章 表单 3-1三大表单

    基础表单 水平表单 内联表单 一、基础表单类名“form-control”,实现一些设计上的定制效果。 1、宽度变...

  • 如何设计一个交互好转化率高的表单

    表单在网页设计、app或者软件界面当中被广泛的使用,因而表单设计是个比较重要的工作。一个好的表单,不仅仅是界面设计...

  • 元数据管理—动态表单设计器在crudapi系统中完整实现

    表单设计 在前面文章中,我们通过一系列案例介绍了表单设计的一些基本功能,表单设计起到非常重要作用,也是crudap...

网友评论

      本文标题:表单设计

      本文链接:https://www.haomeiwen.com/subject/knskkttx.html