撸一遍个人中心列表页

5年前发布

原创文章 / UI
涵雨_Rain,禁止转载-禁止商业用途-禁止个人用途

随着互联网的发展,应用商城中出现了种类繁多,各式各样的app,而这些app里面或多或少都会存在一种界面,我们称他为列表页,我比

随着互联网的发展,应用商城中出现了种类繁多,各式各样的app,而这些app里面或多或少都会存在一种界面,我们称他为列表页,我比较在意个人中心列表页,因为个人中心是承载着我们的个人信息,以及在使用app时留下的数据。

个人中心列表中通用的内容有:头像账号.余额积分.个人资料修改.设置.意见反馈.使用说明.服务条款.关于我们.

不同类型的app里面个人中心的列表内容也会根据用户的需求以及app自身功能而有所不同,我在此篇文章主要从视频类,音乐,运动,金融,新闻咨询,财经,阅读,浏览器,汽车,城市出行,社交,体育,物流平台,健康,婚恋,图像这些类别进行系统的分析,每类选择9款app进行分析。

作为一名UI设计师,或许应在某一方面要研究的透彻点,我开始从个人中心列表开始研究。


4b2458009462a84a0d304f0de3d9.jpg

视频类目前以广告.流量.付费内容为移动视频货币化的重要途径,因此视频类app的个人中心除了我说的所有app的通用内容外,视频类app还会有开通vip会员,缓存,观看历史,订阅等内容。

从默认头像来看,爱奇艺,优酷,搜狐,AcFun用了自己设计的卡通形象,我觉得这样的设计能够提高用户对品牌的认知。

我们下面再看看列表布局,只有blibli用的宫格布局,其他8个用的是列表布局,列表布局就是以列表的形式展示具体内容,并且能够根据数据的长度自适应显示,这也是最快速的app布局方式。宫格导航是将主要入口全部聚合在页面,让用户做出选择。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。


4605580094cba84a0d304f98a962.jpg

音乐类app的个人中心除了我说的所有app通用内容外,还会有本地歌曲.下载管理.最近播放等通用内容。

酷狗音乐.虾米音乐.咕咪音乐使用的是抽屉式列表,优点是给内容区域留有更大的空间,缺点是可见性较低,在某些平台下,和平台固有的导航设计模式有所冲突,低效,并非一瞥即得。

QQ音乐,酷我音乐,阿里星球运用的混合组合列表,当用户需要聚焦内容,同时又需要一些快捷入口能够连接到某些页面时,就可以采用组合列表。组合列表上方用宫格的形式展现快捷入口,这种导航比较灵活,能适应架构的快速调整。


407d58009518a84a0d304fb23d31.jpg

运动数据丰富度,作为一款运动App,它的运动功能是否全面也是一项重要的指标。

运动类app的个人中心除了我说的所有app通用内容外,还会有训练历史,身体数据,运动目标等通用内容。

悦跑圈使用的是舵式导航,页面有处于同一层级的几大部分内容,同时又需要一个非常重要且频繁操作的入口,就可以采用这种APP导航模式。同时个人中心加了小banner位,此baner位的内容适用于用户使用场景,因地制宜,通过收集悦跑碎片召唤里约探险记勋章活动来提高用户对app的使用率以及停留时间。

小米运动,咕咚用的是数据可视化,让用户在个人列表中直接看到自己之前的运动记录。动动里面用的是进度条,让用户更直观的看到自己差多少到达目标,并在界面上运用了插画元素,使界面增加了趣味性。

每日瑜伽用的是列表格式,feel,乐动力,悦动圈,keep用的是混合组合列表的格式。


f4f458009573a84a0d304f855a6f.jpg

金融类app,从用户需求出发,在选择投资平台上,影响到用户决策的主要有以下五点:安全,收益,资金流动性,便捷,用户体验。

因此站在移动APP产品层面,金融类app应更好的表现出安全,因此金融类app个人列表下基本上都是登录占的比重会大一些,这是他们表现安全方法之一账户安全,目前账户安全的内容还比较简单,有实名认证、保护手机和交易密码可以进行设置。

储蓄罐做的较为轻松,个人中心上面有新手有礼,我是土豪,每日签到的奖励来吸引新手注册


83ee580095a8a84a0d304f111058.jpg

移动新闻客户端是在传统门户、传统纸媒等PC时代演变到现在移动时代的二代产品,带有传统门户用户获取最新资讯、了解信息的基本需求,但随着移动时代的发展,移动设备的演化,用户需求逐渐增多,用户使用产品的场景碎片化、多样化。

用户往往在路上、公交车、地铁上,在晚上睡前,早上醒后,在吃饭时,在上班休息过程中,在上洗手间等碎片化时间,这也衍生出了用户离线阅读等的需求。如何在短时间内满足用户以上这些需求成为新闻类应用需要考虑的问题。

腾讯新闻,网易新闻,今日头条,搜狐新闻,一点资讯,新浪新闻,ZAKER的个人中心都选用的列表形式,而搜狐个人中心没有账号设置。

百度新闻用的是抽屉式列表,而快报个人中心强调账号登录想要进个人界面,首先需要登录,而我个人不喜欢这样做的app,通常我想先看看里面的内容好不好,我才选择登陆,如果事先看不到你面内容的情况出现我会选择卸载这个app,要是理财类,财经类的话我会考虑下先登录。


fa7e58009601a84a0d304f91871d.jpg

财经是指财政、金融、经济。2015年中国移动互联网市场规模将达23134.3亿元,增幅达到72.2%。未来三到五年,移动互联网规模将继续保持高增长态势。面对这一市场,各行各业争相进入移动应用抢占市场,财经也不例外。

新浪财经个人中心整体用的是列表布局,列表下有分组,分为用户,交易,观点,问答,题材等模块,与重要的子集(A股,港美股)呈现在同一个页面,而不放到二级页面里,显得更一目了然,并减少了用户的学习成本以及点击次数。

自选股点击资源管理以及活动中心,系统设计,吐个槽右边的查看更多按钮,内容是下拉展示,而不是跳转到下一个页面,例图上我点开了活动中心将A股大赛,活动精选,私募精选给展示出来。这样的展示方式有一个好处是使子集和父集的关联性增强,减少了用户对跳转页面内容的记忆。而这个页面有个地方做的不太好,从交互形式上考虑,向右指向的箭头,是跳转二级页面的按钮,所以我觉得这个页面所有向右指向的箭头都应该改为指向向下的肩头。

360股票和牛股王app在登录button的背景上放上了banner,充分利用了展示位,而这个banner的内容是吸引用户主动登录的。

9de258009644a84a0d304fc52886.jpg

一本书一杯茶,悠闲的坐在窗前藤椅上慢慢品读,已经成为一种奢侈的享受。快节奏的生活、碎片化的时间,驱使人们逐渐适应新的生活方式,所以现在人们经常会在等人或等车的间隙,忙里偷闲的掏出手机浏览新闻或看小说,而手机俨然变成了移动书房。

大多数阅读类app的个人中心用的是抽屉式列表,可能他们需要给内容区域留有更大的空间,内容为主。上边的掌阅iReader,QQ阅读,咪咕阅读,多看阅读,塔读文学,都用了抽屉式。我发现他们还有一个特征就是基本上每个app的个人中心都突出了充值按钮。


994058009676a84a0e282bbc3b50.jpg

移动互联网浏览器不再是唯一上网入口,应用占据了越来越多的用户时间。相较而言,手机浏览器具有“覆盖广泛,快速到达”的核心优势,几乎可以到达移动互联网绝大多数服务,所以对于解决长尾需求而言,手机浏览器始终是必备,难以被取代,搜索则是满足用户在长尾里找内容的方式。

浏览器类app大多个人中心选择点击后从底部弹出的方式,这种方式不但界面设计上看上去简洁,功能上还可以快速切换到个人中心。


779b5800969ea84a0e282b2895a2.jpg

对于所有汽车人而言,各色汽车类APP必然占据手机的重要位置,无论是资讯类,养车类,还是考驾照类。

汽车报价大全和易车app由于是一家的产品,所以登录模块基本上做的一致,它突出了登录的方式,是用户知道有快速登录的方式,使用户不会对登陆产生排斥心理。

爱卡汽车的个人中心的入口很独特,他把个人中心放在了核心的位置。


91c858009734a84a0d304f6c2b94.jpg

中国的城市经济正在飞速发展,但与此同时也带来了许多严重的交通问题。一时间,出行难成为了各大中小城市市民共同面临的难题,城市交通O2O的兴起却 在某种程度上极大缓解了出行难的问题。各类出行app涌现。

这里面谈下神州租车的个人中心,未登录时点击入口icon,会弹出登录页面,页面用通栏的图片作为背景。提升视觉表现力度,又丰富了App情感化元素,但这种设计方法,对字体和排版设计要求更高,难度也多,但极容易渲染气氛。


434f58009768a84a0d304ff7beca.jpg

移动社交具有人机交互、实时场景等特点,能够让用户随时随地的创造并分享内容,让网络最大程度地服务于个人的现实生活。

社交类app个人列表中心都会有提醒信息数量的小icon,这样可以使用户不漏掉信息,以及像我这种强迫症的人,看到这个提示我就会点,增加了app的点击率。


dc3358009793a84a0e282b76f8ff.jpg

现在广大球迷使用体育类app了解比赛资讯,观看比赛直播已经成为一种普遍现象。

体育类app中体育疯设计个人列表较为独特,他把个人中心做成标签栏,这样可以随时下注,做任务,看排行,简单、便捷、易操作。他疯的社区属性,让一批喜欢篮球、足球的人聚集在了一起,无所不谈。


14ac580097c7a84a0d304fdc8c90.jpg

随着淘宝、京东等电子商务网站的快速崛起,越来越多的人选择进行网上购物,线上购物交易额连连上涨。物流作为连接电商和网购用户的中介,也受到越来越多的关注。

物流app同金融类app一样应更好的表现出安全,因此物流类app个人列表下基本上都是登录占的比重会大一些,这是他们表现安全方法之一账户安全,目前账户安全的内容还比较简单,有实名认证、保护手机和交易密码可以进行设置。


61a958009897a84a0d304ff4bbc1.jpg

随着智能手机的普及及手机上网用户的不断增多,医疗类app也呈现出欣欣向荣的繁荣盛景.大部分医疗类APP都集中于健康、饮食和锻炼等领域,仅四分之一的APP集中于疾病管理与治疗。但二分之一的APP功能有限,大都是信息咨询类为主。

在之前那些类别的app提到过的列表形式我在这就不重提了,想必大家自己现在也能看出上图app的列表都用了哪些形式。在这单独提一下轻加吧。轻加整个app的设计风格是小清新,简洁大方,而个人中心一点开的登录页面的用图向用户暗示了轻加会提供高品质的健康减肥产品、运动器材和装备的服务。提高用户忠实度,并突出品牌基调。


ee8f58009a3da84a0e282ba043cf.jpg互联网时代,人们开始习惯把一切事物都往手机上搬,每次拍完照之后,看着没有修饰照片,没有勇气发出去?所以图像美化app就这样流行起来。我点开了上面9款app,发现没有社交属性的此类app,基本上都没有单独制作个人中心这个模块,他们只有他们本身修图的功能。

in的个人中心设计的清新,细致,功能齐全,并充分利用界面位置,怎么着我也的加个banner,盈利。独特的是VSCO他的个人账号直接放在首页顶部,而且用的那么显眼的蓝色,来提醒我们登录和注册。足迹个人列表下的切换导航下面的小卡通形象是一个亮点。


1da958009aa4a84a0e282bfe3ec7.jpg

适婚群体遭遇到婚恋方面的现实阻碍,单身群体不断延迟婚恋时间,且数量不断增大。婚恋行业迎来了新的促进机会。庞大的单身人口数量奠定了婚恋交友市场的基础。

婚恋类app一般以实名制来注册,而且注册时肯定会问你男女,年龄等,所以我目前就停留在登录页面来做分析,婚恋类我觉得走的是情感路线,所以我觉得这类app的登录页面走大背景比较好,选图像珍爱网,微爱那样烘托情感,使用户也能感受到这种情感。



感谢大家观看,欢迎点赞


转载此文章条件:

        署名:Z设团-Z先生

        并附带站酷原文链接

412
- 位站酷推荐设计师推荐 -
一下给作者疯狂打call吧!
(推荐 + 收藏 + 关注作者)
+1 +1 +1

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    喜欢TA的作品吗?喜欢就快来夸夸TA吧!
    夸夸

    夸夸

    收录收藏夹
    文章 1
    添加表情
    没有新消息
    已收藏到: