头像设置:无头像,不社交
本文介绍了头像设置流程,列举分析了头像设置的相关设计思路和案例。阅读此文,相信大家对于社交产品的头像设计会有一定的启发。
在这个看脸的时代,无论真实社交,还是网络社交(特别是陌生人社交),甚至虚拟形象社交,“颜值即正义”。长得好看是一大优势,或者至少要满足彼此的审美才有进一步发展的可能。当然要想真正地完成社交目的,还是要看个人的社交能力。
在进行网络社交时(兴趣社交除外),可谓“无头像,不社交”,毕竟跟陌生人搭讪的筛选成本太高,看头像照片是最直接快速的方式。据说,有好事者在三里屯注册了某一款陌生人社交软件,并将头像设置成了一个在卢浮宫的露背少女照片,在短短时间内,居然收到了10000多次点赞。头像的魔力可见一斑。
为什么换不了头像
一、头像设置流程
头像设置流程一般包括头像选择、上传、裁剪、预览四个步骤,在用户界面上展现时,部分步骤可合并或跳过,但至少要包括裁剪和预览。
1. 选择图片
头像图片的来源包括:本地图片、系统推荐头像、用户个人线上相册、即时拍摄等。
同一产品在不同端可以支持不同的上传渠道,比如:PC端摄像头拍摄质量不佳,而且台式机不一定配备,一般可以不做支持。
2. 上传条件限制
上传本地图片作为头像时,图片的格式、尺寸、文件大小规则应尽量放开限制,至少要支持JPG、GIF、PNG、JPEG、BMP等格式。随着手机拍摄照片的尺寸和大小越来越大,所以5-6M是一个比较合适的上限。关于服务器图片存储,应保留一张高清大图和多套不同尺寸的缩略图。
3. 裁剪处理
图片裁剪包括:系统自动裁剪和用户手动裁剪。
如果不支持手动裁剪,最好把系统自动裁剪和截取做了,比如:京东商城web端就没有截
取图片中央区域,而是直接挤压或拉伸图片,导致图片变形效果很差。
手动裁剪时,一般要辅助缩放、旋转、镜像等功能。缩放时需注意极限值,否则会导致背景空白(如QQ空间),要做相应的填充处理。
裁剪框最好加入辅助线(如九宫格、方圆)和遮罩,方便实时预览方形和圆形头像的效果。有时也会加入滤镜、贴纸等功能。
4. 效果预览
“所见即所得”是打造优良用户体验的诀窍之一,所以提供实时反馈和预览是必不可少的,比如:裁剪得到的各种形状和尺寸的预览,滤镜效果实时渲染等。当然,实时性也和系统性能有关。
头像的常见展示形状包括方和圆,有时也有异形头像。关于头像形状的“方圆”论证可以参考和QQ设计师的官方回复:
同样作为腾讯的产品,为什么QQ的头像是圆的?而的头像是方的呢?
腾讯的回应如下:
1.相比方形,人的头像更接近圆形。圆形QQ头像能更突出头像弱化背景,也更鼓励用户使用真实自拍作为QQ头像。
2.QQ作为平台会接入游戏和第三方应用内容,圆形QQ头像在这些方形、异形图标环境中提高辨识度,降低用户的认知门槛。
3.QQ希望给用户传递“乐在沟通,展现年轻个性”的态度,圆形QQ头像更具灵动和活力,与之无缝衔接的头像挂件也为用户带来更个性化的搭配和丰富的自我展示。
——by QQ设计师
“因为照片本来是方的,方头像更符合用户习惯。”
——by 设计师
还有百度小程序关于头像的规范可供参考:
头像应保证清晰,头像的主体元素在方形或圆形参考线内,不遮挡关键信息,确保前端展现时能在圆形轮廓中展现完全。
二、设置头像的各种方式
1. 默认头像
为缩短注册流程,减少潜在用户流失,用户注册过程中一般不会强制用户设置头像。
所以,为防止用户不去设置头像以及页面中头像加载不出来,系统会提供默认头像以便在相关位置展示。可以采用灰头像,也可以采用基于企业吉祥物卡通形象设计的彩头像(例如:虾米、转转)。
二者各有好处,灰头像可以时常提醒用户去设置头像,彩头像则可以减少页面单调、增加趣味性。不过唯一的遗憾是:一旦设置了新头像,改不回默认头像了,毕竟有的默认头像还是挺好看的。有的社区允许游客用户进行点赞、评论等操作,这时便会用到游客默认头像。
当然,同一系统内,默认头像也可以不唯一,比如:根据用户性别、星座匹配头像,根据用户身份角匹配头像(司机/乘客,招聘者/求职者),或者制作头像库为用户随机分配头像。
2. 系统推荐头像
让用户自己拍摄/到一张自己满意的图片做头像,对有些用户而言其实是一件成本比较高的事情。如果用户体足够大,图片质量难以保证,甚至内容监管又会带来新的问题。
所以,推荐一些优质头像供用户挑选,就成了一个很不错的辅助解决方案。QQ很早就推出了类似功能,甚至成了会员服务的一部分。平安金管家APP也有类似功能,提供了四个商务风格的卡通头像供用户选择。
最近比较火的匿名社交APP Soul也同样支持使用系统推荐头像,而且是只能使用系统头像,如下图所示。
用户可以根据自己所设置的性别(只允许修改一次),头像风格(包括绘本、二次元、可爱、经典四种风格)选择心仪的头像。Soul不允许用户上传其他照片作为头像,也是希望
用户能抛开颜值,到真正的灵魂伴侣。这些头像本身也体现了用户个体的审美情趣、价值观等。
最近Soul新上线了“超萌捏脸功能”,下文会着重详细分析,不过捏脸捏成的头像依然可以算是系统推荐头像,只是把头像拆解成了头发、脸、眉毛、眼睛、鼻子、嘴巴、衣服配饰等元素,然后再由用户自己排列组合。
3. 随机选择头像
前文也提到了随机头像——即系统会在用户注册成功后为其随机匹配头像,避免单一默认头像的沉闷,记忆中GitHub以前就是采用这种做法。
另一种随机头像是指:用户主动选择随机头像,获得相应的惊喜,比如哔哩哔哩就采用了这种做法。
不过实在难以琢磨出这种类似“变脸”的玩法背后的设计逻辑。
4. 使用历史头像
在用户使用过一段产品之后,可能会积累大量的历史头像(主要是用户自主上传的,使用过的系统头像不记录在内)。
QQ就把用户的这些头像收集起来展示给用户,以便用户查看或重新选择。虽然用户重新使用的几率并不大,但不失为一种增进用户情感、提高用户粘性的做法,毕竟这里面满满都是青春的回忆,很容易给用户带来触动。
也有类似的做法,不过只能查看上一张头像。
的设计哲学是不去刻意讨好用户,所以这里更多的是防止用户反悔,方便用户在最近使用的两张头像之间切换对比。