2021年作品集排版方式大盘点！

lri

本文由竹子和玥玥共同整理撰写

昨天我们讲到作品集如何使用插画的一些新趋势，我们今天开始继续讲作品集的。之前写的关于作品集和设计趋势的文章可以翻下公众号的历史消息。

经历了一个难熬的2020年，年末将至，2021年即将到来了。距离金三银四的黄金求职期已经很接近了，相信很多小伙伴已经蠢蠢欲动了。一份好的作品集，就是你求职的敲门砖。很多设计师在求职的时候也会遇到作品集中的大大小小的问题，来与我交流。

我觉得抛开作品集里面的作品内容，很多设计师并不会用一些合理的方式去展现自己的作品。那么今天我们就来谈一谈作品集中的排版要点。

  1、分类目录的排版  

作品集的开头，我们都会有一个作品的分类目录。这些目录对自己的整个作品集的内容进行了分类。作品在精不在多，每个类目一个完整的案例就完全足够了。那么这些分类放什么了？首先你可以分析一下自己的能力标签，例如业务类设计能力、系统类设计能力、创新类设计能力等等。

竹子比较倡导主线和支线能力共同发展。主线主要是贴合公司业务、项目设计能力。支线主要是展现一个设计师，在脱离项目的前提下，是否有一定的抽象设计能力，这种能力通常是对特定场景解决办法的高度聚类，形成多场景的解决办法。就拿组件库来说，它就是最典型的抽象设计能力的表现。至于设计经验及方法的展示，不同设计师有不同的方法。例如可以验证设计的效果、提升链路的转化等等，都可以是你独特的支线能力。

根据自己的能力模型，通常分为运营设计和界面设计两大类。可以根据应聘职位的要求调整作品所占的比重。目录通常分为三到四个大类，过多显得啰嗦，过少又显得太单薄。做好分类的大标题之后，为了方便展示内容，可以在大标题下面再设置小标题项目。方便面试官快速浏览你的作品目录。

 1.1.交错形版式 

交错形排版进行上下错位，具有图特的设计图案感觉，但是比较考验设计的平面和配色功底，比如下面的某同学的作品集就用了独特的数字图案设计配合展示。

 1.2.一字形版式 

一字形排版，是一个非常传统的排版方式，文字居每个模块的中央，每个模块配合一些相应的插画或者图片进行排布。

 1.3.纵向分割版式 

纵向分割排版是一字形排版的一种变体，没有使用插画或者配图，而是纯粹靠数字或者文字的变化进行搭配。文字可以竖排和横排搭配。

 1.4.上下分割版式 

我们也可以给整合页面进行上下切割为2个块面，上块面可以用来放置一些作品配图，下半截用来放置模块分类的排版。需要注意的是，上半截的配图是一种搭配使用，不要喧宾夺主，过于花哨。

 1.5.矩形排布 

矩形排版就是把整个模块切分成4个大的模块，每个模块配置相应的插画或者照片配图。

当然还可以有一些其他的创意排版方式，当然各种版式的展示是凸显自己某个方面的设计能力，那这部分的作品在后续的作品集展示中，需要占作品集较大比重。比较推荐的比例分配是6：3：1。需要阐述的几点为：设计背景、设计策略、目标拆解、设计产出、验证效果。

  2、作品展示的背景 

现在我们知道了排版的在展示作品中的重要性，不管U设计I、交互或是视觉，互联网设计师对排版的理解应该是信息的重组，罗列有价值的信息展示给面试官。而不是各种花哨无意义的装饰。

 2.1.深色背景 

深色的作品集风格，更适合沉浸式的观看。这样的暗色风格也很容易突出作品，适合搭配色彩较浅或颜色明艳的作品。在深色背景风格下，背景不需要做太多的点缀，排版简洁大方即可。

很多同学都跟我说自己的作品集看起来空空的，想往里多加点装饰。竹子觉得不需要加入太多不必要的装饰。如果实在觉着空，可以用一些画面相关的小元素穿插渲染一下氛围也是不错的办法。

 2.2.几何元素背景 

使用简洁的几何元素作为背景铺垫，用色最好不要太跳跃。圆形、波浪形等相对规则的几何形状居多，色彩可以跟背景色相近，或者和画面中的色彩呼应。

 2.3.线性描边做背景 

如果在展示运营类设计画面的时候，画面手法是线性描边插画风格，可以复制画面中的图案，只保留线性描边，转换成浅色铺垫在背后。可以达到丰富背景并且呼应内容的作用。例如竹笋玲玲的作品集中，挑选了画面中的局部元素，构建了画面的背景。想看更多，可以站酷去搜竹笋集查看。

 2.4.图案拉大做背景 

将画面里的图拉大，或改成较大的横构图，铺垫在背景上。可以降低透明度，或是加上一层暗色让它不那么显眼。是运营插画展示的常用手法。

  2.5.抽取元素做背景 

将展示画面中的元素拆解出来，或者使用相关LOGO、IP形象，放大，排布在展示画面的周围。可以起到烘托氛围的作用，并且可以清晰地展示元素细节。

 2.6.磨砂玻璃背景 

相对简洁的界面也可以搭配磨砂玻璃质感的背景处理，使用跟界面呼应的色块，或者复制图案，高斯模糊即可。磨砂玻璃具有非常好的高级感，但是背景的图案不能复杂，建议使用大色块进行磨砂处理。

   3、项目背景的排版   

在UI类的作品集里，项目背景展示这部分占总比例的10%左右即可。通常展示在项目开始的时候，需要拿出一个夺人眼球的漂亮展示，加上适当的文字说明，帮助面试官理解项目背景。

这部分占得比重最大，达到80%上下了，文字占的比例较大。主要是结合项目，说明当前案例。这部分的展示不追求技巧，能说清楚事情即可。但要注意不要死磕一个排版方式，适当的调节排版方式，整个观感有一定的变化。就好比看一篇小说，情节有铺垫、有高潮，才能使人印象深刻。根据我们所需要的说明和分析的文字，我们有以下几种常见的排版方式。

 3.1.卡片式排版 

卡片式的排版方式在界面中比较常见，我们可以移植到作品集的排版上来。图文排版时，根据文字内容的类别，我们可以分为2-4个板块为最佳。这样每块内容有足够的空间展示，排版又会显得比较紧凑。

图片排版时，可以根据画面的系列和连贯性进行排列。竹子的建议就是在排版具体的界面说明的时候减少花哨的版式，用平实的文字进行界面辅助说明。

以上作品来自站酷甜到伤

  3.2.细节放大 

在展示圈图或者界面的基础上，取出几个自己需要说明的细节，单独放大，可以配上适当的文字说明。通常主画面占较大面积，文字和放大部分共同排列。时候也会根据画面，做一些创意性的展示框。例如下面这张，使用了拼图的形态进行展示。

对于界面来说，局部的放大展示也是必不可少的。尤其是一些比重要的功能页面，需要放大局部并且加上文字说明。减少无意义的细节放大，尽量是自己的作品集保持简练精致。在界面细节展示的时候，根据展示区域数量的多少，来觉得排版方式。我们可以直接在界面中放大想要展示的细节部分：

细节展示内容较多，我们可以使用围绕主画面的形式，当展示内容只有一两个部分的时候，可以使用左右排列或上下排列：

以上作品来自站酷一人看小丸子

 3.3.过程展示 

可以罗列出色卡、展示草稿和思考过程等等设计细节，作为细节展示的一部分，体现出自己的设计思路。当然，最后的成品展示还是要占比较大的篇幅的。

以上作品来自站酷阿良良木历

 3.4.箭头指示 

在展示界面的时候，画面需要讲解的说明文字会比较多，可能会有一定的阅读障碍，所以我们需要用到箭头指示。

以上作品来自站酷UI小美

我们也可以用线穿插的形式去描述界面与界面之前的交互逻辑关系。

 3.5.思维导图 

这种方式比较特殊，一般是为了展示项目框架的时候才会使用。一般居中摆放即可。用色与整体板块的颜色统一，不需要太多无意义的花哨细节。

 3.6.平铺展示 

具体内容叙述展示完，接下来就可以展示合集了。展示形式尽量选择可以让人看清楚设计细节的平铺方式，简洁大方又清晰。

 3.7.样机展示 

样机不要用的太多，最好不要选择看不清画面的角度，否则会显得在故意掩盖画面的缺点了。尽量选择可以完全展示界面或插画的样机来使用。手机的样机尽量选择较为扁平的样机风格：

 3.8.平面样机 

如果视觉类展示，会有一些平面或者品牌的拓展，这些展示可以选择画面质感更加贴近真实的一些照片作为样机展示。增加设计的氛围感。当天有同学肯定会发愁这些漂亮的样机去哪里找？

放心这些我全部想到了。晚点在下下篇我去更新一些免费的素材样机网站介绍，大家记得关注聊设计公众号。

今天就讲到这里了，不管采用各种版式，版式只是一个作品集展示的基础，好的作品集还需要各种好的作品来充实。所以我们还是需要努力的积攒好的作品。明天就要跨年了，很激动，我们的2020年也马上就要结束了。希望这个作品集系列的文章对你做作品集有帮助，记得关注转发哦，让更多有需要的朋友看到。

—

推荐阅读

—

我们还有设计学习课程，点击下图了解更多

《视觉全能班》2021年1月班报名中

往期学生作业访问站酷

https://booui.zcool.com.cn

—

聊最新鲜的设计

近期，微信官方将公众号文章的推送规则作出了改动，

现在已经不是按照发布时间排序

如果大家想看到【聊设计】的文章准时出现，

请点击文章右上角的“...”，

将【聊设计】设为“星标”，

也要别忘了右下角的「在看」哦～

点个在看，每天收到最新资讯