# 口腔预约小程序前沿设计重做依据 版本：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`