十年巨变!全球音乐平台Spotify官网的用户体验变迁(2006-2016) - 优设-UISDC

十年巨变!全球音乐平台Spotify官网的用户体验变迁(2006-2016)

2016/09/04 5793评论区

spotify-ux-design-changes-1

@可乐橙_ColaChan :网页设计在过去10年间沧桑巨变,本文借助分析这10年间,Spotify官网翻天覆地的变化,一窥网页设计这10年来的发展趋势。

最近这两个月流行的设计趋势:

  1. 渐变色:《变化之美!重新回归主流的渐变色设计趋势》
  2. 摩登复古风:《复古即流行!正在疯狂流行的摩登复古设计风》
  3. 双色趋势:《留意新趋势!个性鲜明风格迥异的双色网页设计》
  4. 扁平化2.0:《扁平化2.0时代!聊聊今年六个全新的扁平化设计风格》

早年的网站

“大家只想畅听全世界的音乐”——Daniel Ek。

Daniel Ek和Martin Lorentz于2006年创立了Spotify。2008年它正式发布,beta版在2007年发布。从那时起到2016年5月,它已经汇集了超过1亿的活跃用户。

uisdc-2-201609041

△ 2006年

uisdc-2-201609042

△ 2007年

这两版的设计出现在发布之前,为了推广桌面应用。他们让用户注册账号,通过邮箱获取更新。两者都缺乏图形,包括logo在内。

可以看出后者严重浪费页面空间,割裂且不对称。06年的网站给我感觉要好很多,很有煽动力,怂恿我注册。06年的网站使用的字号也更易于阅读,另一版则非常小,尤其在有大量空白的情况下。

uisdc-2-201609043

uisdc-2-201609044

△ 2008与2009年

这版如果一直用到今天,其实也并不差。导航栏很简洁——上面的链接可以再丰富些,因为这看起来很空旷,不过整体还挺吸引人。运用得当的图片建立了品牌画面(似乎是一种高雅的音乐欣赏方式)。

正文字体可以增大间距和字号。几个图标都太大了。有趣的是,左侧的留白比右侧更宽,如果你注意到会感觉这很不专业。如果注册栏出现在不可用提示之前,那就会更加友好,不过总体已经很不错了。

uisdc-2-201609045

△ 2010年

图片的使用展示了他们的优秀产品,让人迅速了解它的作用,并且更愿意使用。卡片的设计很时尚,在那个时代可能算超前的了(卡片如今已经成为一项主要设计趋势)。

其他图片元素都处理得很好。非常简约,但展示了关键信息,一眼就能掌握,点击查看详情——这是明智的设计,让浏览更加直观。

Spotify的移动版发布了,品牌在此时大举扩张,也成就了一种在路途中欣赏音乐的便捷方式(要知道这可是2010年,令人吃惊)。

他们也提供了登录和社交媒体的支持,这是一项巨大的进步。

uisdc-2-201609046

uisdc-2-201609047

△ 2011年

这版很像2010年的网站,但有几处变化表现不佳。

产品功能的列表相当杂乱,而且Unlimited级的订阅似乎并无必要,对用户来说有点抢钱的感觉。除了无广告,它和免费版没有任何区别(Spotify也这么认为,后来去掉了这一级)。

图形元素非常“卡通化”,丧失了先前设计中的精致优雅。

uisdc-2-201609048

△ 2012年

这一版,他们全力以赴投身极简设计,网站的欢迎页除了一个行动指令别无他物。

从某些方面而言这很管用,从令一些方面来说则不然。它开门见山(下载Spotify),但无疑缺乏描述信息,例如介绍特性和移动设备功能。

uisdc-2-201609049

△ 2014年

真正的优秀设计出现了。从此时起,后续的所有设计都运用了视觉差滚动。

图片很棒,高清照片传递了欢乐与时尚的感觉。Logo改版了,它的辨识度比原先的高。字体也变了,字号加大,更易阅读。而且,卡片式设计回归了。

行动指令吸引眼球,虽然免费版不如高级版醒目。但总体做得不错。

uisdc-2-2016090410

△ 2015年

行动指令的设计更好了,因为现在的免费版与高级版有着同等的视觉强度。

所有的图形看起来迷人、富有魅力。运用鲜明的色彩呈现了“炫酷”的外观,激发了夏天与节日的情绪,营造了让人想听音乐的氛围。

极具视觉表现力,同时易于使用。

从2011版开始,不同版本的功能清单就一路沿用过来。它简洁明了,呈现了所有重要信息,并且极易辨识。

Playstation应用伴随着网页播放器一起发布,品牌进一步扩张,提供了更多的方式,供用户方便地享受他们的服务。

uisdc-2-2016090411

△ 2016年

这一版集合了之前版本的优点。延续了相同的视觉设计风格。鲜艳的色彩回归了,但色调有所不同。主体字色几乎都是白色,略微提升了可读性,尤其在鲜艳的背景上。

“一切设备皆可播放”的标语,表现了这家公司对于可达性的重视,并且极度认可移动市场的价值。

页脚的白色文字显然比先前版本的灰色更醒目。社交媒体图标也恰如其分地回归了。渐变图标如今很盛行,因为色彩鲜艳(这是加分项)。他们在形式与功能之间找到了平衡点,让网站既易用又美观。

10年的网页设计历史就在其中。网页设计竟然走了这么远,真让人吃惊,即使从2011年起也称得上是巨变。接下来的10年会发生什么?我很期待VR与AR在未来的设计中占有一席之地,但谁知道呢,我已经等不及要亲眼目睹了!

非常感谢UX timeline提供这些图片。他们为各个网站保留了不同时期的图片,一定要去看看:《酷站两连发!记录网站改版历史+按国家分类的免费旅游图库》

编者注:欢迎设计师们投稿至 yuan@uisdc.com,帮你提升个人品牌形象 :)

「技多不压身的设计师才有高薪资!」

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:colachan
译文地址:blog.prototypr

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/spotify-ux-design-changes

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 优设大课堂 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 视觉设计 素材下载 设计师专访 web前端开发 设计流程 AI教程 用户体验设计 设计理论 神器下载 字体下载 海报设计 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里