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

2017-11-04 12:40

? 人氣

底下無背景

(圖/設計大舌頭)
底下無背景的問卷測試結果(圖/設計大舌頭)

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

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

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

結論

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

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

css 怎麼做?該注意什麼?

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

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

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

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

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

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

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

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

(圖/設計大舌頭)
同樣的尺寸,圓形看起來比方形小(圖/設計大舌頭)

使用 gif

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

誇張表情變化,來表示我的個性開朗搞笑

不同視角的放空照片切換,就是要告訴大家,我就是個文青!

旋轉的3D 模型,代表我是位動畫師

作者/Wilson

本文經授權轉載自設計大舌頭,原文標題: 為什麼介面設計中,使用者的 個人頭像 大多是圓形的?

責任編輯/郭丹穎

對職涯或未來出路有些疑問,需要過來人的建議?快來提問,讓學長姐幫助你!

請關注風傳媒特別企劃「學長姐說」,也歡迎加入FB社團進行討論!

請看 FB社團-學長姐說 !

學長姐說也歡迎讀者分享您的經驗,意者請將基本資料及文章寄至opinion@storm.mg

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

本週最多人贊助文章