详情页基本概述

这是一篇关于详情页基本概述的思维导图，主要内容包括：详情页制作规范，基本详情页框架，详情页区分，商品板块。

详情页基本概述

• 详情页区分
  • 展示性详情页
    • 展现产品功能特性，整个画面以产品为主
    • 平面化展示
      • 画面连贯性统一性更强
      • C4D/手绘/摄影/合成
  • 故事性详情页
    • 偏向互动性娱乐性、科普性
• 基本详情页框架
  • 主图板块
    • 视频
    • 主图详情化
      • 将详情页的内容简易的集合到主图进行展示
    • 营销图
      • 直通车推广（点击直接到单品）
        • 不以设计风格与设计美丑判断好坏
        • 价格信息/折扣/赠品
          • 信息层级划分
        • 根据实际展示大小制作
          • 信息敏感度
            • 标题
            • 价格
            • 赠品标签
            • 根据产品的外观以及留白进行调整
              • 信息需要根据负空间留白进行调整。如果文案超过5个字可以考虑换行
              • 信息的阅读编排形式需要根据消费者阅读习惯来
          • 重点信息露出
      • 钻展图
        • 点击到达店铺页/专题页
          • 按千次栈实现收费
        • 设计模块固定化
    • 卖点图
      • 以产品功能功效成分展示为主
        • 与详情页呼应
    • 展示图
      • 情景代入化
        • 商品展示
        • 应用场景展示
        • 多合一展示
    • 售后图
      • 特定情况使用
        • 活动说明
        • 快递发货
        • 赠品建立
    • SKU
      • 商品规格
        • 不同规格的内容区分
  • 运营板块
    • 年龄
      • 不用年龄阶段的喜爱，行为，态度都不一样
        • 同质化
        • 差异化
    • 优惠券/活动信息
      • 设计格调
        • 摄影偏多
    • 售后板块
    • 企业实力说明
      • 强化品牌实力以及打消消费者购买疑惑
• 商品板块
  • KV
    • 整体风格的基调确定
      • 配色
      • 材质
      • 文字选择
  • 图标板块
    • 卖点前置
      • 重要或者产品优势提前展示
    • 与卖点海报呼应
    • 非必要板块
  • 痛点板块
    • 恐吓性营销意图，制造消费恐慌
    • 引导突出商品能解决痛点，突出优势
    • 挖掘消费者痛点，提出问题，并通过后续的卖点展示来解决问题
    • 非必要板块
  • 卖点海报
    • 设计占比最多的板块
    • 风格统一
    • 一屏一卖点
    • 一屏一标题
    • 秒懂，直白
    • 5-10屏
  • 细节展示
    • 角度特写
    • 零部件拆解
    • 包装
  • 比较
    • 深入了解细节差异
    • 竞品的差异
    • 抓住消费者心理，突出商品优势
  • 参数
    • 基本数据
  • 通用板块
    • 非必要板块
    • 品牌实力
• 详情页制作规范
  • 前期策划
    • 文案框架制定
    • 品牌顺序编排逻辑
    • 画面风格色调参考
    • 情绪版
  • 设计执行——画面规范
    • 尺寸
      • 手机适配尺寸
        • 将画面处理成竖屏结构
      • 平台
        • 淘宝
          • /
        • 天猫
          • /
        • 京东
          • /
        • 高度1340以上
          • 根据实际内容决定高度尺寸
          • 不同平台的宽度不同，展示的效果也不同，浏览的标准按照移动设备来设定，高度需要根据实际的内容进行波动处理
            • 自适应处理
              • 保持布的长宽比，能较为完整
            • 做大不做小
              • 详情页多平台适配
    • 安全区域
      • 顶部边距
        • 80-200px
      • 底部编剧
        • 80-150px
      • 根据画布的长短
        • 内容衔接与留白，避免画面过于拥堵
      • 左右边距
        • 50-100px
        • 文案左右对齐
        • 当画面底部出现较多的留白，可以忽略边距的需求，保证整体内容不会过于拥挤
      • 安全区版心
        • 摆放内容与文案
        • 安全区域展示核心内容，图像可以超出版心范围
      • 构图编排
        • 三等份
          • 上下构图
        • 左右构图
          • 1：1
            • /
          • 1：1.618
            • /
          • 1：1.414
            • /
          • 类型
            • 左文案 右产品
            • 右文案 左产品
        • 对角构图
        • 影响因素
          • 文字信息量
          • 产品特征与角度
    • 制作模式
      • 全屏拉通
        • 图片变化比较多
          • /
        • 黑白色彩跳跃较大
          • /
      • 模块化
        • 图片较为单一，表现形式比较简单
    • 文案设定
      • 字体设定
        • 字体的选择
          • 常规选择
            • 黑体无衬线字体
              • 思源黑
              • 阿里巴巴普惠
              • OPPO sans
              • Helvertica
              • 多字种选择
        • 一个页面的阅读信息最好是同个风格或一种风格
        • 正文
          • 保持可阅读性
        • 装饰信息
          • 美感度与形式感
        • 不用纯黑
          • 不要用默认黑体
      • 层级设定
        • 一级标题
          • 主标题
        • 二级标题
          • 副标题
        • 正文信息
        • 信息灰度层级
          • 由文字大小/数量/字间距/行间距组成的
          • 拥挤与疏密的状态
            • 标题
              • 大字间距要小
            • 正文
              • 小字间距要大
          • 灰度控制
            • 通过调整文字的不透明度去突出层级表现
            • 字体不能选择纯黑
        • 装饰信息
          • 根据实际的画面进行选择与调整
          • 文字
          • 图形
          • 线条
          • 与字重相匹配
        • 通过粗细或者字体大小进行对比，但在实际应用钟要考虑文字数量所呈现出来的灰度状态
          • 只改字号大小，不改字体字重
          • 改字体字重，状态相对接近
      • 对齐方式与组合策略
        • 匹配负空间结构填充
        • 信息成组
          • 标题
            • 标题不超过8个字
          • 正文
          • 装饰
            • iconfont
            • 图标
              • 少量图标大面积
                • 附属板块
                  • 跟随投屏内容设计，只占少量面积
                • 独立板块
                  • 面积扩展
                    • 背板
              • 类型
                • 特征统一
                  • 线性图标
                    • /
                  • 面块图标
                    • /
                  • 拟物图标
                    • /
                  • 立体图标
                • 将产品的外观制作成放置图标的底板，并且通过底板的面积进行负空间的填充，避免的图标过于单薄
                • 以内容为先，产品为后
                  • 产品在非必要情况下，可以不出现
                • 粗细需要与字体字重匹配
          • 分割条
          • 层级关系
            • 对齐
              • 对齐方式
                • 左对齐
                • 右对齐
                • 居中
                  • 头屏常规的上下构图，使用居中最保险不出错
                • 两端对齐
                  • 两端对齐-分解文案，添加装饰，从而增加画面的饱满感，文案组与图像能相对平衡
            • 对比
              • 字号大小对比
              • 粗细
              • 灰度
                • 不能用纯黑
              • 颜色
              • 间距
                • 字间距
                • 行间距
                  • 装饰-小字号
                    • 1.2
                    • 1.5
                    • 1.618
      • 文案提取
        • 竞品搜集
        • 官网收集
        • 信息分类
          • 确定层级关系
            • 标题
              • 标题与正文数量较少，画面留白较多，需要添加分隔条来留白进行划分
                • /
              • 分割条的粗细需要考虑到字体的字重灰度
                • /
            • 正文
            • 装饰文案
            • 根据信息量确定对齐方式
• 主题
• 单纯的文字可以独立作为图标表现，但应用到图像中，不能只是单纯的文字，需要形态以及装饰效果来丰富细节
• 低
  • 尺寸
  • 修饰词
  • 影响服务
  • 系列
  • 单位
  • 可以丢弃参与召回
• 中
  • 风格
  • 款式
  • 颜色
  • 季节
  • 人群
  • 地点
• 高
  • 品牌
  • 品类
• 火锅九块九包邮
  • 效果好
    • 火锅、九块九、包邮
  • 效果差
    • 火、锅、九、块、九、包、邮
    • 火锅、九、块、九、包邮
• 搜索“aj1北卡蓝新款球鞋
  • 查询语义理解分析
    • Query
    • 纠错
    • 类目预测
    • 分词
    • 命名实体
    • 语权重
    • 同义词改写
  • 相关性匹配
    • 关键词相关度
    • 类目相关度
    • 实体相关度
    • 语义相关度
  • 文档分析
    • 分词
    • NER
    • 向量化
    • 聚类
    • 摘要