發(fā)布時(shí)間:2024-04-11 18:00:02 瀏覽量:206次
設(shè)計(jì)一直隨著潮流快速地在進(jìn)化著,日新月異,與時(shí)俱進(jìn),而我們每隔一段時(shí)間就會(huì)看到一些和以往有所不同的設(shè)計(jì)趨勢(shì),都要去學(xué)習(xí)。
這些正在流行的設(shè)計(jì)方法、視覺趨勢(shì),讓一些優(yōu)秀的產(chǎn)品和設(shè)計(jì)讓人注意到,被人喜愛,甚至帶來商業(yè)價(jià)值,這也是為什么身為設(shè)計(jì)師,需要在設(shè)計(jì)的時(shí)候,善用這些趨勢(shì),讓這些流行的設(shè)計(jì)手法,發(fā)揮更大的能量。時(shí)間推進(jìn)到 2020 年,我們注意到很多正在流行的設(shè)計(jì)手法——更夸張的漸變,打破邏輯和常規(guī)的排版,以及依然在流行的簡(jiǎn)約設(shè)計(jì),對(duì)于這些你并不陌生。但是另一方面,你可能還不夠熟練的深色模式、聲音交互、3D元素正在越來越多地主宰當(dāng)下的視覺設(shè)計(jì)。
如果你希望你的設(shè)計(jì)更加貼近當(dāng)下,更突出,更有價(jià)值,不妨看看這份梳理出來的趨勢(shì)表單。
極簡(jiǎn)主義設(shè)計(jì)從來都是設(shè)計(jì)中的重難點(diǎn),這是毋庸置疑的。極簡(jiǎn)主義的設(shè)計(jì)一直在流行,從來沒過時(shí)。但是,每個(gè)時(shí)代的極簡(jiǎn)風(fēng)雖然大的范疇一致,但是細(xì)節(jié)上則各不相同,有所區(qū)別。2020 年所流行的極簡(jiǎn)風(fēng),留白更多,更加講究通透性。這種趨向很難說是不是受到了如今過載信息的影響——用盡可能少的信噪來區(qū)別于其他的設(shè)計(jì)。在下面的兩個(gè)案例當(dāng)中,Whiteboard 這個(gè)網(wǎng)站采用了更加經(jīng)典簡(jiǎn)約的設(shè)計(jì),居中的非襯線字體,背景使用了微妙的淺灰。Soldo 的設(shè)計(jì)相對(duì)會(huì)更加豐富一點(diǎn),但是背景的圖片也采用了近乎純白的背景墻,借用不對(duì)稱的布局來吸引用戶。
Whiteboard
Soldo
2019年,iOS 全面擁抱深色模式,讓這種視覺設(shè)計(jì)手法開始快速地?cái)U(kuò)散,流行。深色模式具備功能性——讓信息更加聚焦。但是隨著它流行開來,深色模式開始成為i一種用戶需求——用戶想要它,而當(dāng)設(shè)計(jì)師開始大規(guī)模設(shè)計(jì)這樣的作品,應(yīng)用到產(chǎn)品當(dāng)中,它自然而然就成為了一種流行的視覺美學(xué)。深色模式深沉而令人著迷,一方面是因?yàn)槠渲袕?qiáng)烈的色彩和信息對(duì)比,另一方面是因?yàn)樗煌诔R?guī)設(shè)計(jì)的獨(dú)特性。在下面的案例當(dāng)中,CanneSeries 使用了霓虹強(qiáng)調(diào)色和加粗的字體,搭配動(dòng)畫,讓頁(yè)面顯得足夠抓人眼球。和前者不同,Davenport 是優(yōu)雅深色模式的典范。白色的襯線字體,優(yōu)雅的金色,細(xì)膩的視覺元素,沉浸而高級(jí)。
CanneSeries
Davenport
去年開始,熱衷于字體排版的設(shè)計(jì)師們開始頻繁地在設(shè)計(jì)的時(shí)候,打破各種排版設(shè)計(jì)的規(guī)則。這種趨勢(shì)在 2020 年大概要更加徹底吧?但是想要玩好,并不容易。關(guān)鍵在于,你既要打破規(guī)則——比如間距和對(duì)齊,但是又要讓用戶能夠Get 到信息。在「感到新奇」和「令人難受」之間,拿捏好尺度。當(dāng)然,很多設(shè)計(jì)是偏向藝術(shù),而不追求信息的準(zhǔn)確性的。所以,你需要明確你的目的是什么,再選擇要不要采用這一技法。J Powers Events 以不損害可讀性的方式,設(shè)計(jì)了跨區(qū)域的文字排版,有趣的是,當(dāng)你滾動(dòng)頁(yè)面的時(shí)候,字體會(huì)隨著疊加區(qū)域的變化而產(chǎn)生變化。Makers & Dreamers 這個(gè)頁(yè)面當(dāng)中,采用的是反轉(zhuǎn)字體,混搭襯線體和非襯線體字體,在簡(jiǎn)約的布局下,營(yíng)造出高端而藝術(shù)的感覺。
J Powers Events
Makers & Dreamers
插畫在流行,而充滿藝術(shù)感的線性插畫則是其中的排頭兵。這種插畫網(wǎng)頁(yè)和UI 的視覺格調(diào)明顯拉升了起來,也許看起來略有一點(diǎn)古怪——問題是在于,你不就是要吸引用戶的目光么?Absurd Design 恐怕不是第一次在這里推薦了,這說一個(gè)關(guān)于藝術(shù)插畫的小圖庫(kù),極富想象力和視覺張力,強(qiáng)烈推薦。Heschung 將插畫和動(dòng)畫結(jié)合到一起,異想天開,天馬行空。
Absurd Design
Heschung
設(shè)計(jì)的時(shí)候,最常碰到的一個(gè)問題,就是用圖片素材還是用插畫素材。其實(shí)還有一個(gè)選項(xiàng):混合一下。將精致的圖片和有趣的插畫混搭到一起,同樣非常贊!這同樣是打破常規(guī),同樣能夠制造視覺奇觀。Constance Burke 這個(gè)網(wǎng)站,讓真實(shí)的人穿上了手繪的服裝,非常有一套!Bubka 則更加大膽,當(dāng)你滾動(dòng)頁(yè)面的時(shí)候,抽象的插畫和真實(shí)的圖片之間來回穿插,相當(dāng)富有想象力!
Constance Burke
Bubka
你可能注意到了,越來越多的網(wǎng)站和平臺(tái)開始有意識(shí)地使用各種各樣的動(dòng)畫,以及不那么死板的元素,比如不規(guī)則的流體。這些像水一樣的多變?cè)?,讓網(wǎng)站和APP 顯得更加富有生機(jī)。流體動(dòng)畫效果可以創(chuàng)造更好的過渡效果,吸引用戶注意力。這種動(dòng)效的關(guān)鍵在于控制流體的運(yùn)動(dòng)速度,平滑流暢感是設(shè)計(jì)的核心。Toonami 在光標(biāo)懸停狀態(tài)下使用了流體動(dòng)畫效果,而視頻和文本也同樣采用了類似的流體效果。Ilya Kulbachny 在標(biāo)題中使用了液體動(dòng)態(tài)效果,這些文本隨著頁(yè)面滾動(dòng)而變化,這種用法可能會(huì)越來越流行。
Toonami
Ilya Kulbachny
增加網(wǎng)站和 UI 中的視覺張力、景深層次,3D 元素是一個(gè)很好的選擇,而且一切皆可3D!2020 年,效果更加強(qiáng)大細(xì)膩的 3D 視覺設(shè)計(jì),會(huì)讓優(yōu)秀的設(shè)計(jì)更加強(qiáng)大突出。就像下面的 Metaconf Meetup 和 Toke 網(wǎng)站,都是借用 3D 設(shè)計(jì)來提升整體的視覺張力。
Metaconf Meetup
Toke
你在設(shè)計(jì)的時(shí)候,習(xí)慣讓讓所有的元素在頁(yè)面上平鋪開嘛?如果讓不同的層,錯(cuò)落有致地鋪開,將會(huì)帶來更加多樣和富有層次感的設(shè)計(jì)!你可以讓文本框和圖片、視頻都穿插重疊起來,甚至結(jié)合動(dòng)效,在交互的過程中穿插移動(dòng)!Craft Kitchen 的首頁(yè)中,圖片和圖片,文本和圖片之間都有所重疊,但是整體上,又處于一個(gè)相對(duì)穩(wěn)定的框架中,顯得穩(wěn)重中又有所錯(cuò)落。Curt Thompson MD 的網(wǎng)站中則使用了圓角矩形的卡片來承載圖片,這些圖片會(huì)和其他的元素進(jìn)行穿插,產(chǎn)生景深。這個(gè)網(wǎng)站通過卡片來建立一個(gè)重疊穿插的規(guī)則,值得學(xué)習(xí)哦~
Craft Kitchen
Curt Thompson MD
在扁平化設(shè)計(jì)瘋狂流行的前幾年,大家都竭盡全力去規(guī)避漸變,而如今漸變不僅卷土重來,而且不得不說,越來越放飛了。剛剛回歸的漸變更加微妙,而現(xiàn)在的漸變的色彩跨度已經(jīng)越來越大了,而且它開始無(wú)處不在了。多種色彩的漸變組合是一個(gè)大趨勢(shì)。比如 Bariskuran 就使用大膽的漸變來呈現(xiàn)設(shè)計(jì)作品集,而 Arjay Studio 則在小小的氣泡元素中使用了非常出彩的大幅漸變效果。
Bariskuran
Arjay Studio
2020 年還有一個(gè)重要的趨勢(shì),就是終結(jié)復(fù)雜的大型導(dǎo)航,轉(zhuǎn)而流行簡(jiǎn)約的簡(jiǎn)化導(dǎo)航。雖然這種處理手法乍看起來是非常冒險(xiǎn),但是從目前的狀況來看,較少的導(dǎo)航元素會(huì)更符合當(dāng)下用戶的需求,也可以讓網(wǎng)站、APP 本身的信息主干更加清晰,適合信息傳達(dá),給內(nèi)容騰出更大的空間。
Bikebear 就使用了簡(jiǎn)化導(dǎo)航,網(wǎng)站的視覺顯得非常的富有特色,甚至有點(diǎn)搞笑;Uniel 則將導(dǎo)航藏到了漢堡圖標(biāo)當(dāng)中,不論你在桌面端訪問,還是在移動(dòng)端上訪問,更多內(nèi)容都在彈出菜單中顯示。
Bikebear
Uniel
想要讓自己的設(shè)計(jì)水平更上一個(gè)階層,就得不斷學(xué)習(xí),設(shè)計(jì)趨勢(shì),流行技法,它們是日常設(shè)計(jì)中的一個(gè)重要的參考和學(xué)習(xí)對(duì)象。
它們最大的特點(diǎn),就是「貼合當(dāng)下」,因?yàn)榇蠹蚁矚g,符合此刻的語(yǔ)境和需求,而在自己的設(shè)計(jì)的時(shí)候,用好這些流行的技法或者趨勢(shì),能夠讓此刻的設(shè)計(jì),更加出效果。
熱門資訊
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎?這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范,包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
3. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、字體...
4. 移動(dòng)端UI設(shè)計(jì)中常見的5種APP界面類型,你get到了嗎?
通過介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁(yè)、引導(dǎo)頁(yè)、浮層引導(dǎo)頁(yè)、空白頁(yè)和首頁(yè)等5種APP界面類型,幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
5. 移動(dòng)端列表頁(yè)和表單頁(yè)設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁(yè)和表單頁(yè)是不可或缺的部分。一個(gè)好的列表頁(yè)和表單頁(yè)設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 推薦10本適合UI設(shè)計(jì)師看的書籍,輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
7. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
8. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長(zhǎng)與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
9. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡(jiǎn)潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
10. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
最新文章
同學(xué)您好!