介紹

用戶體驗(yàn)（UX）和用戶界面（UI）有著千絲萬(wàn)縷的聯(lián)系。 這兩個(gè)術(shù)語(yǔ)的意義常常被誤解： UX設(shè)計(jì)師需要平衡業(yè)務(wù)目標(biāo)和產(chǎn)品目標(biāo)，同時(shí)對(duì)用戶的需求也有深刻的理解。 UI設(shè)計(jì)師確保產(chǎn)品的界面直觀，響應(yīng)迅速并且盡可能吸引人。
為了使app能滿足對(duì)標(biāo)人群不斷變化的需求，需要定期對(duì)UX和UI進(jìn)行更新。 在本文中，我們將深入研究Instagram（一款非常流行的社交網(wǎng)絡(luò)應(yīng)用程序）在過(guò)去十年來(lái)UI和UX的發(fā)展和演變。

背景

Instagram最初是一個(gè)照片共享社區(qū)。最開(kāi)始的愿景是要將親朋好友們聚集在同一個(gè)地方來(lái)分享回憶，那時(shí)候用戶們也主要使用app內(nèi)提供一些比較基礎(chǔ)的濾鏡，然后發(fā)布照片。
自2012年被Facebook收購(gòu)后，它已從基礎(chǔ)的照片共享服務(wù)發(fā)展成為如今的文化制造點(diǎn)。 我2011年以來(lái)就一直是它的用戶，這些年見(jiàn)證了它飛速發(fā)展，無(wú)論是功能本身還是軟件設(shè)計(jì)本身，變化是非常大的。

Logo

Logo是一個(gè)對(duì)公司品牌舉足輕重的東西，在用戶界面設(shè)計(jì)中是至關(guān)重要的一點(diǎn)。 一個(gè)logo在界面設(shè)計(jì)中能起到重要的作用，與設(shè)計(jì)界面相協(xié)調(diào)的logo能夠大大增加產(chǎn)品的識(shí)別度，可以吸引到更多用戶。
近年來(lái)的設(shè)計(jì)趨勢(shì)頗有從大膽，復(fù)雜的設(shè)計(jì)向扁平化，簡(jiǎn)約方向發(fā)展的傾向。 Instagram的設(shè)計(jì)也不例外。

相比之下，原始logo有更多的細(xì)節(jié)，配色也相對(duì)柔和?，F(xiàn)在的logo外觀看起來(lái)符合現(xiàn)在審美，色彩更鮮艷，跟它整體的vi視覺(jué)更匹配。 但是，Instagram logo的字體十年內(nèi)一直保持不變。

功能更改+輔助功能

Instagram從來(lái)沒(méi)中斷過(guò)對(duì)產(chǎn)品的更新和迭代。功能的添加、刪除或移動(dòng)也是常常發(fā)生的事情。

Instagram 2012 vs 2021

導(dǎo)航欄

在第一個(gè)版本（2010）中，底部導(dǎo)航欄上的主要為Feed，Popular，Share，News和Profile。 現(xiàn)在的導(dǎo)航欄從藍(lán)色和灰色統(tǒng)一成為白色，這樣一來(lái)整體外觀更加簡(jiǎn)潔。 此外，圖標(biāo)也變得更簡(jiǎn)潔大方。

“通知”改為“購(gòu)物”
導(dǎo)航欄的一項(xiàng)重大更改是刪除了心形圖標(biāo)的通知選項(xiàng)。 取而代之的是“商店”圖標(biāo)。放在這個(gè)位置上，用戶會(huì)經(jīng)常在查看通知的時(shí)候不小心按到它。通知圖標(biāo)在界面的右上角，在“Direct”圖標(biāo)旁邊。

這個(gè)更新讓老用戶們非常不悅，這是非?？梢岳斫獾摹Ｒ郧翱梢詮膶?dǎo)航欄直接看到新信息提示，他們現(xiàn)在必須要到頂部欄上才能查看其通知。 Instagram用“商店”圖標(biāo)替換掉了最常用的“通知”標(biāo)簽，這是Instagram的一個(gè)戰(zhàn)略性的做法，旨在將用戶更多地引導(dǎo)至Instagram新的購(gòu)物功能上去。

“Reels”

“Reels”是一項(xiàng)視頻功能，允許用戶拍攝并上傳最長(zhǎng)30秒的視頻，這是Instagram試圖與TikTok競(jìng)爭(zhēng)的功能。它的按鈕位置取代了中心的“新帖子”按鈕。 這個(gè)更新同樣是被許多的用戶詬病。

被刪的功能：“Following Activity”
這個(gè)選項(xiàng)卡從2011年以來(lái)就一直存在，算得上一個(gè)關(guān)鍵功能。為了實(shí)現(xiàn)更簡(jiǎn)化界面，在2019年被刪除掉了。根據(jù)Instagram發(fā)言人的說(shuō)法，普通Instagram用戶幾乎不會(huì)去看Following Activity，覺(jué)得它是一項(xiàng)隱藏的功能，并不是特別有用。

用戶開(kāi)始越來(lái)越介意自己產(chǎn)生的數(shù)據(jù)，比如“喜歡”和日常最常關(guān)注的內(nèi)容希望可以對(duì)他人保密。 站在對(duì)立面的用戶覺(jué)得，他們無(wú)法再跟蹤自己朋友的互動(dòng)的帖子，降低了產(chǎn)品可用度。

“Stories”

Instagram在2016年推出的“Stories”是直接照著Snapchat的“Stories”搬過(guò)來(lái)的。與Snapchat一樣，用戶發(fā)布的所有內(nèi)容都會(huì)在24小時(shí)后被刪除。 它做得非常好，超過(guò)了競(jìng)爭(zhēng)對(duì)手。 首次亮相后的一年內(nèi)，它每天有2.5億活躍用戶。

Instagram “Stories”的成功讓Facebook在2017年推出了自己的“Stories”，引發(fā)了網(wǎng)民的一系列的meme.

回過(guò)頭來(lái)，Instagram “Stories”憑借早就廣泛使用AI篩選和積累豐富的消費(fèi)者基礎(chǔ)，讓這個(gè)功能能夠吸引人們的關(guān)注，甚至迅速飆升的使用率也就不足為奇了。

隱藏“贊”

作為一個(gè)大平臺(tái)，Instagram承擔(dān)了一些社會(huì)責(zé)任。在一些國(guó)家（例如澳大利亞，日本和新加坡）為了用戶形成更健康的社媒使用心理，Instagram進(jìn)行了“隱藏贊（like)"的實(shí)驗(yàn)。 這項(xiàng)舉動(dòng)被視為積極正面的發(fā)展。社媒上，點(diǎn)的贊被視為社交貨幣，“隱藏贊“則減少了用戶之間膚淺的競(jìng)爭(zhēng)。 這樣一來(lái)，人們可以更自由地在平臺(tái)上表達(dá)自己，而不必不斷尋求觀者的認(rèn)同。

但是，KOL和廣告商則對(duì)這項(xiàng)優(yōu)化抱有不同的看法，因?yàn)镵OL無(wú)法向公眾展示他們的活躍度了。 此外，盡管無(wú)法看到的發(fā)布被點(diǎn)了多少次贊，用戶仍然可以看自己被點(diǎn)贊的次數(shù)，但是這不會(huì)對(duì)他們的心理健康造成影響。 用戶還提到，隱藏了“贊”之后，他們不會(huì)像之前這么去關(guān)注當(dāng)前的熱門(mén)話題或者搜索等內(nèi)容。

廣告+ Feed算法帶來(lái)的抱怨

最近，用戶發(fā)現(xiàn)stories之間的廣告瘋狂轟炸。 feed當(dāng)中，出現(xiàn)了嵌入式的廣告帖，將本來(lái)流暢的觀感和使用體驗(yàn)給破壞掉了。

這個(gè)問(wèn)題其實(shí)是因?yàn)镮nstagram Feed算法的變化而產(chǎn)生的?，F(xiàn)在用戶沒(méi)辦法像從前一樣，按帖子的發(fā)布時(shí)間順序來(lái)查看，而是根據(jù)Instagram上的參與度和覆蓋率來(lái)顯示帖子。 許多用戶一直要求恢復(fù)到初始狀態(tài)，但無(wú)濟(jì)于事。

這個(gè)功能導(dǎo)致用戶會(huì)錯(cuò)過(guò)他們訂閱或者關(guān)注的更新，而且隨著關(guān)注人數(shù)的增加，這個(gè)情況會(huì)更加明顯，讓本來(lái)就有怨言的用戶負(fù)面情緒有增無(wú)減。當(dāng)用戶為了查看更新帖子而滾動(dòng)到feed的底部時(shí)，顯示的仍然是更多的“猜你喜歡”這類的帖子。而這個(gè)功能本來(lái)就已經(jīng)重復(fù)了，在“瀏覽”頁(yè)下，已經(jīng)根據(jù)用戶興趣推薦了帖子。

結(jié)論

Instagram已經(jīng)超越照片分享平臺(tái)，而發(fā)展成為文化趨勢(shì)的發(fā)源地了。這一點(diǎn)，隨著時(shí)間的推移在用戶體驗(yàn)和用戶界面更新中也能看到端倪。但是許多Instagram用戶越來(lái)越不滿意這款產(chǎn)品，不少用戶也發(fā)現(xiàn)自己的反饋并不被采納。 Instagram越來(lái)越多傾向一個(gè)什么都能做的平臺(tái)，卻忘了它的初衷是為了通過(guò)社媒，讓人們能輕松地參與彼此的生活。

但是，在新的社交照片共享大頭出現(xiàn)之前，我們還是不得不依靠Instagram作為主要的視覺(jué)內(nèi)容分享平臺(tái)。

文章由摹客團(tuán)隊(duì)翻譯整理，“摹客，協(xié)作交付+原型設(shè)計(jì)一站式平臺(tái)”。

原文地址：https://haikalrzn.medium.com/evolution-of-instagrams-ux-ui-6f8cced3f1f