黑松山资源网 Design By www.paidiu.com

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

反面的例子很多,比如下面两个:

第二个反例则会更加突出一些,因为表单标签与表单的相关性不是很好,用户需要先阅读表单标签的内容,再阅读输入框引导文字的内容,视线一直都是左—— >右——>左——>右,这样已经不够友好了,最后提交的时候,又需要整个视线平移到右上角去寻找登录按钮,当然,我并不是在 challenge iPhone的设计,如果全局都拥有这样的操作栏,右上角提交表单项还好,但这也仅适用于键盘会遮挡提交按钮的情况。
二、信息的分组
表单项并不是从上边罗列到下边就可以了,而是要经过信息组织的,同一类的表单可以放在一起,当表单太长的时候,可以拆分成不同的组,这样用户在填写的时候,类似于一种任务拆解,可以一组一组的完成填写。


三、极致的减法
那些不需要的信息,干脆就砍掉。那些实在需要,但是频次不高的信息,则可以隐藏掉,通过某个入口可以添加。

四、利用选择代替输入
移动应用的输入成本非常高,尤其是触屏,输入效率和输入准确率都有很大的提升空间,在这种情况下,要尽量减少需要输入的内容,利用选择代替输入,简单来说,比如性别、比如出生日期、比如城市,都是可以通过选择的形式来提交内容的。
当然还有一些输入建议相关的场景,也是可以利用选择来代替输入的。比如当用户名已被注册的时候,系统提供几个用户名建议以供选择;比如给自己打标签的时候,系统提供常用标签以供选择,等等

五、标签及提示文字的排布方式
移动应用界面空间有限寸土寸金,但是表单项往往需要通过标签告知表单类型,通过提示文字告知表单格式,那么标签及提示文字怎样排布才可以使信息呈现最友好呢?

缺点:在寸土寸金的手机屏幕上,这种排布方式过于占用宝贵的垂直空间,键盘升起一遮挡,基本上什么都卡不见了。

缺点:占用宝贵的垂直空间。

缺点:缺点仍然是横向视觉不稳。

这是一种最佳的排布方式。
六、依靠明文确认密码
注册的时候,很多应用还需要两次输入密码,以预防误操作,防止输入错误的密码之后无法登录。但是真的需要输入两次密码来防止这个问题吗?有没有什么别的方法来规避这个问题呢?
其实除了输入两次密码之外,还有这样几种办法:1.最后一位明文显示 2.全部明文显示 4.默认暗文,可选明文 5.默认明文,可选暗文 6.对话框确认密码输入正确。 通过小范围的用户调研发现,默认明文可选暗文的形式接受度最高

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


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


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

3. 键盘上的操作栏

八、校验的小秘密
1. 纵向的校验顺序
当校验表单内容是否符合格式要求的时候,要按照表单项从上到下的顺序校验

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

其实除了清晰的视觉纵线、信息的分组、极致的减法、利用选择代替输入、标签及文字的排布方式、依靠明文确认密码、合理的键盘利用、校验的小秘密之外,还有很多很多秘籍没有写,比如清晰的步骤、用户的语音、移动端特殊的情景、合理的说明、及时的反馈、锚点置顶、主动做与次动作的位置、给与建议、给予限制、适当的帮助、标签页设计、颜色的信息传达、循序渐进的表单。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2025年02月24日
2025年02月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]