全面解析APP「个人中心」设计思路

什么是个人中心？

是所有与账户相关的功能点的集合入口，在这里可以查看个人资料、个人相关信息以及其他相关功能界面等。

个⼈中⼼是 app 内仅次于⾸⻚的 Tab 流量⼊⼝。

个人中心的位置

 个⼈相关的信息功能的集合⻚⾯，该模块的起点。

个人中心不是个人页

个人中心：个人信息和功能的集合入口，我们通常叫“我的”，只有用户自己能看到。

个人页：用户发布的动态集合页面，其他人也可以看到。

个人中心页面的设计类型

从入口位置维度：

1、首页顶部（左上角）

2、底部导航tab

从布局样式维度：

1、宫格

2、列表

3、宫格+列表

个人中心的构成

一、个人信息设计

个人中心的脸面，优先级最高，奠定该页面的基调，常常放在顶部，并不是该页面核心信息。

功能区“太素”，因此这部分设计往往我们对其背景进行设计，起到视觉引导的作用，同时让整个页面更有层次感。

设计注意点：

如个人中心内容较少，头部个人信息区域可适当使用更大的空间和背景。

个人中心头部背景设计

1、无背景

页面整体干净简洁、弱化了头部的用户信息，突出页面其他功能。

2、固定背景-单色/渐变（纹理、图片）

使用主题色，让品牌概念在个人中心再一次得到强化，提高用户对于品牌的辨识度。

3、固定背景-独立卡片

强化个人信息区域与功能区域的对比，更加强调两个的区别，且使用卡片营造视觉上“个人名片”的感觉，映射真实世界。

4、用户自定义

a、用户可根据个人喜好选择背景，提高了用户的参与度

b、个性化定制，有个人特色。

不足之处：

对用户上传的效果不可控，容易出现图片内容或质量较差的情况。

5、根据用户等级变化

提升高消费用户和付费用户的尊贵感，同时意在会员营造更优质的环境和更贴心的服务。

根据用户等级升降或者是否购买会员而更改背景颜色，意在打造用户之间的差异感。

二、功能入口设计

功能入口一般有 3种布局：

1、列表式布局

2、宫格布局

3、宫格+列表

1、列表式布局

层次展现清晰，灵活性高，方便信息后期扩展。

不足之处：

1、若同级过多时，容易产生疲劳

2、视觉样式弱，视觉区分层级较差

注意点：

1、对业务类型进行分组

2、增加界面层次，让用户更快速的找到需要的信息或入口

使用场景：

多⽤于⼯具类和阅读类的APP中，不适合电商类功能模块较为复杂的APP中。

2、宫格布局

可以强化功能操作，视觉效果丰富

不足之处：

a、宫格过多，不利于用户寻找

b、不利于后期扩展，强迫症的死敌

注意点：

a、对业务类型进行分组

b、图标是设计的重点，注意类别区分

使用场景：

很多电商、外卖、团购等都采用该形式，同时对于一些功能入口较少的APP，采用宫格式也可以让整个界面效果更丰富。

3、宫格+列表

形式上的对比，宫格内容更突出，强调核心功能或信息。

注意点：

可以采用差异化图标、分块以及差异化的颜色等来强调核心功能入口

使用场景：

a、具有突出的核心功能，主次分明的时候，使用宫格+列表的方式可以更突出宫格内的核心功能

b、当个人中心内容较少，列表使用过于单调时，可增加宫格样式，增加页面的丰富性。

总结：

1、偏工具化的App，“ 个人中心 ”作为一个二级模块，被放置左上方，为核心的工具化功能做辅助，且不宣兵夺主，又可以令用户能形成感觉登记，在用户需要查看个人信息或者设置工具项时，方便打开即可。因为人们在浏览信息或布局时，视线往往趋向于从左上角移动到右下角。

2、个人中心是用户对比核心模块而言，并行存在的一级入口时，通常我们可以用独立的Tab来放置“我/我的”（个人中心）这个模块。一般情况下，这类列表主要适用于文字信息为主要内容的列表，列表内容里面没有图片或者图片不是很重要的信息。

-  END  -

如果觉得有帮助，请关注我的公众号【 UX设计笔记 】