在2017年6月之前的數(shù)年間，網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域經(jīng)歷了從靜態(tài)頁(yè)面到動(dòng)態(tài)交互、從桌面優(yōu)先到移動(dòng)優(yōu)先的深刻變革。這一時(shí)期的技術(shù)創(chuàng)新與設(shè)計(jì)思潮，共同塑造了我們今天所熟悉的數(shù)字體驗(yàn)基礎(chǔ)框架。

一、技術(shù)演進(jìn)：響應(yīng)式設(shè)計(jì)與前端框架的崛起

2010年Ethan Marcotte提出“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”概念后，到2017年已成為行業(yè)標(biāo)準(zhǔn)。設(shè)計(jì)師必須考慮多設(shè)備適配，CSS3的媒體查詢技術(shù)讓同一套代碼能夠自動(dòng)適應(yīng)從手機(jī)到臺(tái)式機(jī)的各種屏幕尺寸。前端框架如Bootstrap（2011年發(fā)布）和Foundation極大提升了開(kāi)發(fā)效率，其柵格系統(tǒng)和預(yù)制組件成為無(wú)數(shù)網(wǎng)站的基礎(chǔ)架構(gòu)。JavaScript庫(kù)jQuery雖已成熟，但React（2013年發(fā)布）、AngularJS等現(xiàn)代框架開(kāi)始展現(xiàn)潛力，為單頁(yè)面應(yīng)用（SPA）的發(fā)展鋪平道路。

二、視覺(jué)風(fēng)格的迭代軌跡

扁平化設(shè)計(jì)在2013年iOS7推出后形成浪潮，取代了擬物化風(fēng)格。微軟的Metro設(shè)計(jì)語(yǔ)言（后改稱Fluent Design）和谷歌的Material Design（2014年發(fā)布）相繼建立系統(tǒng)化設(shè)計(jì)規(guī)范。這時(shí)期的網(wǎng)頁(yè)呈現(xiàn)出簡(jiǎn)潔的圖標(biāo)、鮮明的色彩對(duì)比和留白藝術(shù)。卡片式布局因能有效組織信息碎片而盛行，Pinterest（2010年上線）是典型代表。視差滾動(dòng)、全屏背景視頻等技法被廣泛用于營(yíng)造沉浸感，但過(guò)度使用也帶來(lái)性能負(fù)擔(dān)。

三、用戶體驗(yàn)的范式轉(zhuǎn)移

移動(dòng)優(yōu)先（Mobile First）策略由Luke Wroblewski在2009年提出，到2015年已成為共識(shí)。導(dǎo)航模式從復(fù)雜的多級(jí)菜單簡(jiǎn)化為漢堡菜單（三道橫線圖標(biāo)），雖然其可用性爭(zhēng)議持續(xù)存在。頁(yè)面加載速度成為核心指標(biāo)，AMP（Accelerated Mobile Pages，2015年發(fā)布）等技術(shù)應(yīng)運(yùn)而生。無(wú)障礙設(shè)計(jì)開(kāi)始獲得更多關(guān)注，WCAG 2.0標(biāo)準(zhǔn)為視障用戶等群體提供訪問(wèn)支持。

四、內(nèi)容呈現(xiàn)方式的革新

長(zhǎng)滾動(dòng)頁(yè)面取代了多頁(yè)跳轉(zhuǎn)模式，特別適合移動(dòng)端瀏覽。無(wú)限滾動(dòng)技術(shù)在社交和內(nèi)容平臺(tái)普及，但分頁(yè)導(dǎo)航仍在需要定位的場(chǎng)景保留。微交互（Microinteractions）設(shè)計(jì)精細(xì)化，按鈕懸停效果、表單驗(yàn)證動(dòng)畫(huà)等細(xì)節(jié)增強(qiáng)了操作反饋。大字體排版成為趨勢(shì)，蘋(píng)果官網(wǎng)等引領(lǐng)了用字號(hào)層級(jí)建立視覺(jué)秩序的風(fēng)潮。

五、設(shè)計(jì)工具鏈的蛻變

Photoshop逐漸讓位給專為界面設(shè)計(jì)打造的工具。Sketch（2010年發(fā)布）憑借矢量編輯和符號(hào)庫(kù)功能成為設(shè)計(jì)師新寵，其插件生態(tài)開(kāi)始萌芽。協(xié)作平臺(tái)InVision（2011年成立）讓設(shè)計(jì)稿能夠生成可點(diǎn)擊原型。Adobe推出Experience Design（XD）預(yù)覽版（2016年），試圖收復(fù)失地。版本控制工具Abstract（2015年成立）則開(kāi)始解決設(shè)計(jì)資產(chǎn)的管理難題。

六、尚未普及的前夜技術(shù)

這段時(shí)期的末尾已顯現(xiàn)出未來(lái)趨勢(shì)的端倪：CSS Grid布局規(guī)范于2017年3月成為W3C候選推薦標(biāo)準(zhǔn)，但尚未大規(guī)模應(yīng)用；漸進(jìn)式Web應(yīng)用（PWA）概念在2015年提出，谷歌正大力推廣；WebGL讓瀏覽器3D渲染成為可能，但性能要求限制了普及。人工智能在設(shè)計(jì)中的應(yīng)用還停留在理論探討階段。

回顧2017年6月前的網(wǎng)頁(yè)設(shè)計(jì)發(fā)展，我們看到的是一個(gè)行業(yè)從探索走向成熟的關(guān)鍵階段。技術(shù)標(biāo)準(zhǔn)化與設(shè)計(jì)系統(tǒng)化相輔相成，用戶體驗(yàn)取代視覺(jué)炫技成為核心價(jià)值。這些積累為后來(lái)的人工智能輔助設(shè)計(jì)、組件化開(kāi)發(fā)、沉浸式Web體驗(yàn)等奠定了基礎(chǔ)，每一個(gè)404錯(cuò)誤頁(yè)面背后的設(shè)計(jì)思考，都在訴說(shuō)著這個(gè)領(lǐng)域如何從像素的排列演變?yōu)檫B接人與信息的智慧網(wǎng)絡(luò)。