交互设计 » 有趣的APP下拉刷新动画设计

有趣的APP下拉刷新动画设计

发表于: 交互设计. 评论
Sponsor

最近一段时间在忙东忙西，思考分享一些什么内容好的时候，就突然接到了一个设计需求。需求简单直接粗暴，就如平时大家接到领导般的设计需求，往往只有简单一两句话~！却涵盖了无穷无尽的内涵！哈哈哈~

当我拿到这个需求的时候，其实我是想拒绝的，不能因为你的一句话需求我就开始设计，因为在这个下拉的小位置，需要设计得有趣又不会枯燥，要可爱自然而又不失大方得体！还要融合整体品牌故事背景，还要有一些亮点小细节，让想看的人看得到，等等····不要问我为什么能想到这么多，因为你懂得！

嗯，没错，我已经这样了！（咸鱼躺尸.jpg ）中指微微一翘，而且还对你放了无数个P，但，但是 这时我又继续摸摸自己脑袋心理想到：我是炒鸡无敌射鸡师吖！我就是最棒的！嗯！心里又突然燃起熊熊烈火，继续思考解决问题！

在解决这个需求之前，首先要明确整个项目的设计目标。是为了设计而设计呢，还是为了表达什么而设计！首页的下拉动作也算是一个高频操作，在这个细小的地方，假如设计的出彩会增强用户体验。那么这里下拉操作设计，我们可以展示出什么传递给用户呢？

1.品牌形象（一定要漏出吧！？与下拉操作完美融合，增强品牌形象曝光，加深印象）

2.品牌故事（写了一个品牌背景故事，不传递给用户Get，就白写了！）

3.脑洞创意（有丰富细节的脑洞设计，没有细节的设计是不完美的，让想看的人看到！）

好吧，这次设计的目标想好了！有形象，有故事，有创意，那么马上开始动手设计吧！！GO GO GO！整个下拉动效设计 分为2个部分思考：

一.创意设计环节（思考画面呈现，出现什么内容）

二.动效实现环节（结合实际情况，考虑实现成本）

1、创意设计环节

主要是推导出整个画面的视觉呈现，受限于不同机型的承载和实现能力，元素和动画不能过于复杂，还有需要符合整体的UI界面设计，我决定轻量化的设计原则。在动手设计之前这里脑暴一些关键字来辅助设定这次设计的故事场景（整个动漫app的品牌故事背景是跟宇宙相关的，所以关键词会有关宇宙系列）

当关键词出来以后，我需要从这些关键词中 重新组合 ，思考出一个有趣的画面故事！

品牌形象元素 我们有两个，企鹅娘（造型复杂，小位置展示不方便）其实是她太懒了，都懒得出镜了····嘘！），黑子（外太空某星球小王子背景，造型简约多变，适合做为主体视觉元素）简约够简单，你们懂得！

最后挑选的元素 黑子，可爱，星球，宇宙，飞碟，侵略地球，浅色系 重新组合。可以联想出这个大概表达的故事背景是，在用户下拉的时候会出现外太空某星球小王子 坐着宇宙飞船来临的场景（侵略地球）。好吧到了这一步，创意思考环节 就已经差不多了，有了故事背景，有了画面元素，就开始画图吧！

草稿画一些画面元素▲

快速组织整个画面▲

上图主要用ps制作（当然不局限，AI,AE都可以做得到）▲

出了3种配色方案，放入效果图测试哪种更加适合，主要考虑整体配色跟UI界面和轮播banner搭配的和谐性，最终选择浅色系效果图。

设计稿到这一步基本就完成了，然后接下来就是怎么把设计稿变成动效跟代码的环节啦！！请继续往下看吧~有请小梦姐的出场协助！！

2、动效实现环节

这个环节主要用Adobe after effect 来实现。整个动效构思可以拆分为3个部分，分别实现，最后再整合在一起。

1.飞碟的固定循环动作

2.背景固定动画

3.随着下拉推移 飞碟会从小变大跟随 移动（做demo给程序猿看，主要是他们实现）

飞碟png上下晃动+AE实现眼睛眨眼，还有放射线

背景动画主要是星球png+AE实现线性飞过动画+一闪一闪的星星

最终整个动态合成效果▲

以上涉及的都是AE比较基础的功能，有兴趣的同学可以去找找基础教程看看哦，这里就不提供了

当完成了AE的动画制作，那么恭喜已经完成一半的工作了，另一半就是用AE插件-lottie把刚刚制作的动画导出变成代码，交付给程序员哥哥实现最终效果。导出来的文件如下：

最终在客户端实现效果如下图：

在用户下拉的时候，可以感受到小黑子开着它的宇宙飞船，一晃一晃的飞近来，一松手就会弹性的飞走了的小动画。在这个下拉的一个操作让用户潜移默化的感悟到一丝品牌故事性～（好吧，虽然是我瞎BB的） 真实体验，发现更多彩蛋！下载腾讯动漫app吧~GO！比卡丘！

虽然只是一个简单的下拉刷新动效设计，但是设计思考的时候，你只是想换个展示的图案呢，还是只想提高一些趣味性就ok了呢，还是说可以再深入点思考，从表到里的展示出品牌故事特性，加深用户对品牌的印象？~最后希望以后小伙伴遇到同样的问题，可以有一些启发作用。

如果你也想了解AE动画如何导出代码配合程序员快速实现，请期待下一篇文章《AE动画导出HTML/Android/Ios 原生动画插件-lottie》

最后鸣谢小梦姐

实现这次动效和最终导出代码跟程序猿协同完成落地这次设计~ 此处应有掌声！~

动效实现：小梦姐
视觉设计：VELES
软件：PS+AE+AE插件（lottie）

作者：VELES
微信号：VELES1990

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 、、、、 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

{ 发表评论 }