HealthIT微信公众号文档编辑规范1.0

  • A+
所属分类:健康智库

0. HealthIT团队现有微信公众号:

HealthIT微信公众号编辑器=》

HealthIT微信公众号

一、编辑器:

 

二、配色

 

三、图片:

四、字体格式:

1、封面与配图

封面图原则:一要凸显主题二不要文字太多。封面图要尽量选择干净、色彩统一的图片。要清楚自己的品牌定位,与自己品牌形象相一致。对图片进行用心的的加工,突出文章的主题。

尺寸:【微信官方封面图尺寸900x500 次图200x200】至少必须保持在9:5.
封面图格式:主要内容要尽量居中,读者分享到朋友圈的时候,微信后台会自动截取封面图居中的正方形内容。

PPT封面图方法:根据尺寸设PPT模板,母版设置图片占位符,点击中间的图片按钮插入找好的图片,就会直接裁剪成标准尺寸:800*367,另存为图片,也可用画图软件编辑等比例调成:600*275。

封面图工具: 创客贴 http://www.chuangkit.com/

正文配图原则:

多图文的配图,整体风格要保持和谐一致,巧妙突显账号的品牌风格,那就更好了。参考:3W互联网深度精选、拉勾网、Pingwest等账号都做得不错。

文章中的图片在挑选时要尽量选择与文章内容相近的图片。挑选时注意图片内容、色彩冷暖的一致性。并且正文图片一定要与文章封面图相呼应。

题图最好选择横向矩形状,在图片下面,用文字说明出处, 12号字,颜色a5a5a5,居中,文前加 △

图片水印:涉及到私密的图片,就打水印,如果是别处找来的图片,不打水印,方便读者保存。

gif动图、末尾带指纹的二维码太low,不要使用!

 

2、标题:16~18,比正文+2码

2.1 标题的原则:

文首注明作者。必要时加篇目,使读者有数。

文章标题有两种,正与奇:1.正标题,寥寥几字,言简意赅;2. 奇标题,制造悬念,忍不自看。

标题的效果有三种场景:推送给用户、转发在朋友圈、发送至好友或群里。不同场景,标题的呈现略有不同,最好分别预览下效果再发布。

2.2、使用自带编辑器

为了区别正文,标题的处理方法一般就是变色、加粗、加大字体。

也可以利用反色进行处理,即蓝色做背景色,白色做文字颜色。在文字前后多加两个空格,会更协调。

还有一个小技巧,就是给标题的每个字之间加一些空格,效果如下。

2.3、使用图片标题

把标题做成图片的形式,再插入到正文中。用PPT,可以做出各种各样的标题样式来。最诱人的,就是可以任性地加图片、换字体

注意:直接导出PPT图片的话,上下无效区域会比较多。可以更改PPT的大小,或在截图时只截取有效区域。

2.4、 标题字数

标题:字数要尽量控制在约13个字以内,标题可添加“【】”来凸显关键字,或者是简洁的“ | ”(竖线),但不要有过于繁琐、奇怪的符号。

2.5 小标题:

要尽量醒目并与正文在距离和大小上区分开来,一般区分方法有:

  • 加大行间距区隔,一般在小标题和正文之间空一行;
  • 改变小标题字体颜色;
  • 改变小标题字号大小;
  • 如果小标题过长,可以将小标题断句折成两行分为主副标题。
  • 编辑器里的标题样式,但一定不要用得太多,有时候只需要改一下文字大小就能突出你要表达的意思。

3、摘要的填写技巧

  • 一是最好形成自己的风格;
  • 二是一定要写摘要;
  • 三是不要长篇字多的摘要,一眼扫过知道你要写的是什么。

 

4、正文格式原则

首行无需缩进,不要使用斜体

文章缩进 1 或者 1.5

字体大小: 14~16px; // 不设置字体,默认的宋体

行间距建议为1.5-1.75倍;

字间距:1.75~2

段前段后间距:19.5磅

页边距参数的话我建议在12—15像素内容进行缩进0.5或者1.0。

强调文字可以改变字体颜色或背景,也可添加适当的排版样式;

正文段落尽量不超过一屏,多分段;

段落之间最好空一行,让眼睛休息;

图片加些许阴影像本文,图片与上下的文字中间加空行。

重点突出的部分可以用不一样的颜色、加粗或者下划线表示,千万别把字号放大,很 low

文章一定要两边对齐。

对于较少的条目,建议梳理成小点,然后用无序列表来呈现。

故事、举例、名句等,也可采用引用格式。文字左面一竖线。

段与段之间要空行。

不要首行缩进的原则

图片与正文要空一行,图片居中

色彩不超过3种。

空行原则:
小标题和正文之间应有空行
图片上下都应有空行,但图说除外;
清单中项目与项目之间应有空行

推荐字体:
系统自带:微软雅黑、黑体、宋体
造字工坊:典黑、力黑
方正字体:方正兰亭黑

图片排版:

一是留白,留白是主流排版方式,图片排版中文字和图片之间留一行空白,在手机阅读时体验更好;
二是居中,图片设为居中,兼容不同端。

表情:

偶尔可以用emoji表情,不要经常用,非主流。自定义菜单里面也可以用。

96微信编辑器特殊表情 http://bj.96weixin.com/emoji/

QQ地带emoji表情 http://www.oicqzone.com/tool/emoji/

GIF动图

GIF搜索giphy.com

汤不热tumblr.com

高能GIF http://www.gaonenggif.com/

 

5、 正文排版颜色

一般用彩色来突出重点内容,推荐暗红c00000、深蓝0070c0、橙色f79646。

灰黑色:#3f3f3f,或者#7f7f7f

生医信息公司企业logo蓝色、白色,生医蓝:#007ebb或者RGB(0,126,187)

微信的背景颜色是#f7f8f3或者#F8F7F5,参考网页设计的经常配色思路去改变字体的颜色。

段落标题,用18号字,加粗,颜色595959,可以用汉字,也可以用数字。 正文,用16号字,颜色595959,18号字略大,14号又看起来太费劲。 正文颜色用3f3f3f也可以,595959有人反映偏淡。 正文中的重点内容,可以加粗。

注释,用16号或14号字,颜色a5a5a5,记得把注释部分,加入引用框。

小标题(无底色)颜色:7f7f7f(深灰色)
正文字体颜色 595959(偏黑色)
说明文字颜色 a5a5(偏灰色):图说、栏目说明等
带有底色的背景,在文章前设置缩进。

忌讳大红大紫,背景色,用浅淡。

 

关于编辑器的建议:

  1. 编辑器建议用UEditor。不是因为它够直观,主要是因为微信用的那个其实就是他家的
  2. 建议学一点点的前端,因为编辑公众平台的文章所用的代码其实也不是很难,大的代码块一般都会封装在<p>和<blockquote>、<fieldset>这几种标签里,再用style写一写样式就好了。自己写的话,其实可以不用复制粘贴中的代码那么乱就可以达到一个不错的效果,还不会雷同;如果会用ZenCoding(Emmet),其实很快的(我一般用Brackets编辑,还有颜色预览哦~)。
  3. 如果敲代码的话,稿件中的图片建议在稿件准备好以后一次性上传到公众平台,然后拷贝回UEditor编辑器抓到<img>就能直接扔到代码里了。
  4. 常用的图片和一些分隔符、二维码之类的,可以在编辑好代码之后单独保存,用的时候直接拷贝代码放在需要的位置即可。这里要特意说明的一点是,如果图片是一些配色相对简单(比如只有二维码、公众号名称和关注提示的图片,配色只有黑白和一个底色)但对锐度要求略高的图片,(用矢量工具)导出为8位PNG会比非常容易产生杂色的JPEG更适合。

至于具体配色嘛,没把握可以参考公众号的选择。

 

6、 快速写微信技巧
一定要预览:调整排版、错别字、语句。

微信后台保存一份,统一模板,下次直接编辑。

思维导图:长文先罗列提纲,绘制思维导图,

先文字再排版:一篇微信分几个板块,挨个完成,提升思维和效率。

做好一些固定样式:做一些微信排版中经常需要用到的图片、分割线等小部件。

  • 小黑点适合英文

■ 小方块更适合中文

○ 小圆圈适合注释内容

对于文章中的人名、地名、书名,可以加下划线,一目了然。

斜体不讨巧,一般用于正文中括号内的注释。

用线条和符号,引导视线,领着读者的眼睛,看你想让它看的地方。

各种三角符号是个好东西 ▷ ◁ ▶ ◀ △▽▲▼ 其他还有一些备用符号  。

直角引号比较古典,用「」和『』代替 “ ”,尤其用在标题中

▍这个加在分级标题前效果好

▏这个在段落前等于是空格

➥ 和 → 还有 ↴ 以及 ➨ 可以引导视线 ☛ 是点击

☑ 和 ✔ 是已经选择,OK

✘ 是错误,删除,NO

✄ 是剪切

❐ 这个是复制粘贴

✚ 是添加,补充,选项

☷ 是列表,调整格式

  • ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ 这样的数字是不是很酷

Ⅰ·Ⅱ·Ⅲ·Ⅳ·Ⅴ·Ⅵ·Ⅶ·Ⅷ·Ⅸ·Ⅹ·Ⅺ·Ⅻ 罗马数字比较优雅复古

更多符号,可以参照 ▷ 符号大全

7、整体美感:

排版样式确定后最好不要变,形成视觉风格。 抓住几个主要的因素,美感是和谐,不是花样的堆砌。

奥卡姆剃刀法则:如无必要,勿增实体。 Less is more,《道德经》里也说“少则得,多则惑”,这就是排版的精髓。 留白,是一种艺术。

无印良品艺术总监原研哉的书:《设计中的设计》和《白》

整理来源:网络。

  • HealthIT.CN小程序
  • 产学研医创新平台
  • weinxin
  • 健康数据
  • HealthIT公众号
  • weinxin
admin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: