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

刘梦娇

（扬州大学　美术与设计学院，江苏　扬州　225000）

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

刘梦娇

（扬州大学美术与设计学院，江苏扬州225000）

网页交互设计多用头像作为识别用户信息的媒介.随着Html5和Css3技术的成熟，圆形、圆角图形的处理变得较为容易.除了传统的矩形头像，圆形、圆角矩形的头像陆续出现在各个拥有用户体系的互联网产品中，引发着不同的识读体验.这些不同归结于形状本身的形式语言特点、不同形状的聚焦能力、信息可达性以及界面布局等多个方面，本文对此进行了分析探讨.

交互界面；头像；设计心理学；识读性；界面布局

引言

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

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

随着人们审美意识的提高，用户界面的设计成为隐形的竞争力受到互联网公司的重视.头像作为交互界面中最重要的构成部分，牵一发而动全身.因此头像形状的选择，并不能为所欲为.它最先要考虑的是技术上是否能够满足设计的需求，再进行对不同形状之于界面的用户识读体验、信息可达、审美需求等多要素之间关系的综合考量，作出适合于各界面内容和形式的头像外框形状的选择.随着Html5和Css3技术的越趋成熟，圆形、圆角图形的处理变得较为容易.圆形、圆角矩形头像在Path、新浪微博、QQ、知乎等界面陆续出现，一时成为一种潮流，同矩形头像一起分别占据着各大交互界面中的重要位置.截止目前，QQ网页版头像是圆角矩形、手机界面则为圆形.微博网页和手机界面都是圆形.微信移动端朋友圈界面头像为方形，搜索界面则是圆角矩形….....这样看来：不同的软件；相同软件不同版本；甚至相同软件同个版本中的不同分页都还没有对头像轮廓形状进行统一，由此可见头像外框轮廓形状的选择是复杂的，多变的，不确定的.

圆形、矩形、圆角矩形头像的外框是目前互联网主流界面中最主要、最普遍的头像形状.圆形是现实世界中最具美感的绝对对称图形.就圆形的表象特点而言，圆周由一条没有起讫的闭合曲线构成，周边没有节点和棱角，给人以灵动、匀称、平和、优美的直观感受.圆形头像除了带给人感性的外貌认识，在形式上向那些设计感十足的APP靠拢，从而获得形式上较为统一的观感.与圆形不同的是，由四条直线构成的矩形棱角分明，相邻两边互相垂直，对角线互相平分，既轴对称又互相对称.与圆形相比矩形给人以沉静、理性、稳重、规则、甚至一板一眼的外貌认识.圆角矩形头像的出现基于苹果公司以创新为主，实用为辅的图标设计的延伸，现在主流浏览器对css3的图片圆角属性border-radius支持加大.圆角的弧度几乎都严格按照程式美的法则进行设计.在大体形式上与矩形差别不大，但圆角的设计刚好弱化了矩形给人带来的硬朗气息，同时又继承了矩形稳重、理性的特质，交织圆角散发的柔和之美成为一些互联网界面中头像外框形状的选择.在这些差别之外不难发现一条规律，圆形、矩形以及圆角矩形都符合对称与均衡的形式美法则.

形状作为视觉式样的一种并不能单单是为它自身而存在的，总是要再现某种超出它自身存在之外的某种东西.也就是说，所有的形状都应该是某种内容的形式.不同国家和民族的语境不同，内容并不约定俗成.放到中国的语境下：古代有一成语叫外圆内方，比喻人表面随和，内心严正.当我们把同一张头像照片分别裁切成圆形头像、矩形头像、圆角矩形头像.精神气质会在头像轮廓形状的故有属性烘托下产生微妙的变化，圆形头像更随和，而矩形则更正气凛然.圆角矩形既不过于严正又不过于灵动趋于中和.这些都是个人审美取向的问题，不能量化.

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

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

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

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

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

不管是圆形头像，还是矩形（圆角矩形）头像，归根结底都是作为头像而产生的.用户使用头像功能的意义和目的主要有两点：第一，希望图片内容作为一种信息能够传达出该账号主人的身份；第二，通过头像彰显自己的个性.那么从用户制作头像，到用户接收界面的头像信息存在两个信息识读的过程.第一，呈现的图像照片能够传递并满足用户的心理预期.第二，用户接受自己及他人头像信息的识读过程.

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

界面中当圆形为头像，方形为图片，用形状区分人和物，能够促使用户形成习惯并快速区分，这也是交互设计的原则之一，即培养用户使用情景的思维方式做设计.当矩形为头像，矩形为图片，界面没有形状的区别，用户在搜集图像信息的过程就会有所干扰，不利于头像信息的快速识读.

4　头像外框形状在界面设计中存在的问题与不足

矩形、圆角矩形头像最大的问题就是界面中大量矩形显示区造成的审美的疲劳，因为我们生活中拍摄的照片都是矩形，所以矩形的图片不能让人马上想到头像.圆形头像是一张残缺的图片，几乎没有构图可言，圆形也要比方形损失更多信息和细节，因为我们平时拍摄和使用的照片多为矩形，将矩形照片进行裁切，必然要损失掉头像以外的信息.而且会存在有很多排版和对齐的问题.特别是当界面出现两个以上的圆形头像，圆形不可能与传统的方形结构平行，界面会出现多个焦点，一旦界面内容较多，界面观感杂乱，识读效果变差.圆形头像设计首要的对界面的要求就是足够简洁，以减弱整体突兀感，这也是极简趋势的影响之一.在用户截取头像的过程中，看到的是矩形图片，但是最终的头像却需要在一个黑盒子中处理成一个未知的图形，所见并非所得.一般情况下，用这种方式制作的圆形头像都有点偏离中心，实在谈不上什么构图可言.当用户头像中有较大的矩形元素时，以圆形显示时会产生比较明显的显示问题.这意味着这些用户不得不更改自己的头像.这实在是很糟糕的体验.尤其是当你需要更改的头像是一个既定企业或组织的LOGO时.随着智能手机的越来越普及，人们拍摄照片的门槛越来越低，越来越多的用户使用自拍照片作为头像，拍摄质量和水平参差不齐，这时候用这些照片制作方形头像，人物不但不被突出，反而弱化了.虽然智能手机屏幕越来越大，但是当头像集体在界面中展示的时候，每个头像依然较小.移动端的屏幕小，批量显示用户时，如果用圆形头像的话，就要考虑弱化方形外轮廓，避免视觉冲突.

结语

圆形的头像能够配合界面的设计提升页面的优雅和亲和，但以个人审美喜好为主导是无法量化的.矩形的组织方式相对传统也最节省控件，圆角矩形以创新作为支点在圆形与矩形中进行了折中.从人类自身的感知角度出发，人类对于完美形状的追求和认知并不永恒.破坏完美形状的需要时时刻刻出现并起作用，人类需要这种突破和刺激.所以人类设计文明总是伴随著：“方久必圆，圆久必方”的态势.上世纪70年代，可口可乐将原来的圆形的商标标志换成了方形，在当时一反潮流的举动，引起了全世界的轰动和模仿.圆形标志瞬间成为保守视觉形象的代表.再看今天，一时之间圆形头像成为一种潮流，又一时圆角矩形成为一种风尚,在未来技术条件成熟的情况下，只要处理好与排版的关系，正多边形也不失为一种选择.无论未来界面头像被设计成哪一种形状，基本程式不会变.比如头像形状本身的形式语言大多会遵循对称均衡的形式美法则，搭配界面布局追求舒适、和谐与整洁，能对头像信息做出快速识读.

〔1〕鲁道夫·阿恩海姆.藤守尧，朱疆源译.艺术与视知觉［M］.重庆：重庆人民出版社，2001.

〔2〕王受之.世界现代设计史［M］.北京：中国青年出版社，1999.

〔3〕吴晓璐.设计心理学在图形中的应用研究［D］.北京印刷学院，2007.

〔4〕陈旸，覃征，胡浩，宋铭越.基于快速区域划分的多焦点图像融合方法［J］.清华大学学报（自然科学版），2010，10.

J06；TP39

A

1673-260X（2016）08-0036-03

2016-05-13