如何評價 Instagram 新的品牌形象和界面設計？

12-13

補充一個信息：
《 INSTAGRAM
BRAND GUIDELINES V1.1》http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram%20Guidelines_v1b.pdf

Instagram 早就該換 App icon了。
是因為它在鋪天蓋地的拋棄視覺 Z 軸的抽象表現主義設計風格中依然採用富有體積感的偏寫實風格么？
並不是。
是因為原先的這版 App icon 做的不夠好。

記得沒錯的話，其實上一版本的 app icon 也就是上圖，已經是 instagram 的第三版的圖標了。最初版是由他們的 CEO 親自操刀的一個純模仿 Polariod SX-70 的造型。

首先，初版的 instagram 誕生時 iOS 上的拍照應用們普遍長的都大同小異，「圓角矩形里一個至 n 個鏡頭杵在那裡」，就像他們之後版本的 app icon 一樣。初版這個雖然視覺表現技法略顯稚嫩，但勝在造型獨特且可以使人與標榜不羈、時尚的寶麗來一次成像機產生聯想，我想這與它最終從眾多的拍照 apps 中脫穎而出（當然更多的原因在於它的社交分享機制以及濾鏡的優秀），也是存在一定的促進關係的。

當初期階段過去，在獲得一定量的用戶之後，自然而然的產品自身的品牌化需求就更為凸顯出來。所以就急需將這個與寶麗來千絲萬縷的造型逐步的換去。https://www.quora.com/Why-did-Instagram-change-its-iPhone-icon 這是他們 CEO 當時在 quora 的回答，各位也可以在這個帖子里看到中間版的那個 app icon ，和第三版很像似，但是技法上更稚嫩。

好，回過頭來看第三版的 app icon。我說它做的不好是由以下幾個方面。

從我們視覺設計師的角度來看，第三版的 app icon 雖然造型語言、表現技法要比最初的兩版都有長足的進步，但是，它的表現力依然不是頂尖水準的（和產品本身的頂尖地位相比）。打分的話，我個人只能在這個部分給 70分，比及格好那麼一點點，而已。
在我看來這樣的造型和表現方式並不具備充足的品牌感染力，說簡單點，就是不令人印象深刻。

所以我覺得他們早就該更換掉它了。

那麼新 app icon 呢？

個人其實很認可它的線框部分，簡潔、線條流暢、比例也相當好。令我無法理解的只是它的 background color，一個晚霞似的配色。他們的設計領頭人 Ian 在 medium 上的那篇文章中提及這個配色是來自於原先 icon 左上角的彩虹條，但我真不覺得他們有什麼顯性的關係，相比起來，原來的 Layout、Boomerang 和 Hyperlapse 圖標上的配色還更符合一些。再簡單說一下界面呈現部分。
其實界面部分除了配色，關於 layout 的調整並不多，以前存在的問題現在依然存在，比如我始終覺得的 timeline 圖片下方的三個「點贊」、「評論」、「轉發」的 icon與圖片底部以及評論文字間的間距過近，顯得略有擁擠感。
但讓我覺得最有問題還是細節。

某些界面中 indicator 的顏色還是原來的藍色，並沒有替換。（你如果說這是有意為之，那麼為什麼 tab bar 上要出現紅色的 indicator 以及本來 timeline 上的某些藍色元素都被替換了呢？）
Android 版 notification bar 上的圖標還是原來的 glyph。

我覺得，有時間在 medium 上寫那麼一長串闡述自己團隊多麼專業多麼辛苦並且還特意拍了那麼多的視頻，但卻沒有時間將產品的細節部分都打磨乾淨，這怎麼說都無法稱其為專業吧。

Instagram設計組的頭Ian在Medium上發了文章簡單解釋了一下更新背後的理由：https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community-84530eb355e3#.jo1dqsemb

簡單概括來說，他們想讓Instagram看上去更現代（Modernize）。他們一開始用了大概所有人都能想到的辦法，就是把之前擬物化的質感Icon拍平（Flatten）。他們發布的視頻中爆出了設計師的一些早期嘗試，我簡單截取了幾張（因為是快速飛過效果，所以有些截圖比較模糊，見諒）

可以看到，設計師一開始走在了一個常規的不太會犯錯的路上。但正如視頻里暗示的，這套設計方案在發給領導層過目之後，受到了一些質疑。Ian的設計團隊也在自問：

Was it better? Would we feel the need to do this again in a year?

於是第二輪迭代開始了，設計師在公司內部做了研究，讓人們用5秒時間畫下對Instagram圖標的印象，他們發現幾乎所有人都畫了以下三個元素：彩虹，鏡頭，取景器。我們可以發現，之後設計師的探索基本就是把這三個元素有機融合。

自此，他們決定把設計的目標定為：

Translate these elements into a more modern app icon that strikes a balance between recognition and versatility.

特地加粗了Recognition和Versatility兩個詞，後面還會提到。

自此，Ian的團隊開始進入更加細節的設計考量：主要是顏色和形狀。顏色——按照Ian的文章所說，他們希望表達「溫暖」和「有能量」這兩個意象。形狀——他們試圖做的是在抽象和具象之間尋找一個平衡點，而其中很重要的一個目標是讓這個形狀在未來幾年依然可以使用。

貼幾張視頻里放出的設計稿，我猜測這些設計稿是在這個階段產生的，大部分都基本符合設計團隊制定的目標（那個黑色的是怎麼亂入的o(╯□╰)o）

我不是Icon設計師，只能粗淺地說說自己的看法吧。我很讚賞Instagram設計團隊沒有僅僅停留於把圖標拍平這樣一個顯而易見的方案，最後放出的這一版相較之前那個已經深入人心的圖標是天翻地覆的變化，這樣的改變需要設計團隊巨大的勇氣和自信。

回過頭去審視他們當初制定的目標—— recognition and versatility。我認為他們基本達成了當初的目標。使用簡單的圖形，去掉了擬物化的材質，新的圖標在Scalability和Versatility上有了很大的進步。但另一方面，強烈的漸變背景色加上白色圖形與之前的圖標相去甚遠，對Recognition而言是一個巨大挑戰，它需要時間去重新獲得用戶（尤其是重度忠實用戶）的接受和認可。

哦對了, 我非常喜歡http://Instagram.com上對於新圖標的使用，充分證明了新圖標的versatility！

------

然後說說UI，總體上來說，我個人喜歡這套全新的UI勝於新的App Icon。

總結一下這幾屏iOS UI的變化：

首頁最明顯的兩個改動是Top Bar和Bottom Tab Bar。頂部藍色沒有了，底部Tab Bar也不再使用深色背景，照相機也不被突出了。
Tab Bar統一使用Outlined Icon，在選中狀態下使用Filled Icon——遵循了iOS Human Interface Guideline（https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html）
用戶名稱從藍色變成深灰色，使用加粗字體來提供可點擊的Affordance（沒了藍色，在Activity信息流中，圖片和視頻相對更明顯了）
把其他藍色鏈接（比如首頁的 See All Suggestions）變得更深了、飽和度更低了，相對的也就更不明顯了。
Activity頁面去掉了Header，只保留了頂部的兩個Tab，內容空間更大了。
大量的UI Text從全部大寫變成了首字母大寫，增加Readability，減少Prominence。

除了遵循平台設計規範，大部分改變都是為了讓內容更突出。更確切的說，是為了突出Instagram這個產品最最核心的東西——照片。這次UI改版有明確的設計目標，執行也很具水準。我唯一不確定的是除去藍色，轉而使用加粗黑色字來表示「可點鏈接」這一步——有待數據支持吧。

去年Google更新品牌標示的時候，Tobias van Schneider曾經寫了一段話給Google的設計師們，貼過來作為結尾。

Dear Google Designers,

NO ONE has ever designed a digital identity at such a big scale. No one knows better than you. Keep on rocking!?

No one even remotely knows the implications and challenges of implementing a digital identity, not only across an internal team of ~60.000 employees but also across so many public touch points worldwide.

Designing a logo that goes onto a beer bottle is one thing, designing a digital identity for billions is a completely different story.

Please keep sharing your learnings with us, because I know it』s a process that will never end.

但凡是 Instagram 的用戶，昨天肯定都看到了 Instagram 更新後的新版圖標，三年之後，Instagram 終於放棄了擬物化的圖標，換上了迎合時代審美的扁平化圖標。

不過，大家似乎一致對新圖標的大漸變色頗有微詞，一時間國內外一片吐槽，重新點燃了社區中「我為 Instagram 設計新圖標」的運動 #myinstagramlogo。

於是，Instagram 的設計總監 Ian Spalter 不得不站出來，揭密 Instagram 新版圖標背後的故事，標題也取得非常巧妙，叫做「Designing a New Look for Instagram, Inspired by the Community」，我覺得全文最出彩的地方就是標題這裡的「Inspired by the Community」，一下子給 Community 背了好大一個鍋。

甚至，Instagram 之前這款經典圖標的設計師 Cole Rise 也出來為 Instagram 背書，關於新版圖標，他是如此評價的：

I love the minimalism. Regardless of the colors behind it, the white shape — the actual bones of the new symbol itself — is beautiful, and I think that can persist over time.

這段話中最大的亮點莫過於「Regardless of the colors behind it」，這潛台詞是不是 Cole Rise 本人對背景色也同樣持有保留意見呢。

今天，我們就圖標與 Logo 展開，談一談到底怎樣才算得上一個好的圖標。

好圖標不一定是好看的圖標

我非常想先強調這一點，「好圖標」和「好看的圖標」之間，有時候沒有必然的關係。圖標甚至在很多時候，是不具有審美意義的，這也是為什麼我們有時候會說，設計本身並不是一種藝術。

一個好的圖標，好看可能只佔著非常小的考量因素，那麼評價一款圖標最重要的標準是什麼呢？我個人覺得是辨識度。

想當年，iOS 7 剛推出時，同樣是罵聲一片，但漸漸的，你只要給主流人群足夠時間，他們會自然地習慣，這種習慣背後深層的原因是，對風格和設計語言的接受。但是圖標會更艱難一些，畢竟在那麼小的尺寸上，設計師很難系統性地展現出成體系的風格和設計語言，這對圖標的設計其實提出了更大的挑戰。

拿起你的手機，看一看桌面上的那些各有特色的圖標，誰不希望能給你留下深刻的印象，在眾多圖標中脫穎而出，讓你能夠注意到。其實如果你仔細觀察，你會發現當下的圖標無非分為這麼幾類：

強調線條和形狀：例如 Airbnb、Keep、即刻、雪球、Uber 等等，無不是從這個角度出發，以一種特定的幾何線條，來建立起自己的品牌辨識度。即使回到現實生活中，這樣的例子也比比皆是，比如像運動鞋品牌，人人眼前都會浮現出 Nike 的勾。但是，隨著消費主義的盛行，越來越多的品牌開始入侵我們的生活，想要建立起一套獨立且有區分度的幾何形狀，已經變得越來越難。於是你看到有些 App，沒錯我說的就是支付寶、豆瓣、知乎之類的 App，直接簡單粗暴地用中文字作為圖標的主體元素。

使用意象和標誌物：幾何形狀雖然簡單，但的確很難建立良好的區分度，於是你看到另一類 App 走了另一條路，使用具體的意象和標誌物。換一種說法，你可以認為擬物設計的時代，包括 Instagram 的經典老版圖標，都是採用這種方式：即通過對現實或已經存在事物的映射，建立起自己的品牌標識，最經典的例子莫過於 QQ，小企鵝的形象已經深入人心。

建立品牌色彩：色彩有時候是和前兩者共同運用的，比如 Airbnb 粉、知乎藍、微信綠等等，這些色彩都已經深入人心。不要小看色彩的力量，有些時候僅僅只通過色彩，你也可以建立起對品牌的感知效應。比如我僅僅把這四種顏色排列在一起，我打賭你已經想到了 Google。Instagram 這次的新圖標，從某種程度上來說，也是希望通過幾何線條 + 大膽的色彩運用，來給人留下深刻的印象。唯一失算之處應該在於，國內的美拍、潮自拍等應用圖標的顏色，也如出一門。

隨著扁平化設計語言的流行，越來越多的圖標都開始採用線條形狀 + 品牌色彩的方式來設計圖標。這帶來了一個最直接的挑戰，越來越難以形成自己的辨識度。雖然說扁平化和極簡主義兩者之間並不完全等同，但是，很多人追求一個極簡的性冷淡般的圖標，這樣的期望是不切實際的。

辨識度本身是違反極簡主義的，一個商業品牌絕不想自己隱藏於無形之中。試想，Macbook 蓋上為什麼要有蘋果 Logo？甚至在 Macbook Pro 等機型上還有背光燈。如果按照「如無必要，勿增實體」的觀點來看，這個 Logo 存在，甚至還必須發光的唯一必要性，就是建立起面向消費者的品牌辨識度。

當然，越來越多的公司也開始另闢蹊徑地嘗試一些其它辦法來建立起品牌和 Logo 的辨識度。比較常見的做法，目前主要是加入動效和建立個性化元素的情感綁定。例如，Google 的新版 Logo 在發布時，就為自己的 Logo 加入了動畫元素；Uber 的新版圖標，不僅僅在應用啟動時有非常動感的效果，針對不同的城市，還特意準備了不同的紋路和色彩。

遺憾的是，手機桌面上的圖標只能是靜態的，當然，你也沒法想像，要是整個手機桌面上的圖標，都一起跳動起來是一種什麼樣的體驗。

當設計師在設計圖標時，他們在想什麼

當時 Uber 的新圖標發布時，同樣是一片吐槽，不過，設計師真的會在乎用戶的意見嗎？

這個問題比較容易解答：他們不在乎。前面提到了，好的圖標不一定是好看的圖標，這一點作為設計師肯定深有體會。事實上，幾乎每一次品牌升級和圖標更新，肯定都會受到現有用戶的反對和吐槽，這一點都不奇怪，人本身對舊有的既定事物就抱有一定的依賴感，而在你看到這個全新的設計之前，設計師可能已經經歷了無數稿的重繪，天天對著新圖標，他們已經習慣了，甚至看吐了，於是他們堅定地認為，假以時日，你一定也會習慣的。

此外，令我印象非常深刻的事情：Uber 的新版圖標共有 55 位設計師的參與，雖然不知道 Instagram 的新圖標是多少設計師的結晶，但是一個小小的圖標，真的需要這麼多的設計師嗎？

很多人會天真地以為：你看那些設計師寫的博客裡面，各種背後的故事，講述他們是如何將文化理念融入進自己的圖標當中的，這種工作肯定很燒腦吧。事實上，一個小小的圖標，怎麼可能包含和傳達什麼文化或者理念，真沒有這麼神奇。

那麼，他們大部分的時間在幹什麼？這兩張圖能很好地說明。除了一稿一稿地重繪方案外，當確立了一個主要方向後，他們大部分的時間，都在確保圖標和 Logo 的全平台辨識度。

沒錯，這些 Logo 和圖標不僅僅只是停留在你的手機桌面上，他們還可能出現在網頁上、海報上、實體店裡、包裝盒上等等地方，它們會需要適應不同的大小和尺寸，適應不同的屏幕色彩和解析度，適應不同的周邊物體和色彩風格，適應各種實體物料的印刷和製作……

如果不是設計師出身，你可能沒有注意到：一個 1028*1028 大小的圖標，並不只是簡單縮小一點，就能變成一個 80*80 的圖標，當少了那麼多像素後，圖標上的許多細節和紋理都需要重新處理。

像 Uber 的這四個字母，你可能覺得平淡無奇，但是想像一下，如果 iPhone 包裝盒上的 iPhone 字樣中的「i」，如果只是隨便使用了 Arial 字體，那它就不會是現在這樣的小圓點（上圖），而會是一個小方塊（下圖），一時間就和 iPhone 設備本身整體的圓潤感脫節了。點擊大圖，你能感受到這麼細微的不同，卻能帶來如此巨大的感官差異嗎？

為什麼說 Instagram 的新圖標是合理的設計

回到 Instagram 的新圖標，如果一定要我給出一個評價，那麼它是一個達標的，並且合理的設計。所謂達標，通過這樣的線條和色彩組合，的確保留了較高的辨識度。而合理則是一個更有趣的話題，試想一下，如果你是 Instagram 新版圖標的設計者，你會何從下手？

首先，Instagram 經典圖標是一個相機，相機的元素不能丟吧？按照常用的手法，要不就是把現有的圖標直接拍扁，這是最省力也最偷懶的做法；要不就是把相機給高度抽象化，通過線條的形式表達出來。

從 Instagram 公布的設計視頻來看，顯然他們有考慮過第一種方案，但是我相信任何有追求的設計師，都會自我否決這種沒有想像力的方案。

而如果從線條入手，相機的線條，不僅僅是 Instagram 這樣的圖片社區，許多攝像類的 App 同樣也都是相機的抽象。想必希望僅僅通過線條的運用來創造一個獨特的辨識度，是一件不可能完成的任務，這時候唯一理性的做法，就是搭配上色彩的運用：於是 Instagram 最後給出了如此大膽的漸變色方案。

至於一小部分用戶吐槽新版圖標和應用內的界面改版風格脫節，這個指責真的是無理取鬧了。Ian Spalter 在博文中，對這一點還是有非常直接的回應：

While the icon is a colorful doorway into the Instagram app, once inside the app, we believe the color should come directly from the community』s photos and videos. We stripped the color and noise from surfaces where people』s content should take center stage, and boosted color on other surfaces like sign up flows and home screens.

作為一個圖片分享社區，自然在 App 內應該儘可能地讓應用本身趨向於無形，將用戶的注意力全部集中在社區中的圖片上，不然還指望 Instagram 在各處都抹上那抹粉紅漸變不成？

當然，回到圖標本身，說它是一個合理的設計，同時也意味著，這是一個 think inside the box 的設計，如果它想成為一個大膽革新的設計，從第一步就應該拋棄相機這樣的核心元素，才能夠真正有發揮的餘地和空間。

評價一個圖標和 Logo，最有效的方法就是時間，像可口可樂的 Logo 經久不衰，而 Instagram 官方也提到，他們不想設計一款只能用一年的圖標，當一年過後回過去看時，又覺得需要再一次更新圖標。

那麼，你覺得 Instagram 的新圖標，能堅持多久？

本文由【子不語】原創，如果你正在微信中瀏覽，長按下方的二維碼關注我，或者搜一搜微信公眾號：ZiChat。

http://weixin.qq.com/r/xnUwKEjEChV1rQxL9yDU (二維碼自動識別)

補充：

我最喜歡的大哥之一發布了一個我十分同意的視頻

https://www.youtube.com/watch?v=xR3t9SsfHT0

我基本同意他的每一句話，包括他的髮型和鬍子

＝＝＝

新的 Instagram 的圖標以及 UI 比以前好看么？我覺得不比以前好看。

新的 Instagram 的圖標以及 UI 比以前好么？我覺得比以前好。

設計首先是功能問題，其次才是審美問題。而在大部分情況下，功能優先，美學第二。

設計圖標有點像設計旗幟：盡量通過簡單的色塊和標識表達一個清晰的意思。考慮一個圖標是否是個好圖標的時候，我通常有幾點考量：

1. 圖標在各種尺寸下是否都容易辨認

2. 圖標是否能對不同文化背景下的用戶表達清晰、一致的意象

3. 同系列的應用圖標是否有一致性（omniGroup 的圖標們這一點做得很好，實際上這些圖標們符合了基本所有好圖標的要求）

4. 圖標在和其他圖標出現在一起的時候是否和諧

5. 圖標是否方便用戶複製、傳播（試想如果讓你畫一個老的 ins 圖標有多困難）

通常，一個偷懶的辦法是選應用的主色調為背景，然後加上應用的字母。Facebook、Google 以及很多其他公司就是這麼做的。這就好比旗幟設計里，選三個沒有人用過的顏色組合設計出一個旗幟一樣。懶惰但是有用。

另一個偷懶的辦法是，當一個擬物圖標需要重設計的時候，設計師會將這個圖標直接「去材質化」，也就是俗稱的「拍扁」。懶惰但是有時候有用。

Instagram 選擇了比較不懶惰的做法：根據品牌在人群心中的印象，重新設計了圖標（以及旗下應用群的圖標們）。

看一下上面這張圖，發現了什麼？新圖標以及 ins 旗下應用群的圖標們，傳達了一個非常明確且一致的品牌標識和從屬關係，這是之前的圖標們所不具備的。原來圖標中的「彩虹」意象被進一步加重和放大，用戶一眼就能在手機中發現並定位到 Instagram 系列的應用。

從以上的幾點來看，新圖標系列比舊圖標系列不知道高到哪裡去了。

下面再說界面：

Instagram 是一個圖片社區，所謂「減少干擾讓用戶更關注內容」的說法，我想也是老生常談了。新的界面讓我想起家裡掛上照片的白牆，或者是畫廊的白牆（這算不算一種「現代」的「擬物」呢科科）：

很明顯，Instagram 想要進一步著重社區內容，弱化 UI 的干擾。我支持這樣的做法。舉六隻手支持。

BTW：Instagram 的網頁版本也同步更新了，貌似沒有什麼人關注呢...

註：以上部分圖是從谷歌偷來的

先說結論：我接受了！

作者：diff
鏈接：也說說 Instagram 的新 Logo。先說結論：我接受了 - Diff Talk - 知乎專欄
來源：知乎
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

不知為何，我對新設計的接受度、包容度越來越大了，從 Airbnb、Google、Medium，到今天刷爆設計圈/文藝圈的 Instagram Logo。

Twitter 前設計總監 Doug Bowman 今天發了一推，我表示認同：

Logo redesigns follow the 80/20 rule. On reveal, 80% hate the new logo, 20% love it. Two years later: 20% still love it, 80% don』t care.

我的翻譯：

新的東西，總是有 80% 的人唧唧歪歪，20% 的真愛；兩年後，20% 依舊真愛，80% 早就習以為常了。

有人記得天貓 Logo 推出時，人民大眾、專業人士的反應嗎？丑爆了！可如今，天貓 Logo 不僅深入人心，而且品牌應用玩得很不錯。

所以，對於 logo 設計，特別是 logo 重新設計，我的結論是：

不要太在乎外界的聲音。世界人口太多，總有褒貶。團隊想清楚就好；
然後，閉著眼睛、咬緊牙，執行下去，直到把 logo 及品牌玩出花；

最後，我相信，Instagram logo 將會是非常成功的 logo 之一。

封面引用：https://www.instagram.com/p/BFR39TWLeEP/

大家說了很多，我在這就談一點：
新 Icon 和 UI 看上去不和諧的問題（其實並不是）。

一、新 Icon
關於新 Icon，我丟幾個關鍵詞出來就行了：「豐富的色彩（彩虹）」、「鏡頭」、「現代」、「產品線統一」。

二、新界面
再來看下 app 界面。
我們發現新 icon 雖然色彩豐富，但是界面卻是「冷淡」的黑白色，這是品牌不統一嗎？

Ian 在文中給出了答案：https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community-84530eb355e3#.ijdfzqmhv

While the icon is a colorful doorway into the Instagram app, once inside the app, we believe the color should come directly from the community』s photos and videos. We stripped the color and noise from surfaces where people』s content should take center stage, and boosted color on other surfaces like sign up flows and home screens.

簡單概括就是雖然圖標色彩豐富，但是進入 app 後，設計師們更希望這個「豐富的色彩」由社區內容來體現。因此將 UI 「去色」，讓人們的注意力更聚焦在照片、視頻這些內容上。

挺不錯的答案，不是嗎？

三、一些思考
我完全能夠理解設計團隊如此考量的初衷，因為我自己也是個「不把界面本身當做設計重心」的傢伙。UI 設計應該以人為起點，為產品和內容服務。

他們這次改動說實話挺讓我震驚的，乍一看，彷彿我們所說的品牌一致性都丟失了。但實際上，卻從另一方面體現了那份潛在的「品牌」。讓人震驚又佩服罷。

「異能電台」有一期 James 說過一個點：「品牌就像水一樣」。這句話令我非常有感觸，很多時候品牌看似無形，但卻無處不在。
而在這次 Instagram 改版中，我覺得這個說法也是體現地淋漓盡致。

此時無聲勝有聲。

共勉。

感覺到了足療保健的門口，進去看看才知道，原來是個牛郎店。

「最近社區活躍度有所下降，需要想個辦法改變。」
「改版吧，為了讓大家一眼就能看到，主要把圖標改丑些，形成反差，這樣大家都來罵，活躍度立馬就上去了。」

如果非要改成這種的話...為啥還不搞統一

其實不只如大家抱怨的背景色丑
主圖形也丑，圓角方形圖案與icon邊框重合，顯得多餘，線條太粗，顯得很肉，暫且委屈一下iTunes換了ins的背景，iTunes依然是很清爽的

另外背景色邏輯也不知所謂，底部亮黃色疑似模仿光源，但是藍紫黃色卻又沒有光源，莫名奇妙，作為一款攝影類app，取色審美這麼差，而且也不符合攝影規則，色調突兀

Apple家的app中也有許多背景漸變色+白色圖案的，但是背景色只有一種顏色，深淺漸變，「音樂」的圖標是iOS9中唯一有多種顏色漸變的，但是在主圖形內，而且也不顯得那麼基

打開app就能看到圖標中顏色的來源，有所呼應

我剛剛寫了篇相關的文章，但是我並不是在評價這個新版本身，而是想聊聊「設計」和「藝術」。原文如下：

我作為一個早已不再「文藝」的人，已經很久沒用過Instagram了，雖然當年我也很喜歡這個app。但是今天發現朋友圈被Instagram的新圖標刷屏了，想到自從做產品策劃以來，很久沒聊過設計了，今天順著這個話題聊聊久違的設計。

上圖：在Instagram的Blog上，用戶對於新圖標的評論，很多人表示不喜歡。

首先，我們看看Instagram新舊圖標的對比：

僅從視覺角度看：

舊圖標明顯的「擬物化」風格，而新圖標更加「扁平化」
舊圖標線條繁複，新圖標線條異常簡潔
就圖標保留了擬物化中「原物」的紋理，新圖標使用了大面積的漸變色填充

其實每一次遇到這種大家常用的產品的重大改版，都會有很多人不喜歡。不論你認為「這屆用戶審美不行」，還是「未來是扁平化的世界，一切視覺元素都應該被拍平」，亦或是「我們還是要鼓勵創新的」，都不重要。因為不出一個月，大家就不會再去討論（甚至已經懶得去罵）這件事情了；幾個月之後，並不會有人因為不喜歡新版圖標而停止使用Instagram。最終，新版十有八九是「成功」的被大家「接受」的。

所以，我對於圖標本身的改版，一點兒興趣都沒有。我想跟大家聊聊「設計」和「藝術」。

我見過的絕大部分人，甚至包括很多設計師，是把這兩個詞做近似甚至等同來看待的。於是你經常能聽到類似這樣的表述：

「來，小陳，用你藝術家的眼光，幫我美化一下這個PPT。」（小陳是個設計師）
「哎呀，你這個海報做得太藝術了~」
「harry啊，我這有份美院油畫系同學的簡歷，你們不是在招設計師嗎，你看看合不合適？」（但是，我招的是交互啊...）

諸如此類。

雖然說，根據藝術史的記載，表面上看狹義的設計與「藝術」是有著千絲萬縷的聯繫，但是如果從當代的標準來看，我認為：「設計」跟「藝術」幾乎一毛錢關係都沒有！因為這兩者最底層的邏輯、功能和出發點是完全不一樣的。

「設計」意味著，你的作品是要給人用的。所以你最優先要思考的，是用戶場景、功能和用戶的邏輯。你所產出的「設計」是為這三者服務的。並且「設計」是一個涵蓋面很廣的名詞，大多數人印象中的基於表現層的，為了讓一個東西「好看」而做的事情，只是「設計」的一小部分而已。我多次舉過鄧公的例子，我們說他是「改革開放的總設計師」，這裡的「設計」就跟大多數人印象中的「設計」完全不是一個意思。

而「藝術」則不一定，藝術可以不為任何人或物服務，藝術家的作品可以僅僅為了表達自己想表達的東西，可以只「裝x」不推廣不賺錢不需要丫喜歡或者欣賞。但是，即便還是討論美術範圍內你印象中的那些「藝術品」，它們有一部分最開始其實是「設計」出身（為「神」服務、為某個有錢人的夫人畫肖像之類），隨著時間的流逝，當原有「設計」所涉及的「場景、功能和邏輯」漸漸被歷史隱去，大家才把這些作品當成了「藝術」。我斗膽推斷，這可能是很多藝術家生前貧困潦倒，死後其作品價值連城的其中一個原因。

對於互聯網產品來說，更是如此。

幾乎所有的互聯網產品都是給人「用」的，而不是給人「欣賞」的。所以互聯網的「設計」，一定是為產品、功能和用戶場景服務的。即便是一個「視覺設計師」，他的主要工作也並不是為了把UI變得「好看」，而是「使用視覺元素去更好的表達其產品的功能、流程和邏輯」，相比之下，「好看」只是一個優秀的視覺設計師的副產品而已。

說回Instagram，一個圖標所承載的「功能」是什麼呢？可能是「讓用戶賞心悅目」，可能是「識別性」，可能是「傳達品牌感覺」。

我個人覺得新版Instagram的圖標線條還是挺不錯的，我也挺喜歡「扁平化」風格，重要的是，作為「品牌」的承載，其擴展性遠超經典版本。可是，我覺得背景的漸變色很詭異。同時，其圖標本身是一個接近圓角矩形的圖形，外面再套一層同樣的圓角矩形漸變區域，顯得更加詭異。其實，我覺得這並不是「扁平化」惹的禍，而恰恰是其經典版圖標過於「擬物化」所留下的後遺症。

如果把新圖標背景漸變色去掉，它就會變成這樣：

如果再把這個圖形與其他類似的線性圖形放在一起，識別性和品牌感就會大打折扣，感覺並不是一個品牌圖標或者Logo，而只是一個簡單的圖形元素。正因為經典圖標的形象太過於擬物化，太過於容易喚起用戶對「拍立得」的認知，在此基礎上，Instagram團隊或許希望更加強化其品牌，所以，他們的方案是加這個詭異的背景漸變色...

以上關於Instagram當然是我YY的。但我覺得有一點是確定的，那就是：互聯網的「設計」，一定是為產品、功能和用戶場景服務的。Instagram的新圖標可以說做到了這一點（功能就是：更加突出其品牌），雖然換來的是一片罵聲。這件事兒，本質上跟「腦白金廣告」、「羊羊羊廣告」是一樣的，雖然大家在罵，但是我想送禮的時候，真的會考慮腦白金。因為我只知道這玩意兒啊。只是，我覺得Instagram團隊應該可以做得更好才對。

正好在看Medium上關於Instagram的文章，學習 @尤文文老師的習慣，做了一些讀書筆記，這個問題嘗試著答一下吧。
這兒推薦兩篇文章，一篇是Instagram的創始人Mike Krueger寫的《Five Years of Building Instagram》:https://backchannel.com/war-stories-3696d00207ff#.e0jnfiqjw
裡面提到一句話：

Our mantra, 「Do the simple thing first」 took shape during these first weeks and months. Since there were only two of us, we had to determine the fastest, simplest fix each time we faced a new challenge.

因為Instagram最早是個初創公司，人很少，所以當他們面對一些挑戰的時候，他們會先從簡單的事情入手，這就是他們日後的企業文化。

另外一篇就是高票回答里 @RiceMan 提到的Instagram的設計師Ian寫的文章《
Designing a New Look for Instagram, Inspired by the Community
》：https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community-84530eb355e3#.9dxd5mut8
看了一下自己的讀書筆記，有一些和 @RiceMan的有重複，我就挑一些自己的感想來說吧。

針對新的圖標
Instagram原來的Logo是擬物化（Skeuomorphism)的，細看這個Logo，其實是很複雜的，相機的質地，鏡頭每一層不同的質感，光線在鏡頭上的投影,覺得不複雜的朋友可以自己畫一下試試看。擬物化的好處就是這個圖標看上去很真實，同時讓人感覺是可以觸摸的。但是擬物化早已不再是如今的潮流，如今的潮流是扁平化（Flat)。

這群設計師們第一步就是把所有其他的裝飾去除，然後將這個圖案扁平化。個人認為，這其實就是「Do the simple thing first"的體現。如果就是簡單地將這個圖標扁平化，設計出來的圖標可能會讓用戶們覺得更加好看，用戶的反饋也恰恰如此，這其實充分體現了設計師和普通用戶們在對待這個圖標上思路的不同：

設計師的思路是：發現老的Logo存在的問題，給新Logo的設計制定目標並且達成目標。
用戶們的思路是：新Logo要好看。

在這群設計師的目標中，圖標好看並不是一個最重要的目標，他們的設計目標是：

We decided to translate these elements into a more modern app icon that strikes a balance between recognition and versatility.

我個人的理解是，這個新的圖標需要有一定的辨識度和多用性。他們也同時提到，這個Logo做得太抽象，就和Instagram的歷史以及品牌含義背道而馳，做得太如實，又基本上看不出變化。
最後他們決定採納最廣為人知的兩個元素：相機＋彩虹，設計出了現在的這個Logo。最後的設計確實滿足了他們最早設定的目標，至於用戶不能認可這個問題。個人認為，用戶的審美是會發生變化的，看多了也就自然會喜歡了。

針對新的UI界面
大家公認的是，新的UI比新的Logo更受歡迎，新的UI很好地體現了極簡主義，將多餘的顏色和能夠產生干擾的元素全部去除，同時又運用了iOS和安卓原生的字體，元素，目的只有一個，就是為了更加突出Instagram里用戶所產生的內容。
設計師的考量在此：

Working to create something simple and clean so that people』s posts are the focus in the app. While the icon is a colorful doorway into the Instagram app, once inside the app, we believe the color should come directly from the community』s photos and videos.

新的圖標已經花里胡哨的，所以把產品內的用戶界面就盡量簡單，在app里，這些顏色應該直接從社區里的圖片和視頻來，簡而言之就是，logo要抓人眼球，但是產品內是要突出內容。

再來談談我個人的感想，互聯網產品中的設計，作用不僅僅是設計出好看的產物。在不同的階段，不同的人對於設計有種不同的理解，作為一個菜鳥級別的UX Designer,我的理解是：
設計更像是一個找尋解決問題的方法，並且做決定的過程。一切的設計，都是為了產品的可用性，更好地實現產品的功能而服務的。
Instagram這個設計團隊在重新設計品牌Logo和界面的時候，很好地體現了這一點。

原先的識別度

現在的識別度

以為被美圖收購了.

很多人都說丑，我覺得其實是先入為主。
不過ins以前的圖標真的是太經典了，特別是那條彩虹，和有點皮質感的背板。
現在的新圖標感覺很怪。
作為一個安卓粉，我喜歡下圖這種（圖片來源網路，侵刪）
這種淡淡的陰影，還有淡淡的高光浮雕，真的很美很有質感，如果改成這樣我能接受很多。

補充：
圖片源自國外動圖

從這種畫一坨然後強行賦予其豐富內涵的手法來看，我認為是Uber的設計師跳槽去了Instagram。

先說結論：思路是對的，做法欠妥當。

一、新圖標存在的問題

如果這個圖標只看黑白稿的話，非常好，簡單明了，符合「用腳在沙子上都能畫出來」的原則。

但是，一旦弄成彩色的，問題就暴露出來了。白色的線形圖標，放在多彩的漸變色背景上，瞬間變得複雜，難以理解了。

為什麼說新圖標難以理解呢？有兩個原因：

1、背景干擾了圖形的識別

首先，顏色和形狀，這兩者之間是毫無關聯的疊加在一起的，那用戶的注意力應該放在顏色上，還是形狀上呢？彩色背景就成了干擾。

我們先來看一個正面的例子 -- NBC 的 logo，顏色和形狀是統一的，非常利於識別。

再來看看 Instagram：

黑白稿由於沒有背景，非常容易識別。純色的背景次之。彩色背景太搶眼了，你肯定無法忽視他。你要避免搶眼背景的干擾，再把圖形認出來，這是有些困難的，需要稍微提高一點注意力才能做到，所以最難識別。

有人跟我抬杠說：「我能識別出來啊，彩色背景對我沒有影響啊」。我不懷疑你的視力，你當然能識別出來啦，我不是在說「能不能」的問題，而是在說「識別效率」的問題好嗎？

2、圖形的空間關係模糊

p.s. 為了方便解釋，我把圖標加上了注釋。有兩條白線：內圈、外圈。這兩個圈把漸變背景分成了三個區塊：從外到內是1、2、3區。

上圖中的1、2、3區之間是什麼關係呢？

從設計者的角度來看，1區是相機的外部，2和3區組成了相機的內部，即 1 + ( 2 + 3 )。但是用戶的理解未必是這樣的，也許是1、2、3區各自獨立，既 1 + 2 + 3；也可能是1和2區作為外部，3區作為內部，既 ( 1 + 2 ) + 3。

設計者想要表現的空間關係，並不是那麼理所當然的，用戶可以有他自己的解讀，你自己沒有交代清楚，就不能指責用戶「你理解錯了」。

二、可以做得更好

我認同Instagram設計團隊的想法，他們們讓Instagram看上去更現代，讓這個形狀在未來幾年依然可以使用……這些都沒錯，但我認為他們可以做得更好。

那個介紹新圖標製作過程的視頻，就像是在說：「你看，我們已經這麼認真，做了那麼多稿了，這一稿是其中最好的，我們決定就它了」。我想說：「為什麼不多嘗試一下，也許會更好呢？」

於是我隨手做了四個圖標，顏色和圖形都沒有變（請見下圖）。

這幾個圖標我只是花了十來分鐘隨手做的，我沒收 Instagram 的錢，沒義務做得多漂亮。我只是為了說明，前面提到的兩個問題，都是可以解決的，非常簡單就能解決，但 Instagram 卻沒有去解決。

三、新UI與新圖標是割裂的

想要更加突出內容，讓用戶把注意力放在內容上，而不是在UI上，這個思路是對的。但是，我想問，你App的主色是什麼？沒有。這對品牌的塑造是很不利的。

用戶對品牌的視覺形象印象最深的就兩點：形狀和顏色。

形狀，上面已經提到了，在彩色背景下，形狀的識別度被弱化了，而且這個形狀只出現在圖標上，作用有限，就像一條瘸了的腿；
顏色，好傢夥，把主色都幹掉了，相當於把另一條腿給砍了。

雖然網友們潮水般的吐槽，可排名在前頭的答案，卻是清一色的叫好，理由是：「不比原來的好看，但是從品牌的角度來講，比原來好多了，更加時尚，簡單，更加具有識別度和擴展性。」

無論是形狀、還是顏色，都有很大缺陷，你說這樣對品牌好，說不過去吧？

你在地鐵里能一眼就認出身邊的人在用「網易新聞」或者舊版的Instagram，你能一眼認出新版的Instagram？

你要更突出內容，沒問題的。你要減少UI的顏色，盡量用黑白灰，也沒問題的。但我認為始終要有主色，例如藍色或紫色，與圖標有點呼應。「點題」和「呼應」，這在小學語文都有教啦。然後，很有節制的，在小範圍使用這個主色，這不就兩全其美了嗎？

你嫌他原來太花，弄成性冷感就行了，沒必要下重手弄成性無能，對吧？

四、結論

Instagram 設計團隊的思路是對的，勇氣是可嘉的，但做法欠妥當。

#最近幾個 app 的圖標改動都讓我覺得，我這種普通人還是不要妄圖進入設計師的腦內世界了吧。

#城鄉結合部農商銀行 app，掃碼下載就送洗臉盆暖水壺食用油！

#對不齊的人行道地磚

#I"m gay and I"m fancy！

這是大躍進的改版，讚賞公司的設計執行力，但是在品牌辨識度，用戶認知度上差了一點。優點是改進了對旗下APP的圖標視覺統一辨識性。對於UI改版，不錯，有些微小東西些許不認同，但整體不錯。

這次更新迎來罵聲一片也是情理之中，畢竟最受歡迎的經典擬物相機被斃掉了。
這情形讓我想起了IOS7推出時的反應。不管最終結果如何，每一次大膽創新的推廣總是痛苦的，相信Instagram設計團隊預料到了這點，但即使如此也依然要迎難而上，因為他們確實有問題需要解決（不以解決問題為出發點的設計都是耍流氓！）。

覺得這次視覺更新可以分為三個塊來討論：
1. 新圖標設計
2. 新漸變色
3. 新UI

1.圖標設計：

舊的擬物相機圖標毫無疑問是一大經典，但是好的品牌設計要能在不同環境下都能有良好統一的視覺效果，所以單色版本是必須的。
讓我們來看看互聯網上目前流行的單色ICON

最左邊的為官方單色圖標，但是依然有很多不同的版本在被使用。
問題在哪裡呢？
- 和彩色版LOGO的差異較大
- 太複雜，識別性較弱
- 正負空間表現不清晰，即不是實心色塊ICON又不是線形ICON
以上問題導致Instagram的ICON形象在每個人心裡並不是很清晰統一。

As a part of our process, we also asked people at the company to draw the Instagram icon from memory in 5 seconds. Almost all of them drew the rainbow, lens, and viewfinder.

Ian在他的文章 Designing a New Look for Instagram, Inspired by the Community里提到，他們團隊邀請了人們在五秒內畫出INSTAGRAM的圖標，發現彩虹條，鏡頭，和取景器這幾個元素是切實被人們記住的，所以便以這些元素為出發點，以及簡的方式設計出新ICON。

簡單，易記憶，5歲小孩也能畫出來。在各種SIZE下都有很高的識別性，可應用範圍非常。

另外，之前視覺難以和Instagram統一的三個APP，也終於能通過扁平化的方式保持一致了。

所以個人認為這次圖標的Redesign是很成功的。

2. 色彩：

相信最讓大家無法接受的就是這次的新漸變色了。
雖然「彩虹」是他們想要表達的元素，然而Ian並沒有在文章中很明確指出為什麼使用這幾種顏色構成的漸變。

但是如果注意Instagram的老Login screen，我們能發現一些線索。

可見Instagram設計團隊在之前就已經有推出彩虹漸變色作為視覺語言的想法了。但是大概由於和之前的BRANDING完全不搭，並無法真正的推廣。
而這次扁平化設計則成為了推廣彩虹漸變的機會，BOOOOM！

然而選擇飽合度這麼高的漸變色確實是一次大膽的推廣。
由於每個人對色彩的喜歡還是相當主觀的，對這點就不多評論了！

3. 新UI：

我認為新UI是一個勢在必行的視覺更新。

Instagram作為一個以照片為主的視覺軟體，盡量減少對內容的干擾是圖片類APP UI的主要任務之一，所以以中性色為主的極簡UI必然是上乘方案。

正如Ian在文章里所說：

While the icon is a colorful doorway into the Instagram app, once inside the app, we believe the color should come directly from the community』s photos and videos. We stripped the color and noise from surfaces where people』s content should take center stage, and boosted color on other surfaces like sign up flows and home screens.

Instagram的Web版實際上已經實施了中性色極簡UI有一段時間了，也為這次更新做了鋪墊。

然而覺得美中不足的是，APP依然使用了Helvetica作為字體，而且在很多地方依然使用很粗的Bold字體，顯得和極簡UI有點格格不入。
相比之下，Web版早已使用了更為現代的proxima-nova

雖然不知Instagram設計團隊是否會在將來在APP里應用相同的字體，但相信Instagram設計團隊會在將來的版本里不斷優化，把新UI做得更好。
總的來說，理解大家一時難以接受的心情，但我還是對這次Instagram的視覺更新持樂觀態度。
因為它不是簡單的對扁平化和極簡化的盲從，而是為了解決已有問題而作出正面改進。

蘋果2013年IOS6升級IOS7，第一次從擬物化改變為扁平化設計，改變初期大部分人不習慣、甚至覺得難看，但隨著時間的流逝及大眾審美意識的提高逐漸成為主流與時尚。相信ins這次的logo升級也是如此。作為全球知名app，我甚至覺得這次的logo升級來得太晚。

反感一個需要設計者出來強行賦予其內涵的icon。

有多少人是因為這外觀買這個拍立得的？