十年的巨變|Spotify官網(wǎng)的用戶體驗(yàn)變遷

網(wǎng)頁設(shè)計(jì)在過去10年間滄桑巨變。本文中,我們來研究這些年的Spotify官網(wǎng),討論其中的關(guān)鍵變化。
10年的巨變
早年的網(wǎng)站
大家只想暢聽全世界的音樂。
Daniel Ek和Martin Lorentz于2006年創(chuàng)立了Spotify。2008年它正式發(fā)布,beta版在2007年發(fā)布。從那時(shí)起到2016年5月,它已經(jīng)匯集了超過1億的活躍用戶。
2006年
2007年
這兩版的設(shè)計(jì)出現(xiàn)在發(fā)布之前,為了推廣桌面應(yīng)用。他們讓用戶注冊賬號(hào),通過郵箱獲取更新。兩者都缺乏圖形,包括logo在內(nèi)。
可以看出后者嚴(yán)重浪費(fèi)頁面空間,割裂且不對(duì)稱。2006年的網(wǎng)站給我感覺要好很多,很有煽動(dòng)力,“慫恿”我注冊。2006年的網(wǎng)站使用的字號(hào)也更易于閱讀,另一版則非常小,尤其在有大量空白的情況下。
2008與2009年
這版如果一直用到今天,其實(shí)也并不差。導(dǎo)航欄很簡潔,上面的鏈接可以再豐富些,因?yàn)檫@看起來很空曠,不過整體還挺吸引人。運(yùn)用得當(dāng)?shù)膱D片建立了品牌畫面(似乎是一種高雅的音樂欣賞方式)。
正文字體可以增大間距和字號(hào)。幾個(gè)圖標(biāo)都太大了。有趣的是,左側(cè)的留白比右側(cè)更寬,如果你注意到會(huì)感覺這很不專業(yè)。如果注冊欄出現(xiàn)在不可用提示之前,那就會(huì)更加友好,不過總體已經(jīng)很不錯(cuò)了。
2010年
圖片的使用展示了他們的優(yōu)秀產(chǎn)品,讓人迅速了解它的作用,并且更愿意使用??ㄆ脑O(shè)計(jì)很時(shí)尚,在那個(gè)時(shí)代可能算超前的了(卡片如今已經(jīng)成為一項(xiàng)主要設(shè)計(jì)趨勢)。
其他圖片元素都處理得很好,非常簡約,展示了關(guān)鍵信息,一眼就能掌握,點(diǎn)擊查看詳情。這是明智的設(shè)計(jì),讓瀏覽更加直觀。
Spotify的移動(dòng)版發(fā)布了,品牌在此時(shí)大舉擴(kuò)張,也成就了一種在路途中欣賞音樂的便捷方式(要知道這可是2010年,令人吃驚)。
他們也提供了登錄和社交媒體的支持,這是一項(xiàng)巨大的進(jìn)步。
2011年
這版很像2010年的網(wǎng)站,但有幾處變化表現(xiàn)不佳。
產(chǎn)品功能的列表相當(dāng)雜亂,而且Unlimited級(jí)的訂閱似乎并無必要,對(duì)用戶來說有點(diǎn)搶錢的感覺。除了無廣告,它和免費(fèi)版沒有任何區(qū)別(Spotify也這么認(rèn)為,后來去掉了這一級(jí))。
圖形元素非?!翱ㄍɑ保瑔适Я讼惹霸O(shè)計(jì)中的精致優(yōu)雅。
2012年
這一版,他們?nèi)σ愿巴渡順O簡設(shè)計(jì),網(wǎng)站的歡迎頁除了一個(gè)行動(dòng)指令別無他物。
從某些方面而言這很管用,從令一些方面來說則不然。它開門見山(下載Spotify),但無疑缺乏描述信息,例如介紹特性和移動(dòng)設(shè)備功能。
2014年
真正的優(yōu)秀設(shè)計(jì)出現(xiàn)了。從此時(shí)起,后續(xù)的所有設(shè)計(jì)都運(yùn)用了視覺差滾動(dòng)。
圖片很棒,高清照片傳遞了歡樂與時(shí)尚的感覺。Logo改版了,它的辨識(shí)度比原先的高。字體也變了,字號(hào)加大,更易閱讀。而且,卡片式設(shè)計(jì)回歸了。
行動(dòng)指令吸引眼球,雖然免費(fèi)版不如高級(jí)版醒目。但總體做得不錯(cuò)。
2015年
行動(dòng)指令的設(shè)計(jì)更好了,因?yàn)楝F(xiàn)在的免費(fèi)版與高級(jí)版有著同等的視覺強(qiáng)度。
所有的圖形看起來迷人、富有魅力。運(yùn)用鮮明的色彩呈現(xiàn)了“炫酷”的外觀,激發(fā)了夏天與節(jié)日的情緒,營造了讓人想聽音樂的氛圍。
極具視覺表現(xiàn)力,同時(shí)易于使用。
從2011版開始,不同版本的功能清單就一路沿用過來。它簡潔明了,呈現(xiàn)了所有重要信息,并且極易辨識(shí)。
Playstation應(yīng)用伴隨著網(wǎng)頁播放器一起發(fā)布,品牌進(jìn)一步擴(kuò)張,提供了更多的方式,供用戶方便地享受他們的服務(wù)。
2016年
這一版集合了之前版本的優(yōu)點(diǎn)。延續(xù)了相同的視覺設(shè)計(jì)風(fēng)格。鮮艷的色彩回歸了,但色調(diào)有所不同。主體字色幾乎都是白色,略微提升了可讀性,尤其在鮮艷的背景上。
“一切設(shè)備皆可播放”的標(biāo)語,表現(xiàn)了這家公司對(duì)于可達(dá)性的重視,并且極度認(rèn)可移動(dòng)市場的價(jià)值。
頁腳的白色文字顯然比先前版本的灰色更醒目。社交媒體圖標(biāo)也恰如其分地回歸了。漸變圖標(biāo)如今很盛行,因?yàn)樯术r艷(這是加分項(xiàng))。他們在形式與功能之間找到了平衡點(diǎn),讓網(wǎng)站既易用又美觀。
10年的網(wǎng)頁設(shè)計(jì)歷史就在其中。網(wǎng)頁設(shè)計(jì)竟然走了這么遠(yuǎn),真讓人吃驚,即使從2011年起也稱得上是巨變。接下來的10年會(huì)發(fā)生什么?我很期待VR與AR在未來的設(shè)計(jì)中占有一席之地,但誰知道呢,我已經(jīng)等不及要親眼目睹了!
非常感謝UX timeline提供這些圖片。
原文作者:Sean Hervo,Scottish designer. Gryffindor. I consume copious amounts of milk.
原文鏈接:https://blog.prototypr.io/how-spotifys-website-ux-has-changed-2006-to-2016-ff981fe3b0a3#.ujajsrgyq
#專欄作家#
可樂橙,微信公眾號(hào):可樂橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計(jì)師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設(shè)計(jì)師,至少是個(gè)快樂的設(shè)計(jì)師。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。
有沒有人知道這種歷時(shí)十年的圖片怎么來的…十年間都在收集嗎