00 / 00

移动端主题系统

移动端 HeroUI Native、Uniwind 和 01MVP 视觉规范的同步方式

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

移动端主题由三层组成

01MVP 视觉规则

品牌色、语气、按钮层级、页面信息结构。

Uniwind

用 Tailwind 风格写 React Native 样式。

HeroUI Native

提供移动端常用基础组件。

统一什么,不强求什么

需要统一可以不同
品牌色和语气Web 和 App 的具体布局
按钮尺寸层级每个卡片的结构细节
表单错误提示桌面端和移动端的导航形态
空状态和加载状态端侧特有的手势和页面转场

移动端页面检查点

  • 一个页面里别混用太多按钮高度。
  • 主操作、次操作、危险操作要有稳定层级。
  • 输入框、卡片、列表项的间距要成体系。
  • 字体大小按标题、正文、说明、标签分层。
  • loading、empty、error 三种状态都要设计到。

复制给 AI

请帮我检查 01MVP mobile 的 UI 主题一致性。
重点看按钮高度、字体层级、卡片间距、表单状态、空状态和错误提示。

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

这篇文档有问题?