在我们日常使用的APP中，头像这一设计元素基本上是必备的，我想换一个头像，不过这一元素虽然常见，但若想设计得好，还是需要注意许多细节。本篇文章里，作者便对头像设计的细节做了总结，一起来看看吧，也许会加深你对头像设计的理解。
这篇文章准备了很多实例，或许可以给你一些启发。
今天这部分讲的就是关于用户头像的UI组件探索。用户头像是一个组件元素，用户通过它来标识自己。
一、用户头像有哪些类型？
基本上有以下三种类型可以用来代表用户头像：
可进入微信--我--点击上方账号--头像--选择拍照或是挑选相册中的一张图片即可作为微信头像。1、在我们的手机里面打开应用，登录账号进去；2、进去之后点击底部“我的”，进去之后，点击个人账号信息；3、进去个人信息界面之后。
二、颜色和尺寸
根据具体使用场景的不同，你可以使用多样化的颜色和尺寸:
为了更好的识别，不同用户配色可以多样化一些；
页眉、导航栏中一般用24-40dp宽度为主；
40-48dp的头像大小通常用在内容块或列表中；
在个人信息设置界面点击“头像”，然后出来两个选择一个是从相册选择图片，另一个是拍照。一般使用“从相册选择图片”选项选择一张事先准备好的头像图片，点击“确定”就完成了头像更换设置。首先要登录到微信账号，然后点击手。
如果你想在更大的页面中使用头像，比如个人中心、设置中心等时，推荐使用56+dp。
三、事件和通知
当我们想通过用户头像通知某事或演示某种操作时，可以使用额外的UI元素；
指示灯标识用户是在线还是不在线；
通过带有编号的标签通知提供信息；
可以在用户头像上增加额外的图标提供用户行为操作。
四、用户的不同状态
显示用户状态的最常见做法是在头像的右下角放置一个多色控件。
绿色的代表在线，灰色代表不在线；
填充图形代表用户在线状态，而空心形态用户不在线的状态（并且是可以操作的）。
五、通知标签
根据不同优先级以及为了吸引用户的注意力，可以修改头像的标签样式。
可进入微信--我--点击上方账号--头像--选择拍照或是挑选相册中的一张图片即可作为微信头像。1、在我们的手机里面打开应用，登录账号进去；2、进去之后点击底部“我的”，进去之后，点击个人账号信息；3、进去个人信息界面之后。
对于高优先级的提示，可以使用高亮的底色+反白的文字；
对于其他情况，使用浅色背景，形式上做一些弱化。
六、操作按钮
可进入微信--我--点击上方账号--头像--选择拍照或是挑选相册中的一张图片即可作为微信头像。1、在我们的手机里面打开应用，登录账号进去；2、进去之后点击底部“我的”，进去之后，点击个人账号信息；3、进去个人信息界面之后。
当头像带有操作功能时，通常使用圆形按钮或嵌套图标等组件来显示即将进行的操作。
将图标更改为符合用户期望的结果；
颜色的使用要合理，需要强调事件或动作的含义。
七、包含文字的头像
1. 单边文本
当需要添加额外信息时，次要标题可以和头像一起使用。此功能在应用栏、列表、表格中非常常用。
较大的标题用于表示用户的名称；
额外信息的文字是可选的（例如：状态、职业、上次访问、关注者数量等）。
2. 底部文本
对于整页，可以使用更大的头像，并将文本放在底部。这是应用内的常见模式，例如社交、个人资料、设置等。
八、头像的用户体验模式
1. 事件
2. 进度
使用一个描边线作为用户成就的进度，仍然非常流行和方便。
3. 选择
对于所选状态，用户最可靠的确认方法之一是确认图标和描边的组合。
以下是所选状态的典型变体的外观：
九、用户头像群组
1. 带一个按钮
当头像被分组时，额外的行动按钮可以是一个可靠的选择，让用户从那里知道某个操作。
2. 标记
数字标记是展示队列中剩余用户数量的一个很好的解决方案。
3. 带有悬浮状态的标记
一个标记最常见的模式之一，当它被悬停时可以显示用户的附加信息，作为信息交互的扩展。
4. 具有悬停状态的头像
当堆叠组中的头像悬停时，显示用户全名的最佳方式是使用悬停组件。
5. 页面模板
译者：彩云Sky，公众号：彩云译设计；人人都是产品经理专栏作家，腾讯高级视觉设计师。
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
