bytefun
Version:
一个打通了原型设计、UI设计与代码转换、跨平台原生代码开发等的平台
138 lines (101 loc) • 3.67 kB
Markdown
# 蓝星小说APP UI设计规范
## 颜色规范
### 品牌色
| 名称 | 色值 | 使用场景 |
|------|------|----------|
| Primary123（主色） | `#4A90E2` | 主要操作按钮、链接、重要信息强调、阅读进度条 |
| Secondary（次色） | `#7B68EE` | 次要操作、辅助信息、VIP标识 |
| Tertiary（第三色） | `#FF6B6B` | 装饰性元素、特殊标识、热门推荐标签 |
### 功能色
| 名称 | 色值 | 使用场景 |
|------|------|----------|
| Success（成功色） | `#34C759` | 成功状态、完成操作提示 |
| Warning（警告色） | `#FF9500` | 警告信息、需要注意的内容 |
| Error（错误色） | `#FF3B30` | 错误状态、失败操作提示 |
| Info（信息色） | `#5AC8FA` | 一般信息提示、帮助说明 |
### 通用色
| 名称 | 色值 | 使用场景 |
|------|------|----------|
| 页面背景色 | `#F8F9FA` | 主要页面背景 |
| 阅读背景色 | `#FFFEF7` | 阅读页面护眼背景色 |
| 夜间模式背景色 | `#1A1A1A` | 夜间模式页面背景 |
| 卡片背景色 | `#FFFFFF` | 书籍卡片、内容卡片背景 |
| 阴影色 | `#00000020` | 卡片阴影、浮层阴影 |
| 遮罩色 | `#00000080` | 弹窗遮罩、模态框背景 |
| 边框色 | `#E5E5EA` | 组件边框、分割线 |
| 悬停/聚焦边框色 | `#007AFF` | 输入框聚焦、按钮悬停边框 |
## 字体规范
| 名称 | 字号 | 字重 | 颜色 | 使用场景 |
|------|------|------|------|----------|
| 大标题 | 28px | 700 | `#1C1C1E` | 页面主标题、重要标题 |
| 中标题 | 22px | 600 | `#1C1C1E` | 章节标题、卡片标题 |
| 书名标题 | 18px | 600 | `#1C1C1E` | 书籍名称、章节名称 |
| 正文内容 | 16px | 400 | `#1C1C1E` | 正文内容、描述文字 |
| 阅读正文 | 18px | 400 | `#2C2C2E` | 小说阅读正文内容 |
| 辅助文字 | 12px | 400 | `#8E8E93` | 提示文字、次要信息 |
| 作者信息 | 14px | 400 | `#666666` | 作者名称、更新时间等信息 |
## 间距规范
| 名称 | 数值 | 使用场景 |
|------|------|----------|
| 小间距 | 8px | 组件内部元素间距、图标与文字间距 |
| 中间距 | 16px | 卡片内边距、表单元素间距 |
| 大间距 | 24px | 页面边距、模块间距 |
| 页面左右间距 | 16px | 自定义间距说明 |
## 组件规范
### 按钮
#### 主要按钮
**圆角：** 8px
**正常状态：**
- 背景色：`#007AFF`
- 文字色：`#FFFFFF`
- 悬停背景色：`#0056CC`
**禁用状态：**
- 背景色：`#E5E5EA`
- 文字色：`#8E8E93`
#### 次要按钮
**圆角：** 8px
**正常状态：**
- 背景色：`#F2F2F7`
- 文字色：`#007AFF`
- 悬停背景色：`#E5E5EA`
**禁用状态：**
- 背景色：`#F2F2F7`
- 文字色：`#C7C7CC`
### 输入框
#### 默认输入框
**圆角：** 8px
**正常状态：**
- 背景色：`#FFFFFF`
- 边框色：`#E5E5EA`
- 文字色：`#1C1C1E`
- 占位符色：`#8E8E93`
- 聚焦边框色：`#007AFF`
**禁用状态：**
- 背景色：`#F2F2F7`
- 边框色：`#E5E5EA`
- 文字色：`#8E8E93`
### Toast提示
#### 信息提示
- **背景色：** `#000000CF`
- **文字色：** `#FFFFFF`
- **圆角：** 20px
- **最小高度：** 45px
- **最大宽度：** 200px
#### 成功提示
- **背景色：** `#34C759`
- **文字色：** `#FFFFFF`
- **圆角：** 20px
- **最小高度：** 45px
- **最大宽度：** 200px
#### 警告提示
- **背景色：** `#FF9500`
- **文字色：** `#FFFFFF`
- **圆角：** 20px
- **最小高度：** 45px
- **最大宽度：** 200px
#### 错误提示
- **背景色：** `#FF3B30`
- **文字色：** `#FFFFFF`
- **圆角：** 20px
- **最小高度：** 45px
- **最大宽度：** 200px