其實在此之前已經(jīng)有很多小夥伴翻譯或總結過(guò)類似文章來分析優秀網頁設計的趨勢，不過(guò)我還(hái)是希望我總結的東西能(néng)更宏觀一點并爲大家帶來一些新的東西。

稍後(hòu)看官們可能(néng)會覺得我說的這(zhè)幾點可能(néng)你們都(dōu)見過(guò)或者自己也在一些項目中運用起(qǐ)來，沒(méi)錯，沒(méi)見過(guò)就不叫(jiào)趨勢， 哈哈！而將(jiāng)這(zhè)些東西進(jìn)行總結然後(hòu)運用在自己今後(hòu)的設計中，這(zhè)樣(yàng)我們才能(néng)緊跟潮流并逐漸引領潮流，否則將(jiāng)隻是走馬觀花。

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

我們通過(guò)幾個網站以及看官記憶中的網站一起(qǐ)探索吧，雖是管中窺豹，但趨勢可見一斑！

一、平面(miàn)設計在網頁設計中的崛起(qǐ)

以前我們可能(néng)會覺得平面(miàn)設計和網頁設計以及UI設計有很大的區别，會平面(miàn)設計的人可能(néng)未必能(néng)做好(hǎo)網頁設計，但這(zhè)樣(yàng)的觀念是時候革新了。實際上好(hǎo)的平面(miàn)設計師會將(jiāng)自己的平面(miàn)設計功底融合到網頁設計當中，如果我們在學(xué)網頁設計的時候隻是參照網站設計，那我們永遠無法突破。

不論是用平面(miàn)設計作爲背景也好(hǎo)，或者是用平面(miàn)設計的元素作爲網頁控件或者裝飾也好(hǎo)，實際上好(hǎo)的平面(miàn)設計會大大提高網站的視覺沖擊力。所以未來的UI設計師也必須是一個不錯的平面(miàn)設計師了，或者統稱爲視覺設計師，加油！

二、全屏首頁（首頁大圖、視頻背景、特效背景、交互式首頁）

全屏首頁是一種(zhǒng)歡迎頁面(miàn)或者著(zhe)陸頁的形式，當前網站五花八門，能(néng)在第一時間内傳達網站或企業的精神并吸引用戶繼續浏覽的重任逐漸落在了這(zhè)個全屏首頁的肩上。不論是圖片背景還(hái)是視頻背景，視覺沖擊力和痛點抓取力度成(chéng)爲了首頁的重任，這(zhè)也是篩選潛在客戶的一個方式。首屏的文案也尤爲重要。

（1）首頁大圖背景

首頁大圖的形式相信大家都(dōu)不陌生了，通常都(dōu)是高質量的攝影圖片，或者在純色背景上的産品圖片等等。優勢不言而喻，那就是具有很棒的視覺傳達效果和沖擊力。而且随著(zhe)網速的不斷提升，幾秒内加載一個百K的高清背景對(duì)用戶來說不是什麼(me)問題。優設網曾推薦過(guò)許多高清圖庫站，稍加搜索便可找到。

（2）首頁視頻背景

使用視頻作爲首頁的背景在視覺上更加具有沖擊力，好(hǎo)的視頻宣傳片更是爲網站如虎添翼。但是缺點亦較爲明顯，目前國(guó)内網速相對(duì)仍然較慢，（即便是30M的光纖，在很多地方其實都(dōu)是共享網速，高峰期看個在線視頻都(dōu)會卡），而視頻背景通常都(dōu)是網頁打開(kāi)即直接播放的，在網速達不到一定标準的情況下，視頻會卡頓播放，體驗很差。而且爲了讓視頻播放流暢，實際上很多網站的視頻都(dōu)是壓縮成(chéng)成(chéng)分辨率比較低的視頻，清晰度和圖片相差較大。希望以後(hòu)能(néng)出現視頻緩沖或者預加載技術等方式來提升整個浏覽效果，關鍵還(hái)是網速。

JONAS ERIKSSON

該網站視頻背景就相當具有震撼力，快速將(jiāng)自己的作品展示給觀衆，讓觀衆充滿好(hǎo)奇。

（3） HTML5特效背景

我們以粒子特效背景爲例。相對(duì)于視頻背景而言，使用新的網絡語言制作的背景在加載速度、成(chéng)像質量等方面(miàn)都(dōu)優于視頻背景，而且特效背景也具有很棒的視覺體驗。

FiberSensing

（4）交互式首頁

交互式首頁指的是在網頁上做一些可以用鼠标或者鍵盤控制的元素來與用戶發(fā)生互動，這(zhè)樣(yàng)用戶在首頁停留的時間會更久，同時卻很享受這(zhè)個過(guò)程，提高用戶體驗的同時提升網站的趣味性和企業形象。交互式頁面(miàn)設計經(jīng)常會運用到諸多HTML5或者CSS3技術，比如前面(miàn)提到的粒子特效。

Suanier

鼠标可控制轉盤，且通過(guò)不同的轉向(xiàng)透視與錯位形成(chéng)了立體的層次效果。

三、全屏富式導航

傳統網頁設計中，導航菜單一般會放置在頁面(miàn)頂部或者側面(miàn)，但越來越多的電腦端網站卻將(jiāng)菜單全部隐藏在漢堡圖标中。

這(zhè)種(zhǒng)設計起(qǐ)初隻是導航，稱之爲“全屏導航”；而到後(hòu)期，随著(zhe)設計的革新和創意的加入，這(zhè)個頁面(miàn)的内容也越來越豐富，頁面(miàn)加入了社交媒體的鏈接，加入了聯系方式，甚至有的還(hái)加入了留言闆等等，我們稱之爲“全屏富式導航”。

這(zhè)種(zhǒng)形式的導航在用戶體驗上其實還(hái)是有些風險的，因爲多了一次點擊，而且會導緻很多用戶忽略細節性内容，難以達到最優設計，而這(zhè)種(zhǒng)菜單通常也需要建立在用戶對(duì)漢堡菜單的标志具有相當的熟悉程度基礎之上。目前，我們建議使用這(zhè)種(zhǒng)菜單的網站會有一個引導性的提示來告知用戶更多信息的入口，或者除了菜單一個入口外增加其他入口。用戶體驗的一個準則是將(jiāng)用戶需要的信息主動呈遞給用戶或是能(néng)讓用戶在三次點擊内找到自己需要的信息，所以這(zhè)種(zhǒng)隐藏在一個圖标裡(lǐ)的菜單目前還(hái)是略有風險。不過(guò)這(zhè)種(zhǒng)風險會随著(zhe)普及程度降低。

四、三維視覺效果的崛起(qǐ)

這(zhè)一點將(jiāng)對(duì)網頁設計師提出了更高的要求，網頁設計中會融入産品的三維動态展示，這(zhè)可能(néng)會要求網頁設計中包含UI與交互設計、工業設計與渲染、視頻剪輯、精通HTML5的前端等等。也正是因爲這(zhè)種(zhǒng)設計門檻較高，所以增長(cháng)速度較慢；但随著(zhe)産品專題站的爆炸式增長(cháng)，在産品介紹裡(lǐ)使用三維已成(chéng)爲越來越多的網頁設計師的選擇。

實現三維預覽效果的方式很多，有的是通過(guò)WebGL技術，有的是通過(guò)鼠标控制視頻播放的技術，也有許多三維動态展示其實是多張不同角度的圖片拼接而成(chéng)，一幀一幀進(jìn)行播放。

五、動效將(jiāng)更加普及和廣泛

期初，網站動效會集中在頁面(miàn)内部的元素，而随著(zhe)網頁技術和創意的不斷發(fā)展，動效在網頁中變得無處不在。單頁面(miàn)網站中浏覽模塊之間的切換不再局限于單純的推動切換或漸變切換；而多網頁的網站網頁之間的切換也變得更加柔和，通過(guò)不同頁面(miàn)關閉和打開(kāi)之間動畫效果的銜接，你會以爲你從頭到尾都(dōu)在一個網頁上。

頁面(miàn)内部元素的動效，大至banner小至一個button，鼠标懸浮或者焦點的改變，這(zhè)些元素都(dōu)融入了太多豐富的動效。甚至于GIF動圖也在網頁中逐漸崛起(qǐ)以補充一些代碼難以實現的動效。

前面(miàn)提到的網站中多數都(dōu)有精緻的動效哦。

DIVI（wordpress）

該網站就是通過(guò)GIF實現的一些頁面(miàn)中展示性的動效。

JOHO’s

其實我們提過(guò)的很多特效都(dōu)在該網站得到了體現，運用了大量的網頁新技術，比如WebGL技術、序列幀動畫……尤其在頁面(miàn)切換時的動效。

六、單頁網站走勢繼續上升

同樣(yàng)，随著(zhe)網速以及網絡技術的上升，單頁式網站依舊呈現上升趨勢，這(zhè)種(zhǒng)網站最顯著的優勢是信息不容易遺漏，如果訪問一個站點通過(guò)點擊又點出了許多子站或者網頁，而這(zhè)些網頁和主頁之間的邏輯比較混亂或者不能(néng)一目了然，那這(zhè)個網站的浏覽體驗一定是很差的。而單頁網站解決了這(zhè)個問題，你看到的或者跳轉的頁面(miàn)，其實還(hái)都(dōu)是在這(zhè)一個頁面(miàn)上。而AJAX異步加載等技術也解決了龐大單頁網站的加載速度問題。

AQUATILIS

點擊頁面(miàn)中的按鈕，新的内容將(jiāng)會將(jiāng)原來的頁面(miàn)向(xiàng)左推動，關閉後(hòu)恢複原來的位置，就好(hǎo)比左側的頁面(miàn)是一個時間軸，而你則挨個浏覽軸上的内容，用戶體驗很贊。

七、網頁音效

越來越多的網頁設計會在頁面(miàn)中加入一些音效，可以是網頁背景音效，也可以是頁面(miàn)滾動音效，也可以是焦點改變時元素的音效。而這(zhè)些音效共同的特點是都(dōu)很精緻輕微，輕輕點綴，就像轉動保險櫃旋鈕發(fā)出的聲音一樣(yàng)，清脆悅耳。這(zhè)樣(yàng)不會給浏覽者增加無謂的困擾。而越來越多的浏覽器爲了防止用戶被(bèi)困擾，增加了關閉當前頁面(miàn)音效的功能(néng)。

MY/STATIC/SELF

不過(guò)這(zhè)個網站的音效并不柔和悅耳，是一種(zhǒng)酷酷的恐怖的科技感

八、移動優先的響應式設計繼續盛行

響應式設計已經(jīng)是老生常談了，相信大家都(dōu)清楚什麼(me)是響應式設計。之前很多人也分析過(guò)響應式設計的利與弊，我也不再贅述。

很多國(guó)内的網站在建站之初不會選擇響應式設計，原因也是比較符合我國(guó)國(guó)情的，流量少、網速慢、4G普及程度不夠等諸多原因，導緻我們在手機端浏覽一個響應式的企業網站的時候會耗用較長(cháng)時間的加載，而根據5秒原則，用戶5秒内打不開(kāi)一個網站，就會選擇關閉。目前國(guó)内BAT的網站基本還(hái)是移動和電腦分開(kāi)設計，而國(guó)内很多建站公司的響應式企業建站，也含有一部分噱頭在内。

不過(guò)，響應式設計在國(guó)際和國(guó)内卻依舊穩步上升，随著(zhe)智能(néng)手機技術的不斷革新，移動端的上網用戶已經(jīng)逐漸追擊電腦上網用戶，而中國(guó)移動網名的數量在世界上是領先的。移動端網站的設計越來越被(bèi)重視，而響應式設計正是一個不錯的解決方案。

九、中文網站中矢量字體的使用逐漸上升

我們經(jīng)常在國(guó)外的網站上看到網站内使用一套字體作爲自己的網站字體，即使用戶本地沒(méi)有這(zhè)個字體，網站也會很輕易加載到字體并在浏覽器中運用。而縱觀中文網站，90%以上的網站内字體不是宋體就是微軟雅黑，想用幾個不一樣(yàng)的字就得做成(chéng)png圖片，原因很簡單，中文字庫太大。一套Helvetica标準字體大小是81.68KB，而一套微軟雅黑常規體大小是20.5MB，你難道(dào)要用戶打開(kāi)網頁時加載20.5MB的數據嗎？

但是随著(zhe)中文在線字庫的崛起(qǐ)以及在線制作矢量圖标字體工具的發(fā)展，包括字蛛計劃，我們可以使用矢量素材作爲我們的字體了，而不僅限于矢量圖标。

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。