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

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

過(guò)去幾年給我們帶來(lái)了一些技術(shù)變化和進(jìn)步，包括：

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

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

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

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

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

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

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

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

使菜單成為框架

根本不使用菜單

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

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

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

彈出菜單

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

或?qū)⑵鋸棾?

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

2.分屏
—

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

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

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

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

4.自定義滾動(dòng)
-

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

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

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

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

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

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

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

6.微妙的動(dòng)畫(huà)和微交互
-

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

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

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

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

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

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

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

8.電影體驗(yàn)
-

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

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

9.游戲化
-

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

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

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