第一站 - 轻松上网从此开始!

上网第一站

当前位置: > 运营 >

抓住用户的设计:清晰的移动应用表单(2)

时间:2012-07-20 17:38来源:网络 作者:yangyang 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
这是一种最佳的排布方式。 六、依靠明文确认密码 注册的时候,很多应用还需要两次输入密码,以预防误操作,防止输入错误的密码之后无法登录。但是

  这是一种最佳的排布方式。

  六、依靠明文确认密码

  注册的时候,很多应用还需要两次输入密码,以预防误操作,防止输入错误的密码之后无法登录。但是真的需要输入两次密码来防止这个问题吗?有没有什么别的方法来规避这个问题呢?

  其实除了输入两次密码之外,还有这样几种办法:1.最后一位明文显示 2.全部明文显示 4.默认暗文,可选明文 5.默认明文,可选暗文 6.对话框确认密码输入正确。 通过小范围的用户调研发现,默认明文可选暗文的形式接受度最高

  

 

  输入框中有个隐藏按钮,点击一下,切换暗文显示。

  七、合理的键盘利用

  1. 键盘的类型与调用

  不同的文本框类型,可以调用不同的键盘。比如网址输入框,调用网址输入键盘,可以方便快捷的输入.com;纯数字的输入框,可以调用数字键盘;电话号码输入框,可以调用电话号码键盘,除了数字之外,还有*#+;姓名等中文输入框,可以调用中文键盘;邮箱输入框可以调用邮箱键盘,方便输入@。

  

 

  

 

  但是这里有一个要注意的地方,如果把文本框定义成数字输入框,虽然是可以调用数字键盘,但是该输入框只认浮点双精度数字,就是说你输入了“0123”,会被算作是“123”这样一个自然数,如果是作为验证码输入框的,你还需要做一些前端或后端的处理,来补全这个0。所以这里不得不提一下,iPhone手机,如果你设置了密码保护,在输入4位数字密码的时候,是4个框而不是1个框,调用的是纯数字键盘,这下你知道为什么了吧?

  当然,不止是iPhone,Android也是可以定义键盘类型的。

  

 

  

 

  这里仅是粗略的调研,实际的文本框类型非常多,键盘类型也会比较多,需要具体情况具体分析。比如你的验证码如果不是纯数字的,就不能调用数字键盘了。

  2. 键盘上的功能键

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

  

 

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

  3. 键盘上的操作栏

  

 

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

  八、校验的小秘密

  1. 纵向的校验顺序

  当校验表单内容是否符合格式要求的时候,要按照表单项从上到下的顺序校验

  

 

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

  2. 即时的校验反馈

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

  

 

  美国日本的移动网速优于中国,Twitter和Evernote的手机客户端已经采用了即时校验的方式来反馈问题,在中国使用,体验还没有特别流畅,也许国内的移动表单即时校验还需要等些时候。

  其实除了清晰的视觉纵线、信息的分组、极致的减法、利用选择代替输入、标签及文字的排布方式、依靠明文确认密码、合理的键盘利用、校验的小秘密之外,还有很多很多秘籍没有写,比如清晰的步骤、用户的语音、移动端特殊的情景、合理的说明、及时的反馈、锚点置顶、主动做与次动作的位置、给与建议、给予限制、适当的帮助、标签页设计、颜色的信息传达、循序渐进的表单。

  原文链接:移动应用表单设计秘籍

  (Warlial 供雷锋网专稿,转载请注明来自雷锋网及作者,并链回本页)

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕