移动应用表单设计秘籍

一直想写一篇文章，关于移动应用表单设计的，可惜最近项目很忙，忙到没有时间打理博客。最近体验产品的时候，经常看到错误的的表单设计，要么信息混乱，要么步骤繁复、要么语言程序化，要么视觉焦点跳跃，要么校验顺序混乱，要么反馈不及时，如此种种的问题，让我很想认真的总结一下，思考一下，为移动应用的表单设计，提供一些个人力所能及的建议，希望更多地设计师能认真思考移动应用表单的特殊性，能最大限度的提升表单设计的体验，提升效率，提高满意度。

本文将从清晰的视觉纵线、信息的分组、极致的减法、利用选择代替输入、标签及文字的排布方式、依靠明文确认密码、合理的键盘利用、校验的小秘密这八个维度来分享我的移动应用表单设计秘籍。

一、清晰的视觉纵线

用户在浏览信息的时候，如果没有足够多的强调元素，会从上至下，从左至右的浏览，Web端是一个“F”型视线，移动端更经常是“L”型视线（导航和重要操作往往在下边），那么如果你的表单的视觉浏览顺序，符合这个“L”型规律，基本上就符合用户的心理预期，不需要任何的寻找，任何的思考，就可以简单高效的执行完表单项的填写和提交。

这是一个登录表单视觉纵线的例子，用户先关注到用户名输入框，再关注到密码输入框，然后就自然而然的发现了登录按钮。

反面的例子很多，比如下面两个：

第一个反例比较常见，用户输入完用户名和密码之后，直接看到的操作按钮是注册，而不是登录，这种左右的布局方式，即便你用颜色区隔，也阻挡不了用户的视线落到注册上，于是简单的眼动测试就可以发现，这时用户盯着注册停顿思考一下是在所难免的。

第二个反例则会更加突出一些，因为表单标签与表单的相关性不是很好，用户需要先阅读表单标签的内容，再阅读输入框引导文字的内容，视线一直都是左——》右——》左——》右，这样已经不够友好了，最后提交的时候，又需要整个视线平移到右上角去寻找登录按钮，当然，我并不是在challenge iPhone的设计，如果全局都拥有这样的操作栏，右上角提交表单项还好，但这也仅适用于键盘会遮挡提交按钮的情况。

二、信息的分组

表单项并不是从上边罗列到下边就可以了，而是要经过信息组织的，同一类的表单可以放在一起，当表单太长的时候，可以拆分成不同的组，这样用户在填写的时候，类似于一种任务拆解，可以一组一组的完成填写。

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

填写信息的时候，如果所有想都列出来自然会有较大信息负担，但是如果按组别来填，每个组别只有2~3项，就会觉得没有那么大的压力了。

标签： 表单设计 移动应用 产品设计 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。