其實在此之前已經有很多小夥伴翻譯或總結過類似文章來分析優秀網頁設計的趨勢，不過我還是希望我總結的東西能更巨集觀一點併為大家帶來一些新的東西。稍後看官們可能會覺得我説的這幾點可能您們都見過或者自己也在一些專案中運用起來，沒錯，沒見過就不叫趨勢， 哈哈! 而將這些東西進行總結然後運用在自己今後的設計中，這樣我們才能緊跟潮流並逐漸引領潮流，否則將只是走馬觀花。

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

　　一、平面設計在網頁設計中的崛起

　　以前我們可能會覺得平面設計和網頁設計以及 UI 設計有很大的區別，會平面設計的人可能未必能做好網頁設計，但這樣的觀念是時候革新了。實際上好的平面設計師會將自己的平面設計功底融合到網頁設計當中，如果我們在學網頁設計的時候只是參照網站設計，那我們永遠無法突破。

　　不論是用平面設計作為背景也好，或者是用平面設計的元素作為網頁控制組件或者裝飾也好，實際上好的平面設計會大大提高網站的視覺衝擊力。所以未來的 UI 設計師也必須是一個不錯的平面設計師了，或者統稱為視覺設計師，加油!

　　二、全屏頁 (頁大圖、視訊背景、特效背景、互動式頁)

　　全屏頁是一種歡迎頁面或者着陸頁的形式，當前網站五花八門，能在時間內傳達網站或企業的精神並吸引多用户繼續瀏覽的重任逐漸落在了這個全屏頁的肩上。不論是圖片背景還是視訊背景，視覺衝擊力和痛點抓取力度成為了頁的重任，這也是篩選潛在客户的一個方式。屏的文案也尤為重要。

　　(1) 頁大圖背景

　　頁大圖的形式相信大家都不陌生了，通常都是高質量的攝影圖片，或者在純色背景上的產品圖片等等。優勢不言而喻，那就是具有很棒的視覺傳達效果和衝擊力。而且隨着網速的不斷提升，幾秒內載入一個百 K 的高清背景對多用户來説不是什麼問題。優設網曾推薦過許多高清相簿站，稍加搜索便可找到。

　　

 

　　(2) 頁視訊背景

　　使用視訊作為頁的背景在視覺上更加具有衝擊力，好的視訊宣傳片更是為網站如虎添翼。但是缺點亦較為明顯，目前國內網速相對仍然較慢，(即便是 30M 的光纖，在很多地方其實都是共享網速，高峯期看個線上視訊都會卡)，而視訊背景通常都是網頁開啓即直接播放的，在網速達不到一定標準的情況下，視訊會卡頓播放，體驗很差。而且為了讓視訊播放流暢，實際上很多網站的視訊都是壓縮成成解析度比較低的視訊，清晰度和圖片相差較大。希望以後能出現視訊緩衝或者預載入技術等方式來提升整個瀏覽效果，關鍵還是網速。

　　JONAS ERIKSSON

　　該網站視訊背景就相當具有震撼力，快速將自己的作品展示給觀眾，讓觀眾充滿好奇。

　　(3) HTML5 特效背景

　　我們以粒子特效背景為例。相對於視訊背景而言，使用新的網絡語言製作的背景在載入速度、成像質量等方面都優於視訊背景，而且特效背景也具有很棒的視覺體驗。

　　FiberSensing　　

 

　　(4) 互動式頁

　　互動式頁指的是在網頁上做一些可以用滑鼠或者鍵盤控制的元素來與多用户發生互動，這樣多用户在頁停留的時間會更久，同時卻很享受這個過程，提高多用户體驗的同時提升網站的趣味性和企業形象。互動式頁面設計經常會運用到諸多 HTML5 或者 CSS3 技術，比如前面提到的粒子特效。

　　Suanier

 

　　滑鼠可控制轉盤，且通過不同的轉向透視與錯位形成了立體的層次效果。

　　三、全屏富式導航

　　傳統網頁設計中，導航選單一般會放置在頁面頂部或者側面，但越來越多的電腦端網站卻將選單全部隱藏在漢堡圖示中。

　　這種設計起初只是導航，稱之為 “全屏導航”; 而到後期，隨着設計的革新和創意的加入，這個頁面的內容也越來越豐富，頁面加入了社交媒體的連結，加入了聯絡方式，甚至有的還加入了留言板等等，我們稱之為 “全屏富式導航” 。

　　這種形式的導航在多用户體驗上其實還是有些風險的，因為多了一次點選，而且會導致很多多用户忽略細節性內容，難以達到優設計，而這種選單通常也需要建立在多用户對漢堡選單的標誌具有相當的熟悉程度基礎之上。目前，我們建議使用這種選單的網站會有一個引導性的提示來告知多用户更多資訊的入口，或者除了選單一個入口外增加其他入口。多用户體驗的一個準則是將多用户需要的資訊主動呈遞給多用户或是能讓多用户在三次點選內找到自己需要的資訊，所以這種隱藏在一個圖示裏的選單目前還是略有風險。不過這種風險會隨着普及程度降低。

　　四、三維視覺效果的崛起

　　這一點將對網頁設計師提出了更高的要求，網頁設計中會融入產品的三維動態展示，這可能會要求網頁設計中包含 UI 與互動設計、工業設計與渲染、視訊剪輯、精通 HTML5 的前端等等。也正是因為這種設計門檻較高，所以增長速度較慢; 但隨着產品專題站的爆炸式增長，在產品介紹裏使用三維已成為越來越多的網頁設計師的選擇。

　　實現三維預覽效果的方式很多，有的是通過 WebGL 技術，有的是通過滑鼠控制視訊播放的技術，也有許多三維動態展示其實是多張不同角度的圖片拼接而成，一幀一幀進行播放。

　　BLIZEYEWEAR　

 

　　MAC PR

 

　　五、動效將更加普及和廣泛

　　期初，網站動效會集中在頁面內部的元素，而隨着網頁技術和創意的不斷發展，動效在網頁中變得無處不在。單頁面網站中瀏覽模組之間的切換不再侷限於單純的推動切換或漸變切換; 而多網頁的網站網頁之間的切換也變得更加柔和，通過不同頁面關閉和開啓之間動畫效果的銜接，您會以為您從頭到尾都在一個網頁上。

　　頁面內部元素的動效，大至 banner 小至一個 button，滑鼠懸浮或者焦點的改變，這些元素都融入了太多豐富的動效。甚至於 GIF 動圖也在網頁中逐漸崛起以補充一些代碼難以實現的動效。

　　前面提到的網站中多數都有精緻的動效哦。

　　DIVI(wordpress)

 

　　該網站就是通過 GIF 實現的一些頁面中展示性的動效。

　　JOHO’　　

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

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

　　同樣，隨着網速以及網絡技術的上升，單頁式網站依舊呈現上升趨勢，這種網站顯着的優勢是資訊不容易遺漏，如果訪問一個站點通過點選又點出了許多子站或者網頁，而這些網頁和主頁之間的邏輯比較混亂或者不能一目瞭然，那這個網站的瀏覽體驗一定是很差的。而單頁網站解決了這個問題，您看到的或者跳轉的頁面，其實還都是在這一個頁面上。而 AJAX 非同步載入等技術也解決了龐大單頁網站的載入速度問題。

　　AQUATILIS

 

　　點選頁面中的按鈕，新的內容將會將原來的頁面向左推動，關閉後恢復原來的位置，就好比左側的頁面是一個時間軸，而您則挨個瀏覽軸上的內容，多用户體驗很贊。

　　七、網頁音效

　　越來越多的網頁設計會在頁面中加入一些音效，可以是網頁背景音效，也可以是頁面滾動音效，也可以是焦點改變時元素的音效。而這些音效共同的特點是都很精緻輕微，輕輕點綴，就像轉動保險櫃旋鈕發出的聲音一樣，清脆悦耳。這樣不會給瀏覽者增加無謂的困擾。而越來越多的瀏覽器為了防止多用户被困擾，增加了關閉當前頁面音效的功能。

　　MY/STATIC/SELF

 

　　不過這個網站的音效並不柔和悦耳，是一種酷酷的恐怖的科技感

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

　　響應式設計已經是老生常談了，相信大家都清楚什麼是響應式設計。之前很多人也分析過響應式設計的利與弊，我也不再贅述。

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

　　不過，響應式設計在國際和國內卻依舊穩步上升，隨着智慧手機技術的不斷革新，移動端的上網多用户已經逐漸追擊電腦上網多用户，而移動網名的數量在世界上是的。移動端網站的設計越來越被重視，而響應式設計正是一個不錯的解決方案。

　　九、中文網站中向量字型的使用逐漸上升

　　我們經常在國外的網站上看到網站內使用一套字型作為自己的網站字型，即使多用户本地沒有這個字型，網站也會很輕易載入到字型並在瀏覽器中運用。而縱觀中文網站，90% 以上的網站內字型不是宋體就是微軟雅黑，想用幾個不一樣的字就得做成 png 圖片，原因很簡單，中文字型檔太大。一套 Helvetica 標準字型大小是 81.68KB，而一套微軟雅黑常規體大小是 20.5MB，您難道要多用户開啓網頁時載入 20.5MB 的資料嗎?

　　但是隨着中文線上字型檔的崛起以及線上製作向量圖示字型工具的發展，包括字蛛計劃，我們可以使用向量素材作為我們的字型了，而不僅限於向量圖示。