移动应用丰富动效的六点原则

标签: 手机产品 | 发表时间:2012-05-06 23:21 | 作者:elya妞
出处:http://elya.cc

如果想让你的移动应用更活泼更灵动,丰富的动效是不可少的,丰富的动效可以让你的应用更具活力,充满生机;丰富的动效可以让你的应用彰显效率,提升品质感;丰富的动效可以让你的应用充满魅力,引人探索;丰富的动效可以让你的应用减少焦虑,消除等待感;丰富的动效可以让你的应用充满韵味,有节奏感;丰富的动效可以让你的应用有出奇的信息组织,整洁高效。

这里主要介绍六种简单通用的方式——转场、邀请、过渡、反馈、缩放、吸附。

原则一:转场

zhuanchang 移动应用丰富动效的六点原则

由于手机屏幕空间有限,更多的内容会被隐藏在屏幕后边,或者屏幕的左边、右边、下边,转场动效能帮助应用营造一种空间方位感。转场动效是目前应用最多的动效种类,毕竟iPhone、Andoird、Wp7都有提供一些官方的动效的API,一些简单的动效可以直接调用官方API来完成。Android官方动效8个,iPhone官方动效19个,WP7官方动效6个,具体几个平台的动效有哪些差异,后续有机会分享。

 

原则二:邀请

IMG 1581 移动应用丰富动效的六点原则   IMG 1582 移动应用丰富动效的六点原则

直接提供邀请,告知用户可以做的事,效果最直观,引导性最好。但是要注意操作邀请一定是需要突出的主要功能或任务,不能什么功能都邀请用户试用一下,要知道,大部分用户只用到你应用里的20%就算不错了。邀请不能过于强制,如非必要,中断用户正在执行的操作是很不礼貌的行为。

 

原则三:过渡

 

20120506122711 移动应用丰富动效的六点原则   IMG 1604 移动应用丰富动效的六点原则

当应用正在加载数据的时候,一定要给予过渡,让用户知道应用正在努力工作,系统级的过渡分为两种——进度条和菊花转,进度条是用在可预知完成进度和剩余时间的情况下;菊花转是用在无法预知剩余时间的情况下。iPhone上照片转发邮件、邮件从收件箱移动到垃圾邮件都有很好的过渡动效,让用户知道当前从一个应用跳转到另外一个应用,知道从一个文件夹跳转到另外一个文件夹,避免了迷路的麻烦。

不是所有情况下,都要清晰的告知用户当然任务的加载进度的,比如iPhone自带的短信应用,发送短信的时候有一个进度条,本意是好的,让用户知道短信发送的进度。但是由于进度条会给人造成一种明显的等待感,而且用户担心离开当前界面,短信就会发送失败(用户怎么知道同步和异步?),所以只能傻等在那里。其实完全可以让短信后台发送,只要保证发送失败有办法告知用户就可以。同理,那些图片分享应用也是如此,后台上传就可以了。

 

原则四:反馈

20120506121716 移动应用丰富动效的六点原则   20120506121725 移动应用丰富动效的六点原则

当任务成功或失败之后,需要有办法告知用户。比如Reeder客户端,就会在你点了Unread后,立刻弹层告诉你已标为Unread,在你点了Statted后,立刻弹层告诉你,已经Starred。反馈需要在合适的时间引起用户的注意,简洁明了的传达操作的结果,

如果是成功类的提醒,往往只是告知状态就可以了,用户无需执行操作,反馈就可以自己消失。而如果是失败类的反馈,则需要引起关注,可以相对强势一些,反馈出现的位置可以考虑相关性,比如帐号错误可以出现在帐号旁边,密码错误可以出现在密码旁边,采用相对警示的颜色和设计风格。

 

原则五:缩放

IMG 1623 移动应用丰富动效的六点原则   IMG 1624 移动应用丰富动效的六点原则

在一寸土一寸金的手机界面上耕耘,恨不得盖个复式小洋楼,一行当两行用。其实不是不可以,只需要一个设计思想——盒子主义。每一个功能模块都是一个盒子,在你不需要用到的时候,它只是一个盒子,上面贴着标签,你知道里面装的是袜子,当你需要的时候,你就可以打开盒子,露出里面很多很多双袜子。

比如Bluga这个输入框,当你不需要输入的时候,它看起来就是一个输入的入口,但是当你点击的时候,输入的辅助信息都出来了,更大的文字撰写框、位置、图片、发送按钮,你可以打开盒子,编辑一条丰富的消息。

 

原则六:吸附

20120506224502 移动应用丰富动效的六点原则   20120506224716 移动应用丰富动效的六点原则

吸附是网格系统中一个很具有美学色彩的设计,当你拖拽着一个应用切换位置的时候,这个应用会被自动吸附到对齐网格的位置,保证界面整洁利索(不像Nokia的某些手机,Widget可以满屏幕拖拽,跟我凌乱的桌面一样);当你拖拽一个应用到另外一个应用上的时候,就可以变成一个文件夹,这里也是通过文件夹的样式和吸附的效果,让用户明白建立文件夹的交互的。

任何的动效,都需要经过场景和需求的思考, 在什么样的特殊情景下,解决了什么样的问题,不要为了动而动,WP7的动效,恐怕看久了都会腻吧。

除了界面本身的动效之外,还需要包含震动、声音、手势等等因素一起去考虑,好的动效,配合着合适的音效、合理的手势,才是最自然的交互方式。

从今天开始,努力提升你的应用的品质,让它动起来吧!

该日志未加标签。

相关 [移动应用 原则] 推荐:

移动应用丰富动效的六点原则

- - 落花流水——elya妞╰_╯
如果想让你的移动应用更活泼更灵动,丰富的动效是不可少的,丰富的动效可以让你的应用更具活力,充满生机;丰富的动效可以让你的应用彰显效率,提升品质感;丰富的动效可以让你的应用充满魅力,引人探索;丰富的动效可以让你的应用减少焦虑,消除等待感;丰富的动效可以让你的应用充满韵味,有节奏感;丰富的动效可以让你的应用有出奇的信息组织,整洁高效.

移动应用的十项设计原则

- - 雷锋网
【编者按】原文作者 Jonathan Stark 是一名移动设备顾问、培训师,本文由 @C7210编译. 文中总结了移动应用界面设计的十条原则,其中包括设计观念以及规范、使用的场景环境、导航、用户输入、操作手势、屏幕定向、启动加载等方面. 希望通过规范的思路能够帮助那些还不是非常熟悉这个领域的设计师们建立起一套有实践价值的设计思维框架.

移动应用排行榜

- - 曉生語錄
根据2011年中国ios应用下载排行榜整理出的表格,并分为四类:. 第一类.PC端的附属产品,指的是在发布移动应用在PC端已经有成熟的产品,移动应用是为了覆盖用户的零碎的使用时间,产品架构是提炼了PC端的主要功能. 第二类.同样的PC端的附属产品,但是移动应用利用了移动设备自身特性,并可能成为增加用户量的主力产品.

移动应用表单设计秘籍

- - 落花流水——elya妞╰_╯
一直想写一篇文章,关于移动应用表单设计的,可惜最近项目很忙,忙到没有时间打理博客. 最近体验产品的时候,经常看到错误的的表单设计,要么信息混乱,要么步骤繁复、要么语言程序化,要么视觉焦点跳跃,要么校验顺序混乱,要么反馈不及时,如此种种的问题,让我很想认真的总结一下,思考一下,为移动应用的表单设计,提供一些个人力所能及的建议,希望更多地设计师能认真思考移动应用表单的特殊性,能最大限度的提升表单设计的体验,提升效率,提高满意度.

移动应用注定无法长久?

- - cnBeta.COM
移动应用的历史是一个漫长而痛苦的过程,一开始是简单复制台式机的做法,然后窘迫地认识到,这种方式不太可行. 其实,这是一切事物进步的方式,不仅在技术领域,艺术和音乐也遵循类似的模式,复制、延伸,最后发现一个新的模式. 要摆脱旧的范式,需要耗费一段时间. 移动应用显然是成功的,并且在某些情况下,其盈利非常可观.

移动应用推广八法

- - CocoaChina移动观察
文/ John Koetsier. 如果一棵树在森林中轰然倒下,是否会有人听到. 如果你的应用出现在一个拥挤不堪的市场中,是否会有人注意到它呢. 虽然我所开发的应用目前都有数十万的下载量,但遗憾的是,上述问题的默认答案是“不会”. 事实上,最近的一项调查表明,有60%的应用以零收益而告终. 如果你不想让自己的应用沦落在这60%之中,那么不要指望什么运气,一定要采取实际的行动去争取.

移动应用广告的未来

- - 月光博客
  移动应用内置广告已经成为移动广告市场主流,但是现在相对滞后的广告模式(广告条、广告墙等)却制约了移动应用广告市场的发展,那么我们应该采用哪些更新颖的应用广告模式呢.   2007 年苹果发布 iPhone 和 App Store 掀起移动互联网的第一波浪潮,近两年随着移动应用开发门槛也逐渐降低和移动互联网发展再加速,人们获得信息的方式发生改变,移动应用逐渐成为移动设备第一载体.

HTML5 杀不死移动应用

- clowwindy - 月光博客
  苹果在其对抗 FLASH 的过程中,是否让自己也限了进去. 通过明文禁止 Flash 应用到 iPad 和 iPhone 上,苹果迫使 Web 开发人员不得不放弃采用 Flash 技术. 可以说,苹果和乔布斯为 Adobe 公司的放弃移动 Flash 业务的最终决定“提供了很有价值的参考意见”.

jQuery Mobile开发HTML5移动应用

- - HTML5研究小组
随着移动互联世界的到来,目前已发展到多种移动 操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的 手机操作平台上,比如Android,iOS,黑莓等. 而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过 手机的浏览器即可浏览.

移动应用开发小贴士

- - ITeye资讯频道
严格说来本文是针对iOS应用进行介绍的——在未来一段时间内iOS应用开发无疑仍会是热门,因此,不管是对开发者还是企业管理人员来说,或多或少了解一些应用开发流程十分必要——不过本文涉及的大部分内容其实并不局限于iOS应用,同时也适用Android、Windows Mobile和Blackberry等其他移动平台.