4.6 KiB
口腔预约小程序前沿设计重做依据
版本：v0.2
日期：2026-06-28
1. 这次不再继续做“多版换皮”
上一轮的问题不是颜色不够好，而是结构仍然像常见 AI 拼板：手机壳、卡片、圆角按钮、几组时间块并排。它能表达功能，但没有独特的产品语言，也没有让用户产生“这是一个值得信任的口腔护理预约体验”的感受。
最新重做采用一个更直接的强概念：Smile First 高级预约体验。
用户先被一个自信、健康的笑容建立情绪信任，点击 立即预约 后完成手机号授权，再通过“步骤 1/3、2/3、3/3”降低心理负担。页面从“授权手机号”到“选择项目”再到“选择日期与确认”，每一步只要求用户完成一个清楚动作。
2. 互联网参考结论
2.1 微信小程序设计原则
参考：微信小程序设计规范镜像页面
https://sec-cdn.static.xiaomi.net/secStatic/groups/miui-sec/mukuashi/miui-wxopen-smcode/design/
可落地原则：
- 每个页面只保留一个明确重点。
- 减少与用户目标无关的视觉元素。
- 权限请求要尊重用户知情权与操作权。
- 小程序应轻快，路径要短，用户进入页面后要迅速知道下一步。
对本项目的转化：
- 首页重点不再是品牌大海报，而是“用笑容建立信任，然后点击立即预约授权手机号”。
- 预约页重点不再是项目卡片堆叠，而是“步骤提示 + 日期路径”。
- 手机号授权不在页面曝光时打断用户，而是在用户主动点击
立即预约时承接预约意图。
2.2 表单与转化流程
参考：NN/g 表单可用性建议
https://www.nngroup.com/articles/web-form-design/
参考：Baymard Checkout UX 与减少表单字段
https://baymard.com/blog/current-state-of-checkout-ux
https://baymard.com/blog/checkout-flow-average-form-fields
可落地原则：
- 表单要短，尽量只询问完成任务必需的信息。
- 相关字段要视觉分组。
- 移动端优先单列推进，不打断垂直阅读和操作节奏。
- 账户创建或登录应延后到真正需要的节点。
对本项目的转化：
- 用户只需要选择：项目、日期时段。
- 备注默认不出现，作为确认页轻入口。
- 手机号授权前置到首页预约入口，授权成功后才进入项目选择。
- 确认页只保留项目、时间、已授权手机号和“确认预约”按钮，让用户自然核对。
2.3 前沿视觉语言
参考：Material 3 Expressive
https://m3.material.io/
https://m3.material.io/blog/building-with-m3-expressive
参考：Google Design 关于 expressive design 的说明
https://design.google/library/expressive-material-design-google-research
参考：Apple Human Interface Guidelines / Liquid Glass 材质方向
https://developer.apple.com/design/human-interface-guidelines/materials
https://developer.apple.com/documentation/technologyoverviews/liquid-glass
可落地原则：
- 前沿不是“更多渐变”，而是用色彩、形状、尺寸、动效和容器关系帮助用户更快理解界面。
- 材质感应服务于层级，不是到处玻璃拟态。
- Expressive UI 要帮助用户达成目标，而不是只制造视觉噪音。
对本项目的转化：
- 使用“暖象牙 + 深墨绿 + 松石绿 + 雾蓝灰 + 陶土红”的品牌色，不使用常见蓝绿渐变。
- 用“笑容背景、步骤提示、统一下一步按钮”做记忆点。
- 只在关键操作区使用材质层：背景图、已选状态、确认动作。
- 按钮统一为“下一步”，降低判断成本。
3. 新设计原则
3.1 结构
- 首页：让用户先感受到自信笑容，再点击
立即预约完成手机号授权。 - 选时间：以日期路径为主轴，不让用户在卡片之间找时段。
- 确认预约：核对项目、时间和已授权手机号，直接提交预约。
3.2 视觉
- 背景像牙瓷釉面，不用纯白；加入雾蓝灰和暖象牙，避免单一绿色。
- 深墨绿承担品牌与主文字。
- 松石绿承担主操作，陶土红只用于步骤标记。
- 用真实笑容图、轻材质层、低对比边线构成层次。
3.3 文案
- 少解释功能，多告诉用户当前能做什么。
- 避免医疗诊断、治疗承诺、焦虑营销。
- 手机号用途写清楚：预约确认与到店提醒。
4. 产物
- 当前产品与交互设计：
docs/product-design.md - 五页交互流程文档：
docs/smile-first-5-page-interaction-flow.md - 当前五页视觉稿：
mockups/exports/smile-first-ai-visual-board-5-pages.png