圆形头像和方形头像在产品交互或视觉设计上的根本区别概念是什么？

作者：冬笋
链接：https://www.zhihu.com/question/23506420/answer/24955628
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

结论：
在以方形为基本元素的页面里，出现一个明显的圆形区域有非常好的效果（恰好是头像需要的、被强调的效果），但若圆形区域批量出现，会和页面内其他大量方形外廓造成冲突。

以空间页的场景为例：
头图、单条feed、feed里的图片－－最基本的（非头像的）图片元素，大多是方形。原因可能是对大数量级＋质量不可控的图源做异形处理，未必有好的效果。据说还要考虑前端性能压力。
以及，我们电脑or移动设备的屏幕、浏览器的窗口、还有页面上划分出来的各个区域，通常都会有明显的方形外缘。
如下图。（夹带私货：我非常不知道为什么微博设计团队特别爱用引导线）
<img src="https://pic3.zhimg.com/d3507423a2d7a00796c7a466b3d7ce36_b.jpg" data-rawwidth="628" data-rawheight="346" class="origin_image zh-lightbox-thumb" width="628" data-original="https://pic3.zhimg.com/d3507423a2d7a00796c7a466b3d7ce36_r.jpg">
一眼望去方形套方形、方形挨方形时，如果单独出现一个圆形区域，能瞬间吸引视觉焦点，高大上。
在空间页的场景里，值得/应该这么做的，主人的头像算一个。如下图。
<img src="https://pic1.zhimg.com/02eae796880d67094586f2144ab79748_b.jpg" data-rawwidth="619" data-rawheight="333" class="origin_image zh-lightbox-thumb" width="619" data-original="https://pic1.zhimg.com/02eae796880d67094586f2144ab79748_r.jpg">
但是如果有方又有圆，一大波小圆头像正在袭来，麻烦也跟着来了：
<img src="https://pic4.zhimg.com/2c44d4a2a383725bdda568ca74b5cafb_b.jpg" data-rawwidth="620" data-rawheight="346" class="origin_image zh-lightbox-thumb" width="620" data-original="https://pic4.zhimg.com/2c44d4a2a383725bdda568ca74b5cafb_r.jpg">
上图严格对齐了栅格＋等高－－－这么无趣的手法都用了！页面仍然乱。
如果是瀑布流，处女座还能活么。

移动端的屏幕小。批量显示用户时，如果用小圆头像，可以考虑弱化方形外廓，避免视觉冲突：
<img src="https://pic1.zhimg.com/6f2fff66342f2e0311df4333abbf755c_b.jpg" data-rawwidth="314" data-rawheight="473" class="content_image" width="314">
一个不恰当使用圆头像的例子：
1、页面中明显的方形外廓和明显的圆形外廓都出现，此种场景下头像并非需要强调的核心元素。
2、这个页面还有其他不妥之处：有多种字体、字号、字色，有不同风格的 ICON，图片下的ICON字体和底导航处的ICON字体不一样。

<img src="https://pic3.zhimg.com/03840d7e48a60cddfc2b02cd31bde646_b.jpg" data-rawwidth="313" data-rawheight="475" class="content_image" width="313">

编辑于 2014-12-24

15 条评论

感谢
分享

收藏

•

没有帮助

•
举报

•

作者保留权利

收起

25
赞同

反对，不会显示你的姓名

Ataraxia

，再就业中的交互设计师，求推介

25 人赞同

对于圆形头像和方形头像的差别，我是这样想的：方形头像和圆形头像的识别效率哪种更高？1.头像的目标是做什么用的？我的理解：头像是做用户识别的。识别不同用户的方法有很多：用户名、用户ID、头像、邮箱、手机等等。因为人脑对图像的接收处理能力比文字强…

显示全部

对于圆形头像和方形头像的差别，我是这样想的：方形头像和圆形头像的识别效率哪种更高？

1.头像的目标是做什么用的？
我的理解：头像是做用户识别的。识别不同用户的方法有很多：用户名、用户ID、头像、邮箱、手机等等。因为人脑对图像的接收处理能力比文字强很多，另外人体特征导致人脸比人体其他部分的识别效率更高，所以很多互联网在识别用户上，普遍采用了用户头像的方法。

方形头像和圆形头像的目的一样，都是做人脸识别标识用户的。人脸的特征是这样的:
<img src="https://pic2.zhimg.com/1508baaa787ad7c5234f3f2d27d2ff9d_b.jpg" data-rawwidth="900" data-rawheight="584" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic2.zhimg.com/1508baaa787ad7c5234f3f2d27d2ff9d_r.jpg"><img src="https://pic3.zhimg.com/12b17bbce33ca3fc8382d9d97b7ad3a2_b.jpg" data-rawwidth="1200" data-rawheight="1390" class="origin_image zh-lightbox-thumb" width="1200" data-original="https://pic3.zhimg.com/12b17bbce33ca3fc8382d9d97b7ad3a2_r.jpg">
2.方形和圆形的差别
方形和圆形都是场景的形状，其视觉焦点的差别是圆形的焦点很聚焦，在圆心位置。方形的焦点在九宫格四点上。
<img src="https://pic3.zhimg.com/52c7efe791da91283df0004b6462741e_b.jpg" data-rawwidth="993" data-rawheight="1000" class="origin_image zh-lightbox-thumb" width="993" data-original="https://pic3.zhimg.com/52c7efe791da91283df0004b6462741e_r.jpg"><img src="https://pic3.zhimg.com/884bf3027bf32a6e3f16b75a8afba376_b.jpg" data-rawwidth="500" data-rawheight="375" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic3.zhimg.com/884bf3027bf32a6e3f16b75a8afba376_r.jpg">
3.用户一般使用什么图片做头像
最理想的情况下，用户使用自己的真实人脸照片做头像。现实情况中，用户会使用各种各样的图片做头像。在电脑上拍摄照片不容易，QQ就提供了很多张不同的图片，如风景照，静物照，卡通人物头像等默认头像给用户选择。在智能手机兴起后，用户拍摄照片非常容易了，但出于隐私等各种原因的考虑，很多人还是不会采用标准的真实人脸照片做头像。
另外如果用户是企业/公司用户，一般使用企业/公司的logo做头像。

4.方形头像和圆形头像的识别效率哪种更高？
A.如果用户采用标准的人脸照片做头像，圆形的头像可以让用户忽略掉照片的背景（花花草草什么的），更快地聚焦到人脸。这种时候，我倾向圆形头像的识别用户的效率更高。但也不绝对，识别两个双胞胎的头像的某个位置的小差别，方形的聚焦点位置多的优势会让它更容易识别出来。
B.如果用户不是采用标准的人脸照片做头像，那么两者的差别就不大了，因为这时是看照片的整体而不是着眼于脸部了。
C.但如果用户是企业，方形的头像就更好适配。因为很多企业的logo是矩形的，使用圆形头像不一定能容纳地下，或者搭配一起不协调。

5.圆形的轮廓可以更好地暗示用户这是头像
方形的图片在web上很常见，商品图是方形的，各种社交网站的缩略图是方形的...方形的图片不能让用户马上联想到头像。而圆形的图片是不常见的，拍出来的照片是矩形的，圆形的图片在web上的应用主要是头像和图标。圆形的图片可以更好地让用户理解这是头像。

另外用户在上传个人照片时，如果使用圆形的轮廓头像，可以让用户更倾向于使用人脸的照片做头像。因为很多需要看整体照片的风景照不适合于聚焦某点上的展示方式。

6.测试
上面的都是个人的想法，也许不准确，很难说服所有人。我想可以通过做一个简单的测试来了解方形头像和圆形头像哪种识别用户的效率更高。
A.准备500个用户的信息（头像，昵称和签名），尽量模拟头像展示的常见形态。
B.从中随机找出30个用户，请其信息聚合到另外一个页面上，打印下来。
C.另外请20个人过来，给他们看打印下来的30个人的信息，让其从这500个用户找出这30人，统计时间，看看哪个效率更高一点。
<img src="https://pic2.zhimg.com/573dd835419faf2583feaceaa78b5065_b.jpg" data-rawwidth="1345" data-rawheight="718" class="origin_image zh-lightbox-thumb" width="1345" data-original="https://pic2.zhimg.com/573dd835419faf2583feaceaa78b5065_r.jpg"><img src="https://pic2.zhimg.com/d033c83ccb12c87f0a26faf1f595a52d_b.jpg" data-rawwidth="1345" data-rawheight="718" class="origin_image zh-lightbox-thumb" width="1345" data-original="https://pic2.zhimg.com/d033c83ccb12c87f0a26faf1f595a52d_r.jpg">

发布于 2014-11-02

3 条评论

感谢
分享

收藏

•

没有帮助

•
举报

•

作者保留权利

收起

YONG

，to think and to do

2 人赞同

学习了前面的答题者从各个角度的分析思路。现提供一个感性一点的短答案：人的头部更靠近圆形，使用圆形头像更有利于突出“人物“的头部特征；毕竟人形不是方形的；圆形其实就是一个点，比方形更容易成为视觉聚焦凝聚点；方形头像中一般是人（或者主角）与环…

显示全部

学习了前面的答题者从各个角度的分析思路。现提供一个感性一点的短答案：

人的头部更靠近圆形，使用圆形头像更有利于突出“人物“的头部特征；毕竟人形不是方形的；
圆形其实就是一个点，比方形更容易成为视觉聚焦凝聚点；
方形头像中一般是人（或者主角）与环境的组合，交代的是人物和环境的关系；
总结：虽然圆形头像对头像的突出感会更强；但这并不是选择头像形状时唯一要考虑的因素。其它需要考虑的因素有：

与页面其它元素的和谐；（如上面有人提到的方形和圆形的冲突，本质就是页面上焦点太多容易显得杂乱）
圆形图片的处理和网络前端展示成本：毕竟能通过拍照获得的以及各种网络图片都是方形的；
……
两种形状的头像各有特点，具体选择哪一种要综合考虑上述因素，以及头像需要表达的意思。
不过话说回来，有人注意过手机客户端上设置圆形头像时的交互体验了吗？至少我感觉，交互细节很不自然。
如何制作圆形头像？

选择图片：从相册选择／手机拍照
将选中图片截取成系统支持的大小：通常是拖动矩形截取框，在选中的大图中选择需要截取为头像的区域，此过程中考虑周到一点的应用会支持缩放图片，让矩形截取框能包含更多的东西，但是一般的app并没这么周到；

确定矩形截取框位置后，点击确定，系统自动将选中的矩形区域处理成圆形头像；
发现问题了吗？截取头像的过程中，你一直看到的是矩形图片，但是最终的头像却需要在一个黑盒子中处理成一个未知的圆形，根本无法所见即所得。一般情况下，用这种方式制作的圆形头像都有点偏离中心，对强迫症和处女座很不友好好嘛？从用户制作头像的角度来说，方形头像更易制作，毕竟我们拍得照片都是方形的，毕竟所见即所得。
所以不要再盲目跟风用什么“时髦”的圆头像了，设计师OR产品经理除了考虑页面展示和谐度，更需要考虑与圆头像相关联操作如制作、预览头像等的体验。

温馨提示：答案为网友推荐，仅供参考

当前网址：https://verywind.cn/ee/vjfxry72r7vjv23efe7.html