底下無背景
選擇較喜愛方形個人頭像的佔 19%(58人);喜愛圓形佔 78%(238人);喜愛六角形的最少,佔 3%(9人)。由數據看出,在無背景的情況下,受測者更偏愛於圓形的個人頭像,與方形差距達 59%。
喜歡方形的原因:整體一致(與排版與周遭元素有關,如方底)、整齊、好看順眼、簡單俐落、正式等。喜歡圓形的原因:好看順眼、生動活潑、柔和圓滑、和諧一致、舒服、輕巧精緻、明確凸顯、可愛、簡潔等。喜歡六角形的原因為:特殊前衛。
結論
雖然本調查還不夠嚴謹,無法構成絕對的論述。但至少可了解到若底下有背景時,可能會影響使用者對於個人頭像形狀的喜愛程度;而在無背景時,使用者大多喜愛圓形的個人頭像。另外,設計師也可參考由受測者回饋原因中整理的詞彙,來選擇最適合的形狀,來符合產品要呈現的感受。
使用圓形個人頭像的小撇步
css 怎麼做?該注意什麼?
感謝 css3 與各瀏覽器的技術支援,現在只需要針對個人頭像的 HTML tag or class 寫一行 border-radius: 100%; 的 css 屬性就可以達到!為了向下相容老舊的瀏覽器,必須針對不同核心的瀏覽器添加不同的前綴,如下:
給予使用者上傳圖片的建議
不知道大家有沒有這樣的經驗,就是當你挑好圖片並上傳後,發現圓形的形狀外框遮住了許多重點(例如臉的一角),效果不如預期。其實,設計師可以在上傳圖片的介面上,提供給使用者一些建議。例如,畫出一個人臉可在圓形裡完整呈現的區域,這樣使用者就會比對自己的圖片,並挑選較符合者;或是提醒圖片上有字的話,建議的大小為何(可看的清楚);提示不能使用非法圖片等。
提供多種預設圖片,及更完善的圖片編輯器
有些使用者手上剛好沒有適合的圖片,或認為不重要,可能就不會設定個人頭像了。不過,平台若是希望呈現出多種角色互動的氛圍(如社群網站),或有協作辨識的需求(如 trello)。設計師可在設定流程的頁面上,提供多種預設個人頭像供使用者快速選擇(如多款顏色或企業識別的變形應用),或設計某種自動機制(如帳號的第一個字母)。另外,利用第三方社群登入方式,也能自動載入在該平台上傳的頭像,是個對使用者較便捷的方式。
再者,若能提供完善的圖片編輯器,也能吸引使用者做出更符合自我形象與品質更好的頭像,例如挑選濾鏡、色相與明度調整等。不過,圖片編輯器的有無,應該要取決於平台服務的本質。
同尺寸下,圓形看起來比方形小
某一圓形的直徑與正方形的邊長一致,若將兩者放在一起,視覺上會認為圓形的較小(如下圖左)。如果排版有將兩者放在一起的需要,可將圓形放大一點,以達到視覺的平衡(如下圖右)。
使用 gif
有越來越多的平台允許使用者放上 gif 檔作為個人頭像,以呈現動態效果,這讓使用者更可彰顯其特色或品味,例如:
誇張表情變化,來表示我的個性開朗搞笑
不同視角的放空照片切換,就是要告訴大家,我就是個文青!
旋轉的3D 模型,代表我是位動畫師
作者/Wilson
本文經授權轉載自設計大舌頭,原文標題: 為什麼介面設計中,使用者的 個人頭像 大多是圓形的?
責任編輯/郭丹穎
對職涯或未來出路有些疑問,需要過來人的建議?快來提問,讓學長姐幫助你!
請關注風傳媒特別企劃「學長姐說」,也歡迎加入FB社團進行討論!
請看 FB社團-學長姐說 !
學長姐說也歡迎讀者分享您的經驗,意者請將基本資料及文章寄至opinion@storm.mg