# 银龄智慧移动端UI设计规范

## 概述

本文档定义了银龄智慧移动端应用的UI设计规范，基于中国水墨风格设计理念，确保所有移动端页面保持一致的视觉风格和用户体验。

## 设计原则

1. **文化性**：体现中国传统文化美学，以水墨风格为核心
2. **适老性**：专为银龄用户群体优化，保证良好的可访问性
3. **简洁性**：界面简洁直观，减少认知负担
4. **一致性**：所有页面遵循统一的设计语言和交互模式

## 色彩系统

### 主色调 - 中国水墨

```css
/* 水墨色彩系统 */
--ink-light: #f5f3f0;     /* 宣纸背景色 */
--ink-medium: #d4c4a8;    /* 淡墨 */
--ink-dark: #8b7355;      /* 浓墨 */
--ink-deep: #3a2f26;      /* 焦墨 */

/* 点缀色彩 */
--accent-red: #a85c5c;    /* 朱砂 */
--accent-blue: #4a6b7c;   /* 花青 */
--accent-green: #5c7c5c;  /* 石绿 */

/* 文字色彩 */
--text-primary: #2f1f0f;   /* 墨色文字 */
--text-secondary: #5d4e3b; /* 淡墨文字 */
--text-light: #8b7355;     /* 极淡文字 */
```

### 语义色彩

| 场景 | 颜色值 | 说明 |
|------|--------|------|
| 成功 | #5c7c5c | 石绿色，用于正向反馈 |
| 警告 | #a85c5c | 朱砂色，用于警示信息 |
| 错误 | #a85c5c | 朱砂色，用于错误提示 |
| 信息 | #4a6b7c | 花青色，用于信息提示 |

## 字体系统

### 字体层级

```typescript
// 字体样式定义
const FONT_STYLES = {
  title: 'font-serif text-3xl font-bold tracking-wide',        // 页面标题
  sectionTitle: 'font-serif text-2xl font-semibold tracking-wide', // 区块标题
  body: 'font-sans text-base leading-relaxed',                 // 正文文本
  caption: 'font-sans text-sm',                               // 说明文字
  small: 'font-sans text-xs',                                 // 辅助文字
};
```

### 字体规范

| 类型 | 字体 | 大小 | 行高 | 字重 | 用途 |
|------|------|------|------|------|------|
| 标题 | serif | 28px | 1.2 | bold | 页面主标题 |
| 区块标题 | serif | 24px | 1.2 | semibold | 内容区块标题 |
| 正文 | sans | 16px | 1.6 | normal | 主要内容文字 |
| 说明 | sans | 14px | 1.4 | normal | 辅助说明文字 |
| 标签 | sans | 12px | 1.3 | normal | 标签、提示文字 |

## 布局规范

### 基础布局结构

```css
/* 移动端标准布局 */
.container {
  min-height: 100vh;
  background-color: var(--ink-light);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.content-area {
  padding: 16px;
  margin-bottom: 64px; /* 底部标签栏高度 */
}
```

### 间距系统

| 间距 | 数值 | 用途 |
|------|------|------|
| xs | 4px | 图标与文字间距 |
| sm | 8px | 组件内部间距 |
| md | 16px | 组件间间距 |
| lg | 24px | 区块间间距 |
| xl | 32px | 页面区块间距 |

## 组件规范

### 1. 头部导航栏

```typescript
// 标准头部导航栏
<header className="shadow-sm sticky top-0 z-10 border-b border-opacity-20"
  style={{ backgroundColor: 'var(--ink-light)', borderColor: 'var(--ink-medium)' }}>
</header>
```

**规范说明**：
- 高度：自适应内容，建议auto
- 背景：宣纸色(var(--ink-light))
- 边框：淡墨色(var(--ink-medium))，透明度20%
- 阴影：轻微阴影，保持水墨质感
- 定位：sticky，顶部固定

### 2. 卡片组件

```typescript
// 标准卡片
<div className="rounded-xl p-4 shadow-sm hover:shadow-lg transition-all duration-300 backdrop-blur-sm"
  style={{ 
    backgroundColor: 'rgba(255,255,255,0.8)',
    border: `1px solid var(--ink-medium)`
  }}>
</div>
```

**卡片变体**：
- 普通卡片：rgba(255,255,255,0.8)
- 高亮卡片：rgba(255,255,255,0.9)
- 透明卡片：rgba(255,255,255,0.6)

### 3. 按钮组件

#### 主要按钮
```typescript
<button className="px-4 py-2 rounded-full transition-all duration-300 hover:shadow-md"
  style={{
    backgroundColor: 'var(--ink-dark)',
    color: 'white',
    borderColor: 'var(--ink-medium)'
  }}>
</button>
```

#### 次要按钮
```typescript
<button className="px-4 py-2 rounded-full border transition-all duration-300 hover:shadow-md"
  style={{
    color: 'var(--text-primary)',
    borderColor: 'var(--ink-medium)',
    backgroundColor: 'transparent'
  }}>
</button>
```

### 4. 输入框组件

```typescript
<div className="flex items-center rounded-full px-4 py-3 shadow-sm border transition-all duration-300 focus-within:shadow-md"
  style={{ 
    backgroundColor: 'rgba(255,255,255,0.7)',
    borderColor: 'var(--ink-medium)' 
  }}>
</div>
```

### 5. 标签组件

```typescript
<span className="px-2 py-1 rounded-full text-xs"
  style={{
    backgroundColor: 'var(--accent-blue)',
    color: 'white'
  }}>
</span>
```

## 列表规范

### 1. 单列列表项

```typescript
<div className="flex items-center p-4 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer backdrop-blur-sm"
  style={{
    backgroundColor: 'rgba(255,255,255,0.8)',
    border: `1px solid var(--ink-medium)`
  }}>
  {/* 左侧图片/图标 */}
  <img className="w-14 h-14 rounded-full object-cover mr-4 border-2" 
    style={{ borderColor: 'var(--ink-medium)' }} />
  
  {/* 中间内容 */}
  <div className="flex-1">
    <h4 className="font-medium" style={{ color: 'var(--text-primary)' }}>标题</h4>
    <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>副标题</p>
  </div>
  
  {/* 右侧操作 */}
  <div className="text-right">
    <span className="text-xs">附加信息</span>
  </div>
</div>
```

### 2. 网格列表项

```typescript
<div className="grid grid-cols-2 gap-3">
  <div className="rounded-xl p-3 cursor-pointer transition-all duration-300 hover:shadow-lg backdrop-blur-sm"
    style={{
      backgroundColor: 'rgba(255,255,255,0.8)',
      border: `1px solid var(--ink-medium)'
    }}>
  </div>
</div>
```

## 底部标签栏

```typescript
// 底部标签栏容器
<footer className="bg-white border-t border-gray-200 py-2">
  <div className="grid grid-cols-5 gap-2 text-center">
    <button className="flex flex-col items-center py-1 text-orange-500">
      <span className="text-xl mb-1">🏠</span>
      <span className="text-xs font-medium">首页</span>
    </button>
  </div>
</footer>
```

## 动效规范

### 过渡动画

| 类型 | 时长 | 缓动函数 | 用途 |
|------|------|----------|------|
| 快速 | 200ms | ease-out | 按钮悬停、标签切换 |
| 标准 | 300ms | ease-in-out | 页面切换、卡片展开 |
| 缓慢 | 500ms | ease-in-out | 模态框、抽屉动画 |

### 阴影动效

```css
/* 基础阴影 */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* 悬停阴影 */
.hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 点击阴影 */
.active\:shadow-lg:active {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
```

## 响应式设计

### 断点系统

| 断点 | 宽度 | 描述 |
|------|------|------|
| xs | < 375px | 小屏手机 |
| sm | ≥ 375px | 标准手机 |
| md | ≥ 768px | 平板竖屏 |
| lg | ≥ 1024px | 平板横屏 |

### 适配规范

1. **小屏适配**：最小宽度320px，保证核心功能可用
2. **大屏优化**：最大宽度414px，居中显示，两侧留白
3. **字体适配**：基础字体16px，支持系统字体缩放
4. **触摸目标**：最小44×44px，符合iOS人机界面指南

## 可访问性规范

### 颜色对比度

| 文字颜色 | 背景颜色 | 对比度 | 是否符合WCAG 2.1 |
|----------|----------|--------|------------------|
| #2f1f0f | #f5f3f0 | 8.2:1 | AAA级 |
| #5d4e3b | #f5f3f0 | 5.9:1 | AA级 |
| #8b7355 | #f5f3f0 | 3.9:1 | AA级（大字体） |

### 无障碍设计

1. **语义标签**：使用正确的HTML语义标签
2. **键盘导航**：支持Tab键导航，焦点样式清晰
3. **屏幕阅读器**：提供aria-label和aria-describedby属性
4. **颜色无依赖**：重要信息不仅通过颜色传达
5. **文字缩放**：支持系统文字大小调整

## 图标规范

### 图标使用

```typescript
// Heroicons 使用示例
import { BriefcaseIcon } from '@heroicons/react/24/outline';

<BriefcaseIcon className="w-6 h-6" style={{ color: 'var(--accent-blue)' }} />
```

### 图标尺寸

| 用途 | 尺寸 | 示例 |
|------|------|------|
| 导航图标 | 24×24px | 底部标签栏 |
| 功能图标 | 20×20px | 卡片内图标 |
| 装饰图标 | 16×16px | 标签内小图标 |
| 大图标 | 32×32px | 空状态图标 |

## 图片规范

### 图片比例

| 类型 | 比例 | 用途 |
|------|------|------|
| 正方形 | 1:1 | 头像、缩略图 |
| 横向 | 16:9 | 轮播图、横幅 |
| 纵向 | 4:3 | 卡片图片 |
| 圆形 | 1:1 | 用户头像 |

### 图片处理

1. **懒加载**：使用loading="lazy"属性
2. **占位图**：提供默认占位图片
3. **WebP格式**：优先使用WebP格式，提供JPG备选
4. **尺寸优化**：移动端图片宽度不超过750px

## 交互规范

### 手势规范

| 手势 | 操作 | 反馈 |
|------|------|------|
| 点击 | 导航、选择 | 背景色变化 |
| 长按 | 上下文菜单 | 震动反馈 |
| 滑动 | 页面切换 | 视觉过渡 |
| 下拉 | 刷新 | 加载动画 |

### 加载状态

1. **骨架屏**：内容加载时的占位效果
2. **加载动画**：旋转动画或进度条
3. **错误状态**：友好的错误提示和重试按钮
4. **空状态**：清晰的空状态说明和引导

## 开发规范

### 文件结构

```
src/client/mobile/
├── components/          # 通用组件
│   ├── [ComponentName].tsx
│   └── index.ts
├── pages/              # 页面组件
│   ├── [PageName].tsx
│   └── index.ts
├── layouts/            # 布局组件
├── hooks/              # 自定义hooks
├── utils/              # 工具函数
└── styles/             # 样式文件
    ├── colors.ts       # 色彩定义
    ├── fonts.ts        # 字体定义
    └── animations.ts   # 动画定义
```

### 命名规范

1. **组件命名**：PascalCase
2. **文件命名**：kebab-case
3. **样式类名**：kebab-case
4. **常量命名**：UPPER_SNAKE_CASE
5. **变量命名**：camelCase

### 代码风格

```typescript
// 样式常量
const COLORS = {
  ink: {
    light: '#f5f3f0',
    medium: '#d4c4a8',
    dark: '#8b7355',
    deep: '#3a2f26',
  },
  accent: {
    red: '#a85c5c',
    blue: '#4a6b7c',
    green: '#5c7c5c',
  }
};

// 字体样式
const FONT_STYLES = {
  title: 'font-serif text-3xl font-bold tracking-wide',
  body: 'font-sans text-base leading-relaxed',
};
```

## 测试规范

### 兼容性测试

1. **设备测试**：iPhone SE - iPhone 15 Pro Max
2. **系统测试**：iOS 14+，Android 8+
3. **浏览器测试**：Safari，Chrome，微信浏览器
4. **网络测试**：3G，4G，WiFi环境

### 功能测试

1. **触摸测试**：所有可点击元素测试
2. **手势测试**：滑动、下拉、长按等
3. **状态测试**：加载、空状态、错误状态
4. **性能测试**：滚动流畅度、动画性能

## 更新记录

| 版本 | 日期 | 更新内容 | 更新人 |
|------|------|----------|--------|
| 1.0 | 2025-07-21 | 初始版本创建 | 架构师 |

---

本文档将持续更新，如有疑问请联系UI设计团队。