对 UI 设计师而言，Banner 或许是最 “熟悉” 的设计元素 —— 日常工作中，我们习惯将精力倾注于色彩搭配、创意构图，却常忽略其布局样式对信息传递效率的隐性影响。事实上，Banner 绝非单纯的视觉载体，它更像产品与用户对话的 “第一窗口”：无论是首页首屏的活动推广，还是内容页的分类导航，其布局设计直接决定了用户能否快速捕捉核心信息，甚至影响产品的转化效率。今天，我们就从视觉表现与布局策略两个维度，拆解 Banner 设计背后的逻辑，探索如何让 “好看” 与 “好用” 真正统一。
随着AI生图时代的来临，设计团队致力于通过AI训练自有设计风格的模型资产，以此来为业务提效。鉴于节气卡的高覆盖率、高复用率和高收益，我们选择了这一场景进行新中式风格的升级和模型训练尝试。
当下互联网进入以内容运营为核心的时代，市场竞争激烈，需要对于市场的热点进行快速反应，持续迭代。不管是大厂还是小厂的UI设计师多多少少需要支援运营需求。U1S1 做简单运营图对于体验设计方向的设计师来说，性价比确实有点低，一般难度较高的运营设计需求都由专业的视觉设计师来做，体验设计师一般接到的都是比较简单或者紧急的需求，这对于设计的能力提升来说是比较有限的，大量的时间被占用在运营设计上，持续被榨干，有些本末倒置，但人生就是这么操蛋，总得想办法解决。
就目前大部分互联产品的Banner而言。
其构成一般由标题文案、主体元素（人物、物品等）、背景（场景、底色等）元素构成。
面向设计师：模板化运营设计 + 素材资源同步盘
第一种方法是本文的核心方法，原理很简单，其实就是利用Sketch和或者Figma的组件化（为了统一语义本文统一称为组件，其子集为用例）进行设计。
我们将这些元素分别打包成组件.
把组件的用例调整后放置在预览区所有不同尺寸的画板中。
当出现需要特殊调整的时候可以解绑微调。如果希望给画面添加一些细节的话，再另外添加即可～
这么一波操作，大概1个多钟就可以输出一整套7个图，足以应付一周22套运营图的需求了（悲伤的故事）
当然要达到这种速度还需要一个通用素材库的加持。空闲时间把一些KV的图素拆出来放到Eagle共享盘，这样你和你的小伙伴们就可以高效愉快地拉图了...
面向运营同学：创客贴等第三方设计平台
在创客贴搞个团队模式，然后设计师把常用的一些模板上传上去，运营同学只要自己改改文案，换换人就可以啦
虽然有了模板化的设计工具，但如果缺少了设计规范的引导，就会宛如脱缰野马，设计出各种偏离业务需求或风格不一致的Banner出来。
设计规范需要与运营同学共同协商制定，比如标题最长长度、排版构图、图素尺寸等等。具体规范需要根据不同的业务需求进行定制化。
下面就以我们团队的制定方式作为范例说明一下。
排版构图
常规的排版构图模式有居中式构图、左右构图。
居中式构图：居中式构图是将主体放置画面的中心进行构图。这种构图方式这种构图方式的最大优点就在于主体突出、明确而且画面容易取得左右平衡的效果
左右式构图：左右构图将文字标题元素和主体物按照比例分割进行位置安排。符合用户阅读习惯：阅读视线要符合用户从左到右或从上到下的浏览习惯。
尺寸
Banner的尺寸需要根据UI界面的需求进行制定。
例如针对我司的产品，一个活动最多有7个运营位的样式，分别在首页、搜索位、文章封面、活动中心、闪屏等。
标题长度限制
由于运营同学有时候对于标题的长度没有经过精简优化，标题特别长长长长长长长长，加上Banner本身就小，在手机屏幕上基本看不清，也就没有意义了。因此需要共同制定好主标题副标题长度限制，超过就直接打回重改。
出血设置
制定出血位的原因是某些尺寸的图素可能出现在多个不同的入口，以及不同尺寸的手机屏幕可能会出现裁剪的现象。
不论是设计师也好，运营同学也好，完成设计之后最好建立一个视觉自查表进行对照，目的是尽量减少一些原则性错误，减少来回改稿的情况。
为了更完美的提升整个流程效率，不仅需要升级中部流程，前后端的流程都需要进行优化。
首先是最好在需求的前端建立需求排期表进行需求的筛选。
分门别类地将需求的详细信息进行可视化展示，对应的需求文档接入。这里不得不吹一波飞书文档，太**好用了。
针对需求的后端即设计交付环节，最好是在设计稿导出的时候使用工具进行压缩，更小的体积意味着更快的加载速度，这对于提升产品的用户体验是毋庸置疑的。这里推荐2个工具：
1.imageOptim
2.Picdiet https://www.picdiet.com/zh-cn (个人推荐JPG使用这个网站，压缩的质量最高)
最后，如果实在人力不足的情况下，就把项目外包出去吧，毕竟占用UI设计师太多时间产出如果没什么价值的话，其实roi也是很低的，设计师的人力成本也是钱！
“能用钱解决的问题，就用钱解决！”—— 鲁迅
如果运营经常提出很多无理的需求，比如量很大，没有什么依据都是拍脑袋想的，那可以考虑把项目外包出去，一旦外包出去，花的就是真金白银，让运营也知道，这是设计师呕心沥血画的，市场的价格就摆在那，整天搞些有的没的是否真的能对项目带来价值。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：UI设计师在日常工作中经常会进行Banner的设计，Banner代指任何投放于线上的各种尺寸的广告图，在设计Banner图时，需要考虑到多种因素，内容、受众、效果等等；本文作者分享了关于Banner应用和交互设计，我们一起来了解一下。
Banner是每个UI设计师家常便饭的项目，聊聊banner的那些事。
banner翻译成中文是横幅或旗帜，为了体现产品的中心意旨，利用鲜明的内容去表达最主要的情感思想或宣传中心，从而给整个产品起到宣传的效果。
在互联网时代，banner被广泛应用在pc网页、app设计等互联网平台间，作为设计师做一张banner乃家常便饭，如何才能设计一张高质量的banner呢？
创意新颖、风格贴切的banner能第一时间吸引用户眼球，有利于banner的触达，带来高效率的点击，创造更高的价值。
关键词：文艺、气质、素雅、安静、格调。
画面大量的留白；色彩以高级灰为主，饱和度和纯度低，明度高；字体多采用衬线体，标题文案突出，辅助文案偏小，整体突出高级感；画面点缀多采用精细的线条。
关键词：高冷、时尚、大气、品质。
色彩多以黑白灰；文字清晰简洁内容少；焦点主图很大，突出表现细节；画面精简，无点缀物。
关键词：传统、中国风、意境、韵律。
画面采用对称式构图，文字排版有采用竖排；色彩上采用中国传统颜色，采用物体的固有色，避免艳丽刺激的色彩；字体多采用书法字体，书法主要分为篆、隶、楷、行、草五种书体；图形活用中国风元素，剪纸、灯笼、折扇、祥云、梅花、水墨等作为辅助元素。
关键词：青春、活力、年轻、动感、时尚。
色彩饱和度和纯度高；排版多样性，视觉冲击力强；运用几何图形装饰在产品、背景、氛围装饰上。
关键词：可爱、甜美、卡哇伊、Q、呆萌。
色彩鲜亮透明，营造软萌可爱的感觉；字体采用少年字体、手写字体、卡通字体；点缀元素多使用卡通小元素。
关键词：促销、活动、节日、热闹。
画面整体氛围热闹，内容饱满，很少留白；色彩丰富，红色、黄色、橙色、紫色偏多；主标题文字偏大，字体刚硬，视觉冲击力强，点缀元素有光效、舞台、五彩的渐变、冲击性的线条或多边形等。
关键词：未来、科技。
科技类banner，文字和背景图非常具有科技感，画面具有空间感；色彩以冷色调为主，常见有蓝色、紫色、黑色；点缀元素有光效、金属、线条、光点。
关键词：场景、趣味、手绘感、扁平。
画面具有故事性和趣味性；色彩扁平的配色，上色没有高光和阴影；字体偏向年轻化，圆润、无衬线体字体；点缀元素以涂鸦的小装饰为主。
1）创意监控
产品在用户心中需要良好的正面形象，banner传播对内容需要进行严格控制，把握好政治导向关、价值取向关和格调品味关。广告内容需真实准确，不引起歧义。
2）情景约束
用户体验产品需要有愉悦感，banner需呈现积极阳光的正面情景，素材图片传达正向的情绪和氛围。
3）版权约束
避免法律纠纷，图片素材、文字等内容应该要有版权，banner中不使用来源不明的字体、图片、视频等素材。
1）确定文案
文案尽量简洁明了，用词准确、文案通顺、语言生动。用词准确是最基本要求，活动、权益、业务表述文字内容符合业务方需求，无错别字。文案通顺、表述清晰，适合产品目标群体阅读与理解。语言生动、精简、有吸引力，集中核心诉求点，亮点突出。
1）板式
排版结构：
banner由多元素组成，banner内在包含：色彩、构图、风格等，外在包括文案、产品配图、背景、点缀这几个部分组成，设计过程通过拆分一步步执行，思路清晰且效率高。
构图方式：
对齐构图
画面中相关内容遵循对齐原则，便于用户视线快速浏览，接受重要信息。常见的对齐方式左对齐、右对齐、居中对齐，建议banner中只使用一种对齐方式，多种对齐方式用户阅读视线分散，增加用户认知成本。
聚拢构图
画面内容拆分为文字区、图片区、氛围区，相关内容聚集在一个区域，其次聚焦一个视觉重点，弱化其他元素，视觉出现层级。
留白构图
根据产品页面留出适当的安全边距，保证banner在适配过程中不会出现重要信息看不全的情况。排版时，元素之间需要留出空隙，画面看起来有透气感，减少用户认知信息的负担。
降噪构图
色彩、文字的种类不宜过多，点缀图形运用不合理，会分散读者注意力，成为用户阅读的“噪音”。
重复构图
排版注意整体设计的一致性和连贯性，避免出现不同类型的视觉元素，使画面出现跳跃。
对比构图
banner中重点信息加大与周围元素间的视觉差异，通过颜色对比、字体的大小字重对比、构成的面积对比等方式，以便于用户快速获取重点信息，丰富banner的视觉层级，吸引用户。
构图样式：
对称构图
通过对画面的平均分割保证画面的平衡，对称构图给人有力、稳固的视觉感受。
居中构图
居中构图很好的突出主题，画面中规中矩，活跃感较弱；用户视觉焦点会聚集中心位置，视觉焦点需要重点刻画，周围元素弱化处理。
左右构图
左右构图分为2种，左文右图、左图右文。2种构图样式，区别在于用户的浏览过程中是先看文字还是先看图片。
当配图示意不明确时，建议使用左文右图的排版。
配图主要是根据文案内容绘制的辅助图形，用户只看图无法明确活动内容，建议采用左文右图的板式。根据“F形”阅读模式，浏览习惯往往从左向右从上往下，将文字信息放在左边有助于用户快速浏览，获取重点信息。
当配图示意明确，图比文字更加重要时，建议使用左图右文的排版。
用户根据图片即可明白活动内容，运营或业务方希望有吸引力的活动图片获取用户的注意力。
衍生构图
基于banner受限尺寸和高度，会衍生出一些构图方式，例如放射性构图、倾斜构图等。不规则的构图，设计上具有层次感，丰富的视觉呈现给人眼前一亮，更容易吸引用户眼球。
构成比例
banner大多为左右排版，图文比例4:6，接近黄金分割比例0.618，文案标题比例约2:1。画面中文案占比一定要大于配图，用户更关注是是内容本身。
2）配色
色彩体系：
暖色系
暖色系主要由红、黄、橙等构成的色调。容哟联想到阳光、火焰、热血等场景，给用户积极、活泼、温暖的感觉。暖色系色彩的饱和度越高，温暖属性越突出，用于电商活动，渲染气氛。
冷色系
冷色系主要由青、蓝等构成的色调。容易联想到海洋、冰雪等场景，给用户寒冷等感觉，适宜表现恬静、低沉、严肃、理性的内容，比如科技类产品。
同色系
同色系又称单色，这种色系的搭配在产品本身颜色比较统一的情况下，提取产品邻近色，作为画面的搭配色，让整体画面变得统一和谐。
类似色系
类似色相比同色系，它具有丰富性和可变化性，基于banner整体的主色调以后通过添加与主色相近的辅助色，是整个画面变得丰富活跃起来，同时这些配色方式也相对容易。
对比色系
对比色系，色相环上相距120度-180度之间的2种颜色（180度则为互补色），对比色之间的搭配能够给画面带来华丽、跳跃、浓郁的视觉美感，高纯度、高明度、等面积的搭配，会产生强烈的刺激感，干扰用户视觉体验。画面中往往会考虑补色之间的面积比例、纯度比例、明度比例、空间间隔的比例，平衡画面之间的视觉感。
创新配色
除了基本的色系配色系外，还可以尝试更多的配色风格。画面中有目的地运用色彩元素，丰富画面的色调。
色彩比例：
banner色彩需要考虑页面统一性；banner尺寸较小，信息色彩不宜过多，2-3种即可。画面主要由主色、辅色、点缀色组成，色彩的黄金法则60:30:10的法则，60%左右的主色、30%左右的辅助色、10%左右的点缀色。
3）字体
字体类型：
无衬线体
粗的黑体，具有官方严肃气质，自带有力量感，视觉冲击强烈，与速度线条、碎片、划痕等设计手法十分搭配。细的黑体，具有年轻、简约、细致的感觉。无衬线体易读性较强，常用于科技类banner中。
衬线体
衬线体装饰性较强，给人带来活泼、轻松的感觉。比较适用于文化、文艺、美食、女性、时尚等行业。
圆体/卡通字体
具有趣味性和活泼感，适用于儿童、宠物类、休闲食品、家居等行业。
书法体
有韵味和艺术感，视觉张力丰富，适用于中国风、艺术感等画面。硬笔书法字体：优雅、有亲切感，适合传统、文化等画面。
字体样式：
考虑字体大小、字重、颜色。文案有主文案和副文案之分，需要有对比性。字体的颜色选择需要考虑与背景色的搭配效果、banner主题间的关联，选择合适的颜色能凸显文案。
4）辅助图形
几何图形：
几何图形是banner设计中常见的辅助元素，它的多样性和简约性设计师十分着迷。几何图形可以创作无线的可能，用户对其有意无意地进行自我诠释。
圆形
圆形象征着圆满、融合、自然、和谐、无穷，在设计中具有非常强的包容性，由于其自身的可拓展性，将圆形进行拉伸、叠加、重复可获取丰富的图形。
三角形
三角形具有方向感、变化感，它的锐利给以垂直、刚强、庄严、向上的感觉，其长度有穿透感，象征崇高和无限。
方形
方形具有对称、有序、平静、专业属性，给人稳定安全统一感。
多边形
多边形的形状会给人带来稳重感，通过多边形凸显产品的尊贵感。
不规则图形
不规则的图形营造画面的氛围，突出主体元素，激发用户点击欲望。
流畅的线条：
流畅的线条给画面带来韵律感。
立体几何图：
立体几何载体让整体画面格调显得品质高。
5）动效
展现商品质感和工艺或者展示同商品不同状态时，动态banner比静态banner点击率高。呈现商品多样性和系列感需要静态广告。
1）传达
呈现出来的画面鲜明地表达活动主旨，文案内容，可用性。
2）美感
板式设计、配色、字体设计、风格、插图、点缀图案以及动效这些运用是否合理。
3）效率
整体复杂程度，后期banner修改和加工工作难度，可不可重复利用。
4）创意
画面主题是否突出，具有吸引力，刺激用户点击。
现实中多是单张banner图，而互联网产品中大多采用多张轮播banner。有限的屏幕内采用多张轮播提高空间的利用率，其次用户长时间盯单一广告会疲惫，轮播banner有利于吸引用户注意，激发用户探索欲望。
电商产品用得比较多，全圆角矩形或不规则矩形，此类banner运用在促销活动中，实效性特别强。
运营强度较弱，banner在页面权重较低的专题活动会用到白底模版化banner。排版左文右图，内容由主标题、副标题和小插图组成，例如支付宝首页中间位置banner。
需要吸引用户来参与运营活动，可以采用悬浮图标的形式，吸引用户的注意力，对页面布局不产生影响。
用于产品中同一个功能模块，多个不同入口，或者不同服务类型的商品入口。商城或者热门板块使用。包括：两个入口、三个入口、四个入口、五个入口、六个入口。
1）功能
banner在页面中所承担的责任是什么，活动运营、功能区入口、系统公告、还是第三方广告。
2）数量
banner位置所承载内容数量是多少，同时存在几个内容。
3）频率
banner采用的是静态banner还是轮播的方式。固定banner多久更换一次，轮播形式的banner，几个banner轮播，轮播的速率是多少。
4）层级
banner在页面中与其他功能区相比，banner位所属的信息层级是什么样。
1）静态/动态
静态banner。如果内容中有一个非常重量级的，其他的都是差不多的不怎么重要的，可以考虑只将重量级内容放在显眼位置的Banner上，且静态不轮播，其余内容放在别的运营位里。
动态轮播。轮播banner图注意帧数不宜过多，加上轮播指示器，提示用户banner的个数以及banner可以左右滑动。
2）尺寸
屏幕占比大的banner有更强的营销感和氛围感，常见电商平台的顶部banner。
屏幕占比小的banner会低调些，不会干扰用户阅读浏览页面，例如金融类平台。
1）图片大小
保证产品启动加载时间和操作流畅，上传广告图的大小建议在300kb以内。
2）图片格式
输出的格式：JPG、PNG、JPEG、BMP、GIF。
文章来源：人人都是产品经理 作者：界白
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每年的双11在设计师们的眼里，都不仅仅是购物狂欢节还是一场视觉盛宴。这不，今年的双11重头戏来了。
天猫联合各品牌发布了超级符合“猫头海报”，一共55家下面让我们一次看个够。
1. 泡泡玛特，很有意思的创意
2. The North Face场景感十足
3. 好奇很温馨的设计
4. 外星人，一直都想买的电脑
5. VANS，我喜欢他家的黑格子鞋
6. Levi’s，我服了
7. 麦当劳，烟雾的创意很契合产品
8. 惠氏铂臻3，一团线织出来的创意
9. 拉面说，来碗面
10. 宜家家居，仔细看，是购物袋
11. 巴黎欧莱雅，万能的C4D
12. 朗仕，细节很多
13. 华为，冷暖对比很有冲击力
14. 乐高，积木的海洋
15. Marshall，燥起来
16. Jordan，乔丹
17. 肯德基，WOW好吃！
18. 林氏木业，俯视的构图角度，空间感很强
19. 元气森林，故事性很强
20. 强生，满是爱
21. fresh，高端的护肤品牌
22. 万代，为“酷”而生
23. 始祖鸟，化石来了
24. 三生花，旗袍肯定很漂亮
25. HOLLISTER，一起冲浪
26. 施华洛世奇，每个女孩都值得拥有
27. PINKO，乱的有创意
28. MINI，我有个进MINI车友群的梦
29. 孩之宝变形金刚，汽车人变形
30. Onisuka Tiger，日本的运动产品品牌
31. 优衣库，线下实体店的货架创意
32. 三顿半
33. OLAY
34. Dyson，很亲切的表达方式
35. 迪士尼商店，可爱、好玩
36. NIKE
37. 法国娇兰，看起来很贵气
38. 荣耀
39. LINE FRIENDS
40. M.A.C
41. 红星美凯龙，空间感很强
42. NET-A-PORTER，泡泡龙的感觉
43. 稀奇，太喜感了
44. 百威，哟哟切克闹
45. 芭比
46. 李子柒，依然还是熟悉的味道
47. 爱他美3，阳光帅气
48. 花西子，雕刻工艺品
49. 伊利谷粒多，太美了
50. Apple，表情包集合
51. 滴露，传统国风的感觉
52. Moleskine
53. 大疆，很喜欢无人机，有一起拼单的吗？
54. 绘儿乐，这个创意现实中我玩过
55. 乐事，好吃
每个品牌对于猫头的创意表达都不一样，很多都是生活中随处能见到的，但在设计师的眼中，就是创意灵感来源。
下面还有视频版，大家一起看看：
以下视频来源于
看完今年的猫头海报，让我更加期待接下来各品牌双11活动的玩法和创意。接下来让我拭目以待吧。
首先看看我们的素材：
当拿到一张原始素材的时候！
怎么办？该怎么入手？怎么找方向？
来吧！
先来看看成稿：
最终设计成果还可以，那么是通过怎样的设计手法达到这样的效果呢？
下面我就来分享一下我的作图思路；
1.需求的梳理和信息收集：
理解核心需求，为设计方向做好前期准备
Slogan：传武（作品名） 副文案：幽府之力，逆转生死
我们漫画类的作品众多，内容风格繁杂，所以拿到需求之后,首先就是要对作品进行“调查”。通过对漫画作品的阅读，理解内容、故事、绘画风格来定性设计的方向。这样才能在设计过程中准确把握住作品调性，才能设计出最贴合作品风格内容的banner，才能把我们作品精髓的内容传递给用户。
比如上面这部作品，SLOGAN“传武”是我们要着重设计展示的。而副标题“幽府之力，逆转生死”也很重要，往往传达出了作品的卖点和调性。
再看看我们拿到的素材，一张单人的简单素材，看起来很单调，似乎没有可切入的地方。这个时候就体现出为什么要先对作品进行“调查”的重要性了！
2. 确定设计方向：
明确设计方向，精准展现作品调性
通过阅读，我们了解到这部作品是一部热血，古风，玄幻作品，还有大致的故事内容，再结合我们的副标题“幽府之力，逆转生死”。
脑子里就已经开始有画面了，“幽府”大概表达了一个场景，而“力量”和“逆转生死”又传达出了一种气势磅礴的场面。这就为我们设计的方向奠定了一个准确的方向。
首先就把我们的素材和文案拉进画框里，进行一个大致的排版找找感觉。第一个左右排版就太常规了，在场面和气势上有些弱。第二个添加了漫画框，想切入一些故事内容一起展示。但又有一些强调漫画框的存在了，磅礴的场景没有展示出来。但注意右边的部分，把主标题排在人物的两边似乎是一个不错的选择！我们就从这里入手。
重新尝试了一下，发现这样布局好像就是我们想要的感觉哈！那既然确定了框架，我们接下来就按照这个方向继续强化出“气势”“力量”的感觉。
我们以人物为中心，想象画面里有力量从人物背后向外“迸发”所以我们的字体可以设计得有一些趋势在里边，也是以一个圆弧为中心向外生长。以光从人物背面照射出来大逆光的视觉，营造一种“力量”迸发的感觉。
3. 颜色的选择：
跟随之前确定的设计方向，提炼选色搭配。
我的方法一般是先从素材本身出发，根据想要达成的视觉风格来延伸出想要的配色。这样得到的颜色更整体，人物素材能更好的融入背景氛围中，也方便后期调整。观察的素材，发现他的颜色都比较灰，缺乏对比，就会显得很“平”，难以营造出我们想要的感觉。所以从人物素材本身的颜色出发，提取同类色和提高饱和度。结合考虑到有利于运营推广的视觉需要“吸睛”。得出了后面一组对比更强烈的颜色。
4. 有主次地进行深入刻画：
画面中最主要的肯定是我们的SLOGAN和人物角色，是我们要重点刻画的对象。剩下的副标题、背景氛围次之。不仅是要在排版上做区分，在视觉感受上也要做出差异化。这样才能有远近虚实的感觉，增加空间感。
我们希望画面具有一定的质感，增加其冲击力。所以我们在刻画背景的时候可以选择一些漫画里比较好的场景，或扉页背景素材来做底图。再叠加上一些纹理材质，再一层一层地来给背景打光，用“叠加”“柔光”“滤色”等图层属性来慢慢提高亮度,最终达到我们想要的效果。
小技巧1：相同光源的照射，传达到不同的物体上时，它的视觉表现时不同的。并不是光源时什么颜色，照射的地方就会是什么颜色。
我们来对比一下两种颜色的实际效果，可以说是很直观了！
小技巧2：为了使素材更完美地融入到背景中，我们可以后期人为地给素材增加一圈高光/轮廓光。这样使画面更融洽的同时，也能让我们的人物变得立体起来！。
再来对比下没加轮廓光的感觉：
真的是少了些味道和细节哈哈，其实在很多时候我们都可以对我们的素材进行二次加工让其提升一定的品质，配合画面以达到更好的视觉效果。
5. SLOGAN的设计：
主文案在我们草图的基础上，结合整体画面的趋势进行细化。（增加毛笔笔触，和优化笔画）。
这里主要分了三层进行处理颜色层(文字层)：主要给一个基础颜色；
材质层：因为这两个字的占比比较大，所以可以增加一些纹理细节让画面更丰富耐看；
厚度层：让后面的光源，在我们的字上形成一圈高光，可以突出我们的文字。
增加一些光晕效果，再放上做好的SLOGAN看看效果，好像还不错。
有些同学可能会疑惑这里为什么字体要做一个厚度层，我们也上一下对比图先看下效果：
可以看少了一些些质感和重量，在轻量的风格里ok，但是在我们当前的画面里就差了些感觉，所以才做了厚度层来强调光线照射过来的视觉增强画面冲击力。
之后主要是做一些符合我们画面氛围的漂浮元素，丰富画面。有一定手绘功底的话就再好不过了！
完成，到这一步差不多达成了我们想要实现的效果，“气势”和“力量”的感觉在这么“朴实无华”的素材身上也基本表现到位了。还是比较满意的，差不多可以提审交稿了！
最后在观察观察整体的画面，审视一遍,查缺补漏。
发现我们的画面好像有些燥啊，红色和黄色饱和略微有些高。整体的感觉也不够清晰。最后再做一个调整吧。
降低一些红色和黄色饱和度，在暗部加一些紫色(主文案暗的部分和画面四周的暗部)。增加冷暖对比就好多了。
小技巧3：盖印整个图层——在滤镜里面找到其他——高反差保留，数值根据画面来调。
然后就得到这么一个图层
是不是很神奇？别慌，把这个图层的属性改成线性光看看,画面清晰了很多，也变得更有质感了！
最后看下过程演变图：
总结
1）梳理需求内容：通过阅读漫画作品，深入了解内容并收集整理信息；
2）提炼关键字延展：尝试多种可行方案，最终确定设计方向；
3）slogan的设计：一定要符合画面和作品调性，达到与画面相映成辉的效果；
4）细节把控：完成之后再回过头来审视整体画面，查漏补缺力求做到最好！
文章来源：UI中国 作者：腾讯动漫TCD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
「空间陈列法」是说先构建一个空间，然后将主体元素用合适的形式陈列出来。
这是随着手机兴起而真正流行起来的一招，因为PC时代都是宽大的横屏设计，适合展现视野开阔的大场面，像大漠、海边等等，而「空间陈列」作为小场景，在PC端就显得不大气，因此使用较少；而手机端却刚好相反，瘦长竖屏就适合表现长焦特写的小场景，像微距下的花鸟鱼虫等等，这时「空间陈列」就用的恰到好处。
如图所示，同样的产品展示图，在PC端就显得单薄，版面空缺，整体不饱满；而在手机端则用的刚刚好，确实这种长焦特写、微距放大的陈列小场景就是手机屏的最爱，所以在手机时代，空间陈列图才会呈现井喷式增长。
其实合成、三维和摄影都可以实现「空间陈列」，但本书还是以合成为主，而合成的难点就在于如何将产品和空间进行自然融合，不能有违和感。
若想合的天衣无缝，第一步就是要做到「透视准确」，而透视作为构图中的重要知识点，可以说是无处不在，在前面的章节里也多次提及。我们只有掌握透视的变化规律，才能准确表现出元素的空间关系，如果透视不对，那空间将会失真，下面就来详细讲讲这个理性知识点——透视。
日常生活中，当我们看周围事物时，会有远近、高低、长短、宽窄等不同，这是由于距离、方位等差异在视觉中呈现的不同反映，这种现象就是透视。透视学的出现可以帮我们非常科学的表现各种空间感和立体感，它广泛用于绘画、建筑、环艺、设计等诸多领域，而常见的透视共3类：空气透视、散点透视和焦点透视，这3类的侧重点各有不同。
空气透视又称「色彩透视」，由于空气介质的存在（雨、雪、雾、烟等），使人们看到近处景物比远处的轮廓更清晰、色彩更饱满的视觉现象，例如下方海报中的「烟雨蒙蒙」，这种近实远虚感就是典型的空气透视，随着镜头拉远，山川也变得越来越模糊。
散点透视则是中国画特有的一种透视类型，例如下方的《清明上河图》就是这类透视的代表作，在这五米长的画卷中，很难找出画家的具体观察位置，好似在移动中作画，每到一处画一部分，最后拼接起来，这种视点不断移动的画法就是散点透视，散点透视适合表现景色的波澜壮阔，重在写意，体现一种气势和意境。
而焦点透视才是本文重点，它是透视学中的核心理论，也是西方绘画所遵循的透视原则，最早研究透视就是从这里开始，如果散点透视是「写意」，那焦点透视则「写实」，一切都以客观还原为准。
例如名画《最后的晚餐》，所有视线都汇聚一点（称为灭点），营造出一种立体空间感，这些就像自己身处画面中央所看到的逼真景象。
而我们在设计中常说的透视也都指「焦点透视」，这是我们需要掌握的重中之重。记得高中学习素描时，老师就说画静物要「近大远小」，其实就是对焦点透视最为形象的描述，例如草地上的奶牛，离我们越近就越大，越远则越小，正是这种近大远小的透视变化才使场景有了空间和层次。
在介绍焦点透视前，我们先说说透视中一个很重要的影响因素——观察视角。视角即指人眼（称为视点）在观察事物时视线之间所形成的角度。
如下图所示，其实就是人眼观看角度的变化，常见有3种：当我们平视前方时就是「平视视角」；仰头看时则是「仰视视角」；低头看时便是「俯视视角」。
其中平视时人眼和物体形成的假想连线称为「水平视线」，这是判断视角高低的参考线。
当我们将产品放入空间时，就要根据陈列形式选择合适视角，从下方的示意图中能看到，三种视角给人的感受都不相同：
而上图的仰视和俯视都属于小视角，即产品视线和水平视线的夹角较小，这是设计中的常见视角，大概就是把头微微抬起或低下时看到的场景，这时画面最自然也最舒服。反之若视角过大，即头抬的很高或压的很低时，这时产品的形变就很夸张，显得刻意、不舒服。
说完3种视角，现在正式讲解焦点透视，一般根据物体灭点的数量不同，焦点透视又分3种：平行透视（一点透视）、成角透视（两点透视）和斜角透视（三点透视），它们都有各自的透视效果和适用范围，但若铺开讲会很复杂，因此下面就结合「空间陈列」进行介绍。
用立方体简单说明，就是有一面与画面平行，这时物体的厚度边线若向内延伸，最后都会汇聚到1个点上，因此又称「一点透视」。这是最简单也最易掌握的一种透视形式，其中汇聚点称为「灭点」，而灭点所在的那条线则是「视平线」，即与人眼等高的一条水平线。
再来看看平行透视在生活中的场景呈现，如图所示，将各种景物进行前后连线并延伸，最后都是汇到一点才消失。平行透视适合表现场景纵深，给人一种正式感和平和感。
电商中的产品展示也一样，例如下方示意图中，不管哪种视角，产品和立方体都是正对观众，让人觉得摆放角度正正好。
总体来说平行透视只有1个灭点，变化并不多，视觉表现单一，没有太多的空间变化，基本就是从正面来表现整个场景，因此上手简单，只要确保前后连线都汇聚一点即可，这样画面各元素也会显得整齐。但有时这种正视会让画面缺少层次感，显得很平，此时可尝试俯视视角或者强化背景的空间纵深。
下面展示平行透视在3种视角下的应用案例，注意观察不同视角下的产品呈现和透视变化，虽然微妙，但每种视角确实给人不一样的视觉感受。
平行平视
当画面为平行透视和平视视角时，这时的观察位置很正。如下图所示，空间和产品都显得有些平整，虽然场景的立体感较弱，但视觉舒服协调，表现起来也相对简单。注意平视的「视平线」基本位于主体元素的中心处，即是说人眼此时正对前方物体的中心，这样才会有平视效果。
平行仰视
当画面为仰视时，一般视角都不会太大，微微仰视即可，这样视觉才舒服。如下图所示，其实和平视比起来，小角度仰视的透视变化并不明显，没有夸张形变，但依然能体现空间和产品的高大。此时「视平线」位于主体中心靠下的位置，这时人眼明显是从下往上看。
平行俯视
如果觉得画面的层次感和立体感不够，那就尝试下俯视视角，如下图所示，由于俯视时我们能同时看到物体的顶面和正面，这样就能表现物体的厚度，立体感也明显增强。而画面的「视平线」则位于主体中心靠上的位置，这时人眼就是从上往下看，但同样属于小角度俯视。
平行透视的俯视还有一种特殊情形——正俯视，即视角为90°的俯视，这时我们是从物体的正上方低头往下看，如下图所示，当产品平放桌面时，正俯视能清晰看到产品的全貌。
在空间陈列中这是一种常见视角，上手简单，展现清晰。例如下方案例中，俯视下的产品摆放非常灵活，根据构图需求可以工整 ① 也可以随意 ② ，并且产品多以正面展现为主，整体直观、舒服。
以上都是产品的陈列案例，其实正俯视有时也会用于场景呈现中，如下图所示，视点位于场景的正上方，有点类似无人机的俯瞰拍摄，这种看似「刁钻」的视角能给画面带来独特的戏剧效果，令人印象深刻。
空间平行透视
除了3种视角，这里还要介绍一种平行透视的常见形式——空间平行透视，这种形式即画面的正前方有个类似方盒的纵深空间，而人物或产品就放置在空间里。
如图所示，该形式也有视角的3种变化，但为了确保视觉的自然舒服，仰视和俯视也都是小角度的上下摆动，所以产品的透视变化并不明显，场景呈现也没有很夸张。
为何要将该形式单独列出？因为它非常适合手机端的竖屏构图。
手机不像PC，无法通过宽屏来表现视野开阔的大场面，手机屏更适合长焦特写的小场景，但这样有时就会显得左右拥挤不透气，这时「空间平行透视」就刚好取长补短，通过「深度」刻画将狭窄空间的纵深感体现出来，最终使观者视线在前后维度上有了延伸和舒展。
该形式正是利用平行透视的纵深性，才缓解了手机屏的拥挤感。下面分视角列举案例，要注意不管平视、仰视还是俯视，空间里的所有元素最后都要汇聚一点，这样透视才合理，纵深效果也最好。
3种视角中，空间平视最常见，因为这种方方正正的空间展示最适合手机的竖屏构图，看着最舒服，上手也简单，易于搭建。在平视下，由于没有视角的高低变化，空间基本位于人眼的正前方，无任何偏移，摆放角度非常正，构图给人一种稳定感，元素也没有夸张形变，组合方便，真实自然。
对于「空间平行透视」，「深度」刻画很关键，我们要根据版面构图选择合适的深浅。例如下方案例中：① ② 的深度浅，空间相对封闭，适合展现小空间，给人温馨感和趣味性；而 ③ 的深度深，空间开阔，适合展现大空间，这样能让视线更舒展，画面更透气。
在仰视下，我们是抬头向上看，这时空间显得高大，给人强烈的气势感。如下图所示，视平线贴近地面，像是我们蹲着向上看，这种仰望视角，建筑和人物都很高大，再加上强烈的纵深感，虽然空间左右依然狭窄，但上下和前后维度却变的非常开阔，画面通透。
空间仰视能渲染氛围，提升场景的戏剧效果，突出视觉冲击力，但要注意仰视视角不能太大，否则夸张的仰视效果反而给人一种压抑感。
在俯视下，视平线处于空间中心的上方，类似我们站在高处往下看，如下图所示，这时空间显得立体，远近的各类元素也能得到清晰展现，层次分明。
俯视适合展现空间的全局观，也让各物体有着丰富的体积感。除非有特殊的构图需求，不然和仰视一样，俯视视角不能过大，否则俯视就变成俯瞰，会产生遥远的距离感，空间也压缩的厉害，进而导致形变和失真。
还是拿立方体举例，就是物体与画面形成一定夹角，这时物体的所有边线分别向各自方向进行延伸，最后会在视平线上形成一左一右2个灭点，因此又称「两点透视」。这类透视最接近我们日常的观察角度，即是说大部分时候，我们看到的物体都属于成角透视。
虽然成角透视只比平行透视多了1个灭点，但2个灭点的位置却很灵活，这样空间的透视变化也更加丰富。
例如下方是我们经常看到的景象，虽然都是典型的成角透视，但 ① 是2个灭点都在画面外，这时建筑给人的感觉结构平稳，立体感强，侧重写实；而 ② 则是1个灭点在画面内，另1个在画面外，这时空间右侧的透视形变较大，产生纵深感，整个场景更有张力和冲击。
其实还有第3种情形是2个灭点都在画面内，但由于空间会产生夸张形变和失真，因此总体少见，不再举例说明。
再看看成角透视下的产品展示效果，如下图所示，不同于单面展示为主的平行透视，成角透视则以展示物体的两面为主，这样立体感更强，构图也更稳定。注意在成角透视中，画面所有的竖向边线都是平行，不会产生灭点。
相比平行透视，成角透视在表现上更复杂一些，一般都以2灭点在画面外的情形为主，这时透视最舒服。注意要想画面只产生2个灭点，那当中的所有元素都需排列整齐，这也是成角透视的常用做法，此时画面会显得整齐统一。下面列举3种视角下的电商案例，其中以仰视和俯视最为常见。
平视下的成角透视相对少见，因为使用成角透视就是为了凸显物体的立体感，但平视由于视角很正，恰恰就会显得立体感较弱，这时2种效果会有矛盾，影响场景的协调性。例如下方的2个案例中，产品看着就有些平整，和方形盒子以及立方体稍显冲突，但整体视觉真实平和，没有形变。
仰视下的成角透视就显得刚刚好，如下图所示，所有元素均用2个立面展示，加上透视形变，这时空间的立体感强，产品和立方体也都有明显的体积感，视觉平稳、饱满，而且还能体现产品形象的高大，凸显价值感。
注意2个案例中，视平线上都只有2个灭点，这是因为产品和立方体的排列都很整齐，反之若无序排列，就会产生多个灭点，这样画面会显凌乱，视觉不舒服，所以在表现成角透视时，尽量确保所有元素都能整齐排列。
在成角透视中，俯视视角最常见。因为该视角下的物体可以展现3个面，能进一步强化元素的立体感和方位感，如图所示，物体的空间关系明显，层次分明，构图也平稳。
一般成角俯视适合小场景陈列（若是大场景则垂直方向会发生严重形变，这就是后面要讲的「斜角透视」），刚好这是手机屏的擅长，小空间配上小角度俯视会给人一种亲切感，类似长焦镜头的特写画面，很好的拉近了观者的心理距离，因此属于手机端的常用构图。
空间成角透视
成角透视的优势在于画面立体、稳定和写实，这些优势刚好适合空间的立体呈现，如下图所示，成角透视即可用于室内塑造 ① 也可用于外形搭建 ② ，类似我们站在空间侧面看整体，此时空间立体、饱满，结构有张力。
但由于成角透视都是在画面两端形成灭点，所以该透视下的空间更适合横构图，但手机屏却是竖构图，对于横向拥挤的竖长屏，成角透视就会有些施展不开，左右狭窄，无法像横版那样开阔的展现空间，也没有平行透视那样看着规整，因此使用较少。
物体与画面存在一定夹角，并且在2点透视的基础上，再加入了高度变化，这样垂直方向的连线会向上或者向下汇聚，最终画面形成3个灭点，又称「三点透视」。相比成角透视，斜角透视其实就是让本没有交集的竖线有了交集，这样垂直方向就有了强烈的汇聚感。
斜角透视的形变夸张，常用于大型物体的仰视或高处俯瞰，类似广角拍摄。
如下图所示，该透视能表现出建筑或空间的宏大感，并且越宏大透视就越强烈。这时画面的夸张构图会显得观者渺小，给人一种压迫感，也让场景有着极强冲击力，同时带来了更加刺激的视觉感受。
其实只要观者在场景中显得很小，这时看到的画面就会产生斜角透视，例如当我们仰望高楼时，相对高楼而言，渺小的我们就会看到斜角透视。
但如果产品展示采用斜角透视时，就会有一种强烈的不真实感，因为相对产品来说，我们并不渺小，所以日常是不会看到这样的场景，这种场景更像是「昆虫视角」，如图所示，斜角透视下，虽然画面不真实，但会有种特别的戏剧效果。
另外斜角透视没有平视视角，因为平视物体的竖向边线依然平行，不会在垂直方向产生第3个灭点，因此仍属于成角透视。总之只有在大角度仰视或俯视大型物体时，才会看到斜角透视。
这种形变强烈的夸张透视虽然生活中相对少见，但电商中用的还真不少。还记得我们在第2章讲创意方法时提过的「独特视角」吗？其中一个方向就是使用斜角透视。
这种透视可以体现物体的巨大（仰视）或者场景的宏大（俯视），正是这样一种不真实也不自然的视觉感受，反倒给人一种强烈的气势和冲击，画面极具张力的构图往往能脱颖而出，并在第一时间抓人眼球，吸引注意，所以成角透视特别适合大促主题的场景搭建和氛围营造，下面分视角举例。
斜角仰视
视能让物体显得高大，而斜角仰视则让物体显得「巨大」。如图所示，2个案例中的产品都十分「巨大」，通过这样一种「刁钻」视角和夸张手法渲染出了产品气势，使产品显得分量十足，同时也提升了视觉冲击力，整个场景都变的大气。其中 ① 由于版面有限，有个灭点没有标示出来。
斜角俯视
当我们站在一个很高的地方俯瞰周围，或者用无人机在高空航拍，这时看到的景象就是斜角俯视。如图所示，尽管竖构图并不适合展现辽阔的大场面，但在斜角俯视的帮助下，2个案例依然体现了场景的宏大，视觉冲击强，这种居高临下感使人视野开阔。
平行斜角透视
斜角透视中还有一种特殊情形——平行斜角透视，就是当空间或产品的一面与画面平行时，此时不管透视多强烈，画面也只有2个灭点。
如图所示，当立方体的一面正对视点时，侧面便从2个主立面减为了1个，这时除了垂直方向的1个灭点外，原本视平线上的2个也就成了1个，虽然只剩2灭点，但本质仍属于透视强烈的斜角透视。
既然是与画面平行，那和平行透视有何区别？
下面看张空间对比图，能看到2者的形变差异还是相当大：左图为平行透视，像是我们在看一个小方盒，亲切、自然、真实；而右图则是平行斜角透视，更像是我们在仰望一个巨大空间的入口，充满戏剧性，并有压迫感。
其实对于手机端，「平行斜角透视」才是斜角透视中的常用形式，因为它的摆放角度很正，这种正面观察很适合手机端的竖屏构图，而且前后的纵深刻画也能缓解版面的左右拥挤，另外画面纵向的汇聚感还能迅速吸引注意，给人一种巨大冲击力和强烈氛围感，其中仰视比俯视更加常见。
平行斜角仰视
近几年这类透视越来越多见，因为它既适合竖构图，也能提升画面的形式感和表现力，非常利于促销主题的氛围打造。
如图所示，整个画面就像是我们站在宏大场景的正中央仰望时看到的景象，各元素摆放很正，虽有压迫感，但空间和产品都显得非常高大，张力十足，能让用户牢牢聚焦，同时也产生了强烈冲击力，更易在用户脑海中形成记忆。
平行斜角俯视
在这类透视下我们会感觉自己拥有高高在上的「上帝视角」，元素摆放同样很正，视野辽阔，场景宏大。但过大的俯视视角会对场景进行一定压缩，再加上俯瞰产生的遥远距离感，这样就显得元素有些「小气」，无法体现仰视下的高大，因此画面的刺激感没那么强烈，总体相对少见。
以上便是焦点透视的3种类型，我们再来回顾下各自的使用情形，如下图所示，这是一张3种透视的转换示意图，都是仰视视角，旁边小人则是观察者的大小示意：
希望通过这张示意图能帮大家更好理解什么时候该用哪种透视，总之小场景搭建一般以「平行透视」和「成角透视」为主，而恢弘的大场景则以「斜角透视」为主。
当然现实里的透视远不会这么单一，根据物体不同的摆放位置以及不同的观测距离，很多时候同一画面也会存在多种透视，例如平行透视和成角透视就经常组合出现。
电商设计也一样，例如下方案例中，整个空间是平行透视，而里面的盒子则是成角透视，这时视平线上会有3个灭点，其实若产品的摆放再凌乱些，还会出现更多灭点，但这种无序组合会让空间塑造变的复杂，看着也不规整，因此并不推荐。
但要注意不管画面的透视多复杂，当中的视平线却只能有1条，并且无论水平方向有多少个灭点，最后也都会落在视平线上。
除了以上3种透视外，其实还有4点透视（超广角透视）、5点透视（鱼眼透视）等等，但都过于复杂，用的也很少，这里就不做展开。对于电商里的「空间陈列」，3种透视已够用，它是我们塑造空间的基础，如果一开始的透视错了，即便配色、光影做的再出彩那也无用。
总有人说透视难掌握，其实只要我们在生活中多观察、多留意身边物体的透视变化和规律，及时总结，那这种理性还原就不难做到。当然设计终归还是理性与感性的双重表达，所以透视虽要遵循，但切忌生搬硬套，视觉协调即可。
讲完了焦点透视，我们知道了空间塑造的基本原则，下面就来说说都有哪些陈列场景。
相对PC来说，手机端受屏幕所限，陈列场景其实没那么复杂，核心是要先构建一个空间，然后让产品以合适的视角及透视在空间里呈现出来，而这个空间场景则要和主题氛围、产品气质都高度匹配。
一般来说，手机端常用的陈列场景有4类：盒子陈列、台面陈列、自然陈列以及舞台陈列，选择哪类则要看哪个场景对产品的烘托效果最好。
在介绍每个场景前，我先说说关于产品组合的2原则，因为很多时候在空间摆放的产品数量较多，这时它们的组合形式就变的尤其重要，稍不注意就会显得画面杂乱无章，不够协调，而且凌乱的摆放也会降低产品的品质感，缺少吸引力。关于组合原则，核心有2点：大小合理以及三角构图。
大小合理
如果将多个产品摆一起，则要确保它们之间的相对大小符合现实中的真实差异，现实中尺寸大的产品就要相对大些，而尺寸小的产品就要相对小一点，这样才会真实并经得起推敲。
而有些设计师在组合产品时，也不管大小的真实差异，放进版面后就很随意的放大或缩小，最后出来的组合要不就大小一样，要不就比例失真，这些都会给用户一种强烈的不协调感和不真实感。
下面再看一组对比图，明显大小一样的左图会有不适感，也缺少层次；而大小合理的右图则更有美感也更舒服。
其实大小合理的最终目的是希望整体结构错落有致，就像右图一样，这种有高有低的组合才能体现韵律感和结构美。所以如果可以选择，那我们就选择一些尺寸差异较大的产品，尽量避免出现大小差不多的情况。
当然如果必须陈列大小一样的产品，那也可以通过透视或者辅助元素来改善，例如空间里的近大远小、立方体加高都能改变高度一样的情形。
三角构图
当我们选好不同大小的产品后，就要注意它们的组合形式，千万不能乱堆一气，不同的摆放会形成不同结构，而每种结构又会给人不同感受。我们在「图形分割」中讲过「正三角」具有很强的稳定性，因此当产品采用正三角构图时，会让人觉得版面平稳、视觉舒服。
如图所示，所谓三角构图，其实就是将尺寸大的产品放中间，而尺寸小的产品放两边，这样不但构图稳定，而且画面也有节奏和变化。可以说「三角构图」就是空间陈列里最常用的构图方式，而本节展示的所有案例中，大部分也都是三角构图。
明确了产品的组合原则，知道了如何陈列才舒服，下面就正式讲讲空间陈列的4类场景。
盒子陈列
「盒子陈列」就是在盒子里面放产品，而盒子多以礼盒为主，使用场景和主题相对单一，基本用于送礼之意的专题页。创意虽然普通，但却不易出错，是种相对安全的表现方式。当然若能在盒里加些小心思，画面也会很出彩，像我之前看过一个新年Banner，就是礼盒里装着一个大家庭在吃年夜饭的温馨场景，这样的新组合便让人眼前一亮。
另外若能提升礼盒刻画的精致度，那画面也会有不错的设计感。而盒子外形也不只有方形，常用的还有圆形和异形。观察视角则以小角度俯视居多，因为这个视角最接近我们日常看礼盒的真实情形，盒内产品在俯视下能看的一清二楚，展现也立体。
盒子陈列的难点在于当盒内要摆放很多产品时，如何能让产品真实、自然的呈现，这需要我们既注意摆放的合理性，也能准确表现透视，还要刻画出产品的明暗变化，总之只有把握好产品的空间感、立体感以及光影感，画面才会舒服协调。
方形盒是最常用的盒子类型，毕竟也是生活中最常用的礼盒外形，结构感强而且易表现。如下图所示，礼盒都是成角透视，且左右灭点都在画面之外，这样结构最稳定，立体感也强。注意盒里的产品呈现，特别是俯视视角下，产品越多越要注意它们是否协调统一，透视、光影等细节一个都不能少，把控不到位就会显得凌乱，画面别扭。
圆形盒比较少见，因为和立方体比起来，圆柱体的透视没那么强烈，结构感偏弱，但圆润的外形能使画面变的柔和，给人一种亲和力和温馨感，如图所示，由于圆形盒没有明显块面，所以不管透视还是光影，刻画起来都相对简单。
异形盒是指外形为不规则形状的盒子，总体也很少见，但易出彩。形状用的好便能打破「盒子陈列」的常规感，使画面变的新颖有创意。
例如下方案例中，不管是心形、猫头轮廓还是圣诞树，都能成为画面焦点并引人注意。另外盒子呈现均用了「正俯视」视角，其实除了小角度俯视外，这种视角也很常见，因为该视角下的产品陈列清晰完整，盒子外形也能直观显示，的展现了其外形的特别之处。
台面陈列
在空间陈列的4类场景中，「台面陈列」用的最多，适用范围也最广，可以说电商中的大部分主题和产品都能使用，算是一种真正白搭的表现方式。
「台面陈列」就是在空间里搭建一个「台面」，然后在上面放置相关产品。由于该手法还是以放大特写的小场景为主，元素形变不能太大，因此画面常用平行透视和成角透视，视角则很灵活，跟着构图走，3种（平视、俯视、仰视）都有。「台面陈列」上手简单，场景多变，其中的关键元素——台面需要根据主题、场景进行灵活变化，常见有2类：桌面和几何体。
桌面很好理解，就是桌子顶部的陈列面，所有产品都放置其上。由于桌子是家里常见家具之一，因此桌面陈列往往能传递一种「家」的温暖和温馨。
可能有人觉得「桌面」形式有些单一，其实远没那么简单，我们不要固化思维，要能灵活变化桌子的样式和装饰，例如方桌还是圆桌？木桌还是大理石桌？光面还是铺桌布？这些都是可变量，再加上视角和周围环境的变化，总之形式可以很丰富。
如图所示，桌面陈列尤其适合各类美食的组合呈现，这时整个场景贴近生活，颇有带入感。
就是将各种几何形体作为陈列产品的台面，几何体相对抽象，表现场景更多元，因此比具象「桌面」更加常用。
如图所示，几何体一般都是组合出现，特别适合多产品陈列，简约大方，能烘托出产品的品质感。同时通过高高低低的大小排列也能表现出画面的结构美以及层次感，总之是一种 「上手简单、易出效果」的表现方式。
常用几何体有「立方体」和「圆柱体」，它们适合陈列，高度调节方便，使用灵活。
如下图所示，整体表现并不复杂，就是将各种产品放在几何体上。但作为画面的核心元素，这时几何体的形态、排列、视角和透视就变的非常重要，我们要根据创意需求和产品气质选择最合适的展现方式，而这些展现本身就有不错的形式感。
几何体陈列既能营造空间关系和简约气质，也能让用户聚焦产品本身，因为它的外形简单，不抢产品，不像一些复杂元素或场景，虽然视觉丰富但最后却让产品淹没其中，这样就本末倒置。
自然陈列
「自然陈列」需要先创建一个合适的自然环境，然后再将产品以合适方式融入其中。相对其他场景，自然环境显然复杂一些，呈现手法常以「合成」和「插画」为主。因为产品都是实物拍摄，为了风格统一，自然环境会偏向写实风格，这样2者结合才协调。
从下方案例能看到，「自然陈列」常用于季节感受或者产地溯源等主题，画面通过「自然场景」营造出天然健康的绿色氛围。而场景中的元素繁多，呈现复杂，这就需要我们具备优秀的整合能力。
对于「自然」塑造，视角以平视和小角度俯视居多，但画面由于没有太多的几何型物体，所以透视没那么严谨，核心是注意近、中、远景的层次区分，还有光影的合理添加。如果这些把控不到位，就很可能出现场景杂乱、缺少层次、没有带入感的粗糙画面，最终沦为各种素材的乱堆一气。
以上列举的都是以花草树木为主的自然环境，确实绿色场景在「自然陈列」中用的也是最多，但除了绿色场景外，有时也会用到其他环境。如下图所示，像海底 ① 、沙滩 ② 、海面 ③ 、冰山 ④ 也是适合陈列的自然场景，特别是夏季主题会经常用到。
舞台陈列
最后一类「舞台陈列」常用于大促主题的气氛营造，这类场景不挑类目，任何产品放在「舞台」上，灯光一打，色彩再斑斓些，都能营造出热闹的促销氛围。
如图所示，舞台外形以圆形居多，因为圆形的透视感较弱，构图灵活，而且也符合大家对舞台的第一印象。舞台视角则很灵活，3种均很常见，核心是和产品视角保持一致。
关于「舞台」塑造，还有2处需要注意的地方：
舞台外形除了最常用的「圆形」外，还有半圆形、方形和六边形等等；舞台造型也可以很丰富，并不局限于常规的表演舞台，各种造型都可尝试，例如上方左四图就是现代感十足的三维舞台，总之我们要根据创意和风格塑造相匹配的陈列舞台。
另外就是灯光运用，可以说这是「舞台陈列」和其他场景的最大区别，但灯光也不是越多越好，太多反而显得眼花缭乱，其实能渲染出绚烂气氛即可。而有光就有影，在灯光照射下，产品一定要有准确的光影呼应，这样才不会显得突兀。例如上方案例中，仔细观察灯光下的产品呈现，能看到产品表面都产生了被灯光照射后的色彩、明暗等变化，这些细节刻画才让画面更真实，融合更自然。
本次案例会用胶原蛋白口服液作主体元素，然后用这4类场景（盒子、台面、自然、舞台）来设计4张不同视角、不同风格的Banner，让大家看看在不同场景下，如何将产品融入其中。先展示案例会用到的3种产品视角， 下方案例会根据不同的场景视角选择对应素材。
「空间陈列法」的内容量挺大，主要分成了「焦点透视」和「陈列场景」2大部分来介绍，其中焦点透视是立体「空间」的塑造基础；而陈列场景则是产品「陈列」的具体环境。
常用场景有4类：盒子陈列、台面陈列、自然陈列和舞台陈列，每种陈列都有各自适用的主题和氛围：「盒子」常用于温馨的送礼主题；「台面」则能根据不同主题灵活应变，属于百搭场景；而「自然」则适合季节或者溯源主题，体现天然清新感；最后的「舞台」则用于氛围浓烈的大促主题。不管哪种场景，都要确保产品和空间的视角、透视相一致，这样场景才会真实协调。另外多产品陈列时，还要注意它们之间的大小比例以及摆放结构，其中三角结构最常用。总之在手机时代，「空间陈列」是一种真正适合小屏竖构图的表现方式。
文章来源：优设 作者：贤辈
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
任何一名设计师应该都会接触到运营活动页，产品落地页此类需求。而这些落地页设计需求的业务目标衡量标准都相当明确——即转化率。再进一步，与我们的设计输出直接相关的就是首页转化率/点击率。这些数据通过埋点能很轻易地获得，一般情况下，产品经理会提前在需求文档中标明需要埋点的地方（埋点简单说就是测量某个位置或者交互节点的具体数据，例如发生了多少次点击），获得数据用于验证产品最终是否符合预期，是否达到了理想的转化效果。
叮~ 讲到这我们应该明确了一件事，整个落地的设计其实最终都是为那个关键数据服务，无论是点击率还是转化率，达到预期甚至超出预期，那你的设计就完美地完成了任务，这也是验证设计有效性的主要方法，将设计与数据关联，用可量化的数据指标来验证偏感性的视觉工作。
就这样，设计与产品/运营的世纪大战开始了。因为我们都有了一个共同的目标，因此在产品的最终收益、期望效果方面互相都很明确。但在实现手段上，我们很轻易地产生了分歧。主要分歧点就是「按钮在左还是按钮在右」这个问题上。我们需要理解，这不是一个简单的交互问题，因为它其中掺杂了商业内容。如果这是一个交互问题，那我们很容易判断，例如弹窗的主次按钮应该主右副左，这既符合平台规范，也符合用户认知和操作习惯。
然而作为一个强商业属性的落地页，按钮在左或者按钮在右都有其合理性。我选择左，而运营同学代表他们团队要求右。 于是我败下阵来，当然，虽然表面上设计师输了，但我们怎么能服输，于是我想尽办法来验证左侧放置按钮才是更有利于转化的形式。下面我们来看看不同的倾向对应的设计原理。
产生左与右的争执其实主要源于设计与需求方的两个判断方向。首先说一下我的判断逻辑，按照已知经过验证的理论，即 F 阅读顺序（尼尔森的用户阅读视线模型），用户浏览落地页的顺序应当是从左往右自上而下，因此左上角的信息最早触达用户。在当前主流的首图式落地页样式下，首图 banner 中的内容应当置于左侧，以使用户更快地获知产品的关键信息。
在落地页首图的体验文案本身就是一个设计的覆盖范围，因为它直接关系到首页的视觉传达效率，即用户需要花费多长时间、多少精力才能理解你的产品。我们往往在首页体验文案中采用主标题加副标题的形式，着重解释这个产品是个什么东西、用户能从这获得什么，往往通过主副文案搭配的形式，来完成整个大意的阐述。
基于此，核心内容置于左侧，用户在快速扫视时能够第一时间获知产品信息，了解产品利益点，这与我们精心准备整个网站，以及精心准备诱导力文案的方法相契合。这是我做出内容置于左侧的设计决策的主要思路。可以看出，我这里主要参考的是 F 阅读模型这一理论，根据这个经验我得到的结论是 重要的信息应当摆放在左侧以使用户立即触达核心信息，这将有利于接下来的引导或者转化。
另一方面，运营同学又是基于什么考虑决定将核心内容放在右侧的呢？答案是操作习惯，理论化的话可以用费茨定律概括，（目标距离用户距离越短，用户触达的效率越高）。考虑到大部分用户使用右手操作，鼠标也大都悬停在屏幕右侧，因此，按钮置于右侧，用户点击的路径变得更短，也就更容易触达和转化（纯体验角度或者说效率角度）。
你仔细阅读这部分内容，从分歧点到各自的理论支撑实际上都没有太大的漏洞，为什么没有漏洞？因为确实都没有错误，也都存在其合理性。例如我们常用的购物 APP 会把按钮置于右下角，用户操作起来必然比左上角的按钮更加容易。那么在这两种分析都合理的背景下，我们要对比或争论的其实不是哪个判断是错误的，而是哪个判断更有利，更合理，能够带来更多的数据转化。因此，这个问题最终由对错问题，转化为一个优劣问题。
有些人很机智，这个时候肯定会想，既然左边最容易触达信息，右边最容易触达按钮操作，那左边放置内容，右侧放置操作不就完美解决了吗？哎呀，读者真聪明。
由于 F 阅读的逻辑，将展示性质的「内容」放置于左侧，使用户更快触达关键信息，由于费茨定律，以及多年来养成的用户习惯（操作组件在右侧，当然现在很多放在中间的情况）将需要执行的操作置于右侧，使用户快速交互并完成任务。有一定道理，甚至在实际落地产品中我们也能看到一些类似的设计，例如豆瓣。 这是一种左与右的妥协
但需要注意的是，豆瓣产品的右侧放置的是较为复杂的交互模块，例如完整的登录注册模块。在该场景下，用户在交互路径更短的右侧区域执行交互效率要明显高于左侧区域。
那么下面开始论述按钮置于左侧的观点
论点一：排版的限制
豆瓣的形式对于落地页产品，可能并不适用。主要有两方面原因。我们都知道，产品落地页首屏的组成为体验文案，主 CTA，插画配图三部分。常规做法是插画作为一组信息置于一侧，文案加按钮作为一组信息置于一侧。因为，体验文案与按钮具有强关联性，同时按钮与文案作为一组信息，才能与另一侧的插画搭配构建平衡的布局，呈现比较优美的视觉效果。
请登录后查看原图，因此，豆瓣那种妥协方式并不适用于商业类落地页。因为内容和操作本身是一体的，这源于排版的规整性的限制，按钮和文案只能同时存在于一侧，如果刻意去追求左侧内容，右侧操作，效果就像下面这样。一方面，只靠文案和按钮无法撑起左右两个区域，一方面文案和按钮被割裂开，用户的视线由文案转到按钮的路径过长，体验较差。（文案与按钮成组后，用户可以在阅读内容产生动机后立即触达交互按钮并完成转化）
论点二：文案与配图孰轻孰重
如果你亲自体验这两种区别的落地页（左图右文/左文右图），你会发现有一个共同点，就是在某个区域的停留时长，没错就是内容区域。以下图的顶部卡片区域为例，在阅读时我的浏览情况是，大致地扫视左侧的插画，然后注视右侧文字区，了解文章的具体内容，并在此区域停留较长时间，毕竟仔细阅读需要花费时间。
这就涉及到一个问题，插画与内容哪个更重要？其实答案很明显，我们只需要舍弃掉其中一项来测试下，看看哪个内容的缺失会对用户理解设计传达的语义产生较大影响。OK，我觉得没必要测试了（虚晃一枪）。很明显，删除插画后，我们仍然可以通过文章的标题来获知文章概要等关键信息，就像落地页首屏的体验文案，即便没有插画我们也能通过首页文案来获知这个产品是什么，能够为我带来什么。
然而如果去掉关键信息，去掉标题与按钮，仅凭插画我们无法分辨当前页面到底在讲述什么东西。设计本身就像是人与人的交流，产品就是我们，而用户则是我们的交流对象，去掉核心的文案，相当于把我们自己变成了哑巴，而去掉插画，最多相当于我们交流时面无表情罢了。
因此，在商业落地页中，我们以转化为核心目标，而能够更快地触达最重要的信息显然是明智之举，因此我们希望将核心的文案内容置于左侧。
（另外，一图胜千言的原理只适用于个别场景，例如数据可视化。设计人员通过将数值数据转化为易于理解的柱状图扇形图，来传达数据结论。而视觉修饰性质的插画则无法做到准确表意，我们通常在产品设计中见到的插画更多的是在情感上和审美上给予我们一定的愉悦，但想要准确描述关键信息，还是需要文字作为核心角色）
论点三：用户会因为便于操作而产生动机？
另一点同样值得我们思考，即用户真的会因为某个按钮更容易点击而被转化吗？或者我们换个形式问，假设你是一名男性，你会因为按钮在鼠标附近而选择点击购买女士内衣吗？你会在自己财务状况较差的时候因为按钮在鼠标附近而点击购买品吗？在大多数理性场景下，我相信你不会这样做。
所以这时候要引入福格模型，用来阐述产生转化的整个路径。福格模型简单来讲就是一个公式：B=MAT。B(behavior) 代表行为，M(motivation) 代表动机也就是用户需求，A(ability) 代表用户使用的门槛，T(trigger) 代表触发。也就是用户行为的产生需要用户需求为基础，需要保证产品的易用性，但是这还不够，在这个基础上我们还需要在产品中通过设计触发用户。完成转化的三个关键要素是，动机、能力、触发，缺一不可。
福格模型帮助我们解决了这个疑问。用户的购买或者转化始于动机，就像我上面举的例子，如果一个用户根本对产品没有需求（男性对女性内衣），那就不会产生动机，在没有动机的情况下，后面两项内容，能力或者触发都没有意义，无法发挥作用。整个转化的流程可以参考下方的示意图。
实际上对于那些有强烈动机购买或使用产品的用户，你的一切设计都没有太大意义，因为用户有强烈诉求的情况下，他会发挥主观能动性去找到转化的入口，主动完成转化。同理，有些用户是完全不会产生动机的，不是目标用户群。
设计策略主要针对的是有动机但不强烈（某种程度上有需求或者被吸引），以及暂时没有动机的两类用户。通过我们的首屏及详细内容，痛点利益点的介绍，来放大用户动机，制造共鸣点，创造美好的想象空间，使用户涌现强烈动机。然后转化就自然而然的产生。
因此，在首屏我们的核心要义是通过内容设计来触发用户动机，而不是想方设法触发操作。走捷径的误触方案设计能保证百分百的触发率，但那种触发没有任何意义。到这里我们应该明确了，用户会因为好的内容所触发的动机而买单，但不会因为你把按钮放在我手边而产生购买冲动。
因此，我的结论是，用户更有可能因为左侧展示的强洞察力的文案而产生动机，而动机是整个转化的起始，也是最关键的一点，有了动机，触发（按钮位置）的效率即便低一点，但转化仍然很有可能继续（就像动机产生了惯性，有了强烈的动机会自发地去寻找触发器，去寻找按钮以自主完成转化，但触发器不会有惯性）
这个观点论述下来，主要涉及到 F 阅读模型，费茨定律以及福格模型，算是很基本的设计原则，也顺便帮大家重温一下。最后，我们再拿一些其他实证来进一步论述，例如国内一线公司的落地页设计。
1. 一线公司落地页布局
2. 全球独角兽企业落地页
文章来源：优设 作者：南山可
近一年多接触到了插画 Banner 设计，算是自己边做边摸索，还在学习探索期，目前总结了一些做稿的思路，分享的目的是为了梳理完善自己的方法论，让自己继续向前进一步。
本篇文章分享内容：插画 Banner 的三个层次。
插画 Banner 的三个层次：文案层、画面元素、背景层。
相关联元素和点缀元素可以二选一，也可以同时使用，具体根据设计画面而定。
以下内容是我目前总结的背景层类型。选择背景时的注意事项：背景一定要和元素风格一致。我经常会出现这样的问题，主体物和背景不融合，导致设计看起来主体元素是贴上去的。
注：以上所用到的图片素材均来自于懒设计、稿定设计
Banner 设计画面千千万，套路来回就几样。希望大家能在框架的基础上进行思维发散，创作出好的作品。
定量的设计套路（不变）+百变的设计风格（变）=属于你的千变万化的 Banner 作品
（原文章地址：https://www.uisdc.com/banner-design-guide）
蓝蓝设计的小编 http://www.lanlanwork.com
