干货！UI界面中的用户头像，这么设计就对了！

据说点击蓝色字体关注同学都升职加薪了

静电说：用户头像是UI界面中的重要一环。今天这篇来自Roman的文章非常精彩，她总结了在UI界面中的用户头像的几乎所有形式和设计技巧。非常值得一看！

Avatar，译为用户头像，或者Userpic最常见的用户界面是，用户可以通过它来辨别自己的身份，识别自己的id。

001.用户头像包含哪些内容？

一般的用户头像有几种形式，空白状态，姓名缩写，用户的照片或者图像。

002.颜色和尺寸

根据情况，您可以使用多种颜色和尺寸选项：

1. 为了更好的识别，背景颜色可以多样化；

2. Headers、Appbars 等是24-40dp 宽度的Avatars的主要目标；

3. 40-48dp头像通常用于内容块或列表；

4.如果你想在模板中使用头像，比如配置文件、设置等，那么你应该使用56+dp。

003.事件和通知

当我们想通过用户头像来通知用户有额外的操作的时候，我们可以为头像加上额外的小挂件。

1. 显示用户是在线还是离线

2. 通过带有编号标签来告知用户有消息

3. 可以显示额外的图标供用户执行操作

004.用户状态

显示用户状态的最常见做法，是在用户头像的右下角放置一个彩色指示器。

绿色表示在线状态最常见的用户界面是，灰色表示离线

填充形状用于在线状态，空的形状用于离线（替代选择）

005.通知标签

根据视觉优先级，确定要用何种标签来吸引用户的注意力。

对于高优先级的指示，可以使用纯色和明亮的颜色

对于其他情况，请使用平滑或浅色背景

006. 调用操作

当头像被点击，然后需要触发其它操作的时候。常见的做法是使用像圆形的按钮或嵌套功能的圆形图标，它表示点击后，动作将会发生。

007.包含文字的头像

a.侧面文字

当需要添加附加信息时，辅助标题可以与Avatar一起使用。此功能在应用栏、列表、表格等中非常常用。

1. 较大的标题用于表示头像的用户名称

2. 第二行的附加详细信息可选（例如：状态、职业、上次访问、关注者数量等）

b.上图下文

下面这种方式，可以使用较大的头像，并将文本放置在底部。这是UI界面中常见的方式，例如社交主页、个人资料、设置等。

008.其它头像模式

a.事件

为了展示用户所触犯的事件，可以在Avatar周围添加边框。您还可以添加带有徽章的计数器。

b.进度展示

你可以使用弧形来表达用户完成的进度，同时将进度数据展示在头像最上方。

c.选择

对于选中状态，用户最认可的方式就是图标+描边。

下面是选中状态的另一种形式：

009.头像组

a.带按钮的头像组

在对头像进行分组时，例如，“加号”按钮会将我们带到一系列与交互相关的选项（添加、编辑、排序等），这些选项可以对分组的头像执行。

b.使用数字

在一组头像末尾使用数字，是指示队列中剩余用户数量的绝佳解决方案。

c.悬停下拉

徽章悬停下拉菜单，最常见的模式之一，它可以扩展用户的附加信息。

d.悬停浮动显示状态

当存在一组堆叠的头像时，显示用户全面可以使用这种方式进行。

▼

往期精彩回顾

▼

新一期UI全链路就业特训课程开始报名啦

2021年10月底开课 欢迎咨询报名

早报名享受更多优惠

↓↓长按二维码加静电老师咨询↓↓