9个方面设计个人中心
任何拥有用户体系的产品,都应当具备个人中心页面,看起来结构简单的个人中心,实际上蕴涵着众多容易被人忽略的设计细节,本文意图在于整理,归纳以及总结个人中心页面的设计规律,从而提供设计参考。
大纲:
个人中心与个人主页的区别
有一个地方叫个人中心,在这里汇总着和用户相关的各类数据,还有功能入口以及全局性操作,这个地方仅仅只有用户本人能够看见,它的设计目标是要提高效率。
用来展现用户信息从而塑造形象的个人主页,是由用户的基本信息以及身份等级,还有自主上传的内容一起构成的,用户能够对其可见范围进行设置,其设计目标在于展示个性。
拥有用户体系的产品存在个人中心这个部分,个人主页常常出现在具备社交属性的产品当中,所以这两者呈现出的是包含关系。
社交类型产品同时拥有个人中心页面和个人主页页面。

个人中心的信息架构
个人中心的信息复杂程度跟产品自身存在关联,产品所属体系越是庞大,那与之对应的个人中心页面所要承载的内容就会越多,其结构必然复杂,一般平台型电商的个人中心页面一定要涵盖这些内容:用户的基础信息,全局性的操作也就是设置,关键数据记录比如收藏、关注,购买激励像会员、红包,核心业务就是订单信息,工具集合也就是工具箱。

当面对这般数量众多且繁杂多样的信息时,进行梳理以及分类这件事情是极其重要的,而整理出具备合理性的信息优先级乃是安排页面布局的前提条件以及关键所在。大多数产品的个人中心能够被总结归纳为几个主要的信息模块,它们分别是个人信息、全局操作、重点推广、核心功能、全部功能。
特别复杂或者简约的产品可以在此基础上增加或者删减模块。

头图样式
个人信息通常放置在页面最上方,页面顶端的设计形式丰富多样,要依据产品的业务特性以及风格调性,挑选合适的样式。通常包含社交属性的产品的个人主页,积极鼓励用户全面展现个性,准许用户自行上传背景图片,而对于别的产品来讲,稳定以及秩序感相较于个性更为关键。
头图主要分为两类:固定样式、自定义样式。











上面依次呈现了,由简约朝着精美的头图设计,不同的设计适配不同的产品属性。一味予以复杂度增加,并不必然符合自身的产品,重点乃是需要知晓目标用户的视觉喜好,以及产品要传达的品牌认知。
个人信息模块
个人信息模块通常涵盖:头像,昵称,身份属性等这类事物一般包含的内容。从布局的角度视之,一般拥有以下几种进行排版的方式:
头像居左、头像居中、头像居右
按照信息布局来讲,三种排版方式不存在好坏之分,经观察可知,超过八成的线上产品采用头像居左的布局方式。一般人的浏览习惯呈现出“F”形,屏幕左上角的内容是最先映入人眼的信息,适宜放置关键信息以利于定位。头像居中的布局方式适用于个人主页,能够更有力地强调和突出头像自身,对于社交产品而言,这也是一种增添差异化的选择。



全局性操作模块
从产品层面来讲,全局性操作通常涵盖像设置、信息、扫一扫这类相关内容,并不仅局限于当下所呈现的页面,它具有更广泛的范畴。
全局性操作有 3 种常见的布局方式:

此种布局方式,其拓展性堪称最强,导航栏能够盛放多个控件,而不会出现布局局促之状况,于此同时,它契合用户使用习惯,设置于右上角或者左上角,亦是极为常见之方案。

此种布局方式,其拓展性较为薄弱,于右侧案例能够见到,假设昵称呈现出较长的状态,而控件数量又较多的情形下,极易在视觉层面给予人一种拥挤的感受。就信息亲密性而言,全局性操作以及个人信息,同样不应当被归入到同一个模块内。

这种布局方式把“设置”给弱化了,一般来讲要是“设置”的优先级比较低,没有必要特意将其在头部进行展示,直接用列表的形式放在底部就行。
如何突出信息
重点信息与次要信息,在每个页面都存在,将信息优先级梳理妥当之后,借由不一样的视觉呈现方式,给予用户,助力用户在第一时间把关键信息获取到手,进而提高效率。从产品方面来讲,不同时期的产品有着不同的主推内容,在现阶段,为增大用户粘性,提升市场占比,会员体系的构建是相当关键的,拥有会员体系的产品,都不约而同地对用户开会员予以激励,力求争取到尽可能多的权益展示机会。个人中心是一个推广会员的出色触点。除了推广会员之外,卡券、红包福利,同样是推广重点。
可以从以下几个维度进行视觉强化突出:

不是会员类型的板块,常常运用主色来予以突出,板块跟背景颜色的对比度越大,就越能突出,用色的逻辑跟按钮用色是一样的,要是不想过度强调,能够用浅色背景,参照花椒的案例。

用户针对会员概念,存有大概的既定认知爱游戏app入口官网首页,在设计会员板块时,“特权”“尊享”等诸般关键词是指向,与之相匹配起应用也广泛的配色主要集中于黑、金、银这三大类别,还有一些诸如玫瑰金、鎏金等的延伸色。这般用色尽管无法体现品牌感,然而已成为移动UI之下的一种既定语义,用户能够把金属色与会员直接地关联起来。

用于强调的板块,通常会被放置在页面的中上部,除开那个位置固定不变的个人信息板块之外,越是需要着重强调的板块,其所处的位置就越是靠近上方。

开通会员的直接原因被利益所吸引,在个人中心页面,优惠金额直接展示,通过数字来激励用户爱游戏最新官网登录入口,这种方式最为直接有力。

布局形式
个人中心主要被划分成为了两大区块,一是头部,其中包含个人信息以及全局操作,二是主体身子部分,也就是功能集合。关于头部信息的布局方式,上文已然有所讲述说明。主体部分一般所承载的内容乃是个人中心页面的各类功能集合,其承载形式存在着列表、卡片、宫格以及泳道这几种。
本文重点讨论头身两板块的过渡如何处理。

头、身板块的过渡形式
鉴于所承载的内容存在差异,头部常常与主体的展示样式不一样。此两种各异的视觉样式之间,能够借助过渡予以衔接,也能够不进行过渡而径直铺张下去。

头部那儿的个人信息区域,没啥特别的设计,跟主体功能入口部分,不存在明确的差异现象,直接把信息铺展开来就行,页面呈现出很强的整体性。

在头部位置呈现色彩,主体部分的背景采用消色处理,于中间区域运用色彩渐隐这种方式来展开过渡,如此显得较为自然。

人头与身体呈直接隔断状态,存在着清晰明确的分界线,头部同主体之间的分割感颇为强烈,如此有利于进行定位。

处于这种情形下,头身同样存在一条清晰明确的分割线,将卡片放置于该分割线之上,以此作为衔接方式,在视觉方面显得更加和谐紧凑。并且,位于此分割线之上的卡片通常承载着最为重要的信息,像订单信息或者会员信息之类的。

采用此方案的产品相对看重用户个性化表达,就放置头像之处而言,是放置于关键的头身分割线上,并且头像的面积常常较大。

利用跟底部半弹窗相类的形式去盛放主体内容,让人产生主体内容“高于”头部背景这样的印象,进而更注重突出主体内容。

有着水平分割,和渐隐的,常见的这类头身分割样式存在,其余的像是斜线分割,或者弧度分割,这种分割方式,增添了页面的创意,还有独一无二的特性。
侧边栏(抽屉)
通常情况下爱游戏app官方网站登录入口,存在Tab Bar的产品,会把个人中心放置在最后一个或者倒数第二个tab里面。有些产品不存在Tab Bar,就像滴滴,这类工具型产品常常运用侧边栏的形式来放置个人中心相关信息。有些产品有Tab Bar,却依旧把个人信息收纳于左上角,比如网易云音乐和qq。其中qq采用了全屏的侧边栏形式。
