律助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在保持专业性的同时，提供精美、一致且易用的用户体验，完全适配手机端各种使用场景。