就要同2014年說再見了，是時(shí)候回顧一下這一年里的偉大設(shè)計(jì)了！著名的設(shè)計(jì)博客Designmodo評選出了年度最佳的20個(gè)優(yōu)秀網(wǎng)站，這些優(yōu)秀的網(wǎng)頁不僅設(shè)計(jì)精心，而且緊跟時(shí)下流行的設(shè)計(jì)趨勢。

網(wǎng)頁設(shè)計(jì)師們總會熱衷于追隨最新的設(shè)計(jì)趨勢，所以你能在這些優(yōu)秀的網(wǎng)頁中看到這些趨勢——扁平化設(shè)計(jì)、極簡風(fēng)、視差滾動(dòng)、視屏背景，等等。這些設(shè)計(jì)優(yōu)秀的網(wǎng)站的另一個(gè)共同的特性，就是對移動(dòng)端的良好支持——響應(yīng)式設(shè)計(jì)。真正優(yōu)秀的網(wǎng)站，總會支持盡可能多的設(shè)備。

看案例前先預(yù)熱，了解一下2014年不容錯(cuò)過的網(wǎng)頁設(shè)計(jì)趨勢！

• 《設(shè)計(jì)師的必備技能！你需要學(xué)會設(shè)計(jì)有意義的動(dòng)效》
• 《知根知底的趨勢！2014年最值得掌握的趨勢”幽靈按鈕”》
• 《最新的別放過！30個(gè)盡顯創(chuàng)意的視差滾動(dòng)網(wǎng)站設(shè)計(jì)》

那么接下來我們就一起來看看2014年最佳的20個(gè)優(yōu)秀網(wǎng)站，了解一下為什么它們會吸引如此之多的關(guān)注。這20個(gè)網(wǎng)站都已經(jīng)被Awwwards所收錄其中，值得你每天瀏覽獲取靈感。

The Capitol

這個(gè)網(wǎng)站完全是基于近年比較火爆的《饑餓游戲》系列來制作的，網(wǎng)站風(fēng)格冷峻，與網(wǎng)站殘酷的調(diào)性非常一致。網(wǎng)站整體設(shè)計(jì)并不復(fù)雜，配色簡單，但是風(fēng)格簡單而大膽，并且使用了視差滾動(dòng)的設(shè)計(jì)。網(wǎng)站使用大量的信息、視頻和其他內(nèi)容讓用戶與之互動(dòng)，讓他們仿佛置身于電影當(dāng)中。

Grovemade

這可能是今年最潮的網(wǎng)站之一，不僅內(nèi)容精心制作，而且結(jié)合了諸多流行的設(shè)計(jì)趨勢。網(wǎng)站使用了大量的大圖為背景，視覺上非常賞心悅目。網(wǎng)站使用白色的文字和幽靈按鈕，在深色背景下看起來相得益彰。主屏之外的部分，設(shè)計(jì)師使用了精致的圖片和文字，與白色的背景形成令人愉悅的對比。

Sokruta

Sokruta使用醒目的大圖背景配合簡單直觀的導(dǎo)航，而拼圖式滑塊的運(yùn)用讓整個(gè)網(wǎng)站都充滿了個(gè)性。這些個(gè)性化的設(shè)計(jì)都是在視覺上吸引人的招數(shù)，并且確實(shí)有效。除此之外，還有許多額外的效果，比如懸停在按鈕上的時(shí)候會出現(xiàn)動(dòng)效，令人樂此不疲。

Huge Inc.

這個(gè)網(wǎng)站設(shè)計(jì)的簡約，也設(shè)計(jì)的恰到好處。不論是品牌設(shè)計(jì)還是空間和版式設(shè)計(jì)，Huge公司的網(wǎng)站都做的非常不錯(cuò)。網(wǎng)站借助視差滾動(dòng)完美地創(chuàng)造出“頁面”的感覺，不同的頁面呈現(xiàn)不同的元素，整飭而清晰。

I Remember

網(wǎng)站是為一個(gè)項(xiàng)目而建立，旨在提高人們對于阿爾茨海默氏癥的了解，網(wǎng)站視覺設(shè)計(jì)非常獨(dú)特，用戶可以同這個(gè)網(wǎng)站進(jìn)行許多有趣的交互。網(wǎng)站深沉的色調(diào)正象征這種令人失去記憶的病癥給患者的壓力，其中的微光則象征著“希望的微光”。

Jack Daniel’s Bar Stories

今年可能相對少見一點(diǎn)的設(shè)計(jì)趨勢，就是通過網(wǎng)站來向你講述故事。這種展現(xiàn)方式是創(chuàng)建品牌故事的好方法。這種類型的網(wǎng)站里，圖片和排版的組合通常非常有趣，并且具有獨(dú)特的設(shè)計(jì)風(fēng)格。

Quay

在這里，極簡設(shè)計(jì)從未如此美麗。Quay餐廳的網(wǎng)站使用漂亮的大圖背景吸引用戶，全屏式的幻燈片式展示堪稱完美，加載迅速，并且切換的節(jié)奏都控制得非常好，網(wǎng)站導(dǎo)航欄被挪到屏幕底部，這使得網(wǎng)站的瀏覽體驗(yàn)更好。隨著頁面滾動(dòng)，導(dǎo)航欄會自然得移動(dòng)到頁面頂部。網(wǎng)站設(shè)計(jì)層次清晰，也保持著一定的復(fù)雜度。

Sorte En Mer

使用視屏背景是2014年最重要的設(shè)計(jì)趨勢之一，而 Sorte En Mer 則是其中的佼佼者。打開網(wǎng)站的時(shí)候你仿佛打開一部電影，并且你可以通過鼠標(biāo)來操控背景視頻的播放。網(wǎng)站的效果頗為驚艷，并且很少有同類網(wǎng)站能做到這個(gè)層次。

A Spacecraft for All

這個(gè)網(wǎng)站可以帶你了解ISEE-3航天器。你可以通過網(wǎng)站查看ISEE-3的當(dāng)前的實(shí)時(shí)圖像，查看它經(jīng)過的地方和執(zhí)行過的任務(wù)。網(wǎng)站擁有簡約而現(xiàn)代的外觀設(shè)計(jì)，并且鼓勵(lì)用戶與網(wǎng)站進(jìn)行互動(dòng)。

Super Looper

這是個(gè)有趣的游戲，你可以在此創(chuàng)建音樂并且可視化地展現(xiàn)出來，整個(gè)使用體驗(yàn)令人上癮。鮮艷的色彩與黑色的背景令網(wǎng)站在視覺上更富有魅力。

Jam3

這也是一個(gè)充滿動(dòng)畫和視頻的網(wǎng)站，Jam3 擁有一個(gè)簡約的首頁，網(wǎng)站其他的元素都可點(diǎn)擊并且具有經(jīng)驗(yàn)的視覺效果。

A Journey Through Middle-Earth

這是一個(gè)令人印象深刻的網(wǎng)站，一方面是因?yàn)榫W(wǎng)站是以近2年特別火爆的電影《霍比特人》為主題，另一方面是因?yàn)榫W(wǎng)站借助大量的靜態(tài)圖片和動(dòng)態(tài)圖像來創(chuàng)建出游戲般的交互體驗(yàn)。

MashVP

這個(gè)網(wǎng)站設(shè)計(jì)得極為簡約，但是一點(diǎn)都不簡單。當(dāng)你滾動(dòng)頁面的時(shí)候，圖片之間的切換效果頗為有趣，當(dāng)你點(diǎn)擊頂端的按鈕導(dǎo)航的時(shí)候，能讓你看到更多有趣的展示。

Over the Hills

這個(gè)網(wǎng)站擁有如此之多的功能，以至于你可以整天整天地鉆研，從動(dòng)效設(shè)計(jì)到視頻背景，從優(yōu)質(zhì)的音樂體驗(yàn)到復(fù)古的視覺體驗(yàn)，這個(gè)網(wǎng)站會讓你欲罷不能。

Twofold

雖然這個(gè)站點(diǎn)使用極簡風(fēng)，但是網(wǎng)站并不簡單。首頁使用了金色的色調(diào)和閃爍的光芒，滾動(dòng)的時(shí)候漂亮的動(dòng)效設(shè)計(jì)賦予網(wǎng)頁以自然的一面。其實(shí)這樣的網(wǎng)站最好，看似簡單，但是當(dāng)你與之互動(dòng)的時(shí)候卻能給你帶來驚喜。

Leodis

這個(gè)網(wǎng)站深得扁平化設(shè)計(jì)理念的精髓，幾乎上升到一個(gè)全新的境界。漂亮的圖片被置于簡約的排版中，引人入勝。令網(wǎng)站真正與眾不同的是它的配色，強(qiáng)烈的對比令網(wǎng)站的色彩不再“扁平”，這種錯(cuò)落令人著迷。

Valerie Martinez Agency

乍一看這個(gè)網(wǎng)站感覺非常簡單，但是簡單之下隱藏著寶藏。標(biāo)題中的幽靈按鈕會帶你去前進(jìn)，每一個(gè)點(diǎn)擊都能帶來各種動(dòng)效。加載界面上的開場動(dòng)畫同樣令人印象深刻，如果你仔細(xì)看的話。

Volkswagen

網(wǎng)站仿佛被設(shè)計(jì)成為一部電影預(yù)告片，除了帥氣的頁面之外，用戶還可以與網(wǎng)站宣傳的運(yùn)動(dòng)型轎車進(jìn)行交互。真正讓這個(gè)網(wǎng)站令人過目不忘的，還是源自于網(wǎng)站所使用的背景紋理和驚艷的圖片。設(shè)計(jì)團(tuán)隊(duì)還使用了簡單的字體確保網(wǎng)站可讀性，還令整個(gè)站點(diǎn)的設(shè)計(jì)更加統(tǒng)一。

Your Local Studio

極簡風(fēng)、簡約的照片以及用戶相關(guān)的視覺元素混合在一起構(gòu)成了網(wǎng)站獨(dú)特的韻味。

Ba Ba Dum

網(wǎng)站游戲化依然是非?？孔V的手段，這個(gè)網(wǎng)站就是明證。游戲能帶來樂趣，同時(shí)也能為用戶傳遞一些知識。網(wǎng)站使用了色彩明艷的插畫教你來自各種語言的單詞。

【快速提高設(shè)計(jì)能力三部曲】

Step 1：設(shè)計(jì)第一步！版式設(shè)計(jì)基礎(chǔ)原則學(xué)起來！
《設(shè)計(jì)基礎(chǔ)功！幫你徹底掌握設(shè)計(jì)四大原則中的對比原則》

Step 2：設(shè)計(jì)第二步！配色好整個(gè)界面都高端了！
《秒變配色高手！怎么都不會錯(cuò)的6條網(wǎng)頁設(shè)計(jì)配色原則》

Step 3：最后一步！來個(gè)實(shí)戰(zhàn)文你就全懂了！
《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)？》

原文地址：designmodo
優(yōu)設(shè)網(wǎng)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量87萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：