根据客户需求,确定Banner尺寸大小、文案数量及产品形状,找到适合的排版布局。Banner 版式分为:

左右式排版采用左文右图,或者左图右文的方式,版式清晰,文案图片分区明显。左右版式适合于凸显文案,图文占比满足四六开黄金分割比,常用于表现立意模糊的金融阅读类产品。

居中排版采用文案居中(居中对齐)、配图向四周扩散也可左右布局,或者配图居中、文案左右的方式进行。居中式排版适于凸显图片,也适合凸显文案,凸显的文案或图片放置在画面中间,常用于立意明确的电商、餐饮类产品。另外如果Banner中没有配图只有文案,通常采用居中式构图。

目前字体的主流设计风格为扁平化风格,Banner设计中字体的选择标准是文字的添加能使画面产生和谐感。

字体分为两大类:衬线字体和无衬线字体。字体不同,表达的情绪也不同:衬线字体给人古典、经典感,如宋体类的方正大标宋字体、类似宋体的英文字体Didot,常用于表现女性产品类、化妆品类、文艺清新等类目的主标题;无衬线字体给人现代、简约感。

无衬线字体根据笔画粗细组合不同,也会带给人们不同的情绪:

粗体无衬线字给人强壮、厚重、促销、廉价感,如黑体、方正兰亭粗黑等字体,常用于表现男性产品类或家电类、工业类产品等。

细体无衬线字给人柔美、品质感,如方正兰亭超细黑简体等字体,结合恰当的留白效果,常用于表现有品质感的大品牌、奢侈品、智能科技型产品或女性产品。

粗细结合的无衬线字给人刚劲、促销感,往往结合文字倾斜增强促销、热卖感。

Banner中的字体,除了使用特殊字体之外,还可以自行设计字体。首先根据主题表达确定基础字体,再收集变形灵感绘制变形字体,对文字的小部分部位做小规模的文字变化,以保证文字的高辨识度,如常见的笔画连接、替代法、断指法、错落摆放法等。

根据画面表达需求,确定好文案字体后,Banner的文字排版规律,从高度占比入手:主副文案总高度在 Banner 的占比大约在40~50%;主文案、副文案大小层级差异通常为2倍关系,如主文案为60px,则副文案为30px左右;当副文案字数较少时,副文案字号可大些,但最少差异 10px 以上。

Banner 的图片类型主要有 3 种:插画类型、模特产品类型(也称为模特类型)和产品类型(也称为配图类型)。这里以配图类型为例。

垂直水平式,水平有序排列产品图片,所有配图得到完美展现,给用户正规、安全感。

三角形:产品采用正三角构图,产生较强的立体感,各产品配图占比轻重有别,这种构图方式稳定自然,强化空间感,给用户带来极强的安全感、可靠感。

采用对角线,产品配图占比较为平衡,画面活泼、动感和稳定性极强。

渐次式排列,有很强的空间展示感,各产品配图占比从大到小,稳定、有序,透视指引到广告语,给用户稳定自然、产品丰富可靠感。

辐射式,也有很强的空间展示感,各产品配图占比从大到小,画面有序、透视指引到广告语,给用户活泼动感、产品丰富可靠感。

框架式构图稳定、有很好的聚焦效果,让用户感觉产品稳定可信。

在为 Banner 做配图时,采用多层次配图,实现多点传达信息,让用户有更多的选择余地,以及利用高价商品带动低价商品的促销目的。

在Banner中合理利用点缀能更好地烘托主题,使整个画面更有层次性。Banner点缀通常利用背景渐变、辅助形状、商品、标签提炼、加入纹理等方法来实现。

Banner设计中用邻近色做柔和的渐变背景,可以增加设计细节丰富画面效果,既符合现实生活光照原理,又起着引导用户阅读方向的作用。

Banner商品点缀能集中用户的视觉注意力,常用的辅助点缀形状有椭圆、双椭圆融合、长圆角矩形、圆形及其变异。

辅助点缀形状利用极少的元素,如形状的大小、方向、颜色的变化在版面中重复使用,营造空间感和平衡感,实现丰富的视觉效果。

Banner中利用标签提炼把较弱的副文案突显,利用标签凸显卖点。

banner设圆角_Banner设计技巧!相关推荐

  1. banner设圆角_illustrator大气、科技感的Banner设计教程

    illustrator大气.科技感的Banner设计教程 六月 24, 2019 发表于: 视觉设计. 评论 Sponsor 今天和大家分享一个实用的illustrator海报设计教程,主要是实现客户 ...

  2. banner设圆角_Xbanner圆角展示轮播图

    展示效果如下: 展示的样式两边留白圆角展示 滑动的样式展示 如果符合你想要设置的效果那继续看后续的具体代码增加: //圆角方法 @TargetApi(Build.VERSION_CODES.LOLLI ...

  3. banner设圆角_C4D和PS如何制作banner

    1.本课主要内容具体如图所示. 2.对效果图进行分析,点击[平面],新建[立方体],调整至合适位置,点击[灯光],移至效果图所示.按[Ctrl+C]复制平面,按[Ctrl+V]粘贴,选择[旋转工具], ...

  4. 21个UI设计必会的设计技巧

    想要成为一名合格的UI设计师,必须要有扎实的基础,和丰富的设计经验,本期小编为大家介绍的UI设计培训教程是21个UI设计必会的设计技巧,可帮助大家提升自己. UI设计培训技术分享:一个好的UI设计是由 ...

  5. 计算机页面的滚动栏怎么拉长,长滚动网页页面设计技巧

    长滚动网页页面设计技巧 长滚动页面和无限滚动式的网页已经彻底流行开来了,甚至可以说它已经脱离趋势,成为了一种常规的设计,下面是小编分享的长滚动网页页面设计技巧,一起来看一下吧. 长滚动式的页面有着如下 ...

  6. 原始样式增加标题_好看又实用! 10个标题字体设计技巧

    很多新手设计师刚做海报设计的时候,经常直接使用字库的字体,觉得字体设计很难,所以很少自己去设计字体,其实字体设计有很多种形式,今天我们分享10种常见适用于标题的字体设计技巧,好看又实用,足够让你设计出 ...

  7. 14 个实用的数据库设计技巧,一次性教给你!

    目录 原始单据与实体之间的关系 主键与外键 基本表的性质 范式标准 通俗地理解三个范式 要善于识别与正确处理多对多的关系 主键PK的取值方法 正确认识数据冗余 E--R图没有标准答案 视图技术在数据库 ...

  8. 十个简单好用的设计技巧[SM]

    复杂的设计技巧总是很花时间,也实在是-.复杂 (-_-||). 高级效果 为设计增色不少,但如果用得不对,只会影响用户对重点内容的关注.高级效果可能正好是一项好的设计的冲击力所在,但即便如此,也还是需 ...

  9. WPF界面设计技巧(3)—实现不规则动画按钮

    WPF界面设计技巧(3)-实现不规则动画按钮 原文:WPF界面设计技巧(3)-实现不规则动画按钮 发布了定义WPF按钮的教程后,有朋友问能否实现不规则形状的按钮,今天我们就来讲一下不规则按钮的制作. ...

  10. 14个数据库的设计技巧 (来自Blogcn中我的窝)

    1. 原始单据与实体之间的关系 可以是一对一.一对多.多对多的关系.在一般情况下,它们是一对一的关系:即一张原始单据对应且只对应一个实体.在特殊情况下,它们可能是一对多或多对一的关系,即一张原始单证对 ...

最新文章

  1. IOS自定义表格UITableViewCell
  2. 科技部颁布十大国家新一代人工智能开放创新平台,华为旷视等入选
  3. java对象的参数传递,对象类型的参数传递是什么意思
  4. 大讲台大数据特训学习笔记
  5. Windows 系统下使用 putty 客户端通过 SSH 远程连接 AWS 服务器
  6. materialrefeshlayout下拉刷新,上拉加载更多
  7. 《Accelerated C++中文版》--- 读书笔记
  8. 用ffmpeg快速剪切和合并视频
  9. java上传音频的方法_将音频文件从文档目录上传到 iCloud
  10. android报警声音
  11. linux查看iozone安装目录,IOZone的基本使用
  12. QT QComboBox使用详解
  13. 阿里云大学互联网学院欢迎你加入!
  14. 判断43是不是质数用c语言,1是素数吗(c语言判断一个数为素数)
  15. linux 6重启网卡,centos 网卡重启方法
  16. 叶酸修饰的金星形纳米颗粒,Gold star shaped nanoparticles modified with folic acid
  17. #创新应用#飞流下载:下载娱乐两不误
  18. 做视频自媒体,选择一个合适的剪辑软件很重要,这些或许适合你
  19. 云服务器几核CPU够用
  20. 排列组合(Java随笔)—全排列

热门文章

  1. 索引越界异常Exception java.lang.IndexOutOfBoundsException
  2. FAT32文件操作系统
  3. 最佳Bilibili下载工具及下载Bilibili视频方法
  4. 【回归预测-ELM预测】基于樽海鞘算法结合极限学习机实现风电场功率回归预测附matlab代码
  5. word添加自定义样式(导入normal.dotm)
  6. 2020版PS基础入门视频教程全集
  7. 数据库系统概念第六版课后习题答案-第一章
  8. nodejs爬虫实战_实战nodejs写网络爬虫
  9. visual studio 显示行号
  10. 玩转小米盒子1:选购指南及应用推荐