个人中心页面调整 - UI 优化与功能完善
大家好，上节课呢，我们已经完成了统计分析模块。
下面我们要继续往下看，然后是用户的个人中心。
现状分析
我们来看一下，个人中心其实现在已经有了部分的功能，只是说界面看起来不太美观，并且可能有一些功能没有实现。
需求文档中的要求
然后他给我们的需求：
- 用户信息展示 - 显示用户的昵称、头像、手机号（昵称、头像还没有，手机号有了）
- 退出功能 - 需要二次确认（二次确认也有了）
- 关于页面 - 显示应用的名称、版本号以及应用的介绍（这个做不做倒无所谓）
功能限制
- 暂不支持修改昵称、头像
- 不支持修改密码（因为我们的应用现在还没有账号密码，是用手机号以及短信登录的）
- 暂时不支持账号注销
关于账号注销
这个功能我觉得也不着急，但是现在很多应用商店有要求，就是如果说你的应用要上架的话，应该是要有账号注销的功能的。
调整方案
这个界面呢，我们去直接写提示词改一下就行了，不太需要去专门去做一个 Quest 的设计。
编写提示词
我们现在就来写一下提示词，修改一下。
新建对话
首先新建一个会话。
介绍项目背景
然后描述一下当前项目的背景：
当前目录下有两个文件夹：
- backend 是软件的服务端
- client 是软件的客户端
因为我们现在主要修改的是 client 端（客户端），
所以要着重去介绍一下客户端。
[添加 client 项目的 project-rules 文件到上下文]
这个文件是 client 项目的介绍说明。
这个软件是一个记账软件，我现在要调整的是这个软件中的"我的"界面。背景信息的重要性
告诉 AI 这些背景信息之后，可以快速的让 AI 知道我们需要做什么。
描述问题和需求
这个界面现在还存在一些问题，需要修改一下：
这个界面现在还存在一些问题，需要修改一下。
## 第一部分：上方头像区域修改
上方的用户头像区域存在以下问题：
1. 头像是一个空的圆圈，里面什么都没有，需要改成展示一个头像的 icon（图标）
2. 头像下方用户昵称字体偏大，需要调小一些
3. 移除头像区域的手机号展示
## 第二部分：中间区域调整
中间区域展示了用户 ID 和手机号，这个区域可以完全移除掉，
放在下方的用户信息里面去展示（用户信息不直接展示在个人中心）。
## 第三部分：最下方功能区域重构
最下方是三个按钮：分类管理、账本管理、退出登录。
三个按钮放在这里显得有点奇怪，一般软件不会这样去设计。
一般是一个卡片，卡片中使用列表的形式展示功能。
需要修改为：
1. 增加一个卡片，卡片中使用列表的形式展示功能（类似上面的区域）
2. 将功能分组排列，每组之间用间距或者分割线区分
3. 有以下功能：
- 分类管理
- 账本管理
- 个人信息（新增）
## 功能点击效果
1. 点击"分类管理"，进入分类管理的界面，同当前分类管理点击效果一致
2. 点击"账本管理"，进入账本管理的界面，同当前账本管理点击效果一致
3. 点击"个人信息"，进入到个人信息管理界面（新增页面）
## 个人信息管理页面设计
进入个人信息管理页面之后：
1. 上方展示一个卡片，卡片中展示当前用户的昵称和手机号（不需要展示用户的 ID）
2. 在卡片的下方展示一个"退出登录"的按钮
3. 点击"退出登录"，和当前个人中心退出登录按钮点击的效果一致为什么要强调点击效果一致？
因为现在它把我们这个整个界面的 UI 改掉，然后我们这样强调一下，就是告诉 AI 不要去改功能，只是改它的样式。
也就是说，把这个按钮放到这个卡片区域中，但是点击之后的效果还是同原来的按钮点击效果一样。
关于用户 ID
一般来讲，大多数应用它的用户的 ID 都是相对于用户是隐藏的，用户不需要知道自己的 ID 是多少，只需要用手机号去识别就行了。
写完之后，我们直接回车。
测试功能
我们看到现在已经正常显示了。
查看界面
个人中心界面已经按照我们的要求进行了调整：
- 上方头像区域使用了图标
- 昵称字体大小合适
- 移除了手机号显示
- 中间区域已经移除
- 下方使用卡片列表展示功能
测试个人信息
点击”个人信息”，进入个人信息管理页面。
页面展示了：
- 用户昵称
- 手机号
- 退出登录按钮
测试退出登录
最后我们再来测试一下个人信息里面的退出登录。
点击”退出”，退出功能也是正常的。
界面调整完成
个人中心页面的 UI 优化和功能完善已经完成。
提交代码
最后我们来提交一下代码。
创建新分支
首先点击左侧的”源代码管理器”，然后最好还是新建一个分支：
v1.0.0-6-个人中心界面调整然后按回车。
暂存修改
然后我们到这边的目录上去点加号，暂存所有修改。
提交代码
点击”提交”，提交信息写：
个人中心界面调整发布分支
然后”发布分支”，推送到远程仓库。
遇到问题？
如果在调整个人中心页面时遇到问题，可以扫描下方的微信二维码帮您看下（免费咨询）
小结
通过这节课，我们学会了：
- UI 优化思路 - 如何分析现有界面的问题，提出改进方案
- 提示词技巧 - 如何清晰地描述界面调整需求，让 AI 准确理解
- 功能重构 - 如何在不改变功能的前提下，优化界面布局和交互
- 用户体验 - 学习了常见的 UI 设计规范（如用户信息展示、功能列表布局等）
关于界面设计
好的界面设计不仅要功能完善，还要符合用户的使用习惯。我们在开发过程中，可以参考主流应用的设计规范，让我们的软件更加专业。
下一步
个人中心页面调整完成后，接下来我们需要：
