移动应用之表单设计

      偶然的翻到一篇博客,出自百度UED部门的一位移动端交互设计师,博客主题即是“移动应用表单设计秘籍”,想想自己所体验过的一些移动应用,经常能够碰到错误的表单设计、信息排版混乱、视觉焦点跳跃严重、各种应有的反馈不及时….等等,各种坑人,就文中的几个点,说说自己的一些想法,她分了八个维度来阐述其秘籍,清晰的视觉纵线、信息的分组、极致的减法、利用选择代替输入、标签及文字的排布方式、依靠明文确认密码、合理的键盘利用、校验的小秘密:

    一、清晰的视觉纵线

    作为用户看东西的时候,最舒服的看法,应该是按照当时场景下物体的排列顺序,从上至下、从左到右….,web端,有一个不知道怎么来的F型理论,就说用户在看PC端网页时,视觉热力图构成了一个F状的图(如下图),到了移动端,又会是什么理论呢?据博客中所提到的“L”型视线(导航和操作往往在下边),一下子感觉自己成了井底之蛙了,闻所未闻啊,L型视线,其实说白了,到了移动端,屏幕更小了,设计的东西,更多的是考虑用户视线从上到下,这么一个比较舒服的习惯。

image    image

还有一些例子,不能它们的设计有多不好,各家考虑的东西偏重点不同,新浪微博,说实话,作为老用户,打开这个界面的频率,除非是你换手机、或者刷机了,重新安装了微博之后,由此可以想象其注册按钮放的位置反而更加的优于登录按钮,更加符合从上至下,也更加的符合新用户的胃口吧。

image

       二、信息的分组

       表单项里边,信息种类繁多,如果一项一项的按顺序罗列在那里,难以避免给人一种杂乱的感觉,此时,自然而然的让人联想到按信息的类别,对表单项进行分组,例如个人注册时,通常可分为基本信息、教育信息、公司信息….将信息这样按照组别(每组2-3项)分开后,填写起来就不会感觉到那么大压力了。

image

       三、极致的减法

        看到这个标题后,深感这个话题可大了,一直根植于我意识中的“简约”理念,可以说几乎影响了我所有的原型设计作品,“化繁为简”、“少即是多”,好比是我一直在修炼的内功心法。iphone、ipad的成功可谓是简约到极致的代表作,乔布斯对简约的疯狂苛求,造就了iphone、ipad,也掀起了移动互联网的热潮,简约的理念在现如今的各种成功的APP当中更是体现得淋漓尽致。该有的文字、标签、按钮、提示….等,可有可无的东西,别多想,直接干掉吧,干扰用户的东西,更加如此了。附上之前的作品,敬请拍砖:

1、Register for 顾客         10、 设置头像

       四、利用选择代替输入

        想必大家都有这样的感受,移动应用的输入成本是很高的,尤其是触摸屏,毕竟大多数用户习惯了之前的按钮式键盘,因此在这一块的输入效率和准确率还是有较大的提升空间,因此了,要尽量减少用户输入的内容,利用选择代替输入,常见的,例如:性别、城市、日期、一些标签之类的…等。

5、 注册信息 for 造型师

      五、标签及提示文字的排布方式      

       移动应用界面空间有限寸土寸金,一些表单项往往需要通过标签告知表单类型,通过提示文字告知表单格式,那么到底该如何来展现这些标签及提示文字呢?

下面是几个比较:

image    image    image

 

image

有了对比,效果非常明显,孰优孰劣?

        六、依靠明文显示密码

        说到这密码,估计大多数人会联想到,注册时,为了确认密码,老是要人输入两次密码,防止密码错误之后的登录失败,但是真的需要输入两次密码来防止这个问题吗?

        其实除了输入两次密码之外,还有几种办法:1、最后一位明文显示;2、全部明文显示;3、默认暗文,可选明文;4、默认明文,可选暗文(如下图);

image

  通过小部分的用户研究之后,发现“默认明文,可选暗文”这种形式,用户接受程度最高。

       七、合理的键盘利用

        1、键盘的类型与调用

        不同的文本框类型,可以调用不同的键盘类型。例如,网址输入框,调用网址输入键盘,可方便快捷的输入.com;纯数字的输入框,可以调用数字键盘;电话号码输入框,可以调用电话号码键盘;邮箱输入框,可调用邮箱键盘,方便输入@。

image    image

android键盘:

image    image

       2、键盘上的功能键     

        键盘上右下角的功能键是可以被自定义的,这个功能键在填写表单时,跟PC上的tab键有点像,起着向下切换表单项的作用,当处于最后一个表单项的时候,这个功能键就变成相应的操作。

image    

比如在登录表单中,光标处于用户名框,右下角是下一项;焦点处于表单最后一项,但是有必填项未填写时,该按钮是置灰不可点的;当所有必填项填写完整,且焦点处于表单的最后一项,操作按钮可点击,注意此时操作按钮一定是蓝色的。

      3、键盘上的操作栏

      当表单项多于3项的时候,基本上可以考虑增加键盘上的操作栏了,这个操作栏可以帮助用户切换上一项、下一项和收起键盘。当焦点处于第一个表单项的时候,上一项置灰不可点。

image

      八、校验的小秘密

       1、纵向的校验顺序

       按照表单项从上到下的顺序校验

image

     比如这个表单,就该按照1用户名——>2密码——>3手机号——>4邮箱——>5性别的顺序依次校验,用户名格式不对、用户名重名、用户名在黑名单里之类的问题,   都会优先提醒,如果用户名没有问题,才会去校验密码,密码没有问题再去校验手机号……这样能保证错误提醒是可找到的,有规律可循的。

    2、即时的校验反馈

    一种理想化的情况,就是当我输入完一个表单项的时候,系统可以立刻告诉我,这一项填写是否正确,而不是填完所有表单,提交之后,才告我我哪里需要修正。在Web端,即时校验反馈已经非常常见,但是在移动端,即时检验尚需时日。主要原因是即时校验受限于网速,当网络环境不好的时候,校验也许需要很久,会影响正在进行的下一项表单的填写。

image

posted @ 2012-11-16 12:14  Foxriver  阅读(3377)  评论(0编辑  收藏  举报