硬核运营：技术流新媒体养成

    计育韬 JZ多媒体解决方案编辑组 著

    人民邮电出版社

    北京

    2图书在版编目(CIP)数据

    硬核运营：技术流新媒体养成计育韬，JZ多媒体解决方案编辑组

    著.--北京：人民邮电出版社，2018.12

    ISBN 978-7-115-49717-8

    Ⅰ.①硬… Ⅱ.①计…②J… Ⅲ.①网络营销 Ⅳ.①F713.365.2

    中国版本图书馆CIP数据核字(2018)第231234号

    ◆著 计育韬 JZ多媒体解决方案编辑组

    责任编辑 朱玉芬

    责任印制 周昇亮

    ◆人民邮电出版社出版发行 北京市丰台区成寿寺路11号

    邮编 100164 电子邮件 315@ptpress.com.cn

    网址 http:www.ptpress.com.cn

    ◆开本：720×960 116

    印张：17.5 2018年12月第1版

    字数：200千字 2018年12月北京第1次印刷

    定价：75.00元

    读者服务热线：(010)81055522 印装质量热线：(010)81055316

    反盗版热线：(010)81055315

    广告经营许可证：京东工商广登字20170147号

    3目 录

    4

    数据采集

    如何把握用户阅读心理

    用户教育与技术方法

    封闭社群与开放社群

    第4章 社群动员运营与工具应用

    H5营销

    SVG交互图文设计

    动态内容的理论基石：缓动函数

    第3章 动态内容运营与缓动函数

    文案

    静态图

    二维码设计

    HTML5与CSS3

    栅格系统与版式设计

    内容运营岗的两项基本能力

    新媒体运营的分类

    新媒体运营的范畴

    第2章 静态内容运营与栅格系统

    前置交互层级的VI设定

    长图文中的VI结构

    色彩延展

    从LOGO开始

    品牌的身份象征

    第1章 视觉识别系统

    前言

    推荐序清博和新榜的对比

    电商系统

    附录 新媒体运营相关英文词汇

    5

    6

    无数在朋友圈刷屏的经典案例。技术型运营人异常稀缺，而在互联网的

    技术的，现在，技术与运营的化学反应让流量呈指数级增长，也成就了

    巧，书中有许多交互中的代码也展示得比较详细。最早的互联网是属于

    多维度地讲述了运营理论，以技术的角度来审视新媒体并给出了实操技

    提供有效的方法论与技巧。他的这本书从品牌到技术，再到内容运营，计育韬是一个优秀的运营人，有丰富的实操经验，有能力给运营者

    人的关注，我就是在这样的机缘下认识了计育韬。

    销。2017年，人人秀在运营人中的口碑越来越高，吸引了很多专业运营

    欲。作为H5工具的人人秀，一直都致力于移动互联网时代的新媒体营

    模式，产品跨圈层的传播成效显著，使得运营人对技术产生强烈的探知

    验、响应需求。其中，2014年开始，以H5为代表的“技术+创意”的刷屏

    全栈型运营人显得尤为可贵，他们善于洞察用户、注重视觉、沉浸体

    量的路径逻辑。刷屏成本越来越低，对运营人的素养要求却越来越高，近几年运营从业者纷纷试探各种技术流，不断重新设计获取社交流

    代野蛮生长。

    长应对复杂的环境，能够抓住每一个带着产品向上跃起的机会，在新时

    优秀的一批运营人员。这批运营人员乐于尝试新鲜事物、深谙人性、擅

    久困猛兽冲出樊笼，势不可挡。这样的互联网生态变化正在催生全球最

    的洗牌。跨圈层的流量壁垒被打破，新型互联网产品被开发，这潮流如

    系，再次重构了商业的基本运营逻辑，引发互联网产品市场地位新一轮

    用户下沉，小程序的诞生，带来更高的运营效率与新的消费互动关

    推荐序这个流量森林里，拥有技术型运营人才的企业也就拥有了更低成本的流

    量，势必会在增长方面获得压倒性的优势。

    书中将一个个精彩案例解构剖析，方便运营人随时查阅，为轻松获

    取更多低成本流量带来工作便利。

    韩夜

    人人秀联合创始人

    7

    8

    在开始阅读本书之前，请明确以下几个行业趋势。

    等层面趋向全栈化运营，掌握扎实的行业知识和技术。

    法论深刻、操作性极强的指导，帮助运营者在视觉、文案、技术、交互

    营”)。硬核运营，顾名思义，它提供的是运营领域中专业度较高、方

    不得不从技术的角度将新媒体运营提升到更高的水平(即“硬核运

    所以，虽然做运营不是让你成为专业设计师或工程师，但是现在你

    计单独存在的。

    方面的开发和设定支持。因而，没有一种新媒体内容是可以脱离交互设

    为画面感人，更因为视频App在视频加载、展示、评论、播放器优化等

    折叠、分享路径等方面的开发与设定适宜；一段短视频精彩，不仅是因

    图文好看，不仅是因为内容到位，更因为平台方在图文的推送、展示、束，而任何优质内容的成功，至少一半要归功于交互设计：一篇文章的

    别再用“内容为王”的理念自欺欺人，要知道内容的流量红利早已结……

    2017年，谁迈入小程序布局，谁就掌握流量；

    2016年，谁发起H5营销，谁就掌握流量；

    2015年，谁擅长前端设计，谁就掌握流量；

    2014年，谁着手视觉优化，谁就掌握流量；

    2013年，谁会写，谁就掌握流量；

    回顾微信公众平台的发展过程，我们不得不承认：

    新媒体人本质上是科技工作者

    前言

    9

    曾经，我们尝试把越来越多的功能集成于手机。现在，手机的大量

    许将失去意义。

    其实它们都看到了未来的另一种可能——手机是累赘，它的存在或

    者笨吗？

    书在VR穿戴设备上的重金投入……难道这些公司的决策者比普通消费

    苹果持续研发销量并不亮眼的Apple Watch，更不用提索尼、HTC、脸

    心于鲜有人问津的Google Glass二代，微软一再推广开发者版Hololens，耘，但为什么它们都要做这些被普通消费者公认为失败的产品？谷歌醉

    事实上放眼当下，我们依然会发现巨头公司在技术手段上持续耕

    通信时代，GIF都不可能被正常播放，何谈如今的各类流媒体传输？

    所谓的运营模式，而是取决于网络通信基础设施建设。回想在早期2G

    力。正如当下我们热衷的短视频、直播，其火爆现象本质上并不是源于

    笔者一直坚信：科学技术的发展水平，才是媒体形态演进的根本动

    那么在更远的未来，新媒体会是什么样的形态？

    于门店而言，还有卡券增粉的方式。

    来自娃娃机增粉、体重秤增粉、照片打印机增粉、Wi-Fi增粉。当然对

    头部大号其低成本、高流量的操作除了部分来自广点通系统，其他基本

    大号都实践了“内容为王”的策略？作为它们的老相识，笔者目前所知的

    4.地面流量成为在线品牌的争夺重地。你以为“视觉志”“新世相”等

    容。

    增粉形式将不断演进，用户将更加基于功能选择关注，而不是基于内

    3.冷启动技术频繁应用，二级分销只是其中一种可能性。未来在线

    活跃度，而熟谙H5交互和传播方法的品牌公众号更是“旱涝保收”。

    开始通过SVG交互代码技术，发布极具创意的互动图文并快速提升用户

    2.交互技术的力量进一步崛起。比如越来越多的企业品牌公众号，消灭的同质化平台都是没有名气和流量的。

    1.不要掉到“内容增粉”的坑里，更不要拿内容爆发个案当规律，被功能正在返给最传统的人类工具：手表、眼镜、服装。我们开始聚焦手

    机的发展本身，键盘趋小，屏幕趋大。如今在实体键盘也被取消的情况

    下，柔性屏等技术正在赋予手机新的可能形态，手机可能成为一张可无

    限大、可弯折的纸。

    等工业边际成本下降时，一切媒体信息都可以通过穿戴设备获取，一切屏幕都廉价而柔软，一切物品都拥有身份识别，那么人类就可以随

    手拿起一张餐厅的纸巾阅读属于自己的定制新闻，用眼镜迅速给好友拨

    通电话，用手表轻刷结账——我们又何需笨重的手机？

    请大家记住最重要的是：人类的偏好在本质上与我们能感觉到的宇

    宙维度有关。当前的手机再发达，它也是简陋的二维信号，是对三维现

    实的“切割”。人类会无比向往媒体对现实的还原。

    所以请大胆想象，未来的新媒体编辑所编辑的内容不仅是简单的微

    信图文、微博消息、抖音短视频，还会包括VR、AR与全息影像等媒体

    内容。

    请记住：新媒体人对自己的定位，应当是一个着眼于人类科技进步

    并通过新技术不断打破信息不对称局面的科技工作者。

    让我们从技术的角度，重新审视新媒体的运营工作。

    10第1章 视觉识别系统

    11

    是从VI的角度看，唯一标准是存在的，那就是：无论用户在什么时间、简约，可以繁复，可以灰暗，可以活泼，可能并不存在唯一的标准。但

    新媒体领域的设计、排版、布局有唯一的标准吗？或许你觉得可以

    的力量。

    流媒体、静态图还是文本版式等宣传窗口，都会让你深刻地感受到品牌

    度，甚至拥有了品牌调性。色彩也一定会延伸到品牌的新媒体中，无论

    色彩，就是VI的重要基础模块之一。它的存在让品牌不仅具有识别

    会给出对应的答案。

    口可乐是什么颜色的”或“蒂芙尼是什么颜色的”等问题时，被问者一定

    如何快速理解VI？VI有什么效力？举几个简单的例子，当我问“可

    个品牌的使命与调性，通过视觉在品牌的各个媒体终端呈现。

    认知和掌握。VI本身涵盖内容广泛，从核心的LOGO开始，它携带着一

    因，是缺乏对企业视觉识别系统(Visual Identity，VI)这一专业系统的

    缺乏品牌的识别度，是大多数新媒体运营的通病之一。而究其原

    品牌的身份象征通过什么渠道收到了品牌新媒体的宣传内容，都能在视线扫过屏幕的一

    瞬间，意识到“啊!这一定是某某品牌的内容”。

    从LOGO开始

    LOGO是VI的第一要素，是重中之重。无论你从哪个新媒体入手，都会发现用户在注册时都要提交一个头像图案。当新媒体内容作为交互

    界面信息进入用户眼帘时，它的意义举足轻重。

    视觉触发权重

    从整体看新媒体行业，内容的展示分为列表式、信息流、瀑布流三

    大交互类型(如图1-1所示)。要想做到硬核级运营，首要思维就是“站

    在交互设计和开发者的角度”。

    12

    图1-1 内容展示的三大交互类型初出茅庐的新媒体运营者往往对用户的触发行为有一种误解，认为

    一位用户点开一篇文章或一个链接，首要原因是标题。

    但实际上，现在的用户在使用新媒体时，滑动屏幕的速度越来越

    快，在界面上的视觉停留时间则越来越短。在浏览过程中，用户甚至很

    难看清新媒体账号发布的每条信息的标题。

    其实当用户面对任何一种交互界面时，最先识别的都是和布局、形

    状、颜色相关的信息(如图1-2所示)。即便识别文字，人类也先识别

    文字字符的形状，然后再判断它是哪一个字母、字符、标点。所以，不

    要小看文字以外的任何要素，它们往往自身就有触发诱导力。例如，在

    列表式新媒体中，LOGO就是一个巨大的触发权重。

    13

    要专业设计以运用知识，实现改造和优化。

    程。因为不同的新媒体平台对头像图案都会进行大小、形状的裁切，需

    从LOGO到新媒体账号头像是设计转化的过程，而非设计移植的过

    图1-2 用户对交互界面的识别平面几何中的视觉聚焦点

    在平面设计学中，我们通常以圆形和矩形这两个基本形状为范例

    (如图1-3所示)。

    图1-3 平面设计中的两个基本形状

    任何一种平面几何形状都有视觉聚焦点。对于一些规则图形来说，视觉聚焦点可通过明确的测算方式得出，比如圆形和矩形。它们的视觉

    聚焦点原理对新媒体的交互设计、平面设计以及用户体验设计都非常重

    要。

    毫无疑问，圆形的视觉聚焦点位于圆心。对于矩形来说，通过将长

    和宽三等分，可以在交点处得到四个视觉聚焦点。当然，正方形作为矩

    形的特殊形态，也可以采用相同的方式定位其视觉聚焦点(如图1-4所

    示)。

    14

    图1-4 规则图形的视觉聚焦点

    15

    尔，还是微信“泥石流”支付宝，目前在大多数新媒体平台具备个性化的

    所以，将新媒体人格化，是运营的必经之路。无论是微博“蓝V”海

    儿、麦当劳、星巴克……哪家没有自己的独特风格？

    秉性，正是这样的脾气秉性吸引了用户的驻足围观。苹果、索尼、香奈

    们是一个个品牌，不如说它们是一个个鲜活的人物形象，有自己的脾气

    趸众多的大品牌，其实往往具有一些非常个性化的品牌调性。与其说它

    开发者的初衷是合乎逻辑的。不过，市场上有一种明显的趋势，拥

    与品牌无论大小，都可以以公众化姿态呈现在用户面前。

    的裁切设定。这也是微信团队本身对微信公众平台使命的期待——企业

    对于微信公众平台，微信团队提供给运营者的也主要是圆角正方形

    饰”后的公众形象。

    人、老板、客户看到则分别会有怎样的感受。最终你展示的，就是“粉

    特别谨慎地决定让哪些人看到，屏蔽哪些人，如果你的同事、同学、家

    为如会话、朋友圈等，都要经过深思熟虑。尤其是发布朋友圈时，你要

    吐槽过微信的好友标签式分组功能太差，所以在微信上的大多数所作所

    象。什么是公众形象？即经过修饰甚至伪装的形象。我相信很多读者都

    微信通过头像四个点的分散视觉聚焦，彰显一种四平八稳的公众形

    件，大多数时候，用户通过QQ处理一些私事。

    个人化色彩，而QQ的用户也多为张扬、自我的年轻群体。除了传输文

    圆形通过单点的视觉聚焦，力求彰显头像的个性化。它使QQ更有

    使命也不同。

    其实正由于这两种形状的视觉聚焦点不同，两款App被赋予的社交

    形的，而微信的头像都是正方形的？

    头像。那么作为新媒体运营者，你可曾思考过：为何QQ的头像都是圆

    互界面内使用圆形头像，后者在大多数交互界面内使用有圆角的正方形

    台头像裁切设置方式。例如同为腾讯系的QQ和微信，前者在大多数交

    结合具体的案例，可以发现圆形和正方形是两种最常见的新媒体平账号一定拥有更多的话语权。

    个性化的打造并不是务虚的理论，而是一种从头像开始的VI设计延

    展。在微信运营圈内，你是否注意到不少知名大号很早就开始使用圆形

    头像？即使微信团队默认提供的是圆角正方形裁切，这些大号运营者也

    都将自己的头像设计为圆形。

    而随着微信App的迭代，现在信息流的订阅号头像进行了图形裁

    切，这就是微信团队从开发的角度进一步要求运营者充分考虑圆形裁切

    的效果。

    除此之外，在用户快速划过屏幕的那一刻，你的个性化还会决定你

    的辨识度。包括圆形在内，更多异构体头像都在悄然提升账号的打开

    率：

    1.圆形头像(如“一条”“乌云装扮者”等)；

    2.异构头像(如横线式的“我要What You Need”等)；

    3.深色头像；

    4.纯色头像。

    所以，新媒体账号的头像设置，绝不是简单地“上传公司LOGO，点击确定按钮”，而是应通过更专业的设计思维打磨。

    16

    公众平台还是在抖音等平台，都会在其界面中延续其标志性色彩。通过

    品。观察绝大多数顶尖品牌的新媒体账号，你会发现无论在微博、微信

    色彩是VI系统中的关键要素之一，也必须严格用于新媒体的所有产

    色彩延展

    17

    要使用十六进制输入。你可以通过制图软件如Adobe Photoshop等或者

    对应r、g和b。诸多新媒体平台的编辑器、第三方编辑器在排版时，主

    称为十六进制写法，也同样是RGB制式。十六进制的每两位，其实分别

    而言， RGB分为RGB(255,255,255)写法和000000写法，后者通常被

    另外，作为运营者，你也务必清楚RGB的书写方式。尤其对CSS3

    脑或手机上的图像色彩仍然发生了一些可见的变化。

    上精心设计，最终用RGB格式导出图像发给你，但是等发布后，你的电

    这就是为什么一些运营者在工作中，会发现设计师在诸如Retina屏

    体图像并非照片，那么用s RGB制图就能减少最后的失真。

    的s RGB色彩空间和约76%的Adobe RGB色彩空间。所以如果你的新媒

    于前端工程师来说，他们更偏好s RGB，因为传统显示器只显示约97%

    但是色彩范围更广一定意味着在任何情况下都更好吗？不是的。对

    择。

    35%，那么当我们在呈现照片时，Adobe RGB会是一个相对较好的选

    对于sRGB和Adobe RGB而言，其实后者的色彩范围比sRGB大

    媒体运营中色彩呈现效果最好的格式之一。

    万色，而目前所有RGB类型的色彩空间都比jpeg小，所以，jpeg是在新

    色彩空间是颜色的范围。例如jpeg这种压缩格式最多可以包含1670

    分为多种类型，目前在行业内，最常用到的是sRGB和Adobe RGB。

    看，“红绿蓝”的定义非常好理解，不过实际上，RGB根据色彩空间，还

    作为运营者，你首先必须清楚的色彩制式就是RGB。从字面意思

    RGB的定义、分类、书写

    色彩的通用制式

    清晰地意识到背后的品牌归属。

    合理的配色方式，其新媒体发布的内容无论图文还是视频，都会让用户

    18

    色系。

    高规格的颜色制式，一张色卡并不是仅包括唯一颜色，而是代表了一个

    卡，是很多企业在VI开发和迭代的过程中必备的工具之一。它是一种最

    构，它每半年发布的“流行色”广为大家知晓。Pantone公司制作的潘通色

    Pantone公司是一家因专门开发和研究色彩而闻名全球的权威机

    孤傲的Pantone色

    RGB制式，或者请制图的设计师完成。

    极高。作为运营者，一定要在专业制图软件中将图像从CMYK转换到

    式图像时，会发生极其明显的色差，通常情况是画面饱和度与亮度变得

    由于它和RGB完全不同，所以当在电子屏中强行上传一个CMYK制

    三种油墨混合后往往不能产生纯黑色，因此需要单独的纯黑墨水显色。

    颜色足够多时，理论上可以产生黑色，但由于油墨生产的工艺问题，这

    母，之所以不取首字母，是为了避免与蓝色(Blue)混淆。当CMY三种

    (Magenta)、黄色(Yellow)名称的首字母。K则是black最后一个字

    色彩模式。其中，CMY是3种印刷油墨——青色(Cyan)、品红色

    种发光的色彩制式，由屏幕投射色彩到视网膜；而CMYK是一种反光的

    CMYK也称作印刷色彩模式。它和RGB的本质区别在于，RGB是一

    CMYK而非RGB。

    宝、横幅……但凡涉及印刷的广告，其实对设计师来说最好的制式是

    的同时，我们始终坚持推广、发布各类户外广告，如喷绘、海报、易拉

    在广告行业中，设计师频繁接触和使用CMYK。在新媒体蓬勃发展

    的图像色制是否是CMYK。

    打交道。运营者与设计师一起协作时，尤其要注意设计师交付的设计品

    运营者作新媒体团队中的一员，可能要和形形色色的其他岗位人员

    不好惹的CMYK

    中，可以任意选择书写方式。

    在线第三方工具拾取和转换这两种书写方式。而在纯HTML书写方式当你拿到大企业的VI手册时，你往往会发现手册中最先说明的就是

    它们对应的Pantone色号。甚至有些企业不惜通过注册特殊色商标，直

    接买断一种Pantone色号。

    一个典型的例子是蒂芙尼蓝(Tiffany Blue)。它是Pantone公司为

    蒂芙尼制作的客户私有颜色，编号为PMS 1837，1837这个数字是蒂芙

    尼公司创立的年份。据公开资料显示，蒂芙尼公司于1998年在美国注册

    成功颜色商标，受到商标专利法保护，所以在潘通色卡中并未公开出现

    这个颜色。

    专业设计师在制作各类企业视觉设计时都会从其色卡开始，很多常

    用的制图软件如Adobe Photoshop就可以用Pantone方式选择颜色(如

    图1-5所示)。

    19

    符串才能获得准确颜色的道理。

    相比一些“看着差不多”选颜色的同行，你应该已经开始明白必须输入字

    现在，作为一名运营者，你已经对色彩制式有了相对透彻的理解。

    图1-5 颜色库但仅仅理解是不够的，接下来我们探讨使用色彩时的一些核心原

    则。

    色彩的配色规范

    即便运营者能选定一个主色调，但是在搭配颜色时，往往处于“我

    觉得这个颜色蛮好看的，我就试试这个样式”的业余状态。笔者希望从

    今天研读本书起，你要完全抛弃这种想法。

    色轮应用

    颜色的搭配选择，从专业设计学角度应遵循色轮的配色方法。色轮

    是一个光学概念。它通过红、绿、蓝、白等分色滤光片的组合，可将透

    过的白光进行分色并通过高速电动机使其转动，然后顺序分出不同单色

    光于指定的光路上，最后经由其他光机元件合成并投射出全彩影像。

    在计算机领域，各种制图软件中预制了色轮。这里我们以权威的

    Adobe色彩搭配辅助工具为例，学习几种基本的色彩搭配方式。

    Adobe官网上提供了五色配色方案。因为通常一个视觉设计品在单

    画幅内，不宜超过5个主色调，3～5个主色调是相对合理的(如图1-6所

    示)。

    20图1-6 配色方案的主色调

    位于画面中央的是光谱色轮。图1-6展示了一种常见的配色方案：

    类比配色。

    所谓“类比配色”，指在选定一个基准色彩后以其为中轴，向两侧等

    角度间距延展获得的5种颜色。虽然这5种颜色有直观的差异，但是互相

    有直接的延续性，画面中各类元素的过渡都会相对自然。

    另一种通用的配色方案是补色配色。在时尚领域，我们也把它称

    为“撞色”。何谓“撞色”？即在光谱色轮中，呈180°的两种颜色(如图1-7

    所示)。

    21图1-7 撞色

    然而，撞色的搭配是非常考验设计师的能力的。有一对非常知名的

    撞色：红色系与绿色系(如图1-8所示)。中国俗语道“红配绿，赛狗

    屁”，但它们恰恰是在技术层面完全合理的配色。

    22图1-8 红色系与绿色系的撞色

    究其原因，我们可以再举另外一个例子：一片绿草地中，绽放着一

    朵小红花，这并不会有违和感。所以尽管补色搭配是通用的配色方式，但是有一个非常重要的原则——颜色占比要有绝对差距，即两种颜色在

    画面中绝不可等比例分布。只有将一种颜色作为前景色，另一种颜色作

    为背景色，才可能呈现出相对合理的配色。

    因为就补色而言，两种颜色取自色轮的两个极端，具有最强烈的对

    比感。从设计学的角度看，对比的本质意义在于强调其一，因此当使用

    补色配色时，请务必遵循上述原则。

    第三种方案是知名的三元群配色方案。在色轮中以120°三等分，获

    得的任意一组三色轴向都可以形成三元群，其中最著名的就是三原色

    (红、黄、蓝)配色(如图1-9所示)。

    23图1-9 三元群配色方案

    说到红、黄、蓝，你会想到什么？你可能会想到幼儿园，可能会想

    到乐高积木……当我们研究婴幼儿产品或服务时，就会注意到红、黄、蓝是最常出现的配色方案。包括迪士尼的大量卡通片以及其中的人物造

    型，红、黄、蓝都是主色调。之所以它们选择这套三元群，是因为婴幼

    儿在视锥细胞发育过程的早期，对红、黄、蓝三原色是最敏感的。因而

    当你的新媒体发布一些和婴幼儿有关，或者年轻、活泼的主题时，就可

    以考虑三元群配色方案。

    除此以外，一种更稳妥、严肃的配色方式是单色配色方案。

    在单个轴向上，任意拾取颜色，你会获得一组有层次感的同色系色

    彩，尤其适合一些相对正式、不能补充其他色系的情况。这种方式使画

    面的各个元素和区块分明(如图1-10所示)。

    24

    25

    所示)？

    幅杰作的配色情况如下，你能看出来分别对应哪几幅作品吗(如图1-11

    术家的画作进行色彩分析，制作了每幅画作的用色比例图。凡·高的几

    设计师詹姆斯·格尔尼(James Gurney)就曾对凡·高、莫奈、高更等艺

    另外，更高水平的运营者还可以使用名画配色。知名的色彩可视化

    就是圈内知名的电影配色典范。

    景、摄影还是后期时，都非常强调色彩搭配，比如《布达佩斯大饭店》

    些经典剧照的高频用色作为拾色标准。因为确实有很多电影，无论在布

    电影剧照配色法，通常设计师会对一些知名电影进行色彩分析，选择一

    种包含情感的视觉表达。选择配色的方式还有很多种，比如目前流行的

    当然，基于色轮配色就是唯一标准吗？不见得，因为色彩应当是一

    运营者由准专业走向专业的必要条件之一。

    除此以外，还有更多基于色轮的配色规则可以尝试。色彩的使用是

    图1-10 单色配色方案

    26图1-11 凡·高的用色比例图

    也就是说，优秀的运营者在充分掌握色轮配色的基本规则后，可以

    将个人的情感、活动的调性、文案的风格注入色彩中，选择更趋完美的

    配色方案。当然，这一切都是需要基于反复训练习得的。

    27

    个媒介系统缺乏VI的规范性，导致人为因素介入了本应一帆风顺的定版

    产生这种问题的本质原因，并非是“领导者的审美有问题”，而是整

    A需要再次调整……

    更高的管理者C确认，而C又有自己的想法，甚至不同意B的观点，因而

    再暗一点”诸如此类的反馈。A按照B的意见修改完毕，可能又要提交给

    表“我觉得这个文本框怪怪的，换一个吧”“这个图片背景色不太舒服，交给他的媒介主管B，B不一定对内容有任何修改意见，但往往会发

    运营者A完成了一篇长图文，他并没有权利直接选择发布，需要递

    在新媒体行业中，有一个很常见的现象。

    结构。

    版是后面要专门介绍的独立小节，而在排版之前，首先要解决的是其VI

    能熟练驾驭长图文的运营者，往往是同行中的佼佼者。长图文的排

    平台。简洁如知乎，复杂如微信公众平台和微博头条文章。

    文的应用是极其普遍的，而且不乏一些支持高强度富文本编辑的新媒体

    繁复的操作。但是在发布长图文时，很多人往往手足无措。然而，长图

    运营者在发布图片、发布视频、布置新媒体主页时通常不会有过于

    长图文中的VI结构工作中。

    实际上在最专业的运营工作中，根本不存在上述情形。因为运营者

    早已设置了长图文中的VI具体执行规范。类似正文行间距、字间距、字

    号、缩进等，文本框尺寸、边宽、内边距、外边距等，这些参数通过代

    码模板固定下来，而且这些设置都有明确的、源自企业VI的设计规范。

    所以，即使在层级关系极度复杂的顶尖企业，新媒体长图文的审核

    速度依然很快。因为长图文的VI规范是一个提前经过企业全部领导者确

    认的套件，任何层级的人员都没有资格反对已经完成的设置。

    企业的长图文VI结构通常是这样的(如图1-12所示)。

    这就意味着：第一，封面图是经过PSD处理的，其实纵观行业大

    号，很少有贴一张纯图片的封面图设置，而往往会增加一些标签等类似

    杂志刊号的封面图浮层；第二，正文是模块化的，可以通过组装的方式

    实现快速排版和内容替换。

    28

    每个文件包中包含具体的预览图和对应实现用的工程文件(如.html

    图1-12 长图文VI结构文档、.psd文件等)。

    模块化的长图文VI结构是企业VI的衍生产品之一。它既是保证新媒

    体视觉形象与企业VI的高度统一、提升企业品牌识别度的规范，也是提

    高新媒体运营效率的工具。更重要的是，它也是一键排版的前提条件。

    对于这一点，我们会在后文MarkDown一键渲染的相关内容中阐述。

    29

    有的账号文艺范十足，下方三个按钮中各有一个字，这是一种风

    都包含这个模块，它同样会彰显出一个品牌VI的方方面面。

    微博私信窗口、微信公众平台会话窗口、QQ公众平台会话窗口等

    自定义菜单

    平台的广告投放规范文件。

    举“自定义菜单”和“瀑布流主页”两个例子，更多落地页的设计可遵循各

    至用户刚刚关注你的账号，关注回复也会形成VI的效应。这里我们

    程，那么就涉及“头像—会话窗口布置—图文”这几个包含VI的界面。甚

    许经过了“订阅号—订阅号列表—公众号会话界面—图文消息”的交互过

    几个包含VI的界面；又比如用户点开某一条微信公众号图文消息时，或

    音视频”的交互过程，那么就涉及“头像—瀑布流封面图矩阵—视频”这

    用户在点开某条抖音视频时，或许经过了“首页—搜索—抖音主页—抖

    用户在到达新媒体最终产品之前，会经历多个前置交互层级。例如

    前置交互层级的VI设定格；有的账号科技感十足，下方按钮中各有一个符号，这也是一种风

    格；还有的账号活泼生动，甚至把emoji(绘文字)表情放在其中，这

    同样是一种风格。

    甚至，有的账号不见得布局三个主菜单，而是仅有一个，它也代表

    了一种风格(如图1-13所示)。当然，十分传统的按钮命名，也表达了

    一种品牌的文化内涵。这里先分析按钮内容的设置原则。

    图1-13 三个主菜单和一个主菜单

    按钮，是交互设计中非常传统的一个组件。而由按钮形成的菜单，又是交互设计中的重中之重。在交互设计七大基本原理中，有一项“席

    克定律”(Hick's Law)为我们揭示了菜单的设计逻辑(如图1-14所

    示)。

    30

    31

    很多运营者都苦苦思索过的问题，下文为你解答。

    那么在设置3个菜单的情况下，应该分别对应什么样的内容？这是

    的分类，但其实这是在降低用户的选择欲望。

    多没有经过专业训练的运营者，往往会误以为更多的主菜单意味着更好

    更快。因为没有增加一个层级交互，所以选择速度是指数级增长的。很

    答案是：当用户面临单个菜单中的10个选项时，做出决定的速度会

    哪一种菜单设计更好呢？

    菜单，每个菜单有5个项目；还有一个菜单，一个菜单中有10个项目。

    这一交互设计学理论在菜单设计中非常重要。比如，现在有2个主

    而且在选择总数偏少时，这种效应会更显著。

    当用户面临的选择(n )越多时，做出决定的时间(T )也就越长，解，则，公式为T = a+blog2 (n )。显然，通过观察这个公式我们会了

    定律公式反映了当用户面临选择时，做出选择所耗费时间的基本规

    图1-14 席克定律

    32

    · 超长宫格类；

    牌的VI特征：

    看，瀑布流主页主要分为三种瀑布流视觉设计，它们都可以高度反映品

    瀑布流的展示取决于图片的缩略或视频中的某一帧。就Instagram来

    外会提及部分抖音品牌号的具体情况。

    牌已经呈现出对瀑布流主页的细心雕琢。这里我们以Instagram为例，另

    频。在传统短视频领域，抖音的主页目前也是瀑布流状态，不少企业品

    相当成熟的主页瀑布流布局新媒体。它可以发布图片，也可以发布短视

    瀑布流主页在图片、短视频新媒体中非常普遍，Instagram就是一款

    瀑布流主页

    断调整布置策略，优化用户的点击行为。

    在的新媒体平台往往对按钮的触发有相关数据监测，根据报表你可以不

    如此，我们对最多三个按钮的VI展示区就有明确的布置思路了。现

    聊天机器人等带有“惊喜”特征的内容一般位于此处。

    户点开之前，可能并不能完全知晓或预判得到的反馈。所以诸如抽奖、为“惊喜”，这与“惊喜营销”有高度关联。这个按钮可以经常变化，在用

    3.右侧按钮，往往代表“惊喜”。我们把最右侧按钮提供的内容称

    提交任何数据并得到数据反馈。这类页面还是要保持更新的。

    注意，所谓静态数据并不是网页内容永远不变，而是用户不会向该页面

    左侧的按钮往往存放静态数据，如企业介绍、产品概要、招聘信息等。

    2.在右手持机情况偏多的情况下，左侧按钮触发率最低。因此，最

    据交换，比如提交表单、发表评论、填写收货地址等行为。

    类内容。服务类内容的最主要特点是动态数据，用户会和该页面发生数

    回调模式，它的使命在于服务，因此中间的菜单及子菜单应当提供服务

    1.在移动端，位置居中的按钮触发率最高。由于自定义菜单是一种· 宫格重组类；

    · 裸眼3D类。

    超长宫格类遵循了突破中国用户常规九宫格的设计逻辑。无论

    Instagram还是抖音，主页布局都是3×x的瀑布流，在Instagram上各家大

    品牌发布的图片数和视频数都是3的倍数。而在一些重要节点，有些品

    牌会发布超长宫格，产生霸屏的效果(如图1-15所示)，品牌的各种产

    品组合成了一把吉他。其中组成吉他的部分内容其实是第一帧视频。抖

    音甚至可能出现动态的、大面积的整体效果。

    33图1-15 超长宫格类瀑布流

    宫格重组类对视频设计有更高的要求，画面彼此之间会突破UI的界

    限，对运营策划的难度非常高(如图1-16所示)。

    图1-16 宫格重组类瀑布流

    裸眼3D的运用和主页当前的背景有关，以下这张截图中包括了两

    种裸眼效果突破法，一个是实物裸眼，另一个是文字突出(如图1-17所

    示)。

    34图1-17 裸眼3D类瀑布流

    35第2章 静态内容运营与栅格系统

    36

    新媒体首先拥有了一个最规范的称呼——Social Media(社会化媒

    兴起，也对理论的跟进提出了迫切要求。经过学界的探索和验证之后，彼时的美国学界面对诸如脸书(Facebook)、油管(Youtube)等

    轮廓却显得尤为清晰。

    入其中。不过，早在2009年，也就是“新媒体”概念诞生的那一年，它的

    媒体时，各类声、光媒体终端输出装置(如全息、VR、AR等)都被纳

    当下新媒体的定义五花八门，尤其是当我们在艺术设计领域引入新

    的理论体系完全可以帮助我们快速界定新媒体的范畴。

    形形色色的答案。不过，我们要从专业新闻学的角度解析新媒体，既有

    义。当你问不同新媒体岗位的工作者“新媒体是什么”时，他们可能给出

    如果想准确界定运营的范畴，那么首先要解决的是对新媒体的定

    而，新媒体运营的范畴界定就显得极为重要。

    公司、不同的渠道和领域，都有非常具体且彼此有区别的运营工作。因

    “运营”，是一个边界十分模糊的概念。就新媒体运营而言，在不同

    新媒体运营的范畴

    37

    书，图书上往往会留有之前读者不同的翻阅、标注等痕迹，它们都

    书签，是一种对图书的标记和着重行为。我们从图书馆借阅一本图

    社会化书签是互联网的主要流量之一。

    社会化书签

    为。

    群运营等种种形态，本质上无非是为了反复刺激用户的互动、消费等行

    永远是其基础指标。今天，社交网络已经出现了IP运营、粉丝运营、社

    这让我们明白，无论社交网络的形态如何发展，个人账号的活跃度

    自己的账号。

    衔、声望值、金币等奖励个人账号的虚拟参数，鼓励个人用户持续运营

    实用户聊天的个人账号运营策略。早年BBS的管理策略，主要是通过头

    上线QQ的早期，为了运营好QQ的生态环境，只能采用注册马甲并和真

    什么十分新颖的Big idea，也可以提升用户的活跃度。因此，马化腾在

    在早期，社交网络运营集中于个人账号运营。即使平台主体方没有

    的影响。

    人账号完成去中心化的信息传播，并通过个人的运营使之拥有越来越大

    社交网络是最早出现的社会化媒体之一。用户第一次可以尝试以个

    社交网络

    会化分享、社会化新闻四个主要大类。

    征。在新闻学中，目前将社会化媒体分为：社交网络、社会化书签、社

    然注意到，所有新媒体无不包含这种扁平关联和人人参与的社会化特

    “社会化”较之于“新”，拥有更清晰的特性描述。时至今日，我们依

    体)。

    38

    径。如今，我们发现了越来越多的社会化新闻获取路径，而且这些路径

    在社会化新闻出现以前，门户网站是用户获取新闻资讯的主要途

    社会化新闻

    杂。

    接由MCN(Multi-Channel Network)网红内容经济生产商操盘，更加复

    戏运营、粉丝运营、社群运营等都可能囊括其中，而且不少运营工作直

    仅限于意见领袖、产品、企业、媒体等，所以产品运营、用户运营、游

    该领域的运营更加复杂，因为被关注、被订阅的对象本身包括但不

    为一个App，那它就是一种社会化分享。

    于社会化分享。因而，我们可以认为如果微信公众平台的订阅号独立成

    管在内，但凡具备这类交互并基于这类交互产生差异化推送的平台都属

    关注、订阅等交互行为的发明，缔造了社会化分享的帝国。包括油

    社会化分享

    业务内容更有公信力。

    索引擎中排名靠前的工作之一。同时，它也能让你的企业形象更正式，品牌SEO优化方式，唯一几种不花钱、仅靠运营就能让品牌曝光度在搜

    词条运营就是该领域最本质的工作之一。对企业而言，词条是一种

    事件中，展示出了强大的传播作用。

    修改的权限。维基百科的流量常年位于全球主流网站的前五名，在某些

    也见于维基百科类的百科词条工具。每一位互联网用户都在理论上拥有

    和前一位读者拿到的书有所不同。这种社会化的知识传播和迭代形式，翻阅、标注甚至订正行为中不断扩充和迭代。每一位读者拿到书，必定

    是“书签”。图书馆的图书作为公共空间的流动知识资源，在不同读者的可以根据用户的个人需求进行自定义。社会化新闻的用户参与方式尤其

    特别，以今日头条为例，评论、分享等传统参与行为并非社会化新闻的

    标志，更重要的是不同用户启动App收到的差异化推送。这源自系统对

    触控交互的反馈：用户的点击、停留、滑动等行为本质上也是一种参

    与，这种参与会决定用户未来收到的推送，这种算法是社会化新闻引以

    为傲的资本。

    另外，通过上述触控反馈使得新闻发生排序的平台，也属于社会化

    新闻。素有“互联网首页”的盛名的Reddit便是一个典型例子。

    该领域的运营，根据参与者身份不同，集中于个人运营、产品运

    营、粉丝运营等多个层面。

    新媒体运营的分类

    从学术角度了解新媒体后，其运营分类也就初见端倪。结合中国的

    新媒体环境，笔者以最终产品形态为标准，将新媒体运营分为三大类。

    静态内容运营与栅格系统

    无论社会化媒体的哪个领域，但凡产出如文字、静态图片等产品的

    运营工作，都属于静态内容运营。它们往往基于终端展示，在栅格系统

    中被定义或自定义呈现方式。所以，本章会重点阐述排版、设计、文案

    方面的高标准操作。

    39动态内容运营与缓动函数

    无论社会化媒体的哪个领域，但凡产出如视频、直播、动态图、交

    互页面等产品的运营工作，都属于动态内容运营。它们往往基于终端展

    示，包含缓动函数，以优化呈现方式。所以，本章会重点阐述交互动

    画、H5营销、视频剪辑方面的高标准操作。

    社群动员运营与工具应用

    无论社会化媒体的哪个领域，但凡执行组群、培训、事件、分销、变现等运营工作，都属于社群动员运营。它们往往基于社群形态，独立

    开发或使用第三方工具和电商平台。所以，本章会重点阐述建群、开

    课、冷启动、数据管理的高标准操作。

    40

    够“硬”。“硬”到读者会忽略它们的排版是多么的丑。

    很多微信大号不排版？其实只有一个原因：它们的内容足

    2015年是公众号的爆发年，当时圈子中有一个热议话题：“为什么

    尤为明显。

    分，那这两部分至少占80分。但是这80分的门槛非常高，在垂直类领域

    接影响图文打开率，正文的质量直接决定分享率。如果按照百分制打

    很多人认为一篇微信图文的核心只有两方面：正文和标题。标题直

    内容运营岗的两项基本能力真正的内容创作者，优先考虑的是逻辑性，之后才是可读性。当这

    类人的创作水平达到能让你“看了第一句就会想看第二句，看了第二句

    就必须看第三句”的水平，那“靠写字儿为生”也就不是什么难事了。

    本书的读者中不乏从事内容运营工作的，而运营者的基本能力其实

    脱胎于“编辑”的角色，这涉及以下两项具体工作：

    1.“做好—选题”和“做—好选题”

    上手难度：★★★★★

    2.“做对—编辑”到“做—好编辑”

    上手难度：★★★

    概而言之，既能做好选题(知道内容输出的方向与节奏)，还能做

    好包装(文字编辑和样式排版)。其中前者对应占80分的标题和内容，后者对应占20分的版式。

    “做好—选题”和“做—好选题”，这是一个升阶的过程。需要对自身

    从事的行业领域进行长期观察、深入思考以及拥有常人难以企及的敏感

    度。

    “做对—编辑”到“做—好编辑”，考验的是理解能力和审美能力，在

    这个过程中短期内技巧得以提高。

    所以，对于从事新媒体内容岗或者编辑岗的运营者，我建议先拿下

    编辑排版这20分，当作自己的一技之长，然后随着对行业的不断深入，挖掘剩下的80分。根据表2-1，测试自己的能力如何。

    表2-1 测一测：你的图文模块有几分

    41

    (续表)

    42

    用的图片。

    用途时，涉及的时间和经济成本会非常高。因此，推荐使用免版权可商

    使用图片时首先要关注图片版权的问题。特别是当将图片用于商业

    封面

    性。

    评分结果：0～10分，需补充基础模块；11～20分，需优化升级；21分及以上，不断强化品牌调

    注：(未想过，0分；已有可优化，1分；已超竞争对手2分。)关于封面，还有几个具体标准：比例符合官方推荐，图片贴合标

    题，画质清晰，风格统一，有设计品牌相关元素；在此基础上，能做到

    栏目化从而产生一种延续性，会更加分(如图2-1所示)。

    43

    藏。

    觉察到，此内容与自己有关、有用；关键词尽可能前置，避免被折叠隐

    词，少用形容词，抛出疑问或营造价值感；核心目的是让用户通过标题

    内，这样当多图文时，头条标题不会大比例遮盖封面；多用数据、动

    在具体操作上，笔者提供一些建议：尽可能将长度控制在2行以

    一。

    话，也就是通过标题形成品牌调性，也可看作品牌人格化的表现形式之

    是不涉黄、不涉政、不涉虚假言论；更高诉求是说出有自己独特风格的

    标题的基本原则是说真话、说“人话”、说有信息量的话；基本要求

    标题

    图2-1 JZCreative推送封面

    44

    于静态图。在设计风格方面，可参考成熟的商业类、时尚类的新媒体或

    计图片时，最好与slogan相结合，采用动态图，因为在形式上动态图优

    一张有趣且突显格调的品牌图，通常承载着企业的品牌形象。在设

    品牌图

    “洞见·价值·美感”——大家

    “读Linked In，有干货，更有态度”——LinkedIn

    “除了干货，其他什么也没有”——JZCreative

    例子。

    如果都没有，那就需要结合上面两个角度重新设计。举几个不错的

    栏目，而该栏目是否已有了slogan。

    是否有稳定且持续输出的价值观，也就是单篇图文是否归属于某个固定

    是否已有广告语，通常体现在公众号的企业介绍；其二，单篇图文背后

    对于图文开头的广告语设计，运营者要考虑两个维度：其一，企业

    slogan

    成为1%幸运儿”，较直接的理由如“点击领取99元运营大礼包”。

    调；二是给出关注理由，让用户产生价值感，委婉一些的理由如“点击

    如果要引导关注，那么有两个建议：一是做好设计，提升品牌格

    硬。

    看，用户刚打开一篇图文，就看到让自己关注的引导语，会感觉很生

    语。从用户关注流程来讲，这确实是步骤最简便的方法。但是从位置来

    微信图文顶部经常会出现“点击上方蓝字，关注我们”之类的引导

    引导关注

    化，与用户互动。比如，内含福利的、文末报名的，等等。

    除此之外，还要有意识地将作者栏当作广告位运营，尽可能使品牌人格

    则别漏填作者栏。如果是自己平台的原创内容，那么别忘加原创标识。

    作者栏的首要原则就是不能为空。如果文章有原创作者或者来源，作者栏

    45

    修改，突出想传达给用户的关键信息。

    刻。也就是在保证内容原意不变的基础上，将内容重新分段甚至删节和

    处理正文的时候，其实是考验编辑的“同理心交叉处理”能力的时

    篇“有生命力”的文章。

    正文是一篇作品的“核”，它蕴含着创作者的“魂”，读者更愿意看一

    正文

    用户有什么意义？我的角度是什么？我可以做得更好吗？

    推荐语时，要琢磨这几个问题：为什么选择转载这篇？这篇文章对我的

    看作在外来文章和本平台用户之间，架起一座熟悉的桥梁。在写前言或

    特别是对于转载的文章，尤其建议运营者养成写前言的习惯。这可

    用是帮助读者更便捷、更清晰地理解文章，让用户快速形成一种预期。

    人称或第三人称表达你对文章的理解或者关键信息点。这段话的主要作

    在一篇独立内容的正文之前，可以加一段推荐语。这时可以用第一

    前言

    性。

    此部分内容除了能给予创作者应有的尊重，也可以增加文章的专业

    制作等。

    品、来源、作者、编辑、排版、插画、创意、校对、采访和音(视)频

    信息较多，需占3行以上，那么建议放到文末。常用的信息栏目有：出

    图文制作或来源等信息，可以放在文首或文末。如果涉及的人员或

    信息栏

    权风险等图片使用基本规范。

    能够承接标题的意义或者场景。其次，符合比例协调、画质清晰、无版

    可直接沿用文章封面，也可重新挑选。首先，核心原则是“应景”，图片

    如果品牌图设计比较复杂，则可多从内文封面上下功夫。此部分图

    内文封面

    杂志。这部分的难度很大，原因在于很多优质作者在产出内容时，自身的

    专业背景及环境会把他置于较高的位置，然后他习惯性地用自上而下的

    视角表达，导致一定的阅读门槛。这时，普通用户即使知道内容有价

    值，也会被很多琐碎的知识点、生僻的专业词等吓退。随之，这篇文章

    的后期传播或转化都会受到影响。

    在作者思维和用户思维之间，找到一个平衡点，搭建一个顺畅的阅

    读场景，才是编辑的核心竞争力。

    在具体实操方面，笔者提供一个上手模板及若干建议(如图2-2所

    示)：

    46

    47

    · 加粗字色000000(更突出)；

    · 正文字色3f3f3f(更柔和)；

    · 字体(微软雅黑或Optima Regular)；

    · 正文用15号字(合理区间为14～16号)；

    图2-2 正文样式

    48

    的形式多种多样，可以是“数字+线条”，也可以用“logo+数字”等。

    以通过第三方编辑器或者一些智能设计网站完成分割线的设计。分割线

    不过，我建议用更专业的方法操作，即定制品牌独有的分割线。可

    形成明显的留白，这也能起到分割的作用。

    内容确定。另外，比列数字还简单的方法，就是前后文之间多空几行，4……”或“一、二、三、四……”具体用不用或者用哪种，都要根据具体

    最简洁的分割方法是给文章内容排序。比如，用“1. 2. 3. 调整用户的阅读节奏。小标题和配图也有这方面的作用。

    GIF。其实，分割线的目的很简单：划分前后段落，让结构清晰，甚至

    抛开传统的、单调的横线，或者与文章风格不统一的欧式花纹或

    分割线

    当遇到转行时。

    第二，从具体细节讲，优先考虑手机屏幕尺寸较小的用户，特别是

    —机型分布TOP10”中，用户机型最多的那一款作为版式设计的依据；

    第一，从大方向来说，要以微信公众号后台“用户分析—用户属性

    许偏差。所以在排版时，运营者需优先考虑两个原则：

    然而，最终图文样式会因用户手机尺寸及系统设置的差异，产生些

    · 手机1屏内，颜色不超过3种(黑、白、灰除外)。

    · 手机1屏内，重点句子为3句以下；

    · 手机1屏内，文字2段以上；

    · 字间距0.5mm(单行文字留白)；

    · 行间距1.75mm(多行文字留白)；

    · 段后距5mm(图文上下留白)；

    · 页边距16mm(图文左右留白)；

    · 两端对齐(模块化)；

    · 注释字色888888；

    · 注释字用13号字(合理区间为12～14号)；

    49

    但在实际操作过程中，我们需要问自己：第一，配图是否让内容更

    面，我们提倡多使用图片。

    否一定要添加配图”，集中探讨。正因为“一图胜千言”，所以在意识层

    前文提到图片的基本使用规则，在此不多赘述。这次针对“文章是

    配图

    部分内容的总结，也可以是其中打动人心、引人注目的金句。

    辑，还要用小标题为后面的正文内容做铺垫。所以，小标题可以是所属

    因此，我们对小标题的要求很高，除了能直观表达出作者的写作逻

    数及留言水平，倒推“文章是否值得花时间细读”。

    滑到底部，通过小标题掌握文章的结构和逻辑，最后结合阅读量、点赞

    识较强的用户来讲，通常的阅读过程是点击文章标题，然后快速从顶部

    小标题的设置，对文章的结构层次有巨大的作用。对于部分自主意

    小标题

    插入视频；第三，视频时长不少于1秒，不多于10小时。

    讯视频上传后添加，或者通过添加视频详情页链接以及公众号文章链接

    号后台上传的视频，不能超过20M；第二，超过20M的视频需要通过腾

    就插入视频而言，需注意平台官方现行的规定：第一，用户在公众

    的视频。

    在大众在微信图文端观看视频的习惯还没养成，因此不适合10分钟以上

    短视频无疑是未来承载内容的最佳方式之一，要抓住这个趋势。现

    视频

    整。

    出的机会；在上传音频的时候，标题设置要巧妙，确保图文能展示完

    在制作原创音频时，最好加上专属的片头、片尾，不要放弃品牌露

    形象打造。

    音频内容更适合3类场景：早间新闻读报、晚安美文电台、人格化

    音频好懂；第二，配图是否让阅读节奏更顺畅；第三，配图是否在视觉上更

    美观。然后培养审美，建立自己的图片库。

    图片注释

    关于图片注释，除了图片的信息介绍，如来源、版权、作者、名

    称、含义、时间、人物等；还需要结合上下文内容，通过一些符号或

    emoji表情，如▼、▲、 、 等，标出图片对应的位置。

    50

    篇文章中与读者进行更深层次的沟通。可尝试的形式有发起投票、抛出

    在日常运营中，建议在文章底部设置固定的“互动”栏目。尝试在每

    刻。

    更紧密的联系，最好能够让用户产生具体行为，这样用户的记忆会更深

    互动的意识最好贯穿于整个图文的处理中，让内容与读者之间产生

    互动

    第三，多用图，可根据标题重新设计适合底部转化的封面。

    第二，少推荐，推荐的内容尽可能在5篇以内；

    第一，要精准，和当前文章主题有直接相关的内容优先；

    荐列表。运营者在做往期推荐时，需遵循以下原则：

    为了带动图文的二次传播，不少人会在图文底部，放上往期文章推

    往期推荐

    章有删节，那么也需要做出说明。

    有，我们的发布是经过授权的，如需转载请联系某平台或某人。如果文

    声明，关键要把信息写清楚，比如：文章来源，作者是谁，版权归谁所

    这部分的内容，建议放在“end”之后。不论是原创声明，还是转载

    版权声明

    但当正文后面还有其他内容时，这个“end”就起到了分割线的作用。

    正文的最后，可以给出一个“end”或“完”。这并非是强制性要求，end问题、引导留言、鼓励点赞、鼓励分享、设置话题、预告活动、宣布抽

    奖、公布中奖、猜谜、冷笑话、金句摘录等。

    二维码

    二维码的价值已经由引导关注的功能性，渐渐往品牌包装的视觉性

    过渡。因为二维码本身具有信息获取或网站跳转的功能，不具备差异

    性，所以建议花精力设计二维码的样式。

    阅读原文

    阅读原文以前是早期公众号图文页面中，唯一可跳转外部链接的入

    口。虽然现在文章跳转的功能已经被新的超链接机制替代，但对于未认

    证的订阅号而言，它仍是一个关键的外部链接入口。

    竞对内容分析表

    持续跟踪同行竞品的内容及数据，能够有效帮助我们优化内容选

    题。建议选择5～10家竞争对手，进行数据追踪、分析并做出评价及找

    出可借鉴之处。此处提供一个模板(如图2-3所示)，读者可结合自身

    实际情况增删改补。

    图2-3 竞对内容分析模板

    建议将表格选择在线共享，进行日更，更新后第一时间同步发送给

    相关负责人。

    51栅格系统与版式设计

    你可能没见过栅格系统，但是它时刻协助着你的新媒体运营工作。

    作为运营者，你不必像前端工程师和平面设计师一样对它了如指掌，但

    是你或多或少应该认识它。

    栅格系统(Grid Systems)，是无论网页前端设计或平面视觉设计

    都常用到的校准工具(如图2-4所示)，在布局、自适应等终端展示中

    具有举足轻重的作用。在sketch等UI设计软件中，它往往是开启项目的

    前几个设置步骤之一。它从表面看，好似一个网格阵列，衬在提供交互

    和展示的平面下，开发者或设计师基于精确的网格线进行具体的布局设

    计。无论素材是矢量(代码)还是位图(对象)，最终都将以栅格化的

    方式交付给用户并隐藏栅格系统。

    52

    53

    在图文正文页，标题、作者、账号名以及下方诸如阅读原文、阅读

    等。

    块向上移动吗？移动多少？最多保留几行？整体模块要不要放大？等

    统，确定图文模块响应式的布局效果。比如，标题过长后，应让标题模

    图展示的空间等都要基于栅格系统的设置。微信团队尤其要通过栅格系

    决定公众号会话窗口内图文模块的形态。具体而言，标题的位置、封面

    微信团队在开发微信公众平台的图文呈现功能时，要通过栅格系统

    举一个具体的例子。

    齐就可以了。

    多布局和设计工作就不必再计算具体位置参数，只需要快速和网格线对

    个格之间的间距被称为“水槽”。一旦对界面完成了这样的网格等分，很

    图2-4是在栅格系统的12、6、4、3、2、1列式不同的网格效果，每

    图2-4 栅格系统量显示、点赞、评论等，也都是提前由微信团队基于栅格系统分配好

    的。你只能调整它们极其有限的参数，比如具体文本。

    但对于正文，微信团队除了在栅格系统中决定了它的宽度和位置，其余内部的富文本就由你斟酌了。在一些大品牌的运营过程中，这篇富

    文本区的排版之后就会基于栅格进行排版，最终呈现出和普通新媒体截

    然不同的内容与视觉张力。

    所以对平台管理方和新媒体运营方而言，前者将它用于设计“脚

    铐”，后者带上它的“脚铐跳舞”。

    图文版式设计基本要素

    图文，是一种新媒体领域相当常见的显示形态。那么说到高颜值的

    图文类新媒体账号，你会想起哪几大品牌？我想诸如阿迪达斯、卡地

    亚、星巴克、肯德基等一定会入选(如图2-5所示)。

    54

    是不够的，最终要看它向读者传递了多少信息。”

    法国著名作家思想家罗兰·巴特说：“仅仅体现创作一篇文章的初衷

    图2-5 高颜值的品牌新媒体账号笔者在此前已经强调，对于任何一个交互界面而言，用户都首先识

    别形状、颜色、版式等信息，然后才具体理解文本。所以，版式设计是

    一篇新媒体优质图文的大前提。我们以星巴克中国某日的推文(如图2-

    6所示)为例，分析其中用到的设计理论。

    55

    专业设计学概念，但“衬线”与“非衬线”是要完全掌握的。衬线(Serif)

    在字体设计领域中，运营者暂时没有必要了解诸如“肩”“耳”“尾”等

    衬线与非衬线

    本。因为在图像中直接做栅格设计就可以确保文字布局的绝对合理。

    达到它们的文本编辑条件要求，所以广泛采用图片来替代HTML5文

    们有极其严苛的栅格设计习惯，以至于微信图文的富文本编辑功能没有

    往往阅读性不佳，令运营者抓狂。以星巴克等头部品牌号为例，由于它

    而不具备栅格系统，或栅格系统响应式功能不完备的文本编辑区，于传达信息和交流，强调设计对象的可读性和易读性。

    一，极其注重平面造型元素之间的和谐关系。他认为版式设计的目的在

    瑞典国际主义平面设计大师艾米尔·鲁德是栅格系统的推崇者之

    文字

    图2-6 “星巴克”推文是字符笔画结束时额外的延伸或装饰，具有这个特征的字体一般被称为

    衬线字体，而没有这个特征的字体则是非衬线字体。比如，对字

    母“a”而言，它的衬线体和非衬线体分别如下(如图2-7所示)。

    56

    儿现象”。有不少诗歌体文本内容呈现在小尺寸手机上时，往往会在居

    在正文中，尤其居中对齐的连续换行文本更需要注意是否存在“孤

    要注意这一问题。

    加并遮挡或占用其他信息元素。很多浮于封面图上方的标题的撰写都需

    体验；另一方面，比如标题的“孤儿现象”，极可能导致标题面积占比增

    现这种现象。一方面，“孤儿现象”破坏文本的美观性，割断用户的阅读

    标点的现象。新媒体的标题、正文、摘要等各类文本位置都需要避免出

    误。“孤儿现象”通常指一个文字段落的末行中仅有少量文字，甚至仅有

    平面设计学中的“孤儿现象”是硬核运营必须杜绝的一种新手式错

    “孤儿现象”与“寡妇现象”

    如此。

    包含两种甚至三种衬线字体，那么通常比较难驾驭，星巴克的设计就是

    发布，运营者都要注意原则上不超过三种字体。而这三种字体中，如果

    对于一个画幅或者一个短篇幅视觉设计，无论你在哪种新媒体平台

    归为似衬线字体，而黑体、苹方体等就可以归为似非衬线字体。

    进行字体搭配时就会更方便。那么诸如宋体、姚体、楷体等字体都可以

    择的便捷性，我们可以将汉字中的“笔锋”认定为一种衬线，这样我们在

    汉字在严格意义上不存在衬线或非衬线的定义，但是为了设计时选

    图2-7 字母“a”的衬线体和非衬线体中情况下换行1～2个字，导致视觉效果令人尴尬。星巴克的案例中也有

    这样的文案内容，它通过图片化，确保了“孤儿现象”在任何机型上都不

    会出现。

    “寡妇现象”普遍存在于2～3栅格的移动端和2～6栅格的网页端。当

    文本通过栅格分成多列时，如果一个段落的最后一列中仅有少量文字内

    容时，就形成了“寡妇现象”，这一现象同样也需要避免。

    字偶距

    相比大多数运营者都知晓的字间距，字偶距(Kerning)是一个更

    专业的字距概念，它在字体设计领域往往起到细节雕琢的作用。最典型

    的字偶距案例，是2014年时谷歌LOGO的一次改版，当时谷歌将原

    LOGO中小写的“g”向右平移了1个像素，而“l”则向右和向下移动了各1

    个像素(如图2-8所示)。

    57

    侧无法自然对齐。所以当全角字符(如汉字)和半角字符(如西文和数

    的呈现效果参差不齐。究其原因，全角字符和半角字符的衔接导致最右

    公众平台推送纯文本时，结果内容的右侧往往歪歪扭扭，不同系统手机

    在新媒体领域，有诸多平台不支持富文本编辑，包括当我们在微信

    题。

    整，而是在进行纯文本新媒体编辑时，用一个讨巧的办法解决对齐问

    计。笔者介绍字偶距的目的，不是为了让大家在图文排版过程中逐字调

    看起来完全和谐，需要通过更精确的像素级调整，才能实现更优化的设

    这意味着，计算机设置的字间距有时候不足以使不同字符间的距离

    图2-8 Google的字偶距设计效果对比字)排列时，我们就可以通过一种类字偶距的方式——通过半角空格，手动对齐。

    实际上在专业的电子文档排版中，有这一条重要规范。如果你阅读

    报纸、杂志等媒体刊物，就会发现它们的排版一定遵循用半角空格隔离

    半角与全角符号的定则。不过，当一个半角字符衔接了一个全角标点符

    号时，这种半角空格式字偶距是不需要的。

    CSS字体修改

    在当前富文本编辑功能比较强大的新媒体平台(如微信公众平台)

    上，可以实现CSS字体调整。由此，我们可以针对iOS系统、安卓

    (Android)系统等分配最优雅的非默认字体展示，毕竟不是每个新媒

    体运营者都有能力像星巴克这样，条条都是一图流。

    在微信公众平台图文编辑器中，我们可以针对iOS设置一种默认字

    体。但是如何进一步确保iOS系统上的中英文、Android系统上的中英文

    字体都按照运营者的预期展示呢？这时我们就需要通过CSS进行设定。

    这种差异设定带来的美观度是显而易见的。以微信图文默认字体替

    换为iOS系统特有的PingFangTC-light字体为例，呈现的效果更具有艺术

    感(如图2-9所示)。

    58

    图2-9 差异设定带来的美感其实对于任何机型的设备而言，都有阅读字体和UI字体。微信图文

    本身就是HTML5页面，可通过微信内置的TBS浏览器打开它，所以它是

    由HTML代码中字体的显示规则和手机终端支持的字体规则这二者决定

    的阅读字体文本。当我们在微信图文的代码中不对字体做任何申明时，各系统默认字体如下：

    · Android采用DroidSans-Bold(西文)、DroidSansFallback(东亚

    文)，而最新版的Android则采用全新的思源黑体，英文采用Rotobo；

    · iOS采用Myriad Pro(西文)、华文细黑(中文)，而从iOS 9开

    始，中文采用苹方体，英文采用San Francisco；

    · Windows采用Segoe(西文)、微软雅黑(中文)。

    但如果我们用代码做了额外申明，那情况就不同了。当然Android

    在申明微信图文字体后，字体发生调整的幅度最小。一方面，Android

    的开源导致不同手机的厂商系统千差万别，适配性不统一；另一方面，谷歌为Android默认适配的几款中文字体本身视觉差异不大。所以更多

    时候，Android用户会在手机中安装自己喜欢的字体，让界面内所有文

    字都自定义显示。

    iOS在申明微信图文字体后，字体可能发生显著的效果改变。iOS的

    封闭操作系统使大多数苹果用户的手机系统情况接近，而苹果公司一向

    在美观上下足功夫，譬如MAC OX中预装的字体包括了苹果丽黑、华文

    细黑、冬青黑体、兰亭黑和黑体-简等。而在手机上微信图文字体的优

    化方面，中文字体一般用“PingFangTC-light”，也就是用“蘋方-繁細

    體”表现更优雅的视觉效果，而西文字体则一般用“Optima-Regular”优

    化。那么CSS字体修改是如何实现的(如图2-10所示)？

    59

    60

    那么，有哪些免费字体是可以在商业设计中应用的呢？这里简单推

    北大方正保留。

    Windows用户均可放心使用；但是以商业发布为目的的字体版权，仍由

    为目的的打印，微软已经向方正支付了版权授权费用，所有正版

    分为两个部分：在Windows系统的内嵌使用，包括屏幕输出和个人使用

    微软雅黑字体是北大方正电子有限公司设计开发的字体作品。版权

    赔。

    体，版权属于方正字库，如果未经授权在设计品中使用，就会面临索

    一个典型的问题就是，大多数运营者根本不知道微软雅黑属于付费字

    但是在图像等非文本设计中，就非常需要谨慎对待字体版权问题。

    定是操作系统已经购买的字体。

    要顾虑“CSS字体修改”行为是否侵权。因为但凡能被调用的字体，就一

    对于文本输入而言，字体版权是由操作系统支付的，运营者并不需

    字体版权

    号，基本都采用了这种文字显示方案。

    效果。现在绝大多数微信公众平台，包括时尚、美妆、艺术类的头部大

    通过以上CSS代码策略，我们可以驾驭多种机型的终端新媒体展示

    字体都不能调用，那就使用系统和App要求的默认字体显示。

    内可以调用到Helvetica显示吗？可以，那就调用并显示；如果最终三个

    light显示吗？可以，那就调用并显示；如果不能，那这段文字在本系统

    调用并显示；如果不能，那这段文字在本系统内可以调用PingFangTC- 体：这段文字在本系统内可以调用Optima-Regular显示吗？可以，那就

    示。即当手机打开这个页面并读取该段落时，会根据要求选择系统字

    体的显示设定了Optima-Regular、PingFangTC-light、Helvetica的排序显

    CSS排版的部分快速学习。上述代码描述的一个

标签段落内，对字

    如果暂时还不理解CSS的基本书写规则，那么你可以先翻阅到后文

    图2-10 CSS字体修改的实现

    61

    司非常看重的一件事。

    还会自行设计字体用于主标题和短段落等。因而尊重版权往往是著名公

    而如星巴克这一级别的头部品牌，不仅会大量购买字库，很多时候

    运营基本准则之一。

    权、购买并使用正版字体从事商业活动，是每一个新媒体人应当遵循的

    库。整个过程历时通常2～5年，凝结了字体设计师极大的心血。尊重版

    设计和扫描，然后在矢量软件中优化路径细节，最终才能完成整个字

    定、结构与造型设定、模板字设定等初始过程，再依次对逐个文字进行

    一个中文标准字库有至少6 763个字符。造字要经过笔体和自重设

    明显优于经过运算产生的伪斜体和伪粗体。

    的大型字库则独立制作不同版本的粗细和倾斜字库供单独调用，效果会

    是通过对矢量的运算和对文字进行外描边或斜向变形产生的。真正专业

    体的概念。在诸如Word等本地编辑器中的加粗、倾斜等功能，本质上

    关于字体，还有一个设计学常识，那就是斜体伪斜体、粗体伪粗

    体，主创人员承诺站酷字体系列开放给所有人免费使用。

    方合作设计，共同发布的一系列公益字体。站酷系旗下包含这四种字

    黑等。站酷字体是2014—2015年站酷集合站酷各种字体设计爱好者及官

    站酷系，包括站酷酷黑体、站酷意大利体、站酷快乐体、站酷高端

    载和使用。

    费开源方式提供，支持多种语言，适合设计、开发人员甚至普通用户下

    粗细的字体，可以满足不同场景下的文字显示需求。思源系字体通过免

    ExtraLight、Light、Normal、Regular、Medium、Bold和Heavy共7种不同

    及。思源系支持简体中文、繁体中文、日文、韩文及英文；支持

    套字体设计优雅，显示效果优秀，思源黑体相比微软雅黑有过之而无不

    一款免费、开源的字体，也叫作“SourceHanSans”或“NotoSansCJK”。整

    思源系，如思源黑体、思源宋体等。它是谷歌和Adobe合作推出的

    荐几款。留白

    留白，是给予页面呼吸的空间。

    留白指页面排版上除文字与图像外的空白区域，例如行距与间距。

    这个术语源于白纸上可见的空白区域。适当地留白可以使页面排版看起

    来更整洁、优雅，提高设计水平，增强艺术感。

    更重要的是，留白在交互设计层面上，意味着用户更高效、更准确

    地锁定视觉目标。在交互设计七大基本原理中，有一项费茨定律

    (Fitts'Law)。它指从一个起始位置移动到一个最终目标(T ，Target)

    所需的时间由两个参数决定：到目标的距离(D )和目标的大小(W )

    (如图2-11所示)。

    62

    留白

    具有留白的内容，留白是W 的一部分，因而D 就趋于无限小，W 则由

    排列十分密集的页面内容，实际上意味着D 较小、W 也较小；而

    部分。

    并非如此。因为留白并不代表“无”，它也是T (Target)的一

    道而驰的吗？

    中，看似D 特别大，W 则往往较小，难道留白和交互设计的原则是背

    我们会直观认为交互距离越短，目标越大，交互效率越高。而在留白

    尽可能小，所以D 应当尽可能小，而W 则尽可能大。在这种情况下，在这个公式中，log以2为底的对数函数本身过(1,0)，为了让T T = a + b log2 (D W +1)

    其数学公式表达为：

    图2-11 决定目标的两个参数和信息共同组成，面积庞大。所以当用户滑动屏幕并用视线和图文产生

    交互时，它高度符合交互设计的基本原则。留白的方式是多种多样的，以下是四种基本的留白形式(如图2-12所示)。

    图2-12 四种基本的留白形式

    平稳型：留白空间在图样中呈对称状，居于次要地位，留白为了衬

    托主要内容。

    活跃型：非对称性构图强调了一种动态节奏。由于打破了设计构图

    的平衡，页面十分有活力。

    渐退型：这种画面会形成一个大面积留白区和一个视觉焦点。

    主导型：内容成为主要关注点。

    在阿迪达斯、卡地亚、星巴克、肯德基这类顶尖案例中，不同类型

    的留白往往穿插应用或复合应用，这成为它们版式设计的一种典型风

    格。

    平衡

    设计横向版面时，各个元素应产生和谐感。对内容运营而言，平衡

    设计往往出现在电商、PC网页、手机横屏响应和iPad屏等情形中，一般

    可以采取三种基本的页面布局方法：对称式、非对称式及纷扰式(如图

    2-13所示)。

    63图2-13 三种基本的页面布局法

    对称式：严谨，有正式感。

    非对称式：读者从一列前往另一列时，感受到更灵活的阅读节奏。

    纷扰式：更自由奔放的主题，是时尚类、音乐类、美食类内容的首

    选形式，当然也是最难驾驭的一种版式设计。

    尤其对电商而言，充分掌握“平衡”对提高商品点击率至关重要。即

    便使用第三方电商平台，电商运营者也一定要注意多个列和行的布局关

    系。在后文中，我们将结合差评案例和访谈，解读电商页面布局和运营

    的细节策略。

    用户“订阅”动机

    “平衡”在新媒体运营中另一个特殊却普遍的应用是微信公众平台顶

    部的分栏设计。JZ多媒体解决方案于2015年起，开始向行业内普及这种

    设计的意义。如今官方账号顶部依然保持栏目设定的使用并基于CSS

    

布局(如图2-14所示)。

    64

    65

    条细读广告；而是直接翻到某页，直奔其最喜欢的主题或者最喜欢的作

    志的长期读者，绝不会打开杂志后从第一页开始就一页不落地阅读，逐

    的报刊能符合他们的诉求？这就要求报刊要能给用户一种预判。一份杂

    (比如一年)的费用，以在未来稳定获取报刊。读者凭什么相信你未来

    “订阅”是一种预支行为。在报刊领域，它意味着你需要支付长期

    文字内容、版式设计思考，远远达不到对“订阅”机制的深刻理解。

    本和“订阅”是一种截然不同的行为，所以新媒体运营者仅从封面图像、的图像，也可能是本期的特稿，抑或它精致的排版，等等。但是购买单

    “订阅”一词，源自报刊。我们决定购买一份杂志的原因可能是封面

    它的定位如此。

    号、企业号三大类。订阅号之所以被称为“订阅号”，是因为微信团队对

    见于侧重文字内容的平台。我们都知道微信公众平台分为订阅号、服务

    “订阅”是一种广泛应用于新媒体领域的用户交互行为设计，尤其常

    阐述这种行为的本质，让大家知其然更知其所以然。

    辑是什么？追根溯源，是“订阅”这种新媒体平台用户行为。在此，详细

    合自己账号的调性做了改造和优化。那么在它背后，交互设计优化的逻

    至2018年，已经有许多新媒体运营者使用类似的顶部设计并充分结

    图2-14 JZ多媒体解决方案官方账号的顶部设计者的文章——这是因为读者有预判。

    预判基于很多要素：明确的完整目录、清晰的内容分栏、持续的作

    者输出……这些因素移植到新媒体中，也能使新媒体运营者给订阅者带

    来预判。很多新媒体运营者疲于寻觅选题，逢热点必凑，长期运营节奏

    混乱，没有明确的内容分类……久而久之，用户发现既不理解账号的调

    性，又不知晓内容的范畴，那么无非取消订阅或不再打开。

    顶部分栏，就是新媒体的“目录”。“平衡”是分栏设计整体架构的特

    点，它清晰地说明了账号的内容分类。破坏“平衡”的高亮，是点明本文

    的版面所属的标签，而它也是提高用户留存率和打开率的重要工具。当

    然除了顶部分栏外，正文底部关键字区、BANNER、标题的“XX｜”式

    关键字命名法都起到了杂志化的运营效果。

    结构层次

    通过将各个元素布局在不同的位置，可以强调作品的层次感。可以

    通过组合、颜色、共性等引导读者并传递有效信息(如图2-15所示)。

    组合：经过精心设计的元素进行的组合，强调某些重点，表达图形

    语言。

    颜色：颜色可以增加层次感，同时和主要内容形成呼应或对比，它

    可以帮助读者区分内容。

    共性：颜色、大小等参数经过校准具有统一性和连贯性，以形成重

    点。

    66

    导向：图片、文字等通过方向性设定或外部引导，帮助用户朝着预

    图2-15 各元素布局

    67

    基于接近性与连续性或者相似性，抑或是对比？

    出“LOGO要大”。LOGO为什么要大？你的理由基于完整和闭合，还是

    在和设计师交流程中要基于设计学原则提出需求，而不是只随意喊

    系的一部分。运营者不见得需要全面掌握，但是一定要善于应用，尤其

    格式塔原理是专业设计师研习的基本理论之一，也是心理学知识体

    多，目的是让两个部分无法融为整体。

    对比结果。这就是平面设计中对比原则的来源。产生对比的方式非常

    但凡不依照格式塔原理而无法被纳入整体的设计，都会带来强烈的

    整体结构。

    应平面设计中的重复原则。首尾重复、内容重复的设计，可以形成一个

    格式塔中的相似性原则，表示相似的部分容易被判断为整体。它对

    临近和具有连贯轨迹的设计可以使用户认为它具有整体性。

    整体。该原则是平面设计中亲密原则的基础。同样在版式设计中，位置

    格式塔中的接近性与连续性原则，指距离较近的部分容易被判断为

    体，而非彼此独立。

    齐、右对齐、居中对齐、分散对齐等形式的目的在于让段落内容形成整

    易被判断为整体。平面设计中的对齐原则正来源于此。我们设计左对

    格式塔中的完整和闭合倾向原则，说明整体形成闭合形状的部分容

    要素的特性并不是孤立存在的，而是基于和其他要素的关联而存在的。

    要素的印象，知觉都会认为其牵连其他要素或要素组合的整体。且每一

    格式塔原理认为，人的知觉感受大于视觉感受，即我们对任何一个

    对比原则，而这四大原则又是心理学中格式塔原理的应用。

    结构层次布局源自平面设计中的对齐原则、亲密原则、重复原则和

    格式塔原理

    力。

    规格：通过改变内容的大小、位置等参数，吸引或分散读者的注意

    期重点和预期顺序阅读。因为在设计学中，每一种存在，都有其理由。

    工具与软件准备

    现在，你已经理解了版式设计的基本原理。在开始接下来的更多实

    操教学前，我希望你在工具和软件方面做好充分准备，它们包括：

    · Chrome浏览器；

    · Sublime Text 23(可用Dreamweaver和微信开发助手替代)；

    · 135编辑器(在线工具)；

    · Adobe Photo Shop；

    · Adobe Illustrator(可用CorelDraw替代)。

    后续的所有快捷键行为主要基于上述几款工具和软件，另外对于

    Windows和Mac OS而言，ctrl键和command键等位替换，alt键和option键

    等位替换。如果你对以上工具都准备妥当，就可以继续阅读了。

    68

    当然，第三方排版的使用不是本书的重点。准备135编辑器主要是

    135为代表的编辑式排版；(3)以壹伴插件为代表的插件式排版。

    其中按功能大体分为3种：(1)以秀米为代表的模块式排版；(2)以

    对于富文本类新媒体而言，第三方排版编辑器的使用是行业常态。

    第三方排版

    HTML5与CSS3

    69

    的作用(如图2-16所示)。

    之于HTML5就好比皮囊之于骨肉，具有对框架内容具体的填充与表达

    什么是CSS？作为一种层叠样式，你可以认为CSS3(第三代CSS)

    CSS盒模型

    升运营效率，那么推荐安装壹伴插件。

    分析、永久链接等“奇技妙招”方面傲视群雄，所以如果你希望极大地提

    直接运行，极大扩充了后台的界面功能和运营服务。在导入图文、数据

    用的插件。而壹伴通过开发Chrome插件，在微信公众平台原生界面内

    一个缩影。Chrome的插件开发生态向来“大神横行”，诞生过不少超级好

    以壹伴插件为代表的插件式排版，是Chrome开放平台优质插件的

    平的CSS排版，那么135编辑器是可行的选择。

    唯一一款可以完全复制SVG交互代码的编辑器。如果你正在进阶更高水

    辑器的好处是自定义程度更高，而且在已知的同类型编辑器中，135是

    其HTML5编辑器功能对会运用前端语言的运营者非常有必要。这款编

    以135为代表的编辑式排版对高阶富文本如SVG设计是最友好的，为代表的模块式排版第三方编辑器实现。

    加、错位摆放的效果。所以当你对这种布局束手无策时，建议通过秀米

    的边距参数以及浮动方式，使得不同元素之间形成彼此叠

    要在富文本中通过HTML5原理形成，就必须基于如和

    了版式布局中的纷扰式，基于制图工具的纷扰式操作相对便捷，但如果

    模型原理的编辑器。这种编辑器极大的优势在于纷扰式布局。上文提到

    以秀米为代表的模块式排版是操作上最直观，同时也最符合CSS盒

    帮助，所以简单介绍第三方编辑器之间的几个应用差异。

    为了调用其HTML5编辑功能。但是笔者还是希望对行业新人读者有所

    70

    [1] 官方说明。

    套等各种组合方式。下面我们介绍更多具体参数，部分描述为W3C组织 元素、块级元素或节，所以它们可以产生上下堆放、平行堆放、盒子嵌

    盒子和盒子之间可以有不同的堆叠方式，因为这些盒子可能是行级

    放在地上的，而不是挂在天花板或其他什么地方。

    地方，就取决于它的margin值(外边距)，通过它可以确定这个盒子是

    虚线、有颜色的，或者不可见的，等等。而一个“盒子”位于网页的什么

    距)。盒子本身为border(边)，它或厚或薄，在CSS中它也可能是0、得内壁与物品保持足够的距离，这种距离关系就是padding值(内边

    的物品和快递盒本身之间并不是空荡荡的，而是往往有一层缓冲物，使

    品，它位居盒子最内部；而网页最核心的是content(内容)。快递盒里

    角)开始堆叠排列。对于一个快递盒而言，最核心的是你购买的快递物

    把网页上的不同元素想象为快递盒，它们都是从网页原点(左上

    图2-16 CSS盒模型

    71

    到了基于的分栏，也可以采用块级的section加float属性实现分

    浮动。块级元素一定不能出现在同一行吗？未必。比如之前笔者提

    float

    分布由text-align决定。

    上下文内所有盒子时，会被分到多个垂直折叠的行盒内。行盒内的水平

    盒之间的水平margin、border和padding都有效。当一个行盒放不下

    块级元素拆成两个行级元素。

    行级元素内可以包含行级元素。当行级元素包含块级元素时，会被

    行级元素中的子元素

    两个兄弟盒子之间的距离由margin属性决定。

    级元素中不能同时包含块级和行级元素。

    块级元素可以包含多个子块级元素，也可以包含多个行级元素。块

    块级元素中的子元素

    线、下划线等，都要仰仗行级元素的作用。

    的宽度，不可改变。文本的很多样式渲染，比如伪粗体、伪斜体、删除

    高度、宽度及顶底边距不可设置；元素的宽度就是它包含的文字、图片

    行级元素。可以和其他元素处于一行，不用必须另起一行；元素的

    inline-level

    

、

和

。

    

、

、

、

、

、
、

、

、块级元素有：

    此，版式设计中各类独特的布局，往往是块级元素的汗马功劳。常见的

    过，块级元素也可以通过display：inline；的形式向行级元素转化。因

    可以设置的；如果不设置宽度，那么就默认为父容器块的宽度。不

    行，不能两个元素共用一行；元素的高度、宽度、行高和顶底边距都是

    块级元素。每个块级元素都独自占一行，其后的元素只能另起一

    block-level

    72

    margin

    · 所有4个内边距都是10px。

    padding：10px；

    · 右内边距和左内边距是5px。

    · 上内边距和下内边距是10px；

    padding：10px和5px。

    · 下内边距是15px。

    · 右内边距和左内边距是5px；

    · 上内边距是10px；

    padding：10px、5px、15px。

    · 左内边距是20px。

    · 下内边距是15px；

    · 右内边距是5px；

    · 上内边距是10px；

    padding：10px、5px、15px和20px。

    逻辑有相似之处，都反映了HTML5参数读取时的基本规则。

    内边距。这里请注意参数的书写方法，和本书此前提及的字体调用

    padding

    是该父容器块本身的宽度并不依赖于它。

    百分比宽度，那么百分比也是相对父容器块的content而言。当然前提

    宽度。CSS中的宽度一般指盒子模型中content的宽度。如果你使用

    width

    其内容生成块级盒；none在排版时将元素忽略。

    block生成块级盒；inline生成行级盒；inline-block生成行级盒，为

    display

    容器(包含块)的左边或者右边并依次排列的元素。

    栏，每个栏宽20%即可。所以，浮动元素就是从常规中脱离，可漂浮在

    73

    同一段代码在一个普通纯文本中如下(如图2-17所示)。

    编辑器阅读

    语法高亮能更快理解代码的意义。

    不同。在一个合理的阅读环境内，代码的展开更井然有序，通过系统的

    在Sublime Text中的阅读，和在txt文本编辑器中的阅读的效率截然

    一个合理的阅读环境

    页面)，但一定要保持阅读和书写的训练。

    样能从零开始逐行写出一个页面(何况大多数前端工程师也并非逐行写

    能力改写或书写一段HTML5增加想要的效果。你不必像前端工程师那

    高水平的运营者要能够顺利阅读并准确对照页面中的内容，而且有

    阅读与书写

    设计等都和它有关，它的使用我们会在后续展示。

    微信图文中经常应用的滚动效果，包括模拟手机页面滚动、关注小卡片

    溢出控制。其常用值有visible、hidden、scroll和auto。其中scroll是

    overflow

    padding-box：padding计算入width内。

    border-box：border和padding计算入width之内。

    content-box：border和padding不计算入width之内。

    · padding-box。

    · border-box；

    · content-box(默认)；

    属性可以为三个值之一：

    box-sizing

    为负——这也是微信图文里把字写在图片上的常见套路。

    外边距。注意相邻的两个盒子的Margin会重叠，而且Margin也可以图2-17 普通纯文本中的代码

    它在135编辑器的HTML5模式下是这样的(如图2-18所示)。

    图2-18 135编辑器中的代码

    它在Sublime Text中是这样的(如图2-19所示)。

    74

    则了解同色高亮之间一定存在某种相关性；通过完整和闭合倾向原则，楚这些代码意味着什么，但是按格式塔原理来理解，你能通过相似性原

    这三种阅读环境产生的效率是显然易见的。即便你现在还可能不清

    图2-19 Sublime Text中的代码你能判断基于对齐的代码整体性……(高亮代码方式请通过View-

    Syntax菜单选择HTML)

    所以，硬核运营不仅需要产出优质的运营内容，更要在制作优质内

    容时，部署优质的设计、开发、调试环境。

    开发者模式阅读

    编辑器阅读是一种线性阅读。由于CSS本质上是盒模型，导致线性

    阅读时，开发者无法快速理解复杂的盒子堆叠状态，同时也难以搞清楚

    代码和页面内容的关联。此时，可以使用另一种阅读模式，尤其在“不

    需要看细节，只需要看结构”的情况下更合适用这种模式。

    开发者模式的阅读工具也有很多，笔者主要推荐直接使用Chrome

    的开发者模式或者微信开发助手。后者的内核也是Chrome开发者模

    式。

    在开发者模式中，一方面你能够快速切换页面的电脑视图布局和手

    机页面布局，另一方面能够审查元素并高亮展开对应代码(如图2-20所

    示)。

    75

    图2-20 高亮展开对应代码

    76

    在135编辑器中，你需要通过Chrome自带的查找功能搜索，快捷键为

    多。另外，对于复杂的CSS设计，我们往往通过id标注某些关键代码。

    母地键入，耗费时间长。相比Sublime Text或者Dreamweaver等效率低很

    但135编辑器最大的书写问题在于非智能化，必须几乎一个一个字

    试的具体过程。

    销即可。135编辑器就是通过HTML按钮完成调试的，来回切换就是调

    况。当然此时不必紧张，只须返回非代码可视化编辑模式，按ctrl+Z撤

    点HTML按钮，那么切换回代码书写模式时很可能会发生代码错乱等情

    效果。但是注意，135编辑器的错误提示为红色，如果你忽略错误直接

    在135编辑器中，你只需要点按右上方的HTML按钮即可来回切换

    135编辑器

    形式。

    须写全，但如Sublime Text、开发者模式等高阶工具允许其缩略为

    可以使用>缩略闭合，例如在图2-15中，椭圆代码的在135中必

    元素基本都必须确保前后闭合。而且在135等初级编辑器中书写时，不

    个

结束这个盒子。除了

    换行符这类自我产生封闭的元素，其他

    要用闭合代码，有头有尾。例如，一个

的存在，必定意味着还有一

    有差别。首先要注意的是，无论在哪类编辑器中书写，HTML5语言都

    在编辑器中查看完毕并确定要修改后，书写的方式和调试的方式也

    书写与调试

    说易读性很强。

    模式右侧的代码也有缩进和折叠功能，因此除了字符稍小以外，相对来

    亲自上手试一试，你就会发现这种阅读方法的便捷性。加之开发者

    Command+Shift+C快捷键。

    用户在Chrome内按Ctrl+Shift+C快捷键，Mac OS系统用户在Chrome内按

    会在右侧展开对应代码。这一功能可以通过快捷键调用：Windows系统

    其中红框处按钮，可用于切换终端自适应情况。左侧选定元素后，

    77

    顺序是否有问题(在没有申明z-index的情况下，后写的代码在视觉上可

    查(1)代码是否闭合；(2)英文单词拼写是否错误；(3)代码先后

    多数时候CSS的BUG主要在于预期的样式没有产生。一般来说，通过检

    大多数新媒体富文本完全不允许Java Script的使用，这就意味着大

    Debug思路

    开发者模式一次性注入图文草稿并保存。

    Sublime Text或Dreamweaver等先完成本地.html的编辑和调试，然后通过

    对于硬核运营而言，其实编辑图文的策略往往是这样的——通过

    代码，单击空白区域后会闪退回原先的状态。

    的图文编辑器具备缓存功能，有时候在开发者模式中辛辛苦苦写好的新

    分，代码就会生效并载入。但是相对令人头疼的是，由于微信公众平台

    在开发者模式中，一旦编辑好一段代码，只需轻点页面内空白部

    键进行选择。

    以仅编辑Attribute参数。具体方法是将鼠标移动到对应代码上，单击右

    开发者模式中的编辑方式比较多样，可以编辑整段的HTML，也可

    开发者模式

    Sublime Text的官方教程学习具体方法。

    看。当然，Sublime Text经过配置可以让Chrome自动刷新，请参看

    Chrome中打开。每次修改完只需要保存，就可以在Chrome内刷新并查

    接。如果手动调试，那么可以把Sublime Text正在书写的.html文档在

    Sublime Text可以书写多种语言，所以调试需要进行对应的配置衔

    效杜绝疏漏导致的前端BUG。

    名号等键入时会自动生成后引号和后书名号，这样既节约时间又可以有

    供符合的联想元素列表菜单供你快速选择；另一方面，如前引号、前书

    在Sublime Text中，书写更流畅。一方面，当你输入元素时，会提

    Sublime Text

    Ctrl+F。

    78

    尽管手机用户往往非常拥护自己用的手机品牌。不过对于企业广告

    · 安卓及其他。

    · 华为旗舰类；

    · i Phone6s；

    · i Phone78 Plus；

    · i Phone78；

    · i Phone X；

    通常我们要优先保障以下适配顺序：

    时，基于px的尺寸调整在各手机终端表现不一致。当然从适配原则看，可是现在运营者慢慢发现，当排版过程中各类块级元素彼此交错

    包括微信的内置TBS浏览器，16px都是默认的标准长度单位。

    微信公众平台等图文编辑器依然采用px的字号制度。对于任何浏览器，当然，它仍是最容易被普通人和运营新手理解的长度单位。因而，实际适配时往往有很多问题。

    下，各种品牌的手机分辨率千奇百怪，因此px的设计虽然方便，但是在

    对长度单位。其原因在于像素本质上是由显示器分辨率决定的。而当

    px(Pixel)对显示器而言是相对长度单位，对于设计师而言则是绝

    px像素

    意义和应用场景。

    自适应结果笔者接下来为读者讲解当我们在书写前端代码时，这三者的

    们进行CSS布局、开发H5、设计交互图文时，它将直接关乎不同机型的

    对于硬核运营，正确认知pxemrem的意义至关重要。尤其是当我

    pxemrem

    除CSS代码没有产生预期效果的BUG。我们接下来就讲解第4点。

    以覆盖原先写的代码)；(4)pxemrem等单位引用是否得当……来排投放而言，残酷的现实依然是品牌主默认iPhone和华为旗舰机用户的消

    费能力最强。个别调性高的公司甚至完全忽略安卓适配。

    当然，开发者也要注意客户的特殊性。比如以前JZ多媒体解决方案

    为华为交付过一篇交互图文，在整个开发过程中，完全是以华为旗舰机

    和平价机的表现为优先适配的。

    em单位

    em好比数学中一个无单位的1。在浏览器默认情况下，16 px为em。

    尤其当页面内位图素材、矢量模块纵横交织的情况下，em的表现就比

    px好多了。因而em不是一个固定数值，可以根据对父元素的声明而发

    生变化，这显然使排版更自由。

    很多时候，我们无法避免位图素材的px对排版和布局的影响。如果

    以往你通过px对位图素材进行定位，那么现在可以尝试用em。以浏览

    器单位长度为概念，很多时候可以确保多机型的布局效果接近。

    rem单位

    rem是CSS3的新增单位，相比em最大的优势在于不以“父元素”为基

    准，这样可以限制嵌套多个“父元素”产生的尺寸连锁反应问题，只以

    HTML根元素为参照。于是，可以说rem兼容了相对尺寸和绝对尺寸的

    共同优势，在布局时更方便。

    通过代码反洗稿

    优质内容、版式往往面临被洗稿 [2]

    的风险，无论是发文声讨还是

    对簿公堂，都需要强有力的证据支撑。代码不会说谎。对于洗稿行为，其实有一些基于HTML5书写规则的方式可以保留你的。接下

    来介绍两种方式。

    对于日常的运营，我们可以注入一些基本的CSS标记。由于微信图

    79文的HTML5结构简单，我们其实直接把HTML和CSS写在一起。以下4

    种常用标签就可以作为注入的标的。

    · label

    · id

    · class

    · data-

    注入它们的位置是相对任意的，当然前提是要写在有效的地方。显

    然，由于HTML5规范要求所有元素应当闭合，所以应当书写

    在任意元素头部的属性值中。比如以下注入方式都是可以的(如图2-21

    所示)。

    80

    图文中加入任何自定义元素，比如这组元素。这种元素在图文

    题。比如在撰写一篇图文时，只要注意标签的闭合原则，其实你可以在

    且不生效的前端元素，其实对于HTML5来说并不会产生什么严重问

    更高阶的反洗稿可以通过有意书写错误元素实现。因为书写错误，data-属性用于嵌入自定义内容。

    失去了功能，因此可以作为注入标的但不会对图文造成任何影响；

    class是类的申明，由于微信图文的HTML和CSS都写在了一起，它自然

    就基本阻断了JavaScript的使用，所以自然就可以作为一个注入标的；

    在其实是为了JavaScript对其产生作用，但由于微信图文早在2015年年中

    于浏览器定位，所以我们可以在这个标签中注入；id很好理解，它的存

    label标签本质上不会产生任何展示效果，它仅在鼠标行为中有时用

    为什么这些内容不会干扰你的排版呢？

    图2-21 在代码中注入

    81

    这也是__加粗的文字__。

    这是加粗的文字；

    例如：

    使用一组星号“”或一组下划线“__”加粗一段文字。

    加粗功能。

    三级标题；

    二级标题；

    一级标题；

    例如：

    使用“”加空格在行首创建标题。

    标题

    则。这里我们引用锤子便签在页面中的说明。

    场人在使用锤子便签或书写邮件时就会用到它。它有一些常用的语法规

    这是一种语法结构极其简单的样式渲染语言，有多简单呢？不少职

    Markdown。

    些具体实用场景的。在理解这些场景前，我们应当进一步理解

    并不是说因为快，运营者就应当采用这种排版方式，它其实是有一

    Markdown排版的含义

    有没有可以进一步提升效率的排版方法？答案就是Markdown。

    自定义样式，或者从第三方编辑器中选择合适样式后进行修改。但是，现在，你已经基本了解CSS的定义和书写方式，它将极其有助于你

    Markdown一键排版

    要的溯源证据。

    有具体属性的元素依然会被保留。洗稿一旦发布，这就成了一个非常重

    发布时，会被完全保留下来。接下来，即便洗稿者“清空样式”，这类没

    82

    所以Markdown明显的特征是：

    加对应符号，然后让Markdown渲染一下，排版瞬间就完成了。

    的语法，即只要先以纯文本方式写内容，在标题、引用、列表等文字前

    果，但是这里不做赘述。仅从锤子便签的介绍看，这确实是一种很好写

    当然，Markdown还可以用来生成横道图、流程图等高级页面效

    3.这是一个有序列表。

    2.这是一个有序列表；

    1.这是一个有序列表；

    例如：

    使用数字圆点加空格如“1.”“2.”创建有序列表。

    有序列表

    这是一个无序列表。

    +这是一个无序列表；

    -这是一个无序列表；

    例如：

    使用“-”“”或“+”加空格创建无序列表。

    无序列表

    >这是一段引用。

    >这是一段引用；

    例如：

    使用“>”在段首引用一段文字。

    引用。

    [这是一个居中的标题]；

    例如：

    用。

    使用一对中括号“[文字]”将一段文字居中，也可以和标题叠加使

    居中· 快；

    · 同类型内容样式唯一；

    · 默认样式相对简洁朴素。

    Markdown排版的应用

    值得一提的是，它是唯一一种在富文本中可以快速生成代码框并自

    动完成高亮的语法。通过以下书写方式，只要预先设定好高亮规则，一

    段代码就可以优雅地躺在新媒体富文本内。如果直接把代码文本复制进

    来，那么，代码长度往往会占据巨大的篇幅，而且高亮需要手动修改极

    其耗时。所以Markdown排版对程序员、IT公司等发布新媒体内容是极

    其友好的。…css

    (此处为代码)…

    我们以Chrome插件里的Markdown为例，任何网页内普通富文本编

    辑区都支持渲染。比如你编辑完文章并加好Markdown各类样式的对应

    符号后，按下快捷键Ctrl+Shift+M(默认)，这篇文章的排版就完成

    了。当然，这样的视觉效果非常简洁朴素，没有太多丰富的视觉效果，但对程序员来说新媒体内容本来就应该是简洁朴素的，所以恰好适用。

    如果我们想设置更丰富的样式，那就需要修改Markdown的渲染规

    则(如图2-22所示)。想要足够浮夸？这是完全可以的。虽然

    Markdown以简洁著称，但是它毕竟是基于CSS渲染，所以在渲染规则设

    置中可以无限扩充样式。打开Chrome插件里的Markdown配置中心后，会发现目前使用的是默认渲染CSS，如h1(一级主标题)仅仅设置了字

    号和底部border样式，那么当你按下快捷键后，效果自然是朴素的。

    83图2-22 默认渲染CSS

    h1 {

    font-size：1.6em；

    border-bottom：1px solid ddd；

    }

    这就好比Markdown仅锁定了content中的文本内容，至于其

    content、padding、border、margin等一概没有限制。这时，你可以应用

    之前在本书学习到的CSS设计，或者从一些第三方编辑器里直接寻找优

    质的样式，将CSS部分整理并复制过来，那么你的一级标题经过

    Markdown渲染就会焕然一新。

    在微信运营圈内，“可能吧”就是由阿禅运营的基于Markdown一键

    排版的订阅号。它的样式经过了自定义的优化，在保持简洁的同时也更

    灵活。

    另外，这种排版方式深受科技媒体的喜爱。一方面，媒体自制的订

    阅号每天都有高频的编辑和推送，运营者很少有时间手动排版。另一方

    面，Markdown渲染过的页面整齐利落，符合科技公司的调性。再加上

    科技类新闻本身并不需要太繁复的样式效果，所以有不少科技媒体选择

    了Markdown一键排版，甚至如“爱范儿”等媒体自行开发了一些

    Markdown增强编辑器，以进一步提高排版和发布效率。

    84二维码设计

    二维码基本工作原理

    二维码如今是一种司空见惯的新媒体流量入口，尽管不美观，却始

    终是新媒体的命脉。因此，在讲了HTML5后要先开始带你进入二维码

    设计领域，我们先从理解它的工作原理开始。我认为二维码就是一扇

    门。在现实生活中当你决定推开一扇门时，无非有两个理由：(1)门

    背后有你的需求，比如生病时你会推开医院门诊室的门，肚子饿时你会

    推开餐厅的门；(2)门的设计非常独特，让你充满好奇，想知道后面

    有什么。那么，对于二维码设计，新媒体运营应在这两个方面努力：

    (1)把图片雷同的基础二维码，转化为医院、餐厅的形态或增加指路

    牌；(2)设计更奇特的样式，吸引用户。

    灰度识别原则

    用户看到二维码不禁会想到和条形码的关联，实际上两者的相似之

    处确实非常多，首先二者均采用灰度识别原则。无论条形码还是二维

    码，并非由人眼识别，而是由硬件设备扫描。黑白的灰度差最大，黑色

    可被识别为1，白色可被识别为0。我们之所以可以看到很多经过美化的

    彩色二维码，是因为它们在被设备扫描时会转化为黑白图像，不同颜色

    之间依然具备灰度差。

    当然这也解释了不少新媒体品牌二维码无法识别的原因：有一些运

    营者出于美观将黑白反色，或者背景色转为深色，前景色转为浅色(如

    图2-23所示)。这样，0和1的编码完全错乱，自然无法被识别出任何信

    息。

    85图2-23 无法被识别的二维码

    定位点

    定位点，是硬件设备用于确定二维码所在位置和方向的辅助元素，共3个。每个定位点的构造和大小一致，而且要满足横向和纵向

    1∶1∶3∶1∶1 (深、浅、深、浅、深)的宽度关系(如图2-24所

    示)。

    86

    因此，二维码的定位框并一定只能是正方形，也可以是圆形，甚至

    图2-24 定位点要满足的关系可以隔断外层，分别保留上下左右一处，以支持横向和纵向读取到两个

    1。

    读取过程

    找到二维码所在的位置后，设备就可以进一步分辨二维码版本号。

    这里先展示二维码扫描的完整流程(如图2-25所示)。

    87

    88

    运营者不需要全面理解二维码的读取方式，但是要了解其中的几个

    图2-25 二维码的译码步骤重要步骤，因为这关乎美化时的操作。比如在确定版本的过程中，设备

    要从二维码的三个定位点分别读取到信息并计算版本号进行交叉验证，因而严格意义上这三处不能被修改。

    确认版本过程的首次运算，基于二维码宽度和定位点距离得到的多

    个数据。假设探测到两个定位点各自宽度为W ul

    和W ur

    ，那么先计算X

    =(W UL +W UR )14， X 为名义模块宽度尺寸。

    然后，假设两个定位点中点之间的距离探测为D ，那么就可以计算

    V =[(D X )-10] 4。当V 小于等于6时，V 就是其版本号；但如果V

    大于等于7时，就需要进一步计算。

    用7除以右上角位置定位点的宽度尺寸W UR ，得到模块尺寸CP UR

    ：CP UR =W UR 7。

    然而，通过运算所得的版本号并非被完全确认。在右上角定位点的

    左侧和左下角定位点的上方，还有直接保留版本信息的阵列用于校对，所以两处位置原则上不宜过多修改。

    由于目前有多种版本测定手段，二维码可以实现不同的容错率。直

    观看来，容错率越高，像素阵越密集，反之越稀疏。

    当正式读取内容时，扫描是从二维码右下方开始的。先向上探测，之后以蛇形方式逐步向左读完全部二维码信息。在扫描过程中，如果发

    生缺损、偏差，就需要校正点的支持(如图2-26所示)。

    89图2-26 二维码的校正点

    以上是经过高度简化的二维码工作流程说明，它们是在手机“嘀”的

    一瞬间实现运算的。

    二维码简化

    常见的普通二维码好像一个像素方阵，不过事实上这不是最简化的

    二维码。在美化二维码前，如果仅从当前情况着手，那么恐怕很难启发

    灵感。

    二维码的本质是点阵，画面中看似彼此连接的黑色、白色像素块并

    没有真正的连接关系。实际信息点宽度仅为每个像素块的三分之一宽

    度，而且居中于每一个像素块(如图2-27所示)。

    90图2-27 二维码的信息点

    只有当一个二维码被还原到以上程度时，创作才真正开始。好比人

    类对星座的定义，源自不同恒星的连接产生的图像效果，二维码的美化

    也需要从二维码的星空状态开始。当你连接黑点时，请确保不覆盖白点

    位置；当你连接白点时，请确保不覆盖黑点位置。这样由你自己创作

    的“星座”，就会脱离原先二维码中各个像素块的连接关系，更符合你的

    设计预期。

    那么如何获得这个最简二维码？接下来我们借助Adobe PhotoShop

    实现从一个普通二维码转换为最简二维码的“图案填充法”。

    1.在二维码生成网站中获取一张足够清晰的二维码(尺寸相对随

    意，可在软件中具体修改尺寸)，可以选择30%容错率，将二维码导入

    软件中。

    2.接下来制作图案文件，新建一个12×12px的文件。

    3.绘制12×12大小、描边为4、无填充的正方形并摆放到位(如图2-

    28所示)。

    91图2-28 绘制正方形

    4.点击“编辑→定义图案→确定”(如图2-29所示)。

    92图2-29 开始定义正方形

    5.在软件中打开二维码图片，计算你获得的二维码的像素点长度，以二维码为例，外缘是39行。因此将二维码尺寸调整为468×468(因为

    39×12=468)(如图2-30所示)。

    93图2-30 计算像素点长度

    6.随后“新建一个空白图层→油漆桶工具→填充模式选择‘图案’”，点击刚才定义的图案并填充，确保完美对应覆盖(如图2-31所示)。

    94图2-31 填充

    7.接下来，把三个定位点和校正点保留并单独抠出复原。再将图案

    图层作为选区，直接在二维码上抠除，即可得到最简二维码(如图2-32

    所示)。

    95图2-32 得到最简二维码

    此时，除了根据星座设计的逻辑开始打磨设计创作，还有另一种比

    较特别的设计思维，即将二维码作为前景图层，在背景中存放其他图

    像。比如当我们将二维码深色区全部改为红色并与背景红色融合时，就

    会得到如下的二维码设计效果(如图2-33所示)。

    96图2-33 梦幻二维码

    圈内也有运营者将这种把最简二维码叠放在静态背景甚至GIF的设

    计，称为“梦幻二维码”。这种设计方式对运营者来说操作便捷，和星座

    设计的难度相比骤减不少，完全可以成为新媒体运营的必备技能之一。

    二维码畸变

    由于用户的摄像头设备不一定完全正对二维码，所以二维码提供了

    一种畸变情况下依然可识别的可能性。这使二维码优化的可能性更大。

    基于定位点的原理，二维码是可以任意旋转的。畸变则是进一步的

    倾斜效果，在30°角倾斜范围内，二维码依然可以被识别。在立面二维

    码设计中，这种畸变极为常见，比如Adobe中国的二维码就是一个畸变

    二维码(如图2-34所示)。由于书中平面展示的缘故，我们无法看到它

    的动态。实际上这是一个GIF二维码，是融合了二维码畸变、内部连接

    重建、动画设计和黑白反色误导的精致的二维码作品。需注意，如果像

    Adobe那样制作GIF二维码，被识别时会获取识别瞬间的画面，那么应

    当确保在GIF每一帧画面中，二维码都保持可识别的设计效果。

    97图2-34 畸变二维码

    二维码对畸变的识别范围是相当宽的，在30°角范围内的倾斜二维

    码都可以被识别到(如图2-35所示)。

    98图2-35 倾斜二维码

    此外，黑白反色误导则是一种更为巧妙的视觉错觉设计。

    有时，我们需要一个深色底二维码衬托品牌极客、高冷、专业的风

    格，所以会刻意在每个定位点外多加低一个灰度、高亮度的画框(如图

    2-36所示)。当修改二维码内部时，在不遮挡浅色的情况下，反向进一

    步增加深色区的覆盖面积。这样，画面中的深色前景色显得尤其多，以

    至于给你一种它是背景的错觉。但是这样的二维码并不违反任何构造原

    则，依然可以被识别。

    99

    100

    决方案就曾首发过一个滑动拼图二维码识别游戏。在游戏中，二维码的

    结合我们在HTML5与CSS3一节中对overflow的介绍，JZ多媒体解

    味着巨大的设计空间。

    随后设备在截屏中探测并找到二维码。这个看似并不复杂的逻辑，却意

    截图识别的过程是：当用户长按屏幕时，系统会截取屏幕的全屏，们可以结合其他高超的排版技术，产生更多的创意二维码设计。

    中，长按识别功能有一个非常特别的截图识别逻辑。基于这个逻辑，我

    对于用摄像头扫描二维码，想必你已经非常清楚其原理了。在微信

    二维码在微信中的截图识别逻辑

    图2-36 黑白反色设计

    101

    系列内心挣扎，顾虑400电话的收费问题或者广告网址的挂马问题等，通过广告上的400电话、广告上的网址进一步了解咨询，但你会经历一

    户外广告呈现的内容引起了你的注意，倘若你想进一步了解产品，无非

    二维码扫描是一种非常便捷的交互动作。试想在8～10年前，一个

    亮点。

    有仔细思考过二维码扫描的根本原因，因此在创意策划方面并没有太多

    这类低效且浪费的地推活动效果非常有限，然而大多数运营者却没

    者宣传单拜托乘客扫二维码，这与散发小卡片的行为无异。

    行为不知从何时兴起，在但凡有地铁的城市都出现了一些人拿着手机或

    礼品的策略，在人流量大的场合大规模派发。还有一类地铁二维码推广

    略，在一切可以印刷的位置都尽量放上二维码。或者采取扫二维码送小

    就国内的二维码地推活动来看，运用的无非是“能印则印”的低级策

    好二维码推广，尤其地推，成了一门重要学问。

    烦琐，有人觉得不安全，有人觉得没意义……在这样的现状下，如何做

    你喜欢扫二维码吗？我相信大多数用户的答案都是“不”。有人觉得

    二维码推广技巧

    识别案例。

    请在JZCreative公众号中回复“qr02”，查看这个特殊的非位图二维码错位

    仅在这里简单提及，其具体的设计思路将在后续SVG交互设计中讲解，二维码，甚至这个二维码根本不是图片，而是SVG路径。不过这个案例

    基于截图识别原理，我们还可以使用户在页面内触发位图A识别到

    案例。

    JZCreative公众号中回复“qr01”，查看这个有趣的CSS+二维码长按识别

    二维码中间的LOGO判断正确的组合方式并得到对应的奖励内容。请在

    多个上下部分被裁切后打乱分配，你需要通过上下滑动两个区域，通过最终放弃下一步的行动。

    而有了二维码，简单一扫你可能就已经进入了商城或者企业的订阅

    号或服务号页面。接下来，你将快速掌握这个产品的诸多资讯。

    因而二维码扫描的交互设计本身并没有任何问题。尤其在二维码刚

    出现的那段时间，很多人都对它产生过强烈的兴趣，研究过很多可以扫

    描二维码的App，又急不可耐地扫描偶尔一见的二维码……

    所以，二维码地推的核心，在于构建二维码扫描的稀缺性。经济学

    原理告诉我们，任何一种商品想要具有足够高的价值，就必须具有稀缺

    性。所谓稀缺性，可以是商品本身数量稀少，也可以是获取商品的难度

    极大。总之，在用户抵达最终营销目的之前，要经过诸多稀缺要素，这

    样才能充分唤醒用户获取它的欲望。

    当一个二维码扫描难度越大、前置门槛越多时，会有越多用户扫

    描。

    柏林的Preuss und Preuss广告公司曾经为Marilyn: Intimate Exposures

    这本书策划过一次独特的二维码发行。首先，广告公司基于图书调性，选择了一条时尚商业街道为地推场地，还包下了所有的路灯灯柱。其

    次，他们并非只将二维码全部贴满路灯，而是根据图书内容，在外面包

    上了玛丽莲·梦露经典的白色纱裙。看到这条裙子，路人无不想到梦露

    站在地铁出风口按裙摆的经典造型(如图2-37所示)。

    102

    图2-37 独特的二维码活动于是，用户经过了一个前置门槛才得以扫描二维码，“掀裙子”行为

    几乎可以100%地转化成扫描二维码行为。

    海外还有不胜枚举的创意二维码地推。例如，一家雨具公司曾通过

    装置设计，选择在人们最懊恼自己没带伞的时候推广二维码。他们在商

    场、地铁等出口地面布置了一个浅浅的槽板。这种设置在平日既不干扰

    走路也不显示效果，但是一旦下雨，路人在商场、地铁出口躲雨时，雨

    水会逐渐注满这块槽板并形成一个液态的流动二维码。正处无聊又懊恼

    没有伞的路人往往会低头扫描，这时直击痛点的广告来袭，可谓深得人

    心的二维码地推。

    还有很多商家如餐厅，通过制作装置的方式打造影子二维码。逢中

    午或傍晚时分，该装置在阳光的照射下，形成一个二维码效果的影子。

    所以，千万不要被国内同行运营的地推方式限制自己的思维。无论

    是美化二维码还是构造二维码的稀缺场景，都还有诸多探索空间。

    103

    在一些网页中，当我们查找到心仪的图片素材后，可能发现它无法

    普通网页的图像抓取

    素材获取与图库选择

    是自行设计，都需要根据投放平台的特征进行适配裁切图片。

    新媒体运营涉及的静态图应用场景非常多样，无论是从图库选择还

    静态图

    104

    主流尺寸，其中前三者更为常见，广泛应用于微博、微信公众平台、在新媒体圈内，封面图主要分16∶9、2.35∶1、1∶1和3∶1这4种

    板等，但是在新媒体进行推广协同时，往往需要自己制作静态封面图。

    尽管运营者往往不会直接参与KV级的视觉设计如主海报、主背景

    封面

    整。

    jpeg、png等格式即可下载，即使后缀命名错了，在本地也可以另行调

    对于这张Web P格式的图片，请把“tp=”后的内容擦除并修改为

    GIF点击后才能播放等策略节省流量。

    用腾讯云服务器，所以微信曾反复采取降低图文内图片清晰度，以及让

    用户对图文的阅读行为和新媒体运营对图文的编辑和发布行为都极大占

    在Alexa排名中查阅QQ域名下站点，微信一直居于流量前列。微信

    损图片格式。它能帮助腾讯节省服务器宽带资源和数据空间。

    为Web P格式。这种格式是谷歌开发的一种旨在加快图片加载速度的有

    tp=webpwxfrom=5wx_lazy=1”的字符串，可见当前图片格式被微信转

    该链接的末端，很可能有类似“640?

    点击右键，选择在新标签中打开图像，仔细查看该图像的超链接。

    各种你想得到的后缀依旧无法显示。那么在确认不侵权的情况下，可以

    存为并不能得到一张有效图片。这个被命名为“640”的文件，即便加上

    在保存微信公众平台发布的一篇图文时，你很可能发现通过右键另

    微信公众平台图文内的图片保存

    下载图像。

    在右侧定位其超链接。随后点击右键，选择在新标签中打开即可查看并

    侵权的情况下，可以使用前文提及的Chrome开发者模式审查到图像，按右键另存。很多时候，这是页面HTML5布局产生的结果。在确认不Bilibili等新媒体。所以接下来，我们以16∶9画幅中2.35∶1出血方式并

    确保1∶1 转发效果的前提下，讲解封面图的设计思路。

    出血设定

    出血线(Blooding line)是一种来自出版行业的概念。我们制作一

    张需要打印的物料如海报，如果在设计软件中贴边开始制作，那么在印

    刷车间裁切时很可能导致边缘信息被切除。因此，设计师需要在画幅中

    设置出血线并得到中央的安全区。只要印刷厂工人在出血区进行剪裁，就一定不会影响到画面内容。

    出血线的设定被沿用到大多数数字媒体领域中，因为设计师完成的

    数字设计，都可能被不同型号和尺寸的屏幕裁切。例如移动端，手机厂

    商设计的手机屏幕分辨率和尺寸各不相同，为了适配不同用户的终端体

    验，我们就必须设置出血线。

    不仅手机屏幕会裁切内容，栅格系统也会裁切内容。此前已经提到

    运营是戴着“脚铐”的，这对“脚铐”就是栅格系统产生的页面布局结果。

    在一个要求上传封面图的位置，无论你原本提交何种尺寸，最终平台都

    只允许固定范围、比例、尺寸的画面被展示出来，因而就必须设置出血

    线。

    所以制作一张封面图后，要确保多个平台流量分发时都达到预期效

    果，出血设定就必不可少。以微信公众平台封面图为例，对比信息流和

    列表式，我们需要兼顾两种比例的封面图效果，而裁切主要发生在信息

    流中(如图2-38所示)。

    105图2-38 封面图信息流

    目前，公众号大封面图是一个2.35∶1 的范围，即在500×900的基础

    上，实际展示为383×900，所以运营者需要把KV的核心信息压缩到383

    的高度以内(如图2-39所示)。

    不能忽略的是，在分享到会话窗口、朋友圈时，微信依然会抓取封

    面图的中央区域，因而运营者要进行以下完整的封面图出血线设定(如

    图2-40所示)。

    106图2-39 KV的核心信息压缩

    图2-40 封面图的出血设定

    无论是App内转发还是外转发行为，大多数新媒体平台都会进一步

    将画面裁切至中央的正方形。因此在调整封面图时，最后还要注意关键

    信息(比如主视觉、icon、关键字等)保留在画面中央。

    而重要的是，公众号的订阅号在非标星情况下，会提供一个1∶1自

    定义封面图，所以在后台设置时，我们可以不局限于出血设定的思路，异位裁切。这就意味着信息流中的正方形封面图可以根本不是长方形封

    面图的一部分，而是在它的范围之外另行作图(如图2-41所示)。

    107图2-41 自定义封面图

    色彩设定

    所有信息流界面，比如微信订阅号模块、今日头条首页、微博、即

    刻等，从交互设计角度来说，都在高速滑动的无限界面内，深色区块拥

    有被触发的相对优势。例如，微信官方的一则推送(如图2-42所示)，其醒目程度在滑动时不言而喻。

    同样，类似JZ多媒体解决方案的标准也采用黑底封面图，因为偏深

    色和纯色更加醒目。但是所谓“纯色”不是一个绝对概念，而是一个相对

    概念，实际上只要拥有纯色连续背景+深色背景深色前景，都将具有视

    觉优势。例如某订阅号封面图和JZ订阅号的封面图(如图2-43所示)。

    108图2-42 深色区块在滑动时的优势

    109

    110

    Instagram上的案例。

    分关键元素“突破”边界形成3D感。可参考在瀑布流主页设计中的

    将画面中的背景色与之衔接。其次，在封面图内构建虚假边界，再将部

    进行裸眼3D封面图设计，首先，要考虑封面图区域外的背景色，个典型例子。

    标准尺寸的情况下，形成截然不同的视觉效果，裸眼3D式设计就是一

    正如此前将头像由方变圆一样，封面图通过形状的更改可以在遵循

    可以采用更有创意的方式，使封面图突破被栅格系统固定的边界。

    在信息流通过封面图拔得头筹，不仅可以依靠设计学基本原则，还

    创意设定

    图2-43 纯色封面图vs.非纯色封面图大众点评在一个圣诞节呈现的服务号图文专题也是这方面的案例

    (如图2-44所示)。

    图2-44 大众点评的封面创意

    这种封面图设计方法应用十分广泛，我们以微信公众平台窗口的设

    计方法为例，目前订阅号、服务号的会话窗口中都支持应用该方法。

    第一种方法是直接进行图像穿透。其要点在于：

    · 穿透部分可以单独制造投影；

    · 封闭部分两个顶角制作弧度以更好地伪装。

    在500px上先任意下载一张可供教学实验用的免费测试图片，比如

    香烛台的一张仰拍图(如图2-45所示)。

    111图2-45 挑选设计素材

    在Adobe PhotoShop中先设置纯灰色背景，至于具体色值，你可

    以通过截屏自己的手机并在软件中拾取颜色。不过，由于微信会对任何

    上传的封面图进行细微的加深处理(RGB各方向增加1～2)，而且

    Android系统压缩又比iOS系统严重得多，所以具体色值可由运营者自行

    定夺(如图2-46所示)。

    112图2-46 设置纯灰色背景

    置入测试素材调整位置和大小，在你认为合适的位置切片(如图2-

    47所示)。

    113图2-47 调整大小并切片

    在上方切片添加图层蒙版，细心擦出要做穿透的内容。当然你也可

    以用插件快速抠图(如图2-48所示)。

    114

    这时再让一部分烟雾穿透出来，通过贴上一份烟雾素材并增加图层

    图2-48 擦出要穿透的内容样式来实现(如图2-49所示)。

    图2-49 增加烟雾穿透

    然后根据情况选择性增加投影，别忘了下方的切片用圆角矩形增加

    一个图层蒙版进行伪装。随后导出.png格式并上传封面图，一张有范儿

    的穿透式封面图就做好了(如图2-50所示)。

    115图2-50 穿透式封面

    第二种方法，是通过构建伪边框让封面图更有爆发力。其要点在

    于：

    · 图像素材本身应有纵深感，可以是近焦图甚至微焦图；

    · 画面主体内容应在正面或15°角范围内；

    · 画面的3D部分集中于顶部并且构图可向上延伸；

    · 构建伪白框，高度在封面图34处。

    和穿透式封面图类似，先用灰色打底并预备好一个白框(如图2-51

    所示)。

    116图2-51 预备好灰色打底的白框

    随后置入素材，分别对白框图层和素材图层增加图层蒙版并擦出需

    要的部分(如图2-52所示)。

    117

    付给你，你只需要正确上传并指向落地页即可。但是在伪落地页的卡片

    运营中可以称为卡片。通常，卡片由负责电商、活动的设计师完成并交

    Banner、按钮、模块等一切具备真伪落地页的视觉模块，在新媒体

    卡片

    基于这两种制作方法，你就能在不同背景中形成诸多图像创意。

    图2-52 增加图层蒙版

    118

    板。

    广泛。刚才的案例中也有提及，各大第三方新媒体编辑器均有对应模

    保溢出父元素的内容不可见。这种图片隐藏法在排版中的应用场景更为

    参数上是可见的，但是在CSS布局的时候，凭借确

    卡片溢出法是另一种更快捷的解决方案。同样，你要隐藏的卡片在

    卡片溢出法

    实际效果。

    对于具体实现的结果，请在JZCreative公众号中回复“jpg01”，体验

    更多黑白纹理内容。

    合格调较高的品牌，在不遮挡按钮边框、文字的情况下，你还可以添加

    分，被系统“误判”为一个有效二维码。这种新的卡片设计模式，极其适

    此当二维码进入图片查看状态时，黑色的查看器背景能重新填充镂空部

    由于笔者此前已经提到，微信采用的是截屏的二维码扫描模式，因

    · 二维码黑色部分镂空。

    · 文案内容均为白色；

    让你无法察觉的排版策略，需要在一张png图片中：

    这种方法涉及一种在图像透明度保持1(完全可见)的情况下依然

    二维码隐形法

    像，所以我们采用以下两种方式解决。

    移动到关注键位置。不过由于微信现已禁止点开有透明度的图

    以往，我们通过CSS可以将一张透明度为0的二维码引导图通过

    投放时的视觉效果比较接近。

    导用户通过长按识别二维码关注。这种卡片效果和目前官方广点通系统

    接关注一个订阅号服务号，但依然有不少新媒体尝试制作了卡片，引

    微信公众平台并不支持通过JS按钮的点击在第三方页面或图文中直

    二维码小程序码卡片

    设计中，它的目的往往在于突破平台制约。假跳转卡片

    请在JZCreative公众号中回复“jpg02”，查看假跳转卡牌案例。

    假转跳卡片在图文视图内浏览效果和点击进入系统图像查看时展现

    的内容不同，使用户仿佛通过点击进入了一个全新单页中。这种假转跳

    卡片主要利用新媒体平台页面背景色和手机系统图像查看时背景色的改

    变。由于后者一定是黑色，所以这种卡片只是单色搭配，即只能使用黑

    色+新媒体平台页面的背景色作为设计用色。

    在JZCreative公众号中回复“jpg03”，你会看到文中有一个巨大的按

    钮阵列，点击后就会发生假转跳。

    在图文内，矩阵的效果见图2-53。

    这时候第一行第二个按钮，效果是一个白色矩形和内部

    的“10W+”文字。而当这个按钮被点击后，效果见图2-54。

    119图2-53 图文内的矩阵效果

    120

    121

    毛刺设计

    海报设计风格流派

    标准的海报设计只有一个基本的前提条件——明确属于哪一种流派。

    何设计好一张海报。设计学流派诸多，并不存在绝对的高下之分。对于

    如果你的运营工作包括海报制作，那么你应该知道在传统意义上如

    海报

    像在黑色背景中(系统内)呈现时，用户只能看到白色字。

    图像在白色背景中(微信图文内)呈现时，用户只能看到黑色字；当图

    即这张有透明通道的png格式图像上，分别有黑色和白色内容。当

    图2-54 点开按钮后的效果毛刺设计旨在构建一种数字信号错误的效果，它在各大品牌的数字

    领域变得越来越流行。这种曾经让人们十分恼火的画面，如今成了我们

    正想要的效果。这种效果仿佛是彩色电视信号混乱的图像(如图2-55所

    示)。

    图2-55 毛刺效果

    这不禁让笔者想到2018年在K11举办的“After Us”大展海报，它正是

    使用了一个局部毛刺效果(如图2-55的右图所示)。

    毁坏设计

    有不少前卫的平面设计师开始痴迷于“毁坏的艺术”，相比毛刺，他

    们更夸张地运用飞溅、刮擦、剥落、击碎等彻底损毁效果的图像。这种

    对传统美学的破坏性设计极具现代性思维，将在2019年成为顶尖的设计

    流行趋势之一。当然，这种设计风格绝非初出茅庐的美工可以驾驭的

    (如图2-56所示)。

    122图2-56 毁坏效果

    色彩通道效果设计

    得益于数字引擎技术的发展，平面设计师如今可以通过驾驭色彩通

    道属性营造令人印象深刻的幻觉效果，让现实充满全息、扭曲的体验，这对观者的冲击力是极强的(如图2-57所示)。

    123

    这种视觉特征。

    道有密不可分的视觉联系，例如抖音从LOGO到各类KV衍生品都具有

    因此，大多数和年轻、酒精、电音等有关的潮流话题，都和色彩通

    图2-57 幻觉效果双曝光色调设计

    它和色彩通道的关系比较紧密，但更需要双曝光与双色调。这类设

    计通常呈现两种形态、不同单色图像的叠加效果(如图2-58所示)。

    124

    了。

    色，这个图层的模式需要调整到排除。这样，双色调效果就基本实现

    4.然后处理暗色区。同样新建一个纯色图层，尽可能选择暗填充

    层，确保图层要用正片叠底模式。

    层进行编组方面管理。接下来，处理亮色区：新建一个较亮的纯色图

    3.现在，初始素材已经准备就绪，此时还可以把刚才的两个调整图

    分更平缓，而暗色部分更显著。

    似，只不过这次请选择对比度。建议你把对比度参数提高，确保亮色部

    2.新建图层不用再调整。接下来要处理对比度，和刚才的操作类

    白”。

    1.先将图像转换为智能对象，随后“选择图层→新建调整图层→黑

    用双曝光色调。在此我们予以具体讲解。

    双色调在很多未来主义设计中经常出现，包括赛博朋克风也经常应

    图2-58 叠加效果如果你想参考更具体的教程，那么可以在JZCreative公众号中回

    复“jpg04”，体验实际效果。

    双光源设计

    和双曝光色调不同，双光源指通过两个实际的光源或彩色通道分裂

    实现的效果。它同样可以使平淡无奇的作品瞬间拥有前卫先锋感，是所

    谓“烂片出特效”的优先选择之一(如图2-59所示)。

    图2-59 双光源效果

    印刷裁切设计

    我们在国际各大颁奖典礼或者设计展中，越来越频繁地发现这种风

    格的身影。它似乎比字体创意更纯粹，但是也同样非常考验设计师的基

    本功(如图2-60所示)。

    125图2-60 印刷效果

    混沌版式设计

    2017年是混沌版式设计流行的元年，让我们开始对非常规文字的顺

    序和布局有了新的认知(如图2-61所示)。

    126

    联(如图2-62所示)。

    让文字通过后期或者直接道具化摄影，使其和广告内容发生实物关

    文字实物化设计

    图2-61 混沌效果图2-62 文字实物化效果

    负空间设计

    负空间一般指平面中的空白空间被另一个维度的视觉内容填充甚至

    溢出，我们既可以用图像作为负空间，也可以用文字作为负空间(如图

    2-63所示)。《银翼杀手2049》的一款海报就属于这个风格。

    图2-63 负空间效果

    亮色三维设计

    这就是所谓“五彩斑斓的黑”的典型设计方法。这个概念来自一种三

    维生物——有黑色甲壳但又五光十色的金龟子，当然，这对运营三维设

    计能力的要求非常高(如图2-64所示)。

    127图2-64 亮色三维效果

    亮渐变设计

    渐变是近年来海报和网页CSS设计的共同趋势，尤其是黑白图像与

    渐变几何的交融，往往能够让简单的素材组合形成通透而连贯的整体

    (如图2-65所示)。

    128

    66所示)。

    用户眼球运动热区跟踪测试，以判断海报中的中心点聚焦程度(如图2- 视觉聚焦效应 。很多注重海报设计的企业，会在设计完成后进行

    海报视觉四大效应

    图2-65 亮渐变效果图2-66 视觉聚集效应

    蒙娜丽莎效应 。对于包含人像的海报，并非大笑的人像就一定产

    生消费动员力，很多时候人像过于明显的笑容反而会分散用户的注意

    力。尤其对时尚、服饰、美妆、运动等品牌来说，海报设计中应尽量采

    用似笑非笑的模特作为产品的“架子”(如图2-67所示)。

    蝙蝠侠罗宾效应 。成组产品出现在广告设计中时，要避免平行排

    列的结果，因为它缺乏对用户的选择提示。通常，运营者最希望重推的

    产品，应位于画面最前方(如图2-68所示)。

    129图2-67 蒙娜丽莎效应

    130

    (如图2-69所示)。

    采用具有谜题特征的广告，要求用户通过观察，得出对广告内容的认知 它们的投放往往不再能引发用户的停留。在这种情况下，品牌广告可以

    解谜效应 。已拥有广泛知晓度的产品也依然需要广告投放，但是

    图2-68 蝙蝠侠罗宾效应图2-69 解谜效应

    非常规海报设计策略

    对于运营者来说，如果没有足够的设计功力，又急于交付新媒体内

    容，那么有没有什么奇思妙想可以诞生一张可简单实现又吸引眼球的非

    常规海报呢？我们来看一个例子(如图2-70所示)。

    131

    132

    · 情景感和共鸣感强烈；

    成统一的阅读顺序；

    · 用户对阅读顺序无障碍，相比之下，普通海报往往很难让用户形

    为海报主体框架，其巨大优势在于：

    当然在原理上，它借用了第三方UI设计(QQ聊天窗口UI设计)作

    谓“丑出风格，丑出水平”。

    类“丑陋”的海报如今在数字营销中越来越普遍，往往自带“槽点”，所

    信息、二维码等内容，同时巧妙呼应了海报中“随便做做的要求”。这

    这张海报以截图的形态发布，融合了海报所需的时间、地点、活动

    图2-70 非常规海报· 制作效率高。

    非常规海报设计往往通过使用其他设计语言直接进行内容替换，例

    如把海报做成一封信、一张名片、一个来电界面、一个菜单……

    133

    域因此极为重要。文字和印刷媒介产生后，人类由“耳朵的社会”发展

    必须生活在小空间的部落，相互保持近距离的密切联系，血缘关系和地

    在原始社会，口语是主要的传播媒介。由于听力的距离限制，人们

    会行为类型。

    感知和认识世界的新方式，也改变了人与人之间的关系，创造出新的社

    认为媒介是社会发展的基本动力，每一种新媒介的产生，都促生了人类

    (Herbert Marshall McLuhan，C.C.)提出的“媒介即信息”。 [3] 麦克卢汉

    这就是现代传播理论的奠基者、著名媒介理论家马歇尔·麦克卢汉 是一个时代精神的缩影。

    方式，也改变了社会的形态。可以说，一个时代流行的文字风格实际上

    风格也随之变化，新的文字风格又进一步塑造了读者的阅读习惯和感知

    的更新和冲击，阅读者自身及阅读时间、阅读心态也在发生改变，文字

    字，从印刷文字到电子文字，文字的形式在不断变化，再加上其他媒介

    了解文字的性质：文字是一种古老的基础媒介。从象形文字到拼音文

    本节讨论的是如何写好社会化媒体中的文字。在此之前，我们要先

    总论

    文案

    134

    辑、言之有理的论证方式，“修辞学”则是演讲和诉讼的艺术，很像现代

    上找出可能的说服方式的功能。” [4] 他所指的“说服方式”是一种合乎逻

    亚里士多德在《修辞学》中对修辞的定义是：“一种能在任何问题

    染，等等。

    比如吸引别人的注意、加深别人的印象、加强抒情效果、增强感情渲

    修辞是加强言辞或文句效果的艺术手法。修辞可以发挥很多作用，话术高度修辞化

    高传播性的文案需要做到两个主要方面。

    验的是文字工作者“稳、准、狠”的文字功力。

    传播的文案，不需要铺垫，不需要含蓄，不需要草蛇灰线伏线千里，考

    解时间”越来越短，留给文案工作者“绕弯子”的机会也越来越少。高效

    “阅读时间”的缩短对文案风格的改变是决定性的。留给读者的“理

    的本能反应选择阅读的内容。

    捷。选择很多以至于人们来不及深思熟虑，通常仅凭第一印象和好奇心

    音乐、图片、视频等媒介一起出现，同时内容的出口和入口都非常便

    的文字都是以电子文字的形式被人们阅读的。这些电子文字还会伴随着

    的信息量爆炸式增长，信息呈现的形式也变得多种多样。社会化媒体中

    天，整个世界“部落化”，发送和获得信息的成本变得很低，于是流通中

    人类通过媒介认识世界，世界通过媒介呈现。在电子媒介普及的今

    是由他首先提出的。

    时，麦克卢汉已预示互联网的诞生，“地球村”(Global Village)一词正

    新“部落化”，整个世界变成一个新的“地球村”。在“互联网”还没出现

    得很近，人与人之间的感觉距离大大缩小，于是人类在更大范围内重

    普及再次改变了这种情况，它们以接近实时的传播速度将遥远的世界拉

    可以分散到广阔的地域，部落社会便逐渐解体。电子媒介尤其是网络的

    为“眼睛的社会”，由于交往和传播不再以物理空间接近性为前提，人类

    135

    的方法。

    陌生化用词需要写作者具备一些文学功底，以下是几个简单易上手

    应该既有简明性，又有一定的文学性，这样能在众多文字信息中显眼。

    陌生化是在文学创作中异于常规的表现手法，网络时代的媒体写作

    用词陌生化

    写标题，下面会细讲。

    不敢生”就是一个较好的例子，环形句非常适合做标题。至于具体怎么

    了。比如咪蒙在2017年3月8日妇女节的推送标题“职场女性：不敢嫁，其次，如果能在短句里体现出对比和层次，那么表达效果就更好

    改句：3.14，是π；3.14，是白色情人节；不如来麦当劳吃个派？

    麦当劳吃个派？

    原句：不管你是数学极客，还是有情人，3.14都是特别的，不如来

    个短句，同时勤换行，会让读者的理解难度大大降低。举例如下。

    在句子开头加丛句，会显得头重脚轻，读起来不顺畅。把长从句拆成几

    首先，要把长句拆成短句。汉语本来就不适合用多个从句，尤其是

    的、没完没了的句式。

    甚至其中有对比或反衬。与之相对应的是“串联句”，串联句是一种松弛

    句的多种优点。环形句指意思完全、有头有尾、容易掌握的紧凑句子，环形句是古希腊教育家伊索克拉底提出的，亚里士多德指出了环形

    用环形句

    过学习和 ......

    http://www.100md.com/html/file/201912/230332.htm

您现在查看是摘要介绍页， 详见PDF附件(12183KB，344页)。