没思路?教你3招轻松搞定电商Banner排版 - 优设-UISDC

没思路?教你3招轻松搞定电商Banner排版

2016/06/02 93555评论区

space-form-banner-typesetting-1

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

文章开始之前,针对一些板式设计新手,我们也推荐你可以补充一下基础知识,
看看脍炙人口的《版式设计原理与应用》,有PDF下载哟。

fq2016060121

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

垂直水平构图

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

ttt201606011

斜线构图

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

ttt201606012

三角构图

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

ttt201606013

对角线构图

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

ttt201606014

辐射式构图

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

ttt201606015

框架式构图

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

ttt201606016

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

fq2016060122

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

fq201606011

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

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

fq201606012

这是俩反例:

fq201606014

角度

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

fq201606016

字体

fq201606018 fq2016060110

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

颜色

fq2016060112

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

错落

fq2016060116

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

fq2016060114

fq2016060123

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

 图形辅助

fq2016060117

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

线条辅助

fq2016060118

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

图文结合

fq2016060119

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

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

文章最后,你以为优设的干货就这么结束了么?
万万木有,看完这篇后,相信你言犹未尽,所以我们也推荐你另外几篇进阶文章,一定让你受益匪浅。
《揭秘双十一!那些上亿人都在看的BANNER都是怎么设计出来的?》
《提高审美的前提!如何辨别一个BANNER的好坏?(附案例)》
《设计师版式宝典!从零开始教你掌握网格系统》

另外,欢迎关注作者的微信号:

fq2016060124

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/space-form-banner-typesetting

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 神器下载 字体下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里