动效设计基础入门（一）：什么是动效设计

动效有多重要？那是太重要了。如果现在APP没有动效，你肯定会感觉少了点什么，比如最简单的加载动画得有吧。动效的重要性在于将交互、视觉过渡处理的更加细腻，而且能够承载更多的信息，比如iOS动效、MD动效等。
许多大公司也将动效设计列入了招聘要求当中， 可见动效在用户体验中的重要性，设计师应该快速学习动效设计，提升自身的核心竞争力。
如果重新审视10年前的网页和移动端应用的话，你会发现动效和动画在这个时期简直是犯规一般的存在：浏览器和硬件设备吃不消，它们根本无法成为设计最佳实践。

十年前你所能看到的动画和动效，通常是使用Flash实现，或者短暂的存在于d出框和闪烁的按钮特效中。但是情况在最近的几年出现了巨大的转变，iOS和Android 设备的大规模普及，移动端芯片的性能提升，让设计师在移动端APP上实现多样的动画和动效，成为了可能，而今天， 动画和动效已经成为了如今UI和UX设计当中，最重要的组成部分之一。

动效设计，顾名思义即动态效果的设计，用户界面上所有运动的效果，也可以视其为界面设计（UI design）与动态设计（motion design）的交集。合理的动效可以帮助引导、取悦用户，减少等待时间，更能增加产品识别度。 让用户更爽的用产品。
首先要讲到motion graphic（动态图形设计），在长时间的历史演变中，MG常见的应用是片头片尾，在TVC广告末尾的标志动画，以及电视包装当中常用的Logo演绎，ID呼号，角标等等。
而随着行业的不断发展，MG涉及的领域也开始细分，越来越多的从业人员从、电视这些传统的领域向其他新媒体迁移，这其中就包括互联网行业。
作为多学科交集的界面动效，其设计者可以交互，也可以是UI，甚至很多时候是前端开发直接完成的。 很多比较完整的设计团队，专门招的动效设计师，除了做界面动效外，还会做与产品推广相关的motion graphi。
本质上， 动效设计（Motion Design）是因为整个用户体验行业的发展而细分出来的设计门类。

界面动效（UI motion）区别于motion graphic 最大的差别， 就是界面动效需要以用户体验与界面设计为大前提，来进行动效设计。
界面动效在设计师设计完成后，需要开发实现才能与用户见面。而不像MG动画，直接由设计师输出。

合适的设计才是好设计，合适才好!合适就好!只有合适的设计没有完美的设计。今天带给大家的是LOGO设计中的常见套路，下面就为大家一一解锁。
本文知识总结：

A、设计前先确定LOGO类型(两种类型的LOGO讲解);

B、设计先于思考(深入挖掘信息不要停在表面做设计);

C、LOGO实战篇(前面两个是理论，不想看理论的可以直接跳到第三点“设计篇”);

D、头脑风暴，灵感收集整理;

E、点子组合和筛选;

F、初稿呈现;

G、提案包装(让客户看见未来);

H、细节优化;

一、 确定LOGO的风格

开始设计之前，先与客户沟通，拿几个案例给客户选择，问问他喜欢什么类型的LOGO，不同风格的LOGO，表现的侧重点不同，分析思路也会有所差异。

根据个人总结，我们平常常见的LOGO有以下几类：(今天主要是介绍LOGO设计的分析思路，这里就只简单的介绍一下LOGO的几种常见的类型)。

1字体LOGO

a字体标志的特点

我们对文字的理解和记忆高于对图形，字体标志最重要特点就是高度的辨识性与可读性，也许在这个同类信息爆炸年代，字体标志更具有实效性，既能够准确清晰的传达品牌理念，同时又方便品牌宣传。

b品牌商标注册时通过几率较大

现在简约的商标越来越难注册，图形商标非常容易撞车，文字性的品牌标志设计更加具有可靠性，而文字性的商标则很容易检索，大大的提高标志通过商标注册的机会。(下面来欣赏一下字体LOGO，可口可乐就是典型的案例，直观明了方便记忆)

2图形LOGO(具象图形和抽象图形)

a具象LOGO

使用直接与公司类型相关的图形或用具体的某种物象来表现，比如天猫、京东、国美、QQ企鹅等就是具象型动物LOGO。对现实对象进行提炼、概括、浓缩、简化，突出或夸张其形态特征，突出其精神气质。

具象的标志和字体标志一样具有通俗性与高度的辨识性,清新、明快的视觉形象传达出企业的精神和理念。

b抽象LOGO

这类LOGO最为常见，它突破了具象logo的束缚，在设计与构思上有较大的发挥余地，相比前面两种LOGO在理解上易于产生不确定性。抽象LOGO表现形式是以抽象的图形符号来表达标志的含义,以几何图形或符号为表

现形式。(抽象LOGO欣赏，微信LOGO、陌陌LOGO)

二、设计先于思考

1客户诉求是什么他/她为什么要做LOGO

作为商业设计师，客户就是上帝，一切都要以客户为主，除非你的设计风格本身符合客户要求或者你是大神级别的人，客户才有可能听你的。多去了解客户做LOGO的目的，是品牌升级，还是想创建一个品牌，有的客户自己都没搞清楚为什么要做LOGO。

'我有一个设计师朋友，他上次给我说他遇见一个奇葩的客户，客户说他看见旁边的餐馆做了一个LOGO后生意突然就好了，所以我也要设计一个高大上的LOGO，遇见这样的客户诉求是一种什么样体验'

2深入挖掘，不要停留在表面。

初步了解客户诉求后设计师需要进一步挖据，获得更深层层次的见解，这一步主要是跟需求方不断的去沟通和了解，一般客户认定的事情很难推翻，所以需要让客户合理的参与到设计中来，引导客户，选择正确的设计方向。

可以从以下几个方面去提问，当然这要看情况，这不是标准答案。

a 企业的蓝图是怎样的目标是什么(一定要深问);

b 该服务或产品的特点有哪些比如，产品/企业特色是什么;

c市场/行业情况怎么样未来的发展趋势(这个问题可以自己去找资料);

d 跟竞争对手相比核心竞争力在哪里

e企业核心理念是什么

为什么别人做一个LOGO就是几百万，那是因为别人可能要花几个月的时间做市场调研、用户群体分析和品牌定位，你说能不贵吗

!!!!!!!不要走开前方高能，干货才开始。!!!!!!!!

三、设计篇

听了几次讲座，看了很多设计大神分享的文章，每次听课都想吸收更多新的设计技巧和方法，后来看多了才发现，设计无非用到的都是大家熟悉的那些基础方法，(头脑风暴就是其中一种，还有创意联想等)，把基础的设计方法用透，也能达到新高度，头脑风暴就是其中一种常用的设计方法。

1头晕风暴(孵化概念)

一般我们拿到项目的时候就要时时刻记录灵感元素，整个团队开始头脑风暴，这种时候就不要限制思维，随便想吧，任何想象都可以，做奶茶的项目从齐天大圣想到卖火柴的小女孩都没问题，这个时候拒绝没有想法，做设计难得可以让你有天马行空的时候，尽情的想吧、跳跃吧!头脑风暴不仅适合团队也适合个人。

2灵感收集

很多时候我们拿到项目时都不知道怎么下手，这个时候在头脑风暴的同时还要去去网上找找灵感，多看看别人的设计和设计思路，在观看的时候拿一支笔，有好的灵感和值得借鉴的地方记录下来。(附上：我平时找灵感用到的网址，国内的大家都知道，站酷、优设、花瓣这三个网站不用说设计师必备，国外的有logospire

logopond，这是我常去的地方，还有 标志情报局

它每天都会分享公司换LOGO和发布LOGO的动态，可以看看这些大公司或专业设计公司设计的LOGO，找找设计方法和思路)

还有很多这样的网站，大家自己去找找看，有更好的可以再下面留言区，分享给大家一起观摩观摩，当然不是越多越好用好三四个就足够你学习了。

3点子组合和筛选

头脑风暴想了一堆的点子，现在开始自由组合和筛选，这时候需要非常理性的选择方案，把那些天马行空不能实施的方案PASS掉，选出符合客户的需求的方案，记住一个重要的原则，“我们做设计不是给客户看的而是给客户的客户看的”，很多时候我们都忽略了这个细节，谨记差异化和合理化。

总结：以上三点可以用一句话来说清楚：1分析产品和企业核心理念，提取出关键词;2找到关键点，就好比给你一个支点你可以撬动地球一样;3尽可能的脑爆想出更多的方案;4筛选最巧妙的符合产品定位和客户需求的方案。(坑，能用一句话说完，干嘛写这么多)

就拿飞猪来举例，这个LOG做的也是非常好的。

4初稿呈现

在上面的头脑风暴过程中相信你已经画了很多草图，接下来就是撸图时间(总算可以打开软件撸图憋死我了)，拿出你的右手握住鼠标疯狂的动起来吧!一开始最好以单色方式表现LOGO，以免因色彩对图形本身的判断产生影响。

5初步延展，制作提案

做好初稿就给客户看，很难打动客户(就一个LOGO还这么小，你要我看什么)，所以与其一次出多个稿件，还不如包装一两个方案，(让客户看见LOGO在实际应用中是什么样的，让他看见未来!)，如果你会做动效LOGO那么做一个，客户看后会觉得你的设计好屌!有木有屌屌的感觉!当然前提是你的设计本身就很好，你做一个50块的LOGO，再怎么包装也没用，客户只会告诉你，你的效果图做的不错，LOGO还要仔细斟酌，言外之意就是装逼装不错。

重点：提案要有逻辑，要有观赏体验，用心做提案。

6修改 +精细化处理

客户确定方案后多半会叫你修改的，不要想着客户确定方案后就万事大吉了，魔鬼般的折磨从这里才开始，好好享受被虐的过程吧!不被虐怎么会有成长，是吧!其实没我说的这么恐怖，多沟通能解决一切事情。

资源地址: >今天与大家分享下这几种风格的设计思路，以及需要注意的点。从以下3个方面去解析图标的流行画法！分享大纲：1层叠手法2图标图形化3单色弱渐变透明图标 层叠手法顾名思义图标之间有纵深前后关系，通过这样去处理，可以让图标层次丰富，增加设计细节，打破枯燥无味的单色扁平图标。通常大部分人设计一个图标就直接将图形画出来后，这样就完事了，没有继续深入下去。这样图标看着枯燥乏味，普通了一些。如上图，将图标在接口处进行细节弱透明度处理，那么效果就完全不一样了。 这里需要注意，一般都是在图标的接口处进行层叠处理，从A到B的一个线性渐变。下面来看看案例：Atlassian的品牌图标系统 使用建议：运用在面形图标效果会更好些，或者线条粗一些的图标，一般运用在TabBar上面居多。 图标图形化这种比较好用，将图标进行抽象放大化处理，变成一种图形方式。一般运用在卡片设计上面居多。 左侧卡片上面，图标直接使用描边效果。卡片里面虽然加了一些底纹图形，但是整体效果略显平庸了一些 。重新将图标进行图形化处理，既能够表达当前含义，同时设计上细节和品质感有所提升。 其他思路延展示例：当然还有一种类似的思路，可以将图标进行放大化，并进行色彩分割处理为背景，前景放图标和文案等。如图，我将前面两个思路综合运用，图形化背景和层叠图标。这里的图形希望大家不要乱用，尽量使用图标的图形来演变。 单色弱渐变透明图标图标通过弱渐变透明处理，其思路有点类似第一个。但是这个方法图标整体带透明度的范围更大。先来直接看个案例：这种图标给人比较新颖的时尚感，层次也丰富。如何处理这种图标？非常重要的一点，需要注意不识别度问题。如左侧图，图标和背景之间几乎融为一体，看不清主体元素。右侧处理刚好，能够识别出图标含义。处理时候一定要注意透明度的关系，当然也与卡片背景色有关系。 写在最后关于图标设计三个小技巧，可多看几遍，思路比较简单直接。当然最重要的是灵活运用，也可以将三个思路都融合起来去设计图标。本文只是抛砖引玉，这些图标处理的技法，并不是能适用所有场景。大家还是需要根据自己产品特征，找到合适的突破点去设计。

不管是线上还是线下实体，创业的第一步往往是创建自己的品牌标志。在这个网站，你只需要输入品牌名字，网站会根据你的品牌特质和行业属性自动生成上百套logo设计方案，你可以选择喜欢的方案进行二次编辑，调整字体、颜色等。

NO1LOGO神器，自己搞定创业品牌logo设计

不用担心是否可以实际使用，它会直接生成一套logo设计方案，包括字体规范、颜色规范、配套的PPT模板、WORD模板以及整套品牌VI。

NO2犸良，零基础也能轻松做酷炫动效

动图是大家很喜欢的一种视觉呈现形式，在商业场景中会有很不错的效果，但是大部分人觉得动效制作非常复杂而不敢尝试。

NO3赤菟，支付宝智能物料设计

阿里出品，是一个让零基础也可以做酷炫动效图的网站，基于动效库和素材库快速生成一个通用动效创意，你只需要简单地编辑、颜色或者文字即可。重点是支持：全平台iOS、Android、H5、小程序。

NO4MAKA，提供全场景营销设计模板

同样是阿里出品，随着线上支付的普及，支付宝开发了一个不同场景、不同样式的物料智能设计平台，不管你是在餐饮店使用的付款码还是横幅banner，在这里都能够在线实现。

NO5稿定设计，海量优质模板和高效工具

其实做营销海报的设计工具很多，推荐这款给大家，我是觉得无论是模板的丰富度还是整个产品的设计都是非常不错，并且网站还支持“一键抠图”功能，对于不会ps的同学非常友好。稿定设计，前身是天天向商，在模板质量方面，这家是做的最优质和全面的，并且免费商用下载。这家网站还隐藏了许多好用的小工具，比如在线ps、在线拼图、智能抠图、淘宝装修、代码布局等等，值得去试一试～

电脑上制作logo设计软件有：

1、CorelDRAW

CorelDRAW是一款专业的矢量绘图软件，该软件是Corel公司推出的矢量图形制作工具，其完善的内容环境和强大的平面设计功能为设计师提供充分的施展舞台，是矢量绘图、版面设计、网站设计和位图编辑等方面的神奇利器。

2、Adobe Illustrator CC

illustrator是一个高级矢量程序，使用起来也很简单直观。从创建简单的单色设计到更复杂的3D样式LOGO，illustrator都可以轻松处理。是众多设计师必不可少的设计工具之一。

3、Logofree LOGO在线制作

LogoFree是一个简单易用的免费LOGO在线制作平台，只需两分钟，就可以设计精美的LOGO，一站式的LOGO设计在线生成就这么简单，而且免费下载。

4、硕思Logo设计师

硕思Logo设计师是一款 *** 作灵活简单，且功能强大的logo制作软件。它可以通过简单的点击就可以为网站、博客、论坛和邮件创建专业的logo、条幅、按钮、标题、图标和签名等。

该软件提供了很多精心设计的模板和丰富的资源，为更好地创建logo艺术作品，用户可以导入并将SWF反编译到应用。

5、Photoshop

Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

一、平面设计

1

Krita 是一个免费开源绘图工具，是专门为概念艺术家、插图作者、粗面纹理艺术家，和视觉特效行业而设计的。Krita 已经开发了超过10年之久，它提供很多通常和创新性的功能特性来帮助新手和专业人士。

2

MyPaint 是一个图像绘画程序，它支持的压力敏感的绘图板，并配备了一个易于使用的刷子收集。有一个复杂的接口，用于创建自己的画笔，把重点放在刷动力学（变化的速度，压力，或随机） 。画布的大小是无限的，并撤消和层的支持。

建筑设计

1

AutoCAD，方案设计、文件交换方面较方便，尤其是和老外打交道的时候，但是不推荐新版本，07、08版足够了，如果需要交换文件使用，至少在保存的时候尽量设置为低版本，比如R14。

室内设计

1

CorelDraw，设计LOGO也很适合这个软件。CorelDRAW Graphics Suite是加拿大Corel公司的平面设计软件；该软件是Corel公司出品的矢量图形制作工具软件，这个图形工具给设计师提供了矢量动画、页面设计、网站制作、位图编辑和网页动画等多种功。

2

推荐C4D，如果没有接触过任何三维软件的话，C4D就足够应付三维字体效果制作了，而且上手简单也好学。

3

如果你能有一定的3D基础反而我推荐你直接用PHOTOSHOP即可，起码CS6这个版本的3D功能已经相当强大了，完全不需要任何三维软件就可以做出非常漂亮的三维效果，甚至 *** 作也比较简单。

UI设计

1

PS可以在UI设计中，绘制界面设计，图标设计等。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及Adobe家族的顶梁设计软件、想从事设计工作PS软件一定要精通，PS的强大，只有你想不到没有它做不出的图。

2

AE CC 2018（最新版本）在UI设计中AE主要用制作交互动效图，AE可以用来从事影视后期， 平面设计，UI设计等多种设计工作。

APP发现页面数据量大，需设计一个加载动效，提升用户体验。

1、 商业价值 （通过加载动效更好地吸引用户注意力，提升用户对内容的点击探索欲，提升阅读量）

2、 用户体验价值 （帮助用户理解当前所在的位置，缓解用户的等待情绪，促进用户体验）

3、 遵循原则 （动效应该是自然、和谐、可用的）

①物理规律：应该符合现实世界的真实物理效果，努力模仿自然界的物理运动

②品牌调性：应与整个产品的定位、风格相一致

③可用性：不能给用户错误的引导信息，影响用户的 *** 作

4、 设计关键点： 能否给用户直观的解释当前的位置，动效的趣味性，与发现页面的匹配

5、 实现交付 （动效是可实现的，应随时与开发人员沟通，保证动效的高度还原）

1、调研分析

查看大量学习、教育类APP的加载动效

在查看了今日头条、沪江网校、微信读书等APP之后，分析得出常见加载动效一共分为三种类型：

① 安卓、iOS原生动效

② 品牌logo

③个性化设计

因品牌logo在下拉刷新已用过，加载页面时间较长不适合原生动效，故选择个性化设计

2、创意

设计夹是学习类的APP，之前设计内容加载动效为书本翻页，发现页面为内容的上一页面，是许多成套的系统化内容，动效需保持与课程内容页面的关联性。

创意联想：

（书本 - 内容 - 笔记 - 资料 - 知识文件夹）

使用场景分析： 用户打开发现页面，显示许多套系统化的知识内容。

一套内容 - 一个文件夹

多套内容 - 多个文件夹

成套的内容源源不断的向你输送而来（一个个文件夹向你输送而来）
由于开发成本的问题，此次设计采用了gif图实现效果。

切图只需要动效的部分即可，需保证动效在界面的中心位置。

Thanks

---