个人-资料编辑页高保真样式规范
字数
2464 字
阅读时间
10 分钟
参考高保真稿和页面文档，基于《色彩系统.md》与UI组件规范，聚焦个人资料编辑、头像上传和表单验证的视觉呈现。
1. 设计定位与体验目标
- 页面主任务：提供个人资料编辑功能，支持头像上传、基本信息修改和隐私设置调整，确保用户信息的准确性和隐私安全。
- 体验关键词：简洁明了、操作便捷、验证及时、安全可靠。通过清晰的表单布局和实时验证提升用户编辑体验。
- 视觉策略：整页基底使用
--color-ink-0，表单区域白底卡片，验证提示使用语义色，保持与个人中心页视觉一致性。
2. 页面结构框架
┌──────────────────────────────────────────┐
│ 顶部导航栏：取消按钮 + 标题"编辑资料" + 保存按钮 │
├──────────────────────────────────────────┐
│ 头像编辑区：当前头像 + 上传新头像 + 编辑建议 │
├──────────────────────────────────────────┐
│ 基本信息：昵称 + 性别 + 生日 + 地区 │
├──────────────────────────────────────────┐
│ 学校信息：学校 + 院系 + 专业 + 年级 │
├──────────────────────────────────────────┐
│ 联系方式：手机 + 邮箱 + 紧急联系人 │
├──────────────────────────────────────────┐
│ 隐私设置：资料可见性 + 消息接收偏好 │
├──────────────────────────────────────────┐
│ 表单验证：实时验证 + 错误提示 + 保存状态 │
└──────────────────────────────────────────┘3. 模块规格详解
3.1 顶部导航栏
- 容器：高度 88rpx，背景白色，阴影
0 4rpx 16rpx rgba(15,20,26,0.08)。 - 取消按钮：左侧文字按钮，字号 32rpx，颜色
--color-ink-600。 - 标题：居中显示"编辑资料"，字号 32rpx，字重 700，颜色
--color-ink-800。 - 保存按钮：右侧文字按钮，默认禁用状态
--color-ink-300，验证通过后变为--color-brand-500。
3.2 头像编辑区
- 容器：背景
--color-info-50，圆角 32rpx，内边距 40rpx，居中布局。 - 当前头像：
- 头像显示：圆形，80x160rpx，边框 4rpx solid
--color-ink-200 - 头像状态：显示"已设置"或"未设置"状态
- 头像显示：圆形，80x160rpx，边框 4rpx solid
- 上传新头像：
- 上传按钮：圆形，品牌蓝背景
--color-brand-500，白色加号图标 - 上传方式：相机拍摄、相册选择
- 上传按钮：圆形，品牌蓝背景
- 编辑建议：
- 建议文字："建议使用真实头像，有助于建立信任关系"
- 尺寸要求：建议尺寸 200x400rpx，支持 JPG、PNG 格式
3.3 基本信息
- 容器：白底背景，圆角 24rpx，内边距 32rpx。
- 昵称输入：
- 输入框：高度 88rpx，圆角 16rpx，边框 2rpx solid
--color-ink-200 - 字数限制：2-20个字符
- 实时验证：显示字数统计和可用性检查
- 输入框：高度 88rpx，圆角 16rpx，边框 2rpx solid
- 性别选择：
- 选择器：单选按钮组，包含"男"、"女"、"其他"、"不愿透露"
- 选中状态：品牌蓝背景
--color-brand-500，文字白色
- 生日选择：
- 日期选择器：弹出式日期选择
- 格式显示：YYYY年MM月DD日
- 年龄限制：需年满16周岁
- 地区选择：
- 地区选择器：省市区三级联动
- 默认值：根据IP自动定位，可手动修改
3.4 学校信息
- 容器：白底背景，圆角 24rpx，内边距 32rpx。
- 学校选择：
- 搜索框：支持学校名称搜索
- 选择列表：显示匹配的学校列表
- 未找到：显示"未找到您的学校？"
- 院系选择：
- 院系列表：根据选择的学校动态加载
- 支持搜索：可在院系列表中搜索
- 专业选择：
- 专业输入：文本输入，支持专业名称搜索
- 专业建议：显示相关专业建议
- 年级选择：
- 年级选择器：大一、大二、大三、大四、研究生、其他
- 默认值：根据入学年份自动计算
3.5 联系方式
- 容器：白底背景，圆角 24rpx，内边距 32rpx。
- 手机号码：
- 输入框：带区号选择，支持国际号码
- 验证规则：手机号格式验证
- 验证码：支持短信验证码验证
- 邮箱地址：
- 输入框：标准邮箱格式输入
- 验证规则：邮箱格式验证
- 验证码：支持邮箱验证码验证
- 紧急联系人：
- 姓名输入：联系人姓名
- 关系选择：家人、朋友、老师、其他
- 联系方式：手机号或其他联系方式
3.6 隐私设置
- 容器：背景
--color-warning-50，圆角 24rpx，内边距 32rpx。 - 资料可见性：
- 可见范围：公开、好友可见、仅自己可见
- 分项设置：头像、昵称、学校、联系方式等分别设置
- 消息接收偏好：
- 系统通知：开关控制
- 活动提醒：开关控制
- 营销信息：默认关闭，可手动开启
- 数据使用授权：
- 数据分析：是否允许用于产品改进
- 个性化推荐：是否允许基于数据的个性化推荐
3.7 表单验证
- 容器：底部固定区域，高度 120rpx，背景白色，上边框 2rpx solid
--color-ink-100。 - 验证状态：
- 验证中：显示"验证中..."，loading状态
- 验证成功：显示"资料完整"，绿色勾选图标
- 验证失败：显示具体错误信息，红色叉号图标
- 保存状态：
- 保存中：显示"保存中..."，loading状态
- 保存成功：显示"保存成功"，绿色勾选图标
- 保存失败：显示"保存失败，请重试"，红色叉号图标
4. 交互与状态要求
4.1 头像上传
- 图片选择：支持相机拍摄和相册选择
- 图片裁剪：选择后自动进入裁剪界面
- 图片压缩：自动压缩到合适尺寸
- 上传进度：显示上传进度条
- 上传结果：成功/失败提示
4.2 表单验证
- 实时验证：输入时实时验证格式和内容
- 异步验证：昵称、手机号、邮箱需要异步验证唯一性
- 错误提示：具体指出错误原因和修改建议
- 验证状态：清晰显示每个字段的验证状态
4.3 数据保存
- 自动保存：每30秒自动保存一次草稿
- 网络处理：网络异常时本地保存，恢复网络后同步
- 冲突处理：多人同时编辑时的冲突处理
- 保存反馈：详细的保存结果反馈
5. 响应式与实现提示
5.1 屏幕适配
- 基准宽度 750rpx，最大内容宽度 686rpx（左右边距 32rpx）
- 键盘弹出时，编辑区域自动上移
- 横屏时，重新布局为双列结构
5.2 性能优化
- 图片上传前压缩到合适尺寸
- 表单验证使用防抖机制
- 学校、院系数据本地缓存
6. 数据绑定与埋点对齐
| 模块 | 数据来源 | 关键状态 | 样式影响 |
|---|---|---|---|
| 头像编辑 | user_avatar | 上传状态、图片质量 | 头像显示、上传进度 |
| 基本信息 | user_profile | 昵称可用性、生日有效性 | 验证状态、错误提示 |
| 学校信息 | school_data | 学校匹配度、院系完整性 | 搜索结果、选择状态 |
| 联系方式 | contact_info | 手机号有效性、邮箱格式 | 验证状态、格式提示 |
| 隐私设置 | privacy_settings | 可见性设置、消息偏好 | 开关状态、设置显示 |
| 表单验证 | validation_status | 验证进度、错误类型 | 状态图标、错误信息 |
7. 色彩映射表
| 页面元素 | HEX值 | Token映射 | 说明 |
|---|---|---|---|
| 主背景 | #F7F9FC | --color-ink-0 | 页面基底色 |
| 卡片背景 | #FFFFFF | #FFFFFF | 内容区域背景 |
| 品牌蓝主色 | #3A7BD5 | --color-brand-500 | 主要交互元素 |
| 头像编辑背景 | #EEF5FF | --color-info-50 | 头像编辑区域 |
| 隐私设置背景 | #FFF6E8 | --color-warning-50 | 隐私设置区域 |
| 成功状态 | #2AC28D | --color-success-500 | 验证成功、保存成功 |
| 错误状态 | #E24C4B | --color-danger-500 | 验证失败、保存失败 |
| 中性文本 | #5A6672 | --color-ink-500 | 次要文本 |
| 边框色 | #E9EDF3 | --color-ink-100 | 分隔线边框 |
| 输入框边框 | #D7DEE7 | --color-ink-200 | 输入框边框 |
| 禁用状态 | #9AA6B2 | --color-ink-400 | 禁用文本 |
这是模板派生页面，基于今天页高保真样式规范生成，主要差异点：
- 头像上传系统：支持相机拍摄、相册选择、图片裁剪和压缩
- 多级联动选择：学校-院系-专业的三级联动，支持搜索功能
- 实时表单验证：输入时实时验证，包含异步验证机制
- 隐私设置分组：独立的隐私设置区域，包含可见性和消息偏好
- 复杂联系信息：包含手机、邮箱、紧急联系人等多重联系方式
- 国际化支持：支持国际手机号和地区选择
- 自动保存机制：定期自动保存草稿，防止数据丢失
贡献者
Cai Hongyu