大部分的網(wǎng)頁設(shè)計(jì)趨勢(shì)，例如元素淡入，響應(yīng)式布局和視差滾動(dòng)，通?？梢曰厮莸侥菚r(shí)的可行技術(shù)。它有時(shí)是先前設(shè)計(jì)風(fēng)格的后續(xù)效應(yīng)，有時(shí)是總體平面設(shè)計(jì)趨勢(shì)匯聚形成的結(jié)果。本文將探討2020年即將到來的網(wǎng)頁設(shè)計(jì)趨勢(shì)，及這種變化與趨勢(shì)的潛在原因。
毛玻璃效果什么是毛玻璃效果
對(duì)出現(xiàn)在元素其后的背景進(jìn)行模糊與半透明處理，被稱作毛玻璃效果。在為Windows界面提供的高級(jí)視覺效果功能Windows Aero中，毛玻璃效果首次被大規(guī)模采用。之后蘋果和主要應(yīng)用的開發(fā)者也開始在他們的操作系統(tǒng)和應(yīng)用程序中采用它。
導(dǎo)航欄中的毛玻璃效果
目前為止，這種效果還算少見，但你將會(huì)看到越來越多的網(wǎng)頁上出現(xiàn)這種俏皮美麗的外觀效果。當(dāng)前它常見于導(dǎo)航欄或是作為文本背景的圖像。在網(wǎng)頁上，需要精心模擬才能得出這種毛玻璃效果，這也使其難以實(shí)現(xiàn)。不過，許多現(xiàn)代瀏覽器已經(jīng)支持這種叫做*背景過濾器*（*backdrop-filter*）的新樣式表屬性了。此外，這種毛玻璃效果具有現(xiàn)代感，半透明的純色背景能輕易讓人實(shí)現(xiàn)優(yōu)美的回退。
雅虎在背景圖片上采用了毛玻璃效果
暗黑模式是什么
是一個(gè)自適應(yīng)于網(wǎng)頁應(yīng)用和網(wǎng)站的配色方案，它會(huì)根據(jù)你的原生操作系統(tǒng)，適配一個(gè)高亮或是暗黑的網(wǎng)站主題模式。
YouTube的暗黑模式
幾年前，一些網(wǎng)站開始采用一種可手動(dòng)設(shè)置的暗黑模式。對(duì)于那些偏愛深色網(wǎng)頁設(shè)計(jì)的夜貓子來說，這是一個(gè)簡(jiǎn)單的控制開關(guān)，它被放置在網(wǎng)站的角落里。今年，在安卓、Windows和蘋果設(shè)備都增添了暗黑模式后，移動(dòng)端和電腦端上主要的原生應(yīng)用采用了起補(bǔ)充作用的暗黑模式(或高亮模式，具體取決于它們的默認(rèn)設(shè)置)。
通過CSS媒體查詢中*顏色方案*（*prefers-color-scheme*）的特性，網(wǎng)頁瀏覽器正在進(jìn)一步為網(wǎng)站開發(fā)者提供啟用暗模式的系統(tǒng)首選項(xiàng)。它得到了所有現(xiàn)代且受歡迎的網(wǎng)站的支持。
（譯者注：媒體查詢（media query）是一種CSS響應(yīng)式布局，使用媒介查詢，你可以針對(duì)不同的媒介類型定義不同的樣式。）
無處不在的漸變是什么
漸變指從一種顏色逐漸過渡到另一種顏色。在扁平設(shè)計(jì)主導(dǎo)數(shù)字界面之前，漸變被用來創(chuàng)建(半)寫實(shí)的表面。隨著幾年前扁平風(fēng)格的興起，似乎從純粹的扁平過渡到注入漸變的設(shè)計(jì)風(fēng)格，再次重添了一些深度。
按鈕邊框上的漸變
此外，這種漸變趨勢(shì)適用于顏色被設(shè)置為漸變的字體設(shè)計(jì)里；為充分利用這種漸變效果，網(wǎng)頁上也越來越喜歡采用更巨大更醒目的字體設(shè)計(jì)。
字體的漸變 為什么
如今沒有一種特定的網(wǎng)絡(luò)技術(shù)再能使?jié)u變更具吸引力了。之前通過良好技術(shù)支持，漸變已經(jīng)可以被用在背景，字體和各種元素上。
類似的屬性*背景裁切*（*background-clip*）和*文本填充色*（*text-fill-color*）支持創(chuàng)建漸變的文本，*混合模式*（*mix-blend-mode*）支持將多個(gè)圖層混合來實(shí)現(xiàn)新的漸變效果。多年來這些技術(shù)得到很好的支持，并能成熟地投入生產(chǎn)應(yīng)用。
不過，看到多家科技公司都采用漸變?nèi)ブ谱鳟a(chǎn)品標(biāo)識(shí)時(shí)，這似乎是一種自然發(fā)生的設(shè)計(jì)趨勢(shì)，而不是一種技術(shù)驅(qū)動(dòng)的趨勢(shì)。因此，對(duì)于*混合模式*和漸變顏色的更好支持，也僅僅說明各個(gè)設(shè)計(jì)選擇的生動(dòng)表現(xiàn)。

精致的三維圖形是什么
通常以大型的，類似電影一樣的圖形和視頻呈現(xiàn)。有些是真實(shí)的3D渲染效果，有些是在你滾動(dòng)時(shí)交互播放的視頻。它們的共同點(diǎn)在于用來吸引你注意的精致的網(wǎng)絡(luò)媒體。


被用于動(dòng)畫中3D模型，同時(shí)注意它的漸變從技術(shù)方面講，這更多的是一種持續(xù)的發(fā)展，而非一種趨勢(shì)。如今廉價(jià)的智能手機(jī)能再現(xiàn)高清視頻和3D渲染效果，而且隨著網(wǎng)絡(luò)發(fā)展越來越成熟，網(wǎng)頁設(shè)計(jì)師和開發(fā)人員可以利用這樣的技術(shù)，而不必?fù)?dān)心回放失敗且還得圍繞它建立備援。

可在手機(jī)上玩的互動(dòng)3d游戲作品集對(duì)于高質(zhì)量視頻格式（如 AV6, H.265 and WebM）的技術(shù)支持正在增加，這體現(xiàn)了對(duì)網(wǎng)頁上更大、更好的圖形元素的需求。隨著網(wǎng)頁的總體發(fā)展和像three.js這樣的3D渲染引擎的流行，這種趨勢(shì)可能會(huì)持續(xù)發(fā)展。
橫向滾動(dòng)是什么
水平滾動(dòng)是指讓本會(huì)滾動(dòng)到下一行的元素進(jìn)行橫向滾動(dòng)。特別是在水平空間有限的移動(dòng)端上，我們看到越來越多的網(wǎng)頁設(shè)計(jì)使用了不換行的列表，這些列表必須通過水平滾動(dòng)才能獲取更多內(nèi)容。

兩個(gè)水平滾動(dòng)實(shí)例為什么
這不是因?yàn)槭裁疵鞔_的技術(shù)進(jìn)步，這個(gè)轉(zhuǎn)變似乎源自對(duì)使小屏承載更多內(nèi)容的需求。橫向滾動(dòng)可以讓人更輕松地獲取內(nèi)容，不必反復(fù)無常地向下滾動(dòng)就能夠到達(dá)下一部分。這可以被視為用戶體驗(yàn)在網(wǎng)頁上的一個(gè)轉(zhuǎn)變，尤其是像這樣的手勢(shì)，對(duì)本地應(yīng)用來說已經(jīng)很常見了。

打破常規(guī)的版面是什么
一種通常在網(wǎng)格元素上呈變換，旋轉(zhuǎn)，重疊和小偏差的網(wǎng)格式布局。目前網(wǎng)格式布局是來自被所有瀏覽器基本支持的網(wǎng)格（Grid）和彈性盒子（flexble box）技術(shù)。設(shè)計(jì)師已經(jīng)在通過放置不對(duì)稱的元素和把各部分重疊一起，去嘗試突破顯而易見的網(wǎng)格模式。直到不久前，才有在可靠的生產(chǎn)應(yīng)用中所需的技術(shù)。實(shí)際上，這兩種尚處在積極開發(fā)中的布局方法仍有各自的特性，例如子網(wǎng)格（subgrids），靈活變化的間隙（flex-gap）和空間的平均分配（space-evenly）。我們可以期待未來網(wǎng)頁設(shè)計(jì)師和開發(fā)者能探索出更多具有實(shí)驗(yàn)性變化的用例，因?yàn)檫@必定是網(wǎng)頁近期的一個(gè)發(fā)展。
微交互是什么
是一種在互動(dòng)時(shí)出現(xiàn)的小動(dòng)畫和細(xì)微的反饋模式。在默認(rèn)情況下，本身已經(jīng)存在很多微交互。不過，像是一個(gè)提交按鈕在被點(diǎn)擊后變成進(jìn)度條以顯示進(jìn)度，下拉刷新的交互，或者為某個(gè)普通的帖子點(diǎn)贊并出現(xiàn)一個(gè)恰當(dāng)?shù)膭?dòng)畫，這些微交互都比尋常的顏色變化考慮得更加全面。網(wǎng)絡(luò)應(yīng)用，基于組件的開發(fā)(針對(duì)可重復(fù)使用的元素)和在網(wǎng)頁上采用原生手勢(shì)的情況正在穩(wěn)步增加。有足夠多的的公司依賴與用戶建立情感聯(lián)系，而這正是通過網(wǎng)站上的媒體與交互來建立的。成熟的開發(fā)框架和開發(fā)實(shí)踐會(huì)考慮通過微交互讓更多的注意力投入到那些更精妙的細(xì)節(jié)去。
滾動(dòng)捕捉是什么
滾動(dòng)捕捉允許在用戶在滾動(dòng)瀏覽內(nèi)容后，自動(dòng)將滾動(dòng)條位置平穩(wěn)地固定在某些元素上。這為用戶提供了清晰的焦點(diǎn)，而且沒有被截?cái)嗟膬?nèi)容。這是因?yàn)樵谖覀儩L動(dòng)時(shí)，尤其是橫向滾動(dòng)，需要重新調(diào)整滾動(dòng)位置讓內(nèi)容適應(yīng)屏幕。直到最近，這個(gè)操作通過Javascript才可以被手動(dòng)實(shí)現(xiàn)。對(duì)移動(dòng)端來說，為了在作為容器的組件與圖像間循環(huán)瀏覽，更輕易地實(shí)現(xiàn)側(cè)邊滑動(dòng)尤其具有必要性和可能性，所以它成為了一項(xiàng)用于展示內(nèi)容的流行技術(shù)。
CSS現(xiàn)在支持通過滾動(dòng)快照（scroll-snap）的幾行代碼實(shí)現(xiàn)自動(dòng)滾動(dòng)捕捉，鑒于對(duì)這方面的需求量很大，我們會(huì)看見越來越多的人使用它。它的規(guī)范自開發(fā)初始時(shí)已發(fā)生了變化，不過，即使是在IE和Edge瀏覽器上它也得到了部分支持。