[P级方法论] 手段的目的就是手段本身

作者：马宝

项目中对设计的评价往往都是“唯结果论英雄”（视觉和交互），设计者是否更应聚焦在设计过程本身，思考如何改进化"凡人"看到的结果表象？想要不被产品需求和业务逻辑影响的去做自己所爱的设计是不现实的；但至少我们可以抽身在享受设计过程的某个瞬间。

谁都讨厌TMD的紧急需求

设计者深有体会，在有限的时间完成特定效果，往往结果是最终成品不尽如人意；我们会丧心病狂的翻遍各大素材网站、参考各类设计案例和效果，吭哧吭哧的做完一稿又一稿，得不偿失；抛去大师级别的BUG级天才而言，普通人的灵感不是说来就能来的～精疲力竭的设计同时还加深了我们对于DEADLINE的焦虑。

项目、任务、需求、效果都可能会改变，不变的设计套路 所谓套路＝设计思维、能够从无到有的创造力，好比“匠人”技法～～～ 不想降低设计品质，又想顺利完成工作，唯有提高设计效率；求人不如求己。想要将自己“天马行空”的想法转化成实际作品，看我的实践过程！

普通法（傻白甜） VS 专业技（高大上）

案例A—用普通法完成动效

想要完成这个动效至少有8种以上的方法可以实现；从你脑海里想到的方法关键词有哪些（PS GIF、AE、flash、hype、principle、JS CSS……）看似简单的效果换你上场又会怎么做。

1、完成一张静态的页面效果并不是很复杂的事情，依葫芦画瓢很多人都可以做到。

2、抛开复杂的专业技，少一些充分必要条件的前提，用最简单的形式完成设计！

3、两步完成动效GIF ，PPT／keynote 完成动画，视频转 GIF（细节不累赘）

我的方法

Keynote > mov > gif 有人抱怨我没有keynote 、mac、 我不会视频处理成GIF～啪啦啪啦；我想问，你会双击打开PPT么！

• ？不要给自己的设计找借口，不是你不会而是你懒的没有价值。

小提示

总结一句话说说 什么是动效；“A点到B点的飞来飞去”

1、线即是线运动轨迹，点即是点元件分离

做动画实践过程最重要的点在于元件分离，，动画效果关联是互不影响的，我们设计的过程才是可控的。

2、速度＝快感

动画的韵律在于对快感的把控，时间影响速率、节奏影响感受。 不是所有人都对“速度”敏感的，只有反复的调试才可能近乎于完美；

我经常这么干，先给一大值，再试一个小值，取最合适的中间值（动画调速度的方法）

3、视觉暂留效应

物体在快速运动时, 当人眼所看到的影像消失后，人眼仍能继续保留其影像0.1-0.4秒左右的图像，这种现象被称为视觉暂留现象。简单的说你盯着GIF中的大S红色部分，画面变白时，你的眼睛还残留着 前几帧的画随着时间的消逝，视网膜画面慢慢清空； 因为小篇幅讲不清楚，大家自己心领神会，google大法 wikipedia

因为0.1-0.4秒视觉暂留效应，用户对画面动感是很苛刻、很微妙的感受，我们调试时要考虑的真正速度是：(速度加减暂留时间)

困难在于设计思考

1. 设计理念？你想要传达是什么
2. 理想态？－创意
3. 现实态？－表现
4. 从创意到设计实践转化
5. 完善你的设计创意

小实验

案例B—用专业法一行代码搞定

以有数logo为例做一个简单loading的动效，加载是循环的、缓冲的、“有意思”的；这个loading案例是为了在logo上的一种扩展尝试，在效果上没有过多思考只是例举了常见的线条动画是如何制作的。

附件 源文件下载 youdata.zip

**方法一、**
1. sketch 完成logo的设计
2. 在keynote 中复制粘贴 元件
3. 勾勒线条，加线条动画，keynote 完成动画
4. 导出为视频
5. 新建PS画布 导入视频为智能对象  （PS 是可以处理视频的）
6. 新建时间轴 导出GIF

用案例A的普通法其实是很麻烦的过程，keynote 对动画的支持是很有限的，值得一提的是神奇移动系列和PPT 动画的区别。

**方法二、**
1. sketch 完成 logo svg 导出
2. SVG 加一小句代码 完成
查看源文件

SVG +CSS 3动画；不要被字眼吓倒，完成这个动画我只用了两分钟，从SVG 到动画的学习，我只用了一个Google 搜索，一篇文章就够了，学习成本是有的，很小，非常小。 SVG 对设计师并不陌生，Sketch 、PS 、AI 都可以直接导出SVG，svg可以在浏览器直接打开调试-可看；但是你会用文本编辑器打开看代码-可改

基础图形+CSS

动画原理很简单，就是让path 从0到100%的变化，logo就动起来 以下是CSS动画的一小部分实例，你想学通多问问你身边的前端技术大大吧！

<style type="text/css">
path {
  stroke-dasharray: 400;
  stroke-dashoffset: 800;
  animation: dash 2.2s ease-in-out infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>

换成通俗的的语句就是一条路径，我们设置了虚线点和间距，当虚点和间距足够大那么你看不到这条线了；如果间距从一个足够大的值变为0，我们就看到了线一点点长出来；这是动画的过程。

篇幅问题，有需要的另开文字说明 SVG to animation

手段的目的就是手段本身

目的只有一个方法万万千，有多少人可以完全掌握方法用于实践，真正高效出图？可怕的不是无知，而是慵待；为什么不选又快又好的，对自己体贴一点；

参考文章

• Polygon feature design: SVG animations for fun and profit
• Animating Vectors with SVG
• How SVG Line Animation Works

本文来自网易实践者社区，经作者马宝授权发布