《新媒体运营》第2版 课件 2.3.2 视觉设计的基本原则

项目2微信公众号运营任务2.3微信公众号的视觉设计新媒体运营2.3.2视觉设计的基本原则1.统一

统一是指版面中所有部分——特别是每个与设计中其他部分相关的独立元素——全面的凝聚和结合。许多品牌都会花大量的金钱和精力，打造视觉识别系统（VI），在新媒体视觉设计中，视觉识别系统基本要素是指Logo、封面、品牌标语、标题、二维码、海报等。新媒体品牌同样也应该有视觉识别系统。二维码封面标准字：郑庆科黄油体标准色：#ab1942辅助色：#595959字号：15号&12号正文2.3.2视觉设计的基本原则1.统一（1）风格统一

艺术家MarcoMarilungo用漫画的形式将人类艺术史上最主要的16种风格生动形象地展现了出来。现实主义印象主义野兽派新艺术运动表现主义立体主义未来主义抽象主义达达主义至上主义形而上主义超现实主义非正式艺术波普艺术极简主义观念主义2.3.2视觉设计的基本原则1.统一（1）风格统一：插画风格2.3.2视觉设计的基本原则1.统一（1）风格统一：手绘风格2.3.2视觉设计的基本原则1.统一（1）风格统一：极简风格2.3.2视觉设计的基本原则1.统一（1）风格统一：极简风格2.3.2视觉设计的基本原则1.统一（2）色调统一在12色色环中，从红色顺时针旋转到黄色的区域属于暖色，相对的部分属于冷色。2.3.2视觉设计的基本原则1.统一（2）色调统一暖色在自然界中常见于阳光、火焰、血液等，让人感觉到温暖和活力。对应的关键词有感性、欢乐、喧闹、热情、女性化等。比如，情感类自媒体，大都是以红、黄等为主的暖色系，HUGO的主色彩偏冷，但在封面中用了红、黄等暖色调和：2.3.2视觉设计的基本原则1.统一（2）色调统一主打女性用户的时尚类自媒体也非常喜欢红色：2.3.2视觉设计的基本原则1.统一（2）色调统一同样的选色逻辑在美妆类自媒体中也适合：2.3.2视觉设计的基本原则1.统一（2）色调统一冷色在自然界中常见于海洋、天空、植物等，让人感觉到清新和宁静。对应的关键词有理性、自然、安静、内敛、男性化等。比如，金融理财类自媒体就更适合蓝、绿等冷色系：统一原则

遵循统一原则，设计微信公众号的视觉识别系统，包括但不限于：Logo封面品牌标语标题二维码2.3.2视觉设计的基本原则2.平衡平衡的本质是让一条平衡轴两侧的重量保持平衡。2.3.2视觉设计的基本原则2.平衡平衡分为对称平衡和非对称平衡。对称平衡非对称平衡2.3.2视觉设计的基本原则（1）对称平衡2.3.2视觉设计的基本原则（1）对称平衡左图：公众号24HOURS封面；右图：公众号新世相封面2.3.2视觉设计的基本原则（1）对称平衡居中对齐居中对齐2.3.2视觉设计的基本原则（1）对称平衡两端对齐2.3.2视觉设计的基本原则（2）非对称平衡2.3.2视觉设计的基本原则（2）非对称平衡图片注释右对齐作者介绍右对齐2.3.2视觉设计的基本原则（2）非对称平衡左：HUGO，右：深夜发媸2.3.2视觉设计的基本原则（2）非对称平衡左：24HOURS，右：十点读书平衡原则（个人讨论）判断下面设计作品（图1，图2，图3）是对称平衡还是非对称平衡。请将答案写在讨论区。图1图2图32.3.2视觉设计的基本原则3.秩序

版面设计最理想的效果，就是可以让读者将版面全部内容读完。但通常情况下，这是很难实现的，因为读者的注意力很难集中，常常会跳跃式阅读。为了避免这一点，需要创造合理的“视线流”，引导读者循序渐进地阅读。视线流包括静态和动态两种。2.3.2视觉设计的基本原则3.秩序（1）静态视线流：从左到右

从左到右移动视线，是我们在纸媒时代保留下来的习惯，在很长的一段时期内，我们还是会保留这个习惯。新媒体主要在移动端的展示，横向空间有限，没有很大的发挥空间，但使用秀米编辑器实现首字下沉，可以使用户在从左到右移动视线时更容易找到起点。2.3.2视觉设计的基本原则3.秩序

大多数媒体都是以自上而下的视觉引导为基础来进行版式设计的，新媒体尤其明显，因为新媒体以手机端展示为主，左右的移动空间受限，但上下移动的空间不受限制，发挥空间很大。比如，微信公众号局部气候调查组以长图为主要展示形式，无论是图片还是文字，都遵循从上到下移动的秩序，因为是完整、连续的长图，所以读者在从上到下移动视线时非常顺畅，不会被打断，可以获得非常好的阅读体验。（1）静态视线流：从上到下2.3.2视觉设计的基本原则3.秩序

在前面的平衡原则中已经讲过，大的物体会比小的物体拥有更大的视觉比重，所以，读者的视线大部分情况下是从大到小移动，我们应该将重要的信息尽量放大。比如，通常情况下，我们会把标题放大，把重要的图片放大，都是遵循了视线从大到小移动的规律。（1）静态视线流：从大到小2.3.2视觉设计的基本原则3.秩序

人们的目光习惯向相同形状或颜色的物体移动。实现这种移动最常见的方法就是使用统一的项目符号。比如说，这样的项目符号，你看完一项，会自然地跳转到下一项。（1）静态视线流：向相似物体移动2.3.2视觉设计的基本原则3.秩序

在人类文明中，对文明有巨大推动作用的，当属文字。文字是从象形文字逐步演变而来，但在多年的演变过程中，箭头的形状却从未改变。箭头的出现，是因为古希腊毕达哥拉斯学派和柏拉图认为眼睛在捕捉物体时，视线、目光和力量，会以物体为目标从眼睛向物体方向传送，当把这一想法用图形来表示时，箭头就诞生了。（1）静态视线流：向箭头方向移动2.3.2视觉设计的基本原则3.秩序

动态视线流是指用运动物体来引导视线，比较经典的应用是苹果官方公众号的推文《你不知道的Apple》，其中使用了移动的叶子引导视线。（2）动态视线流2.3.2视觉设计的基本原则4.对比

对比的目的主要有2个，一个是打破统一的版面设计，增强视觉效果。比如，差不多的两个拳头放在一起时，画面很平淡，因为只存在方向的对比：但如果是一个老人的拳头和一个小孩的拳头出现在同一画面，视觉效果就会强烈很多，因为同时存在方向、大小、糙嫩3种类型的对比。2.3.2视觉设计的基本原则4.对比

对比的另一个目的是组织信息逻辑。完全统一的版面无法有效阅读，只有通过对比，读者才能对信息逻辑一目了然，对比越强烈，信息逻辑就越清晰。比如，一篇文章一般由标题、小标题、正文组成，如果标题和正文间的对比不够强烈，就很难一眼看出文章的逻辑，比如下面左图中，只有文字大小的对比，小标题就不够显眼，辨识较困难，如果加强对比，增加粗细和颜色的对比，改成右图的样式，对比就非常鲜明了，信息逻辑也就一目了然。2.3.2视觉设计的基本原则4.对比

（1）方向的对比2.3.2视觉设计的基本原则4.对比

公众号HomeFacialPro的排版中也采用了这种方向的对比，标题部分采用纵向布局，正文部分横向排列，整体视觉效果非常灵动。（1）方向的对比2.3.2视觉设计的基本原则4.对比

公众号Voicer中的部分插图也使用了横向和纵向文字的对比，并增加了动态效果，进一步强化了对比。（1）方向的对比2.3.2视觉设计的基本原则4.对比

（2）形状的对比大VS小几何VS有机2.3.2视觉设计的基本原则4.对比

（3）色彩的对比

色彩的对比方案非常丰富，最为典型的有暖色和冷色的对比、亮色和暗色的对比、互补色对比等等。一般来说，色轮的右上方是暖色，左下方为冷色。暖色给人的印象：生动、激情、有表现力，给人感觉在空间的位置靠前。适用于前景色。冷色给人的印象：谨慎、冷静、平静感，给人感觉在空间的位置靠后。适用于背景色。2.3.2视觉设计的基本原则4.对比

（3）色彩的对比冷暖色对比明暗色对比2.3.2视觉设计的基本原则4.对比（4）字体的对比西方国家字母体系分为两类：衬线字体（serif）以及无衬线体（sansserif）。衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。常用的衬线字体为TimesNewRoman、Georgia、宋体。无衬线体是无衬线字体，没有这些额外的装饰，而且笔画的粗细差不多。常用的无衬线字体为Verdana、Arial、黑体。2.3.2视觉设计的基本原则4.对比

（4）字体的对比思考：下面的字体属于非衬线体还是衬线体？2.3.2视觉设计的基本原则4.对比

（4）字体的对比

根据经验，最好选择一种衬线字体和一种非衬线字体来设置对比，因为通常来说，互补的两种元素会产生很好的对比效果。右图logo中非衬线体和衬线体，以及书写体的对比完美平衡了整个设计。2.3.2视觉设计的基本原则4.对比

（5）图文的对比

图片和文字的视觉重量是不