首页整体重设计 — 设计文档

日期: 2026-08-08 范围: web/pages/index.vue 及其下 web/components/home/* 板块 + 5 语言 i18n 背景: 首页经多轮迭代已具备 3 大块内容,但被独立理念紫带、FAQ、第二下载带稀释成 6-7 段,重点散、App 价值没打动人、视觉精致度与工具/对比区说服力都不够(用户四项痛点全选)。本次做一次收敛式整体重设计。

目标

把首页从 6-7 段收敛为 3 个强块 + 2 个瘦身收尾,同时提升视觉精致度、强化 App 价值钩子,不牺牲理念表达与 GEO 资产(降级为服务性收尾,而非裸砍)。

采用方案 A:3 强块打头,理念融进 Hero 文案,FAQ 瘦身保留(保 FAQPage schema)。

最终首页结构(index.vue)

① Hero · App 主介绍        (奶油→紫渐变)
② 热门工具                 (奶油)
③ 如何选对健康 App          (奶油/白表)
──────── 瘦身收尾 ────────
   FAQ(手风琴,默认折叠,纯 GEO)
   下载带(紫渐变收尾)

移除: 独立 PhilosophySection 紫带(理念融进 Hero 信任行/文案)。组件文件保留在仓库无害,仅从 index.vue 摘除引用。

视觉节奏: Hero(奶油紫渐变)→ 工具(奶油)→ 对比(奶油/白表)→ FAQ(轻)→ 下载带(紫)→ footer。

设计语言(沿用现状,统一收口)

主色紫 #B27DFF / #7C3AED;奶油底 #FFFDF0/#FEFBF3;副标金 #916200。
卡片:白底、圆角 24px、柔和阴影、hover translateY(-6px)。
标题 900 粗;eyebrow 大写 + 字间距;区块头 = eyebrow + title + subtitle 居中。
分类色:P0 紫 / P2 绿 / P3 琥珀 / P4 蓝 / P5 红(与 /tools 一致)。
入场动画沿用挂载即显示的纯 CSS @keyframes + prefers-reduced-motion(不用 scroll 门控可见性——懒加载组件不可靠,见项目历史坑)。

逐块设计

① Hero · App 主介绍(重写 `app_intro/AppIntroCard.vue`)

布局:左文右图非对称(约 55/45)。取消"标题横跨顶部再分栏"的飘散重心。
左列:品牌 chip(icon+Moodji+tag)→ H1 价值钩子「看见你的每一小时。」→ 副标「身心电量 + 生活画布,把你一整天的状态变成看得见的画面。」→ 3 点 inline(⚡自动追踪 / ▦生活画布回顾 / ♥越处越懂你)→ 双 CTA(免费下载 primary / 了解 App→/app secondary)→ 信任行「无需打卡 · 无需记录 · 戴上表就好」。
右列:真机截图 moodji_home_energy.webp 放大当主角(~260px)+ 柔和紫光晕;右下角浮层小卡(生活画布缩略或 Watch 表盘,复用 sticknote 真机图)叠放制造层次,呼应"可视化"。
理念融入:信任行 = 原理念 b1(无需打卡戴着表就好)+ b2(关注每一小时)的浓缩;主副标已承载 b2/b3。不再单开紫带。
下载走 triggerDownload('home_hero');了解 App 走 localePath('/app/')。

② 热门工具(精修 `tools_hub/ToolsHubSection.vue`)

头部改桥接文案:eyebrow「免费 · 即时」+ 标题「先了解自己,从一个小工具开始」+ 副标保留工具权威(基于公开量表/研究,不是随便打分)。信任 chip(即时/无需注册/免费)保留头部。
精选 4 卡:加分类色顶部色条/描边增强辨识;desc 收紧一行半;hover 抬升保留。
5 分类 pill + 「探索全部 N 款 →」(动态计数)保留。
数据源不变:useToolsStore().getFeaturedTools() / getToolsByCategory / getDatas().length。

③ 如何选对健康 App(精修 `app_compare/AppCompareSection.vue`)

头部改选择框架:标题「4 类健康 App,你其实需要哪一种?」+ 副标点出记录型/手环型/系统型各解决一半,moodji 补上"自动看见状态"那半。
每行加维度小图标(记录方式/看状态/懂屏幕/时间粒度/给建议)提升可扫读。
moodji 列强化:列头加 ✓ 徽标 + 更强紫渐变;单元格短句让它一眼赢。
移动端:从整表右滑改为按维度堆叠对比卡(每维度一卡,4 列并排短标签),取消横滑。
保留红线:表下 note「品类通例非特指某产品」+ 进阶功能需会员;不说打卡/医学级/精准。CTA→/app。

收尾

FAQ(faq/HomeFaq.vue):保留手风琴 + FAQPage JSON-LD,视觉退到最后、默认全折叠。内容不变(hp_faq_q1..q5)。
下载带(cta/DownloadCta.vue):保留一个紫渐变收尾带,文案聚焦「让手表替你留意状态,你只管生活」+ 单下载按钮,与 Hero 不重复(Hero=看见,收尾=替你留意)。

i18n

新增/改动键随文案走,5 语言(zh/en/zh-TW/ja/ko)同步,用插入脚本避免整文件重排。
复用现有前缀 hp_app_* / hp_tools_* / hp_cmp_* / hp_faq_*;新增键沿用前缀。
移除独立理念带后 hp_phi_* 键保留无害(组件仍在,只是不挂首页)。

验收

DEFAULT_LOCALE=zh CDN_URL='' npm run build 通过、路由预渲染无错。
clean prod zh 首页整页截图确认:3 强块 + FAQ + 下载带渲染到位;无独立理念紫带;无空白 gap;移动端对比为堆叠卡不横滑。
4 个 JSON-LD(WebSite×2 历史/FAQPage)仍有效。

非目标(YAGNI)

不重构 /app 详情页(已定稿)。
不删除 PhilosophySection/LifeCanvas 组件文件(仅摘引用)。
不改工具数据模型、不动 /tools 库页、不碰导航结构。