专栏名称: 二爷鉴书
第一时间向大家推荐好书和介绍,同时坚决揭露烂书,以IT、互联网行业为主。个人品味,仅供参考。
目录
相关文章推荐
分享迷  ·  全新的接口,以及全新的0.4.2版本 ·  4 天前  
分享迷  ·  全新的接口,以及全新的0.4.2版本 ·  4 天前  
电动车公社  ·  车圈大变天!激光雷达即将被判死刑? ·  5 天前  
电动车公社  ·  车圈大变天!激光雷达即将被判死刑? ·  5 天前  
51好读  ›  专栏  ›  二爷鉴书

我究竟用了什么工具排版这么好看?

二爷鉴书  · 公众号  · 科技自媒体  · 2017-05-22 22:27

正文

介绍这本书和公众号的排版流程。

自从调整了公众号版面设计,经常收到留言问我用了什么工具,什么字体之类的问题。这些问题的答案其实没什么了不起的,只是知不知道而已。今天我打算借这个话题介绍一本我最喜欢的版面设计的书,最后再简单跟大家说一下我自己排版用到的参数。

这是日本人写的书,关于版面或字体设计看日本的书其实挺好,一来因为日本有深厚的设计底蕴,二来因为我们的文字(至少一部分)有着非常类似的结构和样式,而且日本人写书的风格大都循循善诱,绵绵不绝,阅读体验比较轻松。(之前我推荐过赵谦翻译的一本《CPU 自制入门》,书里连买电子元器件的地址都认认真真地写了,还附了地图,看得人哭笑不得)

《版面设计原理》是一套设计丛书中的一本,另外两本是关于色彩和字体的设计的,我已经没什么印象了,唯独这一本特别喜欢,给我很多启发。

设计关于直觉

有时候我们会觉得设计故弄玄虚,元素的编排、线条的选择、视觉的平衡,听起来特玄学。但从另一个角度,当我们拿到不同的平面设计作品时,又可以凭借直觉说出哪一幅更吸引人。

设计便是迎合甚至操纵这一直觉的工具,当你自然而然的读这一行文字的时候,你的目光轻松地追随「行」的发展,在行尾自然而然地将眼球向左边拖拽,视线抓住下一行的第一个字,在拖拽的过程中的那一刹那你会对目光掠过的下一行文字视而不见。此时,如果文字有加粗效果,你的视线会像划过模板的磁铁,被一个钉子轻轻地吸了一下,然后又啪嗒一声离开,继续向前行进。

如果突然发生了一点变化,你还是可以抓住下一行,但好像有一点别扭。行间距变大了,你要拖动的视线的距离增加了,而且因为行与行之间的留白,眼球在移动的路上抓不住可以依靠的线索,在这一刹那,你可能会有一点点烦躁。

再看另一个极端,行间距变的足够小,字间距变的特别大,在原来平淡无奇的横向阅读中,你抓住下一个字要耗费的精力多了一点,你可能下意识地想让视线竖直向下发展,你需要付出额外的努力去克服这种直觉。你或许已经在骂我了。

而设计的精妙之处在于,在「过小」和「过大」之间,找到一个恰到好处的平衡,让你的直觉自然而然毫不费力的工作,让你甚至注意不到版面的存在,自然地捕捉到下一个字,下一行,下一段。

设计是种传递

设计总会带有目的,平面设计的目的通常是传递信息,在某个环境下,用特定的方式,面向特定的人群传递信息,从而影响他们。

评价设计的时候,好不好看和有没有效是两个不同的维度。我们都喜欢符合自身审美水平的设计作品,但设计作品的目的并不是取悦你的审美(虽然可能是目的的一部分),而是「别有用心」地打动你。比如回忆一下烟盒上那些令人作呕的恐吓图片,不会有人说那些是美的,但它们是有效的设计。

传递的另一层意思是,优秀的设计作品应该是无声的,信息自有他的结构,设计只是承载这些信息的形式。如果你被设计的形式所吸引,而忽略了其承载的信息,那这个设计多半是失败的;相反,当信息没有余赘,结构清晰地表现出来,而你甚至没有关注到描述它的是图还是文字,是黑白还是彩色,那它或许是一个成功的设计。

不逾矩,而后从心所欲

这本书有五部分,分别是「建立条理」、「添加变化」、「突出强调」、「设计技巧」和「颜色搭配」。除去最后一个,其实是基本原则向发挥创意的发展。每一部分都是通过基本的设计工具展开的,比如先用对齐、设计视线移动、贴近和远离等工具建立设计的条理,然后在逐渐引入变化,通过留白、尺寸等方式将元素的结构注入设计中,接下来跳出基本的工具,解释什么是节奏、如何添加故事情节等等。

这是一个先有规矩,然后再建立灵感和风格的过程,我小时候学弹吉他,在琴行有个挺厉害的吉他手,经常跟我们说要释放自己,在旋律中寻找动机,抓住灵感在指板上迸发的瞬间,忘掉大小和弦五度圈这些东西。每当这时我就很尴尬,因为当时我还摁不好一个最简单的和弦,我哪儿有资格去聊什么音乐性?

就像有人看到毕加索的印象派画作说这也叫艺术,给我块抹布赶紧的,三分钟画一幅,哪里能卖了换钱?却不知道毕加索这些支离破碎的画背后扎实的功底——那些能驾驭头脑中光怪陆离想法的,一笔一划的功底。

所以别想着有什么捷径,想凭借自己的小聪明做出什么惊世骇俗的设计,还是先掌握最基本的对齐、留白、线条工具,在理解他们的基础上再去考虑创新。我特别讨厌那些还不知道两端对齐和左对齐有什么区别的人大谈什么「原则就是用来打破的」,这不是桀骜不驯,这是懒。

附录:排版参数

书就介绍到这里,接下来介绍二爷鉴书的几个设计参数,跟微信默认编辑器相比,我改变了以下几个参数:

:用了无衬线字体,没什么特别的,好像大部分都是类似的,并且说实话,这些字体究竟在不同的手机上会呈现什么效果,我也没特别研究过,正文用了rgb(100,100,100)(建议可以用十六进制的 #666666,我只是因为前者转成十六进制是我女儿的生日),注释用了十六进制的 #999999,字体大小是 15 像素。

间距:我在文章左右两边留出了总共 30 像素的空白,段间距设置了 10 像素,行高 28 像素,字间距 1 像素,如果文章中英文比较少,我会用两端对齐,否则用默认的左对齐,因为两端对齐会为了保证单词在同一行而产生特别奇怪的效果(在上一段你可能会看到这样的问题,就是行里面的大量空白)

二级标题:这个我做了多的一点,增大了字号和行距,还在二级标题下画了一条 0.5 像素的线(或许有的手机渲染不出 0.5 像素,会显得粗一点)

所有上述改变反映到 CSS 上大概是下图这样的,其他都是默认的。

如何应用这个 CSS 其实办法蛮多的,工具并不是最重要的,我用的是 Ulysses ,可以直接在设置中添加样式文件,然后通过预览功能生成带格式的 HTML 代码,直接复制到微信编辑器中就可以了。

关于排版的参数选择,我借鉴了阿禅的公众号可能吧(id:knbknb)很多,禅叔有两篇关于微信排版的文章很好,大家可以关注后在历史消息里搜索「排版」,里面有方法,有工具还有流程,很有帮助。


每学一个技能,都代表了我们自身价值的提升,然后呢?还是让我们例行去一下大屏幕,长按识别屏幕上二维码(或点击阅读原文),注册 100offer,谈谈你对下一份工作的期待。一周内,收到 5-10 个满足你要求的好机会。