交互动画设计案例—1688首页动效

随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低端浏览器的时代已经在向我们招手了。俗话说得好,颜值不够,动效来凑,Web动效已经不仅仅是网页设计的润滑剂了,它的功能更多的体现在了交互逻辑、视觉渲染和创新实践上,上能引人注目,下能潜移默化。

下面将通过经典的黄金圈法则来为大家讲解我们在B2B聚合页——1688首页项目上的动效设计,主要分为三个部分,动效设计的目的、方法和方案。

在设计开发的过程中,当设计师做好了一套静态页面而且设想出N种有趣的交互动画,再交付前端进行重构还原页面的时候,由于无法提供精确的动态参数,导致沟通和制作的成本增加,而最终的测试demo也差强人意。因此,我们在1688首页项目的动效设计中总结归纳出一套适于设计师表达动效概念的方法和流程。

biaoti1

首先,为什么做动效,在动效设计的初期阶段,我们需要从业务和用户两个方面对对项目本身进行一个需求分析,从中得出动效在其中的作用,业务方面是引导用户,层级信息展示,用户方面是页面过度,改善用户体验,动效设计的目的是为了自然流畅的呈现B类电商网站信息,并且,体现出专业和诚信的气质。121

biaoti2

接下来,具体到如何做动效,正所谓设计来源于生活,运动过程的定义都是基于我们日常的生活经验的,为了给B类用户制造熟悉感,我们设置了一个动效设计的切入点——B类商务特色动作,并为每一个动作提炼了一个动效方式,包括:

盖章,状态切换不好把控,动作衔接有难度;

alibaba01

交换名片,切换动作可参考;

alibaba02

扫码,科技感过重,应用较难;

alibaba03

包装,3D动作幅度大,过度不自然;

alibaba04

握手,效果单一,可参考;

alibaba05

签名,这个效果是无法应用的;

alibaba06

流水线,一个完整的流水线场景中基本包含页面motion的所有动作,可提炼易发散,同时,我们B类电商承载了从设计师、原料商、生产商、批发商、零售商中各个环节的业务,包含底层的支付物流等等,就是一个宏观的传送带,因此作为B2B业务的聚合页,我们把传送带作为1688首页动效设计的基本动作。

alibaba07

确定好了基本动作之后,我们需要结合页面的交互框架对区块进行一个层次分级,设定节奏,突出重点。从用户看到一个页面的瞬间开始,如果在展示面积相同的情况下,用户的注意力被吸引的情况是:动态>颜色>形状。判断一个区块是否需要动效主要基于以下两点:1.交互上,是否包含隐藏信息;2.视觉上,是否需要辅助渲染。所以,对于1688首页上点击率最高的搜索和隐藏信息最多的类目、banner将会是我们设计的重点。

14

下面我们来具体分析一下刚才确定的三个重点区块的动效设计,对于一般的输入框,需要用户在输入框中产生点击之后才能开始输入操作,在1688首页项目中,我们改进了输入框的方式,设定了一个阈值的时间,让用户鼠标hover到输入框后,停留时间超过阈值则激活输入框,用户可以直接进行输入的操作,减少用户点击,让操作更加流畅。15

类目区域,共分为三级菜单,我们用次级物体运动来表达这三级菜单之间的关系,附属性质的次级物体运动是伴随着主要物体运动产生的,次级运动相较主要物体运动有一定的延迟,所以我们在类目区域也是通过运动的时间差带来逻辑上的关系,一级菜单牵引出二级菜单,二级菜单牵引出三级菜单。

16

banner的视差滚动效果以及楼层的分屏加载效果是模拟传送带的运动过程,我们把主体看成是受力方,传送带看成是施力方来进行分析。整个运动过程分为三种状态,启动态、中间态、收尾态,根据牛顿第二定律得到物体分别作匀加速、匀速和匀减速直线运动。17

根据之前的分析,我们可以绘制出物体运动的速度-时间曲线和位移-时间曲线,大家可以看到下面这条曲线就是由上面这条曲线积分得到的,那么问题来了!为什么动效设计要画出这样的运动曲线呢?18

前端同学可以运用曲线进行运动定义,CSS属性中的transition和animation可指定缓动函数,但不支持全部函数,可通过贝塞尔曲线的绘制达到自定义的运动效果,固定贝塞尔曲线中头、尾两个点,通过这两个点引申出的锚点来确定曲线的弧度,任何运动曲线都可以拆解为一段段的贝塞尔曲线来进行定义。 贝塞尔曲线绘制函数: 19

通过CSS为运动曲线专门设置的VIP属性来确定两个锚点位置,流畅的动效就搞定了

这里再给大家提供一个更加省事儿的办法,SCSS,也就是CSS的进阶版本,还有Javascript可以直接调用缓动函数库,大家或许会对下面这种复杂扭曲的函数有疑惑,其实这些是具有反馈效果的运动曲线。根据我们之前的分析,由于1688首页采用的是内容靠前的设计策略以及简约的视觉风格,所以我们的动效动作一定是“稳、准、狠”,绝不拖泥带水,也绝不喧宾夺主,所以这样比较Q弹的动作是我们极力避免的。其实这些曲线更适合应用在无线端,由于在无线端用户直接使用手指来进行操作,当我们需要表达区块元素的弹性、纸质或者是卡片的材料隐喻时,用反馈效果来表达材料和重力是比较恰当的。 缓动函数速查表:http://easings.net/zh-cn#20

biaoti3

最终我们会得到一个包含时间点、关键帧、触发条件、运动过程和空间幅度的完整时间轴,清晰的显示出页面区块元素在每一个时间点的样式和样式之间的过度,有了这样的规范输出,麻麻再也不用担心我的动效还原了。具体动效请线上查看:http://www.1688.com/ 其实今天文中提到的技术方案是有一个保质期的,由于技术的迭代迅猛,也不知道这个保质期能够持续多久,但是按照时间轴和关键帧的动效设计思路是不会过期的,迪士尼从白雪公主时期建立的动画设计精髓到了今天的超能陆战队上依然成立,大白的每一个动作设计从本质上来说仍旧是时间点和空间幅度,所以说,作为动效设计师,只要谨记这一点,一个好的动效方案就成功了一半,另外的一半就是结合业务和用户的思考了。211

最后总结一下动效设计的工作流程,通过对项目需求和架构的综合分析找到动效的切入点,提炼发散出一个关键动作,结合前端的实现框架,确定流程逻辑和运动,反复实践检验得到最优方案,别忘了为用户设置一个惊喜,就大功告成了!22

 

原文来自aliued

专注交互设计的分享资源学习平台官方公众微信号:我是UE

官方微博:@我是UE网

Q群:156360020 验证:iamue

3.pic

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

(0)
TinadminTinadmin
上一篇 2015-04-24
下一篇 2015-04-24

相关推荐

  • 现在时隔半年,再次分析一下微信读书这个产品

    从15年8月28日 微信读书 APP低调上线到现在已经差不多快半年了,对于这款含着金钥匙出身的产品,一开始似乎并有多得到太多的好评,甚至因为 好友阅读排行 功能而受到很多争议。 现在时隔半年,我以一个普通读书爱好…

    2016-02-23
  • 设计并不仅仅关乎视觉和感受,它要呈现的是事物运作的规律。

    动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过,动效的目标并不是单纯的娱乐用户,而是帮助用户了解交互的效果和界面中发生的变化,让用户更为有效地使用你的APP。

    2016-10-24
  • 超级干货:75条界面版式设计准则

    一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。 有一个设计咨询公司根据自己的客户案例,总结了 75 个经过实践证明的原则: 1. 使用单栏布局代替多栏布局 …

    2016-07-14
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • Axure案例-联想输入提示,Axure中继器的使用

    点击右面下载:axure-case-https://www.iamue.com 不多说了,源文件分享,使用Axure打开编辑可以查看原理。 日安 转载的童鞋带上:木卫艾欧网-交互学堂》 Axure案例-联想输入提示,Axure中继器的使用 

    IxD案例 2015-02-04
  • IxD案例作品分享:我来也”APP概念设计及动效设计

    本作品作者是来自站酷的设计师羊羊羊8571,本文经过作者本人许可。 转载请与作者联系!取得授权。 “我来也”是一款基于手机LBS属性的移动点名签到应用,利用手机应用解决了老师课堂点名,活动签到,会议签到!在工作…

    2015-07-29
  • APPLE WATCH案例学习!

    编者按:这篇实战的对象是Wallaby,一款个人财务APP,文章总结了四点经验:导航、通知、复杂任务以及动效。每个方面都有需要注意的问题和对应的解决方法,进入译文 >>> Wallaby是一款个人财务app,可以在…

    2015-05-21
  • 『小米只卖产品 不卖节操』雷布斯站在巨人的肩膀上做了什么?

    文章来自设计癖 2014 年 12 月 9 日,小米又一次涉嫌抄袭。这一次的对象,是日本巴慕达公司的 AirEngine 安之风空气净化器。同样的专利许可授权纠纷,同样深表遗憾的回应。巴慕达与曾经的魅族、年初的 Pressy 以及…

    2014-12-27
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • O2O产品的用户评价思考

    为什么产生这样的思考? 可能因为我在一家做 O2O 产品的公司,碰巧我做过 UGC 评价相关的交互设计,然而更重要的是前不久我在线下真实的场景中希望使用自家产品的评价帮助我作决策时,发现我的一些需求并没有得到很…

    2016-03-02