|
|
@@ -0,0 +1,88 @@
|
|
|
+# 一级页面名称规范文档
|
|
|
+
|
|
|
+## 概述
|
|
|
+本文档定义了移动端一级页面名称的字体规范,确保整个应用的一致性和专业性。
|
|
|
+
|
|
|
+## 页面名称规范
|
|
|
+
|
|
|
+### 1. 首页页面名称
|
|
|
+- **页面名称**: 银龄智慧
|
|
|
+- **位置**: 顶部导航栏左侧(LOGO右侧)
|
|
|
+- **显示状态**: 始终显示
|
|
|
+
|
|
|
+### 2. 字体规范
|
|
|
+| 属性 | 规范值 | 说明 |
|
|
|
+|------|--------|------|
|
|
|
+| 字体族 | `font-serif` | 衬线字体,体现传统智慧感 |
|
|
|
+| 字号 | `text-xl` (20px) | 一级页面标题标准字号 |
|
|
|
+| 字重 | `font-bold` | 粗体,突出重要性 |
|
|
|
+| 字间距 | `tracking-wide` | 宽松字间距,提升可读性 |
|
|
|
+| 颜色 | `#2f1f0f` (COLORS.text.primary) | 墨色文字,符合水墨风格 |
|
|
|
+
|
|
|
+### 3. 样式代码
|
|
|
+```typescript
|
|
|
+// 首页标题样式
|
|
|
+const homePageTitleStyle = {
|
|
|
+ fontFamily: 'font-serif',
|
|
|
+ fontSize: 'text-xl', // 20px
|
|
|
+ fontWeight: 'font-bold',
|
|
|
+ letterSpacing: 'tracking-wide',
|
|
|
+ color: '#2f1f0f'
|
|
|
+};
|
|
|
+
|
|
|
+// 实际使用示例
|
|
|
+<h1 className="font-serif text-xl font-bold tracking-wide" style={{ color: '#2f1f0f' }}>
|
|
|
+ 银龄智慧
|
|
|
+</h1>
|
|
|
+```
|
|
|
+
|
|
|
+### 4. 响应式规范
|
|
|
+- **移动端**: text-xl (20px)
|
|
|
+- **平板端**: text-2xl (24px)
|
|
|
+- **折叠屏**: text-xl (20px) 保持与移动端一致
|
|
|
+
|
|
|
+### 5. 对比度要求
|
|
|
+- 与背景色对比度: 4.5:1 (符合WCAG 2.1 AA标准)
|
|
|
+- 背景色: `#f5f3f0` (宣纸背景色)
|
|
|
+
|
|
|
+### 6. 字体备选方案
|
|
|
+```css
|
|
|
+/* CSS Font Stack */
|
|
|
+font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
|
|
|
+```
|
|
|
+
|
|
|
+### 7. 与LOGO的配合关系
|
|
|
+- LOGO与标题间距: `space-x-2` (8px)
|
|
|
+- 垂直对齐: `items-center`
|
|
|
+- 整体高度: 32px (LOGO 32px + 标题 28px)
|
|
|
+
|
|
|
+### 8. 可访问性规范
|
|
|
+- 最小触摸目标: 44x44px
|
|
|
+- 屏幕阅读器支持: 添加合适的aria-label
|
|
|
+- 高对比度模式: 自动适配系统设置
|
|
|
+
|
|
|
+### 9. 国际化支持
|
|
|
+- 中文: 银龄智慧
|
|
|
+- 英文: Silver Wisdom
|
|
|
+- 字体保持相同规范,字号可微调
|
|
|
+
|
|
|
+### 10. 设计原则
|
|
|
+- **一致性**: 所有一级页面标题使用相同规范
|
|
|
+- **可识别性**: 确保用户在不同页面间能快速识别当前位置
|
|
|
+- **美观性**: 符合中国水墨风格设计理念
|
|
|
+- **可用性**: 确保在各种设备和环境下的良好体验
|
|
|
+
|
|
|
+## 实施检查清单
|
|
|
+- [ ] 字号符合规范 (20px)
|
|
|
+- [ ] 字体族使用衬线字体
|
|
|
+- [ ] 颜色使用指定墨色
|
|
|
+- [ ] 字间距设置正确
|
|
|
+- [ ] 与LOGO间距合适
|
|
|
+- [ ] 响应式适配完成
|
|
|
+- [ ] 可访问性测试通过
|
|
|
+- [ ] 跨浏览器兼容性验证
|
|
|
+
|
|
|
+## 相关文件
|
|
|
+- `src/client/mobile/pages/NewHomePage.tsx` - 首页实现文件
|
|
|
+- `src/client/mobile/styles/` - 样式文件目录
|
|
|
+- `COLORS` 常量定义 - 色彩规范
|