# 律助App - 手机端统一UI设计规范

## 🎨 整体视觉风格

### 设计主题

#### 专业科技感 + 人文关怀

- 主色调：专业蓝色系（#1A4B8C 深蓝，#2D6BC9 中蓝，#E8F1FD 浅蓝）
- 辅助色：公正金色（#D4AF37），成功绿色（#27AE60）
- 字体：系统默认字体，支持动态字体大小调整
- 圆角：12px统一圆角，保持现代感
- 阴影：三层阴影系统，营造层次感

## 📱 页面布局规范

### 1. 首页设计

**布局结构：**

- 状态栏：透明背景，白色图标
- 导航栏：纯白背景，左侧Logo，右侧消息图标
- 内容区：浅蓝渐变背景（#F8FBFF → #FFFFFF）

**核心组件：**

- **语音悬浮按钮**：直径64px，主蓝径向渐变，位于右下角固定位置，带有微脉动动画
- **功能入口网格**：3×2宫格布局，每个卡片尺寸为(屏幕宽度-48px)/3
- **案件状态区**：白色卡片，内含进度条和待办事项
- **内容推荐区**：横向滚动卡片，展示热点问题和普法内容

**交互细节：**

- 卡片悬停效果：上浮4px，阴影加深
- 加载状态：骨架屏动画
- 空状态：插画+引导文字

### 2. 咨询页面设计

**对话界面布局：**

- 顶部：对话标题栏，包含返回按钮和功能菜单
- 中部：消息列表，占满剩余空间
- 底部：输入区域，包含文本输入和语音按钮

**消息气泡设计：**

- **用户消息**：浅蓝色背景（#E8F1FD），右对齐，圆角18px
- **AI回复**：白色背景，左对齐，左侧金色竖条标识，圆角18px
- **法律条文**：金色渐变背景（#FFF9E6），特殊边框，专属图标

**输入区域：**

- 文本输入框：圆角24px，带占位符提示
- 语音按钮：圆形，主蓝色背景
- 快捷问题：横向滚动标签

### 3. 工具页面设计

**分类导航：**

- 横向滚动标签栏，选中状态蓝色底+白字
- 分类图标：线性图标，选中时填充主蓝色

**工具卡片：**

- 2列网格布局，间距16px
- 卡片尺寸：正方形，包含图标和名称
- 图标容器：圆形背景，浅蓝色渐变
- 悬停效果：轻微缩放和阴影变化

**工具详情页：**

- 步骤引导式界面
- 大字体输入框
- 可视化结果展示
- 一键导出功能

### 4. 案件页面设计

**时间轴布局：**

- 垂直时间线，左侧对齐
- 节点：实心圆点，不同状态不同颜色
- 连接线：虚线，浅灰色
- 事件卡片：白色背景，包含时间和描述

**进度追踪：**

- 环形进度条或线性进度条
- 阶段标记：不同颜色区分状态
- 待办清单：复选框列表形式

### 5. 服务页面设计

**地图/列表视图：**

- 顶部筛选栏：毛玻璃效果
- 机构卡片：包含头像、评分、距离等信息
- 地图标记：不同颜色区分机构类型

**律师详情页：**

- 头部：大图背景，半透明覆盖
- 信息区：白色卡片，包含专业领域和评价
- 服务选项：卡片式选择器

### 6. 学习页面设计

**内容展示：**

- 分类导航：图标+文字形式
- 内容卡片：16:9比例，包含封面和标题
- 进度指示：底部进度条

**学习界面：**

- 视频播放器：自定义控制条
- 课程目录：可折叠列表
- 互动测试：选项卡片形式

### 7. 个人中心设计

**信息布局：**

- 头部：浅蓝渐变背景，用户头像居中
- 功能列表：图标+文字，分组显示
- 设置项：开关、选择器等标准组件

## 🎯 交互设计规范

### 导航模式

- **底部标签栏**：7个主要功能入口
- **返回导航**：左上角返回按钮+手势返回
- **模态弹窗**：从底部滑出，暗色遮罩

### 动效规范

- **页面切换**：淡入淡出，时长300ms
- **卡片出现**：从下往上轻微移动
- **加载状态**：骨架屏+渐显动画
- **成功反馈**：轻微弹跳+颜色变化

### 手势操作

- **下拉刷新**：自定义加载动画
- **左滑删除**：确认式删除操作
- **长按编辑**：震动反馈+编辑模式

## 🎨 组件设计系统

### 按钮系统

**主要按钮：**

- 背景：主蓝色渐变
- 圆角：8px
- 内边距：12px 24px
- 字体：白色，中等字重

**次要按钮：**

- 背景：透明
- 边框：1px主蓝色
- 文字：主蓝色

**文字按钮：**

- 无背景，主蓝色文字
- 带下划线或图标

### 表单控件

**输入框：**

- 圆角：8px
- 边框：1px浅灰色
- 聚焦状态：蓝色边框
- 错误状态：红色边框

**选择器：**

- 下拉式选择
- 单选/多选列表
- 日期时间选择器

### 提示反馈

**Toast提示：**

- 位置：底部居中
- 背景：半透明黑色
- 动画：从下往上滑入

**模态对话框：**

- 居中显示
- 暗色遮罩
- 按钮横向排列

## 📐 间距与尺寸

### 间距系统

- **基础单位**：4px
- **小间距**：8px（元素内部）
- **中间距**：16px（元素之间）
- **大间距**：24px（区块之间）
- **超大间距**：32px（页面边缘）

### 字体层级

- **超大标题**：24px，字重600
- **大标题**：20px，字重600
- **正文标题**：17px，字重500
- **正文**：16px，字重400
- **辅助文字**：14px，字重400
- **说明文字**：12px，字重400

## 🌙 深色模式适配

### 色彩映射

- 背景色：#121212
- 表面色：#1E1E1E
- 卡片色：#252525
- 文字色：白色，不同透明度层级

### 特殊处理

- 图片亮度适当降低
- 阴影效果更加柔和
- 保持品牌色系不变

## 🔧 无障碍设计

### 字体可调

- 支持系统字体大小设置
- 最小字体不小于12px
- 行高不小于1.4倍

### 颜色对比

- 文字与背景对比度≥4.5:1
- 重要操作按钮对比度≥3:1
- 色盲友好配色方案

### 语音支持

- 所有功能支持语音操作
- 重要信息支持语音播报
- 语音反馈可调节语速

这套设计系统确保了律助App在保持专业性的同时，提供精美、一致且易用的用户体验，完全适配手机端各种使用场景。