个人中心页面的UI设计知识点

在移动端设计中，个人中心页面有许多设计细节点是需要设计师去注意和挖掘的，看似结构简单的页面其实包含了很多平时容易被忽视的细节。本篇内容是巩固总结关于个人中心页面的相关设计知识点，仅用于学习，如想详细了解，具体可移步到优设文章详细查阅。

个人中心

与用户相关的各种数据、功能入口和全局性操作的汇总。仅用户本人可见。大多数产品的个人中心可以总结为几大信息模块：个人信息、全局操作、重点推广、核心功能、全部功能。特别复杂或者简约的产品可以在此基础上增加或者删减模块。

设计目标：提高效率。

个人主页

用于展示用户信息以塑造形象，由用户的基本信息、身份等级、自主上传的内容组成，常见于带有社交属性的产品。

设计目标：展示个性。

头图

一般放置在页面顶部。顶部设计形式多样，具体结合产品的业务属性和风格调性。头图主要分为两类：固定样式、自定义样式。

• 一般社交类属性的产品，允许用户自主上传背景图片，目的是鼓励用户充分展示个性。
• 对于工具类产品，则稳定和秩序感比个性更加重要。

头图样式案例

素底

背景主要以白色白灰色为主的简约风轻装式

背景使用简单的渐变色、纹理、几何等装饰性元素点缀，简约而不单调。品牌感

使用主色、logo原色，强化品牌视觉

插画

背景一般有插画 做装饰，增加界面的趣味性。 摄影图

 一般使用摄影类的图片为背景，常用于摄影类带有社交属性产品，具有真实性。

场景化 

 添加一些带有专属于产品的场景远景，拉近用户与产品的距离。

身份专属

具有象征身份代表的元素装饰，常用于付费类或者游戏类产品中。

全背景

头图背景覆盖整个界面，更强调产品风格属性。

自定义

 用户可以跟据自己喜好，上传背景图展示，主要突出用户的个性设置。

 个人信息

 个人信息模块一般包含：头像、昵称、身份属性这类内容。

从布局上来看，一般有以下几种排版方式：

• 头像居左
• 头像居中
• 头像居右

线上产品超八成使用头像居左的布局方式。通常人的浏览习惯呈现“F”形，左上角内容是最先触达人眼的信息，适合放置关键信息便于定位。

头像居中的布局方式适用于个人主页，更加强调和突出头像本身，对于社交产品来说，也是一种增加差异化的选择。

全局性操作模块

一般指的是如设置、信息、扫一扫等产品层面的内容，不仅限于当前页面。

全局性操作有 3 种常见的布局方式：

• 放置在导航栏

拓展性最强，多个控件添加摆放而不会出现页面局促，同时符合用户使用习惯。

• 放置在个人信息模块内

拓展性较弱，当昵称较长，控件较多时，容易在视觉上感觉拥挤。

一般来说不推荐此类设计排版，业务拓展性较差；同时从信息亲密度上来说，个人信息和全局性操作也不属于同意模块内。

• 放置在下方列表中

弱化了“设置”，通常认为如果“设置”的优先级较低，无需单独将其展示在头部，直接以列表的形式放置在底部即可。

布局形式

个人中心主要分为两大区块，头（个人信息+全局操作）+身（功能集合）。主体部分一般承载的内容是个人中心页面的各种功能集合，承载形式有：列表、卡片、宫格、泳道。

头、身板块的过渡形式

• 直接衔接：个人信息区域没有特殊设计，和主体功能入口部分没有明确差异，信息直接铺陈，页面整体性强。
• 头部向下渐变过渡：头部色彩，主体背景消色，中间用色彩渐隐的方式进行过渡，较为自然
• 线性隔断：头身直接隔断，有明确的分界线。头部和主体分割感较为强烈，便于定位。
• 卡片衔接 ：头身有一条明确的分割线，用卡片置于其上，作为衔接，视觉上更加和谐紧凑。且位于分割线之上的卡片往往承载的是最重要信息，如订单信息或会员信息。
• 头像衔接 ：放置在关键的头身分割线上，头像的面积一般较大，该设计比较注重个性化表达。
• 类弹窗式：用类似底部半弹窗的形式盛放主体内容，给人主体内容“高于”头部背景的印象，更加突出主体内容。
• 特殊分割：水平分割、渐隐，其他的分割方式如斜线分割或者弧度分割，增加了页面的创意和独特性。

侧边栏（抽屉）

在Tab Bar中，个人中心一般位于最后一个或者倒数第二个。若无Tab Bar的产品，如滴滴等工具型产品常使用侧边栏的形式盛放个人中心相关信息。

有些产品有 Tab Bar，依然将个人信息收纳在左上角，如网易云音乐和 qq。其中 qq 采用了全屏的侧边栏形式。

 未登录状态

• 当用户是未登录状态时，有些产品不向用户开放浏览个人中心页面的权限，要求用户必须先完成登录注册。
• 更多产品允许用户进入个人中心页面，当用户触发某个操作时，提示用户进行登录。
• 未登录状态下的个人中心，没有用户信息。默认头像+注册登录来占位显示。

中性占位图为默认头像，具有通用性。

使用 ip 作为默认头像，兼具品牌感和设计感 。

快捷登录直接在个人中心页面露出登录方式，减少交互步长。