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

概述

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

设计原则

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

色彩系统

主色调 - 中国水墨

/* 水墨色彩系统 */
--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	花青色，用于信息提示

字体系统

字体层级

// 字体样式定义
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	标签、提示文字

布局规范

基础布局结构

/* 移动端标准布局 */
.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. 头部导航栏

// 标准头部导航栏
<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. 卡片组件

// 标准卡片
<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. 按钮组件

主要按钮

<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>

次要按钮

<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. 输入框组件

<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. 标签组件

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

列表规范

1. 单列列表项

<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. 网格列表项

<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>

底部标签栏

// 底部标签栏容器
<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	模态框、抽屉动画

阴影动效

/* 基础阴影 */
.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	平板横屏

适配规范

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

可访问性规范

颜色对比度

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

无障碍设计

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

图标规范

图标使用

// 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	用户头像

图片处理

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

交互规范

手势规范

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

加载状态

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

开发规范

文件结构

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

命名规范

组件命名：PascalCase
文件命名：kebab-case
样式类名：kebab-case
常量命名：UPPER_SNAKE_CASE
变量命名：camelCase

代码风格

// 样式常量
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',
};

测试规范

兼容性测试

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

功能测试

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

更新记录

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

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

mobile-ui-design-guidelines.md 11 KB Байнгын холболт Түүх Анхны өгөгдөл

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

概述

设计原则

色彩系统

主色调 - 中国水墨

语义色彩

字体系统

字体层级

字体规范

布局规范

基础布局结构

间距系统

组件规范

1. 头部导航栏

2. 卡片组件

3. 按钮组件

主要按钮

次要按钮

4. 输入框组件

5. 标签组件

列表规范

1. 单列列表项

2. 网格列表项

底部标签栏

动效规范

过渡动画

阴影动效

响应式设计

断点系统

适配规范

可访问性规范

颜色对比度

无障碍设计

图标规范

图标使用

图标尺寸

图片规范

图片比例

图片处理

交互规范

手势规范

加载状态

开发规范

文件结构

命名规范

代码风格

测试规范

兼容性测试

功能测试

更新记录

mobile-ui-design-guidelines.md 11 KB

Байнгын холболт Түүх Анхны өгөгдөл