影響網(wǎng)頁設(shè)計(jì)趨勢(shì)的最根本因素，并非審美情趣，而是技術(shù)的發(fā)展。

就過去幾年來說，以下4點(diǎn)值得在未來繼續(xù)關(guān)注：

1. 移動(dòng)設(shè)備使用人數(shù)逐年增長
2. 移動(dòng)和家用網(wǎng)絡(luò)中的帶寬增加
3. WebGL技術(shù)的出現(xiàn)，使開發(fā)人員能夠借助系統(tǒng)顯示芯片在瀏覽器中展示各種3D模型和場(chǎng)景
4. HTML5，CSS3的廣泛應(yīng)用及JS框架技術(shù)的崛起

這些技術(shù)進(jìn)步在很大程度上對(duì)網(wǎng)頁設(shè)計(jì)產(chǎn)生了影響，其中最突出的是2010年“自適應(yīng)（響應(yīng)式）網(wǎng)頁設(shè)計(jì)”概念的產(chǎn)生及應(yīng)用。
在樣式方面，最近幾年扁平化設(shè)計(jì)成為主流，后來Google引入Material Design，又稍稍將我們的視線從抽象化中拉回來一些。

2017年，網(wǎng)頁設(shè)計(jì)會(huì)進(jìn)一步重返現(xiàn)實(shí)。

從樣式、配色到功能性，2017會(huì)是現(xiàn)實(shí)與技術(shù)發(fā)生碰撞與融合的一年。最終目的就是連接這二者，實(shí)現(xiàn)更加“無縫銜接”的瀏覽體驗(yàn)。

1.「 多樣化導(dǎo)航 」
自適應(yīng)網(wǎng)頁設(shè)計(jì)興起之后，“漢堡包菜單”大行其道。它確實(shí)是針對(duì)移動(dòng)設(shè)備瀏覽的可行方案，但仍然有缺陷：
不夠直觀，可發(fā)現(xiàn)性低；
妨礙用戶參與；
效率較低（對(duì)用戶、設(shè)計(jì)師、開發(fā)來說都是）...
我們期待接下來的一年中出現(xiàn)更多實(shí)驗(yàn)性導(dǎo)航設(shè)計(jì)靈感。

以下幾種菜單設(shè)計(jì)趨勢(shì)作為拋磚引玉：

a. 相框式菜單欄
組合網(wǎng)頁上部、左右，以及向下滾動(dòng)，形成一個(gè)獨(dú)特的相框式菜單。

b. Pop over！
Pop over 是彈出式菜單欄（Pop-up）的演變，在Pop over中，導(dǎo)航菜單占據(jù)整個(gè)頁面，鮮明大膽卻又不突兀。

c. 干脆不要菜單了
不使用菜單，取而代之用「scroll →」等提示用戶進(jìn)行滾動(dòng)以獲取更多頁面內(nèi)容。把圖片作為主導(dǎo)，去除多余信息干擾，簡(jiǎn)明突出，尤其適合美食主題網(wǎng)站～

2.「 分裂 屏幕 」
垂直將屏幕界面分為左右相等的兩塊，用撞色等方式進(jìn)行分割，營造清晰的視覺分離效果，這種直截了當(dāng)?shù)木W(wǎng)站風(fēng)格會(huì)成為2017年一大趨勢(shì)。
簡(jiǎn)單的垂直分割看似千篇一律，其實(shí)充滿想象力和發(fā)揮空間，適用于各類網(wǎng)站。

3.「色彩復(fù)興 」
過去兩年中，灰色大規(guī)模劫持了我們的網(wǎng)站。從前的白色網(wǎng)頁背景變成了淡灰色；黑色文本變成了暗灰色；在Material Design中，用淺灰表示縱深的陰影。
2017，是時(shí)候讓更多的顏色回來了?？梢灶A(yù)見的是，復(fù)古色調(diào)將受到追捧。
無論你最終決定用藍(lán)色還是橙色，可以再試著給它加上一個(gè)“濾鏡”，為用戶制造一種溫暖、懷舊的感覺，提升網(wǎng)站的整體氛圍與質(zhì)感。

4.「自定義滾動(dòng) 」
越來越多的網(wǎng)站舍棄了傳統(tǒng)的滾動(dòng)條，轉(zhuǎn)而創(chuàng)造一種自定義的滾動(dòng)體驗(yàn)。一些網(wǎng)站使用的是“虛擬滾動(dòng)”，即在頁面程序內(nèi)讓用戶進(jìn)行滾動(dòng)操作，而不受瀏覽器控制。
虛擬滾動(dòng)使更多類型的滾動(dòng)方式得以實(shí)現(xiàn)。比如設(shè)計(jì)為水平線上的左右滾動(dòng)，但可以用正常的鼠標(biāo)進(jìn)行控制。

5.「 融合真實(shí)與數(shù)字世界 」
之前，Material Deaign的出現(xiàn)，在扁平化設(shè)計(jì)的基礎(chǔ)上加入陰影和斜度，為平面圖標(biāo)增加了三維立體的視感。
網(wǎng)頁設(shè)計(jì)的2017年，是進(jìn)一步重回現(xiàn)實(shí)的一年。但這里所說的并非擬真設(shè)計(jì)（skeuomorphism），而是讓有形的、可觸碰的真實(shí)世界與電子世界無縫對(duì)接，創(chuàng)造沒有界限的體驗(yàn)——
現(xiàn)實(shí)中的物體將保留它們的真實(shí)細(xì)節(jié)，完整進(jìn)入到數(shù)字環(huán)境中，但又不再受限于現(xiàn)實(shí)規(guī)則——小物件可以在屏幕上變得巨大，并與數(shù)字元素發(fā)生互動(dòng)。
在Beoplay的網(wǎng)頁上，耳機(jī)被突出放大，遠(yuǎn)超出真實(shí)尺寸，同時(shí)與象征聲音的動(dòng)態(tài)線條結(jié)合產(chǎn)生互動(dòng)。
現(xiàn)實(shí)與屏幕的界限被模糊之后，用戶與屏幕上的圖像更容易產(chǎn)生情感聯(lián)結(jié)。

6.「 影院級(jí)別的交互體驗(yàn) 」
大幅的視頻錄像背景在2015年就成為網(wǎng)頁設(shè)計(jì)的趨勢(shì)，并且越來越流行。如今，技術(shù)的進(jìn)步使得視頻加載時(shí)間大大縮短，同時(shí)，WebGL（一種3D繪圖技術(shù)）讓這種背景變得更具互動(dòng)性。

7.「 讓美術(shù)指導(dǎo)取代長寬比 」
在Retina屏上完美顯示的圖片場(chǎng)景，在手機(jī)上可能看起來完全不是那么回事。面對(duì)諸多的顯示屏幕，以及各種各樣的長寬比，設(shè)計(jì)師如何處理這個(gè)“自適應(yīng)的宇宙”？大多數(shù)情況下，他們選擇裁剪。
怎樣才能在裁剪中保留設(shè)計(jì)的本意，不過分丟失信息呢？你需要：數(shù)字美術(shù)指導(dǎo)。
設(shè)計(jì)的本質(zhì)是提供解決問題的方法，而美術(shù)指導(dǎo)關(guān)注引發(fā)對(duì)的情感，讓用戶能夠與他們所看到、所經(jīng)歷的事物產(chǎn)生關(guān)聯(lián)和共鳴。在網(wǎng)頁設(shè)計(jì)的過程中引入美術(shù)指導(dǎo)的思想，就不會(huì)拘泥于將所要傳達(dá)的內(nèi)容看作一張靜止的圖片，而是將它作為一個(gè)能傳達(dá)故事的主題。
基于這樣的考慮，一些網(wǎng)站已經(jīng)選擇無視長寬比。例如，Google Arts &Culture支持的網(wǎng)站：The Hidden World of the National Parks（國家公園里的隱秘世界），這個(gè)網(wǎng)站用全屏vedio作為背景，同時(shí)也作為網(wǎng)站的主要內(nèi)容呈現(xiàn)，它能不斷延伸覆蓋任何尺寸的瀏覽器。

8.「 微動(dòng)效與微交互 」
運(yùn)動(dòng)能吸引注意，這是人類進(jìn)化的結(jié)果。但突發(fā)性的大動(dòng)作只會(huì)讓帶來驚嚇和警惕。相反，輕微流暢的運(yùn)動(dòng)能給人生機(jī)勃勃之感。
在為網(wǎng)頁設(shè)計(jì)動(dòng)效時(shí)，要記住這二者的差別。
過去很長一段時(shí)間，網(wǎng)頁中的動(dòng)效往往是用來“獎(jiǎng)勵(lì)”用戶的某種動(dòng)作，比如點(diǎn)擊。但最近，越來越多的網(wǎng)頁開始將小動(dòng)效作為一種設(shè)計(jì)元素，用來吸引用戶的注意力。
比如我們常見的“waypoints”（滾動(dòng)監(jiān)聽觸發(fā)插件），當(dāng)頁面滾動(dòng)到某個(gè)元素時(shí)，觸發(fā)某種動(dòng)畫，從而精準(zhǔn)地讓用戶注意到我們想讓他們重點(diǎn)關(guān)注的地方。
這些輕巧的互動(dòng)不僅僅為用戶體驗(yàn)加分，而且能賦予一個(gè)網(wǎng)站獨(dú)特的個(gè)性魅力。