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

在app上填写表单是不可避免的,同时又是无趣的。如何才能让用户高效的填写表单呢?除了让表单看起来更美一些,

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

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

 使用分离控件

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

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

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

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

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

3使用开关控件

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

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

4 选择滑动条

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

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

避免使用多列显示

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

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

使用步进设计

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

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

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

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

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

不要重复标记必填项

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

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

打包相关选项

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

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

10 合适的点击区域

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

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

11忠于平台

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

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

欢迎转载,记得标明出处哦

译文:芥子未末

文章来源:邮件投稿(admin@iamue.com)

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/19263/

(0)
iouedioued
上一篇 2017-03-17 13:33
下一篇 2017-03-21

相关推荐

  • 应对谷歌烧脑招聘面试题,看看你够聪明吗?

    谷歌每年收到大约2,000,000份申请,但它只雇用大约4,000人,比耶鲁和哈佛的录取率还低。很多人都被那些刁钻古怪的考试问题所难住。 网上流传的版本很多,甚至已经有些被神化的味道。但实际上总结起来,谷歌的考试题…

    译文 2016-05-17
  • 原型交互设计入门,我该选哪个工具?

    交互设计是我们原型设计中很重要的一部分, 如何快速掌握一个原型设计工具,尽快入门,高效地完成工作?这里选择了三款原型设计工具作对比,希望给想入门或者刚入门的童鞋提供一些参考。Axure - 知名而强大的原型设…

    2016-09-20
  • 在非舒适地带实现自我成长与提升

    每周博文伊始,要么肆意描述一下身边的环境以及自己的心情状态,要么一时语塞,左顾右盼却不知如何言语;像此刻这样强烈的希望将最近忙于的各项事务全盘托出的状况好像不大常见。 比如?可以用“精心打磨”来形容的Wi…

    2017-05-24
  • 哪种性格的人能成为最好的设计师

    性格与你工作优秀与否有关吗?让我们来看下事实与证据吧。   有句老话是这么说的“大千世界,无奇不有”。这句话在应运于工作场所时再真实不过了。无论是爱交际的创意总监还是僵硬死板的会计师,我们对他们持有…

    2016-06-10
  • 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的:

    手机地图  移动交互 数据可视化 移动大潮席卷了你我。 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的。 本文的原 po 给几乎每个案例、工具都…

    2016-04-08
  • 防止用户无意识犯错的6个实用方法

    #交互学堂##防呆设计#用户经常会从手头上的事情分心,提供建议,利用约束条件以及设计更灵活的方案能够防止无意识的差错产生。今天这篇译文讨论了6个防止用户无意识犯错的方法,专业干货收。

    2016-11-02
  • 【翻译】未来的用户体验模式:预期设计

    原文作者:Zack Rutherford Zack Rutherford是一名在Unpin的UX设计作者。 原文链接:UX Patterns of the Future: Anticipatory Design 预期设计是一种相当新的用户体验模式,寻求在一个平衡的情况下,完全移除用户…

    2016-01-27
  • 国外排名前20的UX/UI设计师推荐

    在UX/UI设计领域中,当下最不缺乏的当属日新月异的科技和创意百变的设计灵感。保持对设计行业的持续关注以及敏锐嗅觉,不仅是可以提高我们的专业素质,同时也能保持自身的行业竞争力。说了这么多,那应该具体怎么做…

    2016-09-23
  • 熊先生做原型之初级原型设计流程

    相信每个人都有自己的工作方式,但并不是每个人的工作方式都是科学的、有效的。熊先生入职也有一段时间了,平时也浅薄地学习了一些书籍知识,自己总结了一个平时工作的流程,希望对在工作上摸不出头绪的小白们可以…

    2016-09-16
  • 从二维界面到虚拟现实 VR (总)

    我是Google的一名产品设计师。2012年,我当时就职的一家名为Sparrow的法国创业公司被Google收购。从那时起,我就一直在Gmail团队效力,并全程参与了旗舰产品Inbox by Gmail的设计工作。 这些年下来,始终置身于移动…

    VR 2016-05-03