《新媒体运营》第2版 课件任务2.3 微信公众号的视觉设计

项目2微信公众号运营任务2.3微信公众号的视觉设计新媒体运营2.3.1视觉设计概述1.了解视觉设计的目的1）符合基本审美正文字号14-16px行间距1.0-1.75倍颜色不要超3种强调文字要突出首行无需再缩进正文内容多分段段落之间空一行讨论：上面2个示例中的排版存在什么问题？2.3.1视觉设计概述1.了解视觉设计的目的1）符合基本审美2.3.1视觉设计概述1.了解视觉设计的目的2）方便用户阅读儿童青年中年老年2.3.1视觉设计概述1.了解视觉设计的目的3）塑造品牌形象公众号的品牌，同样可以通过视觉设计体现出来。在文章中，通过文字色调、配图风格、内容形式等，照样能体现出公众号，甚至是企业的品牌。再通过长期的运营，能让用户对你的印象更加深刻，一旦想起某个领域，就会马上想到你。2.3.1视觉设计概述2.掌握视觉设计工具（1）官方设计工具2.3.1视觉设计概述在使用微信公众号后台进行排版时，我们一般使用QQ浏览器或谷歌chrome浏览器，因为QQ浏览器与微信同为腾讯旗下软件，兼容性高。而谷歌的chrome浏览器是全球稳定性最高的浏览器，可以保障排版过程顺畅进行。2.3.1视觉设计概述2.掌握视觉设计工具（2）专业设计工具PhotoshopIllustratorC4D2.3.1视觉设计概述2.掌握视觉设计工具（3）第三方插件2.3.1视觉设计概述2.掌握视觉设计工具（4）第三方编辑器2.3.1视觉设计概述2.掌握视觉设计工具（5）高效图片设计工具2.3.1视觉设计概述3.提升审美能力

审美能力即艺术鉴赏能力，它让我们认识到什么是美，并且能评价美。培养和提高审美能力有许多方法，收集、学习、借鉴优秀的设计作品，包括国内外优秀的杂志设计、书籍设计、网页设计等，是较快提升自身审美能力的方法。时尚行业新媒体的设计可以多看看时尚行业著名的品牌杂志，如Medicine品牌画册。汽车行业新媒体的设计可以学习奔驰People&Cars杂志的版面设计。微信公众号的视觉设计1.去设计之家（/）搜集3本设计优秀的杂志；2.去新榜（/）搜集3个设计优秀的微信公众号。注：简单分析你喜欢它们的原因。项目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）图文的对比

图片和文字的视觉重量是不一致的，一般情况下，遵循图重文轻的原则，将图片和文字放在一起时，可以有效突出图片，将图片作为有效的视觉线索。比如，下图中的箭头符号，在一大片文字中显得非常突出，成为了有效的视觉线索。排版实训（小组在线作业）参考下面的效果图，遵循视觉设计的4个基本原则，对指定素材进行排版。PS：文字和图片内容不能更改，但可更改为自己喜欢的风格（更改风格的小组可加分）。使用小组微信公众号后台编辑发表后，将文章链接提交到在线作业。项目2微信公众号运营任务2.3微信公众号的视觉设计新媒体运营2.3.3动态交互设计1.动态样式

i排版（/bianji）和135编辑器（/style-center?tag_id=286）等许多第三方编辑器都提供了动态排版的模板。大部分是免费模板，也有付费使用的模板。2.3.3动态交互设计1.动态样式——文字弹幕

弹幕最早源自于日本视频网站（niconico动画），后来弹幕为更多国内网民所知，是因为国内Bilibili（B站）和AcFun（A站）引进了这个形式。弹幕就是在视频播放过程中，观众发表评论吐槽会从视频上方飘过。这个样式可以在公众号里随意“漂浮”，给读者一种耳目一新的感觉。▲扫码查看案例2.3.3动态交互设计1.动态样式——阅后即焚

阅后即焚最早源自于一款名为Snapchat的“阅后即焚”照片分享应用，该应用最主要的功能便是所有照片都有一个1到10秒的生命期，用户拍了照片发送给好友后，这些照片会根据用户所预先设定的时间按时自动销毁。▲扫码查看案例2.3.3动态交互设计2.互动样式——触发动画

触发动画就是需要读者点击某个区域，即可触发动画效果。公众号京东金融在推文《发射！》中使用了触发动画，当读者点击可乐瓶口，会触发弹出红包的动画：

▲扫码查看案例2.3.3动态交互设计2.互动样式——点击显示

隐藏样式一般是需要读者去点击某块区域，才能显示隐藏的图片或者文字。这种样式可dian’ji以真正跟读者互动起来，趣味性十足。公众号我要WhatYouNeed在推文《他们是最后一批，用固定电话谈恋爱的人。》中就使用了这种交互：

▲扫码查看案例2.3.3动态交互设计2.互动样式——滑动显示

滑动样式的好处是，将一部分文字或者图片内容收集在一个区域，从而使这些内容不占过多的篇幅。读者可以自由选择是否滑动这块区域去查看内容。公众号分期乐订阅号在推文《斗胆问下：过年钱够花么？临时提额点我！》中使用了滑动交互来展示春节回家账单：

▲扫码查看案例2.3.3动态交互设计2.互动样式——拼图效果

拼图效果的互动性和游戏性都非常强，配合恰当的图片、文字，可以大大提升推文的趣味性。▲扫码查看案例微信公众号动态视觉设计使用i排版工具，参考教程，制作一篇包含弹幕动效的推文（至少包含一张图片，主题需符合公众号定位），在公众号发布后提交推文二维码（可使用网站/将网址链接转成二维码）。代码说明rgb：更改弹幕文字颜色font-size：字号大小（1em=16px）弹幕开始/结束：代表一条弹幕的全部信息包含在其中。弹幕内容：显示在弹幕中能看到的所有文字符号。弹幕方向：x代表左右飞行；y代表上下飞行。（可选择上下飞行的样式切换）弹幕左右起始距离：决定弹幕走的距离远近。弹幕延迟：决定这条弹幕出现在屏幕内的先后顺序。弹幕速度：决定弹幕的飞行速度。▲扫码查看案例▲扫码查看教程项目2微信公众号运营任务2.3微信公众号的视觉设计新媒体运营2.3.4字体和配图1.字体

在使用字体时，版权问题很容易被忽略。2011年8月，昆山笑巴喜婴幼儿用品有限公司未经授权，在商标中使用汉仪秀英体“笑巴喜”三字，被南京市中级人民法院判定侵犯汉仪公司著作权，受到了相应的处罚，这是我国首例因为单字侵权被判罚的案例。2.3.4字体和配图1.字体

（1）方正系列字体

方正系列字体是我们接触最多的系列字体，但免费可商用的方正字体只有4种：方正黑体、方正书宋、方正仿宋、方正楷体。需要特别注意的是，日常使用频率极高的微软雅黑属于付费字体。2.3.4字体和配图1.字体

（2）思源系列字体

思源系列字体是Adobe与Google宣布推出的一款免费、开源字体，目前有思源黑体和思源宋体两款供选择。2.3.4字体和配图1.字体

（3）站酷系列字体

国内著名的创意设计网站站酷，推出了一系列免费可商用字体，包括小薇LOGO体、站酷酷黑体、站酷意大利体、站酷快乐体、站酷高端黑体5种。2.3.4字体和配图1.字体

（4）文泉驿系列字体

文泉驿是一个以开发开源、免费中文电子资源（如汉字字体、词库等）为目标的公益性组织，创办宗旨是实现“任何人在任何地方都可以自由使用汉字和汉语进行交流”。提供的免费字体有：文泉驿正黑体、文泉驿点阵正黑体、文泉驿等宽正黑体、文泉驿微米黑、文泉驿点阵宋体。2.3.4字体和配图1.字体

（5）郑庆科黄油体

郑庆科黄油体由字体设计师郑庆科开发，是一款偏儿童化的美术字体，带点复古又带点时尚的特点。是一款让人感觉看起来普通又非常耐看的中文字体。2.3.4字体和配图1.字体

（6）庞门正道标题体

庞门正道标题体是设计师阿门开发的一款非常适合做标题的字体。2.3.4字体和配图1.字体

（7）手书体

手书体是平面设计师Anonymous自己手写的一款字体，共做了基本汉字6763个。2.3.4字体和配图1.字体

（8）西文体

Fontsquirrel专门收集免费供商用的西文字体，目前已经收集了310种字体。2.3.4字体和配图1.字体

（9）字由

字由是为设计师量身定做的一款字体工具。字由收集整理了上千款精选字体，设计师可以通过收藏，搜索，标签，案例等快速找到心仪的字体，并在设计软件中无缝的使用这些字体。体验并应用设计工具1.登录/下载软件字由，截图说明字由上你最喜欢的3款字体：2.3.4字体和配图2.配图

（1）插图和照片

国内微信公众号的插图来源一般有3个：一是国外插画家作品或国外免费图库，比如好奇心研究所，UC校园等新媒体，一般都是直接使用国外插画家的作品，好奇心研究所会备注作者姓名。直接使用国外插画家的作品存在一定的版权风险，建议谨慎使用。2.3.4字体和配图2.配图

Foter。提供3亿多张图片。Foter的图片来源于目前世界上最好的线上相片管理和分享应用——Flickr，Flickr上参与了CreativeCommons许可的照片都会出现在Foter中。（1）插图和照片VisualHunt。提供3.5亿张图片。和上面的Foter一样，VisualHunt的图片来源于Flickr上参与了CreativeCommons许可的图片。2.3.4字体和配图2.配图

Pexels。提供数十万张免费照片。所有照片均由用户上传或来自免费图片网站的照片精选。（1）插图和照片Pixabay。提供150多万张图片，分享免费的照片、插图、矢量图和视频。2.3.4字体和配图2.配图

Unsplash。Unsplash是一个摄影社区，聚集了9万多名摄影师和创作者，提供了近60万张高清照片。（1）插图和照片SplitShire。创建SplitShire的目的很简单，就是为没有任何实用性而遗忘的照片赋予生命。2.3.4字体和配图2.配图

Foodiesfeed。来自世界各地的食品摄影师在CreativeCommonsZero（CC0）许可下分享照片，以帮助实现Foodiesfeed的最终目标，使与食物相关的在线空间更加美丽。（1）插图和照片Streetwill。小而美的复古图片网站，无版权，不用署名。2.3.4字体和配图2.配图

（1）插图和照片大作是专为各行业设计师度身定制的设计灵感搜索引擎,聚合全球众多知名设计网站,目前在库21.2亿创意设计、设计素材、摄影大图,并且保持每日更新量在25万张以上。2.3.4字体和配图2.配图

（1）插图和照片

二是通过合作或购买作品等方式使用插画师作品，比如公众号咪蒙，就和很多插画师签约，有偿使用他们的作品，包括咪蒙的头像都是来选自国内插画师猪坚强的作品。不过这种方式一般适用于财力雄厚的成熟新媒体品牌，财力不足的新媒体品牌使用免费图片更为实际。2.3.4字体和配图2.配图

（1）插图和照片

三是原创插图。比如公众号王左中右，基本使用的都是原创插图。2.3.4字体和配图2.配图

（2）信息图

信息图是指针对内容复杂、难以形象表述的信息，先进行充分理解、系统梳理，再使其视觉化，通过图形简单清晰地向读者呈现出来。信息图是一个合成词，由信息和图两个词组成，它也被成为信息图形。信息图最初适用于媒体中，报纸及新闻类杂志的设计部门将其成为图解新闻，比如，国内的新浪新闻、搜狐新闻、中新网、人民网等著名媒体旗下，都有图解新闻栏目。2.3.4字体和配图2.配图

（2）信息图——统计图

统计图是最常见的信息图类型，主要是通过几何图形来表现数值的变化趋势或进行比较。可以使复杂的统计数字简单化、通俗化、形象化，使人一目了然，便于理解和比较。2.3.4字体和配图2.配图

（2）信息图——图表和表格

图表是运用图形、线条及插图等，阐释事物的相互关系。表格是根据特定信息标准进行区分，设置纵轴与横轴。流程图是典型的图表类型，比如，公众号“企鹅吃喝指南”经常用到表格来展示信息，为了使画面更生动，还会对表格进行艺术化处理。