2020年9大前沿網(wǎng)頁設(shè)計發(fā)展趨勢

Web設(shè)計生活在形式和功能的交匯處。因此，有意義的是，網(wǎng)頁設(shè)計趨勢受技術(shù)的影響很大，無論是我們使用的設(shè)備類型，它們的處理能力，我們的瀏覽器的復(fù)雜程度還是可供我們使用的程序庫。但是它們也受到設(shè)計原則和理念的影響。
>> 在這里查看我們最新的大連網(wǎng)頁設(shè)計趨勢綜述

過去幾年給我們帶來了一些技術(shù)變化和進步，包括：

• 移動設(shè)備日益普及；
• 引入本機瀏覽器內(nèi)3D支持（通過WebGL）；
• HTML5，CSS3的采用以及前端javascript框架的興起；
• 并增加了網(wǎng)絡(luò)帶寬（在移動和家庭互聯(lián)網(wǎng)上）。

這些技術(shù)相結(jié)合，在Web設(shè)計范式中產(chǎn)生了巨大的變化，最顯著的是，創(chuàng)建了響應(yīng)式（或日益以移動為先）的設(shè)計理念。

在美學(xué)方面，三年前的平面設(shè)計占據(jù)了上風(fēng)。然后Google引入了Material design，這使我們稍微脫離了抽象。2020年標(biāo)志著設(shè)計又邁入了現(xiàn)實。無論是通過形式，顏色選擇還是功能，2020年都是混合的一年，現(xiàn)實與技術(shù)相融合，創(chuàng)造了無縫的瀏覽體驗。

以下是我們認為將彌合這一差距的9種Web設(shè)計趨勢：

1.違反導(dǎo)航范式的菜單
-

自從網(wǎng)頁設(shè)計進入黑暗時代以來（即20年前），出現(xiàn)了兩種標(biāo)準(zhǔn)的導(dǎo)航類型：頂部和側(cè)邊欄。隨著響應(yīng)式網(wǎng)頁設(shè)計的興起，我們已經(jīng)看到在此簡短列表中增加了漢堡菜單。漢堡包是適用于移動設(shè)備的可行解決方案，但并不完美。被  指控：

• 妨礙用戶參與；
• 發(fā)現(xiàn)性低；
• 效率較低（對于用戶和設(shè)計/開發(fā)團隊而言）；
• 甚至“ 沒有氣味”。

伴隨著這些混雜，矛盾的感覺，以及移動瀏覽的持續(xù)興起，我們希望在2020年能看到很多菜單試驗。以下是幾種逆轉(zhuǎn)漢堡趨勢的方法：

使菜單成為框架

根本不使用菜單

不再需要告知用戶在網(wǎng)站上該怎么做；他們了解滾動的動作，并且自然會這樣做，直到找到所需的內(nèi)容為止。一些設(shè)計師選擇幾乎完全放棄菜單，并允許用戶在瀏覽時有機地找到內(nèi)容。隨著手機和平板電腦變得越來越流行，這也為側(cè)面滾動打開了機會。

擁抱漢堡，使其成為導(dǎo)航的唯一方法

許多網(wǎng)站沒有設(shè)計兩個不同的菜單，一個用于桌面，另一個用于移動瀏覽，而是選擇使?jié)h堡包無處不在。由于人們正在學(xué)習(xí)這三行=菜單，因此不再需要使用實際的導(dǎo)航欄來占用屏幕空間。當(dāng)然，你不  具備使用實際的漢堡包圖標(biāo)。我們還看到設(shè)計師開始嘗試排版，以指示用戶應(yīng)單擊何處才能訪問菜單。

彈出菜單

我們對“下拉”范式視而不見，以至于我們無法探索一個簡單的選擇：彈出的導(dǎo)航！（或者，在本示例中，該事件會彈出到屏幕的中間。）有很多地方可以放置菜單，使菜單可見和可訪問，而不必自上而下。

或?qū)⑵鋸棾?

彈出窗口導(dǎo)航的一種變體是“彈出窗口”，它用導(dǎo)航覆蓋了整個頁面。它大膽，但仍然感覺自然。這是對印刷出版物中目錄部分的回調(diào)。

2.分屏
—

屏幕在垂直方向上分為兩個相等的部分，并具有清晰的視覺分離，這是我們希望在2017年看到的更多內(nèi)容。這是一種視覺上引人注目的趨勢，它調(diào)用一本打開的書并給網(wǎng)站帶來自然的感覺。趨勢也相當(dāng)多變。在較小的顯示器/設(shè)備上，這兩個部分可以堆疊為連續(xù)的塊，也可以變成側(cè)面板導(dǎo)航。

3.具有復(fù)古品質(zhì)的色彩
—

在過去的幾年中，網(wǎng)絡(luò)一直以灰色為主：淺灰色的背景而不是白色；灰色的文本而不是黑色；以及微妙的灰色陰影在材質(zhì)設(shè)計中創(chuàng)造了深度。在2017年，我們終于看到了色彩的回歸！帶著復(fù)仇的氣息，帶著明亮的復(fù)古色調(diào)回來了。

為網(wǎng)站選擇顏色很復(fù)雜，并且可能受許多因素影響，包括現(xiàn)有的公司標(biāo)識，行業(yè)，顏色心理和個人品味。無論您是決定喜歡藍色，還是更喜歡橙色，都可以想象通過Instagram濾鏡選擇的顏色運行以營造溫暖，懷舊的感覺。

4.自定義滾動
-

我們看到，網(wǎng)站逐漸擺脫了傳統(tǒng)的瀏覽器滾動條，而是為其內(nèi)容創(chuàng)建了自定義頁面體驗的趨勢很明顯。一些網(wǎng)站使用“虛擬滾動”，它仍然允許用戶滾動，但是在應(yīng)用程序內(nèi)進行滾動而不是賦予瀏覽器控制權(quán)。這樣就可以進行各種類型的滾動，例如“阿姆斯特丹建筑”網(wǎng)站，它是圍繞水平滾動而設(shè)計的，但是可以用標(biāo)準(zhǔn)鼠標(biāo)來控制。上下滾動可左右移動內(nèi)容，將移動或平板電腦體驗帶到桌面上。

其他網(wǎng)站也采用了滾動方式，以支持單擊拖動并探索的導(dǎo)航樣式。Grim London和紐約的Magic都為用戶提供了地圖，并允許他們物理上拖動圖像以查找所需內(nèi)容，表面上將滾動內(nèi)容放在用戶手中。用戶不再依賴傳統(tǒng)的導(dǎo)航，而是單擊分散在地圖上的圖像以了解更多信息。

幾乎所有這些站點都使用某種WebGL應(yīng)用程序來創(chuàng)建和顯示其內(nèi)容。Grim London是一項特別富有創(chuàng)造力的技術(shù)實現(xiàn)：在PixiJS之上構(gòu)建的自定義地圖引擎（JavaScript 2D WebGL引擎）。

5.將觸覺與數(shù)字相融合
-

三年前，平面設(shè)計被材料設(shè)計所取代，該設(shè)計為仍然平坦的圖像添加了陰影和漸變，給人一種在平面屏幕上具有3D空間的幻覺。今年，我們將再回到現(xiàn)實主義。話雖這么說，我們也不是要回到擬態(tài)（模仿數(shù)字空間中的物理世界）。2017年將物理，有形，觸覺世界與數(shù)字世界無縫融合在一起。

與其將攝影元素裝箱成不同的矩形（表面上是從屏幕到“真實”世界的窗口），不如從對象的設(shè)置中切出對象，然后將它們放入純?nèi)坏臄?shù)字景觀中。它們被允許保留其光影，因此也保留其3D本質(zhì)，但它們也不再必須遵守現(xiàn)實規(guī)則。對象的大小不必現(xiàn)實地確定（一本書可以和卡車一樣大），并且可以與數(shù)字元素進行交互。看一下Beoplay網(wǎng)站：它使耳機的使用壽命超過了其使用壽命，然后允許它們與可視化聲音的動畫數(shù)字線進行交互。

將物理對象集成到數(shù)字空間中會模糊屏幕和世界之間的界線。反過來，這與我們設(shè)備上的圖像建立了情感上的聯(lián)系。

6.微妙的動畫和微交互
-

運動吸引了我們的注意力-這是人類進化的結(jié)果。特別是突然的大動作會警告我們危險。另一方面，小的，流暢的運動意味著生命。當(dāng)您希望將運動融入網(wǎng)頁設(shè)計時，請將這些知識放在腦后。巨大的事物和您的面孔可能會令觀眾不知所措。但是有些微妙的東西可以使您的設(shè)計具有有機的感覺。

多年來，我們一直在觀看動畫來“獎勵”用戶某項操作。例如，某些東西會在懸停或點擊互動時移動。但是，最近，我們看到微妙的動畫已集成到頁面中作為設(shè)計元素，用于引起觀眾的注意。特別是，我們一直在唱很多  路標(biāo)，這些路標(biāo)允許事件在用戶向下滾動頁面時觸發(fā)，這意味著我們可以使人們準(zhǔn)確地看到我們想要它們的位置。

無論是通過javascript還是CSS實施，微交互不僅可以達到UX的目的，而且可以賦予網(wǎng)站個性。

7.放棄縱橫比而轉(zhuǎn)向藝術(shù)指導(dǎo)
-

短而寬的東西在Retina電影院的顯示器上看起來很棒，但在立式手機上完全不合適。組成是設(shè)計的基本要素之一。那么，如何處理響應(yīng)式的Universe，在其中內(nèi)容以無限的縱橫比組合顯示在屏幕和瀏覽器上？你要收割。但是您如何以保持設(shè)計完整性的方式這樣做。輸入：數(shù)字藝術(shù)指導(dǎo)。

最近，我們看到了許多工具的出現(xiàn)，這些工具使我們能夠自覺和智能地控制合成，同時摒棄傳統(tǒng)的自動裁剪功能。這導(dǎo)致思想的轉(zhuǎn)變；與其將內(nèi)容視為靜態(tài)圖像，不如將其視為主題。您要用圖片講的故事是什么？強調(diào)這一點，然后允許用戶控制顯示。

一些網(wǎng)站選擇完全忽略寬高比，并向觀看者賦予了合成的力量。國家公園的隱藏世界使用全背景視頻（這也是網(wǎng)站的主要內(nèi)容），無論您采用何種形狀，該視頻都會延伸到瀏覽器的邊緣。

8.電影體驗
-

大型電影視頻背景在2015年開始流行。但是，隨著技術(shù)的進步，它們變得越來越受歡迎，從而可以更快地加載視頻。WebGL的進步也使這些背景可以交互，從而在網(wǎng)絡(luò)上創(chuàng)建沉浸式的電影體驗。

另一方面，電影院的體驗已被縮小，小型視頻元素被用于賦予頁面生命，以更微妙的方式吸引觀眾。

9.游戲化
-

游戲化是“將游戲設(shè)計元素和游戲原理應(yīng)用于非游戲環(huán)境”的目的，旨在提高用戶參與度。換句話說：您想讓人們記住您的網(wǎng)站嗎？如何深入研究呢？讓它變得有趣！

游戲化的一個很好的例子是電影《瑞士軍人》的WebGL網(wǎng)站  。此頁面上的3D元素不僅是一些隨機的炫酷效果。您可以隨意使用操縱的角色，以穿越考慮重力和物理（包括流體力學(xué)）的設(shè)計空間。（如果您對此感興趣，也可以讓他做其他更基于放屁的事情。）

其他網(wǎng)站正在使用游戲化來向用戶教授新語言，或在太空歷史中對其進行教育。