今天從 10 個維度，聊聊 Instagram 這款軟件整體的設(shè)計與體驗那些值得學習的地方。

更多關(guān)于 Instagram 的干貨：

一、Logo 的變化

下圖是關(guān)于 Instagram 的從 2010-2022 整個圖標變化的過程，從中能發(fā)現(xiàn)：

1. 圖標從擬物的風格慢慢變成扁平的風格。
2. 從具象的相機變成更加簡約線形的相機圖標。
3. 顏色越來越艷麗、明亮，給人年輕、炫彩、簡約的設(shè)計感受。
4. 從 logo 的變化中能看出頁面將從擬物的時代跨進了扁平時代，也能折射 Instagram 界面必將是往極簡、炫彩的方向走。

二、圖標設(shè)計

我重新臨摹 Instagram 啟動圖標，發(fā)現(xiàn)里面有許多的設(shè)計小知識點值得學習。

例如：圖標背景顏色有黃色、紅色、紫紅色、紫色，相鄰的兩個顏色互為鄰近色，使得繪制出的背景自然而炫彩，非常不錯的設(shè)計，漸變的融入也很自然。

當我們自己做漸變的圖標背景時可以用兩兩相鄰的顏色，讓漸變?nèi)谌氲母匀弧?/p>

三、顏色的規(guī)律

明顯的發(fā)現(xiàn) Instagram 顏色跟色譜的規(guī)律一致，顏色從左到右色相的變化值在 50 度左右，4 種顏色都是用的高飽和度、高明度的色彩，非常艷麗、明亮，利用漸變附在英文上做出英文版的 logo。

iPhone 14 的字體漸變也是用的這種方法，利用兩兩鄰近的顏色來做漸變。連蘋果、Instagram 都在用，趕緊學起來吧，你也可以的～～

四、圓角的設(shè)計

1. 通過自己仔細的觀察發(fā)現(xiàn) Instagram 攝像頭圖標圓角是帶有平滑過度的圓角，和普通的圓角不一樣。
2. 平滑圓角給用戶的感受會更舒適、平滑、有活力，而普通的圓角顯得更加生硬、不自然。
3. 蘋果的主題圖標都是帶有平滑過度的圓角而不是一個普通圓角，使得圖標顯得更加自然。
4. 可以去看看之前原研哉幫小米設(shè)計的 logo，會發(fā)現(xiàn)他們的 logo 給人干凈會更加有活力、生命力，而不是使用這種普通圓角，而是一種平滑過度的圓角～

關(guān)于蘋果圓角的詳細介紹：

五、主界面的分析

1. 從 Instagram 的啟動頁面看出，Instagram 追求的是簡約、突出品牌色的方向。
2. 主界面主要以用戶發(fā)的圖片為主而不是文字，往往圖片比文字更容易產(chǎn)生閱讀與反饋。
3. 整體的界面簡約、素白，圖標都是統(tǒng)一用黑色線條的描邊。
4. 當自己關(guān)注的用戶，發(fā)了一些視頻，頭像上附帶 Instagram 的品牌色的圓形，在白色的界面用品牌色進行了點綴，讓單調(diào)的界面更具有識別性。

六、界面布局分析

Instagram 的發(fā)現(xiàn)頁面做的很不錯，我重新繪制了這個頁面，發(fā)現(xiàn)系統(tǒng)想推送給你的圖片或者視頻會做等比放大 2 倍處理，一屏顯示圖片或者視頻至少有一個最大顯示，給用戶的感受是有主次。同時開發(fā)也能很好實現(xiàn)這種布局，具有一定的規(guī)律性。

七、輪播點的設(shè)計體驗

在 Instagram 界面當用戶發(fā)的圖片超出 5 張時，圖片下方的輪播點會出現(xiàn)變化，有大有小。

我重新繪制了一個用戶發(fā)的 7 張圖片的示例，當用戶在左右滑動圖片時，輪播的點會跟著動，同時會有大小的顯示，暗示用戶后面或者前面還有多張圖片，有近大遠小的感覺，非常細節(jié)的設(shè)計。

八、設(shè)計的細節(jié)

1. 在 Instagram 的用戶界面，視頻、多張圖片、單張圖片和置頂 4 種狀態(tài)右上角有個圖標的標識，讓用戶清晰知道圖片的內(nèi)容狀態(tài)，提前給用戶有個心理預期與區(qū)分。
2. 當用戶點擊進去類似抖音的布局，可以進行上下滑動切換視頻內(nèi)容，雙擊可給該視頻點贊，整體的體驗很絲滑，沒有任何的卡頓與拖沓。同時界面圖標用線性的形式，布局統(tǒng)一、和諧。

九、圖標風格

Instagram 整體的圖標設(shè)計是線性的圖標，線性圖標給人的感覺是可點擊、可操作的，同時感覺簡潔明快的氣質(zhì)。圖標的統(tǒng)一讓每一個界面的視覺感受都是一致的。

十、經(jīng)典界面

這個界面放在你面前可能都會知道是 Instagram 這個應用，這個界面框架已經(jīng)形成品牌意識。

Instagram 一直沒有更改這個布局，非常經(jīng)典的設(shè)計，沒有太多花里胡哨的圖標與信息，只有簡約的線性圖標與用戶發(fā)布的圖片，克制的設(shè)計。也有很多相機應用、戶外廣告都借鑒了 Instagram 布局，已經(jīng)在用戶的心智里面了～

總結(jié)

1. 越來越多的企業(yè)的品牌色往鮮艷的方向走，突出品牌形象。
2. 圖片的排版不一定是同樣大小的，可以有大有小，取決于更想給用戶傳達什么。
3. 圖標的統(tǒng)一性很重要，當整個 App 的圖標風格都一致時，給用戶的體驗的感受也是一致的。
4. 不斷重復一個設(shè)計框架、設(shè)計組件時，會形成品牌意識，讓用戶記得你的產(chǎn)品。

感謝大家閱讀，希望大家喜歡，后面不斷輸出好的文章與作品。