最近一段时间在忙东忙西，思考分享一些什么内容好的时候，就突然接到了一个设计需求。需求简单直接，就如平时大家接到领导般的设计需求，往往只有简单一两句话~！却涵盖了无穷无尽的内涵！哈哈哈~
当我拿到这个需求的时候，其实我是想的，不能因为你的一句话需求我就开始设计，因为在这个下拉的小，需要设计得有趣又不会枯燥，要可爱自然而又不失大方得体！还要融合整体品牌故事背景，还要有一些亮点小细节，让想看的人看得到，等等····不要问我为什么能想到这么多，因为你懂得！
嗯，没错，我已经这样了！（咸鱼躺尸.jpg ）中指微微一翘，而且还对你放了无数个P，但，但是 这时我又继续摸摸自己脑袋心理想到：我是炒鸡无敌射鸡师吖！我就是最棒的！嗯！心里又突然燃起熊熊烈火，继续思考解决问题！
在解决这个需求之前，首先要明确整个项目的设计目标。是为了设计而设计呢，还是为了表达什么而设计！首页的下拉动作也算是一个高频操作，在这个细小的地方，假如设计的出彩会增强用户体验。那么这里下拉操作设计，我们可以展示出什么传递给用户呢？
好吧，这次设计的目标想好了！有形象，有故事，有创意，那么马上开始动手设计吧！！GO GO GO！整个下拉动效设计 分为2个部分思考：
主要是推导出整个画面的视觉呈现，受限于不同机型的承载和实现能力，元素和动画不能过于复杂，还有需要符合整体的UI界面设计，我决定轻量化的设计原则。在动手设计之前这里脑暴一些关键字来辅助设定这次设计的故事场景（整个动漫app的品牌故事背景是跟相关的，所以关键词会有关系列）
品牌形象元素 我们有两个，企鹅娘（造型复杂，小展示不方便）其实是她太懒了，都懒得出镜了····嘘！），黑子（外太空某星球小王子背景，造型简约多变，适合做为主体视觉元素）简约够简单，你们懂得！
最后挑选的元素 黑子，可爱，星球，，飞碟，侵略地球，浅色系 重新组合。可以联想出这个大概表达的故事背景是，在用户下拉的时候会出现外太空某星球小王子 坐着飞船来临的场景（侵略地球）。好吧到了这一步，创意思考环节 就已经差不多了，有了故事背景，有了画面元素，就开始画图吧！
出了3种配色方案，放入效果图测试哪种更加适合，主要考虑整体配色跟UI界面和轮播banner搭配的和谐性，最终选择浅色系效果图。
设计稿到这一步基本就完成了，然后接下来就是怎么把设计稿变成动效跟代码的环节啦！！请继续往下看吧~有请小梦姐的出场协助！！
这个环节主要用Adobe after effect 来实现。整个动效构思可以拆分为3个部分，分别实现，最后再整合在一起。
当完成了AE的动画制作，那么恭喜已经完成一半的工作了，另一半就是用AE插件-lottie把刚刚制作的动画导出变成代码，交付给程序员哥哥实现最终效果。导出来的文件如下：
在用户下拉的时候，可以感受到小黑子开着它的飞船，一晃一晃的飞近来，一松手就会弹性的飞走了的小动画。在这个下拉的一个操作让用户潜移默化的感一丝品牌故事性～（好吧，虽然是我瞎BB的） 真实体验，发现更多彩蛋！下载腾讯动漫app吧~GO！比卡丘！
虽然只是一个简单的下拉刷新动效设计，但是设计思考的时候，你只是想换个展示的图案呢，还是只想提高一些趣味性就ok了呢，还是说可以再深入点思考，从表到里的展示出品牌故事特性，加深用户对品牌的印象？~最后希望以后小伙伴遇到同样的问题，可以有一些作用。
如果你也想了解AE动画如何导出代码配合程序员快速实现，请期待下一篇文章《AE动画导出HTML/Android/Ios 原生动画插件-lottie》
打 赏联系/ Contact关于设计达人广告合作在线在线留言加入分享达人灵感/ InspirationUI设计欣赏优秀网页设计欣赏创意设计作品欣赏VI设计欣赏Logo设计欣赏海报设计欣赏字体设计欣赏名片设计欣赏包装设计欣赏插画设计欣赏优秀摄影欣赏热门标签/ Hot Tags响应式设计扁平化设计APP网站设计全屏网页设计设计公司网站时尚网站美食网站旅游网站体育网站网页素材UI素材英文字体配色排版Dribbble笔刷纹理jQueryCSS3HTML5关于设计达人：
我热爱设计，虽然没有达到狂热的程度，但注定我已经离不开设计，它就像有生命似的，改变了我、我的生活，而我也，设计能改变人们、人们的生活以及全世界。所以我高傲的称自己为设计达人，而你就是下一个，WELCOME.梦见杀人不见血