Skip to content

MysticX 移动端应用 — 统一设计方向

综合 GPT 5.4、Gemini 3.1 Pro 和 Claude Opus 4.6 的观点


核心论点

MysticX 移动端并不是网站的缩小版。它是一个私密的仪式伴侣——一个口袋里的精神庇护所,通过情感的清晰度、触觉的亲密感和从容的节奏,赢得用户主屏幕上的日常位置。

  • 网站负责推销愿景并处理探索发现。
  • 移动端应用负责培养习惯并深化关系。

成功的衡量标准不是与网页版的功能一致性。而是用户明天早上是否会再次打开这个应用。


三个视角,一个方向

视角核心洞察
GPT 5.4应用应针对情感清晰度进行优化,并在提供价值前减少用户的决策。围绕仪式感而非功能来构建产品。在开发更多屏幕前先建立设计系统。
Gemini 3.1 Pro将应用视为“数字庇护所”。倾向于感官设计——触觉反馈、手势优先的交互、原生深色模式美学。构建两个循环:30秒的微习惯和深度的宏观会话。
Claude Opus 4.6弥合愿景与实现之间的差距。高级感来自于动效的克制、触觉反馈的精准以及元素之间的留白——而不是过度装饰。通过在现有功能框架上层层打磨,逐步交付这个庇护所。

三者的共识

  1. 仪式感高于实用性。 每一个主要流程都应该让人感觉是经过深思熟虑的,而不是事务性的。
  2. 减少获取首次洞察的阻力。 新用户应该在 60 秒内感受到价值。
  3. 触觉和动效是核心,而非点缀。 它们取代了物理卡牌的操作体验。
  4. 市场(Market)不应作为主标签页。 将其与教育内容一起折叠到“发现(Discover)”中。
  5. 每日占卜(Daily Card)是习惯的锚点。 它必须是应用中最快捷、最令人满意的路径。
  6. 全球化优先,非滞后全球化。 从第一天起就在应用框架中支持所有 12 种语言环境;根据编辑成熟度对内容质量进行分级。
  7. 性能是一项设计决策。 避免繁重的渲染。针对中端设备和不稳定的网络连接进行优化。

设计原则

1. 情感清晰度优先

每一个屏幕都会立即回答一个问题:

  • 首页(Home): 我现在能做的最简单且有意义的事情是什么?
  • 占卜设置(Reading setup): 我应该问什么?(而不是:我要选哪种牌阵?)
  • 抽牌(Card draw): 接下来会发生什么?
  • 结果(Result): 主要的洞察是什么?
  • 日记(Journal): 我开始看到什么规律了?

2. 减少决策,建立动量

应用会根据问题推荐牌阵。用户可以选择覆盖推荐。每一步都要么加深参与感,要么减少模糊性,要么制造期待。如果一个步骤未能实现其中任何一点,请将其合并或移除。

3. 感官真实性

塔罗牌是一种物理体验。应用通过以下方式进行补偿:

  • 触觉(Haptics): 注入能量时的心跳式长按反馈。翻牌时的清脆震动。选择时的微妙确认感。
  • 动效(Motion): 稀少且有意义——进入时的柔和升起,闲置卡牌的轻柔浮动,受控的揭示。绝对避免持续不断的循环动画。
  • 触控(Touch): 每个交互表面都具有基于弹簧物理的按压反馈。在自然的情况下优先使用手势而非按钮(滑动抽牌,拖动选择)。

4. 克制的高级感

高级感来源于_不_存在的东西:

  • 充足的留白,而非拥挤的布局
  • 每个屏幕一个显著的号召性用语(CTA),而不是多个同等权重的按钮
  • 依靠排版来传达情感,而不是装饰性插图
  • 柔和的分层表面,而不是扁平或过度渐变的背景
  • 深色模式作为神秘语境的原生主场(深黑曜石色、午夜紫、金色点缀)

5. 渐进式构建庇护所

通过分层打磨来交付,而不是重写:

  1. 跨所有屏幕的动效系统和触觉反馈(进行中)
  2. 表面系统——主视觉(hero)、日记、仪式、实用工具表面,具有独特但相关的个性
  3. 占卜结果的渐进式揭示
  4. 每日占卜上的连续打卡/习惯 UI
  5. 仪式流程中的环境音效

导航

底部标签页(4个):

标签页目的
首页 (Home)日常庇护所——问候、每日一牌、快速提问入口、建议筹码、最近占卜记录
发现 (Discover)浏览、学习、个性化——卡牌百科、塔罗师角色、卡牌皮肤、牌阵指南、问题灵感
日记 (Journal)反思档案——占卜历史、打卡记录、心情标签、反复出现的规律、保存的洞察
我的 (Me)账户中心——个人资料、订阅、积分、邀请、设置

为什么“发现”取代了“占卜”和“市场”

之前的“占卜(Read)”标签页与首页的提问入口重复,增加了一个导航决策(“我是从首页开始还是从占卜页开始?”),这违背了在提供价值前减少决策的原则。首页本身就应该承担启动占卜的功能。

之前的“市场(Market)”标签页纯粹是一个店面。竞品分析显示,没有一款成功的塔罗牌应用会将购物标签页置于顶级层级。将皮肤和塔罗师置于可浏览的内容标签页中,可以将购买行为重新构建为发现,而非交易。

发现(Discover) 结合以下内容解决了这两个问题:

  • 教育内容——包含 78 张塔罗牌含义和关键词的百科全书;解释何时使用每种布局的牌阵指南;按主题(爱情、事业、自我反思)精选的问题思路。这捕捉到了 Labyrinthos(评分 4.89★)所证明的从教育到参与的漏斗模型,该模型推动了获客和留存。
  • 个性化内容——带有音频预览和购买/解锁功能的塔罗师角色画廊;带有预览和购买功能的卡牌皮肤视觉展示。用户在探索过程中遇到这些内容,使购买感觉更像是好奇心的自然延伸,而不是店面的转化目标。

这给了用户即使在不进行占卜时也有理由去浏览的动力——这正是该应用目前所缺乏的。


核心循环

微循环(日常习惯——30 秒)

  1. 打开应用 → 立即看到今日卡牌的邀请
  2. 带有触觉反馈的抽牌揭示(清脆震动、卡牌抬起动画)
  3. 阅读简明扼要的三句话情感总结
  4. 选择性地保存心情标签或反思
  5. 查看打卡计数器和积分奖励
  6. 完成——关闭或继续

推送通知节奏: 温和,每天一次,多样的措辞(“宇宙今天对您有话说”、“您的每日一牌已准备好”)。

宏观循环(深度会话——5-15 分钟)

  1. 使用自然语言输入问题
  2. 应用推荐牌阵(可覆盖选项)
  3. 选择性地挑选塔罗师角色和卡牌皮肤
  4. 逐一抽牌,在揭示前显示位置含义
  5. 结构化分层的 AI 回复:一句话答案 → 总结 → 逐牌解析 → 指导意见 → 后续追问筹码
  6. 对话式跟进:AI 询问“这与您产生了怎样的共鸣?”以培养双向交流
  7. 保存占卜 → 出现在具有浮现规律的日记中

视觉方向

调色板

明亮庇护所(默认):

  • 羊皮纸/奶油色基调 (#FFF9F0)
  • 烛光金用于点缀和 CTA
  • 复古古铜色/墨棕色用于文字
  • 柔和的米色边框和阴影
  • 午夜蓝作为克制的点缀

暗黑庇护所(仪式模式/可选):

  • 深黑曜石色 (#0D0B14) 和午夜紫 (#20163B)
  • 金色点缀在深色背景下显得更加鲜明
  • 降低透明度的奶油色文字用于正文,完全不透明用于标题
  • 在适当的地方使用对 OLED 友好的纯黑色

排版字体

两种字体系列:

  • 展示型衬线字体用于标题、卡牌名称、仪式时刻——创造情感分量
  • 易读的无衬线字体用于正文拷贝、控件、元数据文本——保持清晰度

排版应承载情感氛围。如果字体感觉对了,就不需要那么多插图了。

动效系统

已在实施中。核心模式:

模式适用场景实现方式
FadeInDown章节标题、主视觉卡牌entering={FadeInDown.delay(n)} 配合交错延迟
FadeInUp内容版块、底部操作entering={FadeInUp.delay(n)}
Float闲置牌堆、生成状态useSharedValue + withRepeat(withSequence(withTiming))
Spring press所有交互表面RitualPressable 配合弹簧缩放 (damping:18, stiffness:280)
ZoomIn卡牌揭示时刻entering={ZoomIn.delay(n)}
LinearTransition列表重排序layout={LinearTransition}

规则:

  • 每个屏幕最多 3-4 个动画版块
  • 交错延迟增量为 80-120 毫秒
  • 绝不进行持续动画——仅在仪式时刻使用呼吸/偶尔浮动效果
  • 每一个动画都必须服务于节奏控制、制造期待或确认操作

表面系统

表面视觉特征使用场景
Sanctuary (庇护所)暖奶油色、充足的内边距、金色点缀首页主视觉、每日一牌、问候语
Ritual (仪式)更深或更聚焦的颜色、减少无用装饰抽牌、流式传输、结果揭示
Archival (档案)带有米色边框的白底卡片、强调排版层级日记条目、占卜历史
Utility (实用工具)极简、高清晰度设置、账户、支付

全球受众策略

按意图细分,而非地理位置

  • 日常寻求慰藉
  • 感情关系指导
  • 决策支持
  • 情感反思
  • 更深层次的精神仪式

引导流程中的“意图”选择器会动态调整 AI 角色的基调(反思型 vs. 指导型 vs. 俏皮型)。

本地化分级

第一梯队(最深度的提示词调优,全面 QA):英语、西班牙语、葡萄牙语、法语、德语

第二梯队(随应用框架发布,结构化 QA,注重排版):简体中文、繁体中文、日语、韩语、阿拉伯语 (RTL)

第三梯队(全面支持,初期提供较短的内容块):印度尼西亚语、荷兰语

性能预算

  • 目标:在三年前的中端 Android 设备上正常运行
  • 避免实时 3D 渲染。使用优化过的 Lottie、SVG、模糊效果
  • 延迟加载卡牌插图资产
  • 在网络连接较慢时,AI 输出应具有优雅的流式加载状态
  • 离线访问过去的日记条目和已抽卡牌

变现原则

  • 在要求购买前展示价值
  • 将塔罗师和皮肤构架为个性化体验,而非库存商品
  • 在能够解释可能性(而非稀缺性)的地方展示积分
  • 在有意义的会话结束后放置会员追加销售(upsell)
  • 在全球统一定价时考虑购买力平价 (PPP)

实施路线图

阶段 1:动效与触觉基础 ← 当前进度

在所有屏幕上应用仪式动效系统:

  • [x] RitualPressable 组件
  • [x] 占卜流程(选牌、结果、[id]、流式传输)
  • [x] 每日一牌
  • [ ] 首页标签页
  • [ ] 日记标签页
  • [ ] 发现标签页、我的标签页
  • [ ] 认证和引导屏幕

阶段 2:表面系统与视觉凝聚力

  • 定义表面设计标记(庇护所、仪式、档案、实用工具)
  • 为占卜流程实现暗黑仪式模式
  • 完善排版比例和间距标记
  • 标准化卡片/药丸形标签/筹码组件

阶段 3:习惯循环打磨

  • 每日一牌上的打卡计数器
  • 占卜后的心情标签
  • 推送通知系统
  • 积分奖励动画
  • 占卜结果的渐进式揭示

阶段 4:导航重构

  • 用发现标签页取代占卜和市场标签页(卡牌百科、塔罗师角色、卡牌皮肤、牌阵指南、问题灵感)
  • 深化日记功能,增加过滤器、模式规律、高亮显示

阶段 5:感官层

  • 仪式流程中的环境音效(可选,令人平静)
  • 增强的触觉词汇库(心跳长按、清脆震动、轻柔确认)
  • 手势优先的抽牌(从牌堆中滑动/拖动)

阶段 6:全球化打磨

  • 所有 12 种语言环境的端到端 QA
  • 阿拉伯语的 RTL 布局验证
  • 第一梯队语言的提示词调优和编辑审查
  • 低端设备和慢速网络测试
  • 购买力平价 (PPP) 定价实施

指导性隐喻

这款应用就像是一本可以装进口袋的破旧真皮日记本。早晨,你伴随着咖啡打开它。书页自然翻到今天。仪式感令人熟悉,但从不重复。你感觉那些答案仿佛一直在那里等待着你。

这就是我们正在打造的产品。