动效设计

交互设计严格上来说是没有什么套路而言，但是，对于初入行者还是需要有一些需要具体客观的知识点去学习。就像笔者当年刚入行学习工业设计的时候，对工业设计的内涵与外延始终搞不太懂。老师们也没有一直强调工业设计的定义，而是从琐碎的知识点开始，一点点讲解，让我们掌握。当我们掌握了足够多的知识点，工业设计也自然在我们的知识框架中形成。

你的UI和交互设计中的每一个元素都是至关重要的，一个又一个细节设计让你的产品最终脱颖而出，而真正让人难忘的产品，靠的是这一个个精致到位的细节堆出来的。

UI设计的细节很重要，它不仅仅体现在静态的元素上，动效和微交互也是如今UI和UX设计中最重要的细节。想要打造优秀的移动端UI设计，微交互和动效设计是绕不开的问题，今天的文章我们来聊聊这个。

互联网空间不像现实世界，它完全是一个平面化的二维虚拟空间，所有的物体都处于一个空间平面上，但是信息内容却是有层级关系的，那么应该如何在一个平面空间里来展现多重层级关系的信息呢？

本篇是系列小结的第二篇，简单总结一下自己对如何提高交互文档质量的一些思考。

好的动效设计，从来不以炫酷作为目的。

这篇短文将会探讨UI设计中动画的过度使用，并将其与早期的视觉设计进行对比，提出一些对于有效的GUI动效设计的建议。我们将在下文中，简单探讨如何改善下面的这个交互。

app动效设计，现在已是各位APP设计师学习和临摹的方向。大家也会收集一些好看的APP动效设计作品。学习app动效设计，不是盲目的让界面动起来那么简单，一定不能滥用。要学会克制。

微交互应该火热了相当一段时间了。它成为话题中心很大程度是因为微交互所带来的令人动容的体验。如果说要界定微交互，那么它应该是围绕着用户完成单个任务前后而存在的微妙的交互和效果。小贴士：奖励机制是驱动用户的核心，奖励越强，产生的习惯效果也就越明显。小贴士：动效应当具有足够持久的生命力，所以设计的时候，应当思考它是否会在看过100次之后让人觉得厌烦？它是否清晰可见，或者完全无法引人注意？小贴士：用充满情感和人的姿态来同用户交流，这是让你的UI和交互变得更加温暖的最快的方式。小贴士：应当在你的设计中保持KISS原则（KISS 原则是用户体验的高层境界，简单地理解这句话，就是要把一个产品做得连白痴都会用，因而也被称为“懒人原则”），不要让那个你的微交互成为一个宏交互。

读了这篇文章，你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等，特别全面，强烈推荐收藏学习。

我习惯从层级的角度由高至低地排查各个交互层面可能存在的问题——首先是信息架构与流程这一最高层级，然后是界面的具体呈现，以及基于界面呈现的交互过程，最后才是以上自查中均未涵括的其他特殊情形。(1)确定当前阶段 → (2)阅读设备、数量、所属项目、请购人员、发起时间等基本信息 → (3)确定自己在本流程中的身份（因为部分场景下，当前用户的身份可能有多种可能性，需要用户再做确认）→ (4)在列表区阅读此前的流程历史，必要时可上下滑动或点击查看附件 → (5)确定当前步骤等待自己完成的是什么任务 → (6)执行该任务。

坦白来说，虽然我之前在项目里做过一些小动效尝试，但一直没有什么系统的方法和原则指导，大多在原型软件里凭「感觉」随意调调了事，而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们一起进行动效设计的研究与实践，对动效设计的价值、原则和实现交付开始有了更多的了解，在本文中浅薄地总结一下。

随着技术的不断发展动效越来越多的被应用于实际的项目中。手机、网页等等媒介都在大范围应用，那么问题就来了，为什动效越来越吃香？它有哪些优势呢？

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

此文主要适读人群：梦想成为“全栈设计师”的你（偏向移动端产品）！当然设计都是相通的，即使你的职位是产品设计、交互设计、网页设计、平面设计也都不妨一看，相信你也可以有所收获！1、对app基础控件的认知
2、字体
3、配色
4、图标设计
5、标注与切图规范
6、排版的基础原则
7、简单的动效设计
8、走察规范
9、交互常识
10、项目文件管理
11、个人素材、资源库
12、开发常识
13、数据分析能力
14、产品常识
15、用研常识

扁平化设计算是秉承了极简主义理念的至亲了——因为它将简洁的思想融入至所有元素的设计。然而，要达成简洁的扁平化设计依旧困难——即需要我们以相同的设计理念为目的，并创造出一套连贯的视觉与功能体验。让我们来了解下，你能够通过扁平化设计为用户做些什么呢？

精美的动画对于提升产品体验有很大帮助，如促进用户理解功能，缓解用户情绪，调动用户积极心理，为产品提供亮点等等。诸如此类的文章相信各位已经看过不少了，不少人已经开始越来越重视动效在产品中的应用了，还没有看过的同学不用急，谷歌官方的动效指南讲解得很详细，建议只看这个就够了，配合一些动画理解起来更容易。说明：

1.优化直播间分享面板，增加特效

2.当用户点击分享按钮时（*包括传统直播间主播面板的分享按钮和上方分享按钮，手机直播间的分享按钮*），从下方弹出分享面板，逐个弹出分享icon，并淡入显示分享奖励。

3.用户关闭分享面板时，分享icon从右到左依次下落淡化消失
相关参数：

1.分享面板减速弹出，运动时间225ms
2.分享icon从左到右依次弹出，运动时间225ms。带有奖励图标的，当对应分享icon弹出后，分享图标淡入显示（时间225ms），第二个图标比第一个迟100ms开始运动

eg：如图第一个为qq图标，当用户点击分享按钮，分享面板弹出后，qq图标开始弹出（时间225ms），100ms后第二个图标（qq空间）弹出，当qq图标完全弹出时，淡入显示分享奖励图标，时间225ms。
3.分享icon从右往左依次收回，分享面板收回，所有运动的时间减少30毫秒，如分享面板收回时间195ms，分享icon收回时间195ms。

andorid端动画曲线采用系统自带：AccelerateDecelerateInterpolator（在动画开始与结束的地方速率改变比较慢，在中间的时候加速）

iOS端动画采用系统自带：kCAMediaTimingFunctionEaseInEaseOut （在动画开始和结束的时候速度稍慢些）
具体效果可参考附件视频

一篇VR实践指导文章。Smashing Magazine好久没有这样新一些的东西了。实践指导性质的内容非常简单易行，个人感觉需要重点关注的是将传统UX设计流程及方法融入VR产品设计的思路，以及作者对于VR设计开发工作前景的观点。新技术，新事物，大风刮去之后留下的一批实践者所始终坚持的那些，才是真实的、有长期价值的东西。这是走心；集体意淫无非走肾而已。

新手设计师相较于资深设计师，后者技能更丰富且全动感特效轻松get 面，很多人想要进阶资深却苦于培养新技能，笔者在经手不少视频动效项目后，对于技能进阶颇有心得。