nepiedg
89 lines
5.9 KiB
Markdown
89 lines
5.9 KiB
Markdown
设计原则
|
||
整合四位专家的核心诉求：
|
||
|
||
冷静但不冷漠、有趣但不幼稚、净化而非刺激
|
||
|
||
最终界面布局（完整结构）
|
||
📐 整体高度：约手机一屏半，单页垂直流
|
||
【顶部区】个人状态栏（高度 30%）
|
||
*.txt
|
||
Plaintext
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ [头像] 意志骑士 Lv.3 💰 ×24 │ ← 毛玻璃背景
|
||
│ │ backdrop-blur: 12px
|
||
│ ╭─────────────────────────────────────────────╮ │
|
||
│ │ ████████████████░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ ← HP生命槽
|
||
│ │ HP: 72% 浊→清 视觉语言 │ │ 渐变填充 #6EE7B7→#67E8F9
|
||
│ ╰─────────────────────────────────────────────╯ │ 24px高，12px圆角
|
||
│ │
|
||
│ ✦ 深度含氧（已坚持 2 小时 17 分） │ ← Buff标签
|
||
│ [薰衣草紫边框] │ 胶囊形
|
||
└─────────────────────────────────────────────────────┘
|
||
设计决策说明：
|
||
|
||
保留游戏化元素（等级/称号），但降低视觉优先级——置于次要位置
|
||
采用色彩心理学专家的"浊清动效"替代碎裂动效，保护用户情绪
|
||
毛玻璃背景融合未来主义美学，但保持经典主义的秩序感
|
||
【中部区】核心控制台（高度 35%）
|
||
*.txt
|
||
Plaintext
|
||
【中下区】健康仪表盘（高度 20%）
|
||
*.txt
|
||
Plaintext
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ ╭─────────╮ ╭────────────────────────╮ │
|
||
│ │ ◐ │ │ 呼吸系统 +12% │ │
|
||
│ │ 84% │ │ 心脏功能 +8% │ │
|
||
│ │ 健康 │ │ 血液纯净 +15% │ │
|
||
│ ╰─────────╯ │ ──────────────────── │ │
|
||
│ 健康指数 │ +3.2 小时 │ │ ← 生命回收
|
||
│ (圆环图) │ 生命已回收 │ │ 强调色24px
|
||
│ ╰────────────────────────╯ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────┘
|
||
设计决策说明：
|
||
|
||
健康指数圆环图代替多个独立卡片，符合极简主义减法原则
|
||
生命回收概念来自未来主义，成为核心数据展示
|
||
【底部区】成长曲线（高度 15%）
|
||
*.txt
|
||
Plaintext
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ 7 天趋势 │
|
||
│ │ │
|
||
│ 5 ├ ● │ ← 琥珀金转折点
|
||
│ │ ●────────────╱ │
|
||
│ 3 ├──●────────────────╱ │
|
||
│ │╱ │
|
||
│ 0 └──┬────┬────┬────┬────┬────┬────┬────→ │
|
||
│ 周一 周二 周三 周四 周五 周六 周日 │
|
||
│ │
|
||
│ 背景：极淡青绿渐变 (#ECFDF5 → #F0F9FF) │
|
||
│ │
|
||
└─────────────────────────────────────────────────────┘
|
||
最终色板
|
||
用途 色值 来源 说明
|
||
HP高填充 #67E8F9 心理学专家调整 降低饱和度，更持久
|
||
HP低填充 #D97706 暗琥珀 心理学专家 警示非恐惧
|
||
主渐变起 #6EE7B7 心理学专家调整 生命力、成长
|
||
SOS/里程碑 #FBBF24 全场共识 温暖、成就
|
||
Buff标签 #A78BFA 薰衣草紫 心理学专家原创 成长、过渡
|
||
背景 #F8FAFC 微蓝白 经典主义 干净、呼吸感
|
||
文字主色 #1E293B 深蓝灰 经典主义 冷静、专业
|
||
动效规范
|
||
动效 实现 周期 意义
|
||
HP呼吸闪烁 微弱明度变化 ±5% 4-6秒 与身体节奏共振
|
||
浊清过渡 颜色从暗琥珀→清澈渐变 2秒 非破坏性反馈
|
||
呼吸线脉动 顶部细线不透明度 10-20% 6秒 身体自愈暗示
|
||
设计决策摘要
|
||
问题 最终决策 采纳来源
|
||
HP碎裂动效 ❌ 取消 → 改用"浊清"视觉语言 色彩心理学专家
|
||
等级/称号 ✅ 保留，但降低视觉优先级 未来主义
|
||
金币奖励 ✅ 保留图标形式，删除独立卡片 极简主义融合
|
||
游戏化整体 ⚠️ 保留数值化反馈，删除幼稚外壳 经典主义+未来主义融合
|
||
布局风格 瑞士网格+毛玻璃 经典主义+未来主义融合
|
||
配色饱和度 降低15-20% 经典主义+色彩心理学
|
||
一句话总结
|
||
"一个冷静的生物数据仪表盘，用颜色的语言告诉用户：你的每一次选择，都在让生命更加清澈。" |