苏州上元教育培训中心

初学者怎么学好平面设计

一，有一个好的老师，不管这个老师是人，抑或是书本。

一个好的老师，可以让你少走很多弯路，用**短的时间，**快的速度学会你 想要的东西。可惜的是，现在的书大部分都是为了商业利益，为了自身的利益而出，真正为读者考虑，真正有水平有内容的书，太少太少。随便翻看市 面上的一个平面设计书，除了工具书，就是例子书。

二，要有很强的学习目的性。

学摄影的，就要学会如何处理照片，学会如何构图，如何平衡色调，如何打 光，如何体现层次感，如何进行照片的合成等等。学商业美术的，就要多学软件在商业中的具体应用实例，多做商业包装，商业广告，POP，海报。学 插图CG设计的，就要掌握如何勾勒人物，如何上色，如何体现层次，如何丰富人物表情，如何渲染气氛与意境。

三，勤学苦练是基础。

许多人有一种急功近利的心态。刚开始接触，就“眼高手低”（看到人家好 的作品，就想做出人家的那种效果），有目标有想法是好的，但没掌握基础的东西，一步登天是很难的。多模仿别人的一些优秀作品，先想办法做得和 他们的一模一样，只有这样，说明你的技巧到家了。

四，悟性与积累并重。

学艺术性的东西，需要灵性。有悟性的人一点就通。这一点需要一点天份。 百分之99的努力，外加百分之一的天赋，就成了设计天才。但这百分之一是**重要的。

如果不幸没有这种天份，也不用担心，悟性也是可以培养的。多与大自然接 触，就会给你很多的灵感，赋予你灵气。其次，多接触一些美的东西，像一些艺术品，雕塑，音乐等等。等到有了一定的积累，那时候你的思维就可以 天马行空，任你驰骋了。

五，那就是伟大的IDEA了。好的创意是一个好的作品的灵魂。

在依葫芦画瓢之后，你的技巧已经纯熟了。那你就需要有自己的东西了。你 要开始创作属于自己的作品。可以首先设计自己的签名开始，进一步做自己的名片，设计自己的VI，整合自己的公司或工作室，呵呵，这样你就会积累 一些成就感。

学任何东西，重要的是要体会到成就感，有成就感，动力就会越足。从而形 成良性循环。

高级平面（广告）设计师课程

高级平面（广告）设计师课程介绍：

平面设计师除了学习平面设计软件课程以外，还将接触大量的概念知 识、平面术语、绘画能力，色 彩搭配方案以及客户沟 通技巧，布局、颜色、文案等。理论结合实际操作的学习过程，老师提供的综合案例，需要我们从无到有制作一套或几套自己的VI作品、包装设计作一个阶段专业知识的学习！平面广 告设计师这门课程结束了专业和不专业也将立见高下。

学习内容：

Photoshop图像处理；Coreldraw图形设计、Illustrator矢量绘图、Indegin 排版软件、AutoCAD制图绘图、3DMAX三维设计师；平面设计原理 ；平面构成、立体构成、色 彩构成的基础知识；印 前与喷绘；创意素描、平面创意设计；平 面设计项目实战；电脑 美术基础、素描、色彩 、透视原理、造型结构等。

课程收益：

**系统、全面、深入、专业的学习，让学生强化理论基础，精通电脑操作 ，提高沟通能力。培养具备较高综合素质和技能的平面设计师， 使学员掌握平面设计不同职位需求的专业设计技能，并具 备独立完成各种设计项目的能力。

招生对象：

电脑爱好者，对计算机感兴趣，有志于从事设计行业的各界人士；初、高中 以上学历；无任何计算机或美 术基础（不要求学员具 有美术基础）。

就业方向：

平面广告创意师；平面设计师；平面创意师，平面制作；喷绘人员；视觉创意设计师；广告公司、会展中心广告设计师和制作师；企 事业单位形象设计师。报纸、杂志、出版等大众传播 媒体美编人员，各大商场、超市企划部，各企业宣传部、包装公司产品包装设计、产品外观设计美工；印刷制版公司、排版师、设计师等专业人才：印前制作师、排版人员；输出公司制版员；影楼影集册 设计师、淘宝平面美工设计，淘宝网店设计等；企业宣传策划部门的设计助理、平面设计师、资深设计师、美术指导、 设计总监等相关平面设计职业。

学习周期：按校区安排而定（以班级安排为标准）

使用教材：统编教材

上课时间：每月开设白班、晚班、周六班、周日班

老师资质：专业教师

学习保障：课程体系完善，讲师教学经验丰富

腾讯精品文！超多干货的UI界面动效设计指南

---

编者按：腾讯同学的教程一向都是良心之作，今天这篇长文收罗了常见的UI动效设计方法，不仅有案例，而且分析透彻入微，从表现形式到动效的作用，对用户产生的影响，都有全面专业的解说。今年动效也是一大热门，想自我提升的同学可以放手来学习了。

概要

xavieryuan：UI是基于静态页面来设计的，页面之间**跳转切换。在设计过程中，设计师很重视单页的视觉效果，却经常忽略了对界面跳转的处理。这些未经处理的跳转由于没有提供足够的预期，所以用户在使用时经常会觉得困惑。与此相反，在卡通领域，由于使用了足够的动画效果，用户可以非常容易理解某个动作，即使夸张的动作也没问题。

尽管UI设计和卡通动效之间存在差异：卡通更侧重于娱乐，而用户界面却是严谨的互动式工具。但是我们还是可以借鉴卡通动效的优点，从情感和认知层面上将两者的优势相结合。

Keywords：UI、动画效果、卡通。

1. UI界面 VS 卡通

大家都知道，UI界面一般都是基于静态页面来设计 —— 无数个页面组成了一个软件。通常情况下，视觉设计师直接开始设计静态页面，几乎不考虑它们之间如何切换。由于用户对界面之间的关联没有预期，所以他们经常会受到惊吓。用户苦思冥想，想了解界面之间到底发生了什么。

（我们的app都是由很多页面组成的，由于用户对界面之间的关联没有预期，所以经常会受到惊吓或者感到困惑。图片来自：http://designbeep.com）

当用户感知不到页面之间的关系时，就说明页面之间的因果关系不够清晰。让用户理解页面之间的关系至关重要，这直接关系到操作效率。在没有辅助解释的的情况下，用户只能**经验去理解。这是一个非常有挫折感的体验。

举例来说，在Windows中，如果我们的任务是：打开“我的电脑”中的D盘，那流程是这样的：

1.双击“计算机”图标；
2.图标扩展成一个窗口；
3.在窗口中选择D盘。

在这种情况下，**步的元素是图标，第二步元素是扩展的窗口。界面之间的跳转是非常突然且直接，且没有前后关联。如果用户**次使用Windows，这样的界面跳转需要理解一阵子。

（在Windows中，图标和窗口之间的跳转十分直接，如果**次Windows使用会让用户很困惑）

用户往往**经验来克服这些问题。前几次的体验是**糟糕的; **终用户学习了“机器的行为“才能有效地与它进行交互。尽管这些界面的认知可以**反复使用来提高，但认知负担依然沉重。例如，用户知道点击图标将打开一个窗口，但是突然的变化（突然从图标变成窗口）也会让用户迟疑。

卡通中的动画效果，非常擅长于提供足够的信息让观众理解。动画中一些令人费解的行为没有让用户感到困惑；动画人物并不会突然消失，突然出现；动画在发生形状变化时非常自然。

动画提供了必要的视觉线索，让人理解某个动作前后发生了什么。不像UI一样认知沉重并非常依赖经验，且还将理解界面的责任的归咎于用户。动画利用真实的动作来展示对象变形，让人更加容易理解。

从认知和情感两个角度来说，将动画融入到界面切换中是有好处的。**对系统的解释，动画允许用户持续的思考一个任务，而无需回想之前的操作。由于没有突然的视觉变化，动画降低了用户被UI界面吓到的机会，从而减少了不安全感。因此，使用动画不仅有助于用户理解界面，提高使用效率。而且还使界面的体验更愉快更舒适。

2.在UI界面中使用动画的几个方法

多年来，动画师们已经研究出了很多动画设计的方法。这里选择一些同时符合UI和动画的设计原则，同时展示了如何在UI设计中应用。

我们从3个维度来讨论，分别是：拟物化，夸张和增强现实。本节提到的所有动画设计原则都来自Disney 《Animation: The Illusion of Life》。

2.1 拟物化

把UI中的元素当作真实的，有重量的物体。在动画片中，人物和元素都是真实的，有重量的物体。他们每次走动都好像是生活在真实世界中一样，这种感觉非常真实。这种拟物感不仅仅是填充一个像素区域那么简单，这些物件的运动是**增加惯性来实现的。动画的所有的原则，例如：慢进慢出，跟随，和弧形运动，其随后所有的讨论，都是基于这个原则，他们是有质量的物体。

（所有元素是有重量的物体。这是所有的运动的基础。图片来自：https://medium.com）

把UI界面中的元素变成独立的，区别于背景的物体，并让其拥有动作惯性是非常重要的。在UI界面中，元素应该被绘制为一个在三维中的对象，用户可以连续并稳定的操作他们。

光是把一个元素拟物化还远远不够，性能优化也是必须的。为了保持移动的假象，对象在运动时，帧速率必须够高（当动画达到每秒24帧时，人眼看到是正常速度的运动）。由于性能下降可能导致移动延迟，从而造成卡顿的现象。这样用户容易分心，体验就会折损。

2.1.1 拟物化的方法一：运动模糊

拟物化和无卡顿只是**基本的需求。如果用户大幅移动一个对象，例如从屏幕左侧跨越到右侧。由于视觉停留效应，用户在屏幕上会看到2个以上的对象。眼睛呈现两个短暂对象也被称为视觉暂留效应。

动画设计师面临这个问题时，使用了一个经验法则：如果一个物体移动超过物体本身一半的大小（或者更大）的任何两帧之间，加入运动模糊效果。使用运动模糊填补旧新位置之间的间隙，让眼睛更能接受物体的移动。虽然涉及到抗锯齿的问题，但运动模糊确实是一个低成本的解决方案。

（在Windows中，鼠标指针可以设置成运动模糊，方便用户去追踪鼠标指针）

动画师发现，有两种不同的运动模糊方式可以使用。**简单的就是使用半透明的条纹。这种条纹就像尾巴一样跟随在图标后，使用透明条纹来模拟现实的物理作用，并产生非常逼真的效果。另一方式是在单个帧中插入多个图像。例如，手臂迅速来回摆动时，单个帧显示多个手臂，每个手臂在不同的位置呈现。这种技术可以有效提高帧速率，并且很有说服力。

（运动模糊的全部帧效果，可以**每帧展示多个竖线来达到提高帧数的效果）

运动模糊的效果表明：运动不仅是一系列的静止图像的集合。它会给用户一个模糊的线索。这种感知来源于人的视觉系统的工作原理。卡通动画师经常使用运动模糊，即使只是粗略进行运动模糊的渲染，也足以打造一种快速运动的幻觉。在App设计中，由于手机尺寸的限制，一般不会出现超远距离的拖动，但是在大屏幕的电脑上就会遇到这个问题。

2.1.2 拟物化的方法二：出现和消失

除了移动，元素无规则的出现和消失也会造成用户困惑。在UI设计中，有三种方式展示出现消失的效果：移入，擦除，和模糊消失。他们的动作是快而连续的，给用户必要的视觉线索来理解发生了什么。

（从左到右动效依次是移入，擦除和模糊消失）

2.2 夸张

**“夸张现实”的手法，往往可以让设计达到事倍功半的效果。经过夸张手法处理的卡通表现的更现实。

例如在迪斯尼的《白雪公主的小矮人》中，小矮人是非常不写实的：他们的脸和身体都很大，他们的动作大而夸张。相比之下，只有白雪公主的比例是逼真的。相比于矮人，她更像一个真实的人。所以白雪公主这个角色，却因为更接近于现实，所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。矮人反而看起来更逼真。这种夸张的方式更加的突出了动画本身。这样的原理说明，无论是物理特征，动作特征，或四肢特征，可以**强化某些方面，让其更显著。

**这种方式，观众可以更好的去理解这些特征和动作。例如，每个小矮人和白雪公主都有一个特征，往往是和他们的名字（迟钝，脾气暴躁，打喷嚏）遥相呼应的。这些特征非常强烈，即使没有这个名字作为一个额外的线索，人们也能**每个矮人的身体特征，动作和行为等夸张行为来记住某个角色。

（白雪公主因为更接近于现实，所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。每个小矮人都有一个特征，往往是和他们的名字（迟钝，脾气暴躁，打喷嚏）遥相呼应的，而白雪公主则特征不明显。图片来自：Disney.com ）

所以，夸张的表现手法可以突出某些受到忽视的细节。在卡通中，动画师可以**夸大某个细节来引起更多的注意力。可能这些细节原本很难背察觉。

和卡通一样，UI界面必须让用户理解，并在必要时突出一些细节。采用夸张的方式，使UI界面中的某些对象可以更容易理解，更加“现实”，从而使UI界面更吸引人。

（在图片社区项目中，我们对通知使用了动效。因为通知入口属于细节，在没有通知时，只保留一个icon（上图），不吸引用户注意。当有新消息来时（下图），用动效来吸引用户注意。）

2.2.1夸张方法一：给用户足够的预期

在动作发生之前，**好给给观众一些提示。当动好，而不必对所发生的动作所惊讶。

（ Tumblr中，当鼠标移动到某一功能时，icon会跳动一下，提醒用户点击之后会有变化）

像类似预期一样的的夸张技巧，它们可以让用户更容易理解界面。他们不断的为用户解释或者暗示界面之间的继承关系。如果没有这样的线索，用户会非常难以理解这些界面。

2.3 增强现实（Reinforcement）

所有的动画技术都会增强某个现实。有些会非常极端－就像在某些动画中，角色高速移动，变成了一道光线，快速的穿过屏幕。实际上这是非常隐蔽的手法。观众不会感知到这些效果很夸张。他们只是感觉超现实。这些夸张的效果已经被精心处理，所以观众不会被这些夸张效果所困惑。本节就是探讨，**增强现实技术，用来弥补卡通与观众之间的关系，亦或者UI与使用者之间的关系。

2.3.1 增强现实方法一：缓进缓出

如前文描述，当卡通人物移动时，是非常拟物化的。 然而，这种移动并不是简单的在纸上画一些等距的角色。动画师在绘制动作时经常使用缓进缓出效果：角色缓慢的走出屏幕，接着一个快速的动作，**后的收尾动作很缓慢。这种方式有助于让角色在移动中看起来更有物理质量。此外，缓进缓出效果出现在某一个快速动作之前，有助于观看时更加舒适。如果没有它，动画中的移动会感觉很假，类似缓进缓出这种细节效果可以极大的影响一个动画的质量。

（使用缓进缓出的效果后，界面感觉更加舒适。图片来自：https://medium.com）

2.3.2 增强现实方法二：弧形运动

另一个原理也是经常运行在人的潜意识中，那就是弧形运动。相比于直线运动，对象沿在弧形运动时，他们是非直接式运动。类似于卡通中的角色。圆弧路径的运动给人一种更吸引人，更活泼的感觉，而直线运动则比较简单。

（Mac OS X中，**小化窗口使用了弧线，显得更加活泼）

2.3.3 增强现实方法三：跟随运动

增强现实的**后一个方法是跟随运动。 在现实世界中，当主物体发成运动时，与其关联的物体会做出跟随运动。 动画师们将这种观察使用在动画中，当动画中的主体物停止后，其他部分细节依然可以运动。包括了身体，衣服，和一些局部的动作处理，让其动效变的更加极致。

（iOS中，移动app位置是典型的跟随运动效果，当App插入一个新位置时，其他app位置跟着位移）

构建一个假象是一件非常脆弱的事。 一些动画的细节对**后的效果影响非常大。虽然这些动画效果如果不在卡通中使用，其实并不会破坏整体的世界观。但是加入这些效果会让动画更生动，更逼真。 **终可以让故事更容易被说服，人们也更容易理解，也更容易让用户参与其中。

3.为什么使用动画

为什么要在UI中使用动画？动画有2个特点可以解释其在UI设计中的价值。

首先，由于卡通是艺术性的，他们有超越现实的能力。这个能力可以更有效的传达信息。UI界面同样也需要明确，清晰，简洁的沟通。

其次，卡通创造了一个虚拟的世界，它非常容易让观众沉浸其中。**此方法，UI也能变的引人入胜。**动画，充分吸引用户来到它们的世界。然后让他们的注意力可以完全投入到工作中去。 让用户不要觉得他们在操作一个界面，而让他们更直接的触达任务。

4.使用UI动效的注意点

在UI界面中使用动效是有益的。但是UI并不是卡通。它们之间**重要的一个区别是：卡通是一种被动介质，而用户界面是互动式的。界面中的动效应该设计成不让用户感知到的状态（足够快，足够引人入胜，足够干净利落。使用户无意识的认识到这一点）用户可能希望在前一个动画结束之前就进行下一个操作。在这些情况下，应该给予用户**直接的控制。但是界面设计的原则仍应该利用动画技术来支持。

卡通和UI的另一个区别是他们的使用目标：卡通纯粹是享受和娱乐，而用户界面是用来完成工作的。由于工作的严谨性，需要排除漫画中的娱乐元素。卡通往往古怪且愚蠢，如果这种古怪足以让用户理解用户界面的功能，那这种古怪则可以保留。例如，动画可以用在**次打开软件时，给用户一个惊喜。**预期暗示用户操作，**这个动作给用户一些惊喜是可取的。

UI是用来完成任务的工具，动画应该尽可能的快，同时也保持其清晰度。例如把动画当作一个时尚元素使用时，动画必须要快，**快来减少用户执行和理解的时间。

5.总结

在UI中使用动效有以下几个优点：

-由于动画让用户更容易理解界面之间的关系，所以减轻了很多认知负担。
-**消除屏幕上的跳变，让界面不让用户吃惊并费解，从而让体验更加愉快。
-将物理世界的运动用在动画中，缩短了用户和界面之间的鸿沟，让用户更专注于任务而不是理解界面。

动画展示效果远远超过了静态展示，甚至比静态展示更直接的阐释了界面。动画并不一定是缓慢的，或者会分散用户注意力的东西。**悉心调整，动画可以让界面可理解，有魅力的。同时使用起来的体验是愉快的。

参考资料：

• Animation: From Cartoons to the User Interface. Published in UIST’93: User Interface Software and Technology, Atlanta, GA, November 3-5, 1993. pp. 45-55.
• A New Mobile UX Design Material. By Rachel Hinman.
• Transitional Interfaces. By Pasquale D’Silva.
• Animation Principles in UI Design: Understanding Easing. By Suresh V. Selvaraj
• Youtube Video: Designing with animation. By Pasquale D’Silva.
• Animation & Interfaces Design. By Danny Ruchtie.
• Animation: The Illusion of Life. By Disney．

?【动效神器Hype零基础入门教程系列】

先聊一下这个软件的强大功能，附上简单教程！
《Sketch神助攻！无代码做动效神器Hype3入门教程》

台湾设计师叫你用Hype做原型过场！
《无代码动效神器！教你用HYPE3做APP原型的基础过场（附神器）》

美丫姐手把手教你用Hype做Path菜单动画！
《比AE还方便！教你用HYPE无代码制作PATH扇形菜单动画》

原文地址：腾讯ISUX
作者：xavieryuan

================关于联展网================
“联展网“是国内人气**高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：****全的设计师图书导航：/book/。
设计微博：拥有粉丝量98万的@优秀网页设计 ，欢迎关注获取网页设计资源、**顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 的全拼
您也可以**扫描下方二维码快速添加：

相关推荐：

---

苏州平面设计培训   苏州平面设计培训班   苏州平面设计培训机构