电商页面设计

的突出。在实际的拍摄中，树叶之间的空隙、虚掩的门、窗框、山石之间的缝隙等都可以当 做框架使用
拍摄构图
三角形构图
拍摄构图
主体和背景相互呼应
拍摄构图
从不同的角度拍摄
电商视觉页面新思路
页面排版基础
选择 鱼饵
引诱 上钩
拉钩
我要吸引哪些人群？ 根据目标人群喜好设计图片
吸引买家眼球（根据投放环境）背景差异化 优惠信息（折扣，降价，赠品，包邮等）
20块钱一本高大上！
➢ 总结：如何避免设计中有廉价的感觉？
➢ 1.不要使用超出你掌控的元素（色彩搭配、字体、符号、图形等）
2. 在使用元素时，认真的思考每一个元素在画面中的作用是什么。
画面中的每一个元素都应有其存在的意义！元素之间的关联应当 和
谐统一。 ➢ 3. 学会只用3种以内的字体来做设计。
同样还是大面积使用的橙黄色背景，但是，我们会认为比第一幅图 看起来好多了，这张图字体采用2种，且风格相似。颜色搭配和谐 统一且不同元素之间相互呼应，模特红衣服与上头横幅红底色呼应， 斜线背景与漂浮的倾斜小电器相呼应。漂浮的电器也经过调色与背 景色统一。主次分明，画面的每一个元素的设计都有其存在的意义 且相互关联相互呼应！整体画面风格和谐统一。
提供入口引导买家进入 （设置醒目的按钮）
排版六大要素
色彩
修图
平衡
势能
集群
间隙
色彩基调能产生情感，色彩对比能增加空间感
建议用色不超过三种，按6:3:1配比
色彩
图片合成过渡要自然，阴影，反光，虚实要恰当
修图
画面的平衡感取决于各元素的视觉重量
平衡
势能是对平衡有意的破坏，以吸引注意力。
势能
人们总是把位置靠得很近的看成一体
字体和语音的比喻 字体大小粗细相当于音 强 字体越大相当于声音越 大 字体的形式相当于音色 男低音还是女高音
巧妙的字体组合可以制 造和弦
3.形式美观——标签
简洁明快的标签 更加醒目
增加文化暗示的标 签，对品牌提到提 示作用
引导
就像兔子在狗面前奔 跑会勾起狗的狩猎天 性一样，明确的按钮 和箭头都会对买家产 生不可低估的心理暗 示
• 至于右边这张图片，可能在电脑上看不出来什么特点，但如果将图片搬到手 机上，就可以很清晰地看出这张图片的亮点了。第一，产品清晰，第二，卖 点突出，超薄透气送抱枕+毛毯。这样一张推广图放在无线端，点击率肯定飙 升。
通过反向解读，可以 看到
促销广告设计的共同标准是：
1.主题突出
2.风格统一
3.目标明确
电商视觉页面新思路
电商视觉页面新思路
电商视觉页面新思路
电商视觉页面新思路
电商视觉页面新思路
主题是什么，核心信息是什么，列出一级文案，二级文案
电商视觉页面新思路
潜意识 阅读流畅性 购买决策和决策时间。
电商视觉页面新思路
电商视觉设计基础
色彩
1．色彩在设计中的作用 （1）色彩 在电子商务的视觉设计中，人们对色彩的喜好偏差往
2、背景的选择与处理 在商品拍摄中，背景可以表现主体所处的环境，对表现整个画面的色
调、气氛和空间感有着至关重要的作用。
拍摄构图
对角线构图
拍摄构图
三角形、S形 构图
拍摄构图
九宫格构图法
拍摄构图
引导线汇聚焦点
拍摄构图
引导线汇聚焦点
拍摄构图
框架式构图：使用前景中的事物将需要突出的摄影主体框起来，可以让照片的主题更加
修图
修图的第一步是调整整体色温和重新取景以突出重点
光影是修片必须考虑 的要素；图片合成过 程中一定要注意光的 方向和色温。
背光
光泽 阴影
退底羽化不 够造成的边 缘僵化
退底羽化过 度造成的相 互渗透
正确的倒影，增加细节和品质感
新手常犯的倒影错误
构图
平衡——画面的平衡感取决于各元素“视觉重量”
第一次手术之后
对比指的是，避免页面元素的太过相似，
对
如果元素不相同，那就请深深的不相同。
比
有重复就一定有对比，重复是基调，对比就是焦点。重复一
定要精确，对比一定要大胆。
对比可以有多种方式产生。大字体与小字体，粗线条与细线
条，冷色与暖色，平滑与粗糙，长宽与高窄，小明与明……等
等。
亲
Baidu Nhomakorabea
亲密性指的是，物理位置的接近意味着内容的关联，
1．文字设计的元素 在设计中从字体、字号、行长、间距和背景五
个元素来追求效果。
2．文字的层级关系 文字层级在沟通中扮演着重要角色，它可以将
用户引向期望中的结果的同时改善用户的体验。
创意
网页设计中的创意： 大自然 音乐 艺术 包装 老物件
摄影 时尚 室内设计 食物 建筑
电商视觉页面新思路
商品图片的拍摄处理
4. 画面中尽量不要出现形状的素材元素，例如画面有菱角矩形，就 不要在用圆形，确保风格一致。 5. 掌握三到四个固定的色彩搭配组合，将之反反复复的使用，用烂 为止。 6. 学会用英文以及小装饰来点缀画面，画面中的点线面缺一不可！
电商视觉页面新思路
怎样优化？
排版四大法则
重对亲对 复比密齐
重 复
4.形式美观
尽管看起来千差万别，但内在规律却很一致
1.主题突出
第一主题
促销的过程就像一次陈述，我们 必须有一个明确的主题，所有的 元素都必须围绕着这个主题展开。
促销的主题一般是价格，折扣和 其他促销内容本身，所以这个信 息应该是放在视觉焦点上的，被 突出和放大的元素。
效果优秀促销广告>
信息传达的层次结构
重复指的是，设计中的视觉要素
在整个作品中重复出现。
可不是说放几个一样的小方块就是重复了哦，仔细看上图， 颜色重复出现，高度、宽度重复出现，元素间距重复出现， 可以预见的是，如果我们在最后再加一个小方块，一定还是 同样的颜色、高度、宽度、间距，如果不是为了突出，我们 不会引入新的元素。 应用上来说就是，如果我要加一行字，第一反应是，用之前 用过的颜色和字体，如果没有确凿的理由，就坚决不出现新 的要素。这是设计的克制，也是初学者最最先要学会的一件 事！
设计是为了解决问题而存在的！
18613602755
是不是觉得这样阅读起来有点困难？
186-1360-2755
如果换成这样呢？
+86-186-1360-2755
这样看起来是不是更有逼格？
186-1360-2755
这样是不是更容易让人知道它是个电话号码？
这两本书大家应 该都看过吧？
3块钱一本地摊货！
间隙——空白空间是画面语言的标点符号
段间距必须大 于行间距，信 息板块之间要 有明确的间隔 空间，主要内 容和图片外框 间要有版心概 念，画面要有 30%以上留白
随意安放，每一项都应当与页面上的某
对
个内容存在某种视觉联系。
齐
对齐是地心引力，一根参考线立在那里，就要求所以被选中的元素死死
的贴在上面，不允许有一像素的叛离。
同一根参考线意味着某种联系，将依附于它的元素建立起亲密以外的秩
序。
由于对齐原则在以上的示范中其实无处不在，我已经默默遵循了（不对 其会死晚期），就不再单独示范啦。需要强调的是，在物理位置相聚太 远的情况中，要熟练运用辅助元素将不同的对齐联系起来。
取得左右平衡的增加砝码 TIP: 关于平衡的心理机制请参阅里格尔的名著 《秩序感》
势能——是对平衡的有意识破坏，以增加注意力 同方向的鞋子产生动态势能
倾斜放置的包包产生静态势能
集群——人们总是把位置靠的近的看成一体的
把关联性高 的信息组合 在一起成为 集群，便于 信息传达， 应避免主要 信息分散布 局
集群
空白空间是画面空语白言空的间标是点画符面号语言的标点符号
间隙
如何避免设计中有廉价的感觉？
文案 字体 配色 版式......
如何避免设计中有廉价的感觉？
• 1.原本应该吸引人的标题，结果颜色融合进了底 • 色之中，完全没有吸引力。
2. 洋快餐，却选择了这样一个中式的字体来表现。 3. 连个品牌LOGO都没有，没有品牌意识。 4. 下面的那些活动细则看起来完全不醒目，而且 • 杂乱无章。 5. 这包包的款式典型城乡结合部的赶脚啊！ 6. 那下面的放射线究竟是几个意思？
目标人群的审美特征
模特应与目标人群特征吻合，也要和产品特点吻合 TIP: 投射效应，让消费者把自己想象成画面上的模特
色彩基调产生色彩情感， 而色彩对比增加画面空 间感。
饱和度对比
色彩呼应和统一
（温和的）冷暖对比
衬底色块是最简单 的明度对比方式
TIP: 简单的控制色彩的方法是 用色不超过3种，并按照6：3：1 的比例配置
• 但是左边这张图因为卖点太多，反而过于混乱，无法让买家一目 了然
• 右边这张图片虽然卖点单一，但是将防噪音这个卖点重点突出， 很清晰。对比之下，买家会很清楚地知道右边这件商品的最大特 点是什么，他能够给我的生活带来什么改变。
• 上图左边的这张图片，最大特点是将推广图做成详情页的形式，这是很好的 一个创新，因为手机端屏幕小，所以很多买家通常都懒得去看产品详情页， 大多数是在手机上搜索商品，看哪张图片做得漂亮，做得好看，就点击进去， 大概看看就付款了。在这种情境下，如果我们能够将详情页搬到推广图上， 那么不管是点击率还是转化率，或许都可以翻几番。
电商视觉页面新思路
Keywords
商品拍摄
器
材
光线 构图
背景
电商视觉页面新思路
1、商品的构图 商品在被拍摄时的构图大多是通过拍摄者的主观意图摆设出来的，所
以对于构图的要求更加严谨，对于画面中各种关系的处理也要求更加合 理。
➢ △型（三角形）构图 ➢ ▽型（倒三角形）构图 ➢ S型构图 ➢ 对角线构图
电商视觉页面新思路
促销页面设计
Why?
• 为什么同样一个位置每个广告的 点击率会差数十倍呢？
• 为什么同一个品牌的点击效果也 不尽相同呢？
• 因为促销广告设计有着非常强的 规律性，那些点击率高的正式严 格的遵从了这些规律
哪一张的点击率会高一点呢？
那张推广图的点击率高于行业标准3倍。
• 可能有人会问为什么，两张图片不是都很有卖点吗？是的，确实 是这样，两张图片都很有卖点
气氛的塑造依赖于细节
增加了光影细节后画面显得饱满了些 增加了底纹和灯光效果，画面变得丰富生动 TIP: 请记住设计大师 米斯·范·多·罗的名言： “上帝在细节 之中”
对比和夸张
大小对比
虚实对比
取舍
过多的元素产生的干扰
TIP: 任何的创意过程都是先做加法在做减法的过程；能否“舍”决定了能否“得”
人本能会先看人 脸！ 是吸引目光的手 段
陈述的过程是分层次展开的，和语 言的逻辑一样，设计的逻辑也是按 层次结构展开的：
突出的折扣信息，作为第 一层级信息被强化
辅助信息为第三 层级
暗示信息 为第四层级
产品信息是第二层级
通过形式强化主题，形式不可大于内容
更大的面积，更粗的 字体和高对比色是基 本的强化手段
密
所以要将相关的项目组织在一起。
新手的设计总是元素四散，杂乱无章，看似是他们不懂留白的奥义，但 实际上是不懂亲密。相关内容得到有效组织，空间自然会空出来，就像 知赶集感觉全场都是人，但要是让他们按照大小个以男左女右前后相隔 一臂左右相隔一拳原则立正看齐排排站，我保证还能塞进500人。
对齐指的是，任何元素都不能在页面上
过修饰的形式会减弱 传达，过多细节会对 主题造成干扰
多主题的组合表现
同等级别的多主题表 达，形式感要保持一 致。这样让阅读者容 易找到规律，把多条 信息一次获取。
不同等级别的多主题 表达，要分清主次关 系，把次要信息降到 第二层级，避免平均 非配造成的主要信息 弱化。
2.目标明确 目标人群的审美特征 面向白领的职业装，字体色彩都庄重和贵气 面向女生羽绒服，字体色彩都活泼可爱
往对他们的消费体验起着非常关键的作用。
（2）色相环 色相环的作用是告诉我们颜色之间的相互关联。
2．色彩情感在视觉设计中的运用 （1）引导—— 理解浏览者对色彩的喜好偏差 （2）决策—— 运用色彩实现“七秒定律” （3）转化—— 以色彩实现订单的高“转换率”
电商视觉页面新思路
电商视觉页面新思路
文字