曲线 动画 互动 从设计的维度，动态设计可以分为交互动效和 Ae 动效，在这两方面个人都有相关落地项目。但是自己感觉学得不够系统，只是能做需求，做得还不够好，所以最近几天我都在学习研究 Material Design 交互动态系统规范。从整体框架和细节入手，我结合日常业务设计思考总结了几点，也输出了一套动效标注模板，希望对大家有帮助。这次总结主要是分享交互动效的相关干货，方便自己沉淀设计经验，大纲如下：动效的作用设计原则持续时间缓动曲线动效风格动效标注动效的作用相信很多设计师在日常业务中都会主动挖掘机会点，来为产品增值赋能。机会点可以是交互动效，但是我们该怎样和产品同学沟通推动才更有说服力呢？如果只是说提升用户体验，说服力是很弱的。因此，我深度学习了 Material Design 动态系统规范，结合界面案例总结了几点作用：1. 使用更愉悦，微体验更好比如标签栏 tab 切换、下拉菜单出现，加入动效，符合现实场景动态，界面更加生动，还能缓解用户对内容的枯燥感。2. 让不同界面的元素更具有关联性，易于理解层级比如收件箱消息列表和消息详情的转换，过渡流畅。3. 提供强提示的反馈和展示当前界面状态比如键盘输出完成，动画显示操作是否成功；列表占位符，加入动画表示正在加载中。4. 教育用户，帮助用户了解如何操作比如滑动打开的手势动画，使操作行为易于理解。动效原则好的交互动效，会给人愉悦的心理感受。设计过程应当遵循以下几点原则：1. 自然在现实世界中，物体的速度会受到自身重量和摩擦力影响，不会突然运动，也不会突然停止，因此要使用缓动曲线，平稳过渡。2. 及时反馈动画持续时间适当，响应迅速，有助于用户了解 UI 变化。不宜太快，人的大脑容易反应不过来，处于很懵的状态。也不宜太慢，用户一直在等待，会产生枯燥不耐烦的心理感受。3. 简单明了动画过渡要简单明了，保持连贯，避免多个元素交叉重叠，显得混乱。4. 一致性遵循尼尔森十大交互原则中的一致性原则。整个产品应当使用统一的动效标准，比如运动速度、缓动曲线统一，使用户体验一致。持续时间在及时反馈原则上，Material Design 规范对于手机端的动画持续时间，提供了三个层级建议：小范围过渡的元素，建议时间是 100ms，比如开关按钮动画。中范围过渡的元素，建议时间是 250ms，比如半屏面板展开。大范围过渡的元素，建议时间是 300ms，比如悬浮按钮转化为全屏面板。这个时间我们只能参考，具体动画时间还是要看界面效果来确定。缓动曲线缓动曲线，调整过渡元素的速度，按物理规律自然地加速或减速，这样动画才会显得自然愉悦。在不同的平台或软件，缓动曲线可能会有不同的命名，MaterialDesign 规范定义了四种：1. 标准曲线标准曲线（也称为 EaseInOut）是最常用的缓动曲线，元素从静止开始快速加速，缓慢减速到结束。这种缓动曲线适合屏幕内的元素在屏幕内的运动，过渡自然，可以用在悬浮按钮转化为面板的动画。2. 强调曲线强调曲线（也称为 EaseInOut）是标准曲线的拓展，元素加速时间减短，减速时间加长，强调过渡的结束。这种动画效果会稍微俏皮一些，对于办公产品要慎用，也避免曲线样式太多设计师无法清晰地区分使用。3. 减速曲线减速曲线（也称为 EaseOut），元素从屏幕外快速进入并逐渐减速，在静止时结束。这种缓动曲线可以用在半屏面板出现的动画。快速进入，可以迅速响应用户的操作行为；当用户大脑收到即时反馈后，为了避免高速移动带来的紧迫感，元素需要缓慢减速到静止。同时，让用户在等待过程中可以提前识别和接收内容信息，动画结束后可以第一时间操作。4. 加速曲线加速曲线（也称为 EaseIn），元素在屏幕内静止，逐渐加速离开屏幕。这种缓动曲线可以用在半屏面板消失的动画。用户操作关闭面板，表示已经不关注面板内容，这时动画就需要快速响应，加速移动屏幕，避免用户出现等待的焦虑感。动效风格设计师了解完动效原则、持续时间、缓动曲线后，当业务需要定制一套动效标准时，我们需要结合产品调性制定动效风格。工具类产品专注内容，可以使用直接、简洁的风格；娱乐类产品，可以使用俏皮、活泼的风格。影响动效风格主要有几点：速度、运动路径、缓动曲线、海拔高度，我们可以看下对比效果。1. 持续时间 300ms 的标准缓动和 650ms 的强调缓动的对比。2. 如果元素沿对角线移动，运动路径可以是直线或弧形，看下对比。3. 默认过渡和弹跳过渡的对比。4. 默认情况下，背景内容在动画过程是静止的。为了动画更生动活泼，可以调整背景内容比例来强调海拔高度。从对比效果来看，持续时间较短、斜向移动的直线路径、默认过渡、默认海拔高度的动画风格直接、简洁，及时反馈，专注内容；持续时间较长、斜向移动的弧形路径、弹跳过渡、变化的海拔高度的动画风格强调动画的过程，俏皮、活泼、生动有趣。如果是办公产品，需要克制下，不要盲目强调动画。动效标注设计师完成交互动效 Demo 后，就要输出一份动效标注交付开发实现。在实际项目中，我有遇到过一些问题：有些设计师反馈文字表格不直观、不易编辑，有些开发同学反馈动画曲线看不懂。为了解决这些协作问题，我结合动效标注的项目经验、参考 Material design 规范动画曲线和咨询开发同学的意见，最终搭建了一个 Sketch 动效标注模板，组件化搭建编辑，比较方便。（有需要的同学可以在文末和开头下载）总结以上就是我对 Material Design 交互动态系统的学习总结。理解交互动效的具体作用，我们才能更有说服力地和产品沟通推动落地。在设计过程中，我们应当遵循自然、及时反馈、简单明了、一致性的原则，结合产品调性打磨出一套自然愉悦的动效标准。还需要注意一点，要恰当使用持续时间和缓动曲线。由于个人还没经历过整套产品交互动效系统的搭建，还有许多不足之处，接下来会继续学习！腾讯出品！2021-2022设计趋势报告：动态篇前言动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」 文件名 如何下载使用 文件大小 提取码 下载来源 交互动效标注模板3.36M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/material-design-system-conclusion
波峰 曲线 效果 本教程主要使用Photoshop巧用曲线工具制作金属质感立体字，主要给大家分享一个实用简单的PS技巧，用曲线工具实现金属字的光感塑造。下面一起来学习吧。说到做PS立体字，估计很多同学都能想到在图层模式里面做，斜面浮雕各种调参数。今天给大家分享的这个技能不需要记参数，不需要各种调样式，总共2步轻松搞定，先来一组效果展示，由于只是展示制作技巧，直接用字体，如果是自己设计的字体效果或许更好看的。先看看实例这么简单华丽的特效，只要2步就可以完成，下面我们就一起来学习吧在PS里面新建文件，设置一个暗色的背景，打上要做的字。图层样式-斜面和浮雕。有同学要问了，听你前面的意思是不用斜面和浮雕吗?这咋又用上了呢?这一步是给字加上立体感，后面在用曲线做广感。只需要做简单的参数设置，让字看起来立体些就行。方式改为“雕刻清晰”，深度和大小随意调整，参数尽量大些，只要让字变得立体棱角分明就行，后面还可以微调。“阴影”选项的高度和角度要调为上方来光，当然大家可以试着调不同的光向效果。我调的参数如下：接下来就是见证奇迹的时刻~开始今天最关键的一步，曲线工具登场。新建一个组，把文字放进去，再新建一个曲线图层，并剪切进文字组里。如图：调整曲线，做出两个山峰的形状。如图：是不是光感马上就出来了?调整曲线的时候两个波峰尽量匀称，节点尽量在波峰和波谷的顶端上，否则可能会出现锯齿边。用渐变图层给文字加色，这里我用的是土豪金，大家可以试试别的颜色，会有不一样的发现哦!图层模式用叠加或者柔光。最后适当锐化一下，完成效果图，截个局部高清图看看。接下来你会发现，想要变字体换效果之类的太方便了!我们换换字体看看。上面讲了2个波峰的做法，其实还可以做3种方法的。三个波峰要根据字体的情况而定，好处是光感更细腻，细节更多。但是有的字体用3个波峰效果并不理想，要根据字的粗细结构来判定用2个波峰还是3个波峰。波峰的高低落差不同，出来的效果不同，原理是高光和暗部的反差程度，波幅大则明暗反差大，波幅小则明暗反差小。根据这个原理，大家可以试着做不同程度波幅的效果。比如黑客这个案例，波幅不大，效果跟上面的就有明显不一样的感觉。现在我们来总结一下：
在路上
张大湿
