【译文】移动端表单设计小妙招

在app上填写表单是不可避免的,同时又是无趣的。如何才能让用户高效的填写表单呢?

除了让表单看起来更美一些,高效的完成是表单设计的主要目标。

使用分离控件

一个单选项可能含有2-5个备选项,尽量使用分离控件。这样所有的选项是可见的,同时用户可以快速的做出选择。

将多个下拉列表变为单一下拉列表

在日期选择时,通常含有3个部分,年、月、日,如果使用每一个数据的选择要至少3步,点击-选择-确定,那么就会产生9步操作。如果使用单一下拉列表则只需5步,点击-选择年-选择月-选择日-确定。

使用开关控件

如果下拉列表只有两个选项,例如“显示”和“隐藏”。如果使用下拉列表,意味着复杂的交互,使用开关按钮或单选框即可减少额外的步骤。

选择滑动条

在选择一个值或一个范围时,考虑使用滑动条将单调的下拉列表里变成扫描性更强的页面。

避免使用多列显示

在小尺寸的屏幕上,物理边界的限制使得单列显示更容易被用户聚焦,从而避免漏项。

使用步进设计

单用户对数值进行微调时,使用步进设计代替输入框和下拉列表,既可以降低操作失误率,进而一定程度上减少点击次数。

分条提示错误而不是“打包”设计

在屏幕上邻近选项提示错误。绝大多是情况下,屏幕焦点区域不是表单的顶部和底部,所以要将用户目光吸引到正确的位置。在邻近选项的位置提示错误而不是将所有错误集中显示。

不要重复标记必填项

尽量不显示非必填项可以让表单看起来更简洁,同时减少用户表单输入负担。但非必填项不需显示时,可以异化显示,而不是在必选项上不断重复“*”。

打包相关选项

将有联系的选项打包可以帮助用户扫描选项,快速找到选项。同时将冗长的表单分割成几个部分可以提高用户的完成率。

合适的点击区域

不要将点击按钮或区域设计的过小。用户不是使用鼠标点击,而是使用手指,不能做到绝对精确,所以需要设计大小合适的点击区域。

忠于平台

无论是移动设备还是app的设计都需要使用对应平台的规则。使用用户熟悉的交互方式和UI设计。无论是iOS、Android还是Windows Phone,用户希望在同一个平台使用任何app都有同样的后退按钮。

原文:https://uxplanet.org/building-great-mobile-forms-2fa8e9a258cc#.w8leuo5rx


转载要记得标明出处哦!

大家可以扫描下方二维码关注我的微信公众号Yinteraction,一起交流关于交互的问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 设计师在移动端设计表单的历史已经超过十年。但是十年之间科技日新月异,我们对用户的理解也不再停留在小学阶段,对表单的...
    芥子未末阅读 3,350评论 0 12
  • 一. 表单设计的影响与原则 1.1 表单的产生 由内而外,网站根据自身信息存储格式要求,从数据库映射成表单。 由外...
    晓梦蝉君阅读 12,228评论 1 30
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,167评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,276评论 4 61
  • 煮了碗方便面 想着你 想我该如何对待你 应该吧我们的关系把控到什么程度 暂时的完全放开你是我最终的答案 对你的爱深...
    茉莉桃子阅读 272评论 0 0