为什幺介面设计中,使用者的个人头像大多是圆形的?

2020-06-15 3W访问


大家有没有觉得有越来越多的平台或 App ,喜欢使用「圆形」作为使用者的「个人头像」形状。该不会是近期的设计风潮?还是大部分介面设计师的爱好?或有其他特别的原因呢?大舌头藉由归纳网路社群中专家的讨论,以及问卷调查的结果分析,逐步釐清这个秘密,内容精彩不要错过喔~
个人头像的定义与发展:

随着网路用户族群快速增加,他们对于藉由平台与其他用户互动的需求就越高,也因此发展出许多可互动的平台类型,例如论坛、信箱、聊天室、部落格到社群等。其中每个用户都代表着一个独特个体(无论是真实身份或虚拟角色),这些个体会有相对应的资讯,以及代表个体的个人头像。而个人头像通常是具个性化(用户觉得能代表自我)的标誌,大多以平面或 3D 图像的方式呈现。

UI 上的个人头像英文为 Profile Picture 或 Avatar ,其中 Profile Picture 在字义上较容易理解,反倒是 Avatar,各位读者可能会充满问号,因为大家对 Avatar 的印象应该都是阿凡达电影(蓝蓝的那齣 XD)。根据 techpedia 平台上的描述,Avatar 一词出现于 1985 年,由卢卡斯电影公司(Lucas Film)内发展线上角色扮演游戏(Habitat)专案人员(Chip Morningstar & Joseph Romero)首先提出。此词源自于印度教对「圣人降临(a descent of the Supreme Being)」的描述,在英文里有「化身 (incarnation)」或 「代表(manifestation)」之义。
为什幺介面设计中,使用者的个人头像大多是圆形的?
图片来源

 
网友对个人头像形状选择的观点:

其实,选择何种形状的论战已不是新闻了,有众多专家在相关论坛中发表意见与讨论。大舌头撷取与整理他们在 Quora 与 Stack Exchange 平台上讨论与发表的论述,并简单的分类如下。不过,大舌头先申明,以下内容的排序并无经过提及次数统计(仅随机排列),且多数回应也无相关验证或研究资料,所以大家可当成不同 「观点」参考就好。
感受与认知

1. 方形太无趣了。
2. 大脑可较轻易的处理圆形内的讯息,减少认知的压力。
3. 相较于方形,圆形更柔性、有机、安全、顺眼、现代与友善,也更能与他人情感交流。
4. 更有关注的感觉,例如想到望远镜或放大镜的视野。
5. 大多照片的四周都是无意义的背景或讯息,圆形可以将其切除。
6. 通常拍照会把「人」摆在中心,而圆形中心到四周距离都一致,可让脸更突出。
视觉

1. 视线在方形的焦点有 5 个(四个角 + 中心),而圆形只有一个(中心)。
2. 圆润的线条或角度,可让视线自然的追随与运动,不会像看到 90 度角而停顿下来,更详尽的内容可参考这篇。
3. 在扫视的情况下,使用圆形可协助使用者辨识或区分是否为内容,因为内容通常会置于用方型容器,例如文字、照片或专辑等。
其他

1. 行动装置普及后,因圆形与手指按压在萤幕上的形状类似,而被广泛地使用。
2. 其实人类早就有这样的应用,例如将人物应用于圆形硬币与圆形艺术画中。
3. 只是一个设计的风潮,刚好流行到「圆形」这个週期。
4. 很多準则或模板都只提供圆形版本。
5. 现在的 CSS3 技术让圆角(圆形)轻易实现且各浏览器也几乎都有支援 。

 
作者 Anthony 于 UX movement 上提出了相关观点:

在 UX movement 中,作者 Anthony 也提出了一些有别于上述的观点,大舌头简单整理并陈述如下:
角度的边缘,看起来较明显

通常方形的锐利四角,因为对比(颜色或形状)的关係,在视觉上会更明显,造成干扰。使用圆形并无此问题,所以更可强调重点--「脸部」。
为什幺介面设计中,使用者的个人头像大多是圆形的?
图片来源
方形对角线较长

方形的对角线比边缘还长,用户目光易延伸出去;圆形半径长皆一致,用户可花更少时间在理解内容,眼球也较不需要移动。
为什幺介面设计中,使用者的个人头像大多是圆形的?
图片来源
圆型用于非人物图片,效果也是一样的吗?

虽然使用圆形的个人头像可排除不相关的背景,更聚焦于人脸上,但非人物的图片(风景或食物等)也有同样效果吗?Anthony 认为不一定,因为可能因此失去了该图片要传达的资讯,如景深或细节等。
为什幺介面设计中,使用者的个人头像大多是圆形的?
图片来源

 
大舌头观点:

上面已整理了许多专家的观点,大部分是相当的认同的。不过,大舌头也有一些观点是以上未提到的,想补充给大家做参考,如下:
较强的设计感

大舌头认为圆形的个人头像 ,能让介面传递较强的设计感。不过这点会受设计师应用的手法,或使用者的主观感受影响。此外,平台无法限制使用者上传图片的品质,若上传图片的品质、构图或美感较差,将其套用在圆形的遮罩里,介面的设计感会比方形的好。
高度亲和力

就如同人与人的交际,在初次见面时,会认为带有严肃表情的人较难相处,而微笑满面的人可马上聊起来。为什幺会有这种先入为主的观念呢?这就是「亲和力」高低层度的差异所致。而曲线与圆在人们的印象中,就是亲和力的象徵。若介面上使用圆形的元素(个人头像等),使用者可能会产生,此产品学习曲线较低的印象。

好的开始就是成功的一半,对吧!
虽然矩形可让空间利用最佳化,但应用圆形又可多一点留白空间

若不考虑使用者体验与美学,将不同的内容以方形排列,将最具有效能(一种货柜的概念),但这样的产品绝对不会受到用户欢迎的。因此,设计师都应了解留白带来的效益,例如降低视觉负担、增加阅读性、区隔不同内容与更具美感等。适当的留白对产品来说相当重要,同时也考验设计师的基础训练是否扎实。就个人图像而言,同样尺寸下,圆形又能比方形多一些留白空间(在四角处),除了增加与其他内容的区隔性外,也能让介面带点趣味性。

 
使用者真的比较喜欢圆型的个人头像吗?

以上许多专家的观点大多偏向理性分析,例如认知、对比或视觉动线等;另有一部分是朝向「它是一个设计风潮」来解释。但不管怎幺样,若大部分使用者都偏爱圆形版的话,产品为求更好的愉悦体验,使用它何尝不可。也因此,大舌头想透过简单的问卷调查,来验证「使用者更偏爱圆形个人头像」的假说。

本调查的对象不限,但传播媒介是透过设计大舌头 Facebook 粉丝专页,所以可能职业或年龄较局限,不过这些因子都不是这次调查想分析的。另外,施测时间为 2016 年 3 月 1 号到 10 号;问卷製作使用 typeform,共计四题。最后回收的有效问卷数量为 305 份。

首先,大舌头想要了解个人头像底下有无背景是否影响「偏爱」的形状,此外也想知道何种形状是使用者较喜欢的。所以设计了最核心的两题:

1. 底下有方型背景,且有三种基本形状(方形、圆形、六角形),请受访者选择最喜欢何种形状。
2. 底下为空白背景,同上题有一样的三种基本形状。

此外的两题非必填,主要就是询问受访者针对上述两题的选择主因。

为什幺介面设计中,使用者的个人头像大多是圆形的?
底下有背景
为什幺介面设计中,使用者的个人头像大多是圆形的?
选择较喜爱方形个人头像的佔 56%(171人);喜爱圆形佔 42%(129人);喜爱六角形的最少,佔 2%(5人)。可以看出若头像下有背景,大部分人较喜欢方形,与圆形差距 14%。大舌头从受测者回答的原因中挑选并整理出与感性相关的形容词(因主要在探讨主观偏爱程度),依出现的次数排列如下:

喜欢方形的原因大多是:耐看顺眼、稳定平衡、整齐、舒适等。不过,值得一提的是,较理性且具逻辑的原因比感性的原因多上许多倍,例如与方形背景一致、照片较不易裁切到、已经习惯了 FB 的介面等。由此可看出,题目应考量更多,拿掉干扰感性选择的因子(如不要让受测者联想到 FB 等)。而喜欢圆形的原因:好看顺眼、舒服和谐、柔顺圆滑、生动、可聚焦、可爱、亲和力等。喜欢六角形的原因为:特别。

未来,若大家还有兴趣,可探讨更多其他因素的影响程度,例如将个人头像放在背景中、与背景边缘切到、放在中间或右侧等。甚至,搭配眼动仪、脑波或其他可数据化仪器,验证相关假说。另外,两题中喜欢方形的受访者,皆有一定比例的人在乎,方形可容纳更多照片的资讯,看来此点也是设计师需要考量的。
底下无背景
为什幺介面设计中,使用者的个人头像大多是圆形的?
选择较喜爱方形个人头像的佔 19%(58人);喜爱圆形佔 78%(238人);喜爱六角形的最少,佔 3%(9人)。由数据看出,在无背景的情况下,受测者更偏爱于圆形的个人头像,与方形差距达 59%。

喜欢方形的原因:整体一致(与排版与周遭元素有关,如方底)、整齐、好看顺眼、简单俐落、正式等。喜欢圆形的原因:好看顺眼、生动活泼、柔和圆滑、和谐一致、舒服、轻巧精緻、明确凸显、可爱、简洁等。喜欢六角形的原因为:特殊前卫。
结论

虽然本调查还不够严谨,无法构成绝对的论述。但至少可了解到若底下有背景时,可能会影响使用者对于个人头像形状的喜爱程度;而在无背景时,使用者大多喜爱圆形的个人头像。另外,设计师也可参考由受测者回馈原因中整理的词彙,来选择最适合的形状,来符合产品要呈现的感受。

 
使用圆形个人头像的小撇步

css 怎幺做?该注意什幺?

感谢 css3 与各浏览器的技术支援,现在只需要针对个人头像的 HTML tag or class 写一行 border-radius: 100%; 的 css 属性就可以达到!为了向下相容老旧的浏览器,必须针对不同核心的浏览器添加不同的前缀,如下
给予使用者上传图片的建议

不知道大家有没有这样的经验,就是当你挑好图片并上传后,发现圆形的形状外框遮住了许多重点(例如脸的一角),效果不如预期。其实,设计师可以在上传图片的介面上,提供给使用者一些建议。例如,画出一个人脸可在圆形里完整呈现的区域,这样使用者就会比对自己的图片,并挑选较符合者;或是提醒图片上有字的话,建议的大小为何(可看得清楚);提示不能使用非法图片等。
提供多种预设图片,及更完善的图片编辑器

有些使用者手上刚好没有适合的图片,或认为不重要,可能就不会设定个人头像了。不过,平台若是希望呈现出多种角色互动的氛围(如社群网站),或有协作辨识的需求(如 trello)。设计师可在设定流程的页面上,提供多种预设个人头像供使用者快速选择(如多款颜色或企业识别的变形应用),或设计某种自动机制(如帐号的第一个字母)。另外,利用第三方社群登入方式,也能自动载入在该平台上传的头像,是个对使用者较便捷的方式。

再者,若能提供完善的图片编辑器,也能吸引使用者做出更符合自我形象与品质更好的头像,例如挑选滤镜、色相与明度调整等。不过,图片编辑器的有无,应该要取决于平台服务的本质。
同尺寸下,圆形看起来比方形小

某一圆形的直径与正方形的边长一致,若将两者放在一起,视觉上会认为圆形的较小(如下图左)。如果排版有将两者放在一起的需要,可将圆形放大一点,以达到视觉的平衡(如下图右)。

为什幺介面设计中,使用者的个人头像大多是圆形的?
使用 gif

有越来越多的平台允许使用者放上 gif 档作为个人头像,以呈现动态效果,这让使用者更可彰显其特色或品味,例如:

夸张表情变化,来表示我的个性开朗搞笑。不同视角的放空照片切换,就是要告诉大家,我就是个文青!旋转的 3D 模型,代表我是位动画师。