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

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

登录表单:

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

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

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

注册表单:

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

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

核对表单:

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

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

计算表单:

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

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

【读书笔记+思考】移动设备表单设计_第1张图片
支付宝中可以隐藏资金数据

搜索表单:

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

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

【读书笔记+思考】移动设备表单设计_第2张图片
amazon和ebay的多面搜索

多步骤表单:

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

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

长表单:

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

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

【读书笔记+思考】移动设备表单设计_第3张图片
iOS日历应用的长表单

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

【读书笔记+思考】移动设备表单设计_第4张图片
比如“pay”按钮

最后

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

你可能感兴趣的:(【读书笔记+思考】移动设备表单设计)