电商网店首页结构设计方案思维导图

电商网店首页结构设计方案思维导图，整理了装修方式、结构、设计的内容，快来看看吧！

电商网店首页结构设计方案思维导图

• 装修方式
  • 模块
    • 自定义模块
      • 可编辑网页代码
      • 全屏代码
        • 1、必备外壳代码
          • 代码：
          • 注意事项：
            • 1、在可自由编辑区域修改代码
              • PS切图生成HTML代码，复制table粘贴进去
                • 示例：2017年春节首页装修代码
              • 自己编写HTML代码粘贴进去
                • 不建议（天猫样式限制多）
              • 第三方网站生成代码，复制粘贴进去
                • 90设计网的淘宝工具
                  • 需购买VIP
                  • 可下载店铺装修模板素材
                  • 可花钱请网站帮忙装修店铺
                • 建缘设计天猫淘宝京东代码
                  • 论坛有免费基础代码
                  • 特效代码需购买
                  • 论坛有违禁词查询等
            • 2、需修改第一个div中height值
        • 2、作用：全屏1920PX宽度时，网页效果以1920PX宽度展示，且网页居中
    • 悬浮导航
      • 1、拖入悬浮导航模块
      • 2、设置定位
        • 距离顶部导航高度
        • 在中间内容区域（中间990PX宽）左侧，距离
      • 3、内容设置
        • 添加背景图
          • 宽：≤200PX
          • 高：≤600PX
          • 格式：JPG、PNG、GIF
        • 添加热区
    • 全面轮播
      • 1、设计要求
        • 宽度1920px
        • 高度＜540PX
      • 2、设置
        • 添加轮播海报
        • 添加网页链接
    • 友情链接
      • 内容设置
        • 类型
          • 文字
            • 店铺名称
            • 添加网页链接地址
          • 图片
            • 添加图片地址
            • 添加网页链接地址
        • 链接说明
      • 显示设置
        • 显示
        • 不显示
    • 轮播图片
      • 内容设置
        • 添加图片地址
        • 添加网页链接地址
      • 显示设置
        • 显示标题
          • 选择“不显示“
        • 模块高度
          • 100-600PX
          • 填轮播图片的实际高度（必须符合100-600PX之间）
      • 切换效果
        • 两种可选
          • 上下滚动
          • 渐变滚动
      • 限制太多，不推荐
        • 1、自己设计海报
        • 2、去第三方网站工具中生成轮播海报代码
    • 店铺尾部
      • 1、作用：
        • 展示店铺的活动、特色宝贝
      • 2、设计：
      • 3、装修：
      • 同自定义模块
  • CSS
    • 需花钱购买
  • 页面
    • 1、添加页面背景图片，不能编辑
    • 2‘、要求
      • ＜1M
• 结构
  • 1、店招
    • 见上面介绍
  • 2、海报区
    • 尺寸：
      • 宽：1920PX
        • 内容区域控制在中间990PX以内
      • 高：不限，建议在400-600PX
        • 600px是1024×768分辨率下一屏高度
    • 作用：
      • 用于店铺重大公告，折扣优惠 主打产品推荐
      • 让客户一点进首页就能看到我们店铺的重点
    • 种类：
      • 全屏海报
        • 固定活动主题
        • 活动利益点体现
        • 摆放一些主推产品
      • 促销轮播海报
        • 促销产品
  • 3、优惠券
    • 1、设置见上面介绍
    • 2、设计
      • 尺寸
        • 不固定
        • 高度控制在200PX以内
      • 位置
        • 可视区内，屏幕中间990PX范围内
        • 考虑空间及排版
      • 要方便切图
      • 风格及配色
        • 与主题搭配
        • 显眼
        • 结合优惠力度，吸睛
  • 4、分类区
    • 作用：
      • 产品种类较多时制作，帮助顾客快速找到自己想要的宝贝
    • 类型：
      • 按价格区间分类
      • 按产品功能类别分类
      • 按产品属性类别分类
      • 其他
        • 参考天猫平台宝贝推荐分类
  • 5、主推产品区
    • 作用：刺激客户点击、购物的欲望
    • 选择：
      • 根据店铺运营计划要求
    • 主推款：
      • 店铺销量的主力款
      • 优势明显
        • 性价比高
        • 竞争优势大
          • 成本低
          • 质量好
          • 售后少
        • 能够大量增加店铺的成交量
  • 6、次推产品区
  • 运营规划 根据产品特点、数据分类
    • 主推款 引流款
      • 特点：
        • 1、毛利率趋于中间水平，产品转化好
        • 2、同样相比于类目属性环境下的竞争对手， 有价格或其他方面的优势，从而更利于占领“豆腐块”的位置
        • 3、后期可带来较大的免费流量
        • 走“大众路线”
      • 如何定：
        • 1、根据店铺商品的库存状况订主推款式
        • 2、根据店铺顾客喜好订主推款式
        • 3、根据本季流行趋势订主推款式
        • 4、根据畅销款式订主推款式
        • 5、根据公司激励款式订主推款式
        • 操作
          • 之前没有流量数据，做产品数据测试，初期给予产品比较小的推广流量
          • 之前有流量数据，市场有同类产品流量数据，利用平台看流量数据
          • 观察数据状况，选择转化率较高、地域限制较少的产品
      • 目的：
        • 引流，增加点击
    • 利润款
      • 目的：
        • 赚钱，应该占实际销售中的最高比例
      • 适用：
        • 目标客户群体里面某一特定的小众人群
          • 追求个性
          • 分析他们的偏好
          • 符合偏好款式、设计风格、价位区间、产品卖点
    • 活动款
      • 目的：
        • 清库存
          • 低价促销
        • 冲销量
          • 基于平台成交额基础要求
          • 部门的KPI考核
          • 三方运营合作公司完成业绩指标
          • 注意
            • 活动期间的客户体验
            • 避免对品牌产生负面影响
        • 体验品牌
          • 提高重复购买
      • 注意：
        • 活动款的选款应该是大众款，但定价绝非低价
        • 很多活动产品的销量是不计入主搜排序
        • 贪图便宜产品购买我们产品的，一定不是我们最终端的目标客户
    • 形象款
      • 目的：
        • 提升我们品牌的形象
      • 选择：
        • 高品质、高调性、高客单价的极小众产品
        • 可以有3-5款，适合目标客群体里面的3-5个细分人群
  • 7、产品排列区
    • 按产品分类排列
  • 8、店尾区
    • 返回顶部
    • 店铺活动促销
• 设计
  • 1、设计思路
    • ①设计风格确定
    • ②设计场景构思
  • 2、素材搜集
  • 根据店铺活动主题来思考
  • 3、色调选择
    • 主色调烘托气氛
    • 辅色调突出主题
  • 4、页面排版
    • 1、背景
    • 2、产品陈列方式
    • 3、标题文案
    • 4、修饰元素
  • 5、执行落地
    • 1、分析素材
      • 是否可用
        • 版权问题，能否商用
      • 是否需要修改
    • 2、海报合成
      • 修图
      • 合成
      • 色调调整
      • 细节调整
        • 明暗光影
        • 修饰元素
    • 3、产品修图摆放
      • 图片处理
        • 抠图
        • 修图
    • 4、细节调整
    • 5、切图
      • ①根据页面布局排版拉参考线
      • ②结合链接图片拉参考线
      • ③分割图片、调整切片
      • ④生成HTML和图像
        • 结合平台要求检查每张图片的大小、格式
        • 修改图片格式及品质