十年巨變！全球音樂平臺Spotify官網(wǎng)的用戶體驗變遷（2006-2016）

@可樂橙_ColaChan?：網(wǎng)頁設(shè)計在過去10年間滄桑巨變，本文借助分析這10年間，Spotify官網(wǎng)翻天覆地的變化，一窺網(wǎng)頁設(shè)計這10年來的發(fā)展趨勢。

最近這兩個月流行的設(shè)計趨勢：

1. 漸變色：《變化之美！重新回歸主流的漸變色設(shè)計趨勢》
2. 摩登復(fù)古風(fēng)：《復(fù)古即流行！正在瘋狂流行的摩登復(fù)古設(shè)計風(fēng)》
3. 雙色趨勢：《留意新趨勢！個性鮮明風(fēng)格迥異的雙色網(wǎng)頁設(shè)計》
4. 扁平化2.0：《扁平化2.0時代！聊聊今年六個全新的扁平化設(shè)計風(fēng)格》

早年的網(wǎng)站

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

Daniel Ek和Martin Lorentz于2006年創(chuàng)立了Spotify。2008年它正式發(fā)布，beta版在2007年發(fā)布。從那時起到2016年5月，它已經(jīng)匯集了超過1億的活躍用戶。

△ 2006年

△ 2007年

這兩版的設(shè)計出現(xiàn)在發(fā)布之前，為了推廣桌面應(yīng)用。他們讓用戶注冊賬號，通過郵箱獲取更新。兩者都缺乏圖形，包括logo在內(nèi)。

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

△ 2008與2009年

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

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

△ 2010年

圖片的使用展示了他們的優(yōu)秀產(chǎn)品，讓人迅速了解它的作用，并且更愿意使用。卡片的設(shè)計很時尚，在那個時代可能算超前的了（卡片如今已經(jīng)成為一項主要設(shè)計趨勢）。

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

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

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

△ 2011年

這版很像2010年的網(wǎng)站，但有幾處變化表現(xiàn)不佳。

產(chǎn)品功能的列表相當(dāng)雜亂，而且Unlimited級的訂閱似乎并無必要，對用戶來說有點搶錢的感覺。除了無廣告，它和免費版沒有任何區(qū)別（Spotify也這么認為，后來去掉了這一級）。

圖形元素非常“卡通化”，喪失了先前設(shè)計中的精致優(yōu)雅。

△ 2012年

這一版，他們?nèi)σ愿巴渡順O簡設(shè)計，網(wǎng)站的歡迎頁除了一個行動指令別無他物。

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

△ 2014年

真正的優(yōu)秀設(shè)計出現(xiàn)了。從此時起，后續(xù)的所有設(shè)計都運用了視覺差滾動。

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

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

△ 2015年

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

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

極具視覺表現(xiàn)力，同時易于使用。

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

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

△ 2016年

這一版集合了之前版本的優(yōu)點。延續(xù)了相同的視覺設(shè)計風(fēng)格。鮮艷的色彩回歸了，但色調(diào)有所不同。主體字色幾乎都是白色，略微提升了可讀性，尤其在鮮艷的背景上。

“一切設(shè)備皆可播放”的標(biāo)語，表現(xiàn)了這家公司對于可達性的重視，并且極度認可移動市場的價值。

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

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

非常感謝UX timeline提供這些圖片。他們?yōu)楦鱾€網(wǎng)站保留了不同時期的圖片，一定要去看看：《酷站兩連發(fā)！記錄網(wǎng)站改版歷史+按國家分類的免費旅游圖庫》

編者注：歡迎設(shè)計師們投稿至 yuan@uisdc.com，幫你提升個人品牌形象 ：)

「技多不壓身的設(shè)計師才有高薪資！」

1. 平面設(shè)計：《超贊！設(shè)計師完全自學(xué)指南》
2. 交互設(shè)計：《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》
3. UI設(shè)計：《超實用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學(xué)起來！為設(shè)計師量身打造的DPI指南》
8. 交互設(shè)計自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計篇》

原文地址：colachan
譯文地址：blog.prototypr

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com