IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

浅谈动效设计,帮你掌握视觉都需要的动效知识

Catherine • 2017-05-10 04:54 • 交互设计

精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知,通过视觉化的方式向用户呈现操作结果。

文章目录[隐藏]

  • 一、什么是动效及作用?
  • 二、动效是不是越多越酷炫越好那?
    • 1. 开机启动图
    • 2. poplayer动画
    • 3. 界面之间切换跳转
    • 4. 扩展空间场景
    • 5. 强调状态
    • 6. 聚合入口
    • 7. 突出元素,增加情趣 (播放器播放暂停案件)
  • 三、我们在项目中是怎么推进动效落地的?
  • 五、动效的工具
    • 1. 交互性动效
    • 2. 复合型动效
    • 3. 创意性动效工具

精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知,通过视觉化的方式向用户呈现操作结果。

浅谈动效设计,帮你掌握视觉都需要的动效知识

一、什么是动效及作用?

动效是物体空间关系与功能有意识的流动之美,它让用户更了解交互。

在IOS7官方guideline中,给动效赋予了一个新的定义:精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知,通过视觉化的方式向用户呈现操作结果。

为什么现在的产品越来越注重动效了那?我们先从人对于产品元素的感知。

顺序来看?不难看出人们对动态的信息感知是最强的。

浅谈动效设计,帮你掌握视觉都需要的动效知识

那么动效能给给产品设计带来什么好处那?

  1. 让体验更连贯:帮助用户理解界面之间的关系,缩短用户和界面之间的鸿沟。消除屏幕伤的跳变。告诉用户元素从哪来到哪去。
  2. 消化引导流程,降低学习成本:在最恰当的时机给用户有意义的引导。减轻认知负担,让体验更愉快。
  3. 空间扩展:让当下用户不需要的信息隐藏,适当的时机出现。
  4. 赋予设计趣味和活力:让错误不那么沮丧,让等待不那么无聊,让你的产品看起来更具活力。

二、动效是不是越多越酷炫越好那?

在平时项目中,我们有些设计师经常为了追求酷炫,生硬的在产品中展现。一个好的动效应该是自然,舒适,锦上添花绝对不是为了仅仅去吸引眼球,生拉硬套。所以要把握好动效的轻与重,先考虑用户使用的场景、频繁程度来确定动效的注目程度,其次重视整体性的编排。

下面我们来看一下经常在APP里面使用动效的场景:

1. 开机启动图

强化产品品牌,动画短小。仅为简单变形,旨在突出产品logo。因为开启启动图时间非常短,复杂的动画延迟了界面的过渡。

浅谈动效设计,帮你掌握视觉都需要的动效知识

2. poplayer动画

强调惊喜,有创意的,有互动性的动(手淘的双十一活动)

浅谈动效设计,帮你掌握视觉都需要的动效知识

3. 界面之间切换跳转

帮助用户理解界面刚发生的变化,让用户知道自己在哪。例如页面之间的转场,弹出等。

浅谈动效设计,帮你掌握视觉都需要的动效知识

4. 扩展空间场景

强调关联性的场景,展开,放大缩小,翻转等。

浅谈动效设计,帮你掌握视觉都需要的动效知识

5. 强调状态

抓住用户注意力,也可以说是分散用户注意力,例如加载时,出错时等。

浅谈动效设计,帮你掌握视觉都需要的动效知识

6. 聚合入口

浅谈动效设计,帮你掌握视觉都需要的动效知识

7. 突出元素,增加情趣 (播放器播放暂停案件)

浅谈动效设计,帮你掌握视觉都需要的动效知识

三、我们在项目中是怎么推进动效落地的?

我什么我们觉得超酷超美的UI动效,似乎很少在真实的App上看到它们被实现。技术门槛降低了这些UI 动效的可行性也许是最大的一个原因;除此之外,设计师们在提出这些UI动效时,往往都缺乏使用情境。切记为了漂亮而漂亮。

常用的一些小技巧:

  1. 罗列全局动效改进点列表
  2. 提出概念方案,向团队推介
  3. 不同情况下的原型复杂程度取舍,简单可以直接拿样品和技术沟通,标志性动效细腻还原。有些动效可能比较简单,如果我们能用线上的例子说明你所需的动效效果,可以节省你做demo的时间,把重点放在重点细腻动效上。
  4. 视觉和交互的通力合作

我们增加动效是为了更好的阐述产品逻辑,它与交互紧密相关,所以跟你团队一起推进动效的产出事半功倍。

五、动效的工具

虽然身为设计师,可以定义非常酷炫的动效,但是由于技术成本限制可能被摒弃。所以作为设计师同样需要理解技术实现的基本原理。下面为大家介绍以下工具:

1. 交互性动效

如果你做了案例,动效只是为了说明你的设计,阐述你的交互逻辑,那么下面四款都可以满足的你的基本需求。Principle和Flinto都可以直接置入你的sketch设计稿,跟你的设计产生联动。页面也很简单,完成转场的交互极其便捷,另外还可以做一些基本时间轴动画, 调节单个元素的曲线变量等。Hype3实现的效果可能不那么精致,但是可以直接导出对应的代码。

Pixate除了一些基础的控件供你使用,特殊的动效可能需要一定的代码才能完成,可能对于没有语言基础的设计而言效果过于简单。

浅谈动效设计,帮你掌握视觉都需要的动效知识

浅谈动效设计,帮你掌握视觉都需要的动效知识

浅谈动效设计,帮你掌握视觉都需要的动效知识

浅谈动效设计,帮你掌握视觉都需要的动效知识

2. 复合型动效

Origami是一款基于Quartz Composer的插件,它提供了很多自定义的控件。但界面相对设计师而言不够友好。

浅谈动效设计,帮你掌握视觉都需要的动效知识

3. 创意性动效工具

如果你要做一个很酷的开机动画,那么你可以选择AE或者C4D。你可以专注在你的创意上而不被代码表达式干扰。

浅谈动效设计,帮你掌握视觉都需要的动效知识

很多新手会问,哪个软件是最好的?其实并没有完全的类比,在恰当的需求下选择恰当的软件,用最低的成本完成你的需求就好。你可能会用AE去做 一个复杂的开机动效,用flinto展现了交互逻辑都是ok的。

最后,推荐一些值得参考的站:

  1. Capptivate
  2. UI animation
  3. LitterBigDetail

 

作者:卜妮

来源:微信公众号【优酷土豆用户体验设计中心】

版权声明:人人都是产品经理尊重行业规范,所转载的文章都注明作者和来源,若标注有误,请联系主编QQ:419297645更改。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24935/

GUIioslogosketchUIUI动效VR交互产品产品经理产品设计体验设计动效动效知识动效设计动画原型场景微信沟通用户用户体验用户体验设计视觉视觉设计设计设计师转载
赞 (0)
CatherineCatherine
0
生成海报
案例分析:聊聊扁平化设计的六点优势
上一篇 2017-05-10 03:48
设计中的色彩心理学(上):九种色彩所代表的心理感应
下一篇 2017-05-10 05:50

相关推荐

  • 产品需求分析——《破茧成蝶》读书笔记 交互设计

    产品需求分析——《破茧成蝶》读书笔记

    这是一本很实在的书,没有很虚的理论,而是结合了国内互联网实际的案例,清晰明了地道出现实情况跟理想状态的不同,并且给出了很好的解决建议。适合刚入行的交互设计师以及产品经理阅读。 进入研究生阶段,大大小小…

    2015-03-05
  • 交互设计

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 2 部分: 深入推荐引擎相关算法 - 协同过滤

    本系列的第一篇为读者概要介绍了推荐引擎,下面几篇文章将深入介绍推荐引擎的相关算法,并帮助读者高效的实现这些算法。 在现今的推荐技术和算法中,最被大家广泛认可和采用的就是基于协同过滤的推荐方法。它以其方…

    2015-12-22
  • 交互设计

    如何写一份全面、易读的交互说明文档?

    交互说明文档,是交互设计师的输出物中必不可少的一项,它关系着设计方案能否最大程度的被实现。交互新人,大多会烦恼如何写交互文档,今天来聊聊这个话题。 交互文档,写给谁看 交互文档可以看做交互设计师输出的”…

    2015-12-25
  • 微信热点

    用格式塔原理增强用户体验

    来源:简书用户 cherri二哈(授权发布)心理学和设计包与用户体验密不可分。每当我们的目标是解决需求的时候,我们的专业就需要有同理心。随着我继续深入研究心理学进入设计领域时,我偶然发现了格式塔原则。什么是格式塔原则?格式塔心理学是一种将人的思想和行为视为一个整体的思维学派。当试图理解我们周围的世界时,格式塔心理学建议我们不要只关注每一个小部分。相反,我们的头脑倾向于将对象视为更大整体的一部分,并将其视为更复杂的系统元素。这个心理学院在...

    2018-04-11
  • 微信热点

    在Axure中,如何用动态面板实现banner的轮播效果(附Axure教程及软件)

    axure功能太强大,动态面板可能已经搞得你头晕眼花了,更别提7.0版本的中继器了。废话不多说,还是和大家分享一下动态面板实现banner轮播的效果,对动态面板还不熟的,不妨来看看这个效果的制作过程,然后自己试着做一做,绝对增加自己的信心。就拿某宝首页banner轮播效果为例进行说明:1前期线稿图,部件准备01先画个大概的位置线框图,如下图所示,做了3张banner的轮播效果02banner位置的占位符转换为动态面板(鼠标右键,转换动态...

    2018-03-06
  • 视力设计:如何为弱势群体做包容性设计 交互设计

    视力设计:如何为弱势群体做包容性设计

    世界是多样和公平的,在我们考虑大多数人和强者的利益时,弱势群体一样也需要被设计“庇护”到。本文作者将就此来谈谈如何为弱势群体做包容性设计之视力篇。主流产品或服务的设计能为尽可能多的人群所方便使用,无需特别的适应或特殊的设计。宽度不超过80个字符或符号(如果是中日韩字体,不超过40个);段落里的行间距(行隔)至少是1.5倍行距,段落间距至少比行间距大1.5倍。

    2017-05-15
  • 微信热点

    结合实际案例,一篇看懂用户体验五个层次

    ♝点击上方“交互设计学堂”关注我们,送电子书看过了很多描述用户体验五个层次的文章,但感觉很多都浅尝而止,今天我特地结合了十来个案例对用户体验进行了一次相对全面的阐述,希望大家在阅读时也能够同样寻找相关产品进行比照和论证,想必会更有收获。概要用户体验设计就是“以用户为中心的设计”,即创造“每件事都按照正确的方式在工作”的用户体验,让用户宾至如归,就像《Don’t make me think》里提到的“这会让用户觉得自己更聪明,更能把握全局...

    2018-04-10
  • 老调长谈的交互设计概念,送给菜鸟交互师!

    IxD全称Interaction design,中文叫“交互设计”。 2004年9月,国内第一个专业交互设计技术的网站De Dream创办,站长叫Windy,也是《Don’t Make Me Think》中文版《点石成金》的译者。这本书“专业”的IT类图书,居然走…

    交互设计 2015-01-26
  • 交互设计师高级:兴趣、场景推荐核心算法之‘多维空间的两个向量夹角的余弦公式’

    不知道大家有没有关注过你手里的APP,那么它在不停升级中变得越来越懂你,越来越知道你的喜好,举例先:网易云音乐的推荐、今日头条的新闻推荐,他们都是你使用越长时间使用频率越多对你兴趣越准确的判断从而推荐给…

    交互设计 2015-08-31
  • 互联网产品开发阶段,几个典型阶段 交互设计

    互联网产品开发阶段,几个典型阶段

    在互联网产品开发阶段,通常要经历以下几个典型阶段:确定用户需求和产品目标、概念设计、原型设计、界面设计、信息设计、视觉设计、前端开发、用户体验测试、产品完善、产品发布等过程。当然,这些阶段的划分有时…

    2015-12-23
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress