移动应用表单设计秘籍
一直想写一篇文章，关于移动应用表单设计的，惋惜最近项目很忙，忙到没有时间打理博客。最近体验产品的时候，常常看到错误的的表单设计，要么信息混乱，要么步骤繁复、要么语言程序化，要么视觉焦点跳跃，要么校验顺序混乱，要么反馈不及时，如此种种的问题，让我很想认真的总结一下，思考一下，为移动应用的表单设计，提供一些我的力所能及的建议，但愿更多地设计师能认真思考移动应用表单的特殊性，能最大限度的提高表单设计的体验，提高效率，提升满意度。前端
本文将从清晰的视觉纵线、信息的分组、极致的减法、利用选择代替输入、标签及文字的排布方式、依靠明文确认密码、合理的键盘利用、校验的小秘密这八个维度来分享个人移动应用表单设计秘籍。后端
1、清晰的视觉纵线
用户在浏览信息的时候，若是没有足够多的强调元素，会从上至下，从左至右的浏览，Web端是一个“F”型视线，移动端更常常是“L”型视线（导航和重要操做每每在下边），那么若是你的表单的视觉浏览顺序，符合这个“L”型规律，基本上就符合用户的心理预期，不须要任何的寻找，任何的思考，就能够简单高效的执行完表单项的填写和提交。网络
这是一个登陆表单视觉纵线的例子，用户先关注到用户名输入框，再关注到密码输入框，而后就天然而然的发现了登陆按钮。布局
反面的例子不少，好比下面两个：测试
第一个反例比较常见，用户输入完用户名和密码以后，直接看到的操做按钮是注册，而不是登陆，这种左右的布局方式，即使你用颜色区隔，也阻挡不了用户的视线落到注册上，因而简单的眼动测试就能够发现，这时用户盯着注册停顿思考一下是在所不免的。spa
第二个反例则会更加突出一些，由于表单标签与表单的相关性不是很好，用户须要先阅读表单标签的内容，再阅读输入框引导文字的内容，视线一直都是左——>右——>左——>右，这样已经不够友好了，最后提交的时候，又须要整个视线平移到右上角去寻找登陆按钮，固然，我并非在challenge iPhone的设计，若是全局都拥有这样的操做栏，右上角提交表单项还好，但这也仅适用于键盘会遮挡提交按钮的状况。设计
2、信息的分组
表单项并非从上边罗列到下边就能够了，而是要通过信息组织的，同一类的表单能够放在一块儿，当表单太长的时候，能够拆分红不一样的组，这样用户在填写的时候，相似于一种任务拆解，能够一组一组的完成填写。get
登陆和注册是两个彻底不一样的去向，因此在布局上作一个显著的分组，若是用户想要登陆的话，专心填写就能够了，若是用户想要注册的话，须要点击注册按钮，去到一个新界面去完成操做。博客
填写信息的时候，若是全部想都列出来天然会有较大信息负担，可是若是按组别来填，每一个组别只有2~3项，就会以为没有那么大的压力了。产品
3、极致的减法
那些不须要的信息，干脆就砍掉。那些实在须要，可是频次不高的信息，则能够隐藏掉，经过某个入口能够添加。
若是你只须要用户填写基本信息，那么全部其余信息均可以隐藏在一个添加入口里，当用户须要的时候，能够找到。
4、利用选择代替输入
移动应用的输入成本很是高，尤为是触屏，输入效率和输入准确率都有很大的提高空间，在这种状况下，要尽可能减小须要输入的内容，利用选择代替输入，简单来讲，好比性别、好比出生日期、好比城市，都是能够经过选择的形式来提交内容的。
固然还有一些输入建议相关的场景，也是能够利用选择来代替输入的。好比当用户名已被注册的时候，系统提供几个用户名建议以供选择；好比给本身打标签的时候，系统提供经常使用标签以供选择，等等
输入邮箱的时候，能够给出经常使用邮箱的建议，可是由于经常使用邮箱比较多，若是给的建议太多，须要滚动的话，干扰性大，还不如不给。因此能够合理定义触发建议的时机，好比输入@后边的第一个字符后，基本上能锁定更少许的邮箱了，如“h”基本上就是hotmail了，“g”基本上就是gmail了。
5、标签及提示文字的排布方式
移动应用界面空间有限寸土寸金，可是表单项每每须要经过标签告知表单类型，经过提示文字告知表单格式，那么标签及提示文字怎样排布才可使信息呈现最友好呢？
优势：视线一直是纵向向下的，当输入的时候，不遮挡说明文字。
缺点：在寸土寸金的手机屏幕上，这种排布方式过于占用宝贵的垂直空间，键盘升起一遮挡，基本上什么都卡不见了。
优势：能够快速处理每个表单项的输入，符合视觉纵线。
缺点：占用宝贵的垂直空间。
优势：基本上解决了前面说的占用纵线空间的问题
缺点：缺点仍然是横向视觉不稳。
优势：即解决了视觉纵线的问题，又解决了节约屏幕纵向空间的问题，且元素较为稳定。
这是一种最佳的排布方式。
6、依靠明文确认密码
注册的时候，不少应用还须要两次输入密码，以预防误操做，防止输入错误的密码以后没法登陆。可是真的须要输入两次密码来防止这个问题吗？有没有什么别的方法来规避这个问题呢？
其实除了输入两次密码以外，还有这样几种办法：1.最后一位明文显示 2.所有明文显示 4.默认暗文，可选明文 5.默认明文，可选暗文 6.对话框确认密码输入正确。 经过小范围的用户调研发现，默认明文可选暗文的形式接受度最高
输入框中有个隐藏按钮，点击一下，切换暗文显示。
7、合理的键盘利用
1. 键盘的类型与调用
不一样的文本框类型，能够调用不一样的键盘。好比网址输入框，调用网址输入键盘，能够方便快捷的输入.com；纯数字的输入框，能够调用数字键盘；电话号码输入框，能够调用电话号码键盘，除了数字以外，还有*#+；姓名等中文输入框，能够调用中文键盘；邮箱输入框能够调用邮箱键盘，方便输入@。
可是这里有一个要注意的地方，若是把文本框定义成数字输入框，虽然是能够调用数字键盘，可是该输入框只认浮点双精度数字，就是说你输入了“0123”，会被算做是“123”这样一个天然数，若是是做为验证码输入框的，你还须要作一些前端或后端的处理，来补全这个0。因此这里不得不提一下，iPhone手机，若是你设置了密码保护，在输入4位数字密码的时候，是4个框而不是1个框，调用的是纯数字键盘，这下你知道为何了吧？
固然，不止是iPhone，Android也是能够定义键盘类型的。
这里仅是粗略的调研，实际的文本框类型很是多，键盘类型也会比较多，须要具体状况具体分析。好比你的验证码若是不是纯数字的，就不能调用数字键盘了。
2. 键盘上的功能键
键盘上右下角的功能键是能够被定义的，这个功能键在填写表单的时候，跟PC上的tab键有点像，应该起着向下切换表单项的做用，当处于最后一个表单项的时候，这个功能键就要变成对应的操做。
好比在登陆表单中，光标处于用户名框，右下角是下一项；焦点处于表单最后一项，可是有必填项未填写时，该按钮是置灰不可点的；当全部必填项填写完整，且焦点处于表单的最后一项，操做按钮可点击，注意此时操做按钮必定是蓝色的。
3. 键盘上的操做栏
当表单项多于3项的时候，基本上就能够考虑增长键盘上的操做栏了，这个操做栏能够帮助用户切换上一项、下一项和收起键盘。当焦点处于第一个表单项的时候，上一项置灰不可点。
8、校验的小秘密
1. 纵向的校验顺序
当校验表单内容是否符合格式要求的时候，要按照表单项从上到下的顺序校验
好比这个表单，就该按照1用户名——>2密码——>3手机号——>4邮箱——>5性别的顺序依次校验，用户名格式不对、用户名重名、用户名在黑名单里之类的问题，都会优先提醒，若是用户名没有问题，才会去校验密码，密码没有问题再去校验手机号……这样能保证错误提醒是可找到的，有规律可循的。
2. 即时的校验反馈
一种理想化的状况，就是当我输入完一个表单项的时候，系统能够马上告诉我，这一项填写是否正确，而不是填完全部表单，提交以后，才告我我哪里须要修正。在Web端，即时校验反馈已经很是常见，可是在移动端，即时检验尚需时日。主要缘由是即时校验受限于网速，当网络环境很差的时候，校验也许须要好久，会影响正在进行的下一项表单的填写。
美国日本的移动网速优于中国，Twitter和Evernote的手机客户端已经采用了即时校验的方式来反馈问题，在中国使用，体验尚未特别流畅，也许国内的移动表单即时校验还须要等些时候。
其实除了清晰的视觉纵线、信息的分组、极致的减法、利用选择代替输入、标签及文字的排布方式、依靠明文确认密码、合理的键盘利用、校验的小秘密以外，还有不少不少秘籍没有写，好比清晰的步骤、用户的语音、移动端特殊的情景、合理的说明、及时的反馈、锚点置顶、主动作与次动做的位置、给与建议、给予限制、适当的帮助、标签页设计、颜色的信息传达、按部就班的表单，之后有机会再作分享。