网站地图 | 设为首页 | 收藏本站
品牌咨询:
025-85367442
13276687223
  • 医疗logo
  • 立信基金设计
  • 百世缘珠宝首饰
  • 宝贝豆母婴用品
  • 大地华夏文化
  • 东风鲜速达
  • 东纶集团
  • 芙浪特教育
  • 富尼德财富
  • 高山会食品
  • 国泰安金融
  • 景鑫兰坪酒店
  • 立信基金
  • 鹿山新材料
  • 尚豪酒店
  • 中宏房地产
  • 水云间会所
  • 泰安颐医院
  • 椰林春天
  • 颐和府会所
  • 正华商城
  • 涟水商标
  • 中民健康管理中心
  • 紫来轩连锁饼店
  • 尚学堂科技
  • 酱胡记食品
  • 东方永传科技
  • 凯祺服饰
  • 羽之兰商贸
    专业品牌策划设计&商务印刷制作
    • 克莱斯科门窗
    • 奇林博展
    • SUV中国网
  • 侨盛核桃
  • 新维康全案设计
  • 中国法律图书联合会
  • 中国航协
  • 宜生堂花茶
  • 生态农业合作社
  • clasio移动电源
  • 素饼包装
  • 碧羽面膜
  • 面膜包装
  • 八马茶业
  • 唱片包装设计
  • 东方慧医包装
  • 儿童核桃乳
  • 路安特汽车用品
  • 飞票网
  • 极客美派
  • 政府汇报
  • 海家家具
  • 美娘达
  • 医疗汇报幻灯片
  • 恒利集团
  • 枣牧之家
  • 活力饮品包装
  • 河财管道
  • 牵手果蔬汁

为了充分利用动效,你必须了解动效在App中的定位和职责,我们一起看动效的种类吧。对于任何用户界面来讲,视觉反馈都是至关重要的。在现实生活中,人们和任何物体的交互都是伴随着回应的。优秀的设计是无形的,一个优秀的动效能你的App变得友好而且抓人眼球,但是绝不会让用户分心。今天分享7个移动App 动效的设计技巧以及9条设计原则,帮你做出美观并实用的动效!

同样地,人们期待从APP元素中得到一个类似的效果。App给的视觉,听觉及触觉反馈,使用户感到他们在操控APP。同时视觉反馈有个更简单的用途:它暗示着您的APP运行正常。当一个按钮在放大或者一个被滑动图像在朝着正确方向移动,那么很明显,这个APP在运行着呢,在回应着用户的操作。下面的例子显示,当用户点击屏幕以示完成任务时,包含有数据的方块就缩小并且变成了绿色。

Tinder中使用的左划喜欢右划跳过被大家所熟知,而这种交互方式同样也是一种视觉反馈。这个动画效果已经被我们实现出来放在开源库Koloda中了。这种动效展示出元素在与用户进行交互的时候,是如何发生变化的。南京vi设计当您想要阐明一个元素功能如何变化时,这种动效是最好的选择。它经常与按钮,图标和其它小设计元素一起使用。

跟随是一个动作的终止部分。物体不会迅速地停止或者开始移动,每个运动都可以被拆解为每个部分按照各自速率移动的细小动作。例如,当您扔个球,在球出手后,您的手也依然在移动。重叠意味着在第一个动作结束前开始的第二个动作,这样可以吸引用户的注意力,因为两个动作之间并没有一段静止期。次要动效原则类似于跟随和重叠原则。简要地讲,主要动效可被次要动效伴随。次要动效使画面更加生动,但如果一不小心就会引起用户不必要的分神。缓入/缓出是设计的基础原则,尤其是在移动开发UI动效,和普通的动画制作中同等重要。虽然易于理解,但此原则却常常容易被忽略。缓入/缓出原则是来自于现实世界中物体不可能立刻开始或者立刻停止运动的事实。任何物体都需要一定的时间用来加速或者减速。当你使用缓入/缓出原则来设计动效时,将会导出非常真实的运动模式。


预期原则适用于提示性视觉元素。在动效展现之前,我们给用户点时间让他们预测一些要发生的事情。完成预期其中一种方法就是使用我们上述的缓入原则。物体朝特定方向移动也可以给出预期视觉提示:例如,一叠卡片出现在屏幕上,你可以让这叠卡片最上面的一张卡倾斜,那么用户就可以推测出这些卡片可以移动。动效中的韵律和音乐与舞蹈中的韵律有着同样的功能;它使动效结构化。使用韵律可以使动效更加自然。

夸张的表现方法常常会被用到,但它并不是那么容易被阐释,因为它是基于被夸张化的预期动作或效果。它可以帮助吸引额外的注意力到特殊元素上。在这篇文章中,我们探讨了动效的类型,以及设计动效的原则。希望能帮助你创造出独特有效的动效。

这里有需要您记住的且非常重要的5点:

1. 记住谁是您的目标用户,并且设计您的原型方案去解决他们的问题;

2. 请确保您的动效的每个元素都具有其背后的基本原因(为什么是这样?为什么会是如此?为什么这个时间点?);

3. 为了使您的产品有特色,努力模仿自然界的运动模式来创造自然的动效;

4. 在项目的任何阶段,都要随时与开发人员保持沟通;

5. 做出好的动效,记得分享哦


大部分的移动APP都有非常复杂的结构,所以设计师的的工作就是尽可能地简化APP的导航。对于这项任务来讲,动效是极其有帮助的。如果您的动效展示出了元素被藏在哪里,那么用户下次找起来就会很容易了。第一个例子中,我们看到导航栏的菜单,当用户点击按钮时,它颠倒过来了:动效完美地描述了界面的各个部分并且阐明了它们之间是如何进行交互的。动效中每个元素都有其目的和定位。比如,一个按钮可以激活弹出菜单,那么此菜单最好从按钮弹出而不是从屏幕侧面滑出来:这样就会给用户显示按下按钮的回应,帮助用户理解这两个元素(按钮和弹出菜单)是有联系的。


动效暗示如何与元素进行交互。当一款APP的元素间有不可预估的互动模式时,动效提供视觉线索就十分必要了。在这个例子中,当用户打开一个博文系列时,带有文章的卡片就从屏幕的右侧出现,用户就可以知道要水平地滑动来浏览这些卡片,在您的APP中,总有那么几个进程在后台运行着:从服务器下载数据,进行计算等。您的任务就是让用户知道APP并没有停止运行或者崩溃掉,要让用户知道APP在工作着。通过App表现出来的视觉符号的进展给用户一种控制感。理想状态下,APP中的每个进程都应该被一个独立的动效所伴随。比如,当音频录制正在进行,屏幕可能要显示一条波动的音频轨道。实时声波动效就可以显示出声音的大小。“任何动效的主要任务都是向用户阐释APP的逻辑。”是的,任何动效其实都是为产品所服务的,他是要完成自己存在的使命的。所以请让动效的每一帧都得有它的道理,那样的动效设计才算是成功的,在动效设计中切忌为了炫而炫,为了动效而动效。

有趣的动效可以画龙点睛也可以画虎类犬。它们通常都没有什么意义,而且会让开发的工作变得异常复杂。但一个非常独特的动效就可能很吸引用户并且让您的APP脱颖而出。这是设计师让用户爱上他们产品的一个秘密武器。独特的动效可以助您创立一个识别度高的品牌。在我们的例子中,移动的圆圈看起来非常别致并且很吸引人的注意力。沿着屏幕移动的这种效果能够带来愉悦感和游戏感,简单并且有趣。我也非常确信下拉刷新的动效如果做成正在煮菜的锅,会给人耳目一新的感受:

我们已经看过了动效的主要类型和功能。为了设计出真正成功的动效,请时刻牢记Walt Disney最初提出来的动画的9条原则,这些原则可以非常有效地应用在UI设计中。给用户展示界面元素是由什么构成的:轻盈的还是笨重的?死板的还是灵活的?平面的还是多维度的?你需要让用户对界面元素的交互模式有个基本的感觉。你需要阐明运动的自然属性。一般原则显示没有生命的机械物体的运动轨迹通常都是直线,而有生命的物体拥有更为复杂和非直线性的运动轨迹。您要决定您的UI要给用户呈现的什么样的印象,并且将这种属性赋予它。

在设计动效时,时间是最有争议的和最重要的考虑之一。在现实世界中,物体并不遵守直线运动规则因为它们需要时间来加速或者减速,使用曲线运动规则会让元素的移动变得更加自然。要集中注意力于屏幕的某一特定区域。例如,闪烁的图标就会吸引用户的注意,用户会知道那有个提醒并去点击。这种动效常用于有太多细节和元素从而无法将特殊元素区别化的界面中。

推荐案例
浏览以下是按行业各推荐部分案例 (包括策划全案、vi设计、logo、标志、网站设计、包装案例、PPT设计、彩页设计、样本、宣传册、台历、画册等)
南京创艺享设计制作合作伙伴!创艺享的目标和服务宗旨:为客户创作有视觉冲击力和销售力的设计!我们服务内容包括品牌策划、广告设计、平面制作、PPT设计、标志设计、logo设计,商标设计、VI设计、品牌设计、包装设计、画册设计、宣传单设计、网站设计、商务印刷等。为企业提供:画册设计公司、PPT设计公司、标志设计公司、VI设计公司、包装设计公司,为品牌成长提供设计制作服务!企业对创艺享的选择,验证了创艺享的品牌能力,凭借对市场洞察和对消费者、企业的理解,品牌设计灵感。
创艺享,提升市场竞争力!Best,Ascending market competitiveness!
南京创艺享文化产业有限公司 2006-2015 Nanjing Chuangyixiang Cultural media Co.,LTD.
地址:南京建邺区江东中路311号中泰国际广场02栋2204室
电话:025-85367442 66035229
传真:025-85367442
品牌顾问:18061672402 13276687223
品牌咨询QQ:1341262907 917836761
E-mail:1341262907@qq.com
中国·南京 | 品牌策划&创意设计制作印刷
全国服务专线:+86-025-85367442

版权所有:南京创艺享文化产业有限公司
备案号:苏ICP备13012253号-7
服务范围