今天從 10 個(gè)維度，聊聊 Instagram 這款軟件整體的設(shè)計(jì)與體驗(yàn)?zāi)切┲档脤W(xué)習(xí)的地方。

一、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)、炫彩的方向走。

二、圖標(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)谌氲母匀弧?/p>

三、顏色的規(guī)律

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

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

四、圓角的設(shè)計(jì)

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

五、主界面的分析

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í)別性。

六、界面布局分析

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

七、輪播點(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)小的感覺(jué)，非常細(xì)節(jié)的設(shè)計(jì)。

八、設(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)很絲滑，沒(méi)有任何的卡頓與拖沓。同時(shí)界面圖標(biāo)用線性的形式，布局統(tǒng)一、和諧。

九、圖標(biāo)風(fēng)格

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

十、經(jīng)典界面

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

Instagram 一直沒(méi)有更改這個(gè)布局，非常經(jīng)典的設(shè)計(jì)，沒(méi)有太多花里胡哨的圖標(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)品。

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