我的页面就是大多数应用底部导航中的最后一个选项,是个人中心的板块,用于管理你的账号信息、数据、服务,以及实现对应用本身的相关设置。

我的页面通常在具有账户系统的应用中才会使用,如果没有账户系统的基础应用(如天气、日历工具)就没有使用它的必要。
而还有两个类似的页面类型很容易和我的页面搞混,一个是用户个人主页,一个是系统设置页面,在这里我们做个简单的区分。
用户个人主页是用户在应用内的公共空间展示的页面,比如你在社区里发个动态,其它用户点击你头像进入的这个页面叫个人主页,而不是我的页面。一个应用内可以既有个人主页也有我的页面。

而设置页通常有更强的指向性,即围绕在特定方向进行功能设置的页面,有用户资料设置,也有系统/应用设置页面。在没有账户系统的应用中,往往只有系统设置页面,而有账户系统的应用,也可能既有我的页面也有账户、应用设置页面。

了解完它的定义,下一步就是认识它的设计趋势。很多人可能认为我的页面只是一个简单的基础页面,不需要投入太多的设计精力,实际上这是一种误区,我的页面的设计权重在今天并不低,而且它有往更复杂方向演进的趋势。
如果从逻辑理论推理,我的页面就是一个基础支撑型功能页面,它的作用就是让用户可以找到自己在应用内添加和生成的数据,或进行一些基础的设置。
单说它对比首页、频道、商品列表等页面来说肯定是没有太多分量的。但是,分量不够不代表它的访问量就低…越是会产生用户数据和记录的应用中,我的页面访问的占比也就越大。
比如电商中你要看订单、社区里你要看帖子、健身工具里要看健康指数等等。我的页面访问量往往是一个应用内单一页面访问量的前几名。
既然有访问量,放在今天的市场环境当然是要打主意的。也就是它不能只是个功能页面,还要承载更多的运营需求和引流曝光。
运营需求最容易理解,就是要在这个页面中放运营相关的活动展示。甚至有些应用中在进入我的页面以后还会有独立的弹窗(比如你又有20W贷款到账了),给用户一点小小的“惊喜”。

至于引流和曝光上面,最常见的目标有两个,一个是会员,另一个是信息流。会员是很多应用中的重要创收手段,且它和个人信息是高度相关的,所以会非常重视会员模块的露出,吸引用户查看和点击。另一个信息流则和应用类型有关,电商类会推商品信息流,社交类会推动态信息流,让用户即使在我的页面,也可能一不注意,就开始刷起来。

了解完我的页面的重要性,下面就要知道我们应该如何来完成它的页面设计了。
我的页面的布局并不算复杂,常见的模块包含用户信息、会员模块、快速入口、选项列表、信息流等。

顶部用户信息模块,就是放用户基本信息的模块。在以前的设计中还会有较强的个性化展示空间,比如预留区域展示头像、背景等,但在今天这种设计越来越少见了,一方面是没必要,另一方面是要腾空间来放更多别的东西。

而用户个人信息包含账户名、昵称、ID、等级等基本信息,还包括一些和会员关系极大的基本数据,比如关注量、粉丝数、点赞量,具体放什么由产品决定。

接着就是会员模块,会员和用户有很强的关联性,所以这两个模块往往是连在一起,或是嵌套关系。会员模块会展示用户当前的会员等级,往往也会突出会员的权益,吸引用户开通会员,或提醒已开通会员的用户有什么权益。

然后就是快速入口的模块,主要罗列应用内最关键、常用的几个功能选项,比如订单、收藏、记录、物流等等。如果应用的重要功能多,可能就会包含多行的快速入口,甚至可以左右滚动。

而部分应用为了防止多行快速入口的枯燥,会将快速入口“瓷片区”化,展示下级内容或添加更多的视觉元素进来,比如淘宝的我的页面入口设计。

再往下往往就是次要功能或系统设置的列表了,传统的应用会使用单列设计,而选项太多的应用可能就会使用多列设计。

如果设置的选项都是很细节的内容,且下方还有信息流的话,那么往往会把这些选项置入到下级页面去,比如增加设置页面,通过点击进入设置页面查看和操作。
最下方的信息流也是比较有意思的一个模块,虽然它的组件样式肯定是前面列表页已经确定了的,但它的摆放位置非常重要,那就是 —— 一定要在首屏中露出。
信息流这种东西,就是只有露出了才有威力,可能展露出来的半张图就可以让用户忍不住下滑去探索,陷入多巴胺(资本主义)的陷阱。如果第一屏看不到放第二屏,那正常用户根本不会闲着没事在我的页面刷信息流……

我的页面的重要设计目标,就是尽可能将关键的功能、入口置入到首屏中,设计师需要根据具体包含的模块去做规划,才能输出让团队满意的结果。
最后就是关于我的页面的视觉设计方案了。而基于上面对框架的认识,我们可以肯定的是我的页面的主要视觉重心会集中在上半区,而下半区的选项列表与信息流都只需要基础的样式即可。
首先页面顶部的背景,除了使用纯色外,更多会添加渐变或纹理图片,而早年喜欢使用用户头像做高斯模糊的做法现在已经被抛弃了。

这类背景制作起来很简单,就是渐变色或弥散的应用,或是找外部素材即可。之所以要让背景有颜色,最重要的原因就是——创建“氛围”。
因为我的页面往往要添加运营性质的内容或强调会员模块,这些东西一定在视觉上非常突出,如果没有添加背景的氛围做缓和,就是平地起惊雷的“干拔”,这不会产生太好的视觉效果。比如下面几个案例就是有背景和无背景的对比。


然后就是会员卡片的设计了,这就是个老大难题,因为会员卡片本身要突出“华贵”的属性,所以设计上自然也就喜欢用有质感的风格,比如有镜面反光的卡片,或是使用3D质感的图标元素等等。
只要没有别的运营元素,会员卡片就应该是这个页面最突出的模块,虽然具体怎么设计要靠设计师自己发挥,但它通常都会有一个高饱和度或低明度的填充色。

再往下到快速入口区域,个人主页的快速入口和主页的快速入口虽然是同一种组件类型,但它们在一个应用内的权重却不是一个等级。

我的页面中的快速入口可以只用工具图标,也可以用装饰图标,但装饰图标的视觉复杂度一定要有所控制,只需要考虑最简单的装饰图标类型即可。

这里还有个很有趣的细节,那就是如果我的页面添加了那种运营性质的快速入口模块,那么基础功能的快速入口就会用最基础的线性和面性图标,为运营让路。

再往下如果放设置列表,就单列和多列之分,只有页面空间大下方没有别的内容适合放单列,只要有信息流或是选项太多,就会使用多列的设计节省空间。这部分的设计图标就可以往简洁的做,才不会让界面看起来太浮夸和复杂。


最后一点就是我的页面内的运营模块,不管是快速入口还是轮播图、胶囊类广告,它们都是具有很强“破坏力”的元素,突兀才是它们的宿命(和会员卡片不一样),而不是在视觉上融入甚至消失在当前的页面中。
在正式项目中你可以加,但在作品集输出过程中就建议移除这些突兀的运营模块,才能获得更好的我的页面的视觉展示效果。
以上就是对我的页面设计思路的全部介绍。
转载自:https://www.uisdc.com/designing-me-page
咨询相关问题或预约面谈,可以通过以下方式与我们联系
业务热线:
178 6662 5335
185 6288 7528
至上UI设计,隶属于青岛至上视界互联科技有限公司,成立于2018年7月。专注于建站和UI视觉设计,致力于创造令人难忘的用户体验,用设计来打动每位用户的心,从而为产品赋予更多价值。遵循用户体验至上,品质至上,服务至上的理念,至上UI设计已为上百家企业提供设计服务,有着成熟的服务经验。
扎实的专业素养
资深的项目经验
精准的需求沟通
完善的售后服务
高效的执行力
规范的设计流程
严守进度与质量
对设计执着的追求与热爱
企业品牌网站
响应式网站
网页UI定制设计
移动端UI设计
系统软件界面设计
数据可视化大屏设计
图标定制设计
落地页设计
青岛UI设计界面设计丨山东UI设计界面设计丨青岛网页设计丨烟台UI设计界面设计丨济南网页设计丨济南UI设计界面设计丨泰安UI设计界面设计丨潍坊UI设计界面设计丨青岛网站设计