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

Recommand
1年前Publish
1304
|
0
|
25
个人中心作为信息分流页面,快速将用户导航到所需的模块,也需要花心思设计思考的。
什么是个人中心?


是所有与账户相关的功能点的集合入口,在这里可以查看个人资料、个人相关信息以及其他相关功能界面等。
个⼈中⼼是 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设计笔记 】


原文链接:https://mp.weixin.qq.com/s/_9tr-ODvlBH_2WIF6wN0tQ
25
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
深圳 | 产品设计师
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹