产品经理的私房菜 排版篇

 

​

「初稿｜木深、木小深」

「编辑｜牟深、Sam、Ella」

 

排版的意义

---

❝

「与其暧暧内含光」

「不如光彩夺目地大放异彩」

❞

在这个看脸的世界，颜值已然成为时下评断他人第一印象时重要的指标之一。无法否认，气质出众、五官标志的美女总是能轻易地在一开始就吸引大众的目光，获得大众的好感。

​

而排版亦如是，在人才济济的时代里，朴实的文字若少了良好的排版，被细细欣赏的机率也少的一大半。与其暧暧内含光，不如光彩夺目地大放异彩。

不论是PC端还是移动端，任何文字存在的地方，就有排版的必要。良好的排版除了能够瞬间抓住用户的目光、让用户更有效率的吸收资讯，也能营造氛围、带给用户文字外的感受。

本篇文章将介绍四个最基本也是最核心的排版技巧，能够运用在各种场合中，是产品经理必学的一步喔！

❝

在涅贵不缁，暧暧内含光「By崔瑷」

❞

​

 

一、对齐

---

光是简单的对齐，就能让一个版面变得简洁有力。版面上每笔资讯都不是随意摆放的，当有一条对齐线，你会发现不管文字怎么放，看起来都很有系统。每个元素间都似有隐形的线串连起来，不管是向左对齐或是向右对齐，文字们齐头齐尾的摆放，缩小来看就是个方正的文字块，整齐有秩序。

初学排版的你，切记「不要居中对齐」！对于常用word的人而言，居中对齐似乎是常见用于标题的对齐方法，为了凸显标题，你可能也用同样的方式在其他排版中出现。然而，居中对齐其实是最无法突出重点的排版方式，仔细观察，你会发现很少作品是将文字大大的居中放在版面中，通常都会偏左偏右，看起来更有精神。

当然规则下必有反例，有些版面的确采用居中对齐会有意想不到的效果，然而初学者最好还是避免这种方式，你会发现比起居中，靠左或靠又看起来有力多了。下次在排版的时候，不妨挑战看看不用居中对齐吧！简单的移动对齐线，轻轻松松让你的作品看起来更专业了。

​

仔细观察，每个作品都有隐藏的对齐线

​

对齐后，保持了版面的整洁，也留下大片的空白，这时可别硬找东西胡乱塞入版面中！留白的力量是不容小觑的，空白不但留下了空间让用户思考、停顿，也能更加凸显其他元素的重要、资讯变得更加易读，适当的留白是学习排版的重要心得之一。

​

 

二、群组

---

版面变得整齐后，将你想提供给用户的资讯做更系统的整理，把每个相关的元素组成一个群组，让人一看就明白版面囊括了什么资讯，并选择其感兴趣的资讯，做更为深入的阅读。想要版面做出更多层次，可以利用「字体、颜色、大小、空白、符号」等变化方式，让每个看似单独的字眼组成一个共同群体。而大部分的版面为了整洁，通常不会有超过5个以上的群组。

空白

格行空白是最简单高效的方式，通过将不同资讯用空白隔开，相似资讯则能聚在一起更加吸引用户的目光。

​

颜色

运用同样的颜色，将相同性质的文字捆绑在一起，也是不错的选择。可以注意下，一个版面上的颜色，通常不会超过5种，过多的颜色会让用户失去阅读的重心，最好能控制在3种以内。

切记，对于产品设计而言，重点永远不在多，而在于精。

​

符号

当有许多资讯需要分类时，符号就是十分方便的区隔方式。在重点处使用加粗、下划线，或是在每个小标后面加斜线，都能让资讯显得易读又整齐。

​

 

三、对比

---

将资讯分类后，层次就出来了，接下来善用对比法则更能让你的重点浮出，使得用户一眼就看见你想表达的中心思想。运用对比技巧能顺利吸引用户的目光，让他们先看见你最想表达的重点，接着顺着你的引导继续看下去。

对比与群组相似，大概可以分为：「字体、颜色、大小」等方式，不一样的是群组是将相似的资讯采用相同的字体、颜色组成群组，而对比是将这些不同群组利用字体、颜色等方式区隔开来。善用这些技巧能让你的版面更加有层次，一目了然。

字体

通常最重要的标题会使用与正文不同的字体，显得特别而吸睛。但要注意的是，一个好的版面设计请避免用超过3种字体，因为过多的字体反而会让整个版面变得没有一致性，让用户无法看出到底想强调的区块在哪里。

此外，再搭配不同字体的时候也须注意两者风格是否相符、字的粗细大小、字距行距看起来是否和谐等问题。

​

大小

主标、副标等为了正文分隔开，大多都会加大凸显重要。许多刚接触产品设计的人会认为「越大越好」，凡是遇到标题就要「放大、放大、再放大」，然而并不是越大就越有用，要领在于「有大有小」。

如果整篇文章全部都是100pt，你也看不出任何重点；反之，若文章大标放大，副标稍微放大，内文不变，整篇文章的层次对比就出来了。有了对比，用户看到清楚的标题后，若对此有兴趣，便会继续阅读字型较小的正文。

​

颜色

颜色的对比则可以用色环搭配出各种风格的色彩，对于刚接触色彩学的人，可以看看behance学习下。里面有用色环搭配出的各种色彩让你做选择，你可以选具有高反差的互补色（Complementary）、不易出错却具强烈对比的分散互补色（Split-Complement）、舒适相合的近似色（Analogous）、活泼协调的三角对立色（Split-Complement）、多样又平衡的方形色（ Square），各种方式搭配出的颜色都具不同的风格，不过每种方式都需注意色彩的平衡。

此外，还有简易的冷、暖色调的对比法，冷色调会有缩小、倒退的感觉，适合用于背景；而暖色则有膨胀、突出的效果，适合用在标题。

​

 

四、重复

---

重复是让PC端产品显得有系统、移动端产品能突出重点的关键技巧。将重要的资讯不断重复出现，不仅能让读者一眼就辨识出重点，更能让他们留下深刻的印象。

通常PC端产品，产品LOGO会重复出现，让用户快速记得产品的标志；移动端产品亦是如此，同样的元素在每个页面排版时出现在各个角落：页码、标题、图片等，这些小细节都是PC端和移动端产品设计的关键因素。

当然，同一张图不断出现也会造成视觉疲劳，这时应该采用「多样性统一」，也就是将想强调的元素稍加做一些变化后，再重复使用，这样不仅能达到重复的效果，也能让读者有更多不一样的体会。

​

 

结束语

---

纵使这些排版技巧能够让原本的文字变得吸引人，别忘记，与美观相比，重要的永远是内容。若是文字不精，再漂亮的排版也只是沦为华而不实罢了。所以，在排版时除了善用这些技巧外，保持文字的易读性更是首要原则。

下篇《产品经理的私房菜》系列，将带你一起精进文案设计，让你的作品有外表也有内在！敬请期待emmm

---

​

产品经理的前进道路，不应该是一场孤独求索的旅行 。沿途那些美好的风景，有趣的人文，我愿意沉淀下来，分享与同行的你，或者是在路上的他。

以上，希望对小伙伴儿们有所帮助，共勉~

如果你有任何问题，请在留言区告诉我们。也请记得订阅「公众号：木小深」和我们的专栏，欢迎分享给其它有需要的人。我们这期分享就到这里了，再见❤️。