1、第3章 新媒体视觉设计基本原则 目录3.13.23.33.4 3.1 统一3.1 统一统一是指版面中所有部分特别是每个与设计中其他部分相关的独立元素全面的凝聚和结合。许多品牌都会花大量的金钱和精力，打造视觉识别系统（VI），在新媒体视觉设计中，视觉识别系统基本要素是指Logo、封面、品牌标语、标题、二维码、海报等。新媒体品牌同样也应该有视觉识别系统。二维码封面标准字：郑庆科黄油体标准色：#ab1942辅助色：#595959字号：15号&12号正文3.1 统一1.风格统一 艺术家Marco Marilungo用漫画的形式将人类艺术史上最主要的16种风格生动形象地展现了出来。现实主义印象主义野兽派
2、新艺术运动表现主义立体主义未来主义抽象主义达达主义至上主义形而上主义超现实主义非正式艺术波普艺术极简主义观念主义 3.1 统一 1.风格统一（1）插画风格 3.1 统一 1.风格统一（2）手绘风格 3.1 统一 1.风格统一（3）极简风格 3.1 统一 1.风格统一（3）极简风格 3.1 统一 2.色调统一在12色色环中，从红色顺时针旋转到黄色的区域属于暖色，相对的部分属于冷色。3.1 统一 2.色调统一暖色在自然界中常见于阳光、火焰、血液等，让人感觉到温暖和活力。对应的关键词有感性、欢乐、喧闹、热情、女性化等。比如，情感类自媒体，大都是以红、黄等为主的暖色系，HUGO 的主色彩偏冷，但在封面
3、中用了红、黄等暖色调和：3.1 统一 2.色调统一主打女性用户的时尚类自媒体也非常喜欢红色：3.1 统一 2.色调统一同样的选色逻辑在美妆类自媒体中也适合：3.1 统一 2.色调统一冷色在自然界中常见于海洋、天空、植物等，让人感觉到清新和宁静。对应的关键词有理性、自然、安静、内敛、男性化等。比如，金融理财类自媒体就更适合蓝、绿等冷色系：设计实践找出销售与管理官方公众号的视觉设计中，不符合统一原则的地方，并进行改进。销售与管理品牌Logo 推送封面文末介绍 引导关注 项目符号 3.2 秩序3.2 秩序 版面设计最理想的效果，就是可以让读者将版面全部内容读完。但通常情况下，这是很难实现的，因为读者
4、的注意力很难集中，常常会跳跃式阅读。为了避免这一点，需要创造合理的“视线流”，引导读者循序渐进地阅读。视线流包括静态和动态两种。3.2 秩序 1.静态视线流：从左到右 从左到右移动视线，是我们在纸媒时代保留下来的习惯，在很长的一段时期内，我们还是会保留这个习惯。新媒体主要在移动端的展示，横向空间有限，没有很大的发挥空间，但使用秀米编辑器实现首字下沉，可以使用户在从左到右移动视线时更容易找到起点。3.2 秩序 1.静态视线流：从上到下 大多数媒体都是以自上而下的视觉引导为基础来进行版式设计的，新媒体尤其明显，因为新媒体以手机端展示为主，左右的移动空间受限，但上下移动的空间不受限制，发挥空间很大。
5、比如，微信公众号局部气候调查组以长图为主要展示形式，无论是图片还是文字，都遵循从上到下移动的秩序，因为是完整、连续的长图，所以读者在从上到下移动视线时非常顺畅，不会被打断，可以获得非常好的阅读体验。3.2 秩序 1.静态视线流：从大到小 在前面的平衡原则中已经讲过，大的物体会比小的物体拥有更大的视觉比重，所以，读者的视线大部分情况下是从大到小移动，我们应该将重要的信息尽量放大。比如，通常情况下，我们会把标题放大，把重要的图片放大，都是遵循了视线从大到小移动的规律。3.2 秩序 1.静态视线流：向相似物体移动 人们的目光习惯向相同形状或颜色的物体移动。实现这种移动最常见的方法就是使用统一的项目符
6、号。比如说，这样的项目符号，你看完一项，会自然地跳转到下一项。3.2 秩序 1.静态视线流：向箭头方向移动 在人类文明中，对文明有巨大推动作用的，当属文字。文字是从象形文字逐步演变而来，但在多年的演变过程中，箭头的形状却从未改变。箭头的出现，是因为古希腊毕达哥拉斯学派和柏拉图认为眼睛在捕捉物体时，视线、目光和力量，会以物体为目标从眼睛向物体方向传送，当把这一想法用图形来表示时，箭头就诞生了。3.2 秩序 2.动态视线流 动态视线流是指用运动物体来引导视线，比较经典的应用是苹果官方公众号的 推 文 你 不 知 道 的Apple，其中使用了移动的叶子引导视线。设计实践1.分别搜集1个线型视线流、曲
7、线视线流、焦点视线流、反复视线流、导向视线流的设计实例，并分析效果。2.搜集1个动态视线流的案例，并分析效果。3.3 对比3.3 对比 对比的目的主要有 2 个，一个是打破统一的版面设计，增强视觉效果。比如，差不多的两个拳头放在一起时，画面很平淡，因为只存在方向的对比：但如果是一个老人的拳头和一个小孩的拳头出现在同一画面，视觉效果就会强烈很多，因为同时存在方向、大小、糙嫩3种类型的对比。3.3 对比 对比的另一个目的是组织信息逻辑。完全统一的版面无法有效阅读，只有通过对比，读者才能对信息逻辑一目了然，对比越强烈，信息逻辑就越清晰。比如，一篇文章一般由标题、小标题、正文组成，如果标题和正文间的对
8、比不够强烈，就很难一眼看出文章的逻辑，比如下面左图中，只有文字大小的对比，小标题就不够显眼，辨识较困难，如果加强对比，增加粗细和颜色的对比，改成右图的样式，对比就非常鲜明了，信息逻辑也就一目了然。3.3 对比 1.方向的对比 3.3 对比 1.方向的对比 公众号HomeFacialPro的排版中也采用了这种方向的对比，标题部分采用纵向布局，正文部分横向排列，整体视觉效果非常灵动。3.3 对比 1.方向的对比 公众号Voicer中的部分插图也使用了横向和纵向文字的对比，并增加了动态效果，进一步强化了对比。3.3 对比 2.形状的对比 大VS小几何VS有机3.3 对比 3.色彩的对比 色彩的对比方
9、案非常丰富，最为典型的有暖色和冷色的对比、亮色和暗色的对比、互补色对比等等。一般来说，色轮的右上方是暖色，左下方为冷色。暖色给人的印象：生动、激情、有表现力，给人感觉在空间的位置靠前。适用于前景色。冷色给人的印象：谨慎、冷静、平静感，给人感觉在空间的位置靠后。适用于背景色。3.3 对比 3.色彩的对比 冷暖色对比明暗色对比3.3 对比 4.字体的对比 3.3 对比 4.字体的对比 下面的字体属于非衬线体还是衬线体：3.3 对比 4.字体的对比 根据经验，最好选择一种衬线字体和一种非衬线字体来设置对比，因为通常来说，互补的两种元素会产生很好的对比效果。右图logo中非衬线体和衬线体，以及书写体的
10、对比完美平衡了整个设计。3.3 对比 5.图文的对比 图片和文字的视觉重量是不一致的，一般情况下，遵循图重文轻的原则，将图片和文字放在一起时，可以有效突出图片，将图片作为有效的视觉线索。比如，下图中的箭头符号，在一大片文字中显得非常突出，成为了有效的视觉线索。设计实践分别搜集1个方向对比、形状对比、色彩对比、字体对比和图文对比的设计实例，并分析效果。3.4 平衡3.4 平衡 平衡的本质是让一条平衡轴两侧的重量保持平衡。3.4 平衡 对称平衡非对称平衡3.4 平衡 1.对称平衡 3.4 平衡 1.对称平衡 左图：公众号24HOURS封面；右图：公众号新世相封面3.4 平衡 1.对称平衡 居中对齐居中对齐3.4 平衡 1.对称平衡 两端对齐3.4 平衡 2.非对称平衡 3.4 平衡 2.非对称平衡 图片注释右对齐作者介绍右对齐3.4 平衡 2.非对称平衡 左：HUGO，右：深夜发媸3.4 平衡 2.非对称平衡 左：24HOURS，右：十点读书 设计实践1.分别搜集5个对称平衡和非对称平衡的设计实例，并分析效果。2.请在下图中添加文字“the rolling house”，使版式实现非对称平衡。
