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

什么是个人中心?

是所有与账户相关的功能点的集合入口,在这里可以查看个人资料、个人相关信息以及其他相关功能界面等。个⼈中⼼是 app 内仅次于⾸⻚的 Tab 流量⼊⼝。

个人中心的位置

个⼈相关的信息功能的集合⻚⾯,该模块的起点。thpl1mrvwy5.jpg插图个人中心不是个人页个人中心:个人信息和功能的集合入口,我们通常叫“我的”,只有用户自己能看到。

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

vh1isdmwjos.jpg插图(1)

个人中心页面的设计类型

从入口位置维度:

1、首页顶部(左上角)

2、底部导航tab

trrweu1kpjz.jpg插图(2)

从布局样式维度:

1、宫格

2、列表

3、宫格+列表

45vj31ourhz.jpg插图(3)

个人中心的构成

k23tmge3u4a.jpg插图(4)

一、个人信息设计

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

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

设计注意点:

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

41ognekhdbg.jpg插图(5)

个人中心头部背景设计

sscykfqcdzh.jpg插图(6)

1、无背景

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

tatj24vj53o.jpg插图(7)

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

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

d2zcfiqme0y.jpg插图(8)

3、固定背景-独立卡片

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

emspra1xslt.jpg插图(9)

4、用户自定义

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

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

不足之处:

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

t3ez4xb3ggl.jpg插图(10)

5、根据用户等级变化

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

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

oqevm5iswwu.jpg插图(11)

二、功能入口设计

功能入口一般有3种布局

1、列表式布局

2、宫格布局

3、宫格+列表

1、列表式布局

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

不足之处:

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

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

注意点:

1、对业务类型进行分组

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

使用场景:

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

qtll0gcvb4g.jpg插图(12)

2、宫格布局

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

不足之处:

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

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

注意点:

a、对业务类型进行分组

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

使用场景:

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

d2zcfiqme0y.jpg插图(8)

3、宫格+列表

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

注意点:

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

使用场景:

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

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

emspra1xslt.jpg插图(9)

总结:

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

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

原文地址:UX设计笔记(公众号)

作者:贾斯汀

人已赞赏
UI设计

真正优秀的图标,少不了这7个底层设计原则

2020-10-11 18:05:18

UI设计

花了半年时间,我们做了一套通用型移动设计规范给大家

2020-10-11 18:05:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索