个人-隐私中心页高保真样式规范
字数
2299 字
阅读时间
10 分钟
参考高保真稿和页面文档，基于《色彩系统.md》与UI组件规范，聚焦隐私授权管理、数据控制和守护人设置的视觉呈现。
1. 设计定位与体验目标
- 页面主任务：提供隐私授权集中管理、数据使用透明化展示和守护人关系管理，确保用户对个人数据的完全控制权。
- 体验关键词：透明可控、安全信任、权限清晰、关系明确。通过清晰的视觉层次和详细说明建立用户信任。
- 视觉策略：整页基底使用
--color-ink-0，卡片式布局，授权状态使用语义色，守护人管理使用温馨色调，保持与个人中心页视觉一致性。
2. 页面结构框架
┌──────────────────────────────────────────┐
│ 顶部导航栏：返回按钮 + 标题"隐私中心" │
├──────────────────────────────────────────┤
│ 隐私概览卡：数据使用总览 + 风险评估 │
├──────────────────────────────────────────┤
│ 授权管理区：应用授权列表 + 权限开关 │
├──────────────────────────────────────────┤
│ 数据使用记录：数据访问日志 + 使用目的 │
├──────────────────────────────────────────┤
│ 守护人管理：守护人列表 + 权限设置 │
├──────────────────────────────────────────┤
│ 数据控制区：数据导出 + 删除 + 账号注销 │
├──────────────────────────────────────────┤
│ 安全设置：登录验证 + 数据加密 + 备份恢复 │
└──────────────────────────────────────────┘3. 模块规格详解
3.1 顶部导航栏
- 容器：高度 88rpx，背景白色，阴影
0 4rpx 16rpx rgba(15,20,26,0.08)。 - 返回按钮：左侧箭头图标，品牌蓝
--color-brand-500。 - 标题：居中显示"隐私中心"，字号 32rpx，字重 700，颜色
--color-ink-800。
3.2 隐私概览卡
- 容器：背景
linear-gradient(135deg, #EEF5FF, #FFFFFF)，圆角 32rpx，内边距 40rpx。 - 数据使用总览：
- 标题："数据使用概览"，字号 32rpx，字重 600，颜色
--color-ink-800 - 数据指标：已授权应用数、数据使用频率、风险等级
- 标题："数据使用概览"，字号 32rpx，字重 600，颜色
- 风险评估：
- 风险等级：使用风险色阶（R1-R4）显示
- 风险说明：简要说明当前风险状态和建议
- 快速操作：
- "查看详情"按钮：品牌蓝
--color-brand-500 - "安全检查"按钮：描边样式
- "查看详情"按钮：品牌蓝
3.3 授权管理区
- 容器：白底背景，圆角 24rpx，内边距 32rpx。
- 授权列表：
- 每个授权项显示应用图标、名称、权限范围
- 权限范围：基本权限、敏感权限、高级权限
- 权限开关：
- 开关组件：开启状态绿色
--color-success-500，关闭状态灰色 - 权限说明：每个权限的详细说明和使用目的
- 开关组件：开启状态绿色
- 授权时间：
- 显示授权时间和有效期
- 到期前提醒：临近到期时显示提醒标识
3.4 数据使用记录
- 容器：白底背景，圆角 24rpx，内边距 32rpx。
- 访问日志：
- 时间序列显示，最新的在顶部
- 每条记录包含：访问时间、应用名称、操作类型、数据范围
- 使用目的：
- 显示数据使用的具体目的
- 支持查看详细的使用说明
- 筛选功能：
- 时间范围筛选：今天、本周、本月、全部
- 应用筛选：按应用名称筛选记录
3.5 守护人管理
- 容器：背景
--color-success-50，圆角 24rpx，内边距 32rpx。 - 守护人列表：
- 每个守护人显示：头像、姓名、关系、权限级别
- 权限级别：L1（仅SOS通知）、L2（风险预警）、L3（完整报告）
- 添加守护人：
- "添加守护人"按钮：品牌蓝
--color-brand-500 - 添加表单：姓名、关系、联系方式、权限级别
- "添加守护人"按钮：品牌蓝
- 权限设置：
- 权限级别选择器：L1/L2/L3三个级别
- 每个级别的权限说明和限制
3.6 数据控制区
- 容器：白底背景，圆角 24rpx，内边距 32rpx。
- 数据导出：
- 导出格式：JSON、PDF、Excel
- 导出范围：全部数据、按时间范围、按应用筛选
- 导出按钮：品牌蓝
--color-brand-500
- 数据删除：
- 删除选项：删除特定数据、删除全部数据
- 删除确认：需要二次确认和身份验证
- 账号注销：
- 注销说明：注销后果和数据保留政策
- 注销按钮：危险色
--color-danger-500
3.7 安全设置
- 容器：背景
--color-info-50，圆角 24rpx，内边距 32rpx。 - 登录验证：
- 验证方式：密码、指纹、面容识别
- 验证强度显示：弱、中、强
- 数据加密：
- 加密状态显示：已加密、未加密
- 加密方式说明：端到端加密、本地加密
- 备份恢复：
- 备份状态：显示最后备份时间
- 恢复选项：从云端恢复、从本地恢复
4. 交互与状态要求
4.1 权限管理
- 开关操作：权限开关实时生效，状态即时更新
- 权限说明：点击权限名称查看详细说明和使用场景
- 权限影响：关闭关键权限时显示影响说明
- 批量操作：支持批量开启或关闭某类权限
4.2 数据控制
- 导出确认：数据导出前需要身份验证
- 删除保护：数据删除需要多重确认和验证
- 进度显示：大容量数据操作时显示进度条
- 操作记录：所有数据操作记录到访问日志中
4.3 守护人管理
- 邀请流程：添加守护人需要发送邀请，对方确认后生效
- 权限调整：权限级别调整需要重新确认
- 测试通知：支持发送测试通知验证守护人设置
- 紧急联系：紧急情况下可以直接联系守护人
5. 响应式与实现提示
5.1 屏幕适配
- 基准宽度 750rpx，最大内容宽度 686rpx（左右边距 32rpx）
- 小屏幕（<720rpx）时，减少内边距至 24rpx
- 大屏幕（≥1536rpx）时，采用双列布局提高信息密度
5.2 性能优化
- 数据列表使用虚拟滚动，避免大量DOM操作
- 访问日志分页加载，减少单次数据量
- 权限状态本地缓存，减少网络请求
6. 数据绑定与埋点对齐
| 模块 | 数据来源 | 关键状态 | 样式影响 |
|---|---|---|---|
| 隐私概览 | privacy_overview | 风险等级、授权数量 | 风险色阶、数字显示 |
| 授权管理 | authorizations | 权限状态、有效期 | 开关状态、时间显示 |
| 数据日志 | data_access_logs | 访问记录、使用目的 | 列表内容、时间排序 |
| 守护人管理 | guardians | 守护人关系、权限级别 | 关系标签、权限标识 |
| 数据控制 | data_operations | 导出状态、删除状态 | 进度显示、确认弹窗 |
| 安全设置 | security_settings | 验证方式、加密状态 | 安全等级指示器 |
7. 色彩映射表
| 页面元素 | HEX值 | Token映射 | 说明 |
|---|---|---|---|
| 主背景 | #F7F9FC | --color-ink-0 | 页面基底色 |
| 卡片背景 | #FFFFFF | #FFFFFF | 内容区域背景 |
| 品牌蓝主色 | #3A7BD5 | --color-brand-500 | 主要交互元素 |
| 概览背景 | #EEF5FF | --color-info-50 | 隐私概览区域 |
| 守护人背景 | #EAFBF5 | --color-success-50 | 守护人管理区域 |
| 安全设置背景 | #EEF5FF | --color-info-50 | 安全设置区域 |
| 成功状态 | #2AC28D | --color-success-500 | 开启状态、安全状态 |
| 警告状态 | #F2B23D | --color-warning-500 | 中等风险提醒 |
| 危险状态 | #E24C4B | --color-danger-500 | 删除操作、高风险 |
| 风险色R1 | #3A7BD5 | --color-risk-r1 | 低风险标识 |
| 风险色R2 | #F59E0B | --color-risk-r2 | 中风险标识 |
| 风险色R3 | #F97316 | --color-risk-r3 | 高风险标识 |
| 风险色R4 | #DC2626 | --color-risk-r4 | 严重风险标识 |
这是模板派生页面，基于今天页高保真样式规范生成，主要差异点：
- 风险等级系统：采用R1-R4四级风险色阶，与今天页的单一状态不同
- 权限管理系统：复杂的权限开关和状态管理，需要清晰的视觉反馈
- 守护人关系管理：人际关系管理功能，使用温馨的色彩设计
- 数据安全控制：包含数据导出、删除、账号注销等敏感操作
- 多重身份验证：安全设置需要多种验证方式和状态显示
- 详细的操作记录：数据访问日志的时间序列展示和筛选功能
贡献者
Cai Hongyu