网页交互设计中头像外框形状的识读性研究——以圆形、方形、圆角矩形为例

网页交互设计中头像外框形状的识读性研究——以圆形、方形、圆角矩形为例

本文从网络收集而来，上传到平台为了帮到更多的人，如果您需要使用本文档，请点击下载按钮下载本文档（有偿下载），另外祝您生活愉快，工作顺利，万事如意！

我们处在一个图像生成、流通和消耗急速膨胀的时代.相较于文字人们更爱看图片.文字是逻辑的理性的，需要集中注意力，而图片是直觉的情感的，识读接受的反应会更快. 大多数互联网社交场景中，图片在信息及情感传达速度上优于文字.头像作为互联网交互界面中用于身份信息识别的普遍方式，用户在进行身份识别时，脸部特征识别明显优于身体其他部位;在图像信息和文字信息混杂的情况下人脑率先甄别出图像信息，所以图像识别凭借最便于快速识别和记忆的优势从用户名、账号、邮箱等文字识别方式中突出重围.

1 圆形、矩形、圆角矩形外框在互联网界面设计中的应用及特点

随着人们审美意识的提高，用户界面的设计成为隐形的竞争力受到互联网公司的重视.头像作为交互界面中最重要的构成部分，牵一发而动全身.因此头像形状的选择，并不能为所欲为.它最先要考虑的是技术

上是否能够满足设计的需求，再进行对不同形状之于界面的用户识读体验、信息可达、审美需求等多要素之间关系的综合考量，作出适合于各界面内容和形式的头像外框形状的选择.随着Html5 和Css3 技术的越趋成熟，圆形、圆角图形的处理变得较为容易.圆形、圆角矩形头像在Path、新浪微博、、知乎等界面陆续出现，一时成为一种潮流，同矩形头像一起分别占据着各大交互界面中的重要位置. 截止目前，网页版头像是圆角矩形、手机界面则为圆形.微博网页和手机界面都是圆形.微信移动端朋友圈界面头像为方形，搜索界面则是圆角矩形….....这样看来：不同的软件;相同软件不同版本;甚至相同软件同个版本中的不同分页都还没有对头像轮廓形状进行统一，由此可见头像外框轮廓形状的选择是复杂的，多变的，不确定的.圆形、矩形、圆角矩形头像的外框是目前互联网主流界面中最主要、最普遍的头像形状.圆形是现实世界中最具美感的绝对对称图形.就圆形的表象特点而言，圆周由一条没有起讫的闭合曲线构成，周边没有节点和棱角，给人以灵动、匀称、平和、优美的直观感受.圆形头像除了带给人感性的外貌认识，在形式上向那些设计感十足的APP 靠拢，从而获得形式上较为统一的观感.

与圆形不同的是，由四条直线构成的矩形棱角分

明，相邻两边互相垂直，对角线互相平分，既轴对称又互相对称.与圆形相比矩形给人以沉静、理性、稳重、规则、甚至一板一眼的外貌认识.圆角矩形头像的出现基于苹果公司以创新为主，实用为辅的图标设计的延伸，现在主流浏览器对css3 的图片圆角属性border-radius支持加大.圆角的弧度几乎都严格按照程式美的法则进行设计.在大体形式上与矩形差别不大，但圆角的设计刚好弱化了矩形给人带来的硬朗气息，同时又继承了矩形稳重、理性的特质，交织圆角散发的柔和之美成为一些互联网界面中头像外框形状的选择.在这些差别之外不难发现一条规律，圆形、矩形以及圆角矩形都符合对称与均衡的形式美法则.形状作为视觉式样的一种并不能单单是为它自身而存在的，总是要再现某种超出它自身存在之外的某种东西.也就是说，所有的形状都应该是某种内容的形式.不同国家和民族的语境不同，内容并不约定俗成.放到中国的语境下：古代有一成语叫外圆内方，比喻人表面随和，内心严正.当我们把同一张头像照片分别裁切成圆形头像、矩形头像、圆角矩形头像.精神气质会在头像轮廓形状的故有属性烘托下产生微妙的变化，圆形头像更随和，而矩形则更正气凛然.圆角矩形既不过于严正又不过于灵动趋于中和. 这些都是个人审美取向的问

题，不能量化.

不同的形状有着不同的视觉凝聚力.圆形的视觉焦点在圆心位置.用户界面中的圆形外框轮廓的镜头聚焦感能够更好的暗示用户这是头像，并让用户倾向于选择能够真实反映人脸的照片，圆形头像作为一个醒目的视觉焦点让识别用户的效率变得更高，聚焦内容的效果更好.矩形、圆角矩形的视觉焦点主要处于九宫格相交的四个点上，矩形的聚焦点位置多，更易识别需要细分的图片信息.圆形、矩形、圆角矩形的头像轮廓对非人像头像照片使用影响差别不大.

2 头像外框轮廓的形状识读与界面布局的关系

在我们使用的电子产品如电脑、手机里的屏幕、浏览器的窗口以及网页上划分出来的各个区域的外框，多采用边缘为矩形的轮廓.自然头像所应用的显示区对应得边缘外框即为矩形的，各个内容的组织方式一般也为条条框框得列表样式，因此用户在一个界面中常见各种显性或者隐性的矩形式样，矩形的头像外框放置其中观感自是和谐舒适但也不定会产生乏味的感知倾向.现在有些网站的设计如知乎，是将网页划分出来的区域轮廓设计成圆角矩形的外缘，配合圆角矩形的头像，整体效果透气灵动不呆板.考虑到排版的问题，界面轮廓的程式在很长一段时间是固定在矩形的

外缘形状之下了.

从设计心理学的角度出发，交互界面中出现的大量的形，激发着用户的心理观感.一方面来自形状要素本身的特性，更为重要的还是来自形状要素组合时的构成、尺度、比例，即结构内附的情感.用户对于界面中“结构”内附的情感的变化主要来自两股相互作用的应力，一种应力促使形体趋于“良好”，如简洁率、整体律等;另一种应力趋向于打破这种“良好”.这互相作用的两种力，一起作用于用户对界面形状的“结构”内附情感的体验.完全符合界面矩形形则的矩形头像轮廓，用户会本能地产生平静和愉悦的情绪，但同时也会让人觉得平淡和乏味. 圆角矩形从一定意义上缓解了这种平淡和乏味，界面变得较为灵动，具体审美效果总还是没有波澜的平静中.圆形头像轮廓的出现打破了界面惯有的方形结构，较以往方形套方形，方形挨着方形的交互界面多了动感和张力，能够增强的阅读乐趣和吸引用户关注头像信息.

3 头像外框轮廓形状的信息传递和识读性

不管是圆形头像，还是矩形(圆角矩形)头像，归根结底都是作为头像而产生的.用户使用头像功能的意义和目的主要有两点：第一，希望图片内容作为一种信息能够传达出该账号主人的身份;第二，通过头像

彰显自己的个性.那么从用户制作头像，到用户接收界面的头像信息存在两个信息识读的过程.第一，呈现的图像照片能够传递并满足用户的心理预期.第二，用户接受自己及他人头像信息的识读过程.

用户对上传的头像能够表达个人喜好，彰显个人魅力有着心理预期.从选择照片做成图像的过程就是用户内心将自己要表达的内容诉之于物的信息传递过程.不同头像轮廓形状有着不同的信息传递能力.在分析图形基本特征中，提到的圆形与矩形内部结构存在不同数量的视觉焦点.而这些视觉焦点在界面头像的裁切和制作过程中影响着内容信息的识读. 歌德曾说过：“显现与分离是同义词”.就目前所用的网络头像，图片尺寸已很小，那么分离掉图片一些可能烦恼地背景，又不破坏整体，又能够形成视觉聚焦，使用正圆形的头像轮廓更合理也能更好的显现有用信息. 当头像缩小得比较小时，如群列表的小头像，圆形头像的辨识度和效果会更好一点.非人像的照片或其他传统图标都是基于矩形的，从用户制作头像的角度来说，矩形头像更易制作，所见即是所得.同一张照片裁成圆形，图片信息损失较大，头像信息识读的准确性便会降低，与一些用户的预期产生偏离.

界面中当圆形为头像，方形为图片，用形状区分