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

我们处在一个图像生成、流通和消耗急速膨胀的时代.相较于文字人们更爱看图 片.文字是逻辑的理性的，需要集中注意力，而图片是直觉的情感的，识读接受 的反应会更快.大多数互联网社交场景中，图片在信息及情感传达速度上优于文 字.头像作为互联网交互界面中用于身份信息识别的普遍方式，用户在进行身份 识别时，脸部特征识别明显优于身体其他部位;在图像信息和文字信息混杂的情 况下人脑率先甄S咄图像信息，所以图像识别凭借最便于快速识别和记忆的优势 从用户名、账号、邮箱等文字识别方式中突出重围. 1圆形、矩形、圆角矩形外框在互联网界面设计中的应用及特点 随着人们审美意识的提高，用户界面的设计成为隐形的竞争力受到互联网公 司的重视.头像作为交互界面中最重要的构成部分，牵一发而动全身.因此头像形 状的选择，并不能为所欲为.它最先要考虑的是技术上是否能够满足设计的需求， 再进行对不同形状之于界面的用户识读体验、信息可达、审美需求等多要素之间 关系的综合考量，作出适合于各界面内容和形式的头像外框形状的选择.随着 5和Css3技术的越趋成熟，圆形、圆角图形的处理变得较为容易.圆形、 圆角矩形头像在Path、新浪微博、QQ.知乎等界面陆续出现，一时成为一种潮 流，同矩形头像一起分别占据着各大交互界面中的重要位置.截止目前，QQ网 页版头像是圆角矩形、手机界面则为圆形.微博网页和手机界面都是圆形.微信移 动端朋友圈界面头像为方形，搜索界面则是圆角矩形........这样看来：不同的软件; 相同软件不同版本;甚至相同软件同个版本中的不同分页都还没有对头像轮廓形 状进行统一，由此可见头像外框轮廓形状的选择是复杂的，多变的，不确定的. 圆形、矩形、圆角矩形头像的外框是目前互联网主流界面中最主要、最普遍的头 像形状.圆形是现实世界中最具美感的绝对对称图形.就圆形的表象特点而言， 周由一条没有起讫的闭合曲线构成，周边没有节点和棱角，给人以灵动、匀称、 平和、优美的直观感受.圆形头像除了带给人感性的外貌认识，在形式上向那些 设计感十足的APP靠拢，从而获得形式上较为统一的观感. 与圆形不同的是，由四条直线构成的矩形棱角分明，相邻两边互相垂直，对 角线互相平分，既轴对称又互相对称.与圆形相比矩形给人以沉静、理性、稳重、 规则、甚至一板一眼的夕卜貌认识.圆角矩形头像的出现基于苹果公司以创新为主、 实用为辅的图标设计的延伸，现在主流浏览器对css3的图片圆角属性 border-radius支持加大.圆角的弧度几乎都严格按照程式美的法则进行设计.在 大体形式上与矩形差别不大，但圆角的设计刚好弱化了矩形给人带来的硬朗气 息，同时又继承了矩形稳重、理性的特质，交织圆角散发的柔和之美成为一些互 联网界面中头像外框形状的选择.在这些差别之外不难发现一条规律，圆形、矩 形以及圆角矩形都符合对称与均衡的形式美法则.形状作为视觉式样的一种并不 能单单是为它自身而存在的，总是要再现某种超出它自身存在之外的某种东西. 也就是说，所有的形状都应该是某种内容的形式.不同国家和民族的语境不同， 内容并不约定俗成.放到中国的语境下：古代有一成语叫外圆内方，比喻人表j 随和，内心严正.当我们把同一张头像照片分别裁切成圆形头像、矩形头像、圆 角矩形头像.精神气质会在头像轮廓形状的故有属性烘托下产生微妙的变化，圆 形头像更随和，而矩形则更正气凛然.圆角矩形既不过于严正又不过于灵动趋于 中和.这些都是个人审美取向的问题，不能量化. 不同的形状有着不同的视觉凝聚力.圆形的视觉焦点在圆心位置.用户界面中 的圆形外框轮廓的镜头聚焦感能够更好的暗示用户这是头像，并让用户倾向于选 择能够真实反映人脸的照片，圆形头像作为一个醒目的视觉焦点让识别用户的效 率变得更高，聚焦内容的效果更好.矩形、圆角矩形的视觉焦点主要处于九宫格 相交的四个点上，矩形的聚焦点位置多，更易识别需要细分的图片信息.圆形、 矩形、圆角矩形的头像轮廓对非人像头像照片使用影响差别不大. 2头像外框轮廓的形状识读与界面布局的关系 在我们使用的电子产品如电脑、手机里的屏幕、浏览器的窗口以及网页上划 分出来的各个区域的外框，多采用边缘为矩形的轮廓.自然头像所应用的显示区 对应得边缘外框即为矩形的，各个内容的组织方式一般也为条条框框得列表样 式，因此用户在一个界面中常见各种显性或者隐性的矩形式样，矩形的头像外框 放置其中观感自是和谐舒适但也不定会产生乏味的感知倾向.现在有些网站的设 计如知乎，是将网页划分出来的区域轮廓设计成圆角矩形的外缘，配合圆角矩形 的头像，整体效果透气灵动不呆板.考虑到排版的问题，界面轮廓的程式在很长 一段时间是固定在矩形的外缘形状之下了. 从设计心理学的角度出发，交互界面中出现的大量的形，激发着用户的心理 观感.一方面来自形状要素本身的特性