提示 06:首页仪表板 / 小组件自定义
目标
为 MysticX Expo 移动应用构建 (tabs)/index 界面。首页仪表板必须作为一个"数字祭坛"(个性化的仪式空间),而非静态的链接列表。它应突出展示每日仪式、快速访问读牌师,以及灵活的模块化布局。
设计约束(来自主设计指南)
- 视觉: "OLED Noir"(
#000000基底)配"Ethereal Glaze"。背景应有非常缓慢的、微妙的 Mesh 渐变(如深午夜蓝到黑色),并对设备陀螺仪略有响应(视差效果)。 - 排版: 双字体系统。使用 Playfair Display 作为用户问候语("晚上好,[Name] ✦")和分区标题。使用 Inter 作为副文本和标签。
- 节奏: "慢 UI"理念。元素应在初始加载时优雅地淡入。
- 生物响应: 背景渐变和问候语应根据用户本地时间变化(如早晨为"金色/太阳"色调,夜晚为"月光/深邃"色调)。
需求
- 组件:
HomeDashboardView。 - 顶部区域(问候与配置):
- 动态问候语(衬线体,金色
#c5a059)。 - 用户积分余额以精致徽章展示(
expo-blur背景)。 - 最近/收藏的塔罗读牌师水平滚动(带发光边框的圆形头像)。
- 动态问候语(衬线体,金色
- 中间区域(核心仪式):
- 一个大的、视觉突出的"向牌卡提问"输入区域。
- 占位文本:"你在想什么?"(柔和色
#999490)。 - 附带的"开始解读"行动号召按钮(古金色渐变)。
- 输入区下方,水平滚动(
FlashList或ScrollView)的建议标签(如"我会找到爱情吗?"、"职业指导")。
- 底部区域(每日仪式与历史):
- 突出的"每日一牌"横幅/卡片。点击后导航到独立仪式界面。
- "继续反思"卡片,显示最近的解读历史项(标题、牌阵、读牌师、时间)。
实现指南
- 动画: 点击"开始解读"时,使用
react-native-reanimated的共享元素过渡动画,将输入区域无缝扩展到完整的"解读流程"界面。 - 触觉反馈: 当用户滚动浏览建议标签或读牌师头像时,触发
expo-haptics的impactAsync(ImpactFeedbackStyle.Light)。 - 模块化架构: 将"向牌卡提问"、"每日仪式"和"历史"区域构建为独立的、可复用的组件。未来,这将允许用户拖放这些小组件来自定义他们的"数字祭坛"。