1
按品类的独立站视觉方案
📱 1.1 3C电子品类 —— 科技感视觉
🎯 视觉要点
- 深色背景（深空灰/电光蓝）+ 发光科技元素，营造未来感
- 产品细节多角度展示（正面/侧面/背面/接口特写）
- 对比图突出参数优势（尺寸/厚度/性能数据可视化）
- 动态光影效果增强产品质感
| 素材类型 | Freepik推荐关键词 | 适用场景 | 规格建议 |
|---|---|---|---|
| 科技矢量背景 | "tech background geometric neon blue" "futuristic abstract vector" | 首页Hero区、产品列表背景 | 1920×1080px 矢量SVG |
| 产品精修PSD | "smartphone mockup psd" "gadget display podium" | 产品主图、详情页首图 | 2048×2048px PSD分层 |
| AI生成场景图 | "Dark tech studio with neon lights, smartphone on display, blue and black theme, 8k" | Banner、社交媒体配图 | 1920×1080px / 1080×1080px |
| 图标/数据元素 | "technology icon set line style" "data dashboard ui" | 功能对比表、参数列表 | SVG 24×24px / 48×48px |
🎨 配色方案
深空 #1a1a2e
电光蓝 #0984e3
纯白 #ffffff
科技青 #00cec9
品牌粉 #E71D73
🤖 AI Prompt示例
"Wireless earphones charging case on dark tech podium, blue neon edge lighting, geometric abstract background, product photography, 8k resolution, studio lighting, shallow depth of field"
参数：Model-Freepik | Ratio-1:1 | Style-Photorealistic
参数：Model-Freepik | Ratio-1:1 | Style-Photorealistic
👗 1.2 服装配饰品类 —— 时尚视觉
🎯 视觉要点
- 模特实拍图展示上身效果，注意姿势自然、光线柔和
- 平铺图（Flat Lay）展示产品全貌，适合多色/多款对比
- 细节特写图展示面料质感、走线工艺、五金配件
- Lookbook风格组图，讲求视觉叙事
| 素材类型 | Freepik推荐关键词 | 适用场景 | 规格建议 |
|---|---|---|---|
| 时尚模特图 | "fashion model portrait casual outfit" "model wearing white dress studio" | 产品页、集合页、首页Hero | 1080×1350px (3:4) |
| 平铺图模板 | "flat lay clothing mockup" "fashion accessories top view" | 产品列表、多色展示 | 1200×1200px 俯拍 |
| 细节特写图 | "fabric texture close up macro" "embroidery detail fashion" | 详情页材质展示 | 800×800px 微距 |
| Lookbook PSD | "fashion catalog psd template" "lookbook layout magazine" | 品牌故事页、集合页 | A4 / 1920×1080px |
🎨 配色方案
柔白 #fafafa
深灰 #2D3436
大地色 #d4a574
品牌粉 #E71D73
🤖 AI Prompt示例
"Young woman wearing elegant beige trench coat, standing against white minimalist studio background, soft natural window light, fashion photography, high quality, full body shot"
参数：Model-Freepik | Ratio-3:4 | Style-Photographic
参数：Model-Freepik | Ratio-3:4 | Style-Photographic
🏠 1.3 家居用品品类 —— 生活方式视觉
🎯 视觉要点
- 场景图为主，将产品融入真实生活空间（客厅/卧室/厨房）
- 生活方式展示，强调使用场景和情感共鸣
- 自然光线 + 暖色调，营造温馨氛围
- 多角度场景：远景展示整体、中景展示搭配、特写展示细节
| 素材类型 | Freepik推荐关键词 | 适用场景 | 规格建议 |
|---|---|---|---|
| 家居场景实拍 | "cozy living room interior beige" "minimalist bedroom decoration" | 首页Hero、产品场景图 | 1920×1280px (3:2) |
| 扁平风矢量家具 | "furniture vector illustration flat design" "home decor icons set" | 分类图标、装饰元素 | SVG矢量可缩放 |
| AI生成室内背景 | "Scandinavian living room with white walls, wooden floor, green plants, natural light, wide angle" | Banner背景、社交媒体图 | 1920×1080px |
| 产品场景组合图 | "home decor accessories on wooden table" "ceramic vase still life" | 产品详情页、集合页 | 1200×1200px |
🎨 配色方案
暖米 #f5e6d3
橄榄绿 #6b8e5a
木色 #c4a882
纯白 #ffffff
暖橙 #FF6B35
🤖 AI Prompt示例
"Modern living room interior with beige sofa, wooden coffee table, green potted plants, soft warm lighting from windows, Scandinavian minimal style, 8k"
参数：Model-Freepik | Ratio-16:9 | Style-Photorealistic
参数：Model-Freepik | Ratio-16:9 | Style-Photorealistic
💄 1.4 美妆个护品类 —— 精致氛围视觉
🎯 视觉要点
- 效果对比图（Before/After）展示产品功效，增强说服力
- 教程步骤图（Step-by-Step）用于详情页和使用指南
- 氛围感场景：融于光影、花卉、大理石纹等精致背景
- 高级感色调：玫瑰粉、金色、柔白为主
| 素材类型 | Freepik推荐关键词 | 适用场景 | 规格建议 |
|---|---|---|---|
| 美妆产品精修图 | "cosmetic product photography studio" "perfume bottle on marble" | 产品主图、详情页首图 | 1200×1200px |
| 渐变矢量背景 | "pink rose gold gradient background" "pastel gradient abstract" | Banner、产品列表背景 | 1920×1080px 矢量 |
| 教程模板 | "beauty skincare routine steps" "makeup tutorial template" | 详情页、博客页 | 800×800px (组图) |
| AI生成美妆场景 | "Elegant skincare product display, pink and gold theme, marble surface, rose flowers, soft studio lighting, luxury feel" | 品牌页、Hero区 | 1920×1080px |
🎨 配色方案
玫瑰粉 #E71D73
金色 #d4af37
柔白 #fdf5f5
淡粉 #f8e8e8
🤖 AI Prompt示例
"Luxury skincare bottle on rose quartz surface, pink rose petals scattered, soft golden hour lighting, elegant and clean, cosmetic product photography, 8k"
参数：Model-Freepik | Ratio-1:1 | Style-Photorealistic
参数：Model-Freepik | Ratio-1:1 | Style-Photorealistic
🍔 1.5 食品饮料品类 —— 美食诱人视觉
🎯 视觉要点
- 美食摄影突出色泽和质感，激发食欲（可用暖色调+自然光）
- 原料展示图增加产品信任感，强调天然/健康
- 包装图展示正面/侧面/背面的完整信息
- 使用场景图（如：早餐桌、野餐、聚会）营造生活氛围
| 素材类型 | Freepik推荐关键词 | 适用场景 | 规格建议 |
|---|---|---|---|
| 食品实拍图 | "delicious food photography top view" "burger fresh ingredients studio" | 产品主图、Banner | 1200×1200px 俯拍/45° |
| 手绘矢量食材 | "food ingredients vector hand drawn" "organic food doodle set" | 装饰元素、信息图 | SVG矢量可缩放 |
| 包装PSD模板 | "food packaging mockup psd" "bottle label design template" | 产品详情页、品牌页 | 1200×1200px PSD |
| AI生成食物场景 | "Fresh salad bowl on rustic wooden table, bright natural lighting from window, fresh green vegetables, appetizing, shallow depth of field" | 首页Hero、博客配图 | 1920×1080px |
🎨 配色方案
暖橙 #FF6B35
亮红 #e74c3c
清新绿 #27ae60
奶油白 #fef9e7
木色 #8b4513
🤖 AI Prompt示例
"Artisanal dark chocolate pieces on marble board, cocoa powder sprinkled, warm golden lighting, food photography, macro details, rich colors, 8k"
参数：Model-Freepik | Ratio-4:3 | Style-Photorealistic
参数：Model-Freepik | Ratio-4:3 | Style-Photorealistic
2
按页面的设计方案
| 页面类型 | 设计目标 | Freepik素材类型 | 布局建议 | 尺寸规格 |
|---|---|---|---|---|
| 🏠 Home Page 首页 |
3秒内传达品牌定位、引导用户浏览核心品类、促进首屏点击 |
· 全屏Hero场景图 (AI生成/实拍) · 品牌Logo矢量模板 · 品类图标SVG套装 · 促销Banner PSD模板 |
1️⃣ Hero区：全幅大图+品牌标语+CTA 2️⃣ 品类导航：图标+文字网格 3️⃣ 精选产品：大图轮播/瀑布流 4️⃣ 信任信号：品牌合作LOGO+评价 5️⃣ 底部：Newsletter订阅+Footer |
Hero背景：1920×1080px 产品网格图：600×600px Banner：1200×600px 移动端适配：750×1334px |
| 📦 Product Page 产品页 |
清晰展示产品细节、消除购买疑虑、促成立即购买 |
· 产品精修PSD模板 · 场景图/模特图 · 细节特写素材 · 信息图表模板 |
1️⃣ 主图区：可切换大图+缩略图 2️⃣ 产品信息：标题/价格/规格表格 3️⃣ 详情描述：图文混排+参数表 4️⃣ 信任元素：评价/认证/物流说明 5️⃣ 搭配推荐：关联产品卡片 |
主图：2048×2048px (1:1) 细节图：800×800px 场景图：1200×1200px 缩略图：150×150px |
| 📂 Collection Page 集合页 |
快速引导用户找到目标产品、促进品类浏览深度 |
· 品类Hero横幅 · 产品网格缩略图 · 分类标签图标 · 筛选控件UI素材 |
1️⃣ 集合Banner：品类名+描述+背景图 2️⃣ 筛选栏：价格/颜色/尺寸/排序 3️⃣ 产品网格：2-4列+悬停效果 4️⃣ 分页/无限加载 5️⃣ 侧边栏：热门品类导航 |
Banner：1920×400px 产品缩略图：400×400px 筛选栏：全宽40px高 标签图标：48×48px SVG |
| 🏷️ About Us 品牌页 |
传递品牌故事、建立情感连接、提升品牌信任度 |
· 团队/办公实拍照片 · 品牌时间轴矢量模板 · 品牌价值观图标 · 品牌宣传视频封面图 |
1️⃣ 品牌故事区：图文叙事+时间轴 2️⃣ 团队展示：成员卡片+简介 3️⃣ 品牌承诺：图标+说明列表 4️⃣ 数据展示：里程碑数字 5️⃣ 联系/Call to Action |
品牌大图：1920×600px 团队头像：300×300px 时间轴图标：64×64px 数据展示：200×120px卡片 |
| 📝 Blog Page 博客页 |
提供有价值的内容、提升SEO排名、延长用户停留时长 |
· 博客头图AI生成 · 信息图/数据可视化 · 文章内插图素材 · 作者头像/签名矢量 |
1️⃣ 博客列表：卡片式+分类标签 2️⃣ 文章详情：大图+正文+侧边栏 3️⃣ 目录导航：锚点快速跳转 4️⃣ 相关推荐：智能推荐组件 5️⃣ 评论/分享区 |
列表缩略图：600×400px 文章头图：1200×630px 内文插图：800×600px 信息图：1200×2000px |
💡 设计要点提示
- 首页Hero区的首屏加载时间控制在2秒以内，图片使用WebP格式+懒加载
- 产品页的主图支持放大查看细节（建议配备2x高清图），数量6-8张为宜
- 集合页筛选器保持触控友好，筛选项间距≥12px，标签尺寸≥44pt
- 品牌页时间轴建议5-8个关键节点，每个节点配图增强视觉记忆
- 博客页统一封面图比例（建议1200×630px），标题字体≥20px增强可读性
3
各平台图片规格适配
🛒 Shopify 图片尺寸规范表
| 图片类型 | 推荐尺寸 (px) | 宽高比 | 文件大小限制 | 格式推荐 |
|---|---|---|---|---|
| 产品主图 | 2048 × 2048 | 1:1 (正方形) | ≤ 5MB | WebP / JPEG |
| 产品详情图 | 1200 × 1200 | 1:1 / 4:3 | ≤ 3MB | WebP / JPEG |
| 集合头图 | 1920 × 480 | 4:1 | ≤ 2MB | WebP |
| 博客封面图 | 1200 × 630 | 1.9:1 | ≤ 2MB | WebP / JPEG |
| Logo | 400 × 200 | 2:1 | ≤ 500KB | SVG / PNG |
| Favicon | 32 × 32 / 512 × 512 | 1:1 | ≤ 100KB | ICO / PNG |
🔧 WooCommerce 图片尺寸规范表
| 图片类型 | 推荐尺寸 (px) | 宽高比 | 说明 | 格式推荐 |
|---|---|---|---|---|
| 产品主图 | 600 × 600 ~ 1200 × 1200 | 1:1 | WooCommerce默认缩放基准 | WebP / JPEG |
| 产品缩略图 | 300 × 300 | 1:1 | 产品列表/分类页显示 | WebP |
| 产品图册 | 800 × 800 ~ 1920 × 1920 | 1:1 / 自由比例 | 支持Lightbox放大查看 | JPEG / WebP |
| 分类头图 | 1920 × 400 | 4.8:1 | SEO友好、页面头部展示 | WebP |
| 品牌Logo | 200 × 100 ~ 400 × 200 | 2:1 | Header区域展示 | SVG (推荐) / PNG |
📌 WooCommerce图片优化建议
- WordPress后台设置-媒体中统一设置缩略图尺寸，建议300×300 / 600×600 / 1200×1200三档
- 使用插件如Smush/Imagify自动压缩WebP格式，保持图片质量85%以上
- 产品主图建议使用1200×1200px，兼顾清晰度与加载速度
- 过大的原图（＞1920px）建议上传前缩放，避免WooCommerce服务器端压缩失真
📱 社交媒体多平台适配表
| 平台 | 图片类型 | 推荐尺寸 (px) | 宽高比 | 设计要点 |
|---|---|---|---|---|
| Feed帖文图 | 1200 × 630 | 1.91:1 | 文字区域居左或居中，不超过图片20% | |
| 主页头像 | 320 × 320 | 1:1 | 品牌Logo，建议不添加额外文字 | |
| 故事/Reels | 1080 × 1920 | 9:16 | 竖屏全屏，顶部留白避免被系统UI遮挡 | |
| 方形帖文 | 1080 × 1080 | 1:1 | 产品居中展示，使用Freepik高质感背景 | |
| 横向帖文 | 1080 × 566 | 1.91:1 | 适合场景图/Banner风格 | |
| Stories/Reels | 1080 × 1920 | 9:16 | 模板化设计，使用Freepik故事模板快速产出 | |
| 🐦 X (Twitter) | 帖文图片 | 1200 × 675 | 16:9 | 文字简短醒目，搭配Freepik矢量图标 |
| 头像 | 400 × 400 | 1:1 | 简洁Logo，圆形裁剪后内容完整 | |
| Pin图 | 1000 × 1500 | 2:3 | 竖版长图最佳，超长图表现好，添加文字叠加 | |
| 产品Pin | 1000 × 1000 | 1:1 | 白底或场景图，价格标签清晰 | |
| 🎵 TikTok | 视频封面 | 1080 × 1920 | 9:16 | 竖屏全屏，使用Freepik AI生成吸睛封面 |
| 广告素材 | 1080 × 1920 | 9:16 | 前3秒黄金法则：高对比+动态元素 |
4
季节性视觉方案
🌸 四季主题色板
| 季节 | 色板 | Freepik搜索关键词 | 独立站应用建议 |
|---|---|---|---|
| 🌸 春季 |
#f0d4e0
#a8d8b9
#ffeaa7
#dfe6e9
|
"spring pastel background floral" "cherry blossom sakura vector" | 春季上新Banner、首页换季装饰、花卉主题产品展示 |
| ☀️ 夏季 |
#fdcb6e
#00b894
#74b9ff
#ffffff
|
"summer tropical beach background" "sunny bright lifestyle photo" | 夏季促销、海滩/户外场景图、清凉饮料/服饰主题 |
| 🍂 秋季 |
#e17055
#d4a574
#6c5b3e
#f5e6d3
|
"autumn fall leaves background" "cozy fall harvest photo" | 秋冬上新Banner、感恩节主题、暖色调家居氛围 |
| ❄️ 冬季 |
#dfe6e9
#0984e3
#2d3436
#ffffff
|
"winter snowflake background vector" "christmas winter wonderland" | 圣诞/新年活动页、冰雪主题装饰、冬季服饰场景 |
🎄 主要节日视觉方案
| 节日 | 核心色调 | Freepik素材方向 | Banner设计要素 | 准备时间建议 |
|---|---|---|---|---|
| 🎄 圣诞节 | 红 #e74c3c + 绿 #2ecc71 + 金 #d4af37 + 白 | "christmas sale banner psd" "xmas decoration vector" | 圣诞树装饰、雪花元素、礼物盒、节日字标 | 提前30天准备 |
| 🖤 黑五/网一 | 黑 #1a1a1a + 黄 #f1c40f + 红 #e74c3c | "black friday sale template" "cyber monday banner" | 大字报风格、折扣数字放大、倒计时元素、光效背景 | 提前45天准备 |
| 🎊 新年 | 金 #d4af37 + 红 #e74c3c + 深蓝 #1a1a2e | "new year 2025 banner" "chinese new year red gold" | 烟花/礼花元素、年份数字、灯笼/中国结、祝福语 | 提前30天准备 |
| 💝 情人节 | 粉 #E71D73 + 红 #e74c3c + 白 + 金 | "valentine sale background" "love romantic vector" | 心形元素、玫瑰花、情侣插画、浪漫渐变背景 | 提前20天准备 |
| 🎃 万圣节 | 橙 #FF6B35 + 紫 #6c5ce7 + 黑 #1a1a1a | "halloween sale banner" "spooky background vector" | 南瓜灯、鬼怪元素、神秘光影、橙色紫色渐变 | 提前20天准备 |
📢 促销Banner设计模板方案
| 模板类型 | 尺寸 (px) | Freepik搜索关键词 | 内容结构建议 |
|---|---|---|---|
| 首页大Banner | 1920 × 600 | "ecommerce banner sale web" "shop header psd template" | 左侧主标题(品牌名/活动名)+中间产品图+右侧CTA按钮 |
| 促销弹窗 | 600 × 400 | "popup sale modal template" "discount offer card" | 顶部折扣数字(醒目)+产品小图+邮箱输入框+关闭按钮 |
| 社交媒体横幅 | 1200 × 628 | "social media promotion post" "instagram sale template" | 品牌Logo左上+中间产品图+底部折扣码+CTA |
| 邮件Banner | 600 × 300 | "email newsletter banner" "marketing email header" | 简洁文字+产品展示+CTA按钮，适配移动端预览 |
| 限时秒杀 | 1200 × 300 | "flash sale countdown banner" "limited time offer header" | 倒计时组件+折扣力度+进度条+紧迫感文案 |
📅 季节性视觉规划节奏
- 提前45天：规划节日视觉方案，创建Freepik Collection收藏夹分类管理
- 提前30天：用Freepik AI生成核心素材，批量下载高清/矢量版本
- 提前15天：完成Banner设计和页面布局，A/B测试不同视觉方案的点击率
- 上线前7天：所有素材统一调色（使用Freepik在线编辑器批量处理）
- 节日结束后：复盘数据，优化下一轮视觉方案，归档可复用素材
5
多站点视觉统一方案
📋 品牌视觉规范文档模板
| 规范模块 | 内容要素 | Freepik工具支持 | 输出格式 |
|---|---|---|---|
| Logo使用规范 | 主Logo/变体/icon、最小尺寸限制、安全间距、禁用示例 | Freepik Logo Templates生成矢量Logo | SVG源文件 + PDF规范说明 |
| 色彩系统 | 主色/辅色/中性色色值(HEX/RGB/CMYK)、使用比例、渐变规范 | Freepik Color Palette Generator创建色板 | ASE色板文件 + 色值表PDF |
| 字体系统 | 中英文字体组合、层级规范(H1-H6)、行高/字重/字间距 | Freepik Font Combination工具搭配字体 | 字体列表 + Webfont CSS代码 |
| 图库风格 | 图片风格参数（光照/色调/构图）、滤镜预设、禁止风格 | Freepik AI统一生图参数模板 | AI Prompt模板 + Lightroom预设 |
| 图标系统 | 图标风格（线性/面性/扁平）、尺寸网格、使用场景 | Freepik Icon Set下载统一风格图标 | SVG图标库 + Figma组件库 |
| 间距网格 | 4pt/8pt网格基础、模块间距、内边距、触摸目标≥44pt | Freepik UI Kits参考布局规范 | Figma/Sketch设计规范文件 |
🌐 多语言站点图片适配方法
| 适配方法 | 操作步骤 | Freepik工具支持 | 注意事项 |
|---|---|---|---|
| 文字分离法 | 将图片中的文字层独立于背景层，替换文字内容即可适配不同语言 | Freepik PSD模板的图层分组功能，文字层独立命名 | 设计之初即按多语言布局预留文字空间，避免文字溢出 |
| 模板复用 | 同一套视觉模板替换文案+产品图，保持布局和风格一致 | Freepik Collections管理多语言模板版本 | 注意不同语言的文字长度差异（德语比英语长30%） |
| AI生图参数统一 | 固定AI生图的风格关键词、模型、比例、光照参数 | Freepik AI保存Prompt模板，固定风格参数 | 不同站点使用相同Seed值确保视觉一致性 |
| 批处理调色 | 对所有站点的素材统一应用色彩滤镜/曲线预设 | Freepik在线编辑器的批量编辑功能 | 建立统一的Lightroom/Photoshop预设文件 |
♻️ 素材复用与批量处理方案
| 复用场景 | 复用的素材类型 | 批量处理方法 | 效果收益 |
|---|---|---|---|
| 多站点通用素材 | 品牌Logo SVG、图标套装、矢量装饰元素、背景纹理 | 统一存放在CDN，一次更新全站同步 | 减少重复设计，素材复用率提升60% |
| 产品图批量处理 | 产品白底图（Freepik AI抠图后统一背景） | Freepik Batch Edit批量替换背景/调色/添加水印 | 批量处理500张图仅需30分钟 |
| Banner模板库 | PSD分层Banner模板（替换文字/产品/二维码） | 建立尺寸规格矩阵，通过Smart Object快速替换 | 模板复用节省80%排版时间 |
| 社交媒体素材 | 产品场景图/模特图/信息图 | 按平台规格导出预设（1:1/9:16/1.91:1） | 一键多平台适配，降低运维成本 |
💎 最佳实践建议
- 使用Freepik的Collection功能建立"品牌素材库"分类，所有站点设计师共享访问
- AI生图时固定一组风格关键词（如"elegant, minimalist, studio lighting, 8k"），多站点保持统一
- 所有素材导出前使用Freepik在线编辑器统一加品牌水印/LOGO角标
- 建立色彩LUTs预设，所有素材批量应用统一调色，确保多站点品牌色一致
- 每月进行一次素材库清理，删除过时素材、更新季节性内容