微信排版:封面图尺寸、版式设计、代码实现、与丑陋编辑器的勾心斗角

想学习互联网运营的同学,请点击这里进入

为了提升公司所经营公众号的big,算是研究了一个星期微信公众号文章排版,其中包括封面图尺寸、版式设计、代码实现、与丑陋编辑器的勾心斗角。一一道来:

1. 封面图尺寸
微信给出的封面配图长宽规范是:

  • 单图文消息及多图文中的首条消息:900px × 500px
  • 多图文非首条消息:200px × 200px

这里有一个坑!

下图为大号封面样例:
3ba252d7c4ea18c6f2420ff96701996d_b

而真正显示情况是这样的:
62fc2a6d7eaca8f90049ff707d7755b2_b
ipad mini retina下,单图文封面左右被截断,多图文首条上下被截断。

e853e8a59dc73b68df39ab1b1c54eb11_b
huawei C8812下,单图文封面上下左右均有截断,多图文首条上下被截断。

不同设备下截断情况各有不同。

以下是转发至朋友圈后的封面图截断情况。多图文非首条消息无截断发生,可百分百正常显示。
3780adbd3f3a5efa6abc050dca4ecae1_b

可以基本得出一个还算通用的规范:把你要在封面图中重点展示的信息放在正中央400px × 400px的区域中,以最大程度减少截断影响。

2. 版式设计
对以往所发布的文章内容详细了解后,提取出以下常用或必备的文章元素:

  • 关注引导 (subscription guide);
  • 文章导读 (intro);
  • 视觉分割线 (separator);
  • 排行列表 (ordered list);
  • 引用语 (quote);
  • 转载申明 (copyright state);
  • 广告 (promotion);

微信固有格式:

  • 文章标题
    font-size: 20px;
    font-weight: bold;
    color: #000;
    
  • 时间,作者
    font-size: 12px;
    color: #8c8c8c;
    
  • 订阅号关注、阅读原文链接
    font-size: 12px;
    color: #607fa6;
    
  • 页面背景
    background: #F8F7F5;
    

另外,微信默认的段落文字大小、颜色、行高就很好,不必费心调了。

就不上设计稿了

3. 代码实现

仅提供less源码片段及emmet书写的html

························································
CSS部分
························································

  • 调色板

b9fe976776ac979b8a43c204fcc71c5b_b

// variables
@cherry: #EA4267;
@milk: #fff;
@caeseous: #ADB3C9;
@system-link: #foot;
@system-background: #F8F7F5;
@fate: #808080;
@imgHeight: 50px;

 

  • 基础类
// clear default 
p {
	.clearMargin;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clearMargin {
    margin: 0;
}
.clearPadding {
    padding: 0;
}
.inline {
	display: inline-block;
}
.block {
	display: block;
}

// mixin 
.square() {
	@width: @imgHeight;
	@height: @imgHeight;
}

 

  • 标签
// label
.label {
    .clearMargin;
    .inline;
    border-radius: 2px;
    line-height: 12px;
    font-size: 12px;
}
.solidLabel {
    .label;
    padding: 3px 4px;
    margin-right: 12px;
    color: @milk;
}
.blockLabel {
	.block;
	border-radius: 3px;
	background: #f2f1f0;
	border: 1px solid #dedddc;
	padding: 4px 10px;
	font-size: 13px;
	color: @fate;
}
.hollowedLabel {
	.label;
	padding: 2px 3px;
	//color == backgroud
	background: transparent;
	border: 1px solid @caeseous;
	color: @caeseous;
}
.label-cherry {
    .solidLabel;
    background: @cherry;
}
.label-caeseous {
    .solidLabel;
    background: @caeseous;
}

 

  • 行内装饰
// inline deco
.anchor {
	.inline;
	color: @caeseous;
}
.highlighter {
	.inline;
	color: @cherry;
	font-size: 18px;
}

 

  • 各级标题
// header
.h1 {
	.block;
	font-size: 19px;
	font-weight: bold;
}
.h2 {
	.block;
	font-size: 18px;
	font-weight: bold;
}
.h3 {
	.block;
	font-size: 20px;
	padding-left: 10px;
	line-height: 22px;
	border-left: 3px solid @cherry;
}

 

  • 引用语
// quote block
.quote {
	padding: 2em 3em;
}
.quoteMark {
    color: @cherry;
    font-size: 60px;
    margin-top: 20px;
    margin-right: 10px;
    line-height: 10px;
    .left;
}
.quoteText {
    font-size: 16px;
    color: @fate;
    line-height: 24px;
}

 

  • 广告卡片
// card
.card {
	padding: 0.5em 0.5em 1em 1.2em;
    background: @milk;
    border: 1px solid #E7E7EB;
    border-radius: 1px;
    margin-left: 0.5em;
    margin-right: 0.5em;
    position: relative;
}

.cardTop {
	margin-bottom: 10px;
    margin-top: 0.5em;
}

.cardBottom {
	margin-right: 0.5em;
	font-size: 14px;
	color: @fate;
	line-height: 20px;
}

.cardRightTop {
	.inline;
	.right;
}

.imgWrapper {
	.square();
	width: @width;
	height: @height;
	border-radius: 50%;
    background: @milk;
    .inline;
    .left;
    margin-right: 10px;
    margin-top: 0;
    overflow: hidden;
    & > img {
    	.square();
		width: @width;
		height: @height;
    }
}

 

  • 分割线
.dotDivider {
	.block;
	text-align: center;
	color: @cherry;
	font-size: 14px;
	letter-spacing: 0.5em;
	line-height: 50px;
}

 

  • 其它
.index {
	.left;
	margin: 6px 12px 0 0;
	line-height: 40px;
	font-size: 56px;
}

.footnote {
	font-size: 14px;
	color: #666;
	line-height: 22px;
}

························································
HTML部分
························································

    • subscription guide
      fieldset>section.blockLabel{订阅职业精鹰 ,↑ ↑ ↑ 点击上方蓝字。}
      

 

  • intro
    fieldset.footnote>section.label-caeseous{小鹰导读}+lorem20
    
  • seperator
    fieldset>section.dotDivider{ ·············}
    
  • ordered list
    ((fieldset>span.index{$}+span.h2{绿日和枪花}+{Rose出生在印第安纳州拉斐特一个虔诚的基督教家庭中})+br)*12
    
  • special combo
    ((fieldset>(section.h1{玫瑰$}+section>span.label-caeseous{工作城市}+{Rose作为乐队的主唱,音域宽广})+(section>span.label-caeseous{网申地址}+{Rose作为乐队的主唱,音域宽广})+(section>span.label-caeseous{招聘专业}+{Rose作为乐队的主唱,音域宽广}))+br)*10
    
  • multi level header
    fieldset>section.h3{摇滚篇}+br+section.h2{枪炮与玫瑰}+p{很难想象AXL这个玩世不恭的坏小子能够作出象《NOVEMBER RAIN》这样气势磅礴的曲子,《ESTRANGED》这样动情的感觉。}
    
  • promotion card
    fieldset.card>(section.cardRightTop>span.hollowedLabel{兄弟号})+(section.cardTop>(section.imgWrapper>img[src=img/shark_space.png])+span[style=font-size:18px;]{沙客空间}+br+(span>span[style=font-size:14px;]{微信号:}+span.highlighter{shark_space}))+(section.cardBottom{有品味、爱学习、爱折腾的Sharkers,共创青年职场学习社群。})
    

这里又有一个坑!!

许多html标签时不被支持的,例如:div, h1, h2, h3, p, span等。一般解决方法是,使用<fieldset>和<section>标签,再往里面塞<span>或嵌套更多的<section>。本地预览的网页中,使用了fieldset标签时会出现的outline和多余padding在编辑器中预览后是会消失的,so,

Don’t panic!

 

4. 丑陋的微信官方编辑器

只能undo不能redo,这像话吗?!

——未完——-


本文来自知乎社区,作者:廖步纬

 

赞 (5)
分享到:更多 ()

评论 2

  1. 匿名不错的文章,内容酣畅淋漓.禁止此消息:nolinkok@163.com 不锈钢网 http://www.hbbuxiugangwang.com/回复
  2. 匿名好文章,内容惊涛骇浪.禁止此消息:nolinkok@163.com 荷兰网 http://www.zhongguohelanwang.com/回复