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

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

HealthIT微信公众号编辑器=》

一、编辑器：

• 135编辑器 135editor.com/
• 秀米us
• i排版 http://www.ipaiban.com
• UEditor http://ueditor.baidu.com/

 

二、配色

• Adobe Kuler http://kuler.adobe.com
• 书法迷shufami.com 书法字体
• 草料二维码 cli.im 二维码生成与解析等
• 传送门 chuansongme.com 小而美的微信导航网站
• 微云 weiyun.com QQ存储分享微信资料
• Iconfinder iconfinder.com 图标搜索引擎，png透明底图标
• 调色：Flat UI Colors
• Web安全色http://www.bootcss.com/p/websafecolors/

 

三、图片：

• 百度图库：可双语搜索国外图库；百度以图搜图功能。
• 必应图库，同时搜英文。
• 谷歌图库
• 站酷http://www.zcool.com.cn/
• 500px（https://500px.com/）
• Flickr（https://www.flickr.com/）
• Pixabay（https://pixabay.com/）
• 花瓣网（http://huaban.com/）
• 全景网http://www.quanjing.com/
• 1X https://1x.com/
• PS强大素材（https://www.pixelsquid.com/）
• 美国宇航局（http://peek.space/）
• 旅游日记（http://travelcoffeebook.com/）
• 美食（https://foodiesfeed.com/）

四、字体格式：

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，《道德经》里也说“少则得，多则惑”，这就是排版的精髓。 留白，是一种艺术。

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

整理来源：网络。