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