為什麼UI設計中,用戶的(de)mu)ge)人頭像大多是圓形的(de)?
為什麼UI設計中,用戶的(de)��mu)��ge)人頭像大多是圓形的(de)?-移動閱讀二維碼

為什麼UI設計中,用戶的(de)mu)ge)人頭像大多是圓形的(de)?kan)笊嗤方逵曬檳賞(shang)飛(fei)縟褐凶 jia)ye)de)討論,逐(zhu)步(bu)厘清這個(ge)秘密

大家(jia)有沒有覺得有越來越多的(de)平(ping)台或(huo)App ,喜歡(huan)使用“圓形” 作(zuo)為用戶的(de)“個(ge)人頭像” 形狀chu)8貌換(huan) 牆詰de)設計風(feng)潮(chao)?還(huai)是大部分UI設計師的(de)愛好?或(huo)有其他(ta)特別的(de)原因呢?kan)笊嗤方逵曬檳賞(shang)飛(fei)縟褐凶 jia)ye)de)討論,逐(zhu)步(bu)厘清這個(ge)秘密,內容精彩不要(yao)錯(cuo)過喔(o) ~

 

個(ge)人頭像的(de)定(ding)義與(yu)發展︰

 

隨(sui)著網路用戶族(zu)群快(kuai)速增(zeng)加,他(ta)們對于藉由平(ping)台與(yu)其他(ta)用戶互動的(de)需求(qiu)就越高,也(ye)因此發展出許(xu)多可(ke)互動的(de)平(ping)台類型,例如論壇、信(xin)箱、聊天室、部落(luo)格到社群等qu)F渲忻扛ge)用戶都代表著一個(ge)獨特個(ge)體(無論是真實身份(fen)或(huo)虛擬角qiao)   廡└ge)體會有相對應(ying)的(de)資訊,以及an)碭ge)體的(de)mu)ge)人頭像。而個(ge)人頭像通(tong)常是具(ju)個(ge)性化(hua)(用戶覺得能代表自(zi)我)的(de)標志(zhi),大多以平(ping)面或(huo)3D圖像的(de)方式呈(cheng)現(xian)。

 

UI上的(de)mu)ge)人頭像英文為”Profile Picture”或(huo)”Avatar”,其中Profile Picture在字義上較(jiao)容易理(li)解,反倒是Avatar,各位(wei)huan)琳嚦ke)能會充滿(man)問號,因為大家(jia)對Avatar的(de)印(yin)象應(ying)該都是阿(a)凡達電影(藍藍的(de)那(na)出XD)。根據techpedia??平(ping)台上的(de)na)枋觶vatar一詞出現(xian)于1985年,由盧卡斯電影公司(Lucas Film)內發展線上角qiao) 繆縈蝸罰a href="https://en.wikipedia.org/wiki/Habitat_(video_game)" rel="nofollow" target="_blank">Habitat)專案人員(Chip Morningstar & Joseph Romero)首先提出。此詞源自(zi)于印(yin)度教對”聖人降臨(a descent of the Supreme Being) “的(de)na)枋觶 謨?睦鎘#8221;化(hua)身(incarnation)”或(huo)“an)恚anifestation)”之義。

 

Image title

 

網友對個(ge)人頭像形狀選擇的(de)觀點︰

其實,選擇何種形狀的(de)論戰已不是qie)攣帕耍 兄詼嘧 jia)在相關論壇中發表意(yi)見與(yu)討論。大舌頭擷(xie)取(qu)與(yu)整(zheng)理(li)他(ta)們在Quora與(yu)Stack Exchange平(ping)台上討論與(yu)發表的(de)論述,並簡(jian)單的(de)分類如下。不huai) 笊嗤廢壬昝鰨 韻履諶蕕de)排序並無經過提及an)問tong)計(僅隨(sui)機(ji)排列),且多數回應(ying)也(ye)無相關驗證(zheng)或(huo)研(yan)究資料(liao),所以大家(jia)可(ke)當成(cheng)不同“觀點”參考就好。

 

感(gan)受與(yu)認xian)/strong>

  1. 方形太無趣了。
  2. 大腦可(ke)較(jiao)輕易的(de)處(chu)理(li)圓形內的(de)訊息,減少(shao)認xian) de)壓力。
  3. 相較(jiao)于方形,圓形更柔性、有機(ji)、安全、順眼、現(xian)代與(yu)友善,也(ye)更能與(yu)他(ta)人情感(gan)交流。
  4. 更有關注(zhu)的(de)mu)芯  縵氳酵毒禱huo)放大鏡的(de)視(shi)野a)/li>
  5. 大多照片(pian)的(de)四(si)周都是無意(yi)義的(de)背景或(huo)訊息,圓形可(ke)以將其切(qie)除。
  6. 通(tong)常拍照會把(ba)”人”擺(bai)在中xing)模 殘沃行(xing)牡剿si)周距離都jia)恢攏 ke)讓(rang)臉更突出。

視(shi)覺

  1. 視(shi)線在方形的(de)焦點有5個(ge)(四(si)mu)ge)角+中xing)模  殘沃揮幸桓ge)(中xing)模 /li>
  2. 圓潤的(de)線條或(huo)角度,可(ke)讓(rang)視(shi)線自(zi)然(ran)的(de)追隨(sui)與(yu)運(yun)動,不huan)嵯窨kan)到90度角而停頓下來,更詳盡的(de)內容可(ke)參考這篇
  3. 在掃視(shi)的(de)情況下,使用圓形可(ke)協助使用者辨識或(huo)區分是否為內容,因為內容通(tong)常會置于用方型容器,例如文字、照片(pian)或(huo)專輯等qu)/li>

其他(ta)

  1. 行(xing)動裝(zhuang)置普及後(hou),因圓形與(yu)手指(zhi)按(an)壓在螢(ying)幕上的(de)形狀類似,而被(bei)廣泛(fan)的(de)使用。
  2. 其實人類早就有這樣的(de)應(ying)用,例如將人物應(ying)用于圓形硬幣與(yu)圓形藝zhang)躉 小/li>
  3. 只是一個(ge)設計的(de)風(feng)潮(chao),剛好流行(xing)到”圓形”這個(ge)周期。
  4. 很多準則(ze)或(huo)模板都只提供圓形版本。
  5. 現(xian)在的(de)CSS3技(ji)術讓(rang)圓bu)牽ㄔ殘危├嵋資迪xian)zhi)腋麂 榔饕ye)幾fu)醵加兄?。

 

作(zuo)者Anthony 于UX movement 上提出了相關觀點︰

 

UX movement??中,作(zuo)者Anthony也(ye)提出了一些有別于上述的(de)觀點,大舌頭簡(jian)單整(zheng)理(li)並陳述如下︰

 

角度的(de)邊緣,看(kan)起來較(jiao)明顯

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

Image title

方形對角線較(jiao)長

方形的(de)對角線比邊緣還(huai)長,用戶目光易延(yan)伸出去;圓形半徑長皆一致,用戶可(ke)花(hua)更少(shao)時間(jian)在理(li)解內容,眼球也(ye)bu)喜恍枰yao)移動。

Image title

圓型用于非(fei)人物圖片(pian),效果(guo)也(ye)是一樣的(de)嗎?

雖(sui)然(ran)使用圓形的(de)mu)ge)人頭像可(ke)排除不相關的(de)背景,更聚焦于人臉cheng)希  fei)人物的(de)圖片(pian)(風(feng)景或(huo)食物等)也(ye)有同樣效果(guo)嗎?Anthony認為不一huan)  蛭 ke)能因此失去了該圖片(pian)要(yao)傳達的(de)資訊,如景ba)罨huo)細節等qu)/p>

Image title

 

大舌頭觀點

上面已整(zheng)理(li)了許(xu)多專家(jia)ye)de)觀點,大部分是相當的(de)認同的(de)。不huai) 笊嗤芬ye)有一些觀點是以上未提到的(de),想補充給大家(jia)做參考,如下︰

 

較(jiao)強的(de)設計感(gan)

大舌頭認為圓形的(de)mu)ge)人頭像,能讓(rang)介面傳遞較(jiao)強的(de)設計感(gan)。不huai)獾慊 萇杓剖τying)用的(de)手法,或(huo)使用者的(de)主觀感(gan)受影響(xiang)。此外,平(ping)台無法限制使用者上傳圖片(pian)的(de)品質,若(ruo)上傳圖片(pian)的(de)品質、構圖或(huo)美(mei)感(gan)較(jiao)差,將其套用在圓形的(de)遮(zhe)罩里,介面的(de)設計感(gan)會比que)叫蔚de)好。

 

高度親zhui)土/strong>

就如同人與(yu)人shuo)慕患剩 誄醮渭媸保 崛餃 醒縴啾砬櫚de)人較(jiao)難相處(chu),而微笑(xiao)滿(man)面的(de)人可(ke)馬上聊起來chu)N 裁椿嵊姓庵窒熱胛 韉de)觀念呢?這就是“親zhui)土#8221;高低層度的(de)差異所致。而曲(qu)線與(yu)圓在人們的(de)印(yin)象中,就是親zhui)土Φde)象征。若(ruo)介面上使用圓形的(de)元素(個(ge)人頭像等),使用者可(ke)能會產(chan)生,此產(chan)品學習曲(qu)線較(jiao)低的(de)印(yin)象。

 

好的(de)開始就是成(cheng)功的(de)一半,對吧(ba)!

 

雖(sui)然(ran)矩形可(ke)讓(rang)空間(jian)利用最佳化(hua),但應(ying)用圓形又可(ke)多一點留白空間(jian)

若(ruo)不考慮使用者體驗與(yu)美(mei)學,將不同的(de)內容以方形排列,將最具(ju)有xing) 埽ㄒ恢只豕竦de)mu)拍睿   庋de)產(chan)品絕對不huan) 艿接沒?huan)迎的(de)。因此,設計師都應(ying)了解留白帶來的(de)效益,例如降低視(shi)覺負(fu)擔、增(zeng)加閱讀性、區隔不同內容與(yu)更具(ju)美(mei)感(gan)等qu)J實鋇de)留白對產(chan)品來說(shuo)相當重要(yao),同時也(ye)考驗設計師的(de)基礎(chu)訓練是否扎實。就個(ge)人圖像而言,同樣尺(chi)寸(cun)下,圓形又能比que)叫味嘁恍├ 卓佔jian)(在四(si)角處(chu)),除了增(zeng)加與(yu)其他(ta)內容的(de)區隔性外,也(ye)能讓(rang)介面帶點趣味性。

 

使用圓形個(ge)人頭像的(de)技(ji)巧(qiao)

 

css 怎(zen)麼做?該注(zhu)意(yi)什麼?

感(gan)xing)ss3 與(yu)各瀏覽器的(de)技(ji)術支援,現(xian)在只需要(yao)針對個(ge)人頭像的(de)HTML tag or class 寫一行(xing)border-radius: 100%; 的(de)css 屬性就可(ke)以達到!為了向下相容老(lao)舊(jiu)的(de)瀏覽器,必須針對不同核心的(de)瀏覽器添加不同的(de)前綴(zhui),如下︰

 

點我,看(kan)看(kan)怎(zen)麼做

 

給予使用者上傳圖片(pian)的(de)建議

不知道(dao)大家(jia)有沒有這樣的(de)經驗,就是當你挑好圖片(pian)並上傳後(hou),發現(xian)圓形的(de)形狀外框遮(zhe)住了許(xu)多重點(例如臉的(de)一角),效果(guo)不如預期。其實,設計師可(ke)以在上傳圖片(pian)的(de)介面上,提供給使用者一些建議。例如,畫出一個(ge)人臉可(ke)在圓形里完整(zheng)呈(cheng)現(xian)的(de)區域,這樣使用者就會比對自(zi)己的(de)圖片(pian),並挑選較(jiao)符合(he)者;huan)huo)是提醒圖片(pian)上有字的(de)話,建議的(de)大小為何(可(ke)看(kan)的(de)清楚(chu));提示不能使用非(fei)法圖片(pian)等qu)/p>

 

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

有xing)┤褂謎呤稚細蘸妹揮惺屎he)的(de)圖片(pian),或(huo)認為不重要(yao),可(ke)能就不huan)嶸瓚ding)個(ge)人頭像了。不huai) ping)台若(ruo)是希望呈(cheng)現(xian)出多種角qiao) ? de)氛圍(如社群網站),或(huo)有xing) zuo)辨識的(de)需求(qiu)(如trello)。設計師可(ke)在設定(ding)流程的(de)頁面上,提供多種預設個(ge)人頭像供使用者快(kuai)速選擇(如多款顏色或(huo)企業(ye)識別的(de)變形應(ying)用),或(huo)設計po)持腫zi)動機(ji)制(如帳(zhang)號的(de)第一個(ge)字母(mu))。另外,利用第三(san)方社群登(deng)入方式,也(ye)能自(zi)動載入在該平(ping)台上傳的(de)頭像,是個(ge)對使用者較(jiao)便捷的(de)方式。

 

再(zai)者,若(ruo)能提供完善的(de)圖片(pian)編輯器,也(ye)能吸引使用者做出更符合(he)自(zi)我形象與(yu)品質更好的(de)頭像,例如挑選濾鏡、色相與(yu)明度調整(zheng)等qu)2還(huai) 計pian)編輯器的(de)有無,應(ying)該要(yao)取(qu)決于平(ping)台服務(wu)的(de)本ju)省/p>

 

同尺(chi)寸(cun)下,圓形看(kan)起來比que)叫渦/strong>

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

Image title

 

 

使用 gif

有越來越多的(de)平(ping)台允許(xu)使用者放上gif 檔作(zuo)為個(ge)人頭像,以呈(cheng)現(xian)動態效果(guo),這讓(rang)使用者更可(ke)彰(zhang)顯其特色或(huo)品味,例如︰

 

  • 夸張表情變化(hua),來表示我ye)de)mu)ge)性開朗搞笑(xiao)
  • 不同視(shi)角的(de)放空照片(pian)切(qie)換(huan),就是要(yao)告訴大家(jia),我就是個(ge)文na)啵/li>
  • 旋轉的(de)3D 模型,代表我是位(wei)huan)  /li>

 


 

設計大舌頭是一個(ge)長期關注(zhu)用戶體驗相關(UED)議題(ti)的(de)共筆(bi)平(ping)台,包含用戶界面(UI)、互動設計(Interaction Design)、產(chan)品fei)杓魄qu)勢、設計專利以及服務(wu)設計等,試圖讓(rang)更多讀者了解設計師們的(de)巧(qiao)思(si),並推廣 Design Thinking 的(de)思(si)維,歡(huan)迎更多人si)尤胝庖桓ge)討論園地。

 

如果(guo)你也(ye)喜歡(huan)我們的(de)文章,歡(huan)迎大家(jia)ye)轎業(ye)de) Blog(設計大舌頭)瞧瞧︰https://designtongue.me/

Image title

本文出處(chu)︰ui.cn

本文鏈接︰http://www.mobileui.cn/user-profile-picture-are-mostly-round.html
本文標簽: , , , , ,