这次我们来讲讲作品排版的优化。

作品集的核心原则就是：作品优先，排版服务内容，不要让花哨版式抢设计稿的风头；阅读路径清晰，让面试官 30 秒抓住亮点。

所以作品集排版会经常出现一些问题，我们将用实际案例给大家分享一下。

二、页面排版太常规

此页排版简单并排两个页面，比较常规没有亮点。

所以我们可以放大右侧界面的视觉优点，将运营页的创意大胆地展示出来。

比如主图和图标放大展示，丰富整页的展示内容，看下图：

再来点小动效：

三、界面排版太散

我们来看看这一页的作品集排版，会发现装饰的英文太多，整体排版看着太散。既没有展示作品界面的信息，视觉上又一般。

展示的作品是比较偏功能性界面，视觉上的展示较少。所以我们将功能图标与卡片单独列出来展示一下界面功能性，作为整个排版亮点。用简单标题+文字的排版让其界面工整有序，便于阅读。

四、排版抢了信息表达

我们来看看这页关于颜色规范的排版，乍看有视觉感，但细看就是花哨排版抢了规范信息的表达。

从细节上，颜色卡片毛玻璃效果太粗糙，缺细节。颜色主次没有展示出来，颜色信息展示比较弱。

所以，我们将颜色卡片整齐排版，按颜色权重进行大小比例调整。添加重要颜色文字注释，突出信息传达。

下面是调整后的排版：

五、界面太糊

我们来讲最后一个问题，那就是排版出来的效果太糊。通常是背景颜色与卡片没有区分出来导致的。

我们来看下面的案例：

整体界面太糊的原因：背景色块分散太多，颜色太浅，与卡片上的相近。

所以我们去掉蓝色模糊，背景色改成较深一点蓝色渐变，白色卡片与背景层次拉开。

卡片排版有点乱，我们调整一下，以大到小的节奏排列。

我们来看看排版效果：

我们来看看作品的排版优化的前后对比吧：

我们来总结一下做作品集需要注意的点：

1. 视觉性的界面要放大作品视觉点；

2. 准确输出作品展示内容，排版要有焦点；

3. 花哨排版不要影响作品规范信息表达；

4. 背景与内容层次拉开，不要太糊。

来源：优设

作者：菜心