騰訊頂尖設(shè)計(jì)團(tuán)隊(duì)總結(jié)的 2019 – 2020 設(shè)計(jì)趨勢:圖形篇

2019-4-29    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

為了和大家分享關(guān)于設(shè)計(jì)趨勢的見解,ISUX 研究了 2019 年至 2020 年的設(shè)計(jì)趨勢。沒有必要去遵循年度設(shè)計(jì)趨勢報(bào)告,但是否意識到這一趨勢,對設(shè)計(jì)師來講卻非常重要。首先,我們總結(jié)了平面設(shè)計(jì)的總體趨勢,同時(shí)也研究了從 Zepeto app 和 Memoji 開始的,最近擴(kuò)展出來的 IP 形象設(shè)計(jì)和角色設(shè)計(jì)趨勢。

在本文中,我們想分享 ISUX 設(shè)計(jì)趨勢報(bào)告的第一部分「圖形設(shè)計(jì)趨勢」。在這一部分里,我們展示了當(dāng)下各種品牌和動態(tài)圖形的案例,總結(jié)了 12 個(gè)值得注意的平面設(shè)計(jì)趨勢。

強(qiáng)大和可變的排版

排版一直是設(shè)計(jì)的重要元素,也是傳達(dá)品牌強(qiáng)烈信息的手段。從去年開始,粗大的無襯線字體和強(qiáng)有力的排版被應(yīng)用到許多品牌設(shè)計(jì)當(dāng)中,這使得它成為平面設(shè)計(jì)趨勢的一部分。此外,也有越來越多的品牌采用動態(tài)和反映了 3D 趨勢的三維字體版式設(shè)計(jì)。

1. 動力學(xué)排版海報(bào)

△ @Andrei Robu

這張動態(tài)排版海報(bào)不是簡單地放置圖形和文字,而是將移動的 3D 文字放在固定的圖形上,傳達(dá)新的視覺印象。這些圖形主要通過 SNS 以短循環(huán)視頻的形式共享。

2. Uber 品牌識別

△ @Wolffolins

Uber 開發(fā)了一種無襯線字體用于品牌 logo 的再設(shè)計(jì),并將其貫穿于整個(gè)品牌系統(tǒng)。采用了這些品牌字體的動態(tài)海報(bào),更為有力地傳達(dá)出 Uber 的品牌信息。

3. Squarespace 品牌識別

△ @Dia studio

Dia studio 常將動態(tài)文字應(yīng)?于品牌項(xiàng)?,「Squarespace」是其代表作品之一。

4. FAD 視覺圖形

△ @Practica Studio

以 3D 形態(tài)傳遞活動信息的版面設(shè)計(jì),就像禮品包裝一樣。這種循環(huán)的 GIF 圖也作為品牌主圖形被運(yùn)用。

5. 韓國女性耐克運(yùn)動廣告

△ @Wieden&Kennedy Tokyo

韓國藝人支持女性主觀活動的耐克運(yùn)動廣告,也采用了大膽的哥特式字體。這些由 Guteform 設(shè)計(jì)工作室設(shè)計(jì)的字體有基本的延展形式,同時(shí)有一個(gè)系統(tǒng)能延展成更為寬大的形式以適配媒體的比例。這種動態(tài)化的強(qiáng)烈的排版?zhèn)鬟f了活動信息,和其他設(shè)計(jì)元素的互動,最大限度地發(fā)揮了圖形效果。

鮮明的顏色和漸變

隨著 Instagram 用彩色漸變作為品牌色,漸變趨勢已經(jīng)持續(xù)好幾年。最近品牌,UI 和包裝的圖形設(shè)計(jì)都采用明亮而強(qiáng)烈的對比色,這種趨勢不僅應(yīng)用于設(shè)計(jì),也應(yīng)用于攝影。強(qiáng)烈的色彩組合,夢幻的色調(diào)和彩色漸變有望應(yīng)用于 2019 年的整體設(shè)計(jì)。

1. APP 圖標(biāo)設(shè)計(jì)

△ 越來越多的手機(jī) APP 圖標(biāo)使用漸變色

最近,許多移動應(yīng)用程序在其圖標(biāo)設(shè)計(jì)上應(yīng)用了彩色漸變。

2. 歐洲體育 – 2018 平昌冬奧會品牌識別

△ @DixonBaxi

歐洲體育臺 2018 年平昌冬奧會的轉(zhuǎn)播也將強(qiáng)對比和漸變色運(yùn)用于多數(shù)場景中,包括標(biāo)志、圖形和攝影。熒光圖形和深?背景的對比,尤為深刻地凸顯了冬季運(yùn)動的感覺。

3. 籃球永遠(yuǎn)品牌識別

△ @Notreal

NBA 新聞廣播公司品牌重塑項(xiàng)目所使用的,諸如彩色漸變和大膽排版的設(shè)計(jì)方法,也反映了的趨勢。他們創(chuàng)作了一個(gè)系統(tǒng),通過各種顏色,字體和布局的應(yīng)用,可以產(chǎn)生各種圖形輸出。

4. 明日之子品牌識別

△ @Plus X

騰訊視頻和哇唧唧哇聯(lián)合出品的選秀節(jié)目明日之子,用多種漸變色圓形表達(dá)不同選手的才華。隨著節(jié)目的進(jìn)行,圖形主題也會隨選手的變化而變化。

不對稱布局

與過去基于固定網(wǎng)格系統(tǒng)的布局相比,最近越來越趨于使用僅顯示圖像一部分的非對稱布局。雖然好像只顯示整個(gè)圖像的一部分,設(shè)計(jì)師卻可以在大系統(tǒng)中無限延展每個(gè)圖形。你可以認(rèn)為平衡被打破了,設(shè)計(jì)師卻可以更加自由地應(yīng)用圖形元素,呈現(xiàn)更強(qiáng)烈的視覺印象,還可以有很酷的圖形組成。

1. 平面海報(bào)設(shè)計(jì)

△ @Vasjen Katro

設(shè)計(jì)了各種各樣圖形的 Vasjen Katro,不斷嘗試的形狀,顏色和布局也反映了的趨勢,特別是不對稱和開放式布局。

2. Easy Peasy 品牌識別

△ @CFC

Easy Peasy 是韓國著名化妝品公司 Amore 推出的獨(dú)立化妝品品牌,以品牌關(guān)鍵詞輕松、活躍、有趣和大膽為基礎(chǔ),嘗試給用戶更加簡單和親切的感覺。品牌用看似自由的手繪波浪線貫穿于整個(gè)圖形設(shè)計(jì),打造不對稱之美,展現(xiàn)了自由和親近的形象。

不斷演化的識別度

移動圖標(biāo)已成為趨勢很多年了,現(xiàn)在應(yīng)用交互元素的品牌案例也很多。比起強(qiáng)而有力,靈活而簡單,能隨內(nèi)容做出響應(yīng)和更改的交互圖標(biāo)儼然已成為一種新的趨勢。

1. 國際光影藝術(shù)節(jié)品牌識別

△ @George&Harrison

這是交互圖標(biāo)的其中一個(gè)案例,用簡單的方形作為基礎(chǔ),延展出各種各樣的形狀和圖案。這些基本元素保持了簡單和最大化的交互式圖像效果。

2. SM 娛樂品牌識別

△ @CFC

韓國最大娛樂公司之?,SM 娛樂開發(fā)了一種新的品牌標(biāo)識來反映其不斷擴(kuò)展的業(yè)務(wù)。它將基本圓形改變成了不同形狀與小號和中號產(chǎn)生關(guān)聯(lián)。靈活的符號和各種顏色的圓形圖案是 SM 娛樂視覺識別的核心。

3. 第 59 屆塞薩洛尼基國際電影節(jié)品牌識別

△ @Beetroot Design

這是電影節(jié)一個(gè)有趣的識別案例,用卷軸纏繞的圖像代替尋常的電影節(jié)標(biāo)志。它不是固定的,而是復(fù)雜紊亂的,以復(fù)雜的方式排列各種不同的顏?和圖形,表達(dá)了電影節(jié)的目的──通過電影傳達(dá)多種多樣的故事和情感。

4. 第 6 屆廣州三年展品牌識別

△ @Another Design

傳遞展覽核心信息,反復(fù)復(fù)制到三維空間的基本矩形,顯示了展覽的特征。在整個(gè)展廳中,你可以看到它以多種變動的形態(tài)被應(yīng)用,同時(shí)也以不同的形狀被運(yùn)用到各式各樣的場景中。

3D 中的高端紋理

3D 趨勢如此流行,以至于在平面設(shè)計(jì)趨勢中也不得不討論它。當(dāng)下有很多的 3D 圖像嘗試用復(fù)雜的紋理給大眾展示生動逼真和新鮮感十足的印象。通過在三維幾何形態(tài)中,添加逼真的紋理,創(chuàng)造在現(xiàn)實(shí)中不可能存在的圖形,人們正在定義一種新的現(xiàn)實(shí)主義。

1. 3D 插畫

△ @George Stoyanov

George Stoyanov 通過組合各種幾何形態(tài)來表達(dá)形狀之美。這種視覺嘗試很有意思,因?yàn)樗茈y在現(xiàn)實(shí)中制作。

2. Adobe Think Tank 視覺圖形

△ @Omar aqil design

這張圖像由不同形狀,紋理和顏色的幾何物體設(shè)計(jì)而成,表達(dá)了 Adobe Think Tank 包含各種主題論壇的品牌特征。

3. 現(xiàn)代「超級消費(fèi)者」品牌視頻

△ @Universal everything

將各種各樣的材料和顏色運(yùn)用到人類行走的形狀當(dāng)中,傳遞出一種非現(xiàn)實(shí)和新鮮感十足的視覺印象。

4. 耐克PG3「舒適體驗(yàn)」廣告

△ @GRIF

用柔軟的毛皮材料營造耐克的主要感覺──舒適感,非現(xiàn)實(shí)的圖形里有著生動的質(zhì)感,讓人耳目一新。

流體和液體形狀

使用有機(jī)圖形并不是一種新的潮流,但我們發(fā)現(xiàn)今年也有大量的圖形使用水和油等液體來表達(dá)效果。它有時(shí)被用作品牌的主圖形,你可以在 3D 短動態(tài)圖形中明顯地感受到這種傾向。這種具有強(qiáng)烈色彩和漸變的有機(jī)形狀,傳達(dá)出一種精致而夢幻的感覺。

1. 有機(jī)形態(tài)的 3D 視頻

△ @cmttat

有機(jī)形態(tài)通常以 3D 形式被應(yīng)用,并且廣泛應(yīng)用于 SNS 共享的短視頻作品中。今年尤其有很多透明質(zhì)感的案例,這些透明材質(zhì)運(yùn)用各種顏色,使色彩搭配產(chǎn)生變化,營造出神秘的氣氛。

2. 孔雀學(xué)會 2018 品牌識別

△ @Irradie

將明亮多彩的漸變色應(yīng)用于有機(jī)形態(tài),這些圖像表達(dá)了巴黎電子音樂節(jié)的特征。

定制插畫和角色設(shè)計(jì)

各式各樣的平面插畫曾經(jīng)退出過潮流,但現(xiàn)在已經(jīng)成為一種強(qiáng)烈的設(shè)計(jì)趨勢。很多品牌都通過聘請知名插畫家的方式,用平面插畫給大眾新的印象。去年以來,除了 2D,3D 角色插畫也成為一種趨勢被應(yīng)用到越來越多的品牌設(shè)計(jì)當(dāng)中。

1. Uber 品牌插畫

△ @Leo Natsume

運(yùn)用于尤伯杯品牌新形象的插畫,是其簡潔有序品牌系統(tǒng)中有趣的一部分。

2. Spotify「音樂與你同在」插畫

△ @Circus

這是 Spotify 運(yùn)用了 2D 插畫的品牌視頻。手繪質(zhì)感,色彩簡單,人形的四肢都很大是最近的插畫趨勢。

3. Belif 品牌插圖

△ @Superfiction

這是基于三維角色的 2D 圖案設(shè)計(jì)示例,運(yùn)用于包裝設(shè)計(jì)和品牌視頻。

等距

等距設(shè)計(jì)是一種將二維圖形繪制成三維的方法,最近已成為一種趨勢,在圖形和動畫視頻中被廣泛應(yīng)用。許多設(shè)計(jì)師通過運(yùn)用這種技術(shù),在一個(gè)框架中顯示整個(gè)圖形,創(chuàng)造有趣和獨(dú)特的氛圍,呈現(xiàn)出一種全新的視覺印象。和去年一樣,等距設(shè)計(jì)在今年似乎也會越來越流行。

1. 等距插畫

△ @Mohamed Samir

經(jīng)常使用等距技術(shù)和彩色漸變的插畫家 Mohamed Samir 設(shè)計(jì)了一系列富有趣味性的海報(bào)。

2. 等距視頻

△ @Matthieu BRACCINI@Panic Studio

將大物體變成微小模型的等距設(shè)計(jì)方法能給人留下印象,最近可以看到很多運(yùn)用了這種方法后,屏幕變得更加特別和有趣的案例。

混合媒介

結(jié)合不同媒介的各種圖形,創(chuàng)建有趣的效果是過去常見的一種方式。最近,結(jié)合大膽色彩,逼真照片和 3D 圖像給大眾新鮮感受的案例也很多。含有扁平化元素的真實(shí)圖片和視頻是 2019 的主要趨勢之一。

1. 3D視頻+2D圖形

△ @Sergio Fuego@giantantstagram

當(dāng) 2D 和 3D 圖像組合在一起,立體效果可以更加獨(dú)特和突出。這是使用了此方法的優(yōu)秀視頻案例。

2. 真人實(shí)拍視頻+2D插畫

△ @+CRUZ

匡威活動視頻是一個(gè)很好地混合了拍攝視頻和 2D 圖形的案例。

3. 真人實(shí)拍視頻+發(fā)光涂鴉動畫

△ @blottermedia、@jamiethraves

在真人視頻中添加發(fā)光的涂鴉動畫,可以使視頻更具動態(tài)性和趣味性。當(dāng)下,SNS 平臺上越來越多舞者和歌手的視頻都使用這種效果。

4. 運(yùn)動 3D 的 2D 插畫視頻

△ @phellaz、@blublustudios

有很多作品很難知道它是 2D 還是 3D。用 3D 表達(dá)物體運(yùn)動,而不是簡單地使用 2D 圖形,這種視頻能傳達(dá)一種新的視覺感受。

短而無縫的動畫

當(dāng)通過 SNS 共享圖形圖像變得非常普遍時(shí),短小和重復(fù)的動態(tài)圖形也變得很易見。logo、2D 插畫、3D 圖像和各種各樣的圖形都以短循環(huán)動畫的形式共享。

1. 2D 短動畫

△ @motionmarkus

這些短視頻通過在簡單的扁平插畫里重復(fù)使用短動作,傳達(dá)了一種獨(dú)特而有趣的形象。

2. 3D 短視頻

△ @arbenl1berateme

由于 3D 是主要趨勢,小而重復(fù)的 3D 圖像也值得注意。添加 3D 真實(shí)紋理和效果,可以帶來獨(dú)特的視覺感受。

AR/VR

AR 和 VR 技術(shù)的發(fā)展,對平面和多媒體的設(shè)計(jì)趨勢產(chǎn)生了很大的影響。這些新技術(shù)使人們對品牌有更加立體的體驗(yàn)。

1. Le Graphisme Augmente 圖形海報(bào)

△ @Laura Normand

盡管是印刷海報(bào),它也允許人們通過印刷材料使得 3D、AR 技術(shù)獲得交互式體驗(yàn)。印刷海報(bào)只包含簡單的幾何圖形和極小的信息,但當(dāng)你通過手機(jī)查看時(shí),將獲得更多的信息和看到立體的形狀。

2. Apple Music x Memoji 廣告

△ @Apple

Apple 使用基于 AR 技術(shù)的 memoji 來推廣 Apple 音樂。著名藝術(shù)家如 Ariana Grande 推出了他們的歌曲,通過這支廣告,Apple 一起宣傳了 Apple Music 和 memoji。

3. Nike:上海 Never Done 運(yùn)動店鋪網(wǎng)站

△ @AKQA

上海耐克通過 AR 技術(shù)實(shí)現(xiàn) 360° 網(wǎng)上零售的項(xiàng)目,可以讓消費(fèi)者根據(jù)運(yùn)動的出汗量來進(jìn)行購買和體驗(yàn)服務(wù)。

4. 奧迪 Quattro Coaster 廣告

△ @POL

這是奧迪利用 AR 技術(shù)的項(xiàng)目,它能讓消費(fèi)者將汽車從銀幕上帶到自己的位置,從而積極體驗(yàn)開車的感覺。

5. 2018 年英雄聯(lián)盟全球總決賽開幕式

△ @League of Legends

2018 年英雄聯(lián)盟的開幕舞臺利用 AR 技術(shù),使演唱 POP/Stars 的真人歌手和游戲里 K/DA 角色一起同臺演出。這些被實(shí)時(shí)跟蹤的角色,在實(shí)際舞臺上帶來了真實(shí)的表演效果。

新復(fù)古

新復(fù)古,用現(xiàn)代感覺詮釋復(fù)古,已成為一種新趨勢。新復(fù)古是一個(gè)結(jié)合了「新」和「復(fù)古」的詞,是對過去懷舊的現(xiàn)代詮釋,不僅是設(shè)計(jì),在時(shí)尚、建筑、流行文化等各領(lǐng)域都是一種新趨勢。

1. 復(fù)古風(fēng)格視頻

△ @dennybusyet  @thekidzzzzz

流行于 80 年代和 90 年代的電子游戲,和好萊塢電影的復(fù)古圖像與視頻,被重新詮釋后,再一次流行起來。

2. Fritz Coffee Company 公司品牌識別

△ @Jo In Hyuk

韓國著名咖啡品牌,F(xiàn)irtz Coffee 創(chuàng)造了的,具有復(fù)古 logo 和圖形的品牌標(biāo)識。

結(jié)語

趨勢不會朝一個(gè)方向發(fā)展,它可以擴(kuò)展成各種各樣的方式,就像我們看到的反映了趨勢的 3D,AR/VR 技術(shù)也包含了復(fù)古風(fēng)格一樣。我們希望這些不同的趨勢能以新的方式被應(yīng)用,從而創(chuàng)造出新穎而有趣的設(shè)計(jì)。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

日歷

鏈接

個(gè)人資料

存檔