Spotify官網的用戶體驗變遷(2006-2016)

10年的巨變

網頁設計在過去10年間滄桑巨變。本文中，我們來研究這些年的Spotify官網，討論其中的關鍵變化。

早年的網站

“大家隻想暢聽全世界的音樂”——Daniel Ek。

Daniel Ek和Martin Lorentz於2006年創立了Spotify。2008年它正式發布，beta版在2007年發布。從那時起到2016年5月，它已經彙集了超過1億的活躍用戶。

2006年

2007年

這兩版的設計出現在發布之前，為了推廣桌面應用。他們讓用戶注冊賬號，通過郵箱獲取更新。兩者都缺乏圖形，包括logo在內。

可以看出後者嚴重浪費頁面空間，割裂且不對稱。06年的網站給我感覺要好很多，很有煽動力，慫恿我注冊。06年的網站使用的字號也更易於閱讀，另一版則非常小，尤其在有大量空白的情況下。

2008與2009年

這版如果一直用到今天，其實也並不差。導航欄很簡潔——上面的鏈接可以再豐富些，因為這看起來很空曠，不過整體還挺吸引人。運用得當的圖片建立了品牌畫面（似乎是一種高雅的音樂欣賞方式）。

正文字體可以增大間距和字號。幾個圖標都太大了。有趣的是，左側的留白比右側更寬，如果你注意到會感覺這很不專業。如果注冊欄出現在不可用提示之前，那就會更加友好，不過總體已經很不錯了。

2010年

圖片的使用展示了他們的優秀產品，讓人迅速了解它的作用，並且更願意使用。卡片的設計很時尚，在那個時代可能算超前的了（卡片如今已經成為一項主要設計趨勢）。

其他圖片元素都處理得很好。非常簡約，但展示了關鍵信息，一眼就能掌握，點擊查看詳情——這是明智的設計，讓瀏覽更加直觀。

Spotify的移動版發布了，品牌在此時大舉擴張，也成就了一種在路途中欣賞音樂的便捷方式（要知道這可是2010年，令人吃驚）。

他們也提供了登錄和社交媒體的支持，這是一項巨大的進步。

2011年

這版很像2010年的網站，但有幾處變化表現不佳。

產品功能的列表相當雜亂，而且Unlimited級的訂閱似乎並無必要，對用戶來說有點搶錢的感覺。除了無廣告，它和免費版沒有任何區別（Spotify也這麼認為，後來去掉了這一級）。

圖形元素非常“卡通化”，喪失了先前設計中的精致優雅。

2012年

這一版，他們全力以赴投身極簡設計，網站的歡迎頁除了一個行動指令別無他物。

從某些方面而言這很管用，從令一些方面來說則不然。它開門見山（下載Spotify），但無疑缺乏描述信息，例如介紹特性和移動設備功能。

2014年

真正的優秀設計出現了。從此時起，後續的所有設計都運用了視覺差滾動。

圖片很棒，高清照片傳遞了歡樂與時尚的感覺。Logo改版了，它的辨識度比原先的高。字體也變了，字號加大，更易閱讀。而且，卡片式設計回歸了。

行動指令吸引眼球，雖然免費版不如高級版醒目。但總體做得不錯。

2015年

行動指令的設計更好了，因為現在的免費版與高級版有著同等的視覺強度。

所有的圖形看起來迷人、富有魅力。運用鮮明的色彩呈現了“炫酷”的外觀，激發了夏天與節日的情緒，營造了讓人想聽音樂的氛圍。

極具視覺表現力，同時易於使用。

從2011版開始，不同版本的功能清單就一路沿用過來。它簡潔明了，呈現了所有重要信息，並且極易辨識。

Playstation應用伴隨著網頁播放器一起發布，品牌進一步擴張，提供了更多的方式，供用戶方便地享受他們的服務。

2016年

這一版集合了之前版本的優點。延續了相同的視覺設計風格。鮮豔的色彩回歸了，但色調有所不同。主體字色幾乎都是白色，略微提升了可讀性，尤其在鮮豔的背景上。

“一切設備皆可播放”的標語，表現了這家公司對於可達性的重視，並且極度認可移動市場的價值。

頁腳的白色文字顯然比先前版本的灰色更醒目。社交媒體圖標也恰如其分地回歸了。漸變圖標如今很盛行，因為色彩鮮豔（這是加分項）。他們在形式與功能之間找到了平衡點，讓網站既易用又美觀。

10年的網頁設計曆史就在其中。網頁設計竟然走了這麼遠，真讓人吃驚，即使從2011年起也稱得上是巨變。接下來的10年會發生什麼？我很期待VR與AR在未來的設計中占有一席之地，但誰知道呢，我已經等不及要親眼目睹了！

非常感謝UX timeline提供這些圖片。他們為各個網站保留了不同時期的圖片，一定要去看看

譯文鏈接：colachan

原文鏈接：https://blog.prototypr.io/how-spotifys-website-ux-has-changed-2006-to-2016-ff981fe3b0a3#.ujajsrgyq

作者信息：Sean Hervo
Scottish designer. Gryffindor. I consume copious amounts of milk.