全面解析！移动端「个人中心」界面设计趋势和思路解析

一、我的页面的基本分析

我的页面就是大多数应用底部导航中的最后一个选项，是个人中心的板块，用于管理你的账号信息、数据、服务，以及实现对应用本身的相关设置。

我的页面通常在具有账户系统的应用中才会使用，如果没有账户系统的基础应用（如天气、日历工具）就没有使用它的必要。

而还有两个类似的页面类型很容易和我的页面搞混，一个是用户个人主页，一个是系统设置页面，在这里我们做个简单的区分。

用户个人主页是用户在应用内的公共空间展示的页面，比如你在社区里发个动态，其它用户点击你头像进入的这个页面叫个人主页，而不是我的页面。一个应用内可以既有个人主页也有我的页面。

而设置页通常有更强的指向性，即围绕在特定方向进行功能设置的页面，有用户资料设置，也有系统/应用设置页面。在没有账户系统的应用中，往往只有系统设置页面，而有账户系统的应用，也可能既有我的页面也有账户、应用设置页面。

了解完它的定义，下一步就是认识它的设计趋势。很多人可能认为我的页面只是一个简单的基础页面，不需要投入太多的设计精力，实际上这是一种误区，我的页面的设计权重在今天并不低，而且它有往更复杂方向演进的趋势。

如果从逻辑理论推理，我的页面就是一个基础支撑型功能页面，它的作用就是让用户可以找到自己在应用内添加和生成的数据，或进行一些基础的设置。

单说它对比首页、频道、商品列表等页面来说肯定是没有太多分量的。但是，分量不够不代表它的访问量就低…越是会产生用户数据和记录的应用中，我的页面访问的占比也就越大。

比如电商中你要看订单、社区里你要看帖子、健身工具里要看健康指数等等。我的页面访问量往往是一个应用内单一页面访问量的前几名。

既然有访问量，放在今天的市场环境当然是要打主意的。也就是它不能只是个功能页面，还要承载更多的运营需求和引流曝光。

运营需求最容易理解，就是要在这个页面中放运营相关的活动展示。甚至有些应用中在进入我的页面以后还会有独立的弹窗（比如你又有20W贷款到账了），给用户一点小小的“惊喜”。

至于引流和曝光上面，最常见的目标有两个，一个是会员，另一个是信息流。会员是很多应用中的重要创收手段，且它和个人信息是高度相关的，所以会非常重视会员模块的露出，吸引用户查看和点击。另一个信息流则和应用类型有关，电商类会推商品信息流，社交类会推动态信息流，让用户即使在我的页面，也可能一不注意，就开始刷起来。

了解完我的页面的重要性，下面就要知道我们应该如何来完成它的页面设计了。

二、我的页面的框架布局

我的页面的布局并不算复杂，常见的模块包含用户信息、会员模块、快速入口、选项列表、信息流等。

顶部用户信息模块，就是放用户基本信息的模块。在以前的设计中还会有较强的个性化展示空间，比如预留区域展示头像、背景等，但在今天这种设计越来越少见了，一方面是没必要，另一方面是要腾空间来放更多别的东西。

而用户个人信息包含账户名、昵称、ID、等级等基本信息，还包括一些和会员关系极大的基本数据，比如关注量、粉丝数、点赞量，具体放什么由产品决定。

接着就是会员模块，会员和用户有很强的关联性，所以这两个模块往往是连在一起，或是嵌套关系。会员模块会展示用户当前的会员等级，往往也会突出会员的权益，吸引用户开通会员，或提醒已开通会员的用户有什么权益。

然后就是快速入口的模块，主要罗列应用内最关键、常用的几个功能选项，比如订单、收藏、记录、物流等等。如果应用的重要功能多，可能就会包含多行的快速入口，甚至可以左右滚动。

而部分应用为了防止多行快速入口的枯燥，会将快速入口“瓷片区”化，展示下级内容或添加更多的视觉元素进来，比如淘宝的我的页面入口设计。

再往下往往就是次要功能或系统设置的列表了，传统的应用会使用单列设计，而选项太多的应用可能就会使用多列设计。

如果设置的选项都是很细节的内容，且下方还有信息流的话，那么往往会把这些选项置入到下级页面去，比如增加设置页面，通过点击进入设置页面查看和操作。

最下方的信息流也是比较有意思的一个模块，虽然它的组件样式肯定是前面列表页已经确定了的，但它的摆放位置非常重要，那就是 —— 一定要在首屏中露出。

信息流这种东西，就是只有露出了才有威力，可能展露出来的半张图就可以让用户忍不住下滑去探索，陷入多巴胺（资本主义）的陷阱。如果第一屏看不到放第二屏，那正常用户根本不会闲着没事在我的页面刷信息流……

我的页面的重要设计目标，就是尽可能将关键的功能、入口置入到首屏中，设计师需要根据具体包含的模块去做规划，才能输出让团队满意的结果。

三、我的页面视觉设计

最后就是关于我的页面的视觉设计方案了。而基于上面对框架的认识，我们可以肯定的是我的页面的主要视觉重心会集中在上半区，而下半区的选项列表与信息流都只需要基础的样式即可。

首先页面顶部的背景，除了使用纯色外，更多会添加渐变或纹理图片，而早年喜欢使用用户头像做高斯模糊的做法现在已经被抛弃了。

这类背景制作起来很简单，就是渐变色或弥散的应用，或是找外部素材即可。之所以要让背景有颜色，最重要的原因就是——创建“氛围”。

因为我的页面往往要添加运营性质的内容或强调会员模块，这些东西一定在视觉上非常突出，如果没有添加背景的氛围做缓和，就是平地起惊雷的“干拔”，这不会产生太好的视觉效果。比如下面几个案例就是有背景和无背景的对比。

然后就是会员卡片的设计了，这就是个老大难题，因为会员卡片本身要突出“华贵”的属性，所以设计上自然也就喜欢用有质感的风格，比如有镜面反光的卡片，或是使用3D质感的图标元素等等。

只要没有别的运营元素，会员卡片就应该是这个页面最突出的模块，虽然具体怎么设计要靠设计师自己发挥，但它通常都会有一个高饱和度或低明度的填充色。

再往下到快速入口区域，个人主页的快速入口和主页的快速入口虽然是同一种组件类型，但它们在一个应用内的权重却不是一个等级。

我的页面中的快速入口可以只用工具图标，也可以用装饰图标，但装饰图标的视觉复杂度一定要有所控制，只需要考虑最简单的装饰图标类型即可。

这里还有个很有趣的细节，那就是如果我的页面添加了那种运营性质的快速入口模块，那么基础功能的快速入口就会用最基础的线性和面性图标，为运营让路。

再往下如果放设置列表，就单列和多列之分，只有页面空间大下方没有别的内容适合放单列，只要有信息流或是选项太多，就会使用多列的设计节省空间。这部分的设计图标就可以往简洁的做，才不会让界面看起来太浮夸和复杂。

最后一点就是我的页面内的运营模块，不管是快速入口还是轮播图、胶囊类广告，它们都是具有很强“破坏力”的元素，突兀才是它们的宿命（和会员卡片不一样），而不是在视觉上融入甚至消失在当前的页面中。

在正式项目中你可以加，但在作品集输出过程中就建议移除这些突兀的运营模块，才能获得更好的我的页面的视觉展示效果。

以上就是对我的页面设计思路的全部介绍。

结尾

我的页面设计也是一个比较蛋疼的地方，要做好是需要花时间平衡功能和视觉效果的，这就需要靠大家自己努力了。