提示 01:发现标签页(牌阵、塔罗牌与读牌师市场)
目标
构建 Discover(发现)界面,这是浏览塔罗牌阵、大阿尔卡纳/小阿尔卡纳目录、塔罗读牌师和卡牌皮肤的中心枢纽。
设计约束(来自主设计指南)
- 视觉: "OLED Noir"(
#000000基底,#0a192f强调色)。使用"Ethereal Glaze"(磨砂玻璃效果)用于吸顶头部或底部标签栏。 - 排版: 双字体系统。使用 Playfair Display 作为分区标题("精选牌阵"、"读牌师"),使用 Inter 作为牌阵名称和工具文本。
- 节奏: "慢 UI"理念。水平滚动列表应使用较大的摩擦力/减速度(FlatList 中的
snapToInterval或decelerationRate="fast"),使其感觉厚重而非滑腻。
需求
- 组件:
DiscoverTabView作为主可滚动目录。 - 分区(纵向滚动配合横向行):
- 精选牌阵: 水平卡片展示牌阵布局(如凯尔特十字、过去/现在/未来)。在牌阵卡片背景上实现柔和的视差效果。
- 塔罗牌浏览器: 视觉丰富的水平卡片列表。在这些卡片上使用微妙的内发光效果。
- 塔罗读牌师: 带有发光"光环"边框的圆形头像(古金色
#c5a059)。 - 卡牌皮肤: 展示高级设计的矩形卡片。
- 触觉反馈:
- 每次水平滑动吸附必须触发
expo-haptics的impactAsync(ImpactFeedbackStyle.Light)。 - 点击项目触发
ImpactFeedbackStyle.Medium。
- 每次水平滑动吸附必须触发
- 过渡动画:
- 当用户点击牌阵或卡片时,使用
react-native-reanimated的共享元素过渡动画,将其无缝过渡到详情页面。
- 当用户点击牌阵或卡片时,使用
实现指南
- 使用 React Native 的
FlatList或FlashList实现水平轮播,以提高内存效率。 - 预加载精选项目的资源,防止初始渲染时出现空白方块。
- 确保头部在内容滚动到下方时产生模糊效果(
expo-blur)。