LanMountainDesktop/docs/CORNER_RADIUS_SPEC.md

圆角设计规范 (Corner Radius Design System)

基于小米澎湃OS 3 (HyperOS) 设计语言

设计理念

澎湃OS 3 采用**"生命感美学"**设计语言，强调：

• 全局圆角设计 - 所有界面元素均采用圆角
• 视觉舒适统一 - 柔和、现代、细腻
• 多级渲染 - 配合模糊混色与阴影
• 层级分明 - 大容器使用大圆角，小元素使用小圆角

圆角数值体系

核心数值

级别	圆角值 (px)	用途
Level 0	0	特殊场景（无圆角需求）
Level 1	12	小元素、图标内边角、ListBoxItem
Level 2	16	色块按钮、小组件
Level 3	20	普通按钮、组件预览
Level 4	24	输入框、小型面板
Level 5	28	面板/卡片 (glass-panel)
Level 6	32	Mica 风格面板 (mica-strong)
Level 7	36	大容器 (glass-strong)、任务栏、窗口

动态圆角

动态圆角根据格子大小（cellSize）动态计算：

// 小元素
CornerRadius = Math.Clamp(cellSize * 0.35, 16, 28);

// 小组件
CornerRadius = Math.Clamp(cellSize * 0.45, 24, 44);

// 大容器（任务栏/窗口）
CornerRadius = Math.Clamp(cellSize * 0.45, 24, 44);

系数参考：

• 系数范围：0.35 - 0.45
• 最小值限制：12 - 24 px
• 最大值限制：28 - 44 px

组件圆角速查表

基础控件

控件	圆角值	代码位置
Button	20px	GlassModule.axaml
ToggleSwitch	继承系统	-
TextBox	20px	glass-panel
ComboBox	20px	glass-panel
NumberBox	20px	glass-panel

容器样式类

样式类	圆角值	说明
.glass-panel	28px	普通玻璃面板
.glass-strong	36px	加强玻璃面板（任务栏）
.mica-strong	36px	Mica 风格面板（设置页）
.glass-overlay	0px	覆盖层（无圆角）

特殊场景

场景	圆角值	说明
窗口整体	36px	组件库/设置窗口
窗口标题栏	36px	仅顶部圆角 (36,36,0,0)
颜色选择器色块	12px	Monet 颜色/推荐色
设置页 ListBoxItem	12px	导航项
预览视口	12-16px	壁纸/网格预览

圆角层级视觉示例

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Level 7: 大容器 (36px)                                       │
│   ┌───────────────────────────────────────────────────────────┐ │
│   │                                                           │ │
│   │   Level 6: Mica 面板 (36px)                              │ │
│   │   ┌─────────────────────────────────────────────────────┐ │ │
│   │   │                                                     │ │ │
│   │   │   Level 5: 玻璃面板 (28px)                         │ │ │
│   │   │   ┌─────────────────────────────────────────────┐  │ │ │
│   │   │   │                                             │  │ │ │
│   │   │   │   Level 4: 输入面板 (24px)                  │  │ │ │
│   │   │   │   ┌─────────────────────────────────────┐   │  │ │ │
│   │   │   │   │                                     │   │  │ │ │
│   │   │   │   │   Level 3: 按钮 (20px)             │   │  │ │ │
│   │   │   │   │   ┌─────────────────────────────┐   │   │  │ │ │
│   │   │   │   │   │ Level 2: 色块 (16px)       │   │   │  │ │ │
│   │   │   │   │   │ ┌─────────────────────┐   │   │   │  │ │ │
│   │   │   │   │   │ │ Level 1: 小元素    │   │   │   │  │ │ │
│   │   │   │   │   │ │      (12px)        │   │   │   │  │ │ │
│   │   │   │   │   │ └─────────────────────┘   │   │   │  │ │ │
│   │   │   │   │   └─────────────────────────────┘   │   │  │ │ │
│   │   │   │   └─────────────────────────────────────┘   │  │ │ │
│   │   │   └─────────────────────────────────────────────┘  │ │ │
│   │   └─────────────────────────────────────────────────────┘ │ │
│   └───────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

在 XAML 中使用

直接使用固定值

<Border Classes="glass-strong" CornerRadius="36">
    <!-- 内容 -->
</Border>

<Button CornerRadius="20">点击</Button>

使用样式类

<!-- 使用预定义的 glass-panel 样式 -->
<Border Classes="glass-panel">
    <TextBlock Text="面板内容" />
</Border>

<!-- 组合多个样式类 -->
<Border Classes="glass-strong mica-strong">
    <!-- 内容 -->
</Border>

动态圆角（Code-Behind）

// 根据格子大小动态计算圆角
var cellSize = 100; // 假设格子大小
var cornerRadius = Math.Clamp(cellSize * 0.45, 24, 44);

BottomTaskbarContainer.CornerRadius = new CornerRadius(cornerRadius);

新增控件时的圆角规范

1. 确定元素层级 - 根据容器大小选择合适的级别
2. 遵循视觉一致性 - 同层级的元素使用相同圆角
3. 考虑内容安全区 - 圆角不应遮挡重要内容
4. 响应式适配 - 大屏幕使用较大圆角，小屏幕使用较小圆角

快速参考

新控件圆角选择流程：

1. 是窗口/大容器？        → Level 7 (36px)
2. 是面板/卡片？          → Level 5-6 (28-36px)
3. 是按钮/输入框？        → Level 3-4 (20-24px)
4. 是小组件/色块？        → Level 2 (16px)
5. 是图标/小元素？        → Level 1 (12px)

附录：修改历史

日期	修改人	说明
2026-03-02	AI Assistant	初始规范，基于澎湃OS 3 设计语言

参考资料

• 澎湃OS 生命感美学设计
• Xiaomi HyperOS Design Guidelines
• 小米小部件审核规范 (dev.mi.com)