@可乐橙_ColaChan :网页设计在过去10年间沧桑巨变,本文借助分析这10年间,Spotify官网翻天覆地的变化,一窥网页设计这10年来的发展趋势。
最近这两个月流行的设计趋势:
- 渐变色:《变化之美!重新回归主流的渐变色设计趋势》
- 摩登复古风:《复古即流行!正在疯狂流行的摩登复古设计风》
- 双色趋势:《留意新趋势!个性鲜明风格迥异的双色网页设计》
- 扁平化2.0:《扁平化2.0时代!聊聊今年六个全新的扁平化设计风格》
早年的网站
“大家只想畅听全世界的音乐”——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提供这些图片。他们为各个网站保留了不同时期的图片,一定要去看看:《酷站两连发!记录网站改版历史+按国家分类的免费旅游图库》
编者注:欢迎设计师们投稿至 yuan@uisdc.com,帮你提升个人品牌形象 :)
「技多不压身的设计师才有高薪资!」
- 平面设计:《超赞!设计师完全自学指南》
- 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
- UI设计:《超实用新手指南!零基础如何自学UI设计?》
- 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
- 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
- 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
- DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
- 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》
原文地址:colachan
译文地址:blog.prototypr
【优设网 原创文章 投稿邮箱:yuan@uisdc.com】
================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
AI时代的设计师生存手册
已累计诞生 607 位幸运星
发表评论
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓