为了更多设计师能认真思考移动应用表单的特殊性,最大限度的提升表单设计的体验,提升效率,提高满意度。本文将从清晰的视觉纵线、信息的分组、极致的减法、利用选择代替输入、标签及文字的排布方式、依靠明文确认密码、合理的键盘利用、校验的小秘密这八个维度来分享我的移动应用表单设计秘籍。
in order to more stylist can seriously thinking of the particularity of the mobile applications form, the maximum design experience ascension form, promote efficiency, improve the satisfaction. this paper from the clear visual zongxian, information of the group, the subtraction, using the selected acme instead of input, labels and text arrangements way, rely on expressly passwords, reasonable use of the keyboard, calibration little secret of this eight dimensions to share my mobile application form design kept secret.
一、清晰的视觉纵线(clear visual zongxian)
用户在浏览信息的时候,如果没有足够多的强调元素,会从上至下,从左至右的浏览,web端是一个“f”型视线,移动端更经常是“l”型视线(导航和重要操作往往在下边),那么如果你的表单的视觉浏览顺序,符合这个“l”型规律,基本上就符合用户的心理预期,不需要任何的寻找,任何的思考,就可以简单高效的执行完表单项的填写和提交。
users browse through the information, if there are not enough emphasis on elements, will from go up to below, from left to right to browse the web side is an "f" type line of sight, the move more often is "l" type view (navigation and important operation often below), so if your form of visual browsing order, in line with the "l" model of the law, basically accord with the user expected, do not need any search, any thinking, is a simple and efficient execution of the form of the fill in and submit.
这是一个登录表单视觉纵线的例子,用户先关注到用户名输入框,再关注到密码输入框,然后就自然而然的发现了登录按钮。
第一个反例比较常见,用户输入完用户名和密码之后,直接看到的操作按钮是注册,而不是登录,这种左右的布局方式,即便你用颜色区隔,也阻挡不了用户的视线落到注册上,于是简单的眼动测试就可以发现,这时用户盯着注册停顿思考一下是在所难免的。
the first example is more familiar, the user input the user name and password after, see the operation directly button is registered, not logged in, about the layout of the way, even if you with color segregation, can stand in the line of sight of users to register, so simple eye movement tests can be found, then the user staring at registered pause to think about is inevitable.
第二个反例则会更加突出一些,因为表单标签与表单的相关性不是很好,用户需要先阅读表单标签的内容,再阅读输入框引导文字的内容,视线一直都是左——>右——>左——>右,这样已经不够友好了,最后提交的时候,又需要整个视线平移到右上角去寻找登录按钮,当然,我并不是在challenge iphone的设计,如果全局都拥有这样的操作栏,右上角提交表单项还好,但这也仅适用于键盘会遮挡提交按钮的情况。
the second example, will become more prominent some, because the form with the correlation of label form is not very good, the user needs to read the content of the form labels, to read the content of the text input box guide, the sight has been left-> > >---right left right, this is not enough friendly, finally submitted, also needs the whole line of sight translated to top right to find login button, of course, i'm not challenge the iphone design, if global have such operation bar, a top right corner form submission is good, but it also applies only to the keyboard will keep out the submit button.
二、信息的分组(information the grouping of)
表单项并不是从上边罗列到下边就可以了,而是要经过信息组织的,同一类的表单可以放在一起,当表单太长的时候,可以拆分成不同的组,这样用户在填写的时候,类似于一种任务拆解,可以一组一组的完成填写。
the form is not listed above a from below to, but to pass information organization, the same kind of form can put together, when a form is too long, can tear open into different groups, so that users should fill in, similar to a task, taken apart can a group of groups of complete.
登录和注册是两个完全不同的去向,所以在布局上做一个显著的分组,如果用户想要登录的话,专心填写就可以了,如果用户想要注册的话,需要点击注册按钮,去到一个新界面去完成操作。
login and registered are two completely different to, so in the layout in a significant group do, if you want to log in to it, to fill in, if the user wants to register it, need to click the register button, when you go to a new interface to complete the operation.
填写信息的时候,如果所有想都列出来自然会有较大信息负担,但是如果按组别来填,每个组别只有2~3项,就会觉得没有那么大的压力了。
fill in information, if all want to list all natural to have larger information burden, but if, by category to fill in, each group only 2 ~ 3 items, will feel to do not have so much pressure.
三、极致的减法(acme of subtraction)
那些不需要的信息,干脆就砍掉。那些实在需要,但是频次不高的信息,则可以隐藏掉,通过某个入口可以添加