这套网页设计，看你能偷走多少排版技巧

9月 24, 2022 发表于: 视觉设计. 评论

Sponsor

当我们收集的灵感图越多，越难回头整理、查看，趁着这段时间，我仔细研究了每天在社群发布的“网页设计”灵感部分。

发现这些作品之所以受大家所喜爱，是因为它们都具有美观、统一、真实等特性。

而在 PPT 中想要出街，则需要再加一个关键词：逻辑。

下面，来看今天的主角，一套介绍油漆的网页设计灵感图：

以深蓝色和灰白色为主，橙色作为点缀，整体非常舒适。

那么，思考一下，我们可以从这套网页中学到什么内容呢？

01. 内容排版

先来看里面的文字排版：

虽然和中文排版有些区别，但也有很多互通之处。

无论在视觉上还是实际对齐都是一致的，仔细观察，行间距是小于段间距的。

另外，在文字的层级上，也做了大小、粗细区分。

线条辅助视线引导：

橙色虚线引导，逐渐消失变成灰色，引导阅读视线和方向。

这也是 PPT 制作中，非常容易被忽略掉的细节。

02. 风格统一

在大家的打卡作业中，经常能看见一些不合场景的素材，比如图文不符、图标样式不统一、装饰元素混用等。

而在这份灵感图中，可以看到所使用的素材都是贴合主题的：

添加了油漆素材作为页面背景，既丰富了页面又不会干扰上方的图文内容。

此外，介绍每个小点的内容时，加上了墨迹素材，也刚好和油漆滴溅的状态吻合。

配色上还利用人的“刻板印象”，大面积使用深色作为主色调，搭配浅灰色，再加以橙色点缀，使人可以快速知晓所在行业和产品。

同类的“刻板印象”还有商务蓝、科技蓝、党政红、地产黑金等，不过现在逐渐出现一些新的搭配，比如科技红。

除元素贴合主题外，里面的图片处理也值得一提：

为了不使纯色块直接放在页面上显得单调，在色块底部叠加了一层油漆图，并将原图颜色调成色块同色调，最后调整透明度并叠加。

我们在做 PPT 的时候，也可以用这样的思路，比如这一页 PPT：

不仅背景上叠加了图片，还在每个色块之上分别做了蜂窝形状进行叠加。

03. 素材组合

有时候客户提供的图片少、质量不高，设计师拿到图片后无法下手，经常会出现图文不符、素材乱飞的情况。

这时候不妨试试将图片中的主体拿出来，和其他素材组合使用：

如果是在 PPT 里，可以这样用：色块与鞋子穿插，再使用云朵装饰，最后给色块加上阴影即可。

当然，组合使用也可以克制一些，比如只截取素材的一部分：

如果甲方不同意更换素材，那就加色块将其装进去，将图片与容器组成一个新的整体：

根据这张灵感图，可以做出这样的 PPT 页面：用半透明色块作为图片容器，只呈现关键点和图片。

当然，也可以用样机做个包装，这样不仅弱化了图片，还提升了整体的层次效果：

04. 氛围强烈

风格和素材讲完了，接下来聊聊氛围感。

这套网页中有很多亮点，比如首屏的大图：

背景使用蓝灰渐变，对比纯白色的背景，整体看起来很干净舒适。

人物左侧添加了橙色光晕效果，同时标题的渐变方向也是根据光晕的照射角度来做的，而人物的阴影则是超右，整个页面的光影、渐变非常统一。

产品介绍部分，则不遗余力地突出优点，绿色环保：

对部分绿植进行虚化垫底，结合实景绿植素材，同时再加点淡淡的发光效果，数字的渐变方向也和光的照射方向一致。

这些，我们统称为：细节！

另外整套网页展示出来时，是被包装过的。

包装的长图上，加了很多与装修相关的物品，比如油漆滚、铲刀、美工刀等。

这样处理，也是为了进一步强化氛围感，使整体看起来更统一、美观，大家在 包装自己的 PPT 作品集时，也可以借鉴这个思路。

写到这里，这套网页已经被分析得差不多了，咱们最后总结一下：

① 内容排版

注意排版细节，段落与行间距关系，以及容易被忽略的视线引导线；

② 风格统一

使用的素材贴合主题，尽可能将行业配色、图片等要素融到页面中；

③ 素材组合

抠出图片主体和其他素材组合使用，或添加容器与图片组成新主体；

④ 氛围强烈

借用光影与虚化，结合主体素材增强页面氛围，同时调整文字的渐变。

以上，就是今天分享的全部内容，希望对大家有所启发~

作者 | Junmeng
来源 | 自律的音律（id: yinlvPPT )

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。