2020流行的網頁設計中視覺設計手法和趨勢

來源:中國設計在線    時間:2020-02-28    站內收藏

設計一直隨著潮流快速地進化著,我們每隔一段時間就會看到一些和以往有所不同的設計趨勢。這些正在流行的設計方法、視覺趨勢,讓一些優秀的產品和設計讓人注意到,被人喜愛,甚至帶來商業價值,這也是為什么身為設計師,需要在設計的時候,善用這些趨勢,讓這些流行的設計手法,發揮更大的能量。

時間推進到 2020 年,我們注意到很多正在流行的設計手法——更夸張的漸變,打破邏輯和常規的排版,以及依然在流行的簡約設計,對于這些你并不陌生。但是另一方面,你可能還不夠熟練的深色模式、聲音交互、3D元素正在越來越多地主宰當下的視覺設計。

如果你希望你的設計更加貼近當下,更突出,更有價值,不妨看看這份梳理出來的趨勢表單。

1、一直流行的「極簡風」+「大留白」


極簡主義設計從來都是設計中的重難點,這是毋庸置疑的。極簡主義的設計一直在流行,從來沒過時。但是,每個時代的極簡風雖然大的范疇一致,但是細節上則各不相同,有所區別。2020 年所流行的極簡風,留白更多,更加講究通透性。這種趨向很難說是不是受到了如今過載信息的影響——用盡可能少的信噪來區別于其他的設計。

在下面的兩個案例當中,Whiteboard 這個網站采用了更加經典簡約的設計,居中的非襯線字體,背景使用了微妙的淺灰。

Soldo 的設計相對會更加豐富一點,但是背景的圖片也采用了近乎純白的背景墻,借用不對稱的布局來吸引用戶。

Whiteboard

Soldo


2、瘋狂流行的「深色模式」


2019年,iOS 全面擁抱深色模式,讓這種視覺設計手法開始快速地擴散,流行。深色模式具備功能性——讓信息更加聚焦,但是隨著它流行開來,深色模式開始成為i一種用戶需求——用戶想要它,而當設計師開始大規模設計這樣的作品,應用到產品當中,它自然而然就成為了一種流行的視覺美學。

深色模式深沉而令人著迷,一方面是因為其中強烈的色彩和信息對比,另一方面是因為它不同于常規設計的獨特性。

在下面的案例當中,CanneSeries 使用了霓虹強調色和加粗的字體,搭配動畫,讓頁面顯得足夠抓人眼球。

和前者不同,Davenport 是優雅深色模式的典范。白色的襯線字體,優雅的金色,細膩的視覺元素,沉浸而高級。

CanneSeries

Davenport


3、打破規則的字體和排版


去年開始,熱衷于字體排版的設計師們開始頻繁地在設計的時候,打破各種排版設計的規則。這種趨勢在 2020 年大概要更加徹底吧?

但是想要玩好,并不容易。關鍵在于,你既要打破規則——比如間距和對齊,但是又要讓用戶能夠Get 到信息,在「感到新奇」和「令人難受」之間,拿捏好尺度。當然,很多設計是偏向藝術,而不追求信息的準確性的。所以,你需要明確你的目的是什么,再選擇要不要采用這一技法。

J Powers Events 以不損害可讀性的方式,設計了跨區域的文字排版,有趣的是,當你滾動頁面的時候,字體會隨著疊加區域的變化而產生變化。

Makers & Dreamers 這個頁面當中,采用的是反轉字體,混搭襯線體和非襯線體字體,在簡約的布局下,營造出高端而藝術的感覺。

J Powers Events

Makers & Dreamers


4、提升格調的藝術插畫


插畫在流行,而充滿藝術感的線性插畫則是其中的排頭兵。這種插畫網頁和UI 的視覺格調明顯拉升了起來,也許看起來略有一點古怪——問題是在于,你不就是要吸引用戶的目光么?

Absurd Design 恐怕不是第一次在這里推薦了,著說一個關于藝術插畫的小圖庫,極富想象力和視覺張力,強烈推薦。

Heschung 將插畫和動畫結合到一起,異想天開,天馬行空。

Absurd Design

Heschung


5、手繪插畫和真實素材的結合


設計的時候,最常碰到的一個問題,就是用圖片素材還是用插畫素材。其實還有一個選項:混合一下。將精致的圖片和有趣的插畫混搭到一起,同樣非常贊!這同樣是打破常規,同樣能夠制造視覺奇觀。

Constance Burke 這個網站,讓真實的人穿上了手繪的服裝,非常有一套!

Bubka 則更加大膽,當你滾動頁面的時候,抽象的插畫和真實的圖片之間來回穿插,相當富有想象力!

Constance Burke

Bubka

6、有機的流體動畫效果


你可能注意到了,越來越多的網站和平臺開始有意識地使用各種各樣的動畫,以及不那么死板的元素,比如不規則的流體。這些像水一樣的多變元素,讓網站和APP 顯得更加富有生機。

流體動畫效果可以創造更好的過渡效果,吸引用戶注意力。這種動效的關鍵在于控制流體的運動速度,平滑流暢感是設計的核心。

Toonami 在光標懸停狀態下使用了流體動畫效果,而視頻和文本也同樣采用了類似的流體效果。

Ilya Kulbachny 在標題中使用了液體動態效果,這些文本隨著頁面滾動而變化,這種用法可能會越來越流行。

Toonami

Ilya Kulbachny


7、各種3D元素


增加網站和 UI 中的視覺張力、景深層次,3D 元素是一個很好的選擇,而且一切皆可3D!2020 年,效果更加強大細膩的 3D 視覺設計,會讓優秀的設計更加強大突出。

就像下面的 Metaconf Meetup 和 Toke 網站,都是借用 3D 設計來提升整體的視覺張力。

Metaconf Meetup

Toke


8、錯落有致的圖層疊加穿插


你在設計的時候,習慣讓讓所有的元素在頁面上平鋪開嘛?如果讓不同的層,錯落有致地鋪開,將會帶來更加多樣和富有層次感的設計!

你可以讓文本框和圖片、視頻都穿插重疊起來,甚至結合動效,在交互的過程中穿插移動!

Craft Kitchen 的首頁中,圖片和圖片,文本和圖片之間都有所重疊,但是整體上,又處于一個相對穩定的框架中,顯得穩重中又有所錯落。

Curt Thompson MD 的網站中則使用了圓角矩形的卡片來承載圖片,這些圖片會和其他的元素進行穿插,產生景深。這個網站通過卡片來建立一個重疊穿插的規則,值得學習哦~

Craft Kitchen

Curt Thompson MD

9、大幅度漸變


在扁平化設計瘋狂流行的前幾年,大家都竭盡全力去規避漸變,而如今漸變不僅卷土重來,而且不得不說,越來越放飛了。

剛剛回歸的漸變更加微妙,而現在的漸變的色彩跨度已經越來越大了,而且它開始無處不在了。多種色彩的漸變組合是一個大趨勢。

比如 Bariskuran 就使用大膽的漸變來呈現設計作品集,而 Arjay Studio 則在小小的氣泡元素中使用了非常出彩的大幅漸變效果。

Bariskuran

Arjay Studio


10、超級簡約的導航


2020 年還有一個重要的趨勢,就是終結復雜的大型導航,轉而流行簡約的簡化導航。

雖然這種處理手法乍看起來是非常冒險,但是從目前的狀況來看,較少的導航元素會更符合當下用戶的需求,也可以讓網站、APP 本身的信息主干更加清晰,適合信息傳達,給內容騰出更大的空間。

Bikebear 就使用了簡化導航,網站的視覺顯得非常的富有特色,甚至有點搞笑;Uniel 則將導航藏到了漢堡圖標當中,不論你在桌面端訪問,還是在移動端上訪問,更多內容都在彈出菜單中顯示。

Bikebear

Uniel

結語


設計趨勢,流行技法,它們是日常設計中的一個重要的參考和學習對象。它們最大的特點,就是「貼合當下」,因為大家喜歡,符合此刻的語境和需求,而在自己的設計的時候,用好這些流行的技法或者趨勢,能夠讓此刻的設計,更加出效果。當然,這些流行趨勢并非獨立存在,相互之間還可互相組合,這可以產生更加有趣的效果,不是嘛?                                      





本文來源:中國設計在線

上一篇:返回列表
作者:cdo
相關閱讀
    正在加載...
3d试机号开机号列 内蒙古11选5走势 宁夏11选五投注平台 连码三全中怎么玩 加拿大快乐8开奖结果 在线配资加推荐卓信宝配资 河北体彩11选五手机版 青海省十一选五最新开奖 我要炒股app 湖北11选五中奖规则 广西快乐双彩2020047期开奖结果