美文网首页设计学习移动设计产品
移动设备表单设计建议

移动设备表单设计建议

作者: 二饼〇_〇 | 来源:发表于2017-02-25 17:04 被阅读162次

填写各式各样的表单是我们日常上网中经常会遇到的,对于大多人来说填写这样的表单并不是我们上网的目的,但是我们又不得不去填写大量的信息,表单只是获得用户信息的工具。

作为交互设计师,如何去设计一个高效合理的表单也是最基础的一个技能,当然这是建立在美观的基础上的,这一篇文章就会介绍一些原则如何在移动设备上设计出可用性高的表单设计。

1、用分段标签菜单的场景

在2-5个选项的单选场景下应该应用单行的分段标签表单,不去使用下拉菜单。因为在5个以内的选项情况下,分段标签可以一样看出所有的选项,另外只需要一次操作就可以完成,下拉菜单需要两次操作:打开菜单,选择。

2、整个多个有关联的下拉菜单到一个区域

这种形式遇到的情况不多,但是一个经典的案例就是选择日期的控件。其实日期表单在实质上是“年、月、日”三个单选下拉菜单。如果分开为三个独立的单选下拉菜单无疑增加了用户的操作量,并且减少了日期之间的关联性。

3、用开关选项的场景

在一些互斥的两个选项中,比如“显示”“隐藏”,一般使用勾选菜单。如果使用下拉菜单的话,用户会更加关注而外的交互方式,而不是选项自身的内容。开关与勾选是最佳的二元选择的交互方式。

4、用滑块的场景

在范围内做选择的场景下,应该首先考虑的是滑块控件。它可以快速地帮助用户做出选择,而不是一味地采用单调的下拉菜单。

5、避免多列的情况

特别是在一些小屏幕的移动设备上,通常用户都是通过手指的点击来选择输入框的,所以保证一个输入框占一行是非常重要的。

6、用分档器的场景

在用户需要细微调整输入值的场景下,优先选择分档器。可以帮助增加或减少一个固定的细微值,避免滑块带来的错误。

7、直接指出错误的地方,而不是在最后显示一串报错信息

在出现错误的地方直接显示错误信息也是十分重要的。现在很多的表单都是在最后集中显示错误的信息,很多时候这样的显示,用户不知道到底错在哪里,更有甚者,错误信息会超出一个屏幕的范围,需要用户下滑屏幕才能看到,以至于不知道错在哪。所以,当用户出错的时候就在出错的地方显示他出错的原因。

8、不要重复显示必填选项的标志

按照常理来说非必填的项目应该是不用显示的,这样一来,表单就会很短,用户填写起来也更加便捷。但是出于运营和产品的各种需要,非必填项通常都会出现,所以导致了许多菜单上多了很多星号在必填项上。当这种情况出现的时候,我们可以选择把非必填项区别显示,比如通过提示字的颜色差别。

9、把有关的信息分组显示

格式塔里也提出过一样的设计规则。把相关的信息做一个分组显示,可以帮助用户快速扫描找到有用的信息。同样还帮助了表单分成多个有目的的块,提高了可读性和美观程度。

10、提供舒适的点击区域

用户在移动设备上不是用鼠标,而是用手来点击相关区域的,所以不要把按钮区域设计的太小,一定要遵循每个平台的设计规范,上面都有最小的设计数值。

11、遵循平台的设计规范

在设计app的时候一定要遵循平台的设计规范,因为在不同的app中用相同的交互模式对于用户来说十分重要,可以避免用户出错,符合用户的操作期望。

相关文章

  • 移动设备表单设计建议

    填写各式各样的表单是我们日常上网中经常会遇到的,对于大多人来说填写这样的表单并不是我们上网的目的,但是我们又不得不...

  • 移动设备的转场设计

    xiaofei|2013-01-23|交互设计 讲到移动设备的转场设计,我们先来看看移动设备。 移动设备有三个主要...

  • 【读书笔记+思考】移动设备表单设计

    在移动界面中,常见的表单模式有:登录表单;注册表单;核对表单;计算表单;搜索表单;多步骤表单;长表单等 登录表单:...

  • 2018-10-07Bootstrap01

    移动设备优先 Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。Bootstrap 3 的设计目标...

  • 5大黄金准则,设计你的移动端邮件

    移动设备上的邮件设计不仅仅是一个内容填充列表,它涉及诸多设计元素。 对于移动设备的设计从来不是一件简单的事情。人们...

  • 移动端自适应方案

    移动端适配的目标是让页面在移动设备上可以合理展示 viewport缩放方案 在对设计稿还原时,不需要去关注移动设备...

  • [交互设计]PC&移动端表单设计

    手机App为生活带来巨大便利,多种多样的移动表单设计形式进入我们的工作与生活。表单是移动应用中与用户产生最多交互的...

  • 网页设计建议

    设计原则 以用户使用体验为第一目标 表单设计建议1、使用label标签提升表单可用性2、明确的输入域标识 不能一味...

  • 点石成金第10章

    一、关于移动设备 当你在移动设备上进行设计的时候,可用性方面的区别在于: 在小屏幕上,人们现在移动得更快了,阅读量...

  • Week4-文献练习

    从“平静技术设计原则”指导可穿戴设备的用户交互界面设计 随着全新移动互联网时代的到来,智能移动终...

网友评论

    本文标题:移动设备表单设计建议

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