这几年作品集的制作质量要求越来越高，做法也和过去有了很大的变化，最大的变化之一就是招聘方对堆积文案内容的做法越来越反感，能反映设计水平和审美的作品集越来越受重视，从拼小作文演变成卷版式设计的能力。

而今天要分享的，就是版式设计中最重要的内容之一 —— 节奏感。

作品集的节奏问题分析

既然提到节奏感，我们首先就要理解什么才是节奏感，这是一个平面设计知识点，即画布中视觉元素的分布密度和出现频率的统称。

这么解释还是比较笼统，我们可以类比到其它的艺术表现形式上，比如诗歌朗诵之所以叫朗诵，是因为包含抑扬顿挫的节奏起伏，而不是速率稳固的背诵，才能让听众回味。

在音乐和影视中同理，在编排的时长内包含了低谷和高潮的节奏变化，才能引发冲突让受众沉浸其中，过于平淡会让人昏昏欲睡，全是高潮又容易让人疲劳精神涣散。

可以得出结论，节奏是 “美” 的基本要求之一。

再聚焦到作品集，节奏的作用只高不低。因为作品集并不只是 “一张” 作品，而是一系图文内容的组合，它更像是一本画册或 PPT，囊括了大量的图形和信息。如果无法在视觉上有效组织这些内容，那么引用雷克顿的话：混乱将随后而至……

主流的的设计作品集做法，一种是上传到网页上，一种是导出成 PDF 格式，虽然格式不同，但是从上到下的浏览顺序是一致的。

而因为包含的内容太多，就需要对它们进行分段（也可以叫分页），将不同的内容置入到不同的片段中去。比如一个项目展示中，项目前期说明、体验分析、设计思路，到后面设计展示的不同模块，都可以通过分段来增加区分程度，提高可读性。这个思路很简单，也是作品集节奏感控制的第一步，但这是宏观的部分，细节依旧要落实到具体的视觉内容和布局上，可以进一步将节奏的应用拆分成两个部分：

- 单页布局

- 前后布局

• 单页布局即单个分段页面内的视觉元素排版和布局，这也是平面设计中最基础的技能，但大多数 UI 设计师并不具备这种能力，在中低级设计师作品集随处可见以下的问题：

问题1：无序

视觉元素的位置、尺寸毫无关联和依据，只是把内容随意丢进画布中。

问题2：拥挤

视觉内容堆积过多，且元素的间距很小充满堵塞感。

问题3：空旷

视觉内容不多，且尺寸太小，导致无意义的留白过多

这些都是只看一个分段或页面就能轻易发现的问题，只要经过一些正确的排版技巧学习和训练就能快速得到解决。

但前后布局就不一样了，是观看者在进行页面上下滚动浏览过程中所感受到的节奏感，由多个分段、页面组合而成的视觉效果，和单个页面自身设计的合理性并不对等。

往往在一套作品集中单看某一页面的排版都没有问题，但放到一起看下来，就 “总觉得哪里不对”，相信做过作品集的同学都有过这种经验。

总结起来，常见的问题包含以下几种：

问题1：跳跃

前后页面的布局、效果表现非常不统一，包括排版模式、元素大小、色彩应用、圆角样式等，每个页面各做各的毫无关联，看起来像弗兰肯斯坦东拼西凑的产出。

这属于作品集输出中最严重的视觉问题，不管作品本身做的怎么样，设计思路如何，都能表示设计师毫无任何排版技巧和经验，缺少最基本的设计素养和审美。

问题2：寡淡

前后页面虽然内容和图片不一样，但从布局到颜色没有太大的波动和变化，用一个套路批量复制替换出来的。因为内容太长，观看者对展示内容也不是很了解，很难区分展示的是什么，以及前后差异。

这类问题很常见，属于设计师在缺乏想法又不想冒险时的“安全”做法，虽然不会有太好的观看体验，但至少保证了不出错的下限。只要掌握正确的设计思路，就可以在这个基础上快速调整并输出更好的结果。

问题3：聒噪

置入的视觉元素过多，且页面、分段之间留白不足，导致浏览下来的视觉感受非常的 “吵”，很容易让观看者觉得烦躁和失去耐心。

这是这几年才普遍出现的问题，早几年的UI行业崇尚极简（复杂的也做不来），很多设计师在这个要求下难以输出视觉效果突出的设计。而随着这几年国内平面行业的发展，面向快消市场的国潮平面设计风格和技巧开始溢出到 UI 行业中，使得很多UI设计作品集也开始借鉴平面的作品集，比如下图这种。

不是说这类平面设计风格不好，而是在 UI 作品的场景中很难适配展示的要求，并且越复杂的视觉风格越难驾驭，往往只能获得相反的效果。

作品集的设计需要立足全局，才能输出一份观感优异、舒适、专业的成品，避免出现上述的问题。想要快速提升相关技能，就可以看下面我总结的技巧了。

作品集的节奏感控制建议

从前面的问题可以了解到，前后布局的节奏控制明显比单页布局难得多，而新手的主要问题就是做一页算一页，这种做法就是节奏问题产生的根源。

所以想要提升作品集输出的质量，第一件事就是建立可以进行全局节奏控制、检查、优化的有效方法，并应用到自己的作品集设计流程中去。

这个方法其实并不复杂，就是在设计软件中把相关的作品集画布按真实的展示效果进行排列，可以全选对齐后，设置成智能排列，再手动将画布的间距改成20px（和PDF间距差不多）。

相信很多同学都会自发完成上述操作，但光这么做还不够，还要将画布进行缩放，到视觉内容变成无法识别细节的模块的程度即可。

比如一段文本，在视觉上已经变成一个有缺口的矩形而看不清其中的文字，或展示作品图看不到里面的设计细节只能大致看到其中的色块和布局。

这么做的目的是直接帮助我们忽视细节的干扰，将注意力集中在全局节奏上。而想要让它发挥最大的作用，就要在作品集刚开始设计的时候就应用，直接着眼全局做调整指导后续细节的设计，而不是等到把作品集的内容都设计完以后再把它作为自查的工具进行优化，这样不仅效率低下而且会浪费大量的时间。

那前期应该怎么利用起来呢？当然不是指直接用这个比例进行设计，这是不切实际的。

而是要在前期先用比较快的速度搭建出作品集整体的框架原型，确定主要的展示的页面、顺序、文案，可以填充大色块和作品图，但绝对没到完成细节设计的阶段。

在这个基础上，就可以进行版式节奏的处理了，下面罗列几个关键的实践要点。

要点1：背景色节奏

背景色是大画布中感知最明显的要素，而优秀的长条形页面往往会在背景色上做文章，通过不同的颜色穿插来实现丰富的视觉感受和体验。不管是网页、商品详情页还是作品集。

而背景色的应用当然不是“随缘”指定，而是在一定的范围内筛选再应用，背景色的类型包含下面几种：

- 黑白灰：即最基础的背景用色，包含深色、白色和浅灰三级，尽量确保每一级只有1-2个色值即可

- 主色：为作品集展示单独创建的主色或当前项目应用的主色。

- 辅助色：为作品集创建的辅助色，或项目中出现的一些醒目的用色，不能胡乱创建新颜色。

- 图片：直接使用图片填充画布的方式，包括背景纹理图、Mockup、渲染图、摄影图等。

而想要正确使用它们，建议先确定展示是以浅色还是深色系为基础，其它类型为辅助。在常规页面中使用基础色系背景，而每隔几张页面或本身比较特殊、权重高的页面再应用其它类型背景，成舒适、有效的色彩过度。

这部分的色彩搭配没有绝对正确的填色方式和节奏，但只要记得黑白灰为主导而突出的主色和图片尽量低频使用，那就可以获得比较不错的效果，且不会有太大的错误。

要点2：特殊页面构造

每个分段页面虽然可以填充颜色，但不代表一个页面只能以一个矩形的整体进行应用，我们可以对这个页面进行适当的切割，让它形成更多小的视觉分段。比如切割成 2*2 等分，或者 1+2、1+3 的模式。

这种做法必须要确保目标页面有合适的内容拆解和填充，而不是强行拆解但不知道要往里面放什么。这是很多作品集中都会出现的错误，直接将一个页面拆解成上下两个没有隔断必要的部分，阻碍观看的流畅度。

同时这种做法在一个项目的展示中建议不超过三次，因为使用频率过高，就不只是节奏上的变化，而是让整体视觉内容都变得破碎。

除了分割外，不同页面的边缘本身也可以做文章，那就是圆角化、卡片化，这也是这几年在平面展示领域特别流行的做法。

圆角化的处理只适合应用在少数页面中，尤其是在 PDF 的应用场景下，PDF 会给每个页面强行分配矩形画布，导致直角边缘会出现一些镂空，少数页面设计用圆角还好，但如果每个页面都这么做，观感就会非常差。

要点3：页面分隔控制

虽然在 PDF 中，页面和页面之间会强制增加分隔空间，但是背景色才是帮助观看者区分的第一因素。但这不代表不同页面成为孤岛，里面怎么设计都只是这个页面的事和上下页面无关。

最常见的错误，就是在相连两个页面的底部和顶部应用了大量的设计元素和细节，比如页眉、页脚、文案、图标等，且内容的实际间距并不大，比如下面这些案例。

要解决这个问题，就不要给作品集的页面同时添加复杂的页眉和页脚设计，且上下一定要预留充足的内间距作为隔断。这里涉及到另一个问题，就是页面高度的设置，其中一开始定义的单页高度不管是 800 还是 1080 是作为最小高度存在，而内容如果太多则可以增加页面的高度进行适配。

和卡片组件高度设置类似，页面的高度为：内容高 + 页面内间距。而不是当页面高度不足时还强行把内容塞进去让下方空间捉襟见肘。

要点4：元素分布控制

前面三点都是比较上级的调整，是为后面的页面排版搭建环境和准备工作，而这一步就是针对具体的设计元素做调整了。

虽然平面的排版方式多种多样，但在作品集输出不是做海报，每个区域内无需应用太复杂的版型，尽量使用一些简单清晰的类型，便于节奏控制和阅读。

常见的作品集分布可以包含以下五个类型：

不管你的页面要展示什么内容，都可以套用其中一种模式去完成。具体的页面应该怎么布局后面有空会再出具体的分享，而这里要强调的，就是前后面之间要有布局类型上的差异，不要一个布局形式用到底。

即使是同一种布局形式，也可以通过对调左右、上下内容来形成视觉的差异性，而不是只能一条路走到黑。

以上这几点，就是前期可以进行全局操作、控制、设计的技巧，在对基础原型实现这些操作以后，再去完成后续的具体设计，包括作品集样式规范还是栅格的定义。

同时，针对全局布局和节奏的控制上，必然会出现干扰一开始内容展示的规划，那么我会给出一个比较政治不正确的建议，就是 —— 让展示内容根据排版特点进行适配，能保证放置内容通畅合理即可，而不是只能跟着你一开始的规划设计下去。

优秀的作品集展示是用合适的布局放置合适的内容，而不是一定要放置大量的图例和文案才是好的展示形式。熟练掌握节奏的控制技巧，就会明白最后需要置入画布的设计元素其实是不多的，前期的布局规划会引导设计师做出对的设计。

最后结合我自己课程的教学内容，给出的作品集流程建议：

结尾

版式设计是比较纯粹的平面设计技能，虽然本身的技巧和知识点并不算多，但非常考验设计师的平面审美，这也是 UI 设计师最缺乏的基础之一。建议所有想要做好作品集和项目包装的同学，每天都花半小时去浏览 Behance 上优秀的APP、WEB、品牌项目案例，积累相关的技法和审美。

同时，上面提到的所有技巧，因为篇幅关系无法讲解得更细致了，需要大家自己通过实践进行摸索和总结。

后面有机会会再针对单页的布局和排版方式做出进一步的说明。

我们下篇再贱~

Powered by Froala Editor