2020年9大前沿網(wǎng)頁設(shè)計發(fā)展趨勢
2020-06-13 1521
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)站正在使用游戲化來向用戶教授新語言,或在太空歷史中對其進行教育。