为什么界面设计中，使用者的个人头像大多是圆形的？
（点击上方公号，可快速关注）
出处：设计大舌头
作者：EGG
网址：https://designtongue.me/%E7%82%BA%E4%BB%80%E9%BA%BC-%E4%BB%8B%E9%9D%A2%E8%A8%AD%E8%A8%88-%E4%B8%AD-%E4%BD%BF%E7%94%A8%E8%80%85%E7%9A%84-%E5%80%8B%E4%BA%BA%E9%A0%AD%E5%83%8F-%E5%A4%A7%E5%A4%9A%E6%98%AF%E5%9C%93%E5%BD%A2/
大家有没有觉得有越来越多的平台或App，喜欢使用“圆形“作为使用者的“个人头像”形状。该不会是近期的设计风潮？还是大部分界面设计师的爱好？或有其他特别的原因呢？大舌头藉由归纳网络社群中专家的讨论，以及问卷调查的结果分析，逐步厘清这个秘密，内容精彩不要错过喔~
个人头像的定义与发展：
随着网络用户族群快速增加，他们对于藉由平台与其他用户互动的需求就越高，也因此发展出许多可互动的平台类型，例如论坛、邮箱、聊天室、博客到社群等。其中每个用户都代表着一个独特个体（无论是真实身份或虚拟角色），这些个体会有相对应的信息，以及代表个体的个人头像。而个人头像通常是具个性化（用户觉得能代表自我）的标志，大多以平面或3D图象的方式呈现。
UI上的个人头像英文为Profile Picture或Avatar，其中Profile Picture在字义上较容易理解，反倒是Avatar，各位读者可能会充满问号，因为大家对Avatar的印象应该都是阿凡达电影（蓝蓝的那出XD）。根据techpedia平台上的描述，Avatar一词出现于1985年，由卢卡斯电影公司（Lucas Film）内发展在线角色扮演游戏（Habitat）项目人员（Chip Morningstar & JosephRomero）首先提出。此词源自于印度教对“圣人降临（a descent of the Supreme Being）”的描述，在英文里有“化身（incarnation）”或“代表（manifestation）“之义。
图片来源：http://deadline.com/2013/12/james-cameron-to-make-avatar-sequels-in-new-zealand-government-unveils-new-tax-breaks-for-international-productions-652841/
网友对个人头像形状选择的观点：
其实，选择何种形状的论战已不是新闻了，有众多专家在相关论坛中发表意见与讨论。大舌头撷取与整理他们在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也提出了一些有别于上述的观点，大舌头简单整理并陈述如下：
角度的边缘，看起来较明显
通常方形的锐利四角，因为对比（颜色或形状）的关系，在视觉上会更明显，造成干扰。使用圆形并无此问题，所以更可强调重点–“脸部“。
图片来源：http://uxmovement.com/thinking/why-circular-profile-pictures-accentuate-faces/
方形对角线较长
方形的对角线比边缘还长，用户目光易延伸出去；圆形半径长皆一致，用户可花更少时间在理解内容，眼球也较不需要移动。
图片来源：http://uxmovement.com/thinking/why-circular-profile-pictures-accentuate-faces/
圆型用于非人物图片，效果也是一样的吗？
虽然使用圆形的个人头像可排除不相关的背景，更聚焦于人脸上，但非人物的图片（风景或食物等）也有同样效果吗？Anthony认为不一定，因为可能因此失去了该图片要传达的资讯，如景深或细节等。
图片来源：http://uxmovement.com/thinking/why-circular-profile-pictu
大舌头观点：
上面已整理了许多专家的观点，大部分是相当的认同的。不过，大舌头也有一些观点是以上未提到的，想补充给大家做参考，如下：
较强的设计感
大舌头认为圆形的个人头像，能让界面传递较强的设计感。不过这点会受设计师应用的手法，或使用者的主观感受影响。此外，平台无法限制使用者上传图片的质量，若上传图片的质量、构图或美感较差，将其套用在圆形的掩码里，界面的设计感会比方形的好。
高度亲和力
就如同人与人的交际，在初次见面时，会认为带有严肃表情的人较难相处，而微笑满面的人可马上聊起来。为什么会有这种先入为主的观念呢？这就是“亲和力“高低层度的差异所致。而曲线与圆在人们的印象中，就是亲和力的象征。若界面上使用圆形的元素（个人头像等），使用者可能会产生，此产品学习曲线较低的印象。
好的开始就是成功的一半，对吧！
虽然矩形可让空间利用最佳化，但应用圆形又可多一点留白空间
若不考虑使用者体验与美学，将不同的内容以方形排列，将最具有性能（一种集装箱的概念），但这样的产品绝对不会受到用户欢迎的。因此，设计师都应了解留白带来的效益，例如降低视觉负担、增加阅读性、区隔不同内容与更具美感等。适当的留白对产品来说相当重要，同时也考验设计师的基础训练是否扎实。就个人图象而言，同样尺寸下，圆形又能比方形多一些留白空间（在四角处），除了增加与其他内容的区隔性外，也能让界面带点趣味性。
使用者真的比较喜欢圆型的个人头像吗？
以上许多专家的观点大多偏向理性分析，例如认知、对比或视觉动线等；另有一部分是朝向“它是一个设计风潮“来解释。但不管怎么样，若大部分使用者都偏爱圆形版的话，产品为求更好的愉悦体验，使用它何尝不可。也因此，大舌头想透过简单的问卷调查，来验证“使用者更偏爱圆形个人头像”的假说。
本调查的对象不限，但传播媒介是透过设计大舌头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属性就可以达到！为了向下兼容老旧的浏览器，必须针对不同核心的浏览器添加不同的前缀，如下：
HTML:
<div><img src="https://designtongue.me/wp-content/uploads/2015/06/apple-touch-icon.png" alt="設計大舌頭"><span>設計大舌頭</span></div>
CSS:
img {
width: 40px;
/*注意順序*/
-moz-border-radius: 100%; /*firefox*/
-webkit-border-radius: 100%; /*Safari, Chrome*/
border-radius: 100%;
}
div {
width: 300px;
padding: 20px;
margin: 50px;
border: 2px solid #EFEFEF;
border-radius: 5px;
background-color: #ffffff;
}
span {
display: inline-block;
height: 40px;
line-height: 40px;
vertical-align: 12px;
margin-left: 8px;
font-size: 20px;
color: #136788;
}
div:hover {
box-shadow: rgba(49, 129, 197, 0.2) 2px 30px 20px -20px, rgba(0, 0, 0, 0.08) 0px 0px 3px;
}
给予使用者上传图片的建议
不知道大家有没有这样的经验，就是当你挑好图片并上传后，发现圆形的形状外框遮住了许多重点（例如脸的一角），效果不如预期。其实，设计师可以在上传图片的界面上，提供给使用者一些建议。例如，画出一个人脸可在圆形里完整呈现的区域，这样使用者就会比对自己的图片，并挑选较符合者；或是提醒图片上有字的话，建议的大小为何（可看的清楚）；提示不能使用非法图片等。
提供多种预设图片，及更完善的图片编辑器
有些使用者手上刚好没有适合的图片，或认为不重要，可能就不会设定个人头像了。不过，平台若是希望呈现出多种角色互动的氛围（如社群网站），或有协作辨识的需求（如trello）。设计师可在设定流程的页面上，提供多种预设个人头像供使用者快速选择（如多款颜色或企业识别的变形应用），或设计某种自动机制（如帐号的第一个字母）。另外，利用第三方社群登入方式，也能自动加载在该平台上传的头像，是个对使用者较便捷的方式。
再者，若能提供完善的图片编辑器，也能吸引使用者做出更符合自我形象与质量更好的头像，例如挑选滤镜、色相与明度调整等。不过，图片编辑器的有无，应该要取决于平台服务的本质。
同尺寸下，圆形看起来比方形小
某一圆形的直径与正方形的边长一致，若将两者放在一起，视觉上会认为圆形的较小（如下图左）。如果排版有将两者放在一起的需要，可将圆形放大一点，以达到视觉的平衡（如下图右）。
使用gif
有越来越多的平台允许使用者放上gif档作为个人头像，以呈现动态效果，这让使用者更可彰显其特色或品味，例如：
夸张表情变化，来表示我的个性开朗搞笑
不同视角的放空照片切换，就是要告诉大家，我就是个文青！
旋转的3D模型，代表我是位动画师