臉書大頭貼為啥改得圓圓的?UI 設計師必知的設計心理學:想有設計感用圓形,風景、食物用方形

 

【我們為什麼挑選這篇文章】

你們有發現自己的臉書頭貼被改成圓形了嗎?原本的方形哪裡不好,為什麼要改啊?設計大舌頭的這篇文章就是在講這件事,而且寫的很有趣,就算你不是界面設計師,也能輕鬆讀完這個小知識!

 

(責任編輯:謝秉芸)

 

大家有沒有覺得有越來越多的平台或 App ,喜歡使用「圓形」作為使用者的「個人頭像」形狀。該不會是近期的設計風潮?還是大部分介面設計師的愛好?或有其他特別的原因呢?大舌頭藉由歸納網路社群中專家的討論,以及問卷調查的結果分析,逐步釐清這個秘密,內容精彩不要錯過喔 ~

個人頭像的定義與發展:

隨著網路用戶族群快速增加,他們對於藉由平台與其他用戶互動的需求就越高,也因此發展出許多可互動的平台類型,例如論壇、信箱、聊天室、部落格到社群等。其中每個用戶都代表著一個獨特個體(無論是真實身份或虛擬角色),這些個體會有相對應的資訊,以及代表個體的個人頭像 。 而 個人頭像通常是具個性化(用戶覺得能代表自我)的標誌 ,大多以平面或 3D 圖像的方式呈現。

UI 上的 個人頭像英文為 Profile Picture 或 Avatar ,其中 Profile Picture 在字義上較容易理解,反倒是 Avatar,各位讀者可能會充滿問號,因為大家對 Avatar 的印象應該都是阿凡達電影(藍藍的那齣 XD)。根據 techpedia 平台上的描述,Avatar 一詞出現於 1985 年,由盧卡斯電影公司(Lucas Film)內發展線上角色扮演遊戲(Habitat)專案人員(Chip Morningstar & Joseph Romero)首先提出。此詞源自於印度教對「聖人降臨(a descent of the Supreme Being)」的描述,在英文裡有「化身(incarnation)」或「代表(manifestation)」之義。

網友對個人頭像形狀選擇的觀點:

其實,選擇何種形狀的論戰已不是新聞了,有眾多專家在相關論壇中發表意見與討論。大舌頭擷取與整理他們在 QuoraStack Exchange 平台上討論與發表的論述,並簡單的分類如下。不過,大舌頭先申明,以下內容的排序並無經過提及次數統計(僅隨機排列),且多數回應也無相關驗證或研究資料,所以大家可當成不同「觀點」參考就好。

感受與認知

  1. 方形太無趣了。
  2. 大腦可較輕易的處理圓形內的訊息, 減少認知的壓力
  3. 相較於方形,圓形 更柔性、有機、安全、順眼、現代與友善 ,也更能與他人情感交流。
  4. 更有 關注的感覺 ,例如想到望遠鏡或放大鏡的視野。
  5. 大多照片的四周都是無意義的背景或訊息,圓形可以將其切除。
  6. 通常拍照會把「人」擺在中心,而圓形中心到四周距離都一致,可 讓臉更突出

視覺

  1. 視線在 方形的焦點有 5  個 (四個角 + 中心),而圓形只有一個(中心)
  2. 圓潤的線條或角度,可讓視線自然的追隨與運動 ,不會像看到 90 度角而停頓下來,更詳盡的內容可 參考這篇
  3. 在掃視的情況下,使用圓形可協助使用者 辨識或區分是否為內容 ,因為內容通常會置於用方型容器,例如文字、照片或專輯等。

其他

  1. 行動裝置普及後,因圓形 與手指按壓在螢幕上的形狀類似 ,而被廣泛的使用。
  2. 其實人類早就有這樣的應用,例如將人物應用於圓形硬幣與圓形藝術畫中。
  3. 只是一個 設計的風潮 ,剛好流行到「圓形」這個週期。
  4. 很多準則或模板都 提供圓形版本。
  5. 現在的 CSS3 技術讓圓角(圓形)輕易實現且各瀏覽器也幾乎都有支援

作者 Anthony 於 UX movement 上提出了相關觀點:

UX movement 中,作者 Anthony 也提出了一些有別於上述的觀點,大舌頭簡單整理並陳述如下:

角度的邊緣,看起來較明顯

通常 方形的銳利四角,因為對比(顏色或形狀)的關係,在視覺上會更明顯,造成干擾 。使用圓形並無此問題,所以更可強調重點 –「臉部」。

圖片來源:Why Circular Profile Pictures Accentuate Faces

方形對角線較長

方形的對角線比邊緣還長,用戶目光易延伸出去; 圓形半徑長皆一致,用戶可花更少時間在理解內容,眼球也較不需要移動

圖片來源:Why Circular Profile Pictures Accentuate Faces

 

圓型用於非人物圖片,效果也是一樣的嗎?

雖然使用圓形的個人頭像可排除不相關的背景,更聚焦於人臉上,但非人物的圖片(風景或食物等)也有同樣效果嗎?Anthony 認為不一定,因為 可能因此失去了該圖片要傳達的資訊 ,如景深或細節等。

圖片來源:Why Circular Profile Pictures Accentuate Faces

大舌頭觀點:

上面已整理了許多專家的觀點,大部分是相當的認同的。不過,大舌頭也有一些觀點是以上未提到的,想補充給大家做參考,如下:

較強的設計感

大舌頭認為圓形的個人頭像 ,能 讓介面傳遞較強的設計感 。不過這點會受設計師應用的手法,或使用者的主觀感受影響。此外,平台無法限制使用者上傳圖片的品質,若上傳圖片的品質、構圖或美感較差,將其套用在圓形的遮罩裡,介面的設計感會比方形的好。

高度親和力

就如同人與人的交際,在初次見面時,會認為帶有嚴肅表情的人較難相處,而微笑滿面的人可馬上聊起來。為什麼會有這種先入為主的觀念呢?這就是  「親和力」高低層度 的差異所致。而 曲線與圓在人們的印象中,就是親和力的象徵 。若介面上使用圓形的元素(個人頭像等),使用者可能會產生,此產品學習曲線較低的印象。

好的開始就是成功的一半,對吧!

雖然矩形可讓空間利用最佳化,但應用圓形又可多一點留白空間

若不考慮使用者體驗與美學,將不同的內容以方形排列,將最具有效能(一種貨櫃的概念),但這樣的產品絕對不會受到用戶歡迎的。因此,設計師都應了解留白帶來的效益,例如 降低視覺負擔、增加閱讀性、區隔不同內容與更具美感 等。適當的留白對產品來說相當重要,同時也考驗設計師的基礎訓練是否扎實。就個人圖像而言,同樣尺寸下,圓形又能比方形 多一些留白空間(在四角處),除了增加與其他內容的區隔性外,也能讓介面帶點趣味性

使用者真的比較喜歡圓型的個人頭像嗎?

以上許多專家的觀點大多偏向理性分析,例如認知、對比或視覺動線等;另有一部分是朝向「 它是一個設計風潮」  來解釋。但不管怎麼樣,若大部分使用者都偏愛圓形版的話,產品為求更好的愉悅體驗,使用它何嘗不可。也因此,大舌頭想透過簡單的問卷調查,來驗證「使用者更偏愛圓形個人頭像」的假說

本調查的對象不限,但傳播媒介是透過 設計大舌頭 Facebook 粉絲專頁 ,所以可能職業或年齡較局限,不過這些因子都不是這次調查想分析的。另外,施測時間為 2016 年 3 月 1 號到 10 號;問卷製作使用 typeform,共計四題。最後回收的有效問卷數量為 305 份。

首先,大舌頭想要了解個人頭像底下 有無背景是否影響「偏愛」的形狀 ,此外也想知道 何種形狀是使用者較喜歡的 。所以設計了最核心的兩題:

  1. 底下有方型背景,且有三種基本形狀(方形、圓形、六角形),請受訪者選擇最喜歡何種形狀
  2. 底下為空白背景,同上題有一樣的三種基本形狀。

此外的兩題非必填,主要就是詢問受訪者針對上述兩題的選擇主因。

底下有背景

選擇較 喜愛方形個人頭像的佔 56%(171 人);喜愛圓形佔 42%(129 人);喜愛六角形的最少,佔 2%(5 人) 。可以看出若頭像下有背景,大部分人較喜歡方形,與圓形差距 14%。大舌頭從受測者回答的原因中挑選並整理出 與感性相關的形容詞 (因主要在探討主觀偏愛程度),依出現的次數排列如下:

喜歡方形的原因大多是: 耐看順眼、穩定平衡、整齊、舒適 等。不過,值得一提的是,較理性且具邏輯的原因比感性的原因多上許多倍,例如與方形背景一致、照片較不易裁切到、已經習慣了 FB 的介面等。由此可看出,題目應考量更多,拿掉干擾感性選擇的因子(如不要讓受測者聯想到 FB 等)。而喜歡圓形的原因: 好看順眼、舒服和諧、柔順圓滑、生動、可聚焦、可愛、親和力 等。喜歡六角形的原因為: 特別

未來,若大家還有興趣,可探討更多其他因素的影響程度,例如將個人頭像放在背景中、與背景邊緣切到、放在中間或右側等。甚至,搭配眼動儀、腦波或其他可數據化儀器,驗證相關假說。另外, 兩題中喜歡方形的受訪者,皆有一定比例的人在乎,方形可容納更多照片的資訊,看來此點也是設計師需要考量的

底下無背景

選擇較喜愛方形個人頭像的佔 19%(58 人);喜愛圓形佔 78%(238 人);喜愛六角形的最少,佔 3%(9 人)。由數據看出,在無背景的情況下,受測者更偏愛於圓形的個人頭像,與方形差距達 59%。

喜歡方形的原因: 整體一致 (與排版與周遭元素有關,如方底)、整齊、好看順眼、簡單俐落、正式 等。喜歡圓形的原因: 好看順眼、生動活潑、柔和圓滑、和諧一致、舒服、輕巧精緻、明確凸顯、可愛、簡潔 喜歡六角形的原因為: 特殊前衛

結論

雖然本調查還不夠嚴謹,無法構成絕對的論述。但至少可了解到若底下有背景時,可能會影響使用者對於個人頭像形狀的喜愛程度;而在無背景時,使用者大多喜愛圓形的個人頭像。另外,設計師也可參考由受測者回饋原因中整理的詞彙,來選擇最適合的形狀,來符合產品要呈現的感受。

使用圓形個人頭像的小撇步

css 怎麼做?該注意什麼?

感謝 css3 與各瀏覽器的技術支援,現在只需要針對個人頭像的 HTML tag or class 寫一行 border-radius: 100%; 的 css 屬性就可以達到!為了向下相容老舊的瀏覽器,必須針對不同核心的瀏覽器添加不同的前綴,如下:

 

給予使用者上傳圖片的建議

不知道大家有沒有這樣的經驗,就是當你挑好圖片並上傳後,發現圓形的形狀外框遮住了許多重點(例如臉的一角),效果不如預期。其實,設計師可以在上傳圖片的介面上,提供給使用者一些建議。例如,畫出一個人臉可在圓形裡完整呈現的區域,這樣使用者就會比對自己的圖片,並挑選較符合者;或是提醒圖片上有字的話,建議的大小為何(可看的清楚);提示不能使用非法圖片等。

提供多種預設圖片,及更完善的圖片編輯器

有些使用者手上剛好沒有適合的圖片,或認為不重要,可能就不會設定個人頭像了。不過,平台若是希望呈現出多種角色互動的氛圍(如社群網站),或有協作辨識的需求(如 trello)。設計師可在設定流程的頁面上,提供多種預設個人頭像供使用者快速選擇(如多款顏色或企業識別的變形應用),或設計某種自動機制(如帳號的第一個字母)。另外,利用第三方社群登入方式,也能自動載入在該平台上傳的頭像,是個對使用者較便捷的方式。

再者,若能提供完善的圖片編輯器,也能吸引使用者做出更符合自我形象與品質更好的頭像,例如挑選濾鏡、色相與明度調整等。不過,圖片編輯器的有無,應該要取決於平台服務的本質。

同尺寸下,圓形看起來比方形小

某一圓形的直徑與正方形的邊長一致,若將兩者放在一起,視覺上會認為圓形的較小(如下圖左)。如果排版有將兩者放在一起的需要,可將圓形放大一點,以達到視覺的平衡(如下圖右)。

使用 gif

有越來越多的平台允許使用者放上 gif 檔作為個人頭像,以呈現動態效果,這讓使用者更可彰顯其特色或品味,例如:

  • 誇張表情變化,來表示我的個性開朗搞笑
  • 不同視角的放空照片切換,就是要告訴大家,我就是個文青!
  • 旋轉的 3D 模型,代表我是位動畫師

 

更多有趣的調查:

參考資料:

 

(本文經 設計大舌頭 授權轉載,並同意 TechOrange 編寫導讀與修訂標題,原文標題為 〈為什麼介面設計中,使用者的個人圖像大多是圓形的?〉。)

 


【TechOrange 徵才:社群編輯+實習編輯】

►你是否常在各類豐富的科技趨勢裡流連忘返?
►你是否常被創業故事弄得熱血沸騰無法成眠?
►你是否喜歡很有挑戰性、嘗試新事物的工作?

我想你大概就是得了 TO 病,不加入不行了。
準備好你的履歷自傳,寄至  jobs@fusionmedium.com
記得標註你要「應徵 TO 社群編輯」,才不會跑錯棚哦!
>>    詳細職缺訊息


延伸閱讀

台灣的文青菜市場!不是誠品也不是百貨公司,超狂設計讓傳統市場經典轉型
不知道會捶心肝的 UI 標註協作神器!省時又不用輸出一堆圖,效率狂飆就靠它
【設計師必讀的色彩心理學】藍色是 UI 設計中最重要的顏色,為什麼?

點關鍵字看更多相關文章: