编辑导语:用户的头像有圆形和方形之分,那么这两种头像到底有什么区别呢?在纠结选哪个头像的时候应该如何做出抉择呢?本文作者为我们提供了一些思路。
一、缘起
前几天组内在做小视频设计评审时,谈到了用户头像,有设计师提出了疑问,头像到底应该用圆形还是方形?
这两种形状在产品设计中都非常普遍,那到底应该根据什么因素来做抉择依据呢?我这边根据交互设计5要素做了一个梳理,希望可以给做设计决策的你一些思路。
二、经过
根据交互设计5要素:用户、目标、场景、媒介和行为其实是互相影响的。
要决定其展现媒介的呈现形态,我们首先要对媒介形态本身、用户、目标、行为和场景都进行仔细的分析。
在本文中,我将其归纳为媒介、用户和语境三个维度(语境同时包含了用户的目标、行为和场景)。
1. 媒介(形状)维度
这里的媒介形态差异是形状,任何形状自身都带有天然的情感属性,这和人类的遗传基因和生活经验密切相关。
通常来讲,圆形给人的感觉是活泼、柔和。
优美的弧线,滚动的张力,完满的闭环,给人温暖、亲切、舒适的感觉。视觉上,圆形具有收缩性,可以把人的视觉焦点聚焦在圆心,有效的吸引注意力,拉近与人的距离感。
同时,国外视觉实验明确指出,人的视网膜对于正圆形的处理速度要显著高于对边角的处理速度。所以,圆形相对其他图形而言,在聚焦效果上可以说又快又好,可以快速拉升人的情绪兴趣。
相比之下,方形则显得较为敦实、稳固。
均衡的四边,凸显的棱角,给人稳定、有个性、有原则的信赖感。因为棱角的关系,人的视觉会相对分散,除了视觉中心,注意力也会往四角上迁移,棱角越尖锐,视线扩散越明显。
方形的扩散性让图形内的注意力分布更为均衡,同时可以保持与人合适的距离感,让人的情绪相对冷静与克制。
2. 用户维度
不管是圆形还是方形,如果用来承载的是用户头像,那就需要先来研究一下头像的特征,看看到底哪种形状和用户的头像的契合度更高。
对于用户的头像来说,头部的形状与头部结构、年龄和性别都有关系。
从结构上来说,头骨分为脑颅和面颅两部分:脑颅成卵圆形,面颅则由颧骨(立方体)+上颌骨(圆柱体)+下颚骨(三角形体)构成。
图片来自网络
从不同角度来看,头部呈现的形状会有所不同。从现实情况来看,用户上传的头像,以正面和45度内的正侧面头像为主,加上头部肌肉和发型的修饰,整体趋近于椭圆形。
从年龄上来说,幼儿的脑颅体积占头部的5/6,面颅仅占头部1/6,头顶骨隆起,额丘高而显著,下颌小而圆,整体头型受脑颅影响比较大,趋近于圆形。
成年人的脑颅占头部的1/3,面颅占头部的2/3,整体头型受面颅影响比较大,在椭圆的基础上呈现出更多样化的形状。
中国传统的人相有“八格”之说(申、甲、由、田,用,国,目,风),是对头部外形特征的极好概括。
图片来自网络
从性别的角度来说,男性头部体积较大,趋于方正,头部线条趋于刚直,形体起伏棱角明显;女性头部体积相对较小,颜面的隆起和结节部位没有男性显著,额部平直、下颌带尖,颜部趋圆,女性头部线条趋于柔和,形体起伏较小。
图片来自网络
综合来说,少儿的头像趋近于圆,男性的头像趋于方正,女性的头像趋于椭圆。
对于这样的展示目标,如果媒介形态是圆形的,少儿和女性的头在其中相当于一个同心圆,有更好的聚焦作用;即使是对于较为方正的男性头像,圆形也有比较好的修饰作用,可以更好的衬托男性头部的线条轮廓。
而方形相对来说,能够在头部之外显示更多的环境信息,可以让观者观察到更多环境元素的信息。所以相对而言,圆形更能够凸显用户的个性特征,方形更能凸显头像之外的环境信息。
3. 语境维度
语境维度细分为两种:一种是当前页面的语境,一种是整体产品的语境(调性)。这里的语境需要同时考虑头像所处的周围信息(环境),以及头像与周围信息的关系(目标)和互动(行为)。
在当前页面语境中,主要是看头像与周围信息的关系,它在页面中的信息层级是怎样的?是否是要凸显的要素?是否希望它抓取用户的视觉注意力?
在整体产品语境中,主要是看产品的调性,看产品是偏活泼型或者陌生人社交性质的,还是偏严肃性的,或者熟人社交性的。对于活泼型或者陌生人社交性的产品来说,圆形的动感,更符合活泼的产品调性,圆形的聚焦性,可以快速帮助用户识别陌生人的关键特征信息(人脸),激发社交的兴趣;对于严肃性或者熟人社交产品来说,方形的稳重,与严肃的气质更加的贴合;对于熟人而言,我们对其脸部的轮廓已经有了了解,更期待通过更多的环境信息,来读取熟人最近的动态和变化。
举几个??:
三、结论
综上所述,我们可以做个简单的小结:对于强调互动娱乐类的产品(如游戏、教育、陌生人社交等),推荐使用圆形头像,可以更好的凸显用户的特征,激发他人的互动兴趣。对于强调专业严肃类的产品(如金融、政务,熟人社交等),推荐使用方形头像,可以更好的传达冷静、专业的用户气质,并传递更多的环境信息,赢得他人的信赖感。
本文由@悦有所思 原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自 Pexels,基于 CC0 协议