2.4 KiB
2.4 KiB
Smile First 设计元素提取清单
来源:docs/smile-first-ai-visual-board-5-pages.png
尺寸:1692 x 929
视觉原则
- 首页删除视觉稿里的底部 tabBar,只保留内容区入口与主按钮。
- 首页
立即预约先触发手机号授权检查,授权成功后进入项目选择;确认预约页只展示已授权手机号。 - 页面文案保持口腔护理预约叙事,不使用诊疗、问诊、疗效承诺类表达。
色彩 token
| 用途 | 色值 |
|---|---|
| 页面背景 | #F7F2EA |
| 表面色 | #FFFDF8 |
| 主文字 | #12201E |
| 品牌色 | #153D37 |
| 主操作 | #0F6F63 |
| 辅助薄荷 | #BFE7DE |
| 雾蓝灰 | #DDE9EC |
| 暖强调 | #AA573E |
| 次文字 | #5A706B |
| 分割线 | #D9E5DF |
已裁切资产
| 资产 | 输出路径 | 裁切坐标 |
|---|---|---|
| 首页参考屏 | miniapp/assets/reference/home-screen.png |
(55, 245, 333, 835) |
| 项目页参考屏 | miniapp/assets/reference/projects-screen.png |
(379, 245, 653, 835) |
| 日期时间参考屏 | miniapp/assets/reference/schedule-screen.png |
(704, 245, 979, 835) |
| 确认预约参考屏 | miniapp/assets/reference/confirm-screen.png |
(1030, 245, 1305, 835) |
| 成功页参考屏 | miniapp/assets/reference/success-screen.png |
(1356, 245, 1630, 835) |
| 首页笑容主图 | miniapp/assets/extracted/home-hero-smile.png |
(56, 309, 332, 562) |
| 成功勾选图标 | miniapp/assets/extracted/success-check.png |
(1430, 322, 1530, 402) |
| 品牌印章 | miniapp/assets/extracted/brand-seal.png |
(1340, 55, 1438, 154) |
| 首页预约图标 | miniapp/assets/extracted/icon-calendar.png |
(112, 668, 146, 704) |
| 我的预约图标 | miniapp/assets/extracted/icon-booking-card.png |
(238, 668, 272, 704) |
| 底部叶片与瓷碗 | miniapp/assets/extracted/bottom-leaves-bowl.png |
(0, 836, 268, 929) |
| 右下织物材质 | miniapp/assets/extracted/bottom-right-fabric.png |
(1308, 802, 1692, 929) |
预览图:docs/extracted-assets-preview.png
小程序页面映射
| 视觉稿页面 | 实现路径 |
|---|---|
| 首页 | miniapp/pages/index/index |
| 选择项目 | miniapp/pages/projects/projects |
| 选择日期与时间 | miniapp/pages/schedule/schedule |
| 确认预约 | miniapp/pages/confirm/confirm |
| 预约成功 | miniapp/pages/success/success |
| 我的预约承接 | miniapp/pages/bookings/bookings |