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

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


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

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

兩個水平滾動實例為什么
這不是因為什么明確的技術進步，這個轉變似乎源自對使小屏承載更多內容的需求。橫向滾動可以讓人更輕松地獲取內容，不必反復無常地向下滾動就能夠到達下一部分。這可以被視為用戶體驗在網頁上的一個轉變，尤其是像這樣的手勢，對本地應用來說已經很常見了。

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