电商Banner设计

一 电商的分类:

  1. C2C:用户对用{比如淘宝}
  2. B2C:企业对用户{比如天猫,京东}
  3. B2B:企业对企业{比如阿里巴巴}
  4. O2O:线下支付{比如美团}

二 电商设计三要素

1 产品主图:必须是高清大图,否则效果不好,如果图太小的时候,画布大了图不会突出,放大又会失真;

2 广告文案:主标题与副标题字号差异应该很明显,文字区域应该集中,不宜分散

3 广告背景: 背景的明度可以选择高明度或低明度,辅助元素的视觉级别应该远远低于产品(形状尽量较小),否则会抢主题。

三 banner成品的分析步骤(检查是否有不妥的地方)、

1 观察banner中产品和主标题是否为主要地位;

  1. 主标题和副标题之间的大小差别是否明显;

3 区域和产品区域是否划分清晰;

4 度(是否是较高或者较低),背景是否弱化;

  1. 辅助元素是否和主题相关。

四 海报的版心一般为1000px(当然也有特殊情况;具体情况具体定)

五 关于人物素材的选择与应用

1 人物的半身像:有利于传达表情,应用场景:化妆品,美食。。。

  1. 人物的全身像:有利于突出身体动作,应用场景:体育,舞蹈。。。
  2. 人物摆放避免顶在版面上部,要留有部分空间。对于人物裁切,避免从关节处剪裁,比如膝盖,胳膊肘

六 banner的设计需要注意的地方

1 在产品图片排版中,一定不要任意改变图片的大小,特别是多个产品排版,否则会破环产品原来的比例;

  1. 产品主题或着产品的特点,一次只能表达一个,多了会造成版面混乱,
  2. 计的好处{也叫20%原则}:给用户留下很大的想象空间;

4 可以利用远 中 近三个层次元素的布局,增加画面的代入感(身临其境),更加能够接受海报所表达的主题意境。至少要能够分出主题层次和背景层次

七 影响画面平衡重量的元素

1 图形明度高的画面重量重,明度高的画面重量轻;

2 饱和度高的重,饱和度低的轻;

3 图形大的重,小的轻。

八 构图方式{排版方式}

1 黄金分割线:0.618/1 但是对于设计画面来讲差不多是三分一处就属于黄金分割线;特征是使画面更加赋有动态化,使湖面主体具有运动趋势。

2. 垂直水平构图:一般竖条状产品使用较多,将竖条状产品进行多个并列摆放,减弱该产品单独放置时的孤单状况。增强群体产品放置时说服力。如图:


3. 辐射式排版:同样用在产品有不同颜色款式,该排版风格更加具有弧线的动感。


4. 三角形排版:一般正三角形利于突出产品的稳定性可靠性,倒三角表现产品的运动感觉。


5 对角线构图:用于对产品不同侧面特征进行对比,同时画面具有较强的动感。


6 渐进式构图:将产品排布形成透视关系,在透视结束一段放置文字。起到强调文字主题的效果。


  1. 框式构图:用不同形状或者框线突出画面中的文字或者产品。

电商网站的要求

一 淘宝店铺的尺寸

1 基础版的尺寸: 淘宝模板的宽度是950px, 长边的宽边是750px, 短边加栏目间隙是190px+10px

2 店招的高度一般是120px-150px; (logo+导航) 导航的高度一般是25px-35px; 店招内容的大小一般是100kb以下;

  1. 电商商铺的版心一般是: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键复制,双击切片可以跳出对话框,设置切图的宽高(在切片选择工具模式下)

  1. 切片保存:必须是三键加s保存(ctrl+shift+alt+s)弹出对话框,选择存储

    然后选择存储为所有用户切片选项,


    保证所有切片名称为英文状态,中文名会造成服务器不可识别。

 

 

 

 


 

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: