方形圓形大不同?為什麼FB、IG都喜歡圓形頭像?這篇文章告訴你!

2017-11-04 12:40

? 人氣

視覺

視線在方形的焦點有 5 個(四個角 + 中心),而圓形只有一個(中心)

[啟動LINE推播] 每日重大新聞通知

圓潤的線條或角度,可讓視線自然的追隨與運動,不會像看到 90度角 而停頓下來,更詳盡的內容可 參考這篇。

在掃視的情況下,使用圓形可協助使用者辨識或區分是否為內容,因為內容通常會置於用方型容器,例如文字、照片或專輯等。

其他

行動裝置普及後,因圓形與手指按壓在螢幕上的形狀類似,而被廣泛的使用。

其實人類早就有這樣的應用,例如將人物應用於圓形硬幣與圓形藝術畫中。

只是一個設計的風潮,剛好流行到”圓形”這個週期。

很多準則或模板都只提供圓形版本。

現在的 CSS3 技術讓圓角(圓形)輕易實現且各瀏覽器也幾乎都有支援

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

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

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

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

(圖/uxmovement)
圓形沒有銳利四角,可強調臉部重點(圖/uxmovement)

方形對角線較長

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

(圖/uxmovement)
看圓形眼球不需要延伸,能比較快理解內容(圖/uxmovement)

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

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

(圖/uxmovement)
非人物的圖片使用圓形效果可能不好,圖片細節會比較不完整(圖/uxmovement)

大舌頭觀點:

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

較強的設計感

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

高度親和力

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

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

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

關鍵字:
風傳媒歡迎各界分享發聲,來稿請寄至 opinion@storm.mg

本週最多人贊助文章