大家好,我是讯享网,大家多多关注。
编辑导语:随着互联网的发展,各种社交软件不断更新迭代。头像可以说是社交软件中特别重要的设计。作者分享了产品头像的基础设计知识,描述了头像元素的方方面面。有兴趣就来看看吧。
无论是真实的社交,还是虚拟的社交,甚至是与社交无关的社交,任何应用只要有用户的概念,都会有头像,只是产品头像的权重和用户的重要性不同。在这个“看脸时代”,和陌生人搭讪是非常昂贵的。第一步,看头像确定是否建立社交关系,这是最直接快捷的方式。
在UI设计上,95%以上的应用都会涉及头像元素,比如消息列表、个人中心/主页、会员服务、评价、排行榜等功能板块。在可以用昵称或几个词解释清楚的地方,设计一个头像,它也占据了信息组的主要视觉。
那么,那些简单的、方形的或圆形的小头像,有哪些我们不知道的细节呢?今天我就通过这篇文章和大家聊聊头像元素的方方面面,希望对你有所帮助。欢迎大家互相讨论交流。
一、UI界面中头像的作用1。多账号差异化由于特殊原因,销售、客服等很多职业在同一个应用中可能会有多个账号。当你需要确认当前登录的是哪个账号时,查看头像是最好的区分方式(你需要设置不同的头像)。当然,也有一些非正常需求的用户有其他小号。相信头像也会不一样,这里不方便多说它们的作用,以免“社交死亡”。
此外,如QQ登录、微信账号切换页面,也会使用突出的头像来快速区分账号信息。
2.突出自己的形象。当一个用户用一张成熟端庄得体的形象照片作为自己的个人头像时,大多数情况下,这个人一定不是动不动就骂人的键盘侠或者网络喷。虽然“隔着屏幕打不到我”,但他在发布内容时会注意自己的措辞,下意识地维护自己的网络形象(头像)。这就是现实和网络头像的性格映射。
当你遇到匿名社会,当你给自己戴上面具,你就会变得肆无忌惮。与前者相比,你至少少了一些拘束。
3.“面对面”交流是指很多时候,无论是和朋友聊天,还是在不同的应用中留言,有头像的用户总觉得是在平等的交流。这么说感觉很抽象。这里有一个例子:
如果你是单身男性,当有人在社交应用中添加好友或提问时,拥有漂亮头像的用户的响应效率和质量会高于拥有其他头像的用户。这是不争的事实(别逗了,先不说例子)。也说明你时刻都在关注自己在对方心目中的形象,时刻都在担心被对方“打扮”。
二。每个场景中的化身类型1。默认头像不是强制登录应用。切换到个人中心时,一般会有一个默认的头像占位符,可以是某个人物的剪影,也可以是某个品牌的吉祥物,以保证用户在登录前保持页面的完整性。此外,即使用户在登录后上传头像,在网络延迟、头像加载失败、匿名操作等情况下,系统默认头像也可以充当临时替代品。常见的默认头像有两种:灰色和彩色,各有优缺点。
1)灰色头
灰色头像色彩感较弱,可能会导致视觉失衡,破坏画面美感。然而,正是通过这种轻微的不和谐,以一种明显而突兀的方式提醒用户更换头像。强迫症患者几乎无法抗拒。
2)彩色头像
大多结合品牌颜色、吉祥物等进行展示。,还能起到丰富画面,增加趣味性的作用。与灰色头像相比,它们更加生动。无论用户登录还是更换头像,都能保持界面的视觉平衡。唯一的缺点可能会降低用户更换头像的欲望。
2.系统推荐化身1)用户选择
QQ是最典型的案例。系统提供多种头像供用户选择,甚至部分头像包含在QQ会员功能中。当用户没有合适的图片作为头像,难以做出选择时,使用系统推荐的头像,既能降低用户的选择成本,又能满足一些个性化需求。如果默认头像与产品关联,还可以作为品牌传播渠道,两全其美。
另外,最近流行的匿名社交app Soul只能使用系统头像(可以自定义调整),不允许上传图片。这是因为平台希望用户能够抛开颜值,通过不同的个体审美和价值观进行交流,从而找到真正的灵魂伴侣。
同时,因为用户数量庞大,图片的合法性和质量也带来了一系列的监管问题。利用系统推荐头像可以大大降低图片管理的成本(PS:强制使用系统头像和产品定位有绝对的关系,不是拍脑门的决定)。
2)系统选择
注册成功后,系统会随机匹配个人头像。相对于用户在列表中手动选择,有一种神秘感和期待感,使得头像的设置更加有趣,比如小红书和哔哩哔哩。
3.文本头像经常出现在移动办公应用中,由系统自动处理。基于OA的应用社交属性不强,多用于内部团队工作的交流,如钉钉、享客、飞书等。这类产品头像为了更清晰的获取对方的个人信息,往往会上传自己的真实照片(有些企业是被迫的)。在用户不上传照片的情况下,系统会提取中文名字的后两个字(显示两个字的全名)和英文名字的前两个字母作为个人头像,方便团队成员更好的识别。
4.群头像只出现在群聊中,由几个群成员的头像组成。不同的应用对头像上限的设置不同,最常见的是四个或九个。大多数群头像不支持自定义上传,会根据当前群成员数量(1-4,1-9)排列成网格,不会超过设定的上限,如钉钉群、微信群、QQ群等。
5.用户头像群在一些应用场景下,产品将多个用户头像叠加组合在一起,通过“羊群效应”引导后续用户产生从众心理,提高转化率,比如有多少用户购买了,有多少用户获得了奖品。此外,视频平台的直播间还会排列展示排名靠前的用户头像,以吸引其他用户的关注。
6.历史头像1)同一个平台
QQ会收集用户之前使用过的头像,提供单独的入口。当用户需要更换头像时,可以选择再次使用。虽然重用他们的几率不高,但也是一种感觉。用户可以清晰的知道更换头像的历史轨迹,充满回忆。
在设置微信头像时,也可以选择使用之前的头像,方便用户设置新头像后反悔。可以理解为取消这个替换操作。如果需要切图,也方便用户跟上之前的头像反复对比。
2)跨平台
作为第三方登录的标准,用户可以继承第三方账号的头像、昵称等信息,无需重新编辑,节省大量时间和运营成本,如微信、QQ、支付宝、微博授权登录等。
7.其他头像包括视频头像、GIF头像、轮播头像等。除了以上类型的头像。这些不常用。了解他们就行了。
另外,就是捏脸头像,因为虚拟影像的社交化趋势而爆炸了。是针对性很强的新头像类型。有兴趣可以下载魂与宝贝APP体验,这里就不赘述了。
三、头像状态与附加操作1. 不同的用户状态
用彩色头像和黑白头像来区分用户是否在线是最直观的方法。比如打开QQ好友列表,一眼就能看出对方目前是否在线。此外,QQ的在线状态还延伸到几个子状态,如:离开、忙碌、听歌、勿扰…等。设置成功后,会以小图标的形式重叠在头像的右下角,让好友在看到后能清楚地感知到是否能在当前状态下立即联系到你。Tik Tok采用了更简单的方式,在头像右下角有一个小绿点表示在线,没有绿点表示离线。
2.事件通知常用于非社交应用的未读消息/事件通知(社交应用有更专业的处理方式)。它们显示在头像的右上角,点击查看后会消失。可以设计不同的风格来体现视觉强弱的关系,可以引导用户达到不同的程度。
弱提示:小圆点提示,填充红色或主体色,提示程度较弱;中等提示:白色圆形+数字提示,数字色彩可以是红色或主体色;强提示:圆形白色描边及红色填充+数字反白,较突兀的提示方式。3.吊坠/装饰品很多吊坠只是单纯的装饰品,可以起到美化、娱乐、有趣的作用;增值服务、特权服务、认证标志是一种身份象征,体现了荣誉感和尊严感;少数应用在头像的某个位置叠加了用户的勋章标志,总是给用户坚持完成任务后的成就感,满足了他的虚荣心。
4.互动操作。在很多应用中,设置功能隐藏在个人中心页面的头像区。点击后会进入个人主页,个人信息页面,或者更改头像页面。还有一些纯粹有趣的没有实用功能的交互,比如双击微信好友头像“拍一拍”,拖动个人中心头像瞬间会出现一颗红心等等。,会在不同程度上给用户制造意想不到的惊喜。
还有一些应用,在头像右下角,有明确指向意义的图标引导用户操作。
比如你需要在填写表格的过程中添加一个头像。上传成功后,头像右下角会出现删除图标;灵魂个人中心画像右下角增加个性商城入口;QQ和Instant提示用户通过摄像头图标点击直接更换头像。这些引导图标比较小,需要准确点击。为了避免无效操作,请在不影响其他交互的情况下,尽量扩大图标的热区。
四、方形与圆形的定义
虽然我们使用和研究了大量的互联网产品,但也许我们真的没有太关注头像的形状。以目前几款主流产品为例,QQ和Tik Tok为圆形头像,微信和钉钉为方形(圆形)头像。如果有赢家的话,很明显大部分产品都是圆的。正方形和圆形有什么区别?设计时如何选择?我们一起聊聊吧。
方形头像对照片的空间利用率更高、降低空间损失,圆形通过裁剪让空间更平衡、看起来更精致;方形对四角、中心点均可构成聚焦区域,使用灵活,圆形则边界完美,没有聚焦冲突,可突出核心;古埃及曾认为圆形是神赐予人们的神圣图形,因图形边界完美,能给人公正、信任感,但矩形却能给人一种专业、稳定的感觉;圆形被认为是活泼,方形则显得比较严肃;QQ团队曾给出答案,因产品定位就要是给人一种年轻化、活跃的感觉,且人的脸也接近圆形,裁切后更能凸显人的脸部特征(看脸时代),明显使用圆形更适合。微信设计师的说法是图片本来就是方形(扯远了),方形头像能最大程度的降低图片损失,而且微信的定位相对成熟,方形还能给用户一种稳定可靠的感觉,更符合用户习惯,如果一定要用圆形,将头像处理成圆形即可,方/圆兼具;说了这么多,我还是不知道怎么选择,所以笔者就根据头像常用的一些三个模块给大家一些建议:
个人中心/主页:如无特别需要,大部分情况下使用圆形,不会出错;消息列表/即时会话:根据产品定位、上述的参考比较后决定,没有明确的要求,使用其中一种形状后,在其他同等级页面统一即可;评论/交流区:直接圆形,没有为什么。头像本来就小,裁切掉无关信息会更聚焦。五、头像设置步骤1. 头像来源
用移动设备上传大头照时,来源主要是系统推荐、历史大头照、相册精选、拍照。电脑端,由于设备限制等原因,一般只有系统推荐上传本地图片。
2. 上传限制
上传图片时,通常会有格式限制(JPG/PNG/GIF等。)、图片大小(宽*高)和文件大小(多少KB/M)。这些都需要给出明确的提示,避免用户因为反复失败而沮丧的离开。同时,用户可以避免因为不知道平台可以使用GIF、视频等头像格式而隐藏产品的多样化服务。
3. 图片裁剪
由于图片来源和拍摄手法的不同,对于水平和垂直的图片,系统会自动切边(避免压缩/拉伸)得到正方形,然后用户可以自己调整大小,选择最佳位置。
4. 效果预览
需要为用户提供真实的效果预览,避免用户因操作失误或对处理后的头像不满意而再次重复整个替换过程。所见即所得是通过降低重复操作的概率来提高用户满意度的方法之一。
不及物动词引导用户上传头像1。文案指导当一个产品需要一个用户群体去做一件事的时候,哪怕是为了用户考虑,也要给出合理的理由。可以用有趣的、感性的或鼓励性的文案来引导用户主动上传头像。比如“除了一个帅气的头像,一切都很完美”“换一个好的头像会让更多人认识你”等社交应用。或者用户在编辑个人信息时给予鼓励,“恭喜你,这只是最后一步,换个头像就完美了”。
2. 第三方授权
我讲了第三方登录方式,相信也是懒癌患者上传头像最直接粗暴的方式。
3. 纳入注册流程
一些社交应用将上传头像作为注册过程中的必要步骤,任何用户都不能跳过。记住这个方法不是必须的,不能滥用/误用,相当于提高了用户注册的门槛。任何产品每多一个运营成本,就会有一批用户离开,这要根据产品定位和强制上传头像的重要性来决定,避免得不偿失。
七。结论“无头像,无社交”。在设计界面之前,设计师要考虑清楚产品社交属性的等级,然后决定界面中头像的权重和比例。至于如何使用,需要根据产品的实际情况和用户头像的基础知识做出合理的判断。
“麻雀虽小,五脏俱全”,头像看起来是一个很简单的UI元素,但是在设计过程中还是有很多知识点需要考虑的,需要我们不断的积累、探索、总结,然后融入到实际的UI设计中,做出一个理性的、有理有据的设计。
最后,我想分享一个把图片变成插图的工具:https://newprofilepic.com,它非常容易使用。有兴趣就去试试吧!
#专栏作家#
沙漠之鹰;微信官方账号:能量眼,人人都是产品经理专栏作家。致力于产品需求的驱动,产品体验的挖掘,用设计的手段给受众带来更好的体验,就是好看,好用。
本文由人人作为产品经理原创发布,未经允许禁止转载。
题目来自Unsplash,基于CC0协议。
本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://51itzy.com/37540.html