Appearance
🕒 Wristo Studio · 时间组件使用说明
（Time Component – User Guide · 精简配置版）
时间组件是表盘视觉表达中最核心的基础元素之一。本说明帮助设计师快速掌握时间组件的属性结构、配置方式与设计最佳实践，提高制作品质与效率。
1. 🎯 功能定位
时间组件用于在表盘中显示实时的系统时间，由小时与分钟组成，支持灵活的视觉样式配置与布局能力。
2. 🧩 时间组件结构
时间组件包含三个子元素：
| 元素 | 说明 |
|---|---|
| Hour（小时） | 自动读取用户设备当前小时 |
| Colon（冒号） | 默认显示，可隐藏或替换（视设计需要） |
| Minute（分钟） | 自动读取用户设备当前分钟 |
结构逻辑如下：
[ Hour ] [ Colon ] [ Minute ]
3. 🎨 属性面板说明（视频核心内容整理）
以下内容为你视频中实际展示的可配置项（已去掉字号、字距、冒号样式、等宽模式相关描述）：
3.1 字体（Font）
- Hour、Minute 可分别选择字体
- 支持导入自定义 TTF / OTF
- 不同字体的 baseline 可能存在差异，可通过位置进行微调
建议使用场景：
- 想要整洁统一：小时与分钟使用同一个字体
- 想要风格差异：小时与分钟可以使用不同字体表达层级感
3.2 颜色（Color）
- 支持 HEX 颜色
- 支持透明度调整
- 可用于表达昼夜主题、背景对比与品牌风格化需求
常用风格：
- 亮背景 → 深色字体
- 暗背景 → 高亮颜色（白、青、金）
3.3 旋转（Rotation）
允许整体旋转组件以适配不同风格的布局：
- 常用角度：0° / 15° / 30° / 45°
- 适用于科技风、倾斜布局、特殊构图
注意： 旋转锚点为整个时间组件的中心点。
3.4 对齐方式（Alignment）
用于控制时间组件的锚点位置：
- 左对齐
- 居中对齐（推荐）
- 右对齐
居中对齐能获得最稳定、最平衡的视觉表现。
3.5 位置与层级（Position & Z-index）
- 可自由拖拽定位
- 支持置顶/置底调整与其他元素叠加
- 在复杂表盘构图中可结合 Frame 提升排版稳定性
4. ⚙️ 操作流程（按你的视频步骤重新整理）
步骤 1：添加时间组件
左侧组件列表 → 基础元素 → 时间（Time）
组件生成后会自动根据系统时间显示。
步骤 2：配置字体
点击 Hour 或 Minute → 右侧选择字体
视频中展示的功能：可自由替换任意自定义字体
步骤 3：设置颜色
在右侧面板选择字体颜色 可适当调节透明度以适配背景亮度
步骤 4：调整位置与对齐
- 拖拽调整位置
- 选择左/中/右对齐
- 旋转形成不同视觉效果
步骤 5：布局优化
- 结合参考线保持平衡
- 在复杂表盘中建议将时间组件放入 Frame 中获得更强的约束
5. 🌟 设计最佳实践（更新版）
✔ 大数字款
- 字体统一
- 居中对齐
- 强对比颜色
✔ 女生优雅款
- 轻量 serif 字体
- 淡金、白、粉金配色
- 小角度旋转可增加动态感
✔ 男性极简风
- 稍粗的无衬线字体
- 纯白或浅青色
- 垂直或水平严格对齐
6. 🧪 常见问题
Q1：为什么小时与分钟基线不一样高？
不同字体 baseline 不一致，属于正常情况。 → 手动微调 Y 位置即可。
Q2：旋转后位置对不上？
旋转基点在组件中心，如需更稳定的旋转基准 → 放入 Frame 中。
Q3：数字看起来不居中？
检查对齐方式是否为“居中模式”。
7. 📎 视频教程
你可以在文档最后附上该视频作为教学补充：