电商基础字体排版及配色

电商基础及字体设计

(一)电商平台类型

淘宝:(C2C个人对个人) 集市
天猫:(B2C 商家对个人)
京东:(B2C 商家对个人)
阿里巴巴1688 (B2B商家对商家 批发网) 慧聪网
对外贸易:阿里巴巴国际站 速卖通 易贝

(O2O 线上交易线下服务)美团 饿了吗 滴滴 OFO 摩拜 58到家 货拉拉
垂直电商:酒仙网 网易严选 米家 洋码头 蘑菇街 凡客 美丽说

  • 购物流程
    产生想法在电商平台上进行搜索—挑选产品(产品主图)——选择后,点击进入产品详情页面(详情 店招 导航)然后购买—建立信任后,通过导航进入首页(首页 活动页 专题页)—推广图(直通车 钻展)
    设计师需要制作的:主图 详情 首页(店招 导航 bnner) 直通车 钻展 手机端(首页 详情)
  • 电商团队结构
    老板(产品经理 货源)—运营(产品的定位 销售策略)—设计师(视觉引导)—客服(引导销售)—库房(发货 仓库 退货)

    (二)文字排版

    文字的目的是用来准确的传达信息。
  • 字体的分类
    非衬线体:黑体 雅黑 幼圆 (笔画边缘简洁没有装饰)
    衬线体:宋体 (笔画边缘有顿笔,装饰)
    字体的开源(免费): 天猫(兰亭系列) 京东(方正正黑) 思源字体 黑体 宋体 幼圆
    男性字体:促销类 菱心体 粗黑 综艺 力黑 劲黑 (阳刚 粗 棱角分明)
    女性字体: 品牌宣传品牌形象 倩体 尚黑 细 (娇柔 纤细 柔美)
    儿童字体:婴幼儿产品 女性促销 胖娃 方正少儿 华康海报 (可爱 活泼 不呆板)
    中国风:楷体 行书 草书 毛泽东字体
    以上字体 常用于标题文字
    正文字体:衬线和非衬线
  • 首页装修之 图片轮播模块
    尺寸:990px 高100-600之间
  • 文字排版的流程
    1.判断文字的主次关系(让文字富有跳跃性 搞事情) 用大小和位置来发生变化
    2.对齐文字(左 中 右)
    3.颜色 大小 粗细的变化
    4.辅助设计:用图形辅助的方法,进行文案的细致划分(用底色 或者边框 突出重点文案 让文字阅读起来更有秩序感)
  • 小知识
    立体文字常用于促销海报,卖字的时候使用。
    1.将文字排版 并都转换为轮廓(ctrl+shift+O)
    2.将文字复制三次,分别为 面 立 托
    3.将“立”执行3D突出和斜角命令

    注意:需要调整效果,要从外观面板重新点击
    4.将“托”执行对象—路径—偏移路径
    然后将路径 选中 并相加(路径查找器 ctrl+shift+F9)
    再对相加的对象执行3D突出和斜角

配色及设计构思

(一)电商广告的分析方法

1.分析客户需求(文案 产品 风格),新建画布
2.绘制草图(确认基本的布局,初期坚持绘制)
3.摆放文案和产品,按照布局方法。
4.根据文字的排版方法将文字主次划分
5.根据风格给予作品底色

  • 色彩三要素
    色相(H)0-360° 纯度(S)0-100% 明度(B)0-100%

    (二)对比法配色

  • 明度和纯度的对比
    弱对比:两个颜色之间的差值在0-30。
    中对比:两个颜色之间的差值在30-70
    强对比: 两个颜色之间的差值在70-100以上
    强中弱对比的应用:弱对比应用于背景的打造(融为一体 不突出) 文案和产品 应使用强对比(突出醒目 便于识别)
    -色相的搭配
    色相的强对比:颜色的互补色为强对比(红—青 绿—品 蓝—黄)
    色相的中对比:90°颜色

    色相弱对比:邻近色

    单色调:画面安静和谐,用于打造品牌和高冷产品。
    多色调:画面活泼 热闹,多用于促销或者儿童产品。
  • 增加清晰度的方法
    将原图层进行原位复制,然后对复制的图层执行滤镜—高反差保留(数值调整为0.8-1),然后将图层的混合模式改为叠加。
  • 提出画面不够活泼?(增加色相)
    1.将文字添加图形
    2.为背景添加装饰元素(源自产品外形或者 自己根据使用的形状 来进行制作,可以发生色相的变化 图形要小)

    (三)常见的版面布局方式

    左右布局:最为常见的电商海报布局方式
    左中右: 左右摆放产品 中间摆放文字
    上下布局:常用于电子类产品,文字在上,产品横向展示,或展示局部,高度要大于600px或者更高
    对角线布局: 常用于个性化海报展示
  • 影响版式平衡的因素
    元素的密度+元素的大小 位置+ 颜色
  • 颜色的轻重(人的心理感觉)
    同等条件下
    颜色的明度高则 颜色感觉越轻 (暗则重 亮则轻)

    颜色的纯度高则重 反之亦然(鲜则重 淡则轻)
  • 中国风背景的处理方法:
    1.用色相饱和度命令(ctrl+u) 调整颜色接近于背景颜色。
    2.将元素的混合模式改为明度(用上方图层的明度+基层的色相产生结果色 ),然后降低不透明度,让元素和背景产生弱对比。