超高颜值图文排版完全指南｜在公众平台更新后，你必须通读的教程

除了干货，其它什么也没有
职场	数据	新媒体	设计	极客

企业账号托管咨询：021 37218818

说到颜值最高的新媒体账号，你会想起哪几大品牌？无非是 adidasOriginals 、 卡地亚Cartier 、 星巴克 、 肯德基 等。 （点击蓝色字可查看案例）

动态加持、无缝衔接、文字位图化…… 为什么这些钱挣得最多的零售品牌，新媒体都有这样的特色？事实上，当普通新媒体人还在妄想所谓内容流量时，真正专业的机构账号已然是“1个文案配10个设计师”的高端操作。

我们 JZ 也同样托管有不少大品牌机构账号，虽然基于保密协议无法具体透露，但是我们悉心总结了这类顶级运营的超高颜值图文排版方法，希望各位品牌主能真正成长到专业化新媒体运营的水平。加之微信公众平台新版本有了图片推送的全新功能， 能使得图片更加具有沉浸感， 所以掌握这一顶尖媒体形态的需求迫在眉睫。 （顶级品牌新媒体托管请致电 021-37218818）

设计，是阅读的前提

罗兰 • 巴特说：仅仅体现创作一篇文章的初衷是不够的，最终要看它向读者传递了多少信息。

对于任何一个交互界面而言，用户都首先识别形状、颜色、版式等信息，然后才能具体理解文本。 所以设计，是一份新媒体优质图文的大前提。我们以星巴克中国 3月26日的推文 为例，分析其中所用到的设计理论。

七个要点

艾米尔 • 鲁德主张采用规整的方格网格作为平面设计的基本版式结构，注重平面造型元素之间的和谐关系，他认为版式设计的目的在于传达信息和交流，强调设计对象的可读性和易读性。

Typography has one plain duty before it and that is to convey information in writing.”

—Emil Ruder.

1.留白

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

「留白」或「空白区」指的是页面排版上除文字与图像外的空白区域，例如行距与间距。这个术语源于白纸上可见的空白区域。适当的使用留白可以使页面排版看起来更加整洁优雅，提高设计质量，增强艺术感。

2.平衡

设计版面时，各个元素应取得和谐感。优秀的设计会清晰的展示需要传达的信息。

顶级图文排版一般采取三种基本的页面布局方法： 对称式，非对称式及纷乱式。

3.结构层次

通过将各个元素的布局，可以在不同的位置去强调作品的层次感。

可以通过组合、颜色、强调共性等引导读者并传递有效信息。

4.元件尺寸

移动端的排版设计有其特殊性。如果你不清楚一篇高级品牌图文内，元件应当达到什么样的尺寸和比例关系，那不妨先学习手机系统本身的交互设计。我们就以最直观的 iOS 桌面 UI 开发为例，将苹果官方的 App 图标尺寸抽象化。 这基本就是移动端重点视觉内容的最小尺寸了。

那么如何从大到小简化一个视觉元件？ 这里我们做一些拓展学习，比如星巴克的这篇图文中，大尺寸的手机采用了下方最左图的设计。假设这个元件需要继续变小，则可以按如下思路，通过减少细节，填充描摹的方式做逐步转化。

5.阅读顺序、网格

在专业设计领域内，Grid Systems 网格系统（或称之为栅格系统）是移动开发的更深层操作。我们将图文视作一个长图层，并用网格线固定分隔，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 它会在很大程度上决定用户的阅读热点顺序。

这种专业技术内容这里我们就不做具体展开，品牌主可以自行根据情况要求设计师进行标准化栅格系统设计高级图文。

6.企业标准手册、配色

企业标准手册中其中一项是企业视觉识别系统（Vision identity system，简称VI 或 VIS）是企业识别系统 CIS 的视觉符号，是企业形象的视觉传递形式，它是 CIS 最有效、最直接的的表达。比如星巴克的 LOGO 和专用字体，以及专用的配色方案。（绿色 RGB:(0,102,51) 白色 RGB:(255,255,255)）

7.产品拍摄构图、材质

构图是一个从自然存在的混乱事物中找出秩序的思维过程。 星巴克而像星巴克、肯德基、麦当劳这样的餐饮企业，通过对产品（食物）的构图，吸引顾客。

可以使用三角构图、对角线构图、中心构图来拍摄美食。

在案例中，星巴克使用了有皱褶的餐纸作为背景，还可以活用不同的布料材质，用纯色或者特别的肌理。

进一步学习

你也可以点击阅读《 中文排版指南（有点变态） 》，从文字设计角度进一步认识专业排版理论。也欢迎点击上方卡片报名我们面向高级品牌的微信顶尖排版课程。 （顶级品牌新媒体托管请致电 021-37218818）

另外，虽然 JZ 很少谈入门级的媒体整合理论，但在 CSR 企业社会责任方面将持续为行业新人尤其大学生提供帮助。为提升青年创新与创业能力，我们决定再次启动第五轮 「新媒体运营与 HTML5 设计」 高校公益巡讲站点申请报名。

我们将 于 2018 秋季学期 的国庆节后恢复在各个高校的免费技术讲座。本一期主讲人为计育韬老师和交互设计大神 GL。先来了解往期 2016 春季学期、 2016 秋季学期、2017 春季学期以及 2017 秋季学期 4 轮 ，共 81 场次 、 63 所大学 及组织 参与的公益巡讲名单 ▼

请上下滑动手机屏幕查看

主讲人信息

计育韬

微信官方 SVG AttributeName 开发者

上海市信息化青年人才协会会员

复旦大学青年智库讲师

浙江传媒学院客座导师

上海团市委新媒体顾问

上海市金山区青联副主席

上海市新的社会阶层人士联谊会会员

新榜 500 强运营人

原复旦大学 思想政治教育 专业背景

GL（赵国梁）

前端交互设计师

执行大量企业高级新媒体运营案例

林肯 | 第一太平戴维斯 | 梅赛德斯奔驰 | 起亚

分期乐 | vivo | 滴滴打车 | 20世纪福克斯 | 一加手机

点击可查看相关内容

GL 的其他定制安排包括

BMW | 苏宁 | 小米 | 南方航空 | 杜蕾斯 | 奥康 | 现代汽车

安娜苏 | 京东金融 | 幸福西饼 | 还呗 | 便利蜂 | 伞兵出行

民生银行 | 昆仑能源有限公司 | 河南中原消费金融 | 今世缘

五芳斋 | 兴全基金 | 上海福彩 | 京东支付 | 龙湖地产 | 蓝光地产

...

申请办法

将沿袭我们 5 年来往期全国高校巡讲的合作模式，有需要的高校组织可自主与我们联系。高校类型不限，组织类型不限。参与听讲的大学生无需支付任何培训费用，全部校园组织方平均分摊主讲人的高铁/动车票和住宿即可。这也是为了避免一些高校组织随意跳票的行为。

> > > > 巡 讲 时 间

10 月国庆节后 1 至 2 个月

> > > > 经 费 说 明

本轮巡讲仍将采用历年受到各校方一致认可的公益摊派方式，听众无需支付任何成本，高校组织方全体平摊巡讲人 交通费用 （高铁 or 动车二等座），另同地区高校分摊所在地的 食宿费用 ，住宿可安排在学校宾馆。

各项开支如车票等将进行公示，根据各地具体情况，校方支出费用预计在 500-800 元之间。实际情况以接洽安排后为准。

> > > > 申 请 条 件

根据之前巡讲安排的经验，通常在截止日前会收到约 60 所大学或校园组织参与合作申请。最终我们将根据可行性评估，如各校的讲座安排进度、学校组织规范性和执行经验、新媒体平台能力等，确定约 25 所最终巡讲高校。

高校类型不限，组织类型不限。

合作申请从即日起即可向我们提出，到达 60 所大学后截止。

由于我们也经常到各地党政机关单位主持新媒体培训，故如有意向的地方机关，同样可以提出申请作为巡讲站点。