mirror of
https://github.com/wwiinnddyy/LanMountainDesktop.git
synced 2026-06-20 23:54:26 +08:00
fead.圆角,终于统一
This commit is contained in:
@@ -1,39 +1,59 @@
|
||||
# 圆角设计规范
|
||||
# 圆角设计规范 (LanMountain Desktop Corner Radius Spec)
|
||||
|
||||
## 中文
|
||||
## 核心理念 (Core Philosophy)
|
||||
|
||||
本规范用于统一阑山桌面不同层级容器和控件的圆角尺度。
|
||||
为了确保桌面组件在不同尺寸、缩放比例下都能保持视觉一致性和美感,阑山桌面采用了 **固定圆角风格预设 (Fixed Corner Radius Styles)**,全面参考小米澎湃OS (Xiaomi HyperOS) 的设计语言。
|
||||
|
||||
### 基础层级
|
||||
所有的组件和容器必须使用统一的资源键,禁止在 XAML 或代码中使用硬编码的像素值。
|
||||
|
||||
- Level 1:12px,小元素和图标容器
|
||||
- Level 2:16px,小型色块和紧凑控件
|
||||
- Level 3:20px,普通按钮
|
||||
- Level 4:24px,输入面板和小型容器
|
||||
- Component:18px,桌面组件的标准圆角(默认值)
|
||||
- Level 5:28px,普通玻璃面板
|
||||
- Level 6:32px,强化容器
|
||||
- Level 7:36px,大容器、窗口、任务栏
|
||||
## 预设风格 (Preset Styles)
|
||||
|
||||
### 使用建议
|
||||
用户可以在设置中选择以下四种风格之一。系统会自动根据选中的风格动态映射全局圆角 Token。
|
||||
|
||||
- 同层级元素保持相同圆角。
|
||||
- 大容器的圆角大于内部子面板。
|
||||
- 动态尺寸组件可按 `cellSize` 计算圆角,但仍要落在统一范围内。
|
||||
| 风格 (ID) | 名称 (Local) | 组件圆角 (Component) | 设计语义 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **Sharp** | 锐利 | 20px | 紧凑、精确、利落 |
|
||||
| **Balanced** | 平衡 | 24px | **默认值**。和谐、自然、普适 |
|
||||
| **Rounded** | 圆润 | 28px | 保守、柔和、亲切 |
|
||||
| **Open** | 开放 | 32px | 现代、沉浸、夸张 |
|
||||
|
||||
### 动态圆角建议
|
||||
## Token 阶梯映射 (Token Step Mapping)
|
||||
|
||||
```csharp
|
||||
var cornerRadius = Math.Clamp(cellSize * 0.45, 24, 44);
|
||||
```
|
||||
每个风格都定义了一套完整的圆角阶梯,以确保在大容器包裹小元素时满足 **圆角嵌套一致性 (Nesting Consistency)**。
|
||||
|
||||
## English
|
||||
| Token | Sharp | Balanced | Rounded | Open | 典型场景 |
|
||||
| :--- | :--- | :--- | :--- | :--- | :--- |
|
||||
| **Micro** | 4px | 6px | 8px | 10px | 小图标容器、角标 (Badge) |
|
||||
| **Xs** | 8px | 12px | 14px | 16px | 小标签 (Tag)、输入框 |
|
||||
| **Sm** | 10px | 14px | 16px | 20px | 普通按钮、搜索栏、复选框 |
|
||||
| **Md** | 14px | 20px | 24px | 28px | 悬浮菜单、小提示框、子卡片 |
|
||||
| **Lg** | 20px | 28px | 32px | 36px | 普通面板、对话框内容区 |
|
||||
| **Xl** | 24px | 32px | 36px | 40px | 大尺寸容器、设置中心页面 |
|
||||
| **Island** | 28px | 36px | 40px | 44px | 任务栏、全局大悬浮容器 |
|
||||
| **Component** | **20px** | **24px** | **28px** | **32px** | **所有桌面组件 (Widget) 的主边框** |
|
||||
|
||||
This specification keeps corner radius usage consistent across containers and controls.
|
||||
## 开发准则 (Implementation Rules)
|
||||
|
||||
### Reference levels
|
||||
> [!IMPORTANT]
|
||||
> **1. 桌面组件强制约束**:
|
||||
> 所有桌面组件(Widget / Desktop Component)的根容器边框必须使用 `{DynamicResource DesignCornerRadiusComponent}`。严禁对其进行任何比例运算或系数乘积(如 `* scale`),必须保持固定。
|
||||
|
||||
- 12px for small elements
|
||||
- 20px for common buttons
|
||||
- 28px for normal glass panels
|
||||
- 36px for large containers and windows
|
||||
> [!TIP]
|
||||
> **2. 圆角嵌套规则**:
|
||||
> 当一个容器包裹另一个元素时,外层圆角应比内层圆角大一个阶梯。例如:
|
||||
> - 外部使用 `DesignCornerRadiusLg`
|
||||
> - 内部紧贴边缘的内容应使用 `DesignCornerRadiusMd`
|
||||
> 这样可以保证两条圆弧的圆心趋于重合,视觉重心更稳固。
|
||||
|
||||
> [!CAUTION]
|
||||
> **3. 禁止硬编码 (No Hardcoding)**:
|
||||
> 禁止写死数字(如 `CornerRadius="24"`)或私有资源。如果现有 Token 无法满足需求,应优先考虑使用 `SafeValue` 辅助方法封装,但必须声明理由。
|
||||
|
||||
## 常用资源键 (Common Resource Keys)
|
||||
|
||||
- `DesignCornerRadiusComponent` (最常用)
|
||||
- `DesignCornerRadiusMicro`
|
||||
- `DesignCornerRadiusSm`
|
||||
- `DesignCornerRadiusMd`
|
||||
- `DesignCornerRadiusLg`
|
||||
- `DesignCornerRadiusXl`
|
||||
|
||||
62
docs/TYPOGRAPHY_SPEC.md
Normal file
62
docs/TYPOGRAPHY_SPEC.md
Normal file
@@ -0,0 +1,62 @@
|
||||
# 字体排版设计规范 (Typography Specification)
|
||||
|
||||
## 中文
|
||||
|
||||
本规范用于统一阑山桌面各组件(Widget)及页面的字体样式,解决目前组件间字体不协调、厚度不一的问题。通过引入标准化的设计 Token,确保在不同 DPI 和设备上呈现一致的高级感(Premium Look)。
|
||||
|
||||
### 1. 字体家族 (Font Family)
|
||||
|
||||
- **默认字体**:优先使用内置的 `MiSans VF` (Variable Font)。
|
||||
- **回退顺序**:`MiSans VF` -> `MiSans` -> `Microsoft YaHei` -> `Sans-serif`。
|
||||
|
||||
### 2. 字重标准 (Font Weights)
|
||||
|
||||
为了达到“不粗不细”的协调感,我们采用 `Medium (500)` 作为默认正文字重,以应对复杂的背景环境。
|
||||
|
||||
| 角色 | Token | MiSans 权重 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| **Caption/Secondary** | `DesignFontWeightCaption` | `Normal (400)` | 用于不重要的补充说明信息 |
|
||||
| **Body (Default)** | `DesignFontWeightBody` | `Medium (500)` | **核心全局字重**,用于所有常规正文 |
|
||||
| **Title/Header** | `DesignFontWeightTitle` | `SemiBold (600)` | 用于卡片标题、分类标题 |
|
||||
| **Display (Large)** | `DesignFontWeightDisplay` | `SemiBold (600)` | 用于超大号文本(如温度数字) |
|
||||
|
||||
> **注意**:除非极特殊艺术需求,应避免使用 `Thin`, `ExtraLight`, `Light` 或 `Bold (700)`, `Heavy`。
|
||||
|
||||
### 3. 字号标准 (Font Sizes)
|
||||
|
||||
| 角色 | Token | 数值 (px) | 典型应用场景 |
|
||||
| --- | --- | --- | --- |
|
||||
| **Caption** | `DesignFontSizeCaption` | 12 | 底部说明、状态提示 |
|
||||
| **BodySmall** | `DesignFontSizeBodySmall` | 13 | 设置项描述、次要标签 |
|
||||
| **Body** | `DesignFontSizeBody` | 14 | 标准文本、正文内容 |
|
||||
| **BodyLarge** | `DesignFontSizeBodyLarge` | 16 | 加大正文、菜单项 |
|
||||
| **Subtitle** | `DesignFontSizeSubtitle` | 18 | 小节标题、大按钮文字 |
|
||||
| **Title** | `DesignFontSizeTitle` | 24 | 组件标题、大卡片标题 |
|
||||
| **Headline** | `DesignFontSizeHeadline` | 32 | 重要数据指标 |
|
||||
| **Display** | `DesignFontSizeDisplay` | 48 | 天气温度、时间分钟 |
|
||||
| **DisplayLarge** | `DesignFontSizeDisplayLarge` | 54 | 诗词正文、欢迎语 |
|
||||
|
||||
### 4. 行高标准 (Line Heights)
|
||||
|
||||
统一行高可以增强视觉节奏感。
|
||||
|
||||
| Token | 数值 (倍率) | 应用场景 |
|
||||
| --- | --- | --- |
|
||||
| `DesignLineHeightStandard` | 1.2 | 单行标签、紧凑卡片 |
|
||||
| `DesignLineHeightLoose` | 1.5 | 多行诗词、新闻摘要、说明文档 |
|
||||
|
||||
### 5. 使用规范
|
||||
|
||||
1. **禁止硬编码**:严禁在 `.axaml` 中直接写入 `FontSize="18"` 或 `FontWeight="Bold"`。
|
||||
2. **动态资源绑定**:始终使用 `{DynamicResource DesignFontSize...}` 进行绑定。
|
||||
3. **全局样式继承**:`App.axaml` 已经设置了 `TextBlock` 的默认 `FontWeight` 为 `Medium`,除非是 `Caption` 或 `Title`,否则无需重复声明。
|
||||
|
||||
---
|
||||
|
||||
## English (Summary)
|
||||
|
||||
- **Default Font**: MiSans VF.
|
||||
- **Base Weight**: `Medium (500)` for better readability on glass/dark backgrounds.
|
||||
- **Header Weight**: `SemiBold (600)` for a modern premium feel.
|
||||
- **Line Height**: Standardized to 1.2x and 1.5x.
|
||||
- **Tokens**: All components must use `DesignFontSize...` and `DesignFontWeight...` resource keys.
|
||||
@@ -25,6 +25,12 @@
|
||||
- `glass-strong`:主要大容器
|
||||
- `glass-panel`:子区域、小面板、卡片
|
||||
|
||||
### 形状与圆角 (Shape & Corner Radius)
|
||||
|
||||
- **全局统一**:所有 UI 元素的圆角必须遵循 [圆角设计规范](file:///c:/Users/USER154971/Documents/GitHub/LanMountainDesktop/docs/CORNER_RADIUS_SPEC.md)。
|
||||
- **禁止硬编码**:严禁在资源库以外的地方硬编码 `CornerRadius` 数值。
|
||||
- **动态适配**:桌面组件必须使用 `DesignCornerRadiusComponent` 动态资源,以支持用户在设置中全局切换“锐利/平衡/圆润/开放”风格。
|
||||
|
||||
### 可访问性
|
||||
|
||||
- 正文对比度目标不低于 `4.5:1`
|
||||
|
||||
Reference in New Issue
Block a user