d8d-vite-starter/docs/mobile-first-level-page-name-spec.md

一级页面名称规范文档

概述

本文档定义了移动端一级页面名称的字体规范，确保整个应用的一致性和专业性。

页面名称规范

1. 首页页面名称

• 页面名称: 银龄智慧
• 位置: 顶部导航栏左侧（LOGO右侧）
• 显示状态: 始终显示

2. 银龄岗位页面名称

• 页面名称: 银龄岗位
• 位置: 顶部导航栏左侧（LOGO右侧）
• 显示状态: 始终显示

3. 银龄人才页面名称

• 页面名称: 银龄人才
• 位置: 顶部导航栏左侧（LOGO右侧）
• 显示状态: 始终显示

4. 时间银行页面名称

• 页面名称: 时间银行
• 位置: 顶部导航栏左侧（LOGO右侧）
• 显示状态: 始终显示

5. 银铃智库页面名称

• 页面名称: 银铃智库
• 位置: 顶部导航栏左侧（LOGO右侧）
• 显示状态: 始终显示

6. 政策资讯页面名称

• 页面名称: 政策资讯
• 位置: 顶部导航栏左侧（LOGO右侧）
• 显示状态: 始终显示

7. 老年大学页面名称

• 页面名称: 老年大学
• 位置: 顶部导航栏左侧（LOGO右侧）
• 显示状态: 始终显示

2. 字体规范

属性	规范值	说明
字体族	font-serif	衬线字体，体现传统智慧感
字号	text-xl (20px)	一级页面标题标准字号
字重	font-bold	粗体，突出重要性
字间距	tracking-wide	宽松字间距，提升可读性
颜色	#2f1f0f (COLORS.text.primary)	墨色文字，符合水墨风格

3. 样式代码

// 首页标题样式
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 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 常量定义 - 色彩规范