点击进入各方案(完整首页 + 文章页版式节选)
A 晨林
深墨绿大面积 + 思源宋体的编辑部气质。冷静、高级、大留白,与医疗系竞品反差最大,品牌感最强。
打开预览 →B 蓝图
纸白 + 雾蓝细线的结构化专业风。对比表、流程图、自查卡,"把复杂问题讲明白",最合高知理性家庭的胃口。
打开预览 →C 暖房
米白暖底 + 咨询室实景大图 + 霞鹜文楷。大圆角软阴影,评价引言式团队卡,推开门就有人给你倒了杯温水。
打开预览 →三套方案彼此独立、不分先后;选定主方案后,也可以把另外两套中喜欢的局部移植过来(例如对比表、流程图、评价卡都可跨方案复用)。
三方案差异对照
| A 晨林 | B 蓝图 | C 暖房 | |
|---|---|---|---|
| 气质来源 | 资深咨询师的书房:冷静、笃定 | 一份被认真整理过的解决方案 | 推开咨询室的门,有人倒了杯温水 |
| 色彩策略 | 深墨绿承载 hero/数据带/CTA(约 45% 表面),间以纸白 | 纸白为底,雾蓝+绿做结构线与面板 | 米白暖底,绿做锚点,暖橙适度增加 |
| 标题字体 | 思源宋体(衬线,编辑部) | 思源黑体重字重(单家族强对比) | 霞鹜文楷(温润人文) |
| 形状语言 | 8px 圆角 + logo 弧线母题 | 4px + 1px 细线 + 表格/图示 | 20px 大圆角 + 软阴影 + 圆形元素 |
| 图片处理 | 原色实景,克制出现 | 小图规整出现,图示优先 | 咨询室实景大图为主视觉 |
| 标志性组件 | 有机弧线分割、衬线数据带 | 三方对比表、两分钟自查卡、流程 stepper、价格表 | 悬浮 hero 卡、评价引言式团队卡 |
| 需要留意 | 深色大面积是否偏"沉" | 是否不够"温暖" | 是否不够"高端极简" |
共享设计系统(三方案同源)
墨绿 900 · #1E3A31
主品牌绿 700 · #2E5E4E
绿 500 · #457C68
雾蓝 400 · #8FAECB
雾蓝 100 · #E3EBF2
米白 · #F8F5EF
暖橙 · #D97B4A(<8%)
正文墨 · #26312B
危机提示琥珀(非警报红)
- 正文统一:思源黑体系统栈,桌面 18px / 移动 17px,行高 1.8,段落宽 ≤36em,正文对比度均 ≥4.5:1(深夜哭过的眼睛也读得动)。
- 合规内建:全站不承诺疗效;价格只出现首次 498/699;危机提示条(12355 / 上海 021-51699291)为固定组件;无粉色、无医院蓝白、无证书墙。
- 完整规格:见 docs/03-设计系统.md 与 previews/shared/tokens.css;信息架构见 docs/02;GEO 实施清单见 docs/04。
查看须知
- previews 文件夹完全自包含、可离线查看:照片、logo、头像、字体(思源黑体/思源宋体/霞鹜文楷按用字子集化,共约 0.8MB)全部在 previews/assets/ 内,整个文件夹打包发送即可,无需联网。
- 响应式:三套均适配手机(375px)/平板(768px)/桌面(1440px),手机端有折叠导航。
- 预览中的咨询师信息与评价提取自机构提供的海报资料并已做匿名化处理,正式上线前需逐位确认展示授权(见 docs/05 补充清单)。