爱不释手！2014年最佳的20个优秀网页设计

就要同2014年说再见了，是时候回顾一下这一年里的伟大设计了！著名的设计博客Designmodo评选出了年度最佳的20个优秀网站，这些优秀的网页不仅设计精心，而且紧跟时下流行的设计趋势。

网页设计师们总会热衷于追随最新的设计趋势，所以你能在这些优秀的网页中看到这些趋势——扁平化设计、极简风、视差滚动、视屏背景，等等。这些设计优秀的网站的另一个共同的特性，就是对移动端的良好支持——响应式设计。真正优秀的网站，总会支持尽可能多的设备。

看案例前先预热，了解一下2014年不容错过的网页设计趋势！

• 《设计师的必备技能！你需要学会设计有意义的动效》
• 《知根知底的趋势！2014年最值得掌握的趋势”幽灵按钮”》
• 《最新的别放过！30个尽显创意的视差滚动网站设计》

那么接下来我们就一起来看看2014年最佳的20个优秀网站，了解一下为什么它们会吸引如此之多的关注。这20个网站都已经被Awwwards所收录其中，值得你每天浏览获取灵感。

The Capitol

这个网站完全是基于近年比较火爆的《饥饿游戏》系列来制作的，网站风格冷峻，与网站残酷的调性非常一致。网站整体设计并不复杂，配色简单，但是风格简单而大胆，并且使用了视差滚动的设计。网站使用大量的信息、视频和其他内容让用户与之互动，让他们仿佛置身于电影当中。

Grovemade

这可能是今年最潮的网站之一，不仅内容精心制作，而且结合了诸多流行的设计趋势。网站使用了大量的大图为背景，视觉上非常赏心悦目。网站使用白色的文字和幽灵按钮，在深色背景下看起来相得益彰。主屏之外的部分，设计师使用了精致的图片和文字，与白色的背景形成令人愉悦的对比。

Sokruta

Sokruta使用醒目的大图背景配合简单直观的导航，而拼图式滑块的运用让整个网站都充满了个性。这些个性化的设计都是在视觉上吸引人的招数，并且确实有效。除此之外，还有许多额外的效果，比如悬停在按钮上的时候会出现动效，令人乐此不疲。

Huge Inc.

这个网站设计的简约，也设计的恰到好处。不论是品牌设计还是空间和版式设计，Huge公司的网站都做的非常不错。网站借助视差滚动完美地创造出“页面”的感觉，不同的页面呈现不同的元素，整饬而清晰。

I Remember

网站是为一个项目而建立，旨在提高人们对于阿尔茨海默氏症的了解，网站视觉设计非常独特，用户可以同这个网站进行许多有趣的交互。网站深沉的色调正象征这种令人失去记忆的病症给患者的压力，其中的微光则象征着“希望的微光”。

Jack Daniel’s Bar Stories

今年可能相对少见一点的设计趋势，就是通过网站来向你讲述故事。这种展现方式是创建品牌故事的好方法。这种类型的网站里，图片和排版的组合通常非常有趣，并且具有独特的设计风格。

Quay

在这里，极简设计从未如此美丽。Quay餐厅的网站使用漂亮的大图背景吸引用户，全屏式的幻灯片式展示堪称完美，加载迅速，并且切换的节奏都控制得非常好，网站导航栏被挪到屏幕底部，这使得网站的浏览体验更好。随着页面滚动，导航栏会自然得移动到页面顶部。网站设计层次清晰，也保持着一定的复杂度。

Sorte En Mer

使用视屏背景是2014年最重要的设计趋势之一，而 Sorte En Mer 则是其中的佼佼者。打开网站的时候你仿佛打开一部电影，并且你可以通过鼠标来操控背景视频的播放。网站的效果颇为惊艳，并且很少有同类网站能做到这个层次。

A Spacecraft for All

这个网站可以带你了解ISEE-3航天器。你可以通过网站查看ISEE-3的当前的实时图像，查看它经过的地方和执行过的任务。网站拥有简约而现代的外观设计，并且鼓励用户与网站进行互动。

Super Looper

这是个有趣的游戏，你可以在此创建音乐并且可视化地展现出来，整个使用体验令人上瘾。鲜艳的色彩与黑色的背景令网站在视觉上更富有魅力。

Jam3

这也是一个充满动画和视频的网站，Jam3 拥有一个简约的首页，网站其他的元素都可点击并且具有经验的视觉效果。

A Journey Through Middle-Earth

这是一个令人印象深刻的网站，一方面是因为网站是以近2年特别火爆的电影《霍比特人》为主题，另一方面是因为网站借助大量的静态图片和动态图像来创建出游戏般的交互体验。

MashVP

这个网站设计得极为简约，但是一点都不简单。当你滚动页面的时候，图片之间的切换效果颇为有趣，当你点击顶端的按钮导航的时候，能让你看到更多有趣的展示。

Over the Hills

这个网站拥有如此之多的功能，以至于你可以整天整天地钻研，从动效设计到视频背景，从优质的音乐体验到复古的视觉体验，这个网站会让你欲罢不能。

Twofold

虽然这个站点使用极简风，但是网站并不简单。首页使用了金色的色调和闪烁的光芒，滚动的时候漂亮的动效设计赋予网页以自然的一面。其实这样的网站最好，看似简单，但是当你与之互动的时候却能给你带来惊喜。

Leodis

这个网站深得扁平化设计理念的精髓，几乎上升到一个全新的境界。漂亮的图片被置于简约的排版中，引人入胜。令网站真正与众不同的是它的配色，强烈的对比令网站的色彩不再“扁平”，这种错落令人着迷。

Valerie Martinez Agency

乍一看这个网站感觉非常简单，但是简单之下隐藏着宝藏。标题中的幽灵按钮会带你去前进，每一个点击都能带来各种动效。加载界面上的开场动画同样令人印象深刻，如果你仔细看的话。

Volkswagen

网站仿佛被设计成为一部电影预告片，除了帅气的页面之外，用户还可以与网站宣传的运动型轿车进行交互。真正让这个网站令人过目不忘的，还是源自于网站所使用的背景纹理和惊艳的图片。设计团队还使用了简单的字体确保网站可读性，还令整个站点的设计更加统一。

Your Local Studio

极简风、简约的照片以及用户相关的视觉元素混合在一起构成了网站独特的韵味。

Ba Ba Dum

网站游戏化依然是非常靠谱的手段，这个网站就是明证。游戏能带来乐趣，同时也能为用户传递一些知识。网站使用了色彩明艳的插画教你来自各种语言的单词。

【快速提高设计能力三部曲】

Step 1：设计第一步！版式设计基础原则学起来！
《设计基础功！帮你彻底掌握设计四大原则中的对比原则》

Step 2：设计第二步！配色好整个界面都高端了！
《秒变配色高手！怎么都不会错的6条网页设计配色原则》

Step 3：最后一步！来个实战文你就全懂了！
《设计易容术！如何设计一张高品位高水准的海报？》

原文地址：designmodo
优设网译者：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量87万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：