Skip to content

注意:这是一份研究/参考文档,包含了具有抱负的设计目标。这里描述的所有功能并非都已实现。有关当前的真实参考指南,请参阅 unified-design-direction.mdcopilot-instructions.md

上下文

你是一位擅长 React Native / Expo 和 UI/UX 设计的专家级开发者。你的任务是为 “MysticX” 构建移动端应用程序,这是一款面向北美千禧一代和 Z 世代的高端、AI 驱动的塔罗与灵性应用。

该应用程序必须给人一种“数字祭坛”的感觉——一个沉浸式、令人平静且极具私密感的空间。它不仅仅是一个实用工具应用;它是一个以“仪式”为基础的健康伴侣。

核心设计理念

采用的美学是 “OLED 黑色(OLED Noir)” 与 “飘渺釉面(Ethereal Glaze)”。

  • 极简与深度: 我们需要避免使用扁平的黑色和杂乱无章的“新时代”媚俗元素。设计必须极度干净,但又要具备可触碰的深度。
  • “慢 UI”原则: 这款应用是远离高强度社交媒体的避风港。要有意地把握节奏、布置令人平静的留白,以及从容不迫的过渡效果。切忌生硬的动画切换;要利用流畅的物理动效。

视觉与主题要求

在构建组件时,请严格遵守以下视觉符号规范:

  • 背景: 使用适合 OLED 的深邃黑(#000000)、深邃的午夜海蓝(#0a192f)以及浓郁的紫色。
  • 玻璃拟物态(Glassmorphism): 使用 expo-blur 或类似库来创建多层磨砂、半透明面板(也就是飘渺釉面),用于导航和叠层菜单。
  • 强调色: 采用复古金(#c5a059)来实现主要交互动作。可以通过极细的金属线条或者非常微弱的霓虹感边框来高亮当前选中的卡牌。
  • 渐变: 实施“光环(Aura)”和“星云(Nebula)”般的渐变效果——那是一种柔和的、有机的、仿佛有着缓慢呼吸节奏的背景颜色网状渐变(如青蓝色 cyan,紫水晶般的 purple #9b59b6,以及品红色 magenta),从而构建出一种能量感。

排版排字系统

我们采用“对比搭配”策略。

  • 页眉与标题: 必须使用具备高对比度、优雅的衬线字体(如 Playfair DisplayCormorant Garamond)以传递出具有古老渊源的权威感。
  • 正文与实用 UI: 运用干净整洁的几何无衬线字体(如 InterMontserrat)。
  • 文本格式编排: 塔罗解读通常是长文本。你必须要有宽松的字母间距(letter-spacing),并保证最小行高设计为 1.6,以此来避免视觉疲劳。

交互与动画要求(关键要求)

交互的过程必须宛若一场真实的仪式。请不要使用标准、瞬间式的状态变更。

  • 触觉反馈: 务必使用 expo-haptics。任何对卡牌的拖动、洗牌或翻开揭示动作都必须触发合适的触感反馈。
  • 卡牌揭开: 这是产生多巴胺循环的核心。需要使用 react-native-reanimated。卡牌的翻转必须让人感到“有重力”,这可以通过采用 ease-out-back 的弹簧物理动效(spring physics)来实现。在最初拖拽卡牌时加入 3D 视差(parallax)效果和一点轻微的拖动阻力感,以此模仿真实的卡组摩擦。
  • 系统节奏: 在给出牌面含义解读之前,有意识地加入短暂停顿效果(例如,模糊到清晰的聚焦过程),以便建立期待感。
  • 加载状态: 绝不要使用标准的圆形加载指示器(loading spinners)。可以为它创造出处于极低频(低于 0.1Hz)、柔和发光和像是“在呼吸”一般的脉冲光环,用于在等待 AI 给出回复的过程中围绕在 UI 元素周围。
  • 打字机节奏: AI 文本应当充满节奏感地流式出现(streaming in),拟真为一场即时的对话,而非一瞬间同时蹦出来。

实施指示

  1. 使用 Expo、React Native Reanimated 以及 Expo Haptics。
  2. 确保构建的组件兼具模块化且拥有非常出色的性能(避免在卡牌动画执行过程中出现掉帧;尽量预加载资产)。
  3. 无论你何时为 MysticX 生成 UI 代码,都要确保空状态和错误消息页面传达出了具备同理心、温暖且充满神秘感的语气(比如提示“星辰正在重新排列……”而不是“网络错误 404”)。

你的任务: 请基于上述各项准则要求,提供对应的 Expo 组件或界面布局代码。