重磅！移动端个人中心体验优化！

改版背景 / BACKGROUND

为了兼容教育系统频繁的内容迭代和日渐完善的功能，学员端需要一种更简约、更舒适、更符合效率美学的设计方案，项目组评审后决定投入更多精力关注学员学习体验、升级系统的店铺视觉表现。

移动端店铺作为学员使用的主要终端，成为我们本次升级优先实装的内容。

根据使用和反馈情况，设计团队在一期对移动端个人中心区域进行了排查、分类 ，针对存在问题进行逐一解决。

设计目标 / TARGET

【产品层】设计团队借此机会更深入了解系统的使用人群、清晰机构的业务运作流程，进而去了解移动端使用人群——学员的属性。

【交互层】秉承以用户为中心的体验设计理念，‍深入理解人群喜好和设计发展趋势，优化学员端信息布局与使用流程，提高使用、学习效率。

【视觉层】结合当下流行趋势和使用场景，剔除浮躁，呈现简约、高效的视觉界面。

从效率为核心出发，寻找设计切入点，经过团队多方调研探索和人群分析，明确设计升级方向：

发现问题 / PROBLEM

针对学员端个人中心，设计团队走查了数十款有相似场景的APP，经过反复分析讨论，复盘出我们的设计在以下维度的优化空间：

设计策略 / STRATEGY

1. 构建清晰的信息层级

新方案优化了元素比例、关键信息层级问题。
团队希望保持界面清爽、简约，同时可以兼容机构独有色彩的能力。

个人中心的优化表现

推广员的优化表现

订单模块的优化表现

2. 高效利用空间，让内容露出更多

随着教务、营销功能的完善，旧样式在空间利用上有很大的提升空间。
新方案使用矩阵布局，空间利用率能有效提高61%。

个人中心功能矩阵

针对表单我们移除了页面跳转交互，通过简单的折叠展开，能实现学员在当前页面解决表单查看问题，提高使用效率。

表单的优化表现

3. 提高视觉精度，提升产品质感

为了提高机构店铺的品牌形象，设计团队精心打造全新图标库，贴合教育场景的符号设计，兼顾个性化主题色的应用和视觉的一致性，实现准确、高效的信息传递。

新图标库

4. 升级设计语言，确保视觉一致性

保证产品表现的一致性，减少学员的店铺上手成本。

店铺设计风格

结语 / SUMMARY

1. 打造清晰层级，提高信息高效传播

清晰的视觉效果及信息层级，让有效信息更快更准确让用户触达

2. 有效利用空间，让内容露出更多

展示更多信息，曝光更多核心功能，助力教务、营销更上一层楼

3. 提高视觉精度，提升产品质感

提高店铺整体设计质感，赋予企业专业感，实现高效的内容传递

4. 升级设计语言，确保视觉一致性

重新制定设计风格和基础规范，并搭建了业务组件，确保用户一致的产品体验

通过此栏目，团队后续将发布更多可公开的视觉优化方向和具体内容，感谢各位老师的支持。

-END-