风格样张 · 简约清新
按 2026-10-16 定的新方向做：只做一套风格，简约清新。原来的三套像素主题作废。
这一版是重新识别同类产品之后的重构，不是改配色。
重构依据：把参考的小程序界面逐张读了一遍（OCR），发现上一版漏了最核心的骨架。
读的是两个真实同类产品 ——
WeSportH（健身房私教预约）和 HomeAppt（家政预约），
都是"用户约一个服务者、按时间段上门服务"的模式，跟我们一模一样。
它们的底部导航都是「首页 / 预约日历 / 个人中心」——
日历是一级入口，不是藏在"详情 → 选日期"的流程里。
而且它们每天直接标"今天几个时段"、时段带"剩余名额"、
服务者是档案式介绍（属相 / 经验 / 籍贯 / 学历 / 证书证件），
履约靠扫码核销。
我上一版做的是通用的"电商卡片流 + 预约三步曲"，
把这类产品真正的骨架——「档期」——漏掉了。所以看着没特点。
这一版把它补上：② 档期日历、③ 当天档期盘、⑩ 我的档期、⑪ 扫码核销都是新增的。
这一版新加了风景图当钩子。旅行类产品本来就是「看图决定去哪」——
原来整页都是字，看着干净但不下单。现在把风景照放在三个位置：
首页最上面的大图（第一眼就想去）、玩法卡片（看图选玩法）、
新增的第 ⑥ 屏「本地玩法」图片流（用户不知道能玩什么时，先刷图）。
照片是生成的，不是图库扒的 —— 贴题（鼓浪屿、老城巷子、八市海鲜、骑楼街），
没有版权问题，也不用担心外链哪天失效。全部 base64 内嵌，页面离线也能看。
主色 #12B3A0点缀 #FF8A5C底色 #F5FAF9文字 #1F2D2A
十一个手机屏（用户端 8 + 向导端 3，★ 是这版新增/重做的）
9:41本地向导100%
① 首页大图钩子 / 玩法图卡 / 可约向导
9:41本地向导100%
点日期看当天档期 · 满 = 已约满
日
一
二
三
四
五
六
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
10 月 18 日 · 周六8 位向导在档期
档期实时同步：向导一接单，这里的余位立刻减一，不会超约。
② 档期★ 重构核心：月历提为一级入口，每天标档期松紧
9:41本地向导100%
上午 09:00-12:006 位可约
下午 14:00-17:005 位可约
傍晚 18:00-21:002 位可约
平台派单：提交需求后由平台分派，向导不能私下接单。
③ 当天档期盘★ 时段 × 向导 —— 这类产品真正的骨架
9:41本地向导100%
厦门这周最值得去的 12 个地方本地向导整理 · 每周更新
全部漫步美食拍照夜游
第一次来厦门？推荐
本地向导建议：上午鼓浪屿，下午老城巷子，傍晚海边看日落 —— 这条线一天走完不赶。
让本地人带我走这条线
④ 本地玩法图片流 —— 看图选玩法，最直接的钩子
9:41本地向导100%
小林 · 厦门本地 6 年带你看傍晚的海，和游客看不到的巷子
在厦门住了 6 年，走过岛上几乎每条巷子。不做千篇一律的打卡路线，会按你想吃的、想拍的来安排。
他能提供的服务
可约时间
今天 14:00今天 18:00明天 09:00
用户评价（128）
⑤ 向导档案档案式介绍 / 服务与价格
9:41本地向导100%
选择服务
选择日期
选择时段
14:0016:0018:0020:00
平台担保：费用先由平台保管，服务完成后结算给向导。期间向导看不到你的真实手机号。
⑥ 预约下单选时段（带余位）/ 平台担保说明
9:41本地向导100%
半日漫步 · 3 小时进行中
预计还剩
01:47:20
14:05 开始已过 40%17:05 结束
行程进度
服务项目半日漫步 · 3 小时
开始时间14:05
订单金额¥360.00
⑦ 行程中计时 / 进度 / 结束
9:41本地向导100%
⑧ 我的★ 订单分类 / 身份切换入口
9:41本地向导100%
平台派给你的单2 单待接
厦门 · 半日漫步 · 3 小时新派单
平台派单 · 到手¥360
接这一单
厦门 · 美食探店 · 3 小时派单
平台派单 · 到手¥300
接这一单
⑨ 向导工作台接单开关 / 平台派单
9:41本地向导100%
⑩ 我的档期★ 周 × 时段矩阵，自己开关档期
9:41本地向导100%
最近核销
王先生 · 半日漫步已核销
服务项目半日漫步 · 3 小时
客户王先生 · 2 人
时间今天 14:00-17:00
订单金额¥360.00
⑪ 扫码核销★ 履约闭环 —— 前两版都漏了这一环
后台（同一套配色）
● ● ●admin.example.com/dashboard
| 订单号 | 用户 | 向导 | 服务 | 金额 | 状态 |
|---|
| 20261016203001 | 王先生 | 小林 | 半日漫步 | ¥360 | 服务中 |
| 20261016190045 | 李女士 | 阿雅 | 美食探店 | ¥300 | 待服务 |
| 20261015184512 | 张先生 | 小林 | 拍照陪同 | ¥240 | 已完成 |
这一套风格定死了哪几件事
底色 浅薄荷白 #F5FAF9，卡片纯白，靠一层极淡的阴影分层，
不用描边堆砌
主色 清新青绿 #12B3A0（按钮用压暗版
#0D8577），只用在主按钮、选中态、关键数字上，不滥用
点缀 暖橙 #FF8A5C（价格文字用压暗版
#D13B00），让「多少钱」第一眼跳出来
圆角 卡片 14px、按钮全圆角，没有直角
字体 系统无衬线，不用像素字体 —— 像素风整套已经弃用
图标 线性图标（细描边），不用方块像素图标
留白 卡片间距 11px、内边距 14px，宁可留白也不塞满
对比度 所有「文字色 + 底色」组合都验过 ≥4.5，浅色只用于装饰、不用于文字
字号规范（全站只有 7 档）
之前在几十个构件里各写各的字号，攒出了 14 种（10.5 / 11 / 11.5 / 12 / 12.5 / 13.5 …），
相邻差 0.5px 肉眼根本分不出，纯粹是维护负担。现在收敛成 7 档，
并且最小一档是 12px —— 手机上比这更小就真的看不清了。
另一个改动：层次靠「字号 + 颜色」拉，不靠字重堆。
原因是 Windows 的雅黑只有 Regular / Bold 两档，500 / 600 会被算法合成加粗，
中文小字一合成笔画就粘连发虚 —— 甲方在电脑上看这个页面就是这个效果。
| 字号 / 档位 | 实际效果 |
|---|
| 12px 标签脚注 | 小林带你去鼓浪屿，全程 3 小时 ¥360 |
| 13px 次要文字 | 小林带你去鼓浪屿，全程 3 小时 ¥360 |
| 14px 正文 | 小林带你去鼓浪屿，全程 3 小时 ¥360 |
| 16px 区块标题 | 小林带你去鼓浪屿，全程 3 小时 ¥360 |
| 18px 卡片标题 | 小林带你去鼓浪屿，全程 3 小时 ¥360 |
| 22px 页面标题 | 小林带你去鼓浪屿，全程 3 小时 ¥360 |
| 30px 展示数字 | 小林带你去鼓浪屿，全程 3 小时 ¥360 |
数字对齐
价格、金额、后台统计、计时器全部改用等宽数字。
不然数字一变（¥359 → ¥360、00:59 → 01:00）整行宽度会跳一下，
用到「倒计时」的地方尤其明显。
主要文字用「艺术字」（三套，都守着简约清新）
只给主要文字用 —— 页面主标题、压在照片上的大字、关键数字。
正文一个字都不动，否则整页会花。
不用描边字：描边（-webkit-text-stroke）会在字形周围糊出一圈灰轮，
在浅色系里看着就是廉价的"贴纸描边"。压在照片上的字只加一层往下偏的柔和投影，
读得清靠的是按照片实测亮度算出来的保护纱。
渐变字写了降级：微信小程序的网页内核版本参差，
不支持「把背景裁进文字」这个特性时，文字会变成全透明直接看不见 ——
所以透明填充只在浏览器确认支持时才给，不支持就退回纯青绿。
① 渐变字 —— 页面主标题、关键数字
找个本地人带你玩
青绿 → 深青 → 暖橙，一处渐变。不支持时退回纯青绿。
② 投影浮起 —— 压在照片上的大字
鼓浪屿清晨，本地人带你走
只加一层往下偏的柔和投影，不加描边
不加描边：描边会在字形周围糊出一圈灰轮，在浅色系里读起来像廉价的"贴纸描边字"。
字读不读得清靠下面那层按照片实测亮度算出来的保护纱，不靠给每个字描边。
③ 轻下划线 —— 正文里的关键词
本地向导建议：上午 鼓浪屿，下午 老城巷子，
傍晚海边看日落 —— 这条线一天走完不赶。
风格变了，什么没变
换风格只动配色、圆角、阴影、字体、图标这五样。
页面的结构、信息顺序、按钮位置一个都没动 ——
所以前面确认过的骨架（首页 → 找向导 → 详情 → 预约 → 行程 → 订单 → 我的）
依然有效，不用重新讨论。