在過去的2013年及2012年，網(wǎng)頁設(shè)計(jì)理念或多或少都受到大公司設(shè)計(jì)風(fēng)格的影響。Google過去幾年中也在搜索算法上做出很多調(diào)整——更注重網(wǎng)站內(nèi)容原創(chuàng)性及可用性。HTML 5釋放了設(shè)計(jì)師的思維，有利有弊，HTML 5 動畫有時也玩過火了。隨著移動Web的訪問不斷增大，響應(yīng)式設(shè)計(jì)變得愈加重要了。

下面我們通過簡單的一些案例闡述2014年的Web設(shè)計(jì)趨勢。但是，記住，不要過度使用。不是每一種趨勢都適合你的客戶。作為設(shè)計(jì)師或Web開發(fā)人員，你有責(zé)任緊跟趨勢，并量身定做你客戶的網(wǎng)站。

準(zhǔn)備好，跟隨我們的腳步來看看今年的流行走向，然后決定你要如何使用它們。

一、扁平化設(shè)計(jì)
當(dāng)蘋果放出iOS 7的時候，不是每個人都喜歡這種全新的扁平設(shè)計(jì)的。然后，喬納森·艾維知道這是去掉擬物化的最佳時機(jī)，引進(jìn)了極簡、干凈、硬朗的設(shè)計(jì)風(fēng)。iOS 7發(fā)布后，大量的扁平化風(fēng)格出現(xiàn)在網(wǎng)絡(luò)上，今年也不例外。這不僅對移動友好，而且更能體現(xiàn)設(shè)計(jì)的本質(zhì)——有效組織外觀和感覺。
Mostlyserious

完全的扁平化設(shè)計(jì)及少量動畫效果
Belancio

扁平化的案例設(shè)計(jì)

不是每個網(wǎng)站都適合扁平化設(shè)計(jì)，比如你客戶會要求使用擬物化或3D元素等。對于其他內(nèi)容比較多的網(wǎng)站，你扁平化一些元素，往往可以起到簡化網(wǎng)站的作用。
二、定制化
今天定制化更突出，互聯(lián)網(wǎng)品牌競爭更需要尋找一種獨(dú)特的方法來捕捉相同的目標(biāo)市場。針對客戶定制獨(dú)特的網(wǎng)頁設(shè)計(jì)已成為一種趨勢，特別是使用HTML5、CSS3、jQuery等技術(shù)。很多網(wǎng)站使用的圖片進(jìn)行了比如顏色覆蓋，模糊等效果。單頁網(wǎng)站使用的覆蓋，圖片燈箱效果，滾動視差，及其它交互效果也很普遍。設(shè)計(jì)師設(shè)計(jì)網(wǎng)站考慮藝術(shù)字體（下面介紹）、混合字體或其它方式也很多。
Dolox

整站使用視差定制化，非常有創(chuàng)意。
Hellomonday

頭部的羅盤定位和一個可愛的獨(dú)特的視差滾動。

定制是為了避免過分的謹(jǐn)慎，有時你只要簡單的原始項(xiàng)目讓你的網(wǎng)站脫穎而出。
三、藝術(shù)字體
網(wǎng)頁字體開啟了創(chuàng)造性的Web排版方式?，F(xiàn)在，網(wǎng)頁設(shè)計(jì)師已不再局限于使用僅有幾種系統(tǒng)字體，過去一年，我們也看到越多網(wǎng)站使用創(chuàng)意字體。另一個好處是Web字體也能打印，這大大方便了品牌的統(tǒng)一性。
Fixedagency

匹配公司形象的手寫字體
Princeink

使用獨(dú)特的字體組織結(jié)構(gòu)

藝術(shù)字體有時容易走向極端，大量文本內(nèi)容時不宜使用藝術(shù)字體，否則難于閱讀。這種情況下，你可以選擇標(biāo)題使用藝術(shù)字體，或作為點(diǎn)綴。
四、滾動講故事
越來越多的網(wǎng)站，包括某種形式的一個滾動故事。?這種方式一般使用在單頁網(wǎng)站上（盡管這一趨勢也用在關(guān)于頁面或主要頁面上），用戶通過向下滾動的方式查看故事的主要信息。過去，通常都是用視差講故事，不過近來更多也使用文本和圖像進(jìn)行視差講故事了，主要是移動化。
Everylastdrop

通過單頁網(wǎng)站設(shè)計(jì)創(chuàng)建故事讓用戶意識到社會或環(huán)境問題和解決方案。使用豐富的動畫，讓訪客更加娛樂。
Sweez

電子商務(wù)類也可以使用滾動視差來講故事。

實(shí)際上，圖像類故事滾動比文本多，它有好處也有壞處。文本過少不青睞搜索引擎，作為設(shè)計(jì)師，你需要權(quán)衡，通過設(shè)置一些標(biāo)簽使SEO優(yōu)化更友好。
五、主題區(qū)
主題區(qū)或者主角區(qū)源自平面設(shè)計(jì)領(lǐng)域的術(shù)語，意思是頁面設(shè)計(jì)頭部使用大圖片和少量文字。這種方式通過簡短的網(wǎng)站快照，在幾秒鐘內(nèi)吸引訪客注意力，使人眼前一亮，產(chǎn)生好奇心。個人網(wǎng)站經(jīng)常會用到主題區(qū)設(shè)計(jì)，可能是他們的偉大的工作能產(chǎn)生巨大的影響。
Moresleep

非常簡潔地使用盡可能少的文字告訴他們做什么，以及他們?nèi)绾问箍蛻羰芤妗?br /> Plainmade

使用一兩句吸引觀眾。

甚至大多數(shù)電子商務(wù)網(wǎng)站都使用主題區(qū)，通常使用很特殊的圖像來吸引受眾。如果你不能把訪問者帶到主題區(qū)域的下方，那就危險(xiǎn)了。如果用戶需要滾動很多才能看到更多，那么可能容易迷路。如果是這樣，你可以選擇固定住主導(dǎo)航。
六、視頻
許多網(wǎng)站正在使用視頻而不是文本來講述他們的故事，介紹他們的產(chǎn)品，或提供產(chǎn)品的使用說明。視頻的偉大之處是同時提高了網(wǎng)站的搜索可見性，特別是提供了必要SEO搜索標(biāo)簽。視頻的一個壞處是有些訪客更愿意看標(biāo)題和文字說明，而不是30秒到2分鐘的視頻，意味著你需要提供一個文本替換版本。

Onlycoin

主題區(qū)展示視頻，文本和圖形向下滾動講故事，以及讓訪客選擇喜歡的方式。
Savelli-geneve

上下導(dǎo)航自動隱藏，讓視頻顯示最大化。
七、移動優(yōu)先
2014年，我們將看到更多偏向移動化的設(shè)計(jì)。不僅僅是響應(yīng)式，而是轉(zhuǎn)為移動定制的網(wǎng)頁設(shè)計(jì)。通常字體很大，很長的滾動，卡片式的內(nèi)容組織，強(qiáng)調(diào)社會化媒體等。一些網(wǎng)站不僅對移動友好，而且希望網(wǎng)站做成移動應(yīng)用形式。所以你也應(yīng)該學(xué)習(xí)一下移動應(yīng)用的設(shè)計(jì)了。
Featured

卡片式的風(fēng)格展示
Mottau

從上到下，大字體，大按鈕，大表單，更利于移動閱覽。

創(chuàng)建一個移動版的網(wǎng)站吧，現(xiàn)在大多數(shù)使用智能手機(jī)的頻率已經(jīng)遠(yuǎn)遠(yuǎn)超過電腦了。響應(yīng)式設(shè)計(jì)也一樣，在PC端訪問也在逐漸減少。所以，問一下你的客戶他們的受眾是用什么客戶端訪問網(wǎng)站的，基于數(shù)字，推薦他們移動為先進(jìn)行網(wǎng)站設(shè)計(jì)，或者有一個移動應(yīng)用APP。
八、極簡設(shè)計(jì)
極簡設(shè)計(jì)的趨勢已經(jīng)存在很長一段時間，網(wǎng)站只有極少的內(nèi)容。隨著越來越多的網(wǎng)站強(qiáng)調(diào)可用性，最小化元素，即使大型電子商務(wù)網(wǎng)站也已經(jīng)開始發(fā)揮作用。這類型的網(wǎng)站更多使用比較單一的一兩種配色，導(dǎo)航保持簡潔和有效組織下來菜單。圖片正在取代文本塊，甚至很多人放棄側(cè)邊欄給讀者更流暢的閱讀體驗(yàn)。
Danebowen

單一的色彩，簡易的導(dǎo)航
Madeofsundays

即使這些電子商務(wù)網(wǎng)站可以保持非常簡約。

大多數(shù)設(shè)計(jì)師都知道，極簡的網(wǎng)站更重視內(nèi)容的體現(xiàn)。極簡的設(shè)計(jì)剔除不必要的元素，回歸設(shè)計(jì)為內(nèi)容服務(wù)。然而，有些客戶要求在某些區(qū)域精簡，比如導(dǎo)航，使用可愛的插畫或字體加強(qiáng)品牌形象。
十、交互設(shè)計(jì)
網(wǎng)站的交互越來越突出，有組織的交互體驗(yàn)?zāi)墚a(chǎn)生與客戶建立情感聯(lián)系。不需要借助Flash ,HTML 5 和CSS 3結(jié)合就能創(chuàng)造出豐富的動畫效果。事實(shí)上，在移動上HTML 5 也是替代Flash的最佳技術(shù)。
Thirdthrone

主題區(qū)獨(dú)特的指示和文本，向下滾動獨(dú)特的剪頭指向。
Minon

電子商務(wù)網(wǎng)站的簡單和創(chuàng)意交互效果，通過拖動食物到面包上試試。
Puma

把加載慢做的有意義的交換特效

游戲，翻滾的動畫按鈕，滾動的動畫，都成用戶體驗(yàn)難忘的一部分。網(wǎng)站使用一系列交互效果能幫助客戶更好找到他們所需要的，但是，小心處理加載網(wǎng)站，否則就是個繁重的HTML 5網(wǎng)站了。如果你的訪客不喜歡等待（我想大多數(shù)都是），應(yīng)盡量減少交互效果。

十一、固定導(dǎo)航

一個迅速的新興趨勢的可用性研究是固定導(dǎo)航菜單。這類型通常是固定頂部菜單，然后是長滾動，或者點(diǎn)擊菜單到達(dá)頁面的某個區(qū)域。
Wedgeandlever

固定導(dǎo)航欄增加可用性
Justinaguilar

通過不同的工作樣本菜單進(jìn)入不同區(qū)域。

Rook

使用一個大的固定導(dǎo)航。

并不是所有的網(wǎng)站都需要一個固定的導(dǎo)航。如果有大量需要快速訪問的內(nèi)容，可以考慮導(dǎo)航固頂。實(shí)際上，有多少網(wǎng)站應(yīng)該固定的（頭部或側(cè)邊欄）而沒有選擇固定呢？

還有哪些2014年的設(shè)計(jì)趨勢，你來預(yù)測，在下面的評論里與我們分享。

原文地址：enqoo