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,再让多个页面共享。这篇文档有问题?