Instagram for iOS 7 新版使用圓形頭像，這是錯誤的設計決定嗎？

12-24

因為很重要一點，大多數人的 Instagram 頭像其實就是某一張發表在 Instagram 上面的相片。很可能，張相片就帶有濾鏡的邊框。那麼最終的效果簡直就是毀滅性打擊。

Nice job overall, but I think making avatars (a.k.a. profile pictures) circular is a mistake. Sure, that』s what Apple is doing with them in Messages and Contacts, but I don』t think there』s anything inherently 7-y about circular avatars. And for Instagram in particular, it breaks a certain elegance — your avatar was the same thing as a post, a square image.

via http://daringfireball.net/linked/2013/09/25/instagram

分析決定對錯並不重要。如果你不喜歡這個設計，那我說這個設計決定是對的也於事無補。反之亦然。

每一個設計決定都是妥協與讓步的產物，這次 Instagram for iOS 7 的圓形頭像也不例外。

上圖中，左邊是 Instagram for iOS 7 圓形頭像的效果，右邊是不變動其他界面元素的情況下，將原型頭像改成方形的效果。

可以注意到，這版 Instagram 中非常重要的一處改動是去掉了 feed 中照片左右的空白邊距。這個改動非常好，既與 iOS 7 系統整體風格相符（Photos 和 Music 里都採用了這個設計），也更突出內容。這樣一來，方形頭像的顯示效果便有些尷尬，若要優化，可能做如增大上下間距這樣的調整，但其實效果都一般。圓形頭像不但沒有這個問題，且視覺效果很好，與界面其他元素搭配起來也很協調，也與 iOS 系統風格相符。

總結起來，使用圓形頭像的優點有：

好看
與 iOS 7 系統風格相符

現在我們來看看缺點：

打破了用戶對自己頭像顯示效果的預期（最嚴重的問題）
各平台顯示效果不統一（如果要堅持圓形，統一是必須做的事情）
John Gruber 說的，頭像形狀理應和照片一樣，都是方形

用戶在 Instagram 頭像還是以方形顯示的時候上傳了自己的頭像，改成圓形顯示後，不可避免的結果是一些用戶（據我觀察，比例不到 10%）的頭像顯示明顯偏離了他們原本的預期（當然也有超出預期的情況），而這種預期偏離是在用戶什麼都沒做的情況下發生的，這很糟糕。

比如，當用戶的頭像中有較大的矩形元素時，以圓形顯示時會產生比較明顯的顯示問題。像 @mensfashion 的頭像：

這意味著這些用戶不得不更改自己的頭像（如果他們在意的話）。這實在是很糟糕的體驗，尤其當你需要更改的頭像是一個既定企業或組織的 logo 時。

第二個問題是頭像顯示效果在各平台的統一。目前，Men"s Fashion 帳號的頭像只在 iOS 7 上顯示有問題，但在 web 和 Android 界面上都是原來的方形頭像，如果持續不統一的現狀的話，可以想像會有很多問題。比如：一個人從來沒有用過 iOS 7 客戶端，有一天突然發現自己的頭像在 iOS 7 下顯示效果非常差，這種體驗肯定是 Instagram 應該努力避免的。

John Gruber 所說的問題在我看來不算問題，只能說是他的個人喜好。

綜上，Instagram 的設計師非常大膽地採用了圓形頭像的設計，但要做的事情還有很多。

幸運的是，Instagram 不是一個用戶會因為自己的頭像顯示難看就拋棄不用的應用，他們會花上大把時間，直到找到他們滿意的新頭像。

不是的。題主應該意識到 iOS 7 統領下，蘋果產品的 UI 風格和硬體設計都是離不開圓形這個元素的，例如 5s 的 home 鍵（同心圓）、5c 的洞洞套、 iOS 7 中的撥號界面、日曆界面、控制中心的按鈕、自帶圖標的圖案設計也是基於圓形。所有圖標框架也是 squircle（並非之前的圓角矩形），這樣在被毛玻璃蓋住時，才會呈現一個個模糊的彩色圓點。從圓角矩形到 squircle 的轉變可以看做是從純方正到純圓的突破性方案。

所以原則上講，任何 iOS 7 下的 app 頭像、甚至按鈕採用圓形或 squircle 都並無不妥，只要整體 UI 風格是順應 iOS 7 的方向。但是頭像這個東西個人認為 squircle 是比純圓更好的解決方案，畢竟在裁圖和頭像內容選擇上純圓有很大的限制。

感覺這個問題被複雜化了

圓頭像的優勢在於親和力與頁面的設計配合，這種也是眾口難調的，在很多方塊頁面中使用圓形元素可以提升整個頁面的優雅與親和（沒法量化，個人喜好），你想像一下全盤都是方塊的感覺，比如某些android rom，感覺進去就像進入了一個電路圖……

圓頭像的劣勢也就在於裁剪方面，比如圖片帶了邊框會被裁剪，以及如果照片主體在外面可能被切個半張臉，但是so what，圖片去適應設計就好了，設置頭像的時候裁剪的時候為什麼不能出現一個圓形框用戶去縮放裁剪呢~

這種沒有太多理性考慮，不然藝術家都要瘋了~

@薛天祿分析的挺好的~ 圓形圖標在ios7上還有一個小的好處就是，在被透明導航條blur效果要比方形的好，因為圓形blur後更均勻

好多新的東西都用了圓形的了，G+，易信都是圓的。個人覺得圓的比較萌...建議知乎也改成圓的謝謝..

頭像在網上並不屬於【圖片】圖片了；而是代表一個【人】。

眾所周知，圖片或照片是方的，而人頭呢，圓的。

為了讓頭像和圖片這兩種屬性不同的東西相區別，頭像就做成圓形的。

看到樓主所說的問題，忽然想到最近的微博主：【江寧公安在線】，頭像變圓後變成【遼寧公安】了

APP 上面圓形的挺好看的，也順手換了一個新的個人頭像（原來的是右邊這個兔子圖標，兩手抓著底部邊框，不適用於圓形）
結果剛剛上了網頁板的 instagram 出現這個悲劇
當然不去新版本 APP 做裁切頭像動作的話就還會是方的（web）跟圓的（app）共存
默默等改版修正