米乐 M6米乐个人主页头部应该如何设计？
不少 APP 应用都带有个人社交主页，而在这一页面里，个人主页头部的设计其实也有一定细节和 套路 需注意。在本篇文章里，作者就尝试总结了这一区域的通用设计方法，与可注意的设计细节，一起来看看作者的总结与分析。
个人主页头部与其说是一个组件，不如说是「在个人页中一块聚合信息的区域」，因为绝大多数带个人社交主页的 App，都采用了类似的做法，或有相似的框架，所以我们可以在这里讨论这一区域的通用设计方法。
在解释「个人主页」的使用场景之前，我们首先需要区分两个页面类型：「我的」和「个人主页」，这两者通常都有一个聚合用户信息的头部。
但在日常使用的 App 中，你们可能也会注意到，有很多 App「我的」页就是用户本人的「个人主页」，只是某些细微的信息展示有所不同 ( 例如关注按钮 ) 。确实存在这种情况，这是不同产品根据自身的功能特性对页面的不同理解。
这是一个功能并不复杂的播客 App，但它的核心是播客而非社交，所以「我的」页面和「个人主页」用来展示不同的两类信息，尽管有部分账户核心信息是重叠的。
这是一个绝对社交核心 App，这是毋庸置疑的，但是微博的「我的」需要用来承载更多额外的，与社交无关的功能入口，所以这两者的设计依然不同。
个人主页的头部想到来说是比较复杂的，因为它的设计实际上非常的自由，并没有一些可总结的全局化范式，我在这里也知道挑出其中一些细节来讲讲，局部该如何进行布局和设计。
头像是一个视觉重量相当大的元素，所以它的位置不仅也影响着周围很多其他元素的排版，也会给用户不同的感受。从排版上来说，头像基本上有三个固定的位置：居左、居中和居右。
居左是一种比较常规的排版方式，但不常规的地方在于，昵称和其余信息可以置于头像的不同方位：右方或者下方。
也算是一种相对来说比较常见的布局，但是头像居中会导致昵称除了下方没有别的地方可放，所以会比较占用纵向空间。
较为少见，所以看起来会比较新鲜，但是头像的权重会相比昵称下降 ( 因为阅读习惯 ) 。
个人主页头部会集成一些社交的核心数据，例如：关注数、被关注数、发帖数、总收藏数、总点赞数等等 UGC 的核心指标，当然在展示的过程中必须要挑选出 2-4 项最核心的，最需要被直接展示的数据类型，不宜过多。
这些数据在头部的展示中包括 View 的布局和字段在 View 内的布局两方面内容，这需要分开来说。
分为通栏和非通栏两种。通栏即：数据占据一整行，View 可以均分一行所有的横向空间。通栏需要数据量不低于 3 个，因为如果数据少，会让这一整行看起来不够丰满。
也有两种：居中和居左 ( 居右几乎没见过 ) 。具体如何选择应该视视觉效果而定，如果 View 整体偏左，那字段也可以居左来让左侧保持对齐。
个人主页的背景是一块很方便用户展示个性的区域，不少 App 也不会放过这么好的机会；不过这也会额外支出服务器带宽和存储资源，所以如何做选择，是 App 根据自己的情况而定的。
纯色的背景或做一些细微的灰色渐变的背景，能够起到突出主体 (米乐 M6米乐 用户信息 ) 的作用。
将用户的头像做一定的模糊处理，当作背景使用。在某种程度上算是曲线完成了用户个性化的目标，但又不是完全个性化，比较容易控制统一风格。
完全由用户自主控制的背景图片，但是为了控制背景的亮度从而在任何情况下都不会影响前景，通常还会加一层透明的黑色遮罩。
最后再讨论一下按钮的位置，这里我说的按钮，指的是需要做大的互动按钮，例如「关注」、「私信」，而一些全局功能的按钮 ( 如「返回」、「更多」 ) ，就不再讨论了。
单个大按钮一般只有「关注」，或在用户本人的主页中盖按钮可以替换成「编辑资料」，这两个按钮是不会同时存在的，所以可以原位替换。另外只有一个图标的小按钮因为占位并不大，所以可以跟在大按钮旁边，但通常也不会超过 1 个。
这个按钮的位置非常灵活多变，通常还需要结合头像、昵称、数据位置进行设计，没办法单独提取出来聊。
① 在居左的数据信息右侧。这是一个绝佳的位置，因为居左的数据信息本身会在右侧留出一个空位，所以在这里放置按钮是合理且美观的选择。
按钮一旦多起来，就没法随心所欲地放在其他元素因对齐空缺出来位置了，所以在多个按钮的秦岭下，几乎只存在一种情况：单独占据一行。
马蜂窝，又是它！马蜂窝的个人主页设计可谓独树一帜，除了这个默认的地球背景图之外，数据展示也比较特别，并非常见的布局。
来自字节的后起之秀音乐 App，个人主页的背景采用该用户偏爱的音乐专辑或标签墙，下拉还可以有更进一步的交互，这种背景算是比较少见的。
扫一扫关注微信公众帐号
