个人中心页面改版小结

作者：ZYUN（20190813）

预计阅读时长：15m 22s（4581 字；15 图）

配图制作工具：Figma、Overflow

【背景和目标】

配合有车以后 App 4.0 UI 改版，对个人中心模块进行优化。针对这个模块目前存在的问题，优化信息架构，调整视觉层级关系，帮助用户聚焦核心业务，快速高效愉悦地完成相应任务。

【页面定位】

在对个人中心进行改版之前，我们需要先明确主要页面的页面定位，页面定位是我们明确页面存在的问题、分析用户核心行为与页面的信息优先级的前提。

这次改版涉及的主要一级页面是「个人中心」和「个人主页」。

凡是有用户体系的应用，基本都有「个人中心」；大部分带社交属性的应用都有「个人主页」，一些偏工具类的应用则不一定有「个人主页」，这个得看具体产品设计。

1. 个人中心：仅用户本人可见，偏平台属性，重在管理。主要承载个人相关的功能入口与平台相关设置。

2. 个人主页：用户本人和其他用户均可访问查看，偏用户个人属性，重在塑造用户形象。

3. “我“ 看到的 “我” 的主页和其他用户看到的 “我” 的主页略有不同：前者主要是预览作用，确定向其他用户展示哪些个人信息与内容，同时对 UGC 内容进行管理；后者主要是查看用户信息及发布过的内容，了解用户，同时可进行「关注」、「举报」、「屏蔽」等互动操作。

按当前线上版本的设计，「个人中心」主要分为 4 个区域，由上至下依次为个人信息，主要功能入口，广告横幅，有车币商城；「个人主页」主要分为 2 个区域，分别为个人信息和帖子列表。

【问题分析】

本文先对比较复杂的「个人中心」页面进行分析、优化。进行问题分析之前，我们可以先试着完成以下任务：1）打开有车以后 App 的个人页面，找到「我的成就勋章」和「每日打卡活动」；2）把所有入口都点一遍，并查看相应页面内容，返回个人页面，再次找到「我的成就勋章」和「每日打卡活动」。你是否能顺利、快速地完成以上两个任务？

现在我们来看一下目前个人中心页面存在的问题：

1. 顶部的个人信息区域可点击元素较多，布局比较拥挤，点击热区小，操作比较困难，容易导致误触。

2. 功能入口不唯一，且相同功能的入口分布散乱，没有清晰的逻辑联系，易造成用户困惑。

例如，可能出现以下场景，用户点击「LV.15」进入「任务中心」之后返回个人中心，再点击「新手上路」也进入了「任务中心」。因为不符合用户心理预期（点击不同的入口进入不同的页面），用户可能感到困惑，「咦，我刚刚是不是点错了，怎么又到这个页面了」。

入口和相应功能如果没有唯一的对应关系，用户就会摸不清相应的功能入口。

关于入口唯一：我目前认为，在同一页面，功能入口需要尽可能保证唯一，避免造成理解困难、导航不清晰，操作路径复杂。如果入口重复，需保证这些入口之间具有简单有效、易于理解的联系。

3. 功能入口分类标准不够清晰与合理，不利于用户理解与学习。

例如，「车主认证」、「我的奖品」和「兑换记录」为什么分为同一模块？「消息中心」、「问题反馈」和「提现」之间的逻辑联系是什么？

另外，如果信息分类逻辑复杂，也会增加用户的判断成本。

这个页面就像我们物理世界中的导视系统。我们想在某商场买一件连衣裙，看到商场导视图上标着第一层是珠宝、第二层是服装、第三层是饮食，第二层又分为 A 区女装、B 区男装、C 区童装，我们就可以快速找到女装区。如果没有这样的分类，每一层都有女装店，女装店旁边有可能是珠宝店、小吃店，那我们买到合适的连衣裙的效率就很低。

4. 功能入口未区分主次，主次任务不清晰。

功能入口较多的情况下，采用宫格的形式平铺展示所有功能入口，会导致层级不够清晰简洁，无法突出核心功能入口，也不利于扩展。另外，用户在浏览时需要跳跃着阅读图标下方的文字，入口过多时，也会降低效率。

5. 信息表达不明确，无法预知操作结果。

例如，用户无法预知点击「未认证」会发生什么，也不清楚「新手上路」是什么。用户可能需要经过试错才明确这些信息的含义。

「新手上路」其实是成就勋章，如果做成勋章样式，用户就能理解它是个成就勋章。但，因为「Lv.15」「未认证」「新手上路」这三个元素都是一个背景色块加文字的视觉形式，单靠文本的话就只有「Lv.15」比较好理解，因为「Lv」本身就是大家都熟悉的「等级」，其他两个并没有通用的、用户熟悉的含义。

此外，存在入口名称和目标页面标题不一致的情况，例如，点击「兑换记录」进入的是「我的订单」页面。 

6. 问题总结

根据以上分析，我们可以总结如下：

目前个人中心页面存在的主要问题是，信息架构不够清晰合理，用户很难在有限的时间里，快速找到需要的信息或功能入口，增加了用户使用成本。我们可以通过对信息进行梳理、归纳分类和组织，化繁为简，建立良好的信息层级，帮助用户快速理解、获取信息。

【优化方案】

1. 页面内容分析

(1) 主页入口和编辑个人资料

大部分带社交属性的应用都有个人主页，从个人中心点击进入个人主页是常见操作，符合用户既有习惯，入口不需要做得这么显眼。

如上文所提，个人主页主要是展示给其他用户看的，对 “我” 自己而言，有「预览」的作用。所以，一般「编辑个人资料」操作都会放在「个人主页」，用户修改资料后返回「个人主页」可直接看到效果。

并且，用户自己进入个人主页和编辑个人资料都属于频次相对较低的操作，可适当降低信息层级。

(2) 签到、等级、主成就（成就勋章）、有车币、任务中心

作为带动促活、留存等的常见手段，这几个都属于用户激励体系，相对来说都比较重要。（这里先确定个人中心页面的信息结构，暂时先不讨论具体页面内容。）

其中，用户最关心的是「有车币」，几乎所有行为都是围绕「有车币」进行的，查看有车币数量也是个人中心页面包含的主要用户行为之一。（只是从逻辑上进行猜想，因为不管是后台还是社区帖子，我们都可以看到很多关于有车币数量变化的用户反馈。暂时没有数据可以验证。）

但目前的「有车币」缩在「有车币商城」旁边，极不显眼，并且如果没有「有车币商城」作为线索，单靠这个金币图标很难表达出「有车币数量」这个信息，不如使用文本更直接有效。

此外，这几个最没有灵魂的就是「成就勋章」了，几乎感受不到勋章带来的荣誉感。目前，我的想法是去掉「主成就」，仅在用户个人主页展示勋章墙，给用户「累积」的成就感，“点亮越多勋章看起来越牛”。

因此，将「成就勋章」入口移到「个人主页」，其他入口均保留。

(3) 口碑、车主认证

如果用户没有买过车，怎么激励都不会发口碑、认证车主。

而一般情况下，一个用户可能就 1~2 辆车，并不会频繁发布、修改口碑，一旦认证过车辆也不需要再认证了（如果审核不通过需要重新提交资料，可通过系统消息引导用户进入认证页面）。这两个入口都是使用过一两次之后，就不需要再使用了，作为一级页面的常驻入口有点浪费页面空间。

因此，这两个入口可从个人中心首页移除。口碑可同帖子、打卡日记一起，放在「我的发布」中；车主认证入口可放在「编辑个人资料」中。

(4) 收藏、我感兴趣的

「我感兴趣的」和「收藏」都是点击收藏按钮收藏的内容。因此，仅保留「收藏」入口。

(5) 草稿

草稿对内容型用户来说是比较重要的，但使用频次应该不高。

(6) 消息中心

消息中心是用户及时互动的入口，同时还可承载产品宣发的功能，对内容、社交类应用来说都是很重要的。因此，可适当提高此入口的层级。

(7) 提现、我的奖品

这两个分别是实物奖励（现金）和虚拟奖励（有车币），可以归入 “我的奖品“，属于活动运营入口。从产品策略来说，相对比较重要，主要用于收集此页面的闲散流量。

(8) 兑换记录、有车币商城

「兑换记录」其实是「我的订单」，在有车币商城中也有相应入口。

首先，同一个入口用不同的文案，使用过程难免产生困惑。第二，「兑换记录」是随着「进入有车币商城消费有车币」这个行为产生的，如果放在有车币商城里，逻辑上比较成立。

「兑换记录」现在放在个人中心首页，可能是因为用户使用频率比较高，把它提出来作为快捷入口，减少点击次数，降低操作成本。但是在个人中心首页一堆互不相干的入口中寻找「兑换记录」，带来的认知负荷可能更高。

因此，仅保留有车币商城中的入口。

有车币商城暂不涉及营收，只是作为有车币消费的载体，激励用户赚取有车币，从而提高用户活跃度和留存。可以把它和有车币联系起来，但有车币层级更高，更突出有车币。

(9) 问题反馈

从后台数据来看，目前大部分的反馈是商城售后相关的问题，运营人员回复也很及时，都是即时提供相应解决方案，此入口实际主要承载的是「在线客服」的功能。

关于产品使用问题的反馈比较少，运营人员回复内容均为「感谢反馈」、「已反馈给相关部门」、「请添加小助手微信」等，这些解决方法在「使用帮助」中都可以找到。

目前的设计结合用户的使用场景，可能导致用户操作路径不顺畅、操作效率低下。例如，用户进入商城后产生了关于订单的问题，此时，若想进行反馈，就需要返回个人中心，找到「问题反馈」进行反馈。若收到运营人员的回复，查看回复的地方又是在「消息中心」里。经过沟通，想再次查看订单，确认问题是否解决，又得回到个人中心，再次进入商城，找到我的订单。

因此，将商城客服独立出来，放到商城，用户在查看订单、浏览商品的过程中可直接进行咨询。另外，将「问题反馈」与「使用帮助」结合起来，放在个人中心首页，并增加「热门问题」。这样，既可减轻运营工作量，也可给用户提供及时帮助，提升使用体验。

(10) 增加「我的车友圈」入口

根据当前产品的具体功能架构，在个人中心页面增加「我的车友圈」入口。

2. 层级梳理

经过以上分析，我们基本明确了页面中所有信息、功能之间的逻辑联系。现在，我们按从下到上的卡片分类方法，对所有内容进行分组，并确定信息层级。（单机版的卡片分类法哈哈。）

3. 确定布局

根据以上分析结果，我们可以画出基本的界面布局，如下图所示。相比原来的界面，新的界面看起来更简洁了，信息层级也更清晰，但依然存在一些问题。例如，核心功能入口的布局不利于扩展，「我的消息」把整个界面拦腰截断了，「小Q（有车以后 IP 形象）」的视觉吸引度太强，「签到」操作的可见性较弱等等。

所以，我们需要再梳理、调整一下页面的布局。

(1) 个人信息区域优先级最高，相当于路标，用户进入个人中心之后需要知道「这是我的个人中心」，同时遵循已成型的用户习惯，所以放在顶部。但头像，昵称这些信息又相对没那么重要，因此，可采用左右排版，节省页面空间。

(2) 功能入口整体采用「宫格 + 列表」的布局形式，既可以突出核心功能入口、区分主次任务，也有利于扩展。

(3) 整个页面的布局基本遵循 F 型浏览模式，顺应用户的自然视觉习惯。

(4) 重要、使用频次较高的功能入口尽量保持在「拇指的自然操作区域」内或接近此区域，以便用户操作。

经过调整，我们就得到了以下的效果图。

最后，补充一些界面细节。同时，由于此次改版中，页面内容结构的改动调整较大，所以增加了新功能提示，告知用户重要的功能入口调整，引导用户尝试、熟悉新的界面结构，避免造成困惑。

4. 改版前后对比

【思考总结】

个人中心页面这次改版主要针对功能框架进行整合，调整信息结构，优化界面布局，保证核心功能突出，次要功能入口统一，让信息层级更加清晰，使产品功能得到合理曝光，同时保证用户可快速找到他们想要的内容。

在改版设计前，需要先明确页面定位，即这个页面是什么，承载什么功能，为什么这么做，然后再围绕设计目的进行问题分析，多次尝试，得出解决方案。整个设计过程，都离不开对用户目的和行为的思考。

此外，像这种页面内容结构有重大调整的改版，在版本更新后，需考虑使用合适的引导方式引导用户尝试、熟悉新的界面结构，降低学习成本。

附，此次改版中，我整理了主要的个人中心模块信息结构如下：

------

1. 本文记录的只是此次个人中心页面改版的初步思路，并非最终完整版设计。

2. 由于条件限制，此次改版暂无数据、用研等支持，也未经用户测试，大部分内容均为个人理解与思考。如有错误，欢迎指正啊，非常感谢～

3. 改版后的视觉效果图中，核心功能入口图标来自 王小夫 的设计，底部标签栏的图标来自 王老中医 的设计，感谢我的同事儿～

4. 此次改版过程中，我在网上查阅及参考了以下文章，非常感谢这些作者～

合理、清新 —— 百度糯米个人中心设计思考（作者：百度 UXC）

从逛商场学习交互设计：信息架构梳理如何从小白到精通？（作者：Mr汤进er）

个人中心页面从思考到设计全过程（作者：海盐社・风筝KK）

从个人中心出发，聊聊个人主页设计前的思考（作者：ME网易移动设计・Arale！）