劉夢(mèng)嬌

（揚(yáng)州大學(xué)　美術(shù)與設(shè)計(jì)學(xué)院，江蘇　揚(yáng)州　225000）

網(wǎng)頁(yè)交互設(shè)計(jì)中頭像外框形狀的識(shí)讀性研究
——以圓形、方形、圓角矩形為例

劉夢(mèng)嬌

（揚(yáng)州大學(xué)美術(shù)與設(shè)計(jì)學(xué)院，江蘇揚(yáng)州225000）

網(wǎng)頁(yè)交互設(shè)計(jì)多用頭像作為識(shí)別用戶信息的媒介.隨著Html5和Css3技術(shù)的成熟，圓形、圓角圖形的處理變得較為容易.除了傳統(tǒng)的矩形頭像，圓形、圓角矩形的頭像陸續(xù)出現(xiàn)在各個(gè)擁有用戶體系的互聯(lián)網(wǎng)產(chǎn)品中，引發(fā)著不同的識(shí)讀體驗(yàn).這些不同歸結(jié)于形狀本身的形式語(yǔ)言特點(diǎn)、不同形狀的聚焦能力、信息可達(dá)性以及界面布局等多個(gè)方面，本文對(duì)此進(jìn)行了分析探討.

交互界面；頭像；設(shè)計(jì)心理學(xué)；識(shí)讀性；界面布局

引言

我們處在一個(gè)圖像生成、流通和消耗急速膨脹的時(shí)代.相較于文字人們更愛(ài)看圖片.文字是邏輯的理性的，需要集中注意力，而圖片是直覺(jué)的情感的，識(shí)讀接受的反應(yīng)會(huì)更快.大多數(shù)互聯(lián)網(wǎng)社交場(chǎng)景中，圖片在信息及情感傳達(dá)速度上優(yōu)于文字.頭像作為互聯(lián)網(wǎng)交互界面中用于身份信息識(shí)別的普遍方式，用戶在進(jìn)行身份識(shí)別時(shí)，臉部特征識(shí)別明顯優(yōu)于身體其他部位；在圖像信息和文字信息混雜的情況下人腦率先甄別出圖像信息，所以圖像識(shí)別憑借最便于快速識(shí)別和記憶的優(yōu)勢(shì)從用戶名、賬號(hào)、郵箱等文字識(shí)別方式中突出重圍.

1　圓形、矩形、圓角矩形外框在互聯(lián)網(wǎng)界面設(shè)計(jì)中的應(yīng)用及特點(diǎn)

隨著人們審美意識(shí)的提高，用戶界面的設(shè)計(jì)成為隱形的競(jìng)爭(zhēng)力受到互聯(lián)網(wǎng)公司的重視.頭像作為交互界面中最重要的構(gòu)成部分，牽一發(fā)而動(dòng)全身.因此頭像形狀的選擇，并不能為所欲為.它最先要考慮的是技術(shù)上是否能夠滿足設(shè)計(jì)的需求，再進(jìn)行對(duì)不同形狀之于界面的用戶識(shí)讀體驗(yàn)、信息可達(dá)、審美需求等多要素之間關(guān)系的綜合考量，作出適合于各界面內(nèi)容和形式的頭像外框形狀的選擇.隨著Html5和Css3技術(shù)的越趨成熟，圓形、圓角圖形的處理變得較為容易.圓形、圓角矩形頭像在Path、新浪微博、QQ、知乎等界面陸續(xù)出現(xiàn)，一時(shí)成為一種潮流，同矩形頭像一起分別占據(jù)著各大交互界面中的重要位置.截止目前，QQ網(wǎng)頁(yè)版頭像是圓角矩形、手機(jī)界面則為圓形.微博網(wǎng)頁(yè)和手機(jī)界面都是圓形.微信移動(dòng)端朋友圈界面頭像為方形，搜索界面則是圓角矩形….....這樣看來(lái)：不同的軟件；相同軟件不同版本；甚至相同軟件同個(gè)版本中的不同分頁(yè)都還沒(méi)有對(duì)頭像輪廓形狀進(jìn)行統(tǒng)一，由此可見(jiàn)頭像外框輪廓形狀的選擇是復(fù)雜的，多變的，不確定的.

圓形、矩形、圓角矩形頭像的外框是目前互聯(lián)網(wǎng)主流界面中最主要、最普遍的頭像形狀.圓形是現(xiàn)實(shí)世界中最具美感的絕對(duì)對(duì)稱圖形.就圓形的表象特點(diǎn)而言，圓周由一條沒(méi)有起訖的閉合曲線構(gòu)成，周邊沒(méi)有節(jié)點(diǎn)和棱角，給人以靈動(dòng)、勻稱、平和、優(yōu)美的直觀感受.圓形頭像除了帶給人感性的外貌認(rèn)識(shí)，在形式上向那些設(shè)計(jì)感十足的APP靠攏，從而獲得形式上較為統(tǒng)一的觀感.與圓形不同的是，由四條直線構(gòu)成的矩形棱角分明，相鄰兩邊互相垂直，對(duì)角線互相平分，既軸對(duì)稱又互相對(duì)稱.與圓形相比矩形給人以沉靜、理性、穩(wěn)重、規(guī)則、甚至一板一眼的外貌認(rèn)識(shí).圓角矩形頭像的出現(xiàn)基于蘋果公司以創(chuàng)新為主，實(shí)用為輔的圖標(biāo)設(shè)計(jì)的延伸，現(xiàn)在主流瀏覽器對(duì)css3的圖片圓角屬性border-radius支持加大.圓角的弧度幾乎都嚴(yán)格按照程式美的法則進(jìn)行設(shè)計(jì).在大體形式上與矩形差別不大，但圓角的設(shè)計(jì)剛好弱化了矩形給人帶來(lái)的硬朗氣息，同時(shí)又繼承了矩形穩(wěn)重、理性的特質(zhì)，交織圓角散發(fā)的柔和之美成為一些互聯(lián)網(wǎng)界面中頭像外框形狀的選擇.在這些差別之外不難發(fā)現(xiàn)一條規(guī)律，圓形、矩形以及圓角矩形都符合對(duì)稱與均衡的形式美法則.

形狀作為視覺(jué)式樣的一種并不能單單是為它自身而存在的，總是要再現(xiàn)某種超出它自身存在之外的某種東西.也就是說(shuō)，所有的形狀都應(yīng)該是某種內(nèi)容的形式.不同國(guó)家和民族的語(yǔ)境不同，內(nèi)容并不約定俗成.放到中國(guó)的語(yǔ)境下：古代有一成語(yǔ)叫外圓內(nèi)方，比喻人表面隨和，內(nèi)心嚴(yán)正.當(dāng)我們把同一張頭像照片分別裁切成圓形頭像、矩形頭像、圓角矩形頭像.精神氣質(zhì)會(huì)在頭像輪廓形狀的故有屬性烘托下產(chǎn)生微妙的變化，圓形頭像更隨和，而矩形則更正氣凜然.圓角矩形既不過(guò)于嚴(yán)正又不過(guò)于靈動(dòng)趨于中和.這些都是個(gè)人審美取向的問(wèn)題，不能量化.

不同的形狀有著不同的視覺(jué)凝聚力.圓形的視覺(jué)焦點(diǎn)在圓心位置.用戶界面中的圓形外框輪廓的鏡頭聚焦感能夠更好的暗示用戶這是頭像，并讓用戶傾向于選擇能夠真實(shí)反映人臉的照片，圓形頭像作為一個(gè)醒目的視覺(jué)焦點(diǎn)讓識(shí)別用戶的效率變得更高，聚焦內(nèi)容的效果更好.矩形、圓角矩形的視覺(jué)焦點(diǎn)主要處于九宮格相交的四個(gè)點(diǎn)上，矩形的聚焦點(diǎn)位置多，更易識(shí)別需要細(xì)分的圖片信息.圓形、矩形、圓角矩形的頭像輪廓對(duì)非人像頭像照片使用影響差別不大.

2　頭像外框輪廓的形狀識(shí)讀與界面布局的關(guān)系

在我們使用的電子產(chǎn)品如電腦、手機(jī)里的屏幕、瀏覽器的窗口以及網(wǎng)頁(yè)上劃分出來(lái)的各個(gè)區(qū)域的外框，多采用邊緣為矩形的輪廓.自然頭像所應(yīng)用的顯示區(qū)對(duì)應(yīng)得邊緣外框即為矩形的，各個(gè)內(nèi)容的組織方式一般也為條條框框得列表樣式，因此用戶在一個(gè)界面中常見(jiàn)各種顯性或者隱性的矩形式樣，矩形的頭像外框放置其中觀感自是和諧舒適但也不定會(huì)產(chǎn)生乏味的感知傾向.現(xiàn)在有些網(wǎng)站的設(shè)計(jì)如知乎，是將網(wǎng)頁(yè)劃分出來(lái)的區(qū)域輪廓設(shè)計(jì)成圓角矩形的外緣，配合圓角矩形的頭像，整體效果透氣靈動(dòng)不呆板.考慮到排版的問(wèn)題，界面輪廓的程式在很長(zhǎng)一段時(shí)間是固定在矩形的外緣形狀之下了.

從設(shè)計(jì)心理學(xué)的角度出發(fā)，交互界面中出現(xiàn)的大量的形，激發(fā)著用戶的心理觀感.一方面來(lái)自形狀要素本身的特性，更為重要的還是來(lái)自形狀要素組合時(shí)的構(gòu)成、尺度、比例，即結(jié)構(gòu)內(nèi)附的情感.用戶對(duì)于界面中“結(jié)構(gòu)”內(nèi)附的情感的變化主要來(lái)自兩股相互作用的應(yīng)力，一種應(yīng)力促使形體趨于“良好”，如簡(jiǎn)潔率、整體律等；另一種應(yīng)力趨向于打破這種“良好”.這互相作用的兩種力，一起作用于用戶對(duì)界面形狀的“結(jié)構(gòu)”內(nèi)附情感的體驗(yàn).完全符合界面矩形形則的矩形頭像輪廓，用戶會(huì)本能地產(chǎn)生平靜和愉悅的情緒，但同時(shí)也會(huì)讓人覺(jué)得平淡和乏味.圓角矩形從一定意義上緩解了這種平淡和乏味，界面變得較為靈動(dòng)，具體審美效果總還是沒(méi)有波瀾的平靜中.圓形頭像輪廓的出現(xiàn)打破了界面慣有的方形結(jié)構(gòu)，較以往方形套方形，方形挨著方形的交互界面多了動(dòng)感和張力，能夠增強(qiáng)的閱讀樂(lè)趣和吸引用戶關(guān)注頭像信息.

3　頭像外框輪廓形狀的信息傳遞和識(shí)讀性

不管是圓形頭像，還是矩形（圓角矩形）頭像，歸根結(jié)底都是作為頭像而產(chǎn)生的.用戶使用頭像功能的意義和目的主要有兩點(diǎn)：第一，希望圖片內(nèi)容作為一種信息能夠傳達(dá)出該賬號(hào)主人的身份；第二，通過(guò)頭像彰顯自己的個(gè)性.那么從用戶制作頭像，到用戶接收界面的頭像信息存在兩個(gè)信息識(shí)讀的過(guò)程.第一，呈現(xiàn)的圖像照片能夠傳遞并滿足用戶的心理預(yù)期.第二，用戶接受自己及他人頭像信息的識(shí)讀過(guò)程.

用戶對(duì)上傳的頭像能夠表達(dá)個(gè)人喜好，彰顯個(gè)人魅力有著心理預(yù)期.從選擇照片做成圖像的過(guò)程就是用戶內(nèi)心將自己要表達(dá)的內(nèi)容訴之于物的信息傳遞過(guò)程.不同頭像輪廓形狀有著不同的信息傳遞能力.在分析圖形基本特征中，提到的圓形與矩形內(nèi)部結(jié)構(gòu)存在不同數(shù)量的視覺(jué)焦點(diǎn).而這些視覺(jué)焦點(diǎn)在界面頭像的裁切和制作過(guò)程中影響著內(nèi)容信息的識(shí)讀.歌德曾說(shuō)過(guò)：“顯現(xiàn)與分離是同義詞”.就目前所用的網(wǎng)絡(luò)頭像，圖片尺寸已很小，那么分離掉圖片一些可能煩惱地背景，又不破壞整體，又能夠形成視覺(jué)聚焦，使用正圓形的頭像輪廓更合理也能更好的顯現(xiàn)有用信息.當(dāng)頭像縮小得比較小時(shí)，如QQ群列表的小頭像，圓形頭像的辨識(shí)度和效果會(huì)更好一點(diǎn).非人像的照片或其他傳統(tǒng)圖標(biāo)都是基于矩形的，從用戶制作頭像的角度來(lái)說(shuō)，矩形頭像更易制作，所見(jiàn)即是所得.同一張照片裁成圓形，圖片信息損失較大，頭像信息識(shí)讀的準(zhǔn)確性便會(huì)降低，與一些用戶的預(yù)期產(chǎn)生偏離.

界面中當(dāng)圓形為頭像，方形為圖片，用形狀區(qū)分人和物，能夠促使用戶形成習(xí)慣并快速區(qū)分，這也是交互設(shè)計(jì)的原則之一，即培養(yǎng)用戶使用情景的思維方式做設(shè)計(jì).當(dāng)矩形為頭像，矩形為圖片，界面沒(méi)有形狀的區(qū)別，用戶在搜集圖像信息的過(guò)程就會(huì)有所干擾，不利于頭像信息的快速識(shí)讀.

4　頭像外框形狀在界面設(shè)計(jì)中存在的問(wèn)題與不足

矩形、圓角矩形頭像最大的問(wèn)題就是界面中大量矩形顯示區(qū)造成的審美的疲勞，因?yàn)槲覀兩钪信臄z的照片都是矩形，所以矩形的圖片不能讓人馬上想到頭像.圓形頭像是一張殘缺的圖片，幾乎沒(méi)有構(gòu)圖可言，圓形也要比方形損失更多信息和細(xì)節(jié)，因?yàn)槲覀兤綍r(shí)拍攝和使用的照片多為矩形，將矩形照片進(jìn)行裁切，必然要損失掉頭像以外的信息.而且會(huì)存在有很多排版和對(duì)齊的問(wèn)題.特別是當(dāng)界面出現(xiàn)兩個(gè)以上的圓形頭像，圓形不可能與傳統(tǒng)的方形結(jié)構(gòu)平行，界面會(huì)出現(xiàn)多個(gè)焦點(diǎn)，一旦界面內(nèi)容較多，界面觀感雜亂，識(shí)讀效果變差.圓形頭像設(shè)計(jì)首要的對(duì)界面的要求就是足夠簡(jiǎn)潔，以減弱整體突兀感，這也是極簡(jiǎn)趨勢(shì)的影響之一.在用戶截取頭像的過(guò)程中，看到的是矩形圖片，但是最終的頭像卻需要在一個(gè)黑盒子中處理成一個(gè)未知的圖形，所見(jiàn)并非所得.一般情況下，用這種方式制作的圓形頭像都有點(diǎn)偏離中心，實(shí)在談不上什么構(gòu)圖可言.當(dāng)用戶頭像中有較大的矩形元素時(shí)，以圓形顯示時(shí)會(huì)產(chǎn)生比較明顯的顯示問(wèn)題.這意味著這些用戶不得不更改自己的頭像.這實(shí)在是很糟糕的體驗(yàn).尤其是當(dāng)你需要更改的頭像是一個(gè)既定企業(yè)或組織的LOGO時(shí).隨著智能手機(jī)的越來(lái)越普及，人們拍攝照片的門檻越來(lái)越低，越來(lái)越多的用戶使用自拍照片作為頭像，拍攝質(zhì)量和水平參差不齊，這時(shí)候用這些照片制作方形頭像，人物不但不被突出，反而弱化了.雖然智能手機(jī)屏幕越來(lái)越大，但是當(dāng)頭像集體在界面中展示的時(shí)候，每個(gè)頭像依然較小.移動(dòng)端的屏幕小，批量顯示用戶時(shí)，如果用圓形頭像的話，就要考慮弱化方形外輪廓，避免視覺(jué)沖突.

結(jié)語(yǔ)

圓形的頭像能夠配合界面的設(shè)計(jì)提升頁(yè)面的優(yōu)雅和親和，但以個(gè)人審美喜好為主導(dǎo)是無(wú)法量化的.矩形的組織方式相對(duì)傳統(tǒng)也最節(jié)省控件，圓角矩形以創(chuàng)新作為支點(diǎn)在圓形與矩形中進(jìn)行了折中.從人類自身的感知角度出發(fā)，人類對(duì)于完美形狀的追求和認(rèn)知并不永恒.破壞完美形狀的需要時(shí)時(shí)刻刻出現(xiàn)并起作用，人類需要這種突破和刺激.所以人類設(shè)計(jì)文明總是伴隨著：“方久必圓，圓久必方”的態(tài)勢(shì).上世紀(jì)70年代，可口可樂(lè)將原來(lái)的圓形的商標(biāo)標(biāo)志換成了方形，在當(dāng)時(shí)一反潮流的舉動(dòng)，引起了全世界的轟動(dòng)和模仿.圓形標(biāo)志瞬間成為保守視覺(jué)形象的代表.再看今天，一時(shí)之間圓形頭像成為一種潮流，又一時(shí)圓角矩形成為一種風(fēng)尚,在未來(lái)技術(shù)條件成熟的情況下，只要處理好與排版的關(guān)系，正多邊形也不失為一種選擇.無(wú)論未來(lái)界面頭像被設(shè)計(jì)成哪一種形狀，基本程式不會(huì)變.比如頭像形狀本身的形式語(yǔ)言大多會(huì)遵循對(duì)稱均衡的形式美法則，搭配界面布局追求舒適、和諧與整潔，能對(duì)頭像信息做出快速識(shí)讀.

〔1〕魯?shù)婪颉ぐ⒍骱Ｄ?藤守堯，朱疆源譯.藝術(shù)與視知覺(jué)［M］.重慶：重慶人民出版社，2001.

〔2〕王受之.世界現(xiàn)代設(shè)計(jì)史［M］.北京：中國(guó)青年出版社，1999.

〔3〕吳曉璐.設(shè)計(jì)心理學(xué)在圖形中的應(yīng)用研究［D］.北京印刷學(xué)院，2007.

〔4〕陳旸，覃征，胡浩，宋銘越.基于快速區(qū)域劃分的多焦點(diǎn)圖像融合方法［J］.清華大學(xué)學(xué)報(bào)（自然科學(xué)版），2010，10.

J06；TP39

A

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

2016-05-13