官方落地页图片设计
2026-07-30
落地页“图大于文”，用视觉冲击代替长篇大论，精简文案，把核心信息提炼成短句，并为每个板块预留了清晰的图片占位符。
源代码参考文件“content/zh/docs/landing-page.html”
只需要把设计好的图片替换掉 src 里的路径即可：
🖼️ 图片预留位置清单 #
设计时请重点准备以下 12 张图，放入外挂的图库（需替换以下默认的src路径），或存入Hugo 的 static/images/ 目录：
| 位置 | 文件名建议 | 设计方向建议 |
|---|---|---|
| 首屏主视觉 | detox-hero.jpg | 人物放下手机、走向自然/阅读/专注工作的场景，色调清新治愈 |
| 心理依赖图标 | icon-psych.png | 焦虑/空虚情绪插画，圆形图标风格 |
| 行为失控图标 | icon-behavior.png | 深夜刷手机/时间流逝插画 |
| 专注力溃散图标 | icon-focus.png | 碎片化/多窗口切换插画 |
| 生理受损图标 | icon-body.png | 颈椎/眼睛/睡眠受损插画 |
| 社交疏离图标 | icon-social.png | 聚餐低头/人际割裂插画 |
| 认知幻觉图标 | icon-cognitive.png | 虚拟vs现实对比插画 |
| 科学依据-大脑 | science-brain.jpg | 多巴胺/神经回路/大脑扫描科技感示意图 |
| 科学依据-悖论 | science-paradox.jpg | 科技精英/断联修行/对比概念图 |
| 产品-工具包 | product-toolkit.jpg | 手机灰度模式/专注APP界面截图或扁平概念图 |
| 产品-线上计划 | product-online.jpg | 21天打卡日历/社群互动场景图 |
| 产品-训练营 | product-camp.jpg | 森林/冥想/无网环境/自然疗愈实景或插画 |
💡 设计建议 #
- 统一色调：建议主色用
#00897b（治愈绿），背景用#fafafa（米白），避免高饱和刺眼色，契合“排毒”主题。 - 图标风格：6个症状图标建议用同一套线性或微立体插画，保持视觉统一。
- 首屏图：这是转化率的关键，建议用真人场景+留白，文字不要压在图片复杂区域。
- 图片格式：图标用
PNG（透明底），场景图用JPG或WebP（压缩到 200KB 以内，保证秒开）。
设计好图片后，只需替换代码里 src="/images/xxx.jpg" 的路径即可。