欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

交互设计师想要认真和你聊聊动效设计

发布时间:2017:12:19 13:08:58 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1139个文字,预计阅读时间3分钟
导语
这次带来的是WPS邮箱4.0动效设计案例,完整呈现了设计构思-实现-检验的过程。在设计中有独立的思考,也犯了些错误,希望能够给抛砖引玉,激发大家的灵感。

  这次带来的是WPS邮箱4.0动效设计案例,完整呈现了设计构思-实现-检验的过程。在设计中有独立的思考,也犯了些错误,希望能够给抛砖引玉,激发大家的灵感。

交互设计师想要认真和你聊聊动效设计

 

  移动端的动效设计主要分为两种:页面跳转动画及加载动画前者的作用是衔接页面间的切换后者是为了减轻用户等待时的焦躁情绪。同时,动效设计也是对设计师综合素质的挑战

  是你没看错,交互设计师和你聊动效,迎来职业第二春。前些日子在给WPS邮件做新版本的交互设计,零零散散的工作结束后,看着测试机里APP的界面,发现邮件的加载与下拉动画还使用的是系统动画。刹那间,使命感油然而生。

推荐阅读:在产品设计过程中缺乏创意?不妨参照 ISIIVE 方法

  

交互设计师想要认真和你聊聊动效设计

 

  这次的设计流程如下

  了解需求-确定方向-着手设计-检验问题

  Step1.了解需求

  了解需求后我们可以在目标上和需求方达成共识,出发点一致,目标一致,避免出现不必要的麻烦。这点非常重要重要,效率第一。有了这个想法就去和产品姐姐聊,没想到人家也是这么想的,五分钟友好的交流之后,我大概get到了她的想法:

  需求:希望设计出新的下拉加载动画以代替系统默认动画。期望值:动画内容契合列表的下拉刷新操作,与邮箱的线上设计风格一致,同时要求趣味性。

  Step2.确定方向

  当我设计动效时,我会想到什么?网上有很多炫酷的爆炸的旋转的3D的作品,我们如何在有限的时间里确定设计方向呢?下图是我的思考方式:

  

交互设计师想要认真和你聊聊动效设计

 

  首先,,设计本身是一个先做加法再做减法的过程。

  加法:关键词发散是我个人的设计方法,这个阶段,我联想到了现实世界中的很多与邮件相关的词,画了很多草图,也汲取了很多优秀作品的灵感,很多奇奇怪怪的点子在脑海中迸发。

  减法:在需求确定的情况下,可以更加轻松地缩小设计范围。回想需求,动画内容契合列表的下拉刷新操作。下拉动画的内容需要与操作保持一致,用户在此页面下拉触发的是刷新行为,也就是收取新邮件,这我们需要用动画体现出来。回想需求again,产品要求与邮箱的线上设计风格一致,WPS邮箱线上发送邮件的按钮样式是一架飞机:

  

 

  发送邮件的样式

  依据以上思考我的结论是:

  下拉刷新=收取新邮件

  邮件=飞机

  相应的,收取新邮件可以认为是飞机飞入,于是我延续飞机的设计,围绕着邮件与飞机的思路,以飞入邮箱的形式来展现“收取新邮件”的主题。自此动画的大体方向确定了:纸飞机与邮箱。

  Step3.确定方向

  到这里相信大家脑海中已经有了一个动画脚本:随着用户下拉列表至一定高度,触发动画,飞机飞入邮箱,下拉动画结束后列表收起,DEMO如下:

  

交互设计师想要认真和你聊聊动效设计

 

  这里不讲技术问题,分享一些动画的思路:飞行路线不用太复杂,看着累。速率调整一下,注意透视,近大远小。

  随着下拉手势,可以让邮箱门打开:

  

交互设计师想要认真和你聊聊动效设计

邮箱门细节

 

  也可以在飞行的同时稍稍改变一下飞机的角度:

  

交互设计师想要认真和你聊聊动效设计

角度细节

 

  注意下图:较远的火车,看得比较清晰,较近的模糊,这个道理大家都懂。

  

交互设计师想要认真和你聊聊动效设计

飞驰的火车

 

  

交互设计师想要认真和你聊聊动效设计

模糊细节

 

  Step3.1.立个flag

  

交互设计师想要认真和你聊聊动效设计

 

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:五分钟设计指南,立即提升设计档次

下一篇:望天,渐变色彩灵感库就在我们的头顶的天空上

  • 18900 文章总数
  • 2374154访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信