双十一硝烟未散,双十二又接踵而至,黑五圣诞促销也即将开始,可以说,每到年底,整个电商平台的视觉都是百花齐放、异彩纷呈...…在电商设计圈也一晃十年,今天布袋就为大家揭示:在海量促销海报中,最吸引流量的版式设计背后,究竟都有什么规律?

一、版式组成

主体:视觉焦点,主导着整个设计;

文案:对主体的辅助说明或引导;

点缀元素:装饰元素,可有可无,具体根据版面需要;

背景:可分为纯色/彩色肌理/图片/图形等。

二、构图平衡

在设计中,平衡是实现统一的一条重要途径。将所有的元素组合起来整体画面处于平衡状态,就会给人一种整体印象。

因此,平衡是视觉传达设计的一个重要方面,版式平衡主要有三种

对称平衡

——静态的,稳定的,庄严,古典

非对称平衡

——灵活的和富有活力

整体平衡

——图片充满整个版面,直观而强烈

打开网易新闻 查看更多图片

1. 对称平衡

对称是同等同量的平衡,对称式设计是一种静态的,可预见的,讲究条理和平衡布局的设计。对称构图相对比较易于创建,特点是稳定,庄严,整齐,沉静和古典。

打开网易新闻 查看更多图片

2.非对称平衡

非对称在不对等的元素间创设出秩序和平衡,非对称设计由于版式不可预见,所以空间是变化的。特点是动态的,灵活的和富有活力

非对称构图比较多,常见的有以下6种形式

打开网易新闻 查看更多图片

  • 对角线构图:

文案摆放在版面的对角线方向,一方面避免了司空见惯的居中版面,一方面给中心主体留出了更多的创作空间;另外中心的图形也可以是对角线的设计,这样会让整个构图看起来比较平衡

打开网易新闻 查看更多图片

  • 发射状构图

点缀元素围绕中心的文案或者图形发射,这样的构图会让中心的视觉容易聚焦,视觉冲击感会更强烈。像电商大促活动,会经常使用发射性构图来营造大促活动的热闹火烈程度。

打开网易新闻 查看更多图片
打开网易新闻 查看更多图片

  • 中心构图

最常见的构图之一,文案和主体居中页面,利用设计技巧吸引眼光,避免平淡乏味。

打开网易新闻 查看更多图片

  • s形构图

文案或者图形放在线条转折的地方,整体呈一个 s 形。线条的起点和重点可以放一些重要的信息。这样的构图可以引导用户沿着 s 形轨迹阅读信息。

打开网易新闻 查看更多图片

  • 二分结构

文案和主体分开呈左右或者上下的构图形式,文案要采用对齐原则

打开网易新闻 查看更多图片

  • 形状构图

主体和文案组合的形式可以是圆形,三角形,矩形等形状构图。注意如果是用三角形构图,最好呈倒金字塔结构,这样更加轻易引导用户进入下一个信息层。

打开网易新闻 查看更多图片

3. 整体平衡(满版平衡)

整体平衡,是指

图片充满整个版面

,文案布局在上下,左右,中部的位置,

主要以图像为诉求

视觉传达直观而强烈

。满版型构图,给人大方,舒展的感觉。

打开网易新闻 查看更多图片

三、设计原则

对构图形式了解后,我们还要知道一些基本的设计原则,这几个原则不是独立分开的,而是可以同时考虑和结合,不是非此即彼的对立关系

打开网易新闻 查看更多图片

1.对比

缺乏对比,作品会变得平淡乏味,并且不能有效地传递信息。

不管是哪种对比

,不要畏畏缩缩,需要

大胆一些

明显一些

。不要拿12号和13的文字做大小对比,这是没有任何意义的。

打开网易新闻 查看更多图片

2. 对齐

任何元素都不能在版面上随意安放,

应当与页面上的某个内容存在某种视觉联系。在版面上找到可以对齐的元素,形成一条明确清晰的对齐线,

让版面产生秩序美。

打开网易新闻 查看更多图片

3. 亲密性

将元素进行合理的分组与归类,划分信息层级,相关的归组成为一个视觉单位。

打开网易新闻 查看更多图片

4. 重复

重复的目的是统一,并增强视觉效果,避免太多地重复一个元素。

打开网易新闻 查看更多图片

5. 留白

留白是虚实空间对比的作用。

适当的留白能让页面透气,有呼吸,给人舒适感

。所以,

尽量在视觉上减少视觉分组

;多利用负空间创作一些巧妙的负空间。

打开网易新闻 查看更多图片

6. 变化

画面

有层次感,有位置、大小或者颜色

等变化,可以打破版面呆板、平淡的格局,

打开网易新闻 查看更多图片

总 结

通过以上案例分析,我们已经清楚的知道,在进行版面设计时候,要从哪几方面去不断优化和调整,最后我们通过以下几个问题,自检一下,本次内容你究竟掌握了吗:

1.主题怎样更鲜明?2.构图平衡有哪几种?3.设计基础原则指哪6项?4.想丰富细节,可以通过哪几种元素组合?