电商Banner设计
一 电商的分类:
-
C2C:用户对用{比如淘宝}
-
B2C:企业对用户{比如天猫,京东}
-
B2B:企业对企业{比如阿里巴巴}
-
O2O:线下支付{比如美团}
二 电商设计三要素
1 产品主图:必须是高清大图,否则效果不好,如果图太小的时候,画布大了图不会突出,放大又会失真;
2 广告文案:主标题与副标题字号差异应该很明显,文字区域应该集中,不宜分散
3 广告背景: 背景的明度可以选择高明度或低明度,辅助元素的视觉级别应该远远低于产品(形状尽量较小),否则会抢主题。
三 banner成品的分析步骤(检查是否有不妥的地方)、
1 观察banner中产品和主标题是否为主要地位;
-
主标题和副标题之间的大小差别是否明显;
3 区域和产品区域是否划分清晰;
4 度(是否是较高或者较低),背景是否弱化;
-
辅助元素是否和主题相关。
四 海报的版心一般为1000px(当然也有特殊情况;具体情况具体定)
五 关于人物素材的选择与应用
1 人物的半身像:有利于传达表情,应用场景:化妆品,美食。。。
-
人物的全身像:有利于突出身体动作,应用场景:体育,舞蹈。。。
-
人物摆放避免顶在版面上部,要留有部分空间。对于人物裁切,避免从关节处剪裁,比如膝盖,胳膊肘
六 banner的设计需要注意的地方
1 在产品图片排版中,一定不要任意改变图片的大小,特别是多个产品排版,否则会破环产品原来的比例;
-
产品主题或着产品的特点,一次只能表达一个,多了会造成版面混乱,
-
计的好处{也叫20%原则}:给用户留下很大的想象空间;
4 可以利用远 中 近三个层次元素的布局,增加画面的代入感(身临其境),更加能够接受海报所表达的主题意境。至少要能够分出主题层次和背景层次
七 影响画面平衡重量的元素
1 图形明度高的画面重量重,明度高的画面重量轻;
2 饱和度高的重,饱和度低的轻;
3 图形大的重,小的轻。
八 构图方式{排版方式}
1 黄金分割线:0.618/1 但是对于设计画面来讲差不多是三分一处就属于黄金分割线;特征是使画面更加赋有动态化,使湖面主体具有运动趋势。
2. 垂直水平构图:一般竖条状产品使用较多,将竖条状产品进行多个并列摆放,减弱该产品单独放置时的孤单状况。增强群体产品放置时说服力。如图:
3. 辐射式排版:同样用在产品有不同颜色款式,该排版风格更加具有弧线的动感。
4. 三角形排版:一般正三角形利于突出产品的稳定性可靠性,倒三角表现产品的运动感觉。
5 对角线构图:用于对产品不同侧面特征进行对比,同时画面具有较强的动感。
6 渐进式构图:将产品排布形成透视关系,在透视结束一段放置文字。起到强调文字主题的效果。
-
框式构图:用不同形状或者框线突出画面中的文字或者产品。
电商网站的要求
一 淘宝店铺的尺寸
1 基础版的尺寸: 淘宝模板的宽度是950px, 长边的宽边是750px, 短边加栏目间隙是190px+10px
2 店招的高度一般是120px-150px; (logo+导航) 导航的高度一般是25px-35px; 店招内容的大小一般是100kb以下;
-
电商商铺的版心一般是:900px-1200px;
二 H5营销页
设计尺寸:分辨率
ios: 640px*1136px(苹果5s的尺寸(常用的设计尺寸))
750px*1334px(苹果6, 6s(不常用))
1080px*1920px{苹果6plus 苹果6splus(不常用)}
640px*960px{苹果4s{不常用}}
安卓:720px*1280px
交互方式:分屏交互,滚动交互
H5页面的上限时8页左右,过多的页面会影响阅读体验
三 关于切图(切片工具)
1 在画布需要的区域上,使用切片工具绘制切片范围
2 复制切片:选择切片选择工具(在切片工具组里),点击目标切片,按alt键复制,双击切片可以跳出对话框,设置切图的宽高(在切片选择工具模式下)
-
切片保存:必须是三键加s保存(ctrl+shift+alt+s)弹出对话框,选择存储
然后选择存储为所有用户切片选项,
保证所有切片名称为英文状态,中文名会造成服务器不可识别。