分享

设计|从设计的基本原则谈公众号排版

 叶星优酸乳 2020-08-13

每一篇推文我都当成是一个产品,会严格把控内容质量以及排版设计。质量决定推文能带来的长远影响,排版决定给人的第一印象。

现在 IOS 以及 Android 都适配了暗黑模式,这对于排版的要求又高了不少。一些作者依旧在使用白底分割线,导致在暗黑模式下的阅读体验非常割裂。我对于体验要求很高,一般像这种排版,除非是内容十分翔实,否则我会直接关闭走人。因此,我摸索了适合自己的一套排版规范,尽量兼顾简洁和美感。当然,这也并非只应用在微信推文,对于日常写的文档,我也会尽量遵循类似的规范。

在正式开始之前,先推荐我关注的一位作者的排版「可能是深色模式下最好的公众号阅读体验!」。他的排版给人一种恰到好处的感觉,感兴趣的可以去学习一下。我看到那篇文章时,发现他所说的和我平常遵循的规范有众多相同点,因此印象深刻。

说到书写排版的规范,我受影响最大的是在知乎的经历。2018 年有幸在知乎工作,那个时候知乎还未如此商业化,整体氛围小而美。在那里,几乎所有人书写的文档,都遵循一定的 原则[1]。例如中英文、中文与数字之间加空格;专有名词大小写规范;直角引号等等。经过精心设计的规范,统一即是美。同样,这里也有一篇指南:文案风格指南:中英混排和标点符号的用法[2]

下面开始正文。

我的排版同样遵循设计的四大基本原则:亲密性、对齐、重复、对比。这是 《写给大家看的设计书》[3] 这本书的设计原则,作者是 Robin Williams,世界著名设计师,Adobe 和 Mac 技术社区内的偶像级专家。这本书浅显易懂,大师出手不凡,把抽象的设计原则用平实的语言描述明白,推荐给对设计感兴趣的同学去阅读一下,培养自己的审美。

亲密性

Robin 的亲密性原则:将相关的项组织在一起,移动这些项,使他们的物理位置相互靠近,这样一来,相互的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。

例如我的「周记」,「资讯」下面只放与资讯相关的内容,「言论」下面只放某人/某书/某文章的摘抄。这样做的好处是,不至于让整篇文章看起来混乱不堪,毫无主题。对读者而言,同一主题能够在一个地方阅读完毕,而不用上下翻阅,阅读体验会更好,效率更高。同理,生活中的物品摆放也是如此,整齐划一给人美感,同时也提升效率

对齐

Robin 的对齐原则:任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。

对于公众号而言,一般使用默认的两端对齐即可,在缩进方面,我选择两端缩进 8。默认缩进会使文章太紧贴屏幕边缘,导致观感上会比较紧密而压迫;参数 16 及以上则偏离边缘太多,在观感上会比较零散。参数 8 的配置,留白恰好到位。不过,对于一些较短的内容,或者以短语为主的句子,参数 16 结合居中对齐还是会得到不错的效果。

◎ 从左到右依次是:默认缩进、缩进 8、缩进 16

居右对齐使用较少,一般是作为署名或者日期戳。

重复

Robin 的重复原则:设计的某些方面需要在整个作品中重复。

重复不仅可以是文字,也可以是颜色、符号、格式、设计要素、空间关系等。读者可以看到的任何方面都可以作为重复元素。

例如文章的层级关系,标题和正文区分开来,同一层级的标题,读者可以快速切换对应的标题去阅读正文。又如文章格式,在相似的内容重复使用相同的格式,可以强化对应关系,减少认知压力。

对比

Robin 的对比原则:页面上的不同元素之间要有对比效果,达到吸引读者的效果。

对比的作用是制造焦点,吸引读者,同时还能够使层级更清晰。这里分享我在文字及间距上的使用:

字号:

  • 标题:18/20 px
  • 正文:16/17 px
  • 注释:12 px

正文 16 px 的大小刚好合适,尤其是 1000 字以上的长文,不至于让读者滑很多屏才读完。17 px 只是稍微大一点,对于短一些的文章可以使用。标题、注释相对于正文来说,要遵循「对比」原则。标题大几号,让层级更明显;注释只是补充,12 px 很恰当,不会和正文混淆,也不至于小到让读者难以阅读。

字体颜色

  • 标题:默认颜色加粗,色值:#3F3F3F
  • 正文:默认颜色,色值:#3F3F3F
  • 注释:灰色,色值:#888888
  • 突出:矢车菊蓝,色值:#5A9EDB

标题和正文,我使用默认的色值,标题加粗加强对比,使层级更加清晰。注释则是使用了灰色,避免干扰正文的阅读。在选择突出色的时候,我尝试了很多,例如蓝色、橙色、朱红等,效果都不是很满意。

◎ 正常模式&暗黑模式对比

参考了许多文章,同时问了身边的设计师,结论是若要兼顾暗黑模式以及普通模式,蓝色调是最好的强调色。在一番寻找和尝试之后,最终选择了矢车菊蓝,介乎绿色和蓝色之间,因矢车菊而得名。我对其进行了微调,使得在黑暗模式下不至于太晃眼,白色背景下也不至于太突出,最终得到了色值 #5A9EDB。

◎ 来源:维基百科矢车菊蓝词条

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多