MysticX Research

简体中文

English

简体中文

English

Appearance

MysticX Mobile App Design Direction ​

MysticX 移动应用设计方向 ​

Executive Summary ​

执行摘要 ​

This document proposes a mobile-first design direction for MysticX based on the current Expo app, the existing web product on mysticx.ai, and the needs of a global audience. 本文档基于当前的 Expo 应用、mysticx.ai 现有的 Web 产品以及全球受众的需求，为 MysticX 提出了移动优先的设计方向。

The core recommendation is to stop treating the mobile app as a smaller version of the website. The mobile app should feel like a private ritual companion: calm, intimate, fast to use, and emotionally clear. The website can explain, market, and convert. The mobile app should help users open the app, ground themselves, draw cards, receive insight, and continue reflecting with minimal friction. 核心建议是停止将移动应用视为网站的缩小版。移动应用应该让人感觉像是一个私人的仪式伴侣：平静、亲密、使用快捷且情感清晰。网站可以用于解释、营销和转化。而移动应用应该帮助用户打开应用、沉淀自我、抽牌、获取洞察，并以最小的阻力继续反思。

In short: 简而言之：

  • The website sells the promise.
  • 网站负责销售愿景。
  • The mobile app delivers the habit.
  • 移动应用负责培养习惯。

Product Thesis ​

产品论点 ​

MysticX mobile should help a user get meaningful emotional clarity in less than two minutes, while still supporting deeper sessions when they want them. MysticX 移动端应该帮助用户在不到两分钟的时间内获得有意义的情感清晰度，同时在他们需要时仍然支持更深层次的会话。

That means the app should optimize for: 这意味着应用应该在以下方面进行优化：

  • emotional safety
  • 情感安全
  • speed to first value
  • 快速实现首次价值
  • repeat daily use
  • 重复的日常使用
  • reflection and return visits
  • 反思与回访
  • strong localization for global users
  • 针对全球用户的强大本地化

It should not optimize first for: 它不应该首先优化以下方面：

  • browsing store inventory
  • 浏览商店库存
  • reading long dense text blocks
  • 阅读冗长密集的大段文本
  • explaining tarot mechanics before the user feels value
  • 在用户感受到价值之前解释塔罗机制
  • mirroring the web information architecture exactly
  • 完全照搬 Web 端的信息架构

Current Product Assessment ​

当前产品评估 ​

The current mobile app already has the right feature foundation: 当前的移动应用已经具备了正确的功能基础：

  • onboarding
  • 新手引导
  • card of the day
  • 每日一牌
  • guided question entry
  • 引导式问题输入
  • spread selection
  • 牌阵选择
  • card selection
  • 选牌
  • reading result
  • 解读结果
  • follow-up chat
  • 后续对话
  • journal
  • 日记
  • market and profile areas
  • 市场和个人资料区
  • multi-language support
  • 多语言支持

However, the current experience still feels more like a functional feature shell than a fully designed consumer product. 然而，目前的体验仍然更像是一个功能性的需求外壳，而不是一个经过完整设计的消费级产品。

Main Gaps ​

主要差距 ​

  1. The experience is feature-led instead of ritual-led.
  2. 体验是功能导向的，而不是仪式感导向的。
  3. The navigation gives too much weight to the market too early.
  4. 导航在早期赋予了市场过多的权重。
  5. The reading flow asks users to make too many decisions before they feel momentum.
  6. 占卜流程要求用户在感受到动力之前做出太多决定。
  7. The visual system is serviceable but not yet distinctive enough to create emotional attachment.
  8. 视觉系统尚算实用，但还不够独特，无法产生情感依恋。
  9. The result screen delivers content, but not enough narrative guidance or progressive reveal.
  10. 结果屏幕传递了内容，但缺乏足够的叙事指引或渐进式呈现。
  11. Onboarding is too generic to define the app's emotional job.
  12. 新手引导过于通用，无法界定应用在情感层面的作用。

Design Goal ​

设计目标 ​

Create a mobile product that feels like: 打造一款给人以下感觉的移动产品：

  • personal, not broadcast
  • 私人化，而非广播式
  • guided, not complicated
  • 有引导的，而非复杂的
  • reflective, not gamey
  • 引发反思的，而非游戏化的
  • premium, not flashy
  • 高级的，而非浮夸的
  • mystical, but still trustworthy
  • 神秘的，但依然值得信赖

The design language should communicate depth and calm, not generic astrology decoration. 设计语言应该传达深度和平静，而不是通用的占星装饰。

Audience Strategy ​

受众策略 ​

MysticX serves users across North America, South America, Europe, and parts of South Asia. That mix should influence tone, clarity, and localization, but it should not fragment the core product into region-specific visual identities. MysticX 服务于北美、南美、欧洲以及部分南亚地区的用户。这种用户构成应该会影响基调、清晰度和本地化，但它不应该将核心产品撕裂成针对特定区域的视觉标识。

推荐的全球策略 ​

Design one strong global core experience, then localize: 设计一个强大的全球核心体验，然后进行本地化：

  • language
  • 语言
  • content tone
  • 内容基调
  • examples and prompts
  • 示例和提示词
  • pricing communication
  • 定价沟通
  • onboarding emphasis
  • 新手引导侧重点

Do not localize through stereotypes or region-specific visual tropes. 不要通过刻板印象或特定区域的视觉隐喻来进行本地化。

Segment by Intent, Not Geography ​

根据意图而非地理位置进行细分 ​

The most useful product segmentation is likely: 最有用的产品细分可能是：

  • daily reassurance
  • 日常安抚
  • relationship guidance
  • 人际关系指导
  • decision support
  • 决策支持
  • emotional reflection
  • 情感反思
  • deeper spiritual ritual
  • 更深层次的精神仪式

These needs cut across countries more reliably than continent-based segmentation. 这些需求跨越了国界，比基于大洲的细分更可靠。

Language Priorities ​

语言优先级 ​

Because MysticX already has a 12-locale i18n foundation in the product shell, it is reasonable to keep all 12 languages active instead of hiding some of them. 由于 MysticX 在产品外壳中已经有了 12 种语言区域的国际化（i18n）基础，保持所有 12 种语言的活跃度，而不是隐藏其中一些，是合理的。

The important distinction is not supported versus unsupported. The important distinction is UI coverage versus content maturity. 重要的区别不在于“支持”与“不支持”，而在于 UI 覆盖率与内容成熟度。

Recommended model: 推荐的模式：

  • support all 12 languages in navigation, onboarding, settings, buttons, status states, and core ritual flows from MVP
  • 从 MVP 阶段开始，在导航、新手引导、设置、按钮、状态和核心仪式流程中支持所有 12 种语言。
  • treat long-form AI reading quality, editorial nuance, payment copy, and lifecycle messaging as tiered quality tracks
  • 将长篇 AI 解读质量、编辑细微差别、支付文案和生命周期消息作为分级质量追踪。
  • keep the UI fully localized even when a locale is still being refined at the content level
  • 即使某个语言区域在内容层面仍在完善，也要保持 UI 的完全本地化。
  • use stronger templates and shorter structured blocks in locales where long-form output quality is still catching up
  • 在长篇输出质量仍在提升的语言区域中，使用更强大的模板和更短的结构化区块。

Quality Tiers For Execution ​

执行的质量分级 ​

Tier 1: Tier 1（第一梯队）：

  • English
  • 英语
  • Spanish
  • 西班牙语
  • Portuguese
  • 葡萄牙语
  • French
  • 法语
  • German
  • 德语

These should receive the deepest prompt tuning, QA, marketing polish, and ongoing review first. 这些语言应首先接受最深入的提示词优化、QA、营销润色和持续审查。

Tier 2: Tier 2（第二梯队）：

  • Simplified Chinese
  • 简体中文
  • Traditional Chinese
  • 繁体中文
  • Japanese
  • 日语
  • Korean
  • 韩语
  • Arabic
  • 阿拉伯语

These should ship in the product shell from MVP and receive structured content QA early, especially for typography, line breaking, and RTL behavior in Arabic. 这些语言应从 MVP 阶段就包含在产品外壳中，尽早接受结构化内容 QA，特别是排版、换行以及阿拉伯语的 RTL（从右到左）行为。

Tier 3: Tier 3（第三梯队）：

  • Indonesian
  • 印尼语
  • Dutch
  • 荷兰语

These should remain fully supported, but can initially rely more on shared copy patterns and shorter content blocks while usage data and editorial review deepen. 这些语言应保持完全支持，但在使用数据和编辑审查深化之前，最初可以更多地依赖共享的文案模式和较短的内容区块。

For South Asia, English-first may still be acceptable in practice for some users, but that should be validated by usage rather than assumed by product strategy. 对于南亚地区，“英语优先”在实际中可能仍被某些用户接受，但这应该通过使用情况来验证，而不是依据产品策略凭空假设。

Core Design Principles ​

核心设计原则 ​

1. Design for Emotional Clarity ​

1. 为情感清晰度进行设计 ​

Every primary screen should answer one user question immediately: 每一个主要屏幕都应该立即回答用户的一个问题：

  • Home: What can I do right now?
  • 首页 (Home)：我现在能做什么？
  • Reading setup: What should I ask?
  • 占卜设置 (Reading setup)：我应该问什么？
  • Card draw: What happens next?
  • 抽牌 (Card draw)：接下来会发生什么？
  • Result: What is the main insight?
  • 结果 (Result)：主要的洞察是什么？
  • Journal: What patterns have I seen over time?
  • 日记 (Journal)：随着时间的推移，我发现了什么模式？

2. Reduce Decisions Early ​

2. 尽早减少决策项 ​

New users should not need to understand tarot spreads before getting value. 新用户不应该在获得价值之前需要去了解塔罗牌阵。

The app should recommend a spread based on the user's question and offer an override only if they want it. 应用应该根据用户的问题推荐一个牌阵，并且仅在用户需要时才提供覆盖原本推荐的选项。

3. Treat Mobile as a Ritual Space ​

3. 将移动端视为仪式空间 ​

The reading flow should feel deliberate: 占卜流程应当让人感觉是精心设计的：

  • soft transitions
  • 柔和的过渡
  • haptics at key moments
  • 关键时刻的触觉反馈（震动反馈）
  • one-card-at-a-time reveal
  • 一次揭示一张牌
  • controlled pacing
  • 受控的节奏
  • enough empty space to breathe
  • 留有足够的空白呼吸空间

4. Preserve Momentum ​

4. 保持势头 ​

The app should never feel like a wizard with too many steps. Each step should either: 应用决不能像一个有着过多步骤的向导流。每一步都应该：

  • deepen emotional engagement
  • 加深情感投入
  • reduce ambiguity
  • 减少模糊性
  • create anticipation
  • 创造期待感

If a step does none of those things, combine it with another step or remove it. 如果某一步没有实现上述任何一点，请将其与另一步合并或删除。

5. Build for Reuse, Not Screen-by-Screen Styling ​

5. 为复用而构建，而非逐屏设置样式 ​

The app needs a reusable mobile design system: 应用需要一个可重用的移动端设计系统：

  • typography scale
  • 排版比例
  • spacing scale
  • 间距比例
  • card surfaces
  • 卡片表面
  • chips and pills
  • 标签与胶囊按钮
  • ritual buttons
  • 仪式感按钮
  • list cards
  • 列表卡片
  • bottom sheets
  • 底部操作面板（Bottom Sheets）
  • reading content blocks
  • 占卜内容区块

Without that system, every new feature will feel visually disconnected. 没有建立这个系统，每一个新功能都将在视觉上产生脱节感。

Proposed Product Structure ​

拟定的产品结构 ​

Primary Navigation ​

核心导航 ​

Recommended bottom navigation: 推荐的底部导航栏：

  • Home
  • 首页 (Home)
  • Read
  • 占卜 (Read)
  • Journal
  • 日记 (Journal)
  • Me
  • 我的 (Me)

Why This Structure ​

为什么采用这种结构 ​

  • Home is for daily use and quick entry.
  • 首页用于日常使用和快速入口。
  • Read is a dedicated reading launcher for both quick and deep sessions.
  • 占卜是专为快速和深度占卜而设的专用启动器。
  • Journal reinforces retention and reflection.
  • 日记强化了留存和反思。
  • Me contains profile, settings, membership, readers, skins, credits, and account details.
  • “我的”包含个人资料、设置、会员、占卜师、皮肤、点数和账户详情。

The market should not remain a primary tab. It is monetization infrastructure, not the emotional center of the product. 市场不应继续作为主标签页。它是变现基础设施，而不是产品的情感中心。

Key Experience Flows ​

关键体验流程 ​

1. First Session ​

1. 首次会话体验 ​

Goal: help a new user feel insight quickly. 目标：帮助新用户快速感受到洞察。

Recommended sequence: 推荐的顺序：

  1. Welcome with a clear value promise.
  2. 包含清晰价值承诺的欢迎页面。
  3. Choose preferred language if device detection is uncertain.
  4. 如果设备检测不确定，则选择首选语言。
  5. Ask one lightweight intent question.
  6. 询问一个轻量级的意图问题。
  7. Offer either Daily Card or First Reading.
  8. 提供“每日一牌”或“首次解读”。
  9. Capture account only after the user has seen value, unless required earlier.
  10. 除非有要求，否则仅在用户看到价值后获取账户信息。

The onboarding tone should be calm and credible, not generic inspirational copy. 新手引导的基调应该平静可信，而不是通用的励志文案。

2. Daily Card Flow ​

2. 每日一牌流程 ​

This should become the habit loop anchor. 这应该成为习惯循环的锚点。

Recommended structure: 推荐的结构：

  1. Open app.
  2. 打开应用。
  3. See today's card invitation immediately.
  4. 立即看到今天的卡牌邀请。
  5. Draw with a tactile reveal moment.
  6. 伴随触觉呈现的抽牌时刻。
  7. Get a short emotional summary first.
  8. 首先获取简短的情感总结。
  9. Expand into deeper guidance only if desired.
  10. 仅在需要时深入更详细的指导。
  11. Save a short reflection or mood tag.
  12. 保存简短的反思或心情标签。

This flow should be the fastest value path in the app. 这一流程应该是应用中最快速实现价值的路径。

3. Guided Reading Flow ​

3. 引导式占卜流程 ​

For most users, this should be the default reading path. 对于大多数用户来说，这应该是默认的占卜路径。

Recommended structure: 推荐的结构：

  1. Enter a question.
  2. 输入一个问题。
  3. App recommends a spread.
  4. 应用推荐一个牌阵。
  5. User confirms or changes it.
  6. 用户确认或更改它。
  7. User draws cards one by one.
  8. 用户逐一抽牌。
  9. AI response appears in structured layers.
  10. AI 回复以结构化层级呈现。
  11. User can continue via follow-up chips or chat.
  12. 用户可以通过后续追问标签或聊天继续对话。

4. Deep Reading Flow ​

4. 深度占卜流程 ​

For advanced users, allow more control: 为高级用户提供更多控制权：

  • manually choose spread
  • 手动选择牌阵
  • choose reader persona
  • 选择占卜师角色
  • choose card skin
  • 选择卡牌皮肤
  • optionally set intention or mood
  • 可选：设定意图或心情

This should exist, but it should not be the default path for everyone. 这个功能应该存在，但不应该是针对所有人的默认路径。

Screen Direction ​

屏幕设计方向 ​

Home ​

首页 ​

Home should feel like a quiet sanctuary, not a dashboard. 首页应该让人感觉像一个安静的避难所，而不是一个生硬的仪表盘。

Recommended content order: 推荐的内容顺序：

  1. Greeting with time-of-day tone
  2. 带有时间段基调的问候语
  3. Daily card module
  4. 每日一牌模块
  5. Main question composer
  6. 主要问题编辑框
  7. Suggested question themes
  8. 建议的问题主题
  9. Continue recent reading or journal prompt
  10. 继续最近的阅读或日记提示
  11. Soft upsell surfaces only after value modules
  12. 仅在价值模块之后出现柔和的向上销售版面

Home should answer: what is the easiest meaningful thing I can do now? 首页应该回答：我现在能做的最简单而有意义的事情是什么？

Home Visual Notes ​

首页视觉说明 ​

  • generous top spacing
  • 宽敞的顶部间距
  • a strong hero surface for the daily card
  • 为“每日一牌”提供一个强烈的核心版面区域
  • one dominant call to action, not many equal buttons
  • 一个占主导地位的行为召唤（CTA），而不是很多同等权重的按钮
  • soft layered background rather than flat white
  • 柔和的层次背景，而不是扁平的白色
  • typography that feels editorial, not utilitarian
  • 感觉像社论排版，而不是功利性的排版

Read ​

占卜 (Read) ​

This is the intentional reading launcher. 这是有意图的占卜启动器。

Suggested modules: 建议的模块：

  • quick guidance
  • 快速指引
  • love and relationships
  • 爱情与人际关系
  • career and decisions
  • 职业与决策
  • energy check-in
  • 能量检查
  • deep custom reading
  • 深度自定义占卜

Instead of pushing users straight into spread selection, let them start from emotional intent. 与其将用户直接推入牌阵选择，不如让他们从情感意图开始。

Card Draw ​

抽牌 (Card Draw) ​

This should be the signature interaction. 这应该是标志性的交互。

Recommended changes: 推荐的改进：

  • do not use a dense small-card grid as the main ritual interaction
  • 不要使用密集的小卡片网格作为主要的仪式占卜交互
  • let users draw from a deck stack or fan
  • 让用户从一摞牌或扇形展开的牌组中抽取
  • reveal one card at a time
  • 一次翻开一张牌
  • show position meaning before each reveal
  • 在每次翻开之前显示位置含义
  • add haptic confirmation on draw
  • 在抽牌时添加触觉确认反馈
  • animate reversal subtly, not theatrically
  • 以微妙而不夸张的方式呈现逆位动画

The draw moment should feel memorable enough that users want to repeat it daily. 抽牌时刻必须足够令人难忘，以至于用户想要每天重复。

Result ​

结果 (Result) ​

The result screen should be layered, not just long-form text. 结果屏幕应该是分层的，而不仅仅是长篇大论。

Recommended structure: 推荐的结构：

  1. One-sentence answer
  2. 一句话答案
  3. Reading summary
  4. 占卜总结
  5. Card-by-card interpretation
  6. 逐牌解读
  7. Practical guidance
  8. 实用建议
  9. Follow-up prompt chips
  10. 后续提示标签块
  11. Save, share, continue chat
  12. 保存、分享、继续对话

This structure helps global users because it reduces cognitive load and improves scanability across languages. 这种结构有助于全球用户，因为它降低了认知负荷并提高了跨语言的可扫读性。

Journal ​

日记 (Journal) ​

The journal should be more than a history list. 日记应该不仅仅是一个历史记录列表。

Recommended additions: 推荐增加：

  • mood tags
  • 心情标签
  • saved highlights
  • 保存的高光时刻
  • streaks or ritual cadence
  • 连续打卡或仪式节奏
  • recurring themes over time
  • 随着时间推移反复出现的主题
  • filters by category or intention
  • 按类别或意图过滤

This is one of the strongest retention surfaces in the app. 这是应用中最强大的留存界面之一。

Me ​

我的 (Me) ​

This area should contain: 该区域应包含：

  • profile
  • 个人资料
  • settings
  • 设置
  • credits
  • 点数
  • membership
  • 会员等级
  • tarot readers
  • 塔罗占卜师
  • card skins
  • 卡牌皮肤
  • invitations
  • 邀请

The store experience should feel like personalization, not a separate shopping app. 商店体验应该让人感觉像是进行个性化设置，而不是一个独立的购物应用。

Visual Design Direction ​

视觉设计方向 ​

Brand Mood ​

品牌基调 ​

Use a warmer, more grounded premium-mystic direction: 采用更温暖、更接地气的高级神秘方向：

  • parchment
  • 羊皮纸色
  • candlelight gold
  • 烛光金
  • aged bronze
  • 做旧青铜色
  • ink brown
  • 墨棕色
  • midnight blue as a restrained accent
  • 午夜蓝作为克制的强调色

Avoid: 避免：

  • neon cosmic effects
  • 霓虹宇宙特效
  • overly decorative zodiac clichés
  • 过度装饰的生肖/星座陈词滥调
  • generic purple gradients
  • 普通的紫色渐变
  • aggressive contrast that breaks the calm tone
  • 破坏平静基调的强烈对比

Typography ​

排版 ​

Use two type families: 使用两个字体家族：

  • a refined display serif for titles and ritual moments
  • 用于标题和仪式时刻的精致展示衬线字体
  • a highly readable sans-serif for body copy and controls
  • 用于正文和控件的高度易读无衬线字体

Typography should do more of the emotional work than decorative illustration. 排版应承担比装饰性插画更多的情感传达作用。

Motion ​

动效 ​

Motion should be sparse and meaningful: 动效应该是少而有意义的：

  • soft fade and rise on entry
  • 进入时柔和的淡入和浮现
  • subtle deck shuffle
  • 微妙的洗牌
  • card lift and reveal
  • 卡牌抬起并翻开
  • gentle glow on milestone moments
  • 里程碑时刻的柔和发光
  • restrained celebration on streaks or completion
  • 连续打卡或完成时的克制庆祝

Avoid constant animation loops that dilute emotional weight. 避免冲淡情感分量的持续动画循环。

Surface System ​

面板系统 ​

Recommended surface types: 推荐的面板类型：

  • Sanctuary surface: hero modules and daily card
  • 避难所面板（Sanctuary surface）：核心模块和每日一牌
  • Journal surface: archival and reflective content
  • 日记面板（Journal surface）：存档和反思内容
  • Ritual surface: draw flow and card interpretation
  • 仪式面板（Ritual surface）：抽牌流程和卡牌解读
  • Utility surface: settings, payments, account tasks
  • 实用面板（Utility surface）：设置、支付、账户任务

Different surfaces should feel related, but not identical. 不同的版面应该在感觉上互相关联，但不完全相同。

Content Strategy ​

内容策略 ​

Tone of Voice ​

语气与基调 ​

The tone should be: 基调应该是：

  • warm
  • 温暖的
  • calm
  • 平静的
  • confident
  • 自信的
  • non-dogmatic
  • 不武断的
  • emotionally precise
  • 情感精确的

It should not sound: 它听起来不应该令人感觉：

  • preachy
  • 说教的
  • overly mystical in a vague way
  • 故弄玄虚的过度神秘
  • childish
  • 幼稚的
  • overly therapeutic
  • 过度治疗性的
  • like generic AI encouragement
  • 像通用的 AI 鼓励话语

Content Structure ​

内容结构 ​

Mobile copy should favor: 移动端文案应侧重于：

  • short openings
  • 简短的开场白
  • clear labels
  • 清晰的标签
  • progressive disclosure
  • 渐进式呈现
  • strong scannability
  • 强大的可扫读性
  • short paragraphs over dense walls of text
  • 简短的段落，而非密集的文字墙

This matters especially for multilingual use. 这对于多语言使用尤为重要。

Monetization Design ​

商业化变现设计 ​

Monetization should support the ritual, not interrupt it. 商业化变现应该支撑仪式感，而不是打断它。

推荐原则 ​

  1. Show value before asking for purchase.
  2. 在要求购买之前展示价值。
  3. Frame readers and skins as personalization, not inventory.
  4. 将占卜师和皮肤塑造为个性化选项，而不是库存商品。
  5. Surface credits where they explain possibility, not scarcity panic.
  6. 在能够解释可能性而不是引发稀缺性恐慌的地方展现点数。
  7. Place membership upsell after meaningful sessions, not before first trust.
  8. 将会员追加销售安排在有意义的会话之后，而不是在建立初步信任之前。

Best Moments for Upsell ​

追加销售的最佳时机 ​

  • after a strong daily card insight
  • 在呈现了强有力的每日一牌洞察之后
  • after a completed reading
  • 在完成一次占卜之后
  • when unlocking deeper card interpretations
  • 在解锁更深层次卡牌解读时
  • when showing personalization options in Me
  • 在“我的”中展示个性化选项时

Worst Moments for Upsell ​

追加销售的最差时机 ​

  • before the first insight
  • 在获得第一次洞察之前
  • in the middle of the draw ritual
  • 在抽牌仪式进行中
  • in the first seconds after launch
  • 在应用刚启动的最初几秒钟内

Accessibility and Performance ​

可访问性与性能 ​

Because the app serves a global audience, accessibility and performance are product design issues, not just implementation issues. 由于应用服务于全球受众，可访问性和性能是产品设计问题，而不仅仅是开发实现问题。

Accessibility Priorities ​

可访问性优先级 ​

  • larger text support
  • 支持更大的文本
  • strong contrast for essential controls
  • 关键控件的强对比度
  • clear hit targets
  • 清晰的点击目标
  • screen-reader friendly card states
  • 屏幕阅读器友好的卡牌状态
  • full RTL support for Arabic
  • 阿拉伯语的完全 RTL（从右到左）支持

Performance Priorities ​

性能优先级 ​

  • fast first paint on mid-tier devices
  • 在中端设备上实现快速的首次渲染（FCP）
  • careful image loading for card assets
  • 谨慎的卡牌资源图片加载
  • minimal layout shift
  • 最小化布局偏移 (Layout Shift)
  • resilient low-network behavior
  • 适应弱网环境的弹性行为
  • graceful streaming states for AI output
  • AI 结果流式输出时的优雅状态

Design System Recommendation ​

设计系统推荐 ​

Before designing many more screens, create a mobile design system with: 在设计更多屏幕之前，请创建一个包含以下内容的移动设计系统：

  • color roles
  • 颜色功能分配
  • typography tokens
  • 排版令牌 (Typography tokens)
  • spacing tokens
  • 间距令牌 (Spacing tokens)
  • radii and shadows
  • 圆角和阴影
  • button variants
  • 按钮变体
  • input variants
  • 输入框变体
  • card component patterns
  • 卡片组件模式
  • content blocks for readings
  • 占卜的内容区块
  • bottom sheet and modal rules
  • 底部操作面板和模态框的规则
  • localization-safe component rules
  • 本地化安全的组件规则

This should be implemented first so product work scales cleanly. 这应该首先被实现，以便产品工作能够被整洁地扩展。

推荐的设计优先级 ​

If the team has limited bandwidth, focus on these three screens first: 如果团队精力有限，请首先关注以下三个屏幕：

  1. Home
  2. 首页 (Home)
  3. Card Draw
  4. 抽牌 (Card Draw)
  5. Result
  6. 结果 (Result)

Those three screens define: 这三个屏幕定义了：

  • first impression
  • 第一印象
  • signature interaction
  • 标志性交互
  • perceived product quality
  • 感知上的产品质量

If those screens feel strong, the rest of the app will feel more coherent. 如果这三个屏幕让人感觉体验极佳，应用的其余部分也会产生更强的连贯性。

Practical Next Steps ​

实际的后续步骤 ​

Phase 1: Product Definition ​

阶段 1：产品定义 ​

  • finalize the core mobile thesis
  • 敲定移动端核心论点
  • define primary user intents
  • 确定主要的用户意图
  • choose the new bottom navigation structure
  • 选择新的底部导航结构
  • decide which features move out of the primary tab bar
  • 决定哪些功能移出主标签栏

Phase 2: Design System ​

阶段 2：设计系统 ​

  • define visual direction
  • 定义视觉方向
  • select typography
  • 选择排版字体
  • define surfaces, components, spacing, and motion rules
  • 定义面板、组件、间距和动效规则
  • build reusable UI primitives for React Native
  • 为 React Native 构建可重用的 UI 基础组件

Phase 3: Core Flow Redesign ​

阶段 3：核心流程重设计 ​

  • redesign Home
  • 重新设计首页
  • redesign Read entry
  • 重新设计“占卜”入口
  • redesign card draw ritual
  • 重新设计抽牌仪式
  • redesign result hierarchy
  • 重新设计结果的层级结构

Phase 4: Retention and Monetization ​

阶段 4：留存与变现 ​

  • redesign Journal for reflection and patterns
  • 为反思和行为模式重新设计日记
  • reposition readers and skins under personalization
  • 将占卜师和皮肤重新定位为个性化功能
  • redesign membership and credit prompts around value moments
  • 围绕价值时刻重新设计会员和点数提示

Phase 5: Global UX Validation ​

阶段 5：全球用户体验验证 ​

  • test all 12 locales in the app shell and core reading flow
  • 在应用外壳和核心占卜流程中测试所有 12 种语言区域
  • run deepest end-to-end content QA on Tier 1 first, then Tier 2, then Tier 3
  • 首先在 Tier 1 上运行最深入的端到端内容 QA，然后是 Tier 2，最后是 Tier 3
  • test readability of long outputs on mobile
  • 测试移动端长内容输出的可读性
  • validate RTL layout and Arabic typographic behavior
  • 验证 RTL（从右到左）布局和阿拉伯语的排版行为
  • test low-end devices and slower networks
  • 测试低端设备和较慢的网络环境

Final Recommendation ​

最终建议 ​

The right design direction for MysticX mobile is not to become more decorative. It is to become more focused. MysticX 移动端正确的设计方向不是变得更具装饰性。而是变得更加专注。

The app should feel like a personal spiritual companion built for repeat use, not a feature catalog. If the team makes the product faster to understand, easier to enter, and more emotionally intentional at key moments, the design will match user expectations much more closely. 应用应该让人感觉像是一个为重复使用而打造的私人精神伴侣，而不是功能的目录清单。如果团队让产品更容易理解、更容易上手，并在关键时刻更具情感意图，那么设计将更加贴合用户的期望。

The most important shift is simple: 最重要的转变很简单：

  • move from interface design to ritual design
  • 从界面设计转向仪式感设计
  • move from feature completeness to emotional clarity
  • 从功能完备性转向情感清晰度
  • move from web adaptation to mobile-native behavior
  • 从 Web 移植适配转向移动端原生行为