浅谈APP的动态效果设计
现在的APP除了在功能上的丰富和完善之外,让用户更加体验舒服的还体现在APP与用户的交互过程,在这个过程中,APP随着智能手机的硬件和操作系统支持,可以有越来越多的动态效果,这些动态效果可以让体验过程更加生动形象。APP的动态效果有很多种,每种效果都需要根据应用的场景来设计,主要包括以下几个方面。
首先,使用转场动态效果。转场效果在现在的智能手机上都经常可以体验到,不管是苹果手机还是安卓手机官方都有提供了一些转场效果。转场动态效果被设计出来的目的是因为手机屏幕的空间有限,有很多信息会被隐藏在屏幕的后面或者边角。采用动态转场效果可以给用户营造一种立刻和空间感,例如我们使用手机的时候,经常可以设置一些桌面的切换效果,包括正向反转、反向反转、淡入渐出、立方体效果、幕布效果等等。
其次,使用过渡动态效果。过渡动态效果大家可能都会比较熟悉,当我们APP在进行数据加载的时候,往往都会用到,而且一定要有个过渡效果,否则加载过程会显得无法预期加载结束时间,让用户感觉烦躁。举个例子,在iPhone手机上进行电子邮件的操作时,把邮件从收件箱转移到垃圾箱也会有很好的过渡新动态效果,其目的是想让用户更加清楚操作的路线,而不会容易迷失。但也要主要,并不是所有的情况都需要使用过渡小的,有些场景下使用过渡效果就不太友好。还是以iPhone为例,我们使用苹果手机发短信的时候,发送按钮点击后,就会有个进度条,然后一般都会比较慢,其实这一点做得就不如安卓手机会,安卓手机一般发送短信后就会立刻关闭信息窗口,让用户感觉是闪电发送,而不会担心要是我离开了信息窗口短信可能会发送失败。
再次,在给用户的反馈中使用动态提示效果。如下图,是用户操作后界面上给出的动态提示,这也是一种很好的动态效果。我们使用APP的时候,每完成一些重要的操作,往往都需要得到一定的信息反馈,否则会漫长地等待。传统的用户反馈提示一般是弹出确认窗口之类的,弹出来的时候十分粗暴,没有一点过渡,更不用说动态效果了,就行网页的那种JSConfirm弹出。在给用户反馈钟使用动态提示效果,可以让用户更加舒服地体验与APP的互动过程,同时在使用动态提示效果的时候,要注意提示的时间性,需要根据应用场景,在某些场景下不能弹出的这种提示效果一直留存在APP界面上,而应该在适当的时间范围内自己消失,否则也会延长用户的等待时间。
此外,在APP中使用缩放效果。尽管现在的手机屏幕越做越大,但是界面上的空间还是比较有限的,很多APP设计人员往往巴不得在手机界面的每个地方都开垦一块空地,然后不断耕耘,让这个屏幕没有一丝浪费的地方。但是其实,手机屏幕限制是客观事实,如果需要体现更多的信息,也不是要往上面不断塞东西,比如可以采用缩放来实现。这里的缩放,不是侧重我们看很大视频和照片的那种缩放,而是更加侧重在APP界面上功能和信息的缩放。如下图,就是个典型的缩放的例子,我们手机上经常都会使用键盘打字功能,但是键盘往往并不是时刻都需要的,特如果键盘直接显示在屏幕上,位置至少占了1/3以上了,这个时候我们就可以很好的利用缩放的动态效果,当用户点击输入的时候,输入法的辅助信息才动态地弹出来,会给人一直随叫随到的动态感,那么这个时候就可以专心地在文本框中进行文字的编写和创作了。这种缩放的动态效果,在APP中可以经常被利用,例如,可以在那些社交软件上采用,可以把聊天窗口在桌面上设置一个悬浮窗缩放起来,等用户需要的时候去点击,然后再动态地加载出效果。
最后,在APP中使用吸附效果。所谓的吸附其实我们在手机上经常可以看到这种效果,如下图,这是网格界面中的一个常用设计,当我们在手机桌面拖拽着一个应用图标进行位置切换的时候,就会发现这个图标会被吸附到网格对齐的位置,从而保持桌面的对齐很规范性,还有,当你拖拽一个应用图标到另外一个应用程序的图标上时,手机会根据应用的类别将其合并成一个文件夹(苹果手机还会自动给合并后的文件夹按应用类型命名,安卓的合并后的文件夹可以自己命名)。APP利用吸附除了可以增加动态效果之外,还可以让应用程序的功能更加简洁,排序和层次更加清晰。
无论如何,APP中的任何一种动态效果,都是需要根据使用场景和用户的习惯来设计。APP设计者们不应该只是为了追求酷炫和个性而设计动态效果,而应该看这个动态效果适合在哪些应用场景下,能够解决用户什么样的问题,否则像Windows7操作系统,天天在电脑前用着,时间久了也会觉得腻。同时,除了APP界面的动态效果除了界面上的体现之外,还需要加入一些声音、震动、重力感应、手势等因素,将静与动结合,才是给用户最自然的交互方式,从而提升APP的品质。
本文由昆山装修http://www.ksqysp.com原创,如有转载,请注明出处,谢谢!
专注SEO十年,以诚信经营为本,为企业、为客户创造价值为根。以技术实力为公司生命线。
诚接网站关键词优化、整站排名优化、负面处理等业务 微信:BaisoTec 电话:海阔天空