Miuix 与三套视觉风格 — Material 3 / Miuix / Cupertino 随心切换
三套风格对比
BiliPai 的设计系统把主题色（Material You 提取或手动选择）和组件风格解耦了——颜色和风格是独立选择的，你可以：
- 用 Material You 粉色 + Miuix 风格
- 用手动蓝色 + Compose Cupertino 风格
- 用系统深色 + Material 3 默认风格
Material 3 默认（Google 风）
来自 Android 12+ 的官方 Material Design 3 规范：
- 圆角：大（约 28dp），圆润柔和
- 间距：宽松，组件之间留白多
- 阴影：淡，几乎看不见投影
- 颜色：Material You 动态色，渐变丰富
- 适合：喜欢 Google 原生 Android 风格的用户
Miuix（小米风）
来自开源库 compose-miuix-ui，模拟小米 MIUI 的组件风格：
- 圆角：中等（约 16dp），方正但不生硬
- 间距：紧凑，信息密度高
- 阴影：中等，有轻微投影增加层次感
- 颜色：Material You 动态色，但显示更饱和
- 特点：底部标签栏用小米经典的分段选择器，顶部标签有下划线指示
- 适合：习惯小米手机界面、喜欢紧凑布局的用户
Compose Cupertino（iOS 风）
来自开源库 compose-cupertino，模拟 iOS 的组件风格：
- 圆角：中等（和 iOS 原生接近）
- 间距：适中
- 阴影：淡
- 颜色：Material You 动态色，但控件色调偏冷
- 特点：底部 Dock 胶囊导航 + iOS 风格开关和滑杆
- 适合：从 iPhone 转 Android、喜欢 iOS 视觉语言的用户
切换方式
路径：设置 → 外观与主题 → 主题风格
直接选择三个风格中的任意一个，即时生效，不需要重启 App。所有页面——首页推荐流、播放页、设置页、搜索页、番剧页——全部组件瞬间切换到新风格。
三套风格共用什么
虽然组件视觉不同，但三套风格共用：
| 共用项 | 说明 |
|---|---|
| 主题色 | Material You 提取或手动选择的颜色方案 |
| 布局结构 | 导航、列表、详情页的布局层级不变 |
| 动画系统 | Shared Transition、Lottie、shimmer 动效一致 |
| 液态玻璃 | 毛玻璃效果在三套风格中都有 |
| 平板折叠屏适配 | 大屏布局逻辑共用 |
| 深色模式 | 三套风格都支持系统深色 |
开发者的设计理念是："三套风格共享主题、组件、动效、模糊与适配策略"——底层逻辑完全复用，只是视觉表现不同。
设计挑战
三套风格给开发者带来了有趣的挑战：
- 同一个功能按钮，在 Material 3 里是圆润圆角，在 Miuix 里是方形圆角，在 Cupertino 里是胶囊形状
- 同一个底部导航，三套风格各自有自己的导航栏组件实现
- 列表项的分隔线、卡片边框、选中态高亮的样式各不相同
BiliPai 的解法是设计了一套 Facade 模式的组件层——业务代码只调用 Facade 组件，Facade 根据当前选择的风格实例化对应库的具体组件。这让三套风格的维护成本可控。
选哪个
| 你的偏好 | 推荐风格 |
|---|---|
| 喜欢原生 Android 最新设计 | Material 3 默认 |
| 用过小米手机、喜欢紧凑有序 | Miuix |
| 用过 iPhone、喜欢 iOS 简洁风格 | Compose Cupertino |
| 无所谓哪个好看选哪个 | 建议试一下 Miuix，信息密度高适合 B 站的信息流场景 |
风格 vs 性能
三套风格对性能的影响微乎其微——差异只在组件的绘制上，底层都是 Compose 的声明式渲染。如果你的设备性能有限，关掉液态玻璃和动效对性能提升更明显，和选哪套风格关系不大。
风格切换的小细节
- 切换风格时当前页面会有一个 100ms 的淡入淡出过渡动画，避免硬切的视觉突兀
- 个别组件（比如弹窗、下拉菜）切换后需要一次手动刷新才能完全应用新样式
- 如果你看到某个组件的样式没跟着切，退出当前页面再进入就会刷新
外观与主题到这里 3 页完结。下一组 视频笔记 介绍 BiliPai 的视频笔记功能。