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

语言: CN / TW / HK

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

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

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

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

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

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

01. 内容排版

先来看里面的文字排版:

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

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

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

线条辅助视线引导:

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

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

02. 风格统一

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

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

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

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

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

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

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

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

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

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

03. 素材组合

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

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

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

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

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

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

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

04. 氛围强烈

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

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

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

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

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

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

这些,我们统称为:细节!

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

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

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

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

① 内容排版

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

② 风格统一

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

③ 素材组合

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

④ 氛围强烈

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

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

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。