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

good

这样的互联网生态变化正在催生全球最优秀的一批运营人员。 P8

书中将一个个精彩案例解构剖析,方便运营人随时查阅,为轻松获取更多低成本流量带来工作便利。 P9

[书籍分 享V信 iqiyi114]所以,虽然做运营不是让你成为专业设计师或工程师,但是现在你不得不从技术的角度将新媒体运营提升到更高的水平(即“硬核运营”)。 P10

1.不要掉到“内容增粉”的坑里,更不要拿内容爆发个案当规律,被消灭的同质化平台都是没有名气和流量的。 P11

现在,手机的大量功能正在返给最传统的人类工具:手表、眼镜、服装。 P12

VI本身涵盖内容广泛,从核心的LOGO开始,它携带着一个品牌的使命与调性,通过视觉在品牌的各个媒体终端呈现。 P13

无论你从哪个新媒体入手,都会发现用户在注册时都要提交一个头像图案。 P14

在浏览过程中,用户甚至很难看清新媒体账号发布的每条信息的标题。 P15

对于一些规则图形来说,视觉聚焦点可通过明确的测算方式得出,比如圆形和矩形。 P16

它使QQ更有个人化色彩,而QQ的用户也多为张扬、自我的年轻群体。 P17

而随着微信App的迭代,现在信息流的订阅号头像进行了图形裁切,这就是微信团队从开发的角度进一步要求运营者充分考虑圆形裁切的效果。 P18

色彩空间是颜色的范围。 P19

不好惹的CMYK运营者作新媒体团队中的一员,可能要和形形色色的其他岗位人员打交道。 P20

当你拿到大企业的VI手册时,你往往会发现手册中最先说明的就是它们对应的Pantone色号。 P21

但仅仅理解是不够的,接下来我们探讨使用色彩时的一些核心原则。 P22

所谓“类比配色”,指在选定一个基准色彩后以其为中轴,向两侧等角度间距延展获得的5种颜色。 P23

中国俗语道“红配绿,赛狗屁”,但它们恰恰是在技术层面完全合理的配色。 P24

因为就补色而言,两种颜色取自色轮的两个极端,具有最强烈的对比感。 P25

在单个轴向上,任意拾取颜色,你会获得一组有层次感的同色系色彩,尤其适合一些相对正式、不能补充其他色系的情况。 P26

凡·高的几幅杰作的配色情况如下,你能看出来分别对应哪几幅作品吗(如图1-11所示)?/ 图1-11 凡·高的用色比例图也就是说,优秀的运营者在充分掌握色轮配色的基本规则后,可以将个人的情感、活动的调性、文案的风格注入色彩中,选择更趋完美的配色方案。 P27

然而,长图文的应用是极其普遍的,而且不乏一些支持高强度富文本编辑的新媒体平台。 P28

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

甚至用户刚刚关注你的账号,关注回复也会形成VI的效应。 P30

这里先分析按钮内容的设置原则。 P31

这一交互设计学理论在菜单设计中非常重要。 P32

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

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

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

在新闻学中,目前将社会化媒体分为:社交网络、社会化书签、社会化分享、社会化新闻四个主要大类。 P37

图书馆的图书作为公共空间的流动知识资源,在不同读者的翻阅、标注甚至订正行为中不断扩充和迭代。 P38

社会化新闻的用户参与方式尤其特别,以今日头条为例,评论、分享等传统参与行为并非社会化新闻的标志,更重要的是不同用户启动App收到的差异化推送。 P39

所以,本章会重点阐述排版、设计、文案方面的高标准操作。 P40

如果按照百分制打分,那这两部分至少占80分。 P41

因此,推荐使用免版权可商用的图片。 P44

如果是自己平台的原创内容,那么别忘加原创标识。 P45

在设计风格方面,可参考成熟的商业类、时尚类的新媒体或杂志。 P46

这部分的难度很大,原因在于很多优质作者在产出内容时,自身的专业背景及环境会把他置于较高的位置,然后他习惯性地用自上而下的视角表达,导致一定的阅读门槛。 P47

所以在排版时,运营者需优先考虑两个原则:第一,从大方向来说,要以微信公众号后台“用户分析—用户属性—机型分布TOP10”中,用户机型最多的那一款作为版式设计的依据;第二,从具体细节讲,优先考虑手机屏幕尺寸较小的用户,特别是当遇到转行时。 P48

另外,比列数字还简单的方法,就是前后文之间多空几行,形成明显的留白,这也能起到分割的作用。 P49

所以,小标题可以是所属部分内容的总结,也可以是其中打动人心、引人注目的金句。 P50

互动互动的意识最好贯穿于整个图文的处理中,让内容与读者之间产生更紧密的联系,最好能够让用户产生具体行为,这样用户的记忆会更深刻。 P51

此处提供一个模板(如图2-3所示),读者可结合自身实际情况增删改补。 P52

无论素材是矢量(代码)还是位图(对象),最终都将以栅格化的方式交付给用户并隐藏栅格系统。 P53

但对于正文,微信团队除了在栅格系统中决定了它的宽度和位置,其余内部的富文本就由你斟酌了。 P54

所以,版式设计是一篇新媒体优质图文的大前提。 P55

衬线与非衬线在字体设计领域中,运营者暂时没有必要了解诸如“肩”“耳”“尾”等专业设计学概念,但“衬线”与“非衬线”是要完全掌握的。 P56

很多浮于封面图上方的标题的撰写都需要注意这一问题。 P57

究其原因,全角字符和半角字符的衔接导致最右侧无法自然对齐。 P58

当我们在微信图文的代码中不对字体做任何申明时,各系统默认字体如下:· Android采用DroidSans-Bold(西文)、DroidSansFallback(东亚文),而最新版的Android则采用全新的思源黑体,英文采用Rotobo;· iOS采用Myriad Pro(西文)、华文细黑(中文),而从iOS 9开始,中文采用苹方体,英文采用San Francisco;· Windows采用Segoe(西文)、微软雅黑(中文)。 P59

那么CSS字体修改是如何实现的(如图2-10所示)?/ 图2-10 CSS字体修改的实现如果暂时还不理解CSS的基本书写规则,那么你可以先翻阅到后文CSS排版的部分快速学习。 P60

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

造字要经过笔体和自重设定、结构与造型设定、模板字设定等初始过程,再依次对逐个文字进行设计和扫描,然后在矢量软件中优化路径细节,最终才能完成整个字库。 P62

而在留白中,看似D 特别大,W 则往往较小,难道留白和交互设计的原则是背道而驰的吗?并非如此。 P63

平衡设计横向版面时,各个元素应产生和谐感。 P64

如今官方账号顶部依然保持栏目设定的使用并基于CSS <table>布局(如图2-14所示)。 P65

读者凭什么相信你未来的报刊能符合他们的诉求?这就要求报刊要能给用户一种预判。 P66

格式塔原理结构层次布局源自平面设计中的对齐原则、亲密原则、重复原则和对比原则,而这四大原则又是心理学中格式塔原理的应用。 P67

产生对比的方式非常多,目的是让两个部分无法融为整体。 P68

当然,第三方排版的使用不是本书的重点。 P69

而壹伴通过开发Chrome插件,在微信公众平台原生界面内直接运行,极大扩充了后台的界面功能和运营服务。 P70

而一个“盒子”位于网页的什么地方,就取决于它的margin值(外边距),通过它可以确定这个盒子是放在地上的,而不是挂在天花板或其他什么地方。 P71

两个兄弟盒子之间的距离由margin属性决定。 P72

padding:10px、5px、15px。 P73

其常用值有visible、hidden、scroll和auto。 P74

即便你现在还可能不清楚这些代码意味着什么,但是按格式塔原理来理解,你能通过相似性原则了解同色高亮之间一定存在某种相关性;通过完整和闭合倾向原则,你能判断基于对齐的代码整体性……(高亮代码方式请通过View-Syntax菜单选择HTML)所以,硬核运营不仅需要产出优质的运营内容,更要在制作优质内容时,部署优质的设计、开发、调试环境。 P75

开发者模式的阅读工具也有很多,笔者主要推荐直接使用Chrome的开发者模式或者微信开发助手。 P76

例如,一个<p>的存在,必定意味着还有一个</p>结束这个盒子。 P77

如果手动调试,那么可以把Sublime Text正在书写的.html文档在Chrome中打开。 P78

px/em/rem对于硬核运营,正确认知px/em/rem的意义至关重要。 P79

不过对于企业广告投放而言,残酷的现实依然是品牌主默认iPhone和华为旗舰机用户的消费能力最强。 P80

对于洗稿行为,其实有一些基于HTML5书写规则的方式可以保留你的版权信息。 P81

因为书写错误,且不生效的前端元素,其实对于HTML5来说并不会产生什么严重问题。 P82

例如:这是**加粗的文字**;这也是__加粗的文字__。 P83

当然,Markdown还可以用来生成横道图、流程图等高级页面效果,但是这里不做赘述。 P84

如果我们想设置更丰富的样式,那就需要修改Markdown的渲染规则(如图2-22所示)。 P85

它的样式经过了自定义的优化,在保持简洁的同时也更灵活。 P86

无论条形码还是二维码,并非由人眼识别,而是由硬件设备扫描。 P87

这里先展示二维码扫描的完整流程(如图2-25所示)。 P88

确认版本过程的首次运算,基于二维码宽度和定位点距离得到的多个数据。 P89

在美化二维码前,如果仅从当前情况着手,那么恐怕很难启发灵感。 P90

当你连接黑点时,请确保不覆盖白点位置;当你连接白点时,请确保不覆盖黑点位置。 P91

因此将二维码尺寸调整为468×468(因为39×12=468)(如图2-30所示)。 P92

再将图案图层作为选区,直接在二维码上抠除,即可得到最简二维码(如图2-32所示)。 P93

/ 图2-33 梦幻二维码圈内也有运营者将这种把最简二维码叠放在静态背景甚至GIF的设计,称为“梦幻二维码”。 P94

基于定位点的原理,二维码是可以任意旋转的。 P95

有时,我们需要一个深色底二维码衬托品牌极客、高冷、专业的风格,所以会刻意在每个定位点外多加低一个灰度、高亮度的画框(如图2-36所示)。 P96

基于这个逻辑,我们可以结合其他高超的排版技术,产生更多的创意二维码设计。 P97

就国内的二维码地推活动来看,运用的无非是“能印则印”的低级策略,在一切可以印刷的位置都尽量放上二维码。 P98

柏林的Preuss und Preuss广告公司曾经为Marilyn: Intimate Exposures 这本书策划过一次独特的二维码发行。 P99

逢中午或傍晚时分,该装置在阳光的照射下,形成一个二维码效果的影子。 P100

该链接的末端,很可能有类似“/640?tp=webp&wxfrom=5&wx_lazy=1”的字符串,可见当前图片格式被微信转为Web P格式。 P101

只要印刷厂工人在出血区进行剪裁,就一定不会影响到画面内容。 P102

/ 图2-39 KV的核心信息压缩/ 图2-40 封面图的出血设定无论是App内转发还是外转发行为,大多数新媒体平台都会进一步将画面裁切至中央的正方形。 P103

/ 图2-41 自定义封面图色彩设定所有信息流界面,比如微信订阅号模块、今日头条首页、微博、即刻等,从交互设计角度来说,都在高速滑动的无限界面内,深色区块拥有被触发的相对优势。 P104

其次,在封面图内构建虚假边界,再将部分关键元素“突破”边界形成3D感。 P106

不过,由于微信会对任何上传的封面图进行细微的加深处理(RGB各方向增加1~2),而且Android系统压缩又比iOS系统严重得多,所以具体色值可由运营者自行定夺(如图2-46所示)。 P107

当然你也可以用插件快速抠图(如图2-48所示)。 P108

/ 图2-50 穿透式封面第二种方法,是通过构建伪边框让封面图更有爆发力。 P109

/ 图2-52 增加图层蒙版基于这两种制作方法,你就能在不同背景中形成诸多图像创意。 P110

二维码/小程序码卡片微信公众平台并不支持通过JS按钮的点击在第三方页面或图文中直接关注一个订阅号/服务号,但依然有不少新媒体尝试制作了卡片,引导用户通过长按识别二维码关注。 P111

这种图片隐藏法在排版中的应用场景更为广泛。 P112

海报如果你的运营工作包括海报制作,那么你应该知道在传统意义上如何设计好一张海报。 P113

这种效果仿佛是彩色电视信号混乱的图像(如图2-55所示)。 P114

/ 图2-58 叠加效果双色调在很多未来主义设计中经常出现,包括赛博朋克风也经常应用双曝光色调。 P116

/ 图2-59 双光源效果印刷裁切设计我们在国际各大颁奖典礼或者设计展中,越来越频繁地发现这种风格的身影。 P117

/ 图2-62 文字实物化效果负空间设计负空间一般指平面中的空白空间被另一个维度的视觉内容填充甚至溢出,我们既可以用图像作为负空间,也可以用文字作为负空间(如图2-63所示)。 P118

/ 图2-64 亮色三维效果亮渐变设计渐变是近年来海报和网页CSS设计的共同趋势,尤其是黑白图像与渐变几何的交融,往往能够让简单的素材组合形成通透而连贯的整体(如图2-65所示)。 P119

/ 图2-66 视觉聚集效应蒙娜丽莎效应 。 P120

通常,运营者最希望重推的产品,应位于画面最前方(如图2-68所示)。 P121

当然在原理上,它借用了第三方UI设计(QQ聊天窗口UI设计)作为海报主体框架,其巨大优势在于:· 用户对阅读顺序无障碍,相比之下,普通海报往往很难让用户形成统一的阅读顺序;· 情景感和共鸣感强烈;· 制作效率高。 P123

这就是现代传播理论的奠基者、著名媒介理论家马歇尔·麦克卢汉(Herbert Marshall McLuhan,C.C.)提出的“媒介即信息”。 P124

高效传播的文案,不需要铺垫,不需要含蓄,不需要草蛇灰线伏线千里,考验的是文字工作者“稳、准、狠”的文字功力。 P125

把长从句拆成几个短句,同时勤换行,会让读者的理解难度大大降低。 P126

还有OPPO最成功的广告语“充电5分钟,通话2小时”。 P127

写作者可以有自己的语言风格,这是由写作者的性格决定的。 P128

》,也可以使用一些具有强烈感情倾向的稳、准、狠的词。 P129

但是这个“身份”范围不能太狭窄,最好要有优越感。 P130

首先,标题一定要容易理解,不要把专业术语一股脑放在标题中!不要用专业术语!其次,挖掘科学知识中和日常生活最贴近的地方,然后下手写标题。 P131

对于纯粹推广产品和活动的硬广也是同样的道理,太看重阅读量和热度而忘记销售目的就是本末倒置。 P132

提出论点→提供论据→(排序分段→时间模糊→人物模糊→场景故事)→夸大情绪/升华主题提出论点(7~17字)标题点出论点。 P133

此外,生活化的人物增加了亲切感,拉近了读者距离,读者容易感同身受。 P134

我妈长叹,关上房门。 P135

观点类标题伸缩性强、简短直白,能给人留下一针见血的鲜明印象。 P136

· 转折性:多用转折,前后形成对比。 P137

例如,《科学家直接探测到引力波了:今晚的“大新闻”到底说了个啥》。 P138

这和编辑的年轻化和对网络文化的了解分不开。 P139

例如,《企鹅每年游8000千米看望老爷爷!真有这么重感情的鸟?》。 P140

3.简短科普 ——科普部分300字内换行+吐槽+配图。 P141

那么如何发散呢?1.背景资料查询:查阅产品的历史背景和内涵,寻找有卖点和有趣味的故事与亮点。 P142

讲故事1.夸大特性选定故事后,要从复杂的历史故事中抽出一个特点进行夸张和渲染,剔除无关故事情节。 P143

插入广告插入广告是软文的重头戏,广告的插入方式一定要和公众号的人格定位一致。 P144

一般性热点: 微博热搜榜、百度搜索风云榜、搜狗热词。 P145

背景资料查询:尽可能查阅热点新闻相关资料,挖掘可与品牌挂钩的方向。 P146

下面对比同行杰士邦,解析优秀微博话题运营的策略。 P147

微博上的“来自”其实是非常重要的展示位,例如当明星代言某个手机产品时,你就会注意到代言期间其微博发布都来自该品牌手机的对应型号。 P148

下面再以杜蕾斯为例,学习优秀的话题是如何降低用户参与成本的。 P149

/ 图2-81 低知识成本话题低回忆成本 (如图2-82所示)。 P150

因此用户在匿名状态下参与微博话题,往往是为了获得足够的情感回报,对于很多不能在现实生活中与亲人、好友谈及的话题,却能在微博上拥有宣泄的空间。 P151

除此以外,还有一些基于专业修辞学的方法,这里陈述一二。 P152

在《修辞学》中,亚里士多德提出文案应包含三种诉诸:逻辑诉诸、品格诉诸和情感诉诸。 P153

——编者注[2]. 洗稿,对别人的原创文章进行删减、篡改,将之伪装成自己的原创作品的恶劣行为。 P154

因为在真实的物理世界中,没有一种运动是匀速直线运动。 P155

当它用于描述“位移—时间”关系时,它就成了缓动函数中可能要应用的线性贝塞尔曲线、二次方贝塞尔曲线、三次方贝塞尔曲线、四次方贝塞尔曲线、五次方贝塞尔曲线……三次方及三次方以下贝塞尔曲线通常可以由我们完全自定义,高次贝塞尔曲线则一般可以由软件实现。 P156

div {-webkit-transition: all 600ms缓动函数的贝塞尔曲线;transition: all 600ms缓动函数的贝塞尔曲线;}SCSSSass/SCSS帮助你描述动画。 P157

基本公式线性贝塞尔曲线B(t )=P0 +(P1 -P0 )t =(1-t )P0 +t P1 , t ∈[0, 1]给定点P0 、P1 ,线性贝塞尔曲线只是一条两点之间的直线。 P158

比如二次方贝塞尔曲线,我们已经知道了其路径由给定点P0 、P1 、P2 的函数B(t )追踪(如图3-2所示)。 P159

通过图3-2我们也能准确地理解二次方贝塞尔曲线仅需要一个控制点和两个锚点就能够实现曲线绘制。 P160

/ 图3-4 三次方贝塞尔曲线路径缓动函数中的贝塞尔曲线在缓动函数的图像表达式“位移—时间”中,很多新媒体终端会通过调整X轴“时间”和Y轴“位移”的单位长度,将easing终止点的横、纵坐标均设置到1。 P161

部分缓动函数及其贝塞尔曲线公式如下。 P163

SVG拥有较久的技术发展过程,在新媒体领域尤其微信公众平台焕然新生,被誉为“新媒体排版中的最高殿堂”。 P164

从XML到HTML,SVG表现形态上的两大代表就是PPT和H5营销,前者是本地化展示的通用解决方案,后者是在线展示的当今最佳平台。 P165

2016年,笔者与微信团队合作,对微信公众平台图文框架内的SVG交互规则进行了白名单设定。 P166

<svg height=”100″ width=”100″></svg>显然我们得到了一个宽度和高度均为100的画布,不过这个画布是空白的。 P167

<svg width=”100″ height=”100″><circle cx=”50″ cy=”50″ r=”30″ fill=”red”></circle></svg>我们可以在HTML5中直接写入颜色的英文名。 P168

如果你像以下这样打乱顺序,则效果依然是可行的。 P169

<svg width=”100%” height=”200px”><rect x=”10px” y=”10px” width=”300px” height=”150px” style=”fill:#888888;stroke:red;str oke-width:5px;stroke-opacity:.5;”></rect></svg>所以在style中,填充色、描边色、描边宽度、描边透明度(Opacity)可以写作A:B;C:D的转化形式,即原先的等于号变成了冒号,而元素和元素之间,使用分号隔开。 P170

另外,图形闭合使用了/>缩略写法,注意在135编辑器中不支持这种调试方式,但是如果用Chrome开发者则可以被自动识别并载入微信图文中。 P171

此前笔者已经谈到,复杂路径的矢量图并不需要通过代码缓慢地构建,通过制图软件就可以直接导出这些复杂的代码。 P173

因而,如果你的矢量图素材存在上述情况,那么请进行相应修改,比如改为纯色、释放路径、删除滤镜等。 P174

点击右键并选择“Edit a HTML”后,你就可以把制图软件中得到的SVG代码完整复制进去(如图3-15所示)。 P176

因为微信公众平台的自动缓存机制,很可能会让你苦不堪言。 P177

确定以上核心元素后,接下来是练习正确的写法。 P178

values不过你可能希望矩形能完成折返效果。 P179

这个参数可以设置为1、2、3、4等任何自然数,还可以设置为indefinite,即无限地重复。 P180

calcMode=”linear”时,动画根据values和keyTimes属性,在每个时间段内匀速变化,它也是calcMode的默认值。 P181

<svg width=”100%” height=”100″><rect x=”20″ y=”20″ fill=”#EC6969″ width=”100″ height=”60″><animate attribute Name=”x” values=”20;150;20″ dur=”3s” key Times=”0; .8; 1″key Splines=”1 0 1 1; 0 0 0 1″ calc Mode=”spline”></animate></rect><svg>成功调试完上述代码后,你将看到非常灵动的效果:一个物体经过加速撞击某个障碍物而返回,又因摩擦力停止。 P182

所以在begin中,当数值等于click或touch时就形成了动画的触发。 P183

按照刚才学到的知识,你似乎只能把from设置为20,将to设置为40,但是借助additive,我们就可以把from设置为0,将to设置为20,这里的from和to成为一种相对值。 P184

接下来,我们在画布中依次练习其中的主要动画效果,首先构建一个足够大的画布。 P186

JZ多媒体解决方案在为美利亚酒店定制交互数据表时,就用到了矩形的宽度变化(如图3-18所示),请在JZCreative公众号中回复“svg0101”查看案例。 P187

例如在一篇文字交互动画《氢弹·诗》中,最下方的红点点击后模拟爆炸,使整个页面瞬间成为红色并遮挡住下方全部内容,衬于上方图层的白色字得以显现。 P188

这是为了确保在任何机型下都能完全强制遮挡<section>中的文本(如图3-19所示)。 P189

因而不会遮挡已经出现的文字。 P190

这个动画中每个路径的补间数量各不相同,对于距离非常远又形变显著的路径,必须补上3~10个中间值,在*Adobe *Illustrator中反复添加修改,才最终形成树懒的每个身体路径缓缓过渡的效果。 P191

<!–stroke-dashoffset–><rect x=”432″ y=”1000″ fill=”#EC6969″ stroke=”#AD3B23″ stroke-width=”7″ stroke-miterlimit=”10″ width=”109.1″ height=”59.7″ stroke-dasharray=”10″ stroke-dashoffset=”0″><animate attribute Name=”stroke-dashoffset” values=”0;150″ dur=”10s”repeat Count=”indefinite”></animate></rect>它和stroke-dasharray参数配合,可以形成类似描边的动画效果,因为描边和虚线在本质上没有任何区别,关键在于dasharray的设置。 P192

因为这对代码的学习有很大帮助。 P193

请在JZCreative公众号中回复“svg0106”查看案例,了解SVG和CSS的两种不同渐变实现策略。 P194

translate对于一些基本几何图形,位移只需要通过x和y解决。 P195

对CSS来说,大多数情况下变形都是以图像中心点或指定中心点来进行变形的。 P196

skew X&skew Y倾斜动画统一以SVG坐标系原点为中心点。 P197

绘制完毕后,再将其贝塞尔曲线作为animate Motion的path值导入。 P198

将代码复合至此,你已经学习了白名单中的全部特效表达,看似都十分简单明确,但如何实现效果显著的交互案例呢?答案就是对代码进行复合。 P199

一共9个动画,其中7个涉及触发。 P200

这里我们采用一个更讨巧的办法。 P201

<animate Motion path=”M0,0c0-73.7-85.6-68.9-99-57.1″ fill=”freeze” begin=”click”dur=”3s” repeat Count=”1″ additive=”sum”></animate Motion>在这些设定中,begin和end的数值至关重要,通过采用click和click +时间的方式,才最终实现了踢足球的效果。 P202

在软件中,我们可以对群组路径设置名称。 P203

虽然同一平行组内的路径上下顺序不会影响连续触发,但是建议都向上分配编组,以便于查看。 P204

<g><g><rect stroke-width=”0″ x=”116.1″ y=”118.2″ opacity=”0″ stroke=”#92D1D7″stroke-miterlimit=”10″ width=”176.5″ height=”164.5″></rect> </g><circle transform=”rotate(-30 203.3 199.8)” stroke-width=”50″ stroke-dasharray=”260 260″ opacity=”0.6″ fill=”none” stroke=”#2247ff” stroke-miterlimit=”10″cx=”203.3″ cy=”199.8″ r=“40.2″></circle></g>确保矩形触发器位于最内部群组,再在circle平行的<g>标签中加动画,得到如下代码。 P205

在群组完成后,我们将动画加载平行于动画元件的位置,而非放在元件的代码内部,依然可以保证这个元件的动效播放。 P206

在图文中载入数学公式什么是La Te XLaTeX(/’lɑtεx/,常被读作/’lɑItεk/或/’le Itεk/),是一种基于TEX的排版系统,由美国计算机科学家莱斯利·兰伯特在20世纪80年代初期开发。 P207

/ 图3-25 快速书写表达式输入完毕后,选择“SVG格式导出下载”,在本地你就得到了基于LaTeX语法排版产生的SVG格式数学公式。 P208

/ 图3-30 指数和下标的表达平方根(Square Root)的输入命令为\sqrt,n次方根为\sqrt[n]。 P211

这可由\vec实现。 P212

乘积运算符(Product Operator)由\prod生成。 P213

但是用AI直接打开PDF有时会因为文字编码的问题,在AI软件中出现乱码,那么就要使用方法二避免这种情况。 P214

· 如果你不希望表格内的文字被随意复制,就可以在AI中将其轮廓化后再复制SVG代码。 P218

这些一手案例中包含了不少特殊的设计方法,它们是我们实际设计、开发、交付中的经验和总结。 P219

其目的在于增强控制,优化代码。 P220

此处强调一下“虚设”这个概念,即利用复制刷新、删除新造、遮盖掩挡等方法,制作出想要的效果,而非真实操作。 P221

当然贯穿元素的动画特效不止一种,也可以更复杂、更多样化,比如跳一跳样式,贯穿元素的作用在于引导更丰富的动作效果,带给读者更大的冲击力。 P222

移位变景使文章显得更加别致,让人觉得心情愉悦、蛮有乐趣。 P223

高速转动利用end=”click”及fill=”freeze”,实现点击后随机停止。 P224

如果想制作出更好的效果,实现后续的影响或者后续的操作,那么我们还可以采用动画图组嵌套的方法,使画面在点击随机停止之后出现一系列的其他效果。 P225

示能(Affordance)。 P226

玻璃或屏幕破碎效果的实际操作一般有两种操作方式:一是不添加calc Mode=”discrete”属性,形成碎屏纹路蔓延效果,给人一种慢镜头的流畅感;二是添加calc Mode=”discrete”属性,碎屏效果将在多幅关键帧间瞬间过渡,形成碎裂的动态感、强烈的破碎打击感。 P227

而在这种需要大量交互添加动画的编组过程中,采用抵消相对位移的原理,多次利用图组动画嵌套实现一次点击多个触发。 P228

代码逻辑点击提示触发区域进行翻页操作。 P229

滑动分割样式案例展示请在JZCreative公众号中回复“svg0221”查看通灵珠宝案例(如图3-51所示),回复“svg0222”查看小编备用案例。 P230

由于终端屏幕宽度及分辨率不同,容易导致可视区域的实际呈现效果差异,设计者通常会将创意部分限制在小于所有终端屏幕宽度的绝对宽度内。 P231

/ 图3-53 斗地主案例代码逻辑通过scale除了可以控制元素的等比例缩放外,还可以单独控制元素的纵向拉伸或横向拉伸。 P232

为矢量图形添加超链接样式案例展示请在JZCreative公众号中回复“svg0225”查看特仑苏案例(如图3-54所示)。 P233

这样就可以在位图上方的任意位置,添加任意形状的超链接触发区域,且不会自动生成icon。 P234

从人类大脑认知水平看,一个普通人最多连续处理7±2个事件,也就是5~9个,所以在翻页式H5中,一般以7面左右为宜。 P235

一些H5交互方式独特,效果非常精彩,但往往会形成“自嗨式”运营:圈内同行感叹于交互的创意,而普通用户甚至不知道怎么让这个H5运作起来。 P236

按钮的点击必须有显著的动画提示,例如手指型icon的浮动或按钮本身的缩放循环等,都会在很大程度上提升用户的点击欲望和准确点击率。 P237

H5在被浏览过程中的表现,将很大程度上决定用户是否愿意分享,而用户分享的背后并非分享精神,而是炫耀心理。 P238

而对于固定标题的H5,运营工作要重点放在标题的酝酿上。 P239

请在JZCreative公众号中回复“dz0101”查看网易《逃不掉的四字魔咒》H5 (如图3-55所示)。 P240

其实在新媒体行业,优秀运营工作者的第一素养是“永远不高估用户的智商”,何况再聪明的人也总有迷糊的时刻。 P241

但是它的交互流程清晰,反馈动效准确。 P242

同时,可以在普通的交互中添加不一样的惊喜反馈,比如明星添加你为好友,一辆汽车驶入朋友圈撞碎文字,等等。 P243

同样,你还要基于平台进行测试。 P244

FLIP它是动画绝对值计算器。 P245

越来越多的站点在自适时采用汉堡式折叠菜单,而这个网站就可以快速更改这种菜单的具体属性并将其引用到你的项目中。 P246

Choreographer.js它是CSS动效库。 P247

相比其他的H5制作工具,人人秀能够满足一般运营者的一站式服务需求。 P248

搜狐快站搜狐快站是企业移动营销场景制作利器。 P249

UTM的定义接下来,对需要筛查分析的流量部署UTM。 P250

· 关键字(utm_term):常见于付费关键字广告所使用的字词或链接名称/图片的替代文字。 P251

——编者注[3]. “技术循环论”指多种技术类型以一定顺序成为行业内的热门应用并由此循环往复。 P252

/ 在组织行为学中,社群中每个用户的状态受制于几大要素,可用组织行为函数表达式表达:OB=f(IC,OS,TI,PGP,SLS,OC,CI)其中IC代表个人特性,OS为组织架构,TI是技术要素,PGP是成员之间的影响作用,SLS是上级权威的领导,OC为组织气氛,CI为组织文化。 P253

存在不完全审核准入、支持非成员通过特定条件查看社群内容的情况下,我们将其作为开放社群进行运营。 P254

此外,通过其他形式的社群组建的用户教育系统,都在积极实践着各类社群变现方法。 P255

情感上的需要比生理上的需要更具体,比如愉悦、愤怒、悲伤……总之,能让用户读完觉得心情愉悦,就是超高标准。 P256

基于用户阅读路径分析从微信官方的数据可知,现在公众号阅读的来源渠道分为:公众号会话、好友转发、朋友圈、历史消息、看一看、搜一搜和其他。 P257

原则二:逻辑性输出而非拘泥于文笔小学生才重词藻,成年人只看逻辑。 P258

用户在整个阅读过程中,体验非常简洁、直接、高效,可获得非常强烈的满足感。 P259

建议运营者多考虑让用户占据主导位置的动作,然后拜托用户做那些动作。 P260

虽然各行业的标准不同,但是在情感认同上有共性——看到即赚到。 P261

对于需要做UGC内容的账号而言,它可以节省大量的人工整理工作。 P263

这样,运营者根据数据表现调整后续内容的方向和比例,就变得非常容易了。 P264

C端用户二者持平,B端用户清博>新榜。 P266

/ 图4-7 WCI指数/ 图4-8 新榜指数WCI指数的发布条数加权比较大, 毕竟于企业而言,流量才能换真金白银;“新榜指数”侧重对发布与阅读比的均衡, 有利于新自媒体人拿到比较好看的业绩数据。 P267

此外,是在各类培训业务方面的差别。 P268

举例如下。 P269

在描述时,就可以突出这些独特卖点。 P270

可是他穿过铁道,要爬上那边月台,就不容易了。 P271

场景式描述分两类。 P272

”再如饮品机的广告:“我在家里开了个星巴克……因为×××机,不到1分钟,在家也能轻松做出××××、××××、×××等饮品。 P273

关键词:激情、怀旧、兄弟、酒。 P274

“硬朗”加上“苏扁”,是激情和怀旧的。 P275

比如描述的场景化,从房子到屋檐,从油纸伞到花,从窗台到沙发……多个场景中的多个动作——看天、看花、看雨、躺在沙发上看书……这段描述中还有数字:97年、82年、1/1000。 P276

把1 000首歌装到口袋里。 P277

天堂并非遥不可及,再走十年而已。 P278

工艺 。 P279

(运用了特殊工艺)*“支”是织造中衡量纱线粗细的单位,支数越大,纱线越细,支数越小,纱线越粗。 P280

因此这款凉席在透气、吸汗的同时,还有棉制品柔软亲肤的触感。 P281

另外,强大的第三方平台还对新媒体社群有进一步支持,在新媒体被功能托管后,与用户的对接能力往往有质的飞跃,尤其通过CRM系统能够对社群粉丝用户进行更好的细分和画像。 P282

微店对UI的打磨非常细致,即使有些微商把很烂的图传上去整体感觉也不会太差。 P283

如果你的微信公众号流量已经非常大,但是没有时间管理商品,那不妨批量接入分销平台。 P284

2.更多样的微页面展示模块(如图4-16所示)现在的有赞商城可以制作很多特殊页面,它们的商品展示模式非常丰富。 P285

对于微信的关注者来说,界面上会同时显示出他的近期消费情况(如图4-18所示)。 P286

对于个人品牌或者初创团队来说,费用有些高。 P287

另外,搜狐快站并不收年费,交易中间费和有赞商城一样为2%。 P288

如果喜欢在街边小店用餐,就会发现越来越多的小店在点餐环节时,服务员只要求你扫一个公众号二维码,随后即可开始自选并完成微信支付。 P289

)A:因为我们还不够强大,产品还不够多,所以不能以搜索作为主导。 P290

A:这部分在做布局时我们也考虑了很久,有赞支持在底部菜单做相对自由的按钮设计,因此我们需要在很多不同的功能间进行取舍。 P291

测试之后,我们选择了双列。 P292

Q:为什么“黑市福利”一栏点击之后是不存在的页面?A:(捂脸)这是个忘了更新的链接,我先去打一顿前端设计师。 P293

我推送的第一篇文章是《丝巾的使用方法》,发稿时弄了一整晚,从申请账号到排版上传,一边琢磨一边打电话跟别人求救,在一片慌乱中按下了“发送”键。 P294

现在要做的事情更多,写稿的时间都是“抠”出来的,比如两场采访的间隙、候机的时候、看完秀不参加晚宴直接奔回酒店写文章,这样连轴转对体力的考验很大。 P295

这个号以后可能会承接买手店,实现“可见即可买”。 P296

现在好多读者都留言跟我说,已经养成了先看二条推广文章,再看头条文章的习惯,否则推广的产品/优惠根本抢不到,或者品牌方的销售平台被挤崩溃,根本买不了……我看到这些留言都不知道该哭还是笑。 P297

网易云课堂老牌课程平台,拥有最完备的正式课程迭代系统。 P298

YY频道房间教育模板的串流形式丰富。 P299

以Windows为例,因为如果只是为了录屏,那么苹果电脑还有更好的工具。 P300

注意,游戏捕获不能用于其他非游戏录制。 P303

你可以在“设置→输出→录像”中,设置录像的路径,默认导出为flv格式(如图4-27所示)。 P304

/ 图4-28 Mac系统自制的屏幕录制功能界面很多Mac用户不知道苹果电脑其实还可以录制手机屏幕(如图4-29所示)。 P305

而且同步率极高,很多时候还可以作为演讲时展示手机屏幕的工具。 P306

一般加入一场微信群讲座,用户需要完成如下操作步骤。 P307

就自媒体而言,内容付费一般集中发力在小鹅通、知识星球等。 P308

企业级知识付费裂变必须以战队的形式进行冷启动。 P309

各类参数的设置归根结底取决于对盈利率的计划。 P310

”裂变的获利应当是所有人,用知识服务好你的社群用户才是知识付费的本质。 P311

Agency广告代理商√ 听说你在Agency工作,甲方就是你最主要的服务对象吧?× 听说你在Agency工作,做微商代理是不是很辛苦啊?AP(Account Planning)广告企划√ 这份AP应该符合甲方的需求。 P313

Billboard广告牌√ 优秀的billboard推广要因地制宜。 P314

Cold Call拉网式客户电话通过一定方式拿到批量的客户联系方式,在没有事先沟通的情况下直接进行电话联系,介绍产品或寻觅合作。 P316

CSS层叠样式表CSS(Cascading Style Sheets)是一种用于表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 P317

IIns(Instagram)一款应用程序Intellectual property知识产权Interactive media互动媒体Italic斜体静态内容运营与栅格系统JJava Script直译式脚本语言JD(Job Description)职位描述Justify两端对齐部分重点词汇解释与工作场景中的用法Java Script直译式脚本语言Java Script属于网络脚本语言,被数百万计的网页用于改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用范围。 P320

用户画像为产品细分与营销策划提供论据支持。 P323

UUGC(User Generated Content)用户原创内容UI(User Interface)用户界面设计UTM(Urchin Tracking Module)流量跟踪UV(Unique Visitor)独立访客访问UX(User Experience)用户体验设计部分重点词汇解释与工作场景中的用法UI用户界面设计UI是User Interface(用户界面设计)的简称,泛指人机交互(HCI)的操作界面设计。 P325

WCI指数WCI(由清华大学新闻与传播学院提供学术支持、国内多所高校的知名学者和教授担任学术顾问)是清博指数的一种算法,也是目前国内最权威的新媒体热度算法。 P326

good

标签