但凡有用户系统的产品都应具有个人中心页面，看似结构简略的个人中心实则包含了很多简单被忽视的规划细节。本文意在收拾、概括和总结个人中心页面的规划规则，以供给规划参阅。
纲要：
个人中心与个人主页的差异个人中心的信息架构头图款式个人信息模块大局性操作模块怎么杰出信息布局方法头、身板块的过渡方法侧边栏（抽屉）未登录状况个人中心与个人主页的差异
个人中心：与用户相关的各种数据、功用进口和大局性操作的汇总。仅用户自己可见。规划方针：进步功率。
个人主页：用于展现用户信息以塑造形象，由用户的基本信息、身份等级、自主上传的内容组成。用户能够设置可见规模。规划方针：展现特性。
有用户系统的产品就有个人中心，而个人主页常见于带有交际特点的产品，因而两者是包含联系。
交际类型产品一起具有个人中心页面和个人主页页面。
个人中心的信息架构
个人中心的信息杂乱度与产品自身有关。系统越巨大的产品，对应个人中心页面需求承载的内容越多，结构必然杂乱。一般渠道型电商的个人中心页面有必要包含：用户根底信息、大局性操作（设置）、要害数据记载（保藏、注重）、购买鼓舞（会员、红包）、中心事务（订单信息）、东西调集（东西箱）……
面临如此多且杂的信息，整理并分类至关重要，收拾出合理的信息优先级是组织页面布局的条件和要害。大多数产品的个人中心能够总结为几大信息模块：个人信息、大局操作、要点推行、中心功用、悉数功用
特别杂乱或许精约的产品能够在此根底上添加或许删减模块。
头图款式
个人信息一般放置在页面顶部，顶部规划方法多样，结合产品的事务特点和风格调性，挑选适宜的款式。一般带有交际特点的产品的个人主页，鼓舞用户充沛展现特性，答运用户自主上传布景图片。而关于其他产品来说，安稳和次序感比特性愈加重要。
头图首要分为两类：固定款式、自定义款式。
上面顺次展现了从精约到精巧的头图规划，不同的规划习气不同的产品特点。一味添加杂乱度并不一定适宜自己的产品，要害仍是需求了解方针用户的视觉喜爱，以及产品想传递的品牌认知。
个人信息模块
个人信息模块一般包含：头像、昵称、身份特点这类内容。从布局上来看，一般有以下几种排版方法：
头像居左、头像居中、头像居右
从信息布局上来说，三种排版方法没有好坏，依据调查，线上产品超多半运用头像居左的布局方法。一般人的阅览习气出现“F”形，左上角内容是最早触达人眼的信息，合适放置要害信息便于定位。头像居中的布局方法适用于个人主页，愈加强谐和杰出头像自身，关于交际产品来说，也是一种添加差异化的挑选。
大局性操作模块
大局性操作一般指的是如设置、信息、扫一扫等产品层面的内容，不只限于当时页面。
大局性操作有 3 种常见的布局方法：
放置在导航栏放置在个人信息模块内放置在下方列表中
这种布局方法拓展性最强，导航栏能够盛放多个控件而不会出现布局短促的问题，一起契合用户运用习气，设置放在右上角或许左上角，也是最常见计划。
这种布局方法拓展性较弱，右侧事例可见，当昵称较长，控件较多时，简单在视觉上感觉拥堵。从信息亲密性上来说，大局性操作和个人信息也不应该归于同一模块中。
这种布局方法弱化了“设置”，一般以为假如“设置”的优先级较低，无需独自将其展现在头部，直接以列表的方法放置在底部即可。
怎么杰出信息
每个页面都有要点信息和非必须信息，整理好信息的优先级，用不同的视觉方法出现给用户，协助用户第一时间获取要害信息，进步功率。从产品的视点讲，不一起期的产品有不同的主推内容，现阶段为了添加用户粘性提高商场占比，会员系统的树立适当要害，有会员系统的产品都不谋而合地鼓舞用户开会员，争夺尽可能多的权益展现时机。个人中心便是一个很好的推行会员的触点。除了推行会员以外，卡券、红包福利，也是推行要点。
能够从以下几个维度进行视觉强化杰出：
色块杰出方位杰出利益点杰出（按钮案牍、角标）款式杰出
非会员类型的板块，常常运用主色进行杰出。板块与布景颜色对比度越大，越杰出。用色逻辑与按钮用色共同。若不想过火着重，能够运用淡色布景，参阅花椒事例。
用户现已对会员概念有一种大约的既定认知，“特权”、“尊享”等要害词是规划会员板块的指向，与之匹配且运用广泛的配色首要会集在：黑、金、银三大类，和一些延伸色如玫瑰金、鎏金等。这类用色尽管不能表现品牌感，但现已成为移动 UI 下的一种既定语义，用户能将金属色与会员直接地联系起来。
着重板块一般放置在页面中上部，除了方位固定的个人信息板块外，越需求着重的板块，方位越靠上。
利益是招引用户注册会员的直接原因，在个人中心页面直接展现优惠金额，以数字的方法鼓舞用户最为直接有力。
布局方法
个人中心首要分为两大区块，头（个人信息+大局操作）+身（功用调集）。头部信息的布局方法上文现已有所论述，主体部分一般承载的内容是个人中心页面的各种功用调集，承载方法有：列表、卡片、宫格、泳道。
本文要点评论头身两板块的过渡怎么处理。
头、身板块的过渡方法
因为承载的内容不同，头部往往和主体的展现款式也不同。两种不同的视觉款式之间能够用过渡来联接，也能够不过渡直接铺陈下去。
头部的个人信息区域没有特别规划，和主体功用进口部分没有清晰差异，直接将信息铺陈下去即可，页面整体性强。
头部颜色，主体布景消色，中心用颜色渐隐的方法进行过渡，较为天然。
头身直接间隔，有清晰的分界线。头部和主体切割感较为激烈，便于定位。
这种状况头身相同有一条清晰的切割线，用卡片置于其上，作为联接，视觉上愈加调和紧凑。且坐落切割线之上的卡片往往承载的是最重要信息，如订单信息或会员信息。
运用此计划的产品比较注重用户特性化表达，从放置头像的方位来看，放置在要害的头身切割线上，头像的面积也往往较大。
用相似底部半弹窗的方法盛放主体内容，给人主体内容“高于”头部布景的形象，愈加杰出主体内容。
常见的头身切割款式有：水平切割、渐隐，其他的切割方法如斜线切割或许弧度切割，添加了页面的构思和独特性。
侧边栏（抽屉）
一般有 Tab Bar 的产品会把个人中心放在最终一个或许倒数第二个 tab 里，有些产品没有 Tab Bar，如滴滴，该类东西型产品常运用侧边栏的方法盛放个人中心相关信息。有些产品有 Tab Bar，仍然将个人信息收纳在左上角，如网易云音乐和 qq。其间 qq 采用了全屏的侧边栏方法。
未登录状况
当用户是未登录状况时，有些产品不向用户敞开阅览个人中心页面的权限，要求用户有必要先完结登录注册。更多产品答运用户进入个人中心页面，当用户触发某个操作时，提示用户进行登录。未登录状况下的个人中心，没有用户信息。默许头像和昵称的占位案牍的处理方法值得讨论。
运用 ip 作为默许头像，兼具品牌感和规划感。方便登录直接在个人中心页面显露登录方法，削减交互步长。
结语
个人中心页面有许多规划细节点能够发掘，挑选最合适自己产品的规划方法至关重要。本文仅是个人经验总结，如有遗漏或许说得不对的当地，欢迎沟通纠正。
感谢阅览。
原文链接：https://www.uisdc.com/how-to-design-personal-header
上一年今天运营文章2022:新品上线日销10万，它仅用3天从小众单品逆袭为“爆款黑马”(0)2022:社群营销运营分类包含哪些内容(0)2022:小红书用户画像剖析 | 年轻人成为“摄生C位”的主力人群(0)2022:解读小红书2022年母婴职业陈述：心智种草的流量暗码(0)2022:采访手记：小红书怎么打造高爆文率49%的流量暗码？(0)
微信扫一扫 
支付宝扫一扫 
