今天和大家分享用了幾年的一個(gè)社交軟件Instagram。發(fā)現(xiàn)這款軟件整體的設(shè)計(jì)與體驗(yàn)有值得學(xué)習(xí)的地方，從10個(gè)維度分享分享，希望大家喜歡啦～～

1.logo的變化

下圖是關(guān)于Instagram的從2010-2022整個(gè)圖標(biāo)變化的過(guò)程，從中能發(fā)現(xiàn)：
1.圖標(biāo)從擬物的風(fēng)格慢慢變成扁平的風(fēng)格。
2.從具象的相機(jī)變成更加簡(jiǎn)約線形的相機(jī)圖標(biāo)。
3.顏色越來(lái)越艷麗、明亮，給人年輕、炫彩、簡(jiǎn)約的設(shè)計(jì)感受。
4.從logo的變化中能看出頁(yè)面將從擬物的時(shí)代跨進(jìn)了扁平時(shí)代，也能折射Instagram界面必將是往極簡(jiǎn)、炫彩的方向走。

2.圖標(biāo)設(shè)計(jì)

我重新臨摹Instagram啟動(dòng)圖標(biāo)，發(fā)現(xiàn)里面有許多的設(shè)計(jì)小知識(shí)點(diǎn)值得學(xué)習(xí)。

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

當(dāng)我們自己做漸變的圖標(biāo)背景時(shí)可以用兩兩相鄰的顏色，讓漸變?nèi)谌氲母匀弧?/span>

3.顏色的規(guī)律

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

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

4.圓角的設(shè)計(jì)

1.通過(guò)自己仔細(xì)的觀察發(fā)現(xiàn)Instagram攝像頭圖標(biāo)圓角是帶有平滑過(guò)度的圓角，和普通的圓角不一樣。

2.平滑圓角給用戶的感受會(huì)更舒適、平滑、有活力，而普通的圓角顯得更加生硬、不自然。

3.蘋果的主題圖標(biāo)都是帶有平滑過(guò)度的圓角而不是一個(gè)普通圓角，使得圖標(biāo)顯得更加自然。

4.可以去看看之前原研哉幫小米設(shè)計(jì)的logo，會(huì)發(fā)現(xiàn)他們的logo給人干凈會(huì)更加有活力、生命力，而不是使用這種普通圓角，而是一種平滑過(guò)度的圓角～

5.主界面的分析

1.從Instagram的啟動(dòng)頁(yè)面看出，Instagram追求的是簡(jiǎn)約、突出品牌色的方向。

2.主界面主要以用戶發(fā)的圖片為主而不是文字，往往圖片比文字更容易產(chǎn)生閱讀與反饋。

3.整體的界面簡(jiǎn)約、素白，圖標(biāo)都是統(tǒng)一用黑色線條的描邊。

4.當(dāng)自己關(guān)注的用戶，發(fā)了一些視頻，頭像上附帶Instagram的品牌色的圓形，在白色的界面用品牌色進(jìn)行了點(diǎn)綴，讓單調(diào)的界面更具有識(shí)別性。

6.界面布局分析 

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

7.輪播點(diǎn)的設(shè)計(jì)體驗(yàn)

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

我重新繪制了一個(gè)用戶發(fā)的7張圖片的示例，當(dāng)用戶在左右滑動(dòng)圖片時(shí)，輪播的點(diǎn)會(huì)跟著動(dòng)，同時(shí)會(huì)有大小的顯示，暗示用戶后面或者前面還有多張圖片，有近大遠(yuǎn)小的感覺，非常細(xì)節(jié)的設(shè)計(jì)～（可以利用在自己的一些設(shè)計(jì)上）

8.設(shè)計(jì)的細(xì)節(jié)

1.在Instagram的用戶界面，視頻、多張圖片、單張圖片和置頂4種狀態(tài)右上角有個(gè)圖標(biāo)的標(biāo)識(shí)，讓用戶清晰知道圖片的內(nèi)容狀態(tài)，提前給用戶有個(gè)心理預(yù)期與區(qū)分。

2.當(dāng)用戶點(diǎn)擊進(jìn)去類似抖音的布局，可以進(jìn)行上下滑動(dòng)切換視頻內(nèi)容，雙擊可給該視頻點(diǎn)贊，整體的體驗(yàn)很絲滑，沒有任何的卡頓與拖沓。同時(shí)界面圖標(biāo)用線性的形式，布局統(tǒng)一、和諧。

9.圖標(biāo)風(fēng)格 

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

10.經(jīng)典界面 

這個(gè)界面放在你面前可能都會(huì)知道是Instagram這個(gè)應(yīng)用，這個(gè)界面框架已經(jīng)形成品牌意識(shí)。 Instagram幾年一直沒有更改這個(gè)布局，非常經(jīng)典的設(shè)計(jì)，沒有太多花里胡哨的圖標(biāo)與信息，只有簡(jiǎn)約的線性圖標(biāo)與用戶發(fā)布的圖片，克制的設(shè)計(jì)。也有很多相機(jī)應(yīng)用、戶外廣告都借鑒了Instagram布局，已經(jīng)在用戶的心智里面了～

總結(jié)

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