设置头像
一、头像设置流程
流程一般包括头像选择、上传、裁剪、预览四个步骤，UI界面至少给用户裁剪和预览。
1.选择图片源
来源包括本地图片、系统推荐头像、用户个人线上相册、即时拍摄。同一产品在不同端可以支持不同的上传渠道，比如PC端摄像头拍摄质量不佳，台式机不一定配备，一般可以不做支持。
2.上传条件限制
上传本地图片作为头像时，图片的格式、尺寸、文件大小规则应尽量放开限制，至少要支持JPG\GIF\PNG\JPEG\BMP等格式。随着手机拍摄照片尺寸和大小越来越大，5-6M是较合适的上限。关于服务器图片存储，应保留一张高清大图和不同尺寸的缩略图。
3.裁剪处理
图片裁剪包括系统自动裁剪和用户手动裁剪。如果不支持手动，最好把系统自动裁剪和剪取做了。系统剪取时注意尽量截取到图片的中央区域，不要直接挤压或拉伸图片，导致图片变形（京东）。手动裁剪时，一般要辅助缩放、旋转、镜像等功能。缩放时需要注意极限值，否则会导致背景空白（QQ空间），要做相应的填充处理。裁剪框最好加入辅助线（九宫格、方圆）和遮罩，方便实时预览方形和圆形头像效果。有时也会加入滤镜、贴纸等功能。
image.png
4.效果预览
“所见即所得”是打造优良用户体验的诀窍，提供实时反馈和预览是必不可少的。比如裁剪所得到的各种形状和尺寸的预览，滤镜效果实时渲染。设计要考虑到系统性能有关。头像的常见展示形状包括方形、圆形、异形。腾讯对于方（微信）和圆形（QQ）的产品形态建议：相比方形，人的头像更接近圆形。圆形QQ头像能更突出头像弱化背景，也能鼓励用户使用真实自拍作为QQ头像。QQ作为平台会接入游戏和第三方内容，在方形、异形图标环境中提高辨识度，降低用户的认知门槛。QQ希望传递乐在沟通，展现年轻个性的态度，圆形无缝衔接头像挂件也会带来更丰富的搭配和自我展示（QQ）;照片本来就是方的，方头像符合用户习惯（微信）。
百度小程序关于头像的规范参考：头像应保证清晰，头像的主体元素在方形或圆形参考线内，不遮挡关键信息，确保前端展现时能在圆形轮廓中展现完全。
image.png
二、设置头像的12种方式
1.默认头像
为了缩短注册流程，减少潜在用户流失，用户注册过程中一般不会强制用户设置头像。为防止用户不去设置头像以及页面中头像加载不出来，系统会提供默认头像以便在相关位置展示。可以采用灰色头像（用以提示用户去设置头像）或者企业吉祥物的彩头（统一页面的视觉元素）。设置了新头像，改不回默认头像。部分社区类产品支持游客登录进行点赞，评论的操作，这时候使用默认头像。当然，根据用户信息如性别，星座，身份角色（司机/乘；招聘者/求职者）匹配头像，或者制作头像库为用户随机分配头像。
2.系统推荐头像
让用户自己拍摄或找到一张自己满意的图片做头像，对有些用户而言是一件成本比较高的事情。如果用户群体足够大，图片质量难以保证，内容监管等问题。所以推荐一些优质头像供用户挑选，QQ早期的经典头像，甚至成了会员服务的一部分。
image.png
SoulAPP（基于心灵的职能社交APP，功能是寻找适合自己的灵魂伴侣）也支持系统推荐，而且只能使用系统头像。用户可以根据自己所设置的性别、头像风格选择心仪的头像。Soul不允许用户上传其他照片作为头像，也是希望用户能抛开颜值，找到真正的灵魂伴侣。这些头像本身也体现了用户个体的审美情趣，价值观等。Soul后来上线了“超萌捏脸功能”，捏出的头像依然可以算是系统的推荐头像，只是把头像拆解成了头发、脸、眉毛、眼睛、鼻子、嘴、衣服等元素，再由用户自己排列组合。
image.png
3.随机选择头像
用户主动选择随机头像，比如bilibili采用了这种做法。
image.png
4.使用历史头像
在用户使用过一段产品之后，产生的大量历史头像（用户自行上传的）。微博，QQ把这些头像收集起来展示给用户，以便用户查看或重新选择，虽然用户重新使用的几率不大，但也会给用户带来某些触动，增进用户情感，提高用户粘性的做法。
image.png
微信的做法是只能查看上一张头像，进而保存到本地，再重新从手机相册选择，因为微信的设计哲学是不去刻意讨好用户，这里更多的是防止用户反悔，方便用户在最近使用的两张头像之间切换对比。马蜂窝做法与QQ类似，增加了删除历史头像功能（当前头像不可删除）。聊天宝让用户可以查看好友的历史头像，但不能查看自己的历史头像，因为在不备注的情况下，推测用户可能对图形的记忆更持久准确。
image.png
5.文本头像
商务类应用中比较常见，例如OA。因为办公场景中社交属性不强，更多在于即时通讯，而文本头像中用大号的名字更容易辨识。设计需要注意文本颜色和背景颜色的对比度，另外同一个应用中，文本和背景可以多做几个配色方案随机展示，以丰富视觉效果。注意文本的取值显示规则：汉字类（单个或两个汉字展示全部汉字，三个及以上仅展示后两个汉字）英文类（一个单词时取前两个字母，两个及以上单词取前两个单词的首字母）数字类（单个或两个数字展示全部，三个及以上数字仅展示后两个数字）
image.png
6.角色头像/匿名头像
非常规，游戏中常见
image.png
7.动态视频头像
可以让用户跨越时间维度展示自己。QQ中动态头像分为两种，一种是会员才可以使用，由系统推荐，用户自主选择；另一种是让用户自己拍摄录制，流程先录制视频，选择一帧作为静态头像，以便在不支持展示动态头像的地方展示。
image.png
8.轮播头像
针对陌生人社交场景，如探探，左滑右滑，感兴趣就点进去主页。头像占据了产品属性物象的大头。很多用户的关注点也全部集中在头像上，需要在首屏展示更多更大更清晰的照片。轮播图的显示形式最多可以设置6张图片或6段视频作为展示头像。优点类似QQ照片墙感念，不过自我展示意味更浓。
image.png
类似的还有音遇APP，个人主页背景图即头像轮播，还有一些社交软件将个人系列头像设置为私密，然后定向开放展示给需要的人。
image.png
9.捏脸头像
image.png
类似的有IMVU
image.png
3D虚拟形象社交之路还需时间验证
10.头像挂件
挂件，等级徽章，认证标志也属于头像的一部分，这些需要结合付费会员、用户成长体系、认证规则进行讨论才有意义。
11.使用第三方头像
第三方社交账号快速登录已经成为登录注册页面的标配，一个授权解决了账号注册、头像及昵称设置等问题。“头腾大战”涉及到的微信/QQ账户上的头像、昵称的权益归属是个问题，如果系统推荐头像，那图片版权归属于哪一方？所以用户使用第三方登录后，最好是引导用户尽快绑定手机并完善其他资料。
image.png
12.群组头像
QQ:分为讨论组和群，创建方式区分（选人创建-讨论组）（按分类创建-群）。讨论组不能设置头像，是在圆形内嵌套群成员的圆形头像，最多可显示前5个成员的头像。群头像由管理员设置，可以查看历史头像，使用系统推荐头像。
Tim：圆形外边框+方形头像
微信：方框内嵌套方形头像，根据（1-9）排布，多于9人显示前9人头像，暂不支持设置图片为群头像。
钉钉：圆形外框嵌套方形头像，显示数量最多前4个，可以选择其他图片作为群组头像。
image.png
拓展：微信重新定义了群的设计形态，更贴近用户自然使用方式：无需群ID，无需可以创建群，拉人即可开聊，无需命名，默认不保存到通讯录，搜索群时可通过直接搜人实现。
网友评论