移动端主题系统

移动端 UI 要和 Web 模板看起来是同一个产品，但不用复制 Web 的每个组件。更合理的做法是共享视觉规则：颜色、间距、字体层级、圆角、按钮状态和信息密度。

你将学到

• 移动端主题由哪三层组成
• Web 和 App 需要统一什么、可以不同什么
• 移动端页面的基本视觉检查点
• 什么时候该抽全局 token、什么时候写页面样式

移动端主题由三层组成

移动端的视觉体系不是从零开始的，它由三层协作：

01MVP 视觉规则 -- 品牌色、语气、按钮层级、页面信息结构。这是跨端共享的基础，改品牌色就改这里。

Uniwind -- 用 Tailwind 风格写 React Native 样式。让你在移动端用和 Web 类似的工具习惯写样式，降低心智负担。

HeroUI Native -- 提供移动端常用的基础组件，比如按钮、输入框、卡片。不用自己从 View 开始搭。

三层各司其职。改品牌色和按钮层级时动 01MVP 视觉规则，写页面布局时用 Uniwind，用基础组件时从 HeroUI Native 取。不要在页面级别覆盖全局 token。

统一什么，不强求什么

底线是用户在 Web 和 App 之间切换时，不会觉得进了两个不同的产品。具体布局可以不同，但颜色、间距感、按钮层级要保持一致。

移动端页面检查点

检查页面时，关注这几件事：

• 一个页面里别混用太多按钮高度，主操作、次操作、危险操作要有稳定层级
• 输入框、卡片、列表项的间距要成体系，不要每个页面自定义一套
• 字体大小按标题、正文、说明、标签分层，不要随意使用中间值
• loading、empty、error 三种状态都要设计到，不能只考虑"有数据"的情况

不要为了单个页面好看去写一次性样式。如果需要调整，优先抽出可复用组件或主题 token，再让多个页面共享。

主题调试技巧

调试主题时，可以用这些方法快速定位问题：

• 在真机和模拟器上都看一下，暗色模式下的表现往往不同
• 用 React Native Debugger 的 Inspector 工具查看元素的实际样式值
• 对比 Web 和 App 的同一页面，确认视觉一致性

如果发现某个页面的颜色或间距不对，先检查是不是在页面级别覆盖了全局 token。这种覆盖是最常见的主题不一致原因。

下一步

主题确定后，进入 Apple 与 iOS 配置 完成签名、证书和 TestFlight 准备。