当前位置:首页 > 经验学习 > 交互设计

移动应用表单设计秘籍

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

一直想写一篇文章,关于移动应用表单设计的,可惜最近项目很忙,忙到没有时间打理博客。最近体验产品的时候,经常看到错误的的表单设计,要么信息混乱,要么步骤繁复、要么语言程序化,要么视觉焦点跳跃,要么校验顺序混乱,要么反馈不及时,如此种种的问题,让我很想认真的总结一下,思考一下,为移动应用De(的)表单she(设)计,提供一些个人力所能ji(及)的建议,希望更多地设计师能认真思考移动应用表单的特殊性,能zui(最)大限度的提升表单设计的ti(体)验,提升效率,提高man(满)意度。
本文将从清晰的视觉纵线、信息的分组、极致的减法、利用选择代替输入、标签及文字的排布方式、依靠明文确认密码、合理的键盘利用、校验的小秘密这八个维度来分享我的移动应用表单设计秘籍。
yi(一)、清晰的视jue(觉)纵线
用户在浏览信息的时候,如果没有足够多的qiang(强)调元素,会从shang(上)至下,从左至右的浏览,Web端是一个“F”型视线,移动端更经常是“L”型视线(导航和重yao(要)操作往往在下边),那么如果你的表单的视觉浏览顺序,符合这个“L”型gui(规)律,基本上就符合用户的心理预期,不需要任何的寻找,任何的思考,就可以简单高效的执行完表单项的填写和提交。

这是一个登录表单视觉纵线的例子,用户先关注到用户名输入框,再关注到密码输入框,然后就自然而然的发现了登录按钮。
反面的例子很多,比如下面两个:

第一个反例比较常见,用户输入完用户名和密码之后,直接看到的操作按钮是注册,而不是登录,这种左右的布局方式,即便你用颜色区隔,也阻挡不了用户的视线落到注册上,于是简单的眼动测试就可以发现,这时用户盯着注册停顿思考一下是在所难免的。
第二个反例则会更加突出一些,因为表单标签与表单的相关性不是很好,用户需要先阅读表单biao(标)签的内容,再阅读输入框引导文字的内容,视线一直都是左——>右——>左——>右,这样已经不够友好了,最后提交的时候,又需要整个视线平移到右上角去寻找登录按钮,当然,我并不是在challenge iPhone的设计,如果全局都拥有这样的操作栏,右上角提交表单项还好,但这也jin(仅)适用于键盘会遮挡提交按钮的情况。
二、信息的分组
表单项并不是从上边罗列到下bian(边)就可yi(以)了,而是要经过信息组织的,同一类的表单可以放在一qi(起),dang(当)表单太长的时候,可以拆分成不同的组,这样用户在填写的时候,类似于一种任务拆解,可以一组一组的完成填写。

登录和注册shi(是)两个完全不tong(同)的去向,所以在布局上做一个显著的分组,如果用户想要登录的话,专心填写就可以了,如果用户想要注册的话,需要点击注册按钮,去到一个新界Mian(面)去完成操作。


填写信息的时候,如果所有想都列出来自然会有较大信息负担,但是如果按组别来填,每个组别只有2~3项,就会觉得没有那么大的压力了。
三、极致的减法
那些不需要的信息,干脆就砍掉。那些实在需要,dan(但)是频次不高的信息,则可以隐藏掉,通过某个入口可以添加。

如果你只需要用户填写基本信息,那么所有其他信息都可以隐藏在一个添加入口里,当用户需要的时候,可以找到。
四、利用选择代替输入
移动ying(应)用的输入成本非常高,尤其是触屏,输入效率和输入准确率都有很大的提升空间,在这种情况下,要尽量减少xu(需)要输入的内容,利用选择代替输入,简单来说,比如性别、比如出生日期、比如城市,都shi(是)可yi(以)通过选择的形式来提交内容的。
当然还有一些输入建议相关的场景,也是可以利用选择来代替输入的。比如当用户名已被注册的时候,系统提供几个用户名建议以供选择;比如给自己打标签的shi(时)候,系统提供常用标签以供选择,等等

输入邮箱的时候,可以给出常用邮箱的建议,但是yin(因)为常用邮箱比较多,如果给的建议太多,需要滚动的话,干扰性大,还不如不给。所以可以合理定义触发建议的时机,比如输ru(入)@后边的第一个字符后,基本上能锁定更少量的邮箱了,如“h”基本上就是hotmail了,“g”基本上就是gmail了。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: