1.0.47

个人中心页面改版小结

编辑推荐
天真儿
广州/设计爱好者/4年前/10085浏览
个人中心页面改版小结编辑推荐
天真儿

本文主要从分析背景、明确页面定位、定义问题、制定优化方案等几个方面对个人中心页面的改版过程进行总结回顾。

作者:ZYUN(20190813)

预计阅读时长:15m 22s(4581 字;15 图)

配图制作工具:Figma、Overflow



【背景和目标】


配合有车以后 App 4.0 UI 改版,对个人中心模块进行优化。针对这个模块目前存在的问题,优化信息架构,调整视觉层级关系,帮助用户聚焦核心业务,快速高效愉悦地完成相应任务。



【页面定位】


在对个人中心进行改版之前,我们需要先明确主要页面的页面定位,页面定位是我们明确页面存在的问题、分析用户核心行为与页面的信息优先级的前提。


这次改版涉及的主要一级页面是「个人中心」和「个人主页」。

凡是有用户体系的应用,基本都有「个人中心」;大部分带社交属性的应用都有「个人主页」,一些偏工具类的应用则不一定有「个人主页」,这个得看具体产品设计。


1. 个人中心:仅用户本人可见,偏平台属性,重在管理。主要承载个人相关的功能入口与平台相关设置。

2. 个人主页:用户本人和其他用户均可访问查看,偏用户个人属性,重在塑造用户形象。

3. “我“ 看到的 “我” 的主页和其他用户看到的 “我” 的主页略有不同:前者主要是预览作用,确定向其他用户展示哪些个人信息与内容,同时对 UGC 内容进行管理;后者主要是查看用户信息及发布过的内容,了解用户,同时可进行「关注」、「举报」、「屏蔽」等互动操作。


按当前线上版本的设计,「个人中心」主要分为 4 个区域,由上至下依次为个人信息,主要功能入口,广告横幅,有车币商城;「个人主页」主要分为 2 个区域,分别为个人信息和帖子列表。



【问题分析】


本文先对比较复杂的「个人中心」页面进行分析、优化。进行问题分析之前,我们可以先试着完成以下任务:1)打开有车以后 App 的个人页面,找到「我的成就勋章」和「每日打卡活动」;2)把所有入口都点一遍,并查看相应页面内容,返回个人页面,再次找到「我的成就勋章」和「每日打卡活动」。你是否能顺利、快速地完成以上两个任务?

现在我们来看一下目前个人中心页面存在的问题:

1. 顶部的个人信息区域可点击元素较多,布局比较拥挤,点击热区小,操作比较困难,容易导致误触。


2. 功能入口不唯一,且相同功能的入口分布散乱,没有清晰的逻辑联系,易造成用户困惑。

例如,可能出现以下场景,用户点击「LV.15」进入「任务中心」之后返回个人中心,再点击「新手上路」也进入了「任务中心」。因为不符合用户心理预期(点击不同的入口进入不同的页面),用户可能感到困惑,「咦,我刚刚是不是点错了,怎么又到这个页面了」。

入口和相应功能如果没有唯一的对应关系,用户就会摸不清相应的功能入口。


关于入口唯一:我目前认为,在同一页面,功能入口需要尽可能保证唯一,避免造成理解困难、导航不清晰,操作路径复杂。如果入口重复,需保证这些入口之间具有简单有效、易于理解的联系。


3. 功能入口分类标准不够清晰与合理,不利于用户理解与学习。

例如,「车主认证」、「我的奖品」和「兑换记录」为什么分为同一模块?「消息中心」、「问题反馈」和「提现」之间的逻辑联系是什么?


另外,如果信息分类逻辑复杂,也会增加用户的判断成本。

这个页面就像我们物理世界中的导视系统。我们想在某商场买一件连衣裙,看到商场导视图上标着第一层是珠宝、第二层是服装、第三层是饮食,第二层又分为 A 区女装、B 区男装、C 区童装,我们就可以快速找到女装区。如果没有这样的分类,每一层都有女装店,女装店旁边有可能是珠宝店、小吃店,那我们买到合适的连衣裙的效率就很低。


4. 功能入口未区分主次,主次任务不清晰。

功能入口较多的情况下,采用宫格的形式平铺展示所有功能入口,会导致层级不够清晰简洁,无法突出核心功能入口,也不利于扩展。另外,用户在浏览时需要跳跃着阅读图标下方的文字,入口过多时,也会降低效率。


5. 信息表达不明确,无法预知操作结果。

例如,用户无法预知点击「未认证」会发生什么,也不清楚「新手上路」是什么。用户可能需要经过试错才明确这些信息的含义。


「新手上路」其实是成就勋章,如果做成勋章样式,用户就能理解它是个成就勋章。但,因为「Lv.15」「未认证」「新手上路」这三个元素都是一个背景色块加文字的视觉形式,单靠文本的话就只有「Lv.15」比较好理解,因为「Lv」本身就是大家都熟悉的「等级」,其他两个并没有通用的、用户熟悉的含义。


此外,存在入口名称和目标页面标题不一致的情况,例如,点击「兑换记录」进入的是「我的订单」页面。 


6. 问题总结

根据以上分析,我们可以总结如下:

目前个人中心页面存在的主要问题是,信息架构不够清晰合理,用户很难在有限的时间里,快速找到需要的信息或功能入口,增加了用户使用成本。我们可以通过对信息进行梳理、归纳分类和组织,化繁为简,建立良好的信息层级,帮助用户快速理解、获取信息。



【优化方案】


1. 页面内容分析

(1) 主页入口和编辑个人资料

大部分带社交属性的应用都有个人主页,从个人中心点击进入个人主页是常见操作,符合用户既有习惯,入口不需要做得这么显眼。

如上文所提,个人主页主要是展示给其他用户看的,对 “我” 自己而言,有「预览」的作用。所以,一般「编辑个人资料」操作都会放在「个人主页」,用户修改资料后返回「个人主页」可直接看到效果。

并且,用户自己进入个人主页和编辑个人资料都属于频次相对较低的操作,可适当降低信息层级。


(2) 签到、等级、主成就(成就勋章)、有车币、任务中心

作为带动促活、留存等的常见手段,这几个都属于用户激励体系,相对来说都比较重要。(这里先确定个人中心页面的信息结构,暂时先不讨论具体页面内容。)


其中,用户最关心的是「有车币」,几乎所有行为都是围绕「有车币」进行的,查看有车币数量也是个人中心页面包含的主要用户行为之一。(只是从逻辑上进行猜想,因为不管是后台还是社区帖子,我们都可以看到很多关于有车币数量变化的用户反馈。暂时没有数据可以验证。)

但目前的「有车币」缩在「有车币商城」旁边,极不显眼,并且如果没有「有车币商城」作为线索,单靠这个金币图标很难表达出「有车币数量」这个信息,不如使用文本更直接有效。


此外,这几个最没有灵魂的就是「成就勋章」了,几乎感受不到勋章带来的荣誉感。目前,我的想法是去掉「主成就」,仅在用户个人主页展示勋章墙,给用户「累积」的成就感,“点亮越多勋章看起来越牛”。

因此,将「成就勋章」入口移到「个人主页」,其他入口均保留。


(3) 口碑、车主认证

如果用户没有买过车,怎么激励都不会发口碑、认证车主。

而一般情况下,一个用户可能就 1~2 辆车,并不会频繁发布、修改口碑,一旦认证过车辆也不需要再认证了(如果审核不通过需要重新提交资料,可通过系统消息引导用户进入认证页面)。这两个入口都是使用过一两次之后,就不需要再使用了,作为一级页面的常驻入口有点浪费页面空间。

因此,这两个入口可从个人中心首页移除。口碑可同帖子、打卡日记一起,放在「我的发布」中;车主认证入口可放在「编辑个人资料」中。


(4) 收藏、我感兴趣的

「我感兴趣的」和「收藏」都是点击收藏按钮收藏的内容。因此,仅保留「收藏」入口。


(5) 草稿

草稿对内容型用户来说是比较重要的,但使用频次应该不高。


(6) 消息中心

消息中心是用户及时互动的入口,同时还可承载产品宣发的功能,对内容、社交类应用来说都是很重要的。因此,可适当提高此入口的层级。


(7) 提现、我的奖品

这两个分别是实物奖励(现金)和虚拟奖励(有车币),可以归入 “我的奖品“,属于活动运营入口。从产品策略来说,相对比较重要,主要用于收集此页面的闲散流量。


(8) 兑换记录、有车币商城

「兑换记录」其实是「我的订单」,在有车币商城中也有相应入口。


首先,同一个入口用不同的文案,使用过程难免产生困惑。第二,「兑换记录」是随着「进入有车币商城消费有车币」这个行为产生的,如果放在有车币商城里,逻辑上比较成立。


「兑换记录」现在放在个人中心首页,可能是因为用户使用频率比较高,把它提出来作为快捷入口,减少点击次数,降低操作成本。但是在个人中心首页一堆互不相干的入口中寻找「兑换记录」,带来的认知负荷可能更高。


因此,仅保留有车币商城中的入口。

有车币商城暂不涉及营收,只是作为有车币消费的载体,激励用户赚取有车币,从而提高用户活跃度和留存。可以把它和有车币联系起来,但有车币层级更高,更突出有车币。


(9) 问题反馈

从后台数据来看,目前大部分的反馈是商城售后相关的问题,运营人员回复也很及时,都是即时提供相应解决方案,此入口实际主要承载的是「在线客服」的功能。


关于产品使用问题的反馈比较少,运营人员回复内容均为「感谢反馈」、「已反馈给相关部门」、「请添加小助手微信」等,这些解决方法在「使用帮助」中都可以找到。


目前的设计结合用户的使用场景,可能导致用户操作路径不顺畅、操作效率低下。例如,用户进入商城后产生了关于订单的问题,此时,若想进行反馈,就需要返回个人中心,找到「问题反馈」进行反馈。若收到运营人员的回复,查看回复的地方又是在「消息中心」里。经过沟通,想再次查看订单,确认问题是否解决,又得回到个人中心,再次进入商城,找到我的订单。


因此,将商城客服独立出来,放到商城,用户在查看订单、浏览商品的过程中可直接进行咨询。另外,将「问题反馈」与「使用帮助」结合起来,放在个人中心首页,并增加「热门问题」。这样,既可减轻运营工作量,也可给用户提供及时帮助,提升使用体验。


(10) 增加「我的车友圈」入口

根据当前产品的具体功能架构,在个人中心页面增加「我的车友圈」入口。


2. 层级梳理

经过以上分析,我们基本明确了页面中所有信息、功能之间的逻辑联系。现在,我们按从下到上的卡片分类方法,对所有内容进行分组,并确定信息层级。(单机版的卡片分类法哈哈。)


3. 确定布局

根据以上分析结果,我们可以画出基本的界面布局,如下图所示。相比原来的界面,新的界面看起来更简洁了,信息层级也更清晰,但依然存在一些问题。例如,核心功能入口的布局不利于扩展,「我的消息」把整个界面拦腰截断了,「小Q(有车以后 IP 形象)」的视觉吸引度太强,「签到」操作的可见性较弱等等。


所以,我们需要再梳理、调整一下页面的布局。

(1) 个人信息区域优先级最高,相当于路标,用户进入个人中心之后需要知道「这是我的个人中心」,同时遵循已成型的用户习惯,所以放在顶部。但头像,昵称这些信息又相对没那么重要,因此,可采用左右排版,节省页面空间。

(2) 功能入口整体采用「宫格 + 列表」的布局形式,既可以突出核心功能入口、区分主次任务,也有利于扩展。

(3) 整个页面的布局基本遵循 F 型浏览模式,顺应用户的自然视觉习惯。

(4) 重要、使用频次较高的功能入口尽量保持在「拇指的自然操作区域」内或接近此区域,以便用户操作。


经过调整,我们就得到了以下的效果图。


最后,补充一些界面细节。同时,由于此次改版中,页面内容结构的改动调整较大,所以增加了新功能提示,告知用户重要的功能入口调整,引导用户尝试、熟悉新的界面结构,避免造成困惑。


4. 改版前后对比



【思考总结】


个人中心页面这次改版主要针对功能框架进行整合,调整信息结构,优化界面布局,保证核心功能突出,次要功能入口统一,让信息层级更加清晰,使产品功能得到合理曝光,同时保证用户可快速找到他们想要的内容。

在改版设计前,需要先明确页面定位,即这个页面是什么,承载什么功能,为什么这么做,然后再围绕设计目的进行问题分析,多次尝试,得出解决方案。整个设计过程,都离不开对用户目的和行为的思考。


此外,像这种页面内容结构有重大调整的改版,在版本更新后,需考虑使用合适的引导方式引导用户尝试、熟悉新的界面结构,降低学习成本


附,此次改版中,我整理了主要的个人中心模块信息结构如下:



------

1. 本文记录的只是此次个人中心页面改版的初步思路,并非最终完整版设计。

2. 由于条件限制,此次改版暂无数据、用研等支持,也未经用户测试,大部分内容均为个人理解与思考。如有错误,欢迎指正啊,非常感谢~

3. 改版后的视觉效果图中,核心功能入口图标来自 王小夫 的设计,底部标签栏的图标来自  王老中医 的设计,感谢我的同事儿~

4. 此次改版过程中,我在网上查阅及参考了以下文章,非常感谢这些作者~

合理、清新 —— 百度糯米个人中心设计思考(作者:百度 UXC)

从逛商场学习交互设计:信息架构梳理如何从小白到精通?(作者:Mr汤进er)

个人中心页面从思考到设计全过程(作者:海盐社・风筝KK)

从个人中心出发,聊聊个人主页设计前的思考(作者:ME网易移动设计・Arale!)



115
举报
243
分享
原创文章 UI UX设计 设计改版 个人中心
声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。
评论
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
登录注册
侵权申诉 企业服务 帮助中心
京网文[2023]1747-060号 京公网安备11010502000501号 京ICP备11017824号-4 京ICP证130164号Copyright © 2006-2024 ZCOOL站酷

深圳SEO优化公司济宁市seo优化推荐阳江网站定制周口网站设计推荐爱联网站开发哪家好徐州市网站开发哪家专业柳州市企业网站设计多少钱宜春优化多少钱宁波市阿里店铺运营哪家好渭南网站开发多少钱濮阳市seo按天扣费哪家专业汕头市网站搭建公司鞍山市网站开发价格湛江市seo按天扣费公司漳州市优化哪家好玉溪市seo按天扣费价格周口市阿里店铺运营公司儋州网站搭建价格娄底市网站定制公司上饶市seo按天计费推荐汕头网络推广哪家好宁德模板网站建设哪家专业保山市网站设计哪家专业无锡网站设计推荐白山网站定制报价乌海网页制作推荐酒泉网络推广哪家专业蚌埠做网站哪家专业玉溪网站推广多少钱南昌市网络推广哪家专业漳州企业网站改版哪家专业歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

深圳SEO优化公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化