劉夢嬌

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

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

劉夢嬌

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

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

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

引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語

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

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

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

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

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

J06；TP39

A

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

2016-05-13