从空间/变化/形式3个方面搞定电商BANNER排版

@谢思靖:什么是真正好的排版,我觉得起码要做到清晰易读、信息突出并且观感上舒服好看,在这个基础上有突出的设计感、形式感,就是正真好的排版。怎么做?3个部分决定排版的步骤和方法,咱们分步来说。

空间是文字之间、图文之间的排列关系,是排版的第一步和基础,一张图的空间关系即构图自一开始就影响到整体的走向和最终的成型,所以在设计之初,一定得经过深思虑,深入了解文字的多少、图形的类型和设计要求和感觉选择对应的构图和图文结构关系。大致包括但不限于以下几类:

垂直水平构图

排版左中右对齐方式都有,比较随意直观,可灵活操作。

斜线构图

常用于促销类、居中排布、大多数会有图形辅助以和底部斜线构图明确区分并突出文本,或者部分也有跟随式斜着排版。

三角构图

一般居中排版,文字排布大小分明,结构感强,常以图形线条辅助排版。

对角线构图

常用于服装食品等类型、一般左或右对齐,文字选择简单直观粗细分明,常有线条或小图形辅助。

辐射式构图

和斜线构图很像,促销类、居中排布、大多会有图形辅助以和底部斜线构图明确区分并突出文本。

框架式构图

框架构图包括图形被框,文本被框或者图文都被框,文本被框是图形辅助排版的一种方式,之后详解。

我们可以通过变化对齐方式、大小、粗细、角度、字体、颜色、错落方式等来说明各种排版变化方式带来的不同结果和感觉

对齐、大小、粗细对比是排版最基本的三大要素,是之后所有排版方式的基础

①起码有一边对齐,才会使版式整洁易读,层次清晰

②大小和粗细的对比做到了主次分明。banner设计的目的,其实就是最大化的呈现给用户活动的信息,要让最重要的,最有利的信息一瞬间就传递给们,通过对比即可使信息的传递层次清晰。

这是俩反例:

角度

角度不限于示例这种。对排版进行角度变化,会增加失衡和速度感。是促销类的banner常用的方式往往对应斜构图的背景,增加整体气氛。也有增加透视类的角度变化。

字体

第一个:清秀的方正书意宋,第二了:霸气的蒙纳超刚黑(只为示意请勿转载用于商用),稍微变换板式,出来了两种不同的感觉,虽然都是买买买,但是第一个明显是清新委婉的,第二种摆明了就是要放折扣大招的样子。字体对排版的重要性不言而喻。

颜色

还是上面的示意,颜色的变化一是根据整个设计选择颜色,二是类似上图对需要突出的信息进行颜色的突出,是最常用易用的方式。

错落

一般萌系、食品类和扁平化等等的banner上,都需要这类随意轻快、错落有序的排版。设计过程中,适当对字进行大小变化和旋转,并且选择一些卡通化、手写体的字体,会有不错的效果。还有另一类错落的板式也比较常见,如下图所示,宋体字、毛笔字排版非常易用。

形式简单可理解为对排版的辅助,他们不抢眼,但是加入后又能使版式不单板,善用可以使整个排版高大上,也能使逻辑结构更加清晰。

图形辅助

图形辅助一般用基础的方圆 三角等或者有特殊含义的图形(天猫、阿里旺旺剪影)为依托进行文字排版,可起到突出文本、增强对比、增加结构感设计感的作用。

线条辅助

以线条分割进行区块划分增加对比,也可用线条和图形进行串联,亦或聚焦视线,简洁有力,近期大量用于时尚简洁类的设计中。

图文结合

用图形结合文字和视觉,达到整体统一。

排版的重要性不言而喻,通过上面的3大步介绍,应该能对电商banner的排版有个初步直观的认识,相信通过学习和大量练习,每个人都能掌握其中的妙。方法远不止此,而创意应更远。写的不好,有问题或者建议请留言说明,咱们多多讨论。

欢迎作者的微信号:

文章来源:优设

(0)

相关推荐

  • 最新QQ空间注销(清理) 方法一键搞定,毫无痕迹

    面对自己成千上万的日志.说说和照片,在不提供批量删除的条件下一个一个删除是不是觉得又麻烦又累人呢?今天,疯子跟大家分享一个早年腾讯开放的注销QQ空间的方法.肯定一键搞定,毫无痕迹 操作方法 01 复制 ...

  • 3招搞定数字元素在Banner及专题页设计中的运用!

    @TTTing 貌似做电商的没有不玩数字游戏的吧?就算运营玩法再千奇百怪,他的设计也逃不出这些套路,一起来看看!- 写在前面 做电商设计的人都知道,我们的文案里时常会出现类似"满200减10 ...

  • 美图淘淘如何搞定宝贝图片的美化?

    美图淘淘如何搞定宝贝图片的美化? 第一步:一键微调图片效果 不管是自己拍摄的还是网上拷贝的宝贝图片,或多或少都有一些小瑕疵或不能满足需要的地方,因此将图片批量导入美图淘淘后,首要工作就是对图片进行简单 ...

  • 三步搞定情人节活动专题页设计!

    小编:一年一度的虐狗日--2.14情人节马上要到了,大家都已经在准备情人节相关的活动了吧?一起跟随@TTTing1去看看情人节页面设计都有哪些玩法呐? 情人节这天,作为设计师最痛苦的事情莫过于,1/让 ...

  • 软媒魔方6.06新版本:装系统/软媒硬盘装机一键搞定(图文教程)

    软媒魔方6.06新版来了!这次更新带来了不少实用性的功能。下面为大家带来软媒魔方6.06新版本:装系统/软媒硬盘装机图文教程,很简单的哦,希望对大家有所帮助! 首先,软媒时间独立版发布后,吸引了不少新 ...

  • 魔方软媒硬盘装机一键搞定图文教程

    下面为大家带来魔方软媒硬盘装机一键搞定图文教程,教程很不错,不明白的朋友可以过来学习一下! 一、 主要功能 本软件的主要功能是一键安装系统,不需要借助U盘、光盘等设备。用户只要满足下面的条件就可实现一 ...

  • 七招搞定Windows 7上网本性能

    据国外媒体报道,自2007年年末至今,上网本的销售量已经超过五千万台,其中仅有一小部分运行的是Windows 7操作系统。而随着Windows XP操作系统的日益破旧、恶意软件攻击日益增多,大多数的上 ...

  • 小电容,轻松搞定电脑各种疑难杂症

    无论瓷片电容还是铝电解电容,或钽电解电容在电脑主板,硬盘,光驱,鼠标,键盘的电容中起的作用都是滤波、抗干扰、去耦、防自激、偶合等。不要小看这些小小的电容,它起的作用可不一般,我们许多看起来非常麻烦的故 ...

  • Word2007文档中快速搞定毕业论文方法

    平时积攒的一些office技巧在写论文时可以用上了。但是由于时间已久,很多技巧和方法的来源已经忘记出处了,故未写明原作者的地址和申明转载。见谅。 ·1.论文参考文献的添加 以word2007为例,6步 ...