美文网首页控件和规范体验式设计研究表单设计
【读书笔记+思考】移动设备表单设计

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

作者: 法海先生 | 来源:发表于2015-08-05 11:51 被阅读444次

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

登录表单:

在登录表单中,常见的内容需要有:用户名,密码,登录按钮,忘记密码帮助,(验证码),(去注册)等。

注意:上面的内容最好在一屏内显示,提供忘记密码的入口。

有些应用将登录和注册按钮单独放在同一个屏幕内,根据用户的操作再跳转到相应的登录注册界面。有些应用舍弃了填写用户名的输入框,只需要填写密码就可以了,因为可以将手机设备作为一个账号来使用,不过这样不利于保存用户信息,无法在多平台使用

注册表单:

应该和登录表单一样,只包含少量的信息,清除冗余的输入框,比如确认邮箱和确认密码。(在移动设备中,大多数应用只需要用户第一次注册然后登录就可以了,一般情况下很少退出应用重新登录,而且忘记密码后再找回密码也很方便,所以确认密码的必要性不是很高)。

在填写注册信息时,不要把标签和输入框水平放置,而应该垂直放置,符合阅读习惯,视觉流是从上而下的。或者也可以采用水印式的标签。

核对表单:

把提升速度,效率和让用户放心作为设计目标,去掉不必要的输入框,减少页面和操作的步骤。可以在标题处显示安全锁来表示当前的链接是安全的

核对表单最重要的是保证信息的容易识别辨认,信息清晰易读。

计算表单:

如果可以,将计算结果放到同一屏幕内来显示,并保证位置明显,视觉上突出一些。

对于敏感数据,比如钱财,可以采用隐藏按钮,来让用户感到安全

支付宝中可以隐藏资金数据

搜索表单:

在搜索表单中,只提供必要的输入项,并提供合适的默认值。不要让太多的搜索选项吓到用户,把搜索条件控制在一页之内,采用能够通过手指,方便且快速操作的控制方式。

对于某些应用,比如电商中的搜索,会有很多过滤选项,可以尝试采用类似浮动面板的方式,这样用户每选择一个搜索项,会直接在同一个页面内可以看到相应结果,减少跳转。如下方式:

amazon和ebay的多面搜索

多步骤表单:

去掉不必要的输入框,减少页面和跳转的数量;要告诉用户当前所处的位置以及将要去哪里(或者说一共有多少个步骤,现在在哪一个步骤);有些应用在导航栏处放置了一个进度条,同时显示了总的步骤数和当前所在的位置。

国内很多应用在注册流程中有好几个页面:“先输入手机号---》收到并填写验证码;填写密码---》填写其他信息,注册完成。”问题是用户在注册时并不知道还有多少步骤才能完成,可能会中途放弃注册,最无语的是曾经见过的“奢圈”app的注册方式。

长表单:

某些表单需要用户滚动屏幕才能浏览完。

注意:有些长表单甚至普通表单把提交/添加按钮放在了标题栏的位置,如iOS的日历应用中新建事件将添加放在右上角:

iOS日历应用的长表单

在iOS日历中新建事件用户可以不必填写完所有表单项便可以完成事件,将添加按钮放在右上角比较固定,避免了键盘挡住按钮。不过这样设计也是不符合自上而下的信息流的,建议将按钮放在底部,如果表单真的很长建议将其固定在底部,如下面这样:

比如“pay”按钮

最后

由于移动设备屏幕尺寸小的特点,信息承载量有限,让设计表单时举步维艰,需要设计师注意各种技巧和方法,以及规避不好的设计。不论何种表单设计,都需要全面考虑颜色,大小,字体,间距,对齐方式,数据比较方式等;为了保证好的体验,也需要设计师去除冗余的内容,方便用户操作,保证结构清晰,易于阅读操作。

相关文章

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

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

  • 移动设备表单设计建议

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

  • 移动设备的转场设计

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

  • 2018-10-07Bootstrap01

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

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

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

  • 移动端自适应方案

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

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

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

  • 《web表单设计:点石成金的艺术》笔记

    由内而外的表单基于业务,由外而内的表单基于用户 【写在前边】本文是阅读《web表单设计:点石成金的艺术》的读书笔记...

  • 点石成金第10章

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

  • 高效易用的表单设计指南

    整理了一篇断断续续写了很久的文章,结合最近的读书笔记和自己的工作经历探讨一下表单设计中的一二。 如何定义表单,表单...

网友评论

    本文标题:【读书笔记+思考】移动设备表单设计

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