头像篇 | 帮你快速掌握头像基础设计知识！

人人都是产品经理 • 2年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

编辑导语：随着互联网的发展，各种社交软件也在不断地更新迭代，头像可以说是社交软件中尤其重要的一个设计。本文作者分享了有关产品头像的基础设计知识，讲述了头像元素的方方面面，感兴趣的一起来看看吧。

最真实的例子，当我们在某社交软件将头像设置成帅哥/美女，搭讪与被搭讪的概率会成倍提升，这也是为什么行骗的人总是会先设置一个美女头像（背后抠脚大汉）总能提高成功率的原因，头像的魔力可见一斑。

不论是真实社交、虚拟网络，甚至跟社交毫不沾边，任何应用只要有用户的概念，就会有头像的存在，只不过产品头像权重、用户重视程度不同而已。在这个“看脸的时代”，跟陌生人搭讪的成本很高，第一步就用看头像来确定是否建立社交关系是最直接快速的方式。

在UI设计中，95%以上的应用会涉及到头像元素，例如消息列表、个人中心/主页、会员服务、评价、排行榜等功能版块，明明用昵称或几个文字就能说清楚的地方，偏偏设计了一个头像、而且还占据该信息组的主视觉。

那么，看起来简简单单、或方或圆的小头像到底还有哪些我们不知道的细节知识，今天笔者就通过这篇文章跟大家聊聊头像元素的方方面面，希望对大家有所帮助，欢迎共同探讨，相互交流。

头像篇 | 帮你快速掌握头像基础设计知识！

一、头像在UI界面中的作用

1. 多账号区分

出于特殊原因，很多销售、客服等职业，在同一个应用中可能会存在多个账号，需要确认自己当前登录的是哪个账号时，查看头像就是最好的区分（需设置不同的头像）方式，当然也有一些非正常需要的用户有另外的小号，相信头像也会有所区别，其作用这里不便多说，避免「社死」。

另外，如QQ登录、微信账号切换页面，也会利用突出的头像来快速区分账号信息。

头像篇 | 帮你快速掌握头像基础设计知识！

2. 凸显自身形象

某个用户使用了一张成熟稳重、端庄得体的形象照作为个人头像时，在大多数情况下，这个人一定不是个动不动就爆粗口的键盘侠或网络喷子，虽然“隔着屏幕你又打不到我”，但在发表内容时会注意自己的措辞，潜意识的维护自己的网络形象（头像），这就是现实与网络中头像的人格映射。

当碰到匿名社交时，为自己戴上面具后就会变得肆无忌惮，与前者相比，至少不再那么约束。

3.“面对面”沟通代表

很多时候，不管是跟好友聊天、还是在不同的应用中留言评论，有头像的用户总感觉是在进行平等交流，这么说感觉很抽象，下面举个例子：

如果是一个单身男性，当社交应用中有人加好友或请教问题时，针对有美女头像的用户，其响应效率、质量都会比其他头像的用户要高，这是不争的事实（别杠，我们不谈个例），这也说明自己时刻都在注意在对方心中的形象，总担心被对方看“穿”。

二、各场景中的头像类型

1. 默认头像

非强制登录的应用，切换到个人中心时，一般会有一个默认头像占位，可以是人物形象剪影或品牌吉祥物，以确保用户在登录之前保持页面的完整性。另外，即便用户登录后有上传自己的头像，但遇到网络延迟、头像加载失败、匿名操作等情况，系统默认头像都可起到临时替补的作用。常见的默认头像有灰色、彩色两种色彩模式，其二者各有利弊。

1）灰色头像

灰色头像色彩感较弱，可能会导致视觉不平衡，打破画面的美感，但也正好通过这一丝的不和谐，用一种明显且突兀的方式提醒用户去更换头像，强迫症患者几乎无法抵抗。

2）彩色头像

绝大多数是结合品牌色、吉祥物等进行展示，还能起到丰富画面、增加趣味性的作用，相比灰色头像则更加生动，不管用户是否登录、有无更换头像，都能保持界面的视觉平衡，唯一的缺点可能降低用户更换头像的欲望。

2. 系统推荐头像

1）用户选择

大家早期接触的QQ就是最典型的案例，系统提供了多种头像以供用户选择，甚至将部分头像纳入了QQ会员功能，当用户没有合适的图片作为头像且难以抉择时，使用系统推荐的头像不仅能降低用户的选择成本，还能满足部分个性化需求。如果默认头像跟产品相关联，也可作为品牌传播途径，两全其美的选择。

另外，最近很火的匿名社交应用Soul 只能使用系统头像（可自定义调整），不允许上传图片，这源于平台希望用户抛开颜值，通过不同的个体审美、价值观等进行心灵交流，找到真正的灵魂伴侣。

同时，因为庞大的用户量，图片是否合法、质量的好坏带来了一系列的监管问题，使用系统推荐头像，在很大程度上能降低图片管理成本（PS：强制使用系统头像跟产品定位有着绝对的关系，并非拍脑门决定）。

2）系统选择

注册成功后，系统会随机匹配个人头像，相比用户自己在列表手动选择，则多了一份神秘感与期待感，让头像的设置变的更有趣，例如小红书、B站等应用。

3. 文字头像

常出现在移动办公类应用中，由系统自动处理，基于OA类应用社交属性并不强，大多用于内部团队工作中的沟通交流，例如钉钉、纷享销客、飞书等。为了更清晰的获取对方个人信息，这类产品头像更倾向于上传自己的真实照片（部分企业强制），在用户未上传照片的情况下，系统会提取中文名字中的后两个字（两个字的全名显示）、英文名字前两个字母作为个人头像使用，方便团队成员更好的辨认。

4. 群组头像

只出现在群聊中，由多个群成员的头像组合而成，不同的应用对头像上限的设定不同，最为常见的是4个、9个两种。群组头像大多数不支持自定义上传，会根据当前群成员的数量（1-4人、1-9人）进行宫格排列，且不会超出设定的上限，例如钉钉群、微信群、QQ群等。

5. 用户头像组

在部分应用场景中，产品将多个用户头像堆叠组合在一起，通过“羊群效应”引导后续用户产生从众心理，以提高转化率，例如有多少用户已购买、多少用户已中奖等。另外，视频平台的直播间也会将排名靠前的用户头像组合排列并展示出来，吸引其他用户关注。

6. 历史头像

1）同平台

QQ会将用户之前使用过的头像搜集起来并单独提供一个入口，用户需要换头像时，可再次选择使用，虽然重新使用的几率并不高，但也不失为一种情怀，用户能清楚知道头像更换的历史轨迹，满满的回忆感。

设置微信头像时，也可选择使用上一张头像，方便用户设置新头像后反悔，可以理解为撤销本次更换操作，如果需要对图片进行裁切，也方便用户跟上一张头像反复对比。

2）跨平台

第三方登录的标配，用户无需重新编辑，就可以无差别继承第三方账号的头像、昵称等信息，节省了大量的时间及操作成本，例如微信、QQ、支付宝、微博授权登录等。

7. 其他头像

除了上述头像类型外，还有如视频头像、GIF头像、轮播头像等，这些并不常用，了解一下就好。

另外就是之前刮起的一阵虚拟形象社交风潮而爆火的捏脸头像，极具针对性的新型头像类型，如果感兴趣，可以去下载Soul、崽崽APP体验，这里不多做赘述。

三、头像状态与附加操作

1. 不同的用户状态

用彩色头像和黑白头像来区分用户是否在线是最直观的表现方式，例如打开QQ好友列表，对方当前是否在线一目了然。除此之外，QQ的在线状态还延展了多种子级状态，例如：离开、忙碌、听歌中、请勿打扰…等，设置成功后，会以小图标的样式重叠在头像右下角，好友看到后能清晰感知当前状态下是否可以立即联系你。抖音采用了较为简单的方式，头像右下角有绿色小圆点显示表示在线，没有则代表离线。

2. 事件通知

常用于非社交类应用（社交应用有更专业的处理方式）的未读消息/事件通知，显示在头像右上角，点击查看后会消失。可设计不同的样式以体现视觉的强弱关系，对用户产生不同程度的引导。

弱提示： 小圆点提示，填充红色或主体色，提示程度较弱；
中等提示： 白色圆形+数字提示，数字色彩可以是红色或主体色；
强提示： 圆形白色描边及红色填充+数字反白，较突兀的提示方式。

3. 挂件/装饰

很多挂件只是纯粹的装饰品，能起到美化、娱乐、趣味性的作用；增值服务、特权服务、认证类的标识更是一种身份的象征，体现出荣誉、尊贵的感觉；有小部分应用将用户的勋章标识重叠在头像某个位置，时刻给用户带来一种坚持完成任务之后的成就感，满足其虚荣心的表现。

4. 交互操作

在很多应用中，个人中心页面的头像区域隐藏了设置功能，点击后会进入到个人主页、个人信息页或更换头像页面。还有一些无实际功能作用、纯趣味化的交互，例如双击微信好友的头像“拍一拍”、拖动即刻个人中心头像会出现一个红心等，不同程度的给用户制造意外惊喜。

还有部分应用，在头像右下角通过有明确指向含义的图标引导用户操作。

例如在完成表单过程中需要添加头像，上传成功后，头像右下角会出现删除图标；Soul个人中心头像右下角增加了个性商城入口；QQ、即刻则通过相机图标提示用户点击可直接更换头像，这种引导性的图标都相对较小，需要精准点击，为避免无效操作，在不影响其他交互的情况下，请尽量扩大图标热区范围。

四、方形与圆形的定义

虽然我们用过、研究过大量的互联网产品，但也许真的没怎么关注过头像的形状，以当前几个主流的产品为例，QQ、抖音是圆形头像，而微信、钉钉则是方形（圆角）头像，如果真的要分出个胜负，那么很明显，大部分产品使用的都是圆形。方形和圆形到底有什么区别？设计时该如何选择？下面我们就一起来唠一唠。

方形头像对照片的空间利用率更高、降低空间损失，圆形通过裁剪让空间更平衡、看起来更精致；
方形对四角、中心点均可构成聚焦区域，使用灵活，圆形则边界完美，没有聚焦冲突，可突出核心；
古埃及曾认为圆形是神赐予人们的神圣图形，因图形边界完美，能给人公正、信任感，但矩形却能给人一种专业、稳定的感觉；
圆形被认为是活泼，方形则显得比较严肃；
QQ团队曾给出答案，因产品定位就要是给人一种年轻化、活跃的感觉，且人的脸也接近圆形，裁切后更能凸显人的脸部特征（看脸时代），明显使用圆形更适合。微信设计师的说法是图片本来就是方形（扯远了），方形头像能最大程度的降低图片损失，而且微信的定位相对成熟，方形还能给用户一种稳定可靠的感觉，更符合用户习惯，如果一定要用圆形，将头像处理成圆形即可，方/圆兼具；

说了这么多，依然不知道如何选择，那么笔者将根据一些常用到头像的三个模块给你一些建议：

个人中心/主页：如无特别需要，大部分情况下使用圆形，不会出错；
消息列表/即时会话：根据产品定位、上述的参考比较后决定，没有明确的要求，使用其中一种形状后，在其他同等级页面统一即可；
评论/交流区：直接圆形，没有为什么。头像本来就小，裁切掉无关信息会更聚焦。

五、头像设置步骤

1. 头像来源

用移动端设备上传头像时，来源主要为系统推荐、历史头像、从相册选择、拍照这几种方式，电脑端因设备限制等原因，一般只有系统推荐和上传本地图片。

2. 上传限制

上传图片时，一般会对图片的格式（JPG/PNG/GIF等）、尺寸（宽*高）、文件大小（多少KB/M）作出限制，这些需要给予明确的提示，避免用户因操作多次失败而受挫离开，同时也能避免因用户不知道平台可使用GIF、视频等头像格式，而雪藏了产品的多元化服务。

3. 图片裁剪

因图片来源、拍摄手法不一，针对横图、竖图，系统会贴着边缘（避免压缩/拉伸）先进行一次自动裁剪进行取方，然后用户可自行调整大小，选取最佳位置。

4. 效果预览

需要给用户提供真实的效果预览图，避免用户因操作失误或对处理后的头像不满意再次重复整个更换流程。所见即所得，通过降低用户重复操作的概率也是提升用户满意度的方式之一。

六、引导用户上传头像

1. 文案引导

当产品要求用户组做某件事情时，即便是为用户考虑，也需要给予一个合理的理由，可使用趣味、情感化或鼓励性质的文案引导用户主动上传头像，例如社交类应用“一切都很完美、就差一个帅气的头像了”、“换个好头像会让更多人认识你”等。或者用户在编辑个人信息时给予鼓励“恭喜你，只差最后一步了，换个头像就十分完美了”。