类视搜图

简体中文

English

简体中文

English

主体识别页面图片素材清单 ​

📸 需要准备的图片 ​

1. hero-main.webp ​

位置：Hero区域（页面顶部主视觉）
尺寸建议：1200×800px
内容建议：

  • 展示主体识别效果的对比图
  • 左侧：带复杂背景的商品图（例如：红色背景的白色衣服）
  • 右侧：识别出的主体（背景已去除，只保留白色衣服）
  • 用箭头或对比方式展示转换过程
  • 可以添加标注文字："复杂背景" → "精准识别"

2. background-removal.webp ​

位置：价值点1 - 告别背景干扰
尺寸建议：800×600px
内容建议：

  • 展示同一商品在不同背景下的识别效果
  • 2-3张小图组合：
    • 白背景的衣服
    • 红背景的衣服
    • 户外背景的衣服
  • 用绿色勾号标注：三张都能识别为同一件商品
  • 突出"背景不影响识别"的概念

3. multi-subject.webp ​

位置：价值点2 - 一图多物，分别搜索
尺寸建议：800×600px
内容建议：

  • 一张完整的穿搭照或场景图
  • 用不同颜色的边框/标注框标识出：
    • 蓝色框：上衣
    • 绿色框：裤子
    • 红色框：鞋子
    • 黄色框：包包
  • 配文字标注："自动识别4个单品"
  • 展示"一图多主体"的核心能力

4. taobao-comparison.webp ​

位置：价值点3 - 对标拍立淘
尺寸建议：800×600px
内容建议：

  • 左右对比图设计
  • 左侧：
    • 拍立淘logo或图标
    • 云朵图标（代表在线）
    • 文字："搜淘宝商品库"
  • 右侧：
    • 类视搜图logo
    • 电脑图标（代表本地）
    • 文字："搜你的电脑"
    • 锁头图标（代表隐私安全）
  • 中间用"VS"或"="分隔

5. scenario-ecommerce.webp ​

位置：使用场景 - 电商运营
尺寸建议：600×400px
内容建议：

  • 电商工作场景
  • 电脑屏幕显示大量商品图片网格
  • 人物在电脑前工作（可以是剪影）
  • 体现"大量图片管理"的场景
  • 可添加商品数量标注："50000+ 商品"

6. scenario-designer.webp ​

位置：使用场景 - 服装设计师
尺寸建议：600×400px
内容建议：

  • 设计师工作台场景
  • 桌面上有服装设计草图、面料样品
  • 电脑屏幕显示服装设计软件
  • 温馨、专业的工作氛围
  • 可添加标注："15000+ 设计素材"

7. scenario-photographer.webp ​

位置：使用场景 - 摄影师
尺寸建议：600×400px
内容建议：

  • 摄影师在工作的场景
  • 相机、摄影器材
  • 电脑屏幕显示照片编辑软件
  • 展示商业摄影的专业感
  • 可添加标注："30000+ 商业作品"

8. before-after.webp ​

位置：效果对比区
尺寸建议：1200×600px
内容建议：

  • 分屏对比图（左右或上下分屏）
  • 左侧/上方："关闭主体识别"
    • 搜索结果混乱，有很多不相关的图片
    • 标注："❌ 准确率 60%"
  • 右侧/下方："开启主体识别"
    • 搜索结果精准，都是相似的商品
    • 标注："✅ 准确率 95%"
  • 用鲜明对比展示效果差异

🎨 图片制作建议 ​

  1. 统一风格：

    • 使用相同的色调和滤镜
    • 保持现代、简洁的设计风格
    • 避免过度复杂的元素

  2. 文字标注：

    • 字体清晰易读
    • 使用对比色确保可见性
    • 中英文都要考虑

  3. 图标使用：

    • 可以使用emoji或扁平化图标
    • 保持图标风格一致

  4. 颜色方案：

    • 主色：蓝色（#2196F3）- 科技感
    • 辅色：绿色（#4CAF50）- 成功/正确
    • 强调色：橙色/黄色 - 重点标注

  5. 格式要求：

    • 格式：WebP（高压缩比，保持质量）
    • 优化：压缩后尽量控制在100KB以内
    • 背景：深色或透明背景更配合页面设计

📁 文件夹结构 ​

public/picture/img/subject-recognition/
├── README.md (本文件)
├── hero-main.webp
├── background-removal.webp
├── multi-subject.webp
├── taobao-comparison.webp
├── scenario-ecommerce.webp
├── scenario-designer.webp
├── scenario-photographer.webp
└── before-after.webp

💡 快速制作技巧 ​

使用设计工具 ​

  • Figma：在线设计工具，适合创建对比图和标注
  • Canva：模板丰富，快速制作场景图
  • Photoshop：专业图片处理和合成

素材来源 ​

  • Unsplash：高质量免费图片（商业、设计、摄影场景）
  • Freepik：矢量图标和插画素材
  • Pexels：商业摄影、工作场景图片

在线工具 ​

  • Remove.bg：AI抠图，快速去除背景
  • TinyPNG/Squoosh：图片压缩优化
  • CloudConvert：格式转换（转WebP）

⚠️ 注意事项 ​

  1. 版权问题：确保使用的图片有商业使用权
  2. 品牌露出：避免出现其他品牌的logo（除非是对比需要）
  3. 真实性：场景图尽量真实，避免过度PS
  4. 一致性：所有图片的风格、色调保持一致
  5. 占位符：在图片未准备好前，页面已有占位符和说明文字，可以先上线测试布局