你çnepiedg
cf62ed1a3f
- Improved onboarding flow by adding user guidance for mode selection - Updated homepage behavior to better reflect user preferences - Refined UI elements for a more intuitive navigation experience
3.4 KiB
3.4 KiB
戒烟助手 Pro - 高级UI设计
🎨 设计理念
这是一个采用苹果设计语言的高级UI版本，具有以下特点：
核心设计元素
- 深色主题 - 纯黑背景 (#000) 营造高端感
- 毛玻璃效果 - backdrop-filter 实现iOS风格的半透明效果
- 精致阴影 - 多层阴影和发光效果
- 流畅动画 - cubic-bezier 缓动函数
- 渐变色彩 - 高品质的渐变背景和文字
- 圆角设计 - 大圆角 (16-24px) 更现代
配色方案
主色调：
- 翡翠绿渐变:
#00D4AA → #00B894 - 荧光绿:
#00F5D4(强调色)
辅助色：
- 靛蓝:
#4F46E5 → #6366F1 - 琥珀:
#FBBF24 → #F59E0B - 红色:
#FF6B6B → #EE5A6F
背景：
- 纯黑:
#000 - 深灰:
#0a0a0a - 半透明白:
rgba(255,255,255,0.05-0.15)
💎 高级特性
1. 毛玻璃导航栏
backdrop-filter: blur(40px) saturate(180%);
background: rgba(28, 28, 30, 0.8);
2. 高级卡片
- 半透明背景
- 双层边框（外边框 + 内发光）
- 多层阴影
- 点击缩放反馈
3. 渐变文字
background: linear-gradient(135deg, #00D4AA 0%, #00F5D4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
4. 背景装饰
- 模糊的径向渐变光晕
- 动态定位营造空间感
5. 按钮交互
- 悬停光扫效果
- 点击缩放反馈
- 发光阴影
📱 页面特色
模式选择页
- 大尺寸emoji图标
- 背景光晕装饰
- 标签式特性展示
首页（戒烟打卡）
- 72px超大数字显示
- 渐变文字效果
- 分栏统计数据
首页（记录减量）
- 等宽字体计时器
- 双色统计卡片
- 双按钮布局
统计页
- 渐变柱状图
- 发光效果
- 网格布局成就卡
AI助手页
- 进度条发光效果
- 任务完成状态
- 左边框强调
记录页
- 彩色左边框
- 半透明按钮
- 时间轴布局
个人中心
- 大头像设计
- 清晰的菜单层级
- 右箭头导航
🎯 与普通版对比
| 特性 | 普通版 | 高级版 |
|---|---|---|
| 背景 | 浅色渐变 | 纯黑 + 光晕 |
| 卡片 | 白色实心 | 毛玻璃半透明 |
| 阴影 | 简单阴影 | 多层阴影 + 发光 |
| 字体 | 常规粗细 | 更粗 (700-800) |
| 圆角 | 12px | 16-24px |
| 动画 | 简单过渡 | cubic-bezier |
| 配色 | 明亮 | 深色 + 霓虹 |
💰 高级感体现
- 视觉层次 - 多层次的透明度和阴影
- 精致细节 - 字间距、行高、边框精心调整
- 流畅动画 - 所有交互都有平滑过渡
- 专业配色 - 深色主题 + 霓虹强调色
- 空间感 - 背景光晕营造深度
- 品质感 - 毛玻璃、发光、渐变等高级效果
🚀 技术实现
关键CSS技术
backdrop-filter- 毛玻璃效果filter: blur()- 背景光晕box-shadow- 多层阴影linear-gradient- 渐变背景cubic-bezier- 自定义缓动-webkit-background-clip- 渐变文字
性能优化
- 使用
transform而非position做动画 - 合理使用
will-change - 避免过度使用
backdrop-filter
📝 使用说明
直接在浏览器中打开 ui-premium.html 即可查看效果。
建议使用：
- Chrome/Safari (完整支持 backdrop-filter)
- 移动设备或开发者工具的移动模式
- 最大宽度 390px (iPhone 14 Pro)
🎨 设计灵感来源
- Apple iOS 设计语言
- Apple Watch 健康应用
- 高端订阅类产品 (Calm, Headspace)
- 现代深色主题设计趋势