鏈接：/question/23506420/answer/24955628
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
結論：
在以方形為基本元素的頁面裏，出現壹個明顯的圓形區域有非常好的效果（恰好是頭像需要的、被強調的效果），但若圓形區域批量出現，會和頁面內其他大量方形外廓造成沖突。
以空間頁的場景為例：
頭圖、單條feed、feed裏的圖片－－最基本的（非頭像的）圖片元素，大多是方形。原因可能是對大數量級＋質量不可控的圖源做異形處理，未必有好的效果。據說還要考慮前端性能壓力。
以及，我們電腦or移動設備的屏幕、瀏覽器的窗口、還有頁面上劃分出來的各個區域，通常都會有明顯的方形外緣。
如下圖。（夾帶私貨：我非常不知道為什麽微博設計團隊特別愛用引導線）
<img src="/d3507423a2d7a00796c7a466b3d7ce36_b.jpg" data-rawwidth="628" data-rawheight="346" class="origin_image zh-lightbox-thumb" width="628" data-original="/d3507423a2d7a00796c7a466b3d7ce36_r.jpg">
壹眼望去方形套方形、方形挨方形時，如果單獨出現壹個圓形區域，能瞬間吸引視覺焦點，高大上。
在空間頁的場景裏，值得/應該這麽做的，主人的頭像算壹個。如下圖。
<img src="/02eae796880d67094586f2144ab79748_b.jpg" data-rawwidth="619" data-rawheight="333" class="origin_image zh-lightbox-thumb" width="619" data-original="/02eae796880d67094586f2144ab79748_r.jpg">
但是如果有方又有圓，壹大波小圓頭像正在襲來，麻煩也跟著來了：
<img src="/2c44d4a2a383725bdda568ca74b5cafb_b.jpg" data-rawwidth="620" data-rawheight="346" class="origin_image zh-lightbox-thumb" width="620" data-original="/2c44d4a2a383725bdda568ca74b5cafb_r.jpg">
上圖嚴格對齊了柵格＋等高－－－這麽無趣的手法都用了！頁面仍然亂。
如果是瀑布流，處女座還能活麽。
移動端的屏幕小。批量顯示用戶時，如果用小圓頭像，可以考慮弱化方形外廓，避免視覺沖突：
<img src="/6f2fff66342f2e0311df4333abbf755c_b.jpg" data-rawwidth="314" data-rawheight="473" class="content_image" width="314">
壹個不恰當使用圓頭像的例子：
1、頁面中明顯的方形外廓和明顯的圓形外廓都出現，此種場景下頭像並非需要強調的核心元素。
2、這個頁面還有其他不妥之處：有多種字體、字號、字色，有不同風格的 ICON，圖片下的ICON字體和底導航處的ICON字體不壹樣。
<img src="/03840d7e48a60cddfc2b02cd31bde646_b.jpg" data-rawwidth="313" data-rawheight="475" class="content_image" width="313">
編輯於 2014-12-24
15 條評論
感謝
分享
收藏
沒有幫助
舉報
作者保留權利
收起
25
贊同
反對，不會顯示妳的姓名
Ataraxia
，再就業中的交互設計師，求推介
25 人贊同
對於圓形頭像和方形頭像的差別，我是這樣想的：方形頭像和圓形頭像的識別效率哪種更高？1.頭像的目標是做什麽用的？我的理解：頭像是做用戶識別的。識別不同用戶的方法有很多：用戶名、用戶ID、頭像、郵箱、手機等等。因為人腦對圖像的接收處理能力比文字強…
顯示全部
對於圓形頭像和方形頭像的差別，我是這樣想的：方形頭像和圓形頭像的識別效率哪種更高？
1.頭像的目標是做什麽用的？
我的理解：頭像是做用戶識別的。識別不同用戶的方法有很多：用戶名、用戶ID、頭像、郵箱、手機等等。因為人腦對圖像的接收處理能力比文字強很多，另外人體特征導致人臉比人體其他部分的識別效率更高，所以很多互聯網在識別用戶上，普遍采用了用戶頭像的方法。
方形頭像和圓形頭像的目的壹樣，都是做人臉識別標識用戶的。人臉的特征是這樣的:
<img src="/1508baaa787ad7c5234f3f2d27d2ff9d_b.jpg" data-rawwidth="900" data-rawheight="584" class="origin_image zh-lightbox-thumb" width="900" data-original="/1508baaa787ad7c5234f3f2d27d2ff9d_r.jpg"><img src="/12b17bbce33ca3fc8382d9d97b7ad3a2_b.jpg" data-rawwidth="1200" data-rawheight="1390" class="origin_image zh-lightbox-thumb" width="1200" data-original="/12b17bbce33ca3fc8382d9d97b7ad3a2_r.jpg">
2.方形和圓形的差別
方形和圓形都是場景的形狀，其視覺焦點的差別是圓形的焦點很聚焦，在圓心位置。方形的焦點在九宮格四點上。
<img src="/52c7efe791da91283df0004b6462741e_b.jpg" data-rawwidth="993" data-rawheight="1000" class="origin_image zh-lightbox-thumb" width="993" data-original="/52c7efe791da91283df0004b6462741e_r.jpg"><img src="/884bf3027bf32a6e3f16b75a8afba376_b.jpg" data-rawwidth="500" data-rawheight="375" class="origin_image zh-lightbox-thumb" width="500" data-original="/884bf3027bf32a6e3f16b75a8afba376_r.jpg">
3.用戶壹般使用什麽圖片做頭像
最理想的情況下，用戶使用自己的真實人臉照片做頭像。現實情況中，用戶會使用各種各樣的圖片做頭像。在電腦上拍攝照片不容易，QQ就提供了很多張不同的圖片，如風景照，靜物照，卡通人物頭像等默認頭像給用戶選擇。在智能手機興起後，用戶拍攝照片非常容易了，但出於隱私等各種原因的考慮，很多人還是不會采用標準的真實人臉照片做頭像。
另外如果用戶是企業/公司用戶，壹般使用企業/公司的logo做頭像。
4.方形頭像和圓形頭像的識別效率哪種更高？
A.如果用戶采用標準的人臉照片做頭像，圓形的頭像可以讓用戶忽略掉照片的背景（花花草草什麽的），更快地聚焦到人臉。這種時候，我傾向圓形頭像的識別用戶的效率更高。但也不絕對，識別兩個雙胞胎的頭像的某個位置的小差別，方形的聚焦點位置多的優勢會讓它更容易識別出來。
B.如果用戶不是采用標準的人臉照片做頭像，那麽兩者的差別就不大了，因為這時是看照片的整體而不是著眼於臉部了。
C.但如果用戶是企業，方形的頭像就更好適配。因為很多企業的logo是矩形的，使用圓形頭像不壹定能容納地下，或者搭配壹起不協調。
5.圓形的輪廓可以更好地暗示用戶這是頭像
方形的圖片在web上很常見，商品圖是方形的，各種社交網站的縮略圖是方形的...方形的圖片不能讓用戶馬上聯想到頭像。而圓形的圖片是不常見的，拍出來的照片是矩形的，圓形的圖片在web上的應用主要是頭像和圖標。圓形的圖片可以更好地讓用戶理解這是頭像。
另外用戶在上傳個人照片時，如果使用圓形的輪廓頭像，可以讓用戶更傾向於使用人臉的照片做頭像。因為很多需要看整體照片的風景照不適合於聚焦某點上的展示方式。
6.測試
上面的都是個人的想法，也許不準確，很難說服所有人。我想可以通過做壹個簡單的測試來了解方形頭像和圓形頭像哪種識別用戶的效率更高。
A.準備500個用戶的信息（頭像，昵稱和簽名），盡量模擬頭像展示的常見形態。
B.從中隨機找出30個用戶，請其信息聚合到另外壹個頁面上，打印下來。
C.另外請20個人過來，給他們看打印下來的30個人的信息，讓其從這500個用戶找出這30人，統計時間，看看哪個效率更高壹點。
<img src="/573dd835419faf2583feaceaa78b5065_b.jpg" data-rawwidth="1345" data-rawheight="718" class="origin_image zh-lightbox-thumb" width="1345" data-original="/573dd835419faf2583feaceaa78b5065_r.jpg"><img src="/d033c83ccb12c87f0a26faf1f595a52d_b.jpg" data-rawwidth="1345" data-rawheight="718" class="origin_image zh-lightbox-thumb" width="1345" data-original="/d033c83ccb12c87f0a26faf1f595a52d_r.jpg">
發布於 2014-11-02
3 條評論
感謝
分享
收藏
沒有幫助
舉報
作者保留權利
收起
YONG
，to think and to do
2 人贊同
學習了前面的答題者從各個角度的分析思路。現提供壹個感性壹點的短答案：人的頭部更靠近圓形，使用圓形頭像更有利於突出“人物“的頭部特征；畢竟人形不是方形的；圓形其實就是壹個點，比方形更容易成為視覺聚焦凝聚點；方形頭像中壹般是人（或者主角）與環…
顯示全部
學習了前面的答題者從各個角度的分析思路。現提供壹個感性壹點的短答案：
人的頭部更靠近圓形，使用圓形頭像更有利於突出“人物“的頭部特征；畢竟人形不是方形的；
圓形其實就是壹個點，比方形更容易成為視覺聚焦凝聚點；
方形頭像中壹般是人（或者主角）與環境的組合，交代的是人物和環境的關系；
總結：雖然圓形頭像對頭像的突出感會更強；但這並不是選擇頭像形狀時唯壹要考慮的因素。其它需要考慮的因素有：
與頁面其它元素的和諧；（如上面有人提到的方形和圓形的沖突，本質就是頁面上焦點太多容易顯得雜亂）
圓形圖片的處理和網絡前端展示成本：畢竟能通過拍照獲得的以及各種網絡圖片都是方形的；
……
兩種形狀的頭像各有特點，具體選擇哪壹種要綜合考慮上述因素，以及頭像需要表達的意思。
不過話說回來，有人註意過手機客戶端上設置圓形頭像時的交互體驗了嗎？至少我感覺，交互細節很不自然。
如何制作圓形頭像？
選擇圖片：從相冊選擇／手機拍照
將選中圖片截取成系統支持的大小：通常是拖動矩形截取框，在選中的大圖中選擇需要截取為頭像的區域，此過程中考慮周到壹點的應用會支持縮放圖片，讓矩形截取框能包含更多的東西，但是壹般的app並沒這麽周到；
確定矩形截取框位置後，點擊確定，系統自動將選中的矩形區域處理成圓形頭像；
發現問題了嗎？截取頭像的過程中，妳壹直看到的是矩形圖片，但是最終的頭像卻需要在壹個黑盒子中處理成壹個未知的圓形，根本無法所見即所得。壹般情況下，用這種方式制作的圓形頭像都有點偏離中心，對強迫癥和處女座很不友好好嘛？從用戶制作頭像的角度來說，方形頭像更易制作，畢竟我們拍得照片都是方形的，畢竟所見即所得。
所以不要再盲目跟風用什麽“時髦”的圓頭像了，設計師OR產品經理除了考慮頁面展示和諧度，更需要考慮與圓頭像相關聯操作如制作、預覽頭像等的體驗。