[好文精選] Behance 2020 設計趨勢

NathanChen
UXeastmeetswest
Published in
29 min readDec 1, 2019

--

本文翻譯自 Behance 上的知名設計趨勢作者博客 Main trend for 2020 作者 Milo 整理了 關於 2019 年末 Behance 上的知名作品,包含了 UI動效、插畫,並依此給出關於 2020 的設計趨勢。

Source:https://www.behance.net/gallery/86124977/2020-Design-Trends; Milo

原文網址:https://www.behance.net/gallery/86124977/2020-Design-Trends

這是連續第五年發布對來年設計趨勢的預測。過去幾年中,讀者的積極反應促使我們繼續探索和分析主要設計領域的新趨勢。儘管大多數趨勢都是去年延續至今的變化,但到 2020 年,仍有一些新的趨勢值得設計師追求。

最關鍵的設計趨勢,必定與科技發展和技術趨勢緊密結合,以及和它們如何影響設計領域相關。

讓我們開始探索 2020 年最複雜的設計趨勢指南。

2020 年度趨勢 Motion Design & Animations

對於 2020 年,我們認為動態動畫設計將會是主要趨勢,因為我們可以看到在所有設計領域都出現了越來越多動畫,從小交互到 Logo 和 UI,一切都在動態化。3D 動畫內容正在讓設計呈現變得更現化,而這可能是文案內容將沒有如以前那樣地吸引人。

如果應用得當,動畫內容可以讓廣告的信息更快、更正確地傳達給受眾。

本文目錄

01 UI / UX

02 插圖 Illustrations

03 動態圖形 Motion Graphics

04 平面圖像 Graphic Design

05 基於技術的趨勢 Trends based on Technology

06 包裝 Packaging

07 字體設計 Typography

08 趨勢工具 Trending Tools

01 UI / UX

1.1 暗模式 (Dark mode; android Q and iOS 13)

暗模式是 2020 年延續 2019 的新趨勢,Android 系統引入了兩種類型的暗模式,分別為 “強制暗模式” “系統暗模式”。微軟通過在其電子郵件 APP 中展示其暗模式擊敗了谷歌,但谷歌立即迅速推出了自己針對 Android 10 的Gmail APP 的暗模式版本。 隨著越來越多的領頭大公司推出自己的暗模式版本,越來越多的設計師,將會選擇在他們的 APP 或網站中使用暗模式,因此希望在來年看到越來越多的暗模式。

1.2 大膽用色 (Bold Colours)

在過去的 2019 到 2020 年中,強烈大膽的色彩已成為重要的趨勢。大膽的色彩豐富,明亮,甚至極富活力。使用它們作為主要或次要顏色。

1.3 界面插圖 (Illustrations in UI)

這麼多年來,插圖一直是設計中最強勁的趨勢之一。插圖是設計對於概念概念最直觀的方式,可以讓用戶更好地理解產品背後的想法。精美的插圖除了能使這些想法獨具匠心外,還可以更快更好地傳達信息。

1.4 脈絡敘事 (Storytelling)

設計中會使用講故事的方式,幫助用戶在產品與網站中的體驗,盡可能輕鬆和流暢(UX 設計),一個好的故事可以幫助用戶更輕鬆地了解產品。

為了講述一個故事,我們可以使用一個特別創建的角色,並賦予這個角色個性,再通過創建一個故事和一個衝突,最終在我們的產品上(UI 設計)解決衝突。這即是產品設計中講故事的基礎。講故事在 UI 和 UX 中都會使用,基於相同的原理,但實現方式不同。

1.5 動態插圖與微交互 (Animated graphics & Micro-interactions)

正如文章開頭所說,動態圖形將會是 2020 年的重要趨勢,並且在 UI 設計中也有很明顯的表現,它不只增強了插圖的效果,並且讓產品想法能更易於被吸收並保留在用戶的記憶中。

微交互在 2018 年次出現,但今年這一趨勢將值得在 2020 年繼續關注。動態圖形將會是 UI 設計中極為重要的趨勢。它使基本 APP/Web 與非凡的 APP/Web 有所不同。

微交互在使用戶了解產品的工作原理,並引導其獲得更好的體驗方面起著至關重要的作用。如果您是 UI 設計師,但尚未在工作中使用微交互,建議您可以開始這樣做,因為到 2020 年,將會是 UI 設計中最基本的。

1.6 Video in UI

到 2020 年,信息必須非常快地到達用戶手中,通過視頻內容將會更好地完成這個目標。不管是選擇通過動畫或經典影片來解釋產品,視頻內容對於任何 APP/Web 都是必不可少的。

01. Pockee — a family banking app by Adam Zielonko , Toto Castiglione , Wiktor Półtorak , Iryna Korshak , Netguru Team , Maciej Dyjak

1.7 功能設計 (Functionality)

UI 設計中一個重要的部分即是功能設計,所有設計元素的選擇都是根據這個目的和能力。許多人認為您必須在設計和功能之間進行平衡,但是在新技術的幫助下,這兩種技術可以很好地融合在一起並相互補充。設計將更專注如何引起用戶,對 APP/Web 的注意。而功能設計將使體驗變得更輕鬆,讓用戶可以更快地找到信息。

01. Skilling Trading (skilling.com) — Loredana Papp-Dinea , Mihai Baldean

1.8 關注細節 (Attention to details)

在 UI 設計中,對細節的更多關注非常重要。從按鈕、圖標、加載、導航到細微的細節,都影響著是否可以打造出非凡的設計。隨著新技術的出現,我們在 UI 中必須注意的細節持續變化。

在明年,我們將看到越來越少的按鈕,以及更多基於手勢的導航。例如,後退按鈕(Android 的導航常使用)在 Android 10 中正式消失。

1.8 漸變 (Gradients)

這幾年來,我們一直在談論設計中的漸變,這種趨勢在 2020 年將繼續保持強勁,因此值得一提。新鮮大膽的色彩是成功使用漸變的完美選擇。它們可以用於按鈕、圖標、插圖,甚至用於排版。

02 Illustrations

2.1 角色設計 (Character design)

角色設計包括定義一個支持整個概念的角色。最重要的是,通過繪圖,設計師向角色灌輸了強烈的個性。您在 APP/Web 中遇到的虛擬助,就是角色設計的一個很好的例子。

2.2 紋理 (Textures)

插圖和紋理很好地結合在一起,可以創造出令人難忘的構圖。從粒狀紋理到筆觸,您可以透過許多不同地想,來為插圖添加紋理,也可以手動的創建它們。瀏覽網路時,您可以找到不少用來在插圖中使用的紋理、筆刷和工具。

2.3 平面插圖 (Discreet Outlined Flat Illustrations)

在過去的幾年中,我們到處都可以看到平面,到了現在它們仍然處於趨勢中,但 2020 年將會有一個新的組成部分:對每個元素應用細線。大多數藝術家都選擇使用細的黑色筆觸,但也可以將其上色,使其陰影比所涉及的對象暗。

2.4 透視 (Isometric)

是的,透視插圖仍然在趨勢中。它們主要可以在 UI 設計中找到,隨著人們在 2019 年對加密貨幣的興趣增加,這種趨勢逐漸顯現出來。但現在我們在其他業務領域中,也逐漸發現了這一趨勢。

2.5 3D

隨著效率越來越高的軟件和工具出,3D 渲染效果已逐漸變得越來越可低成本成本商用。 3D 插圖之所以非常受歡迎,因為與 2D 插圖不同,它提供了更逼真的圖像。

2.6 極度大膽的用色(Ultra bold colors)

大膽的顏色非常適合插圖。它們營造出歡樂的氛圍,使角色脫穎而出,並在圖像背後展現故事。

03 Motion graphics

3.1 3D Videos

在 2020 年,無法想像沒有 3D 設計動態效果。這個設計的分支打開了一個世界的大門,在這個世界中,只有想像力是極限。我們可以在廣告,電影,遊戲,廣告活動等中找到 3D 效果。

01. Cyberpunk City by ONJO _ , Visual Design Art S 02. States of Matter #3: Montage by Juan García Segura

3.2 混合媒體 (Videos + Animated illustrations)

結合拍攝視頻,動畫插圖以及靜止照片,有時可以產生非凡的效果。2D 或 3D 插圖可創建令人難忘的視頻,從幾行運動到 3D 中的真實人物,甚至是現實生活中不存在的複雜視覺效果。

01. Coppel / Back to school by Plenty Studio 02. PWR by ​​​​​​​Ana Hoxha, Edvina Meta

3.3 說明視頻 (2D animations)

2D 動畫更專注於創建過程中,使用矢量圖來創造故事和角色。當您想要廣告或產品中使用說明視頻時,2D 方式可能是較為理想的選擇。

在一個快時代即較少時間接觸用戶的軟體 UI 中,一個好的說明視頻對於任何網站都是必不可少的。

01. Freelive by Studio Infografika , Sergey Sadowski , Anastasia Alterka , Arsentiy Lesnik , Yuriy Armstrong , Arin Good, George Vald ,Maxim Tleubaev 02. ESN — Railway Package by Andres Hertsens , Squarefish Studio

3.4 動態商標 (Animated Logos)

您應該已經了解到動態效果將是 2020 年的 “必備設計”,為了發揮這個優勢,我們還可以將它們應用到商標設計中。許多公司已開始對其商標進行動態化處理,以引起人們的注意。這也是目前商標設計的主要趨勢。

3.5 2&3D 混合動畫 (Hybrid Animation-2D and 3D Integration)

2D 與 3D 動畫混合的趨勢並不是一個新趨勢,但在 2020 絕對值得一提。混合動畫就是使用為此創建的特定軟件,將 2D 與 3D 效果結合在一起。

01. Olof Storm Channel On Youtube

04 Graphic Design

4.1 平面中的 3D 效果 (3D in graphic design)

儘管 2D 設計方式被大量應用在了平面設計中,但 3D 卻可以為最終的概念添加額外驚艷的內容。 3D 渲染可以應用在平面設計中的插圖、動畫或字體。

4.2 雙色/對比 (Bicolor)

精益求精的概念可以完美描述這一趨勢,設計師在透過創造出大膽的元素,並用優雅的設計和強烈對比將其結合。這種趨勢是創建更易於吸引注意力的平面印刷的理想選擇,因為當前的打印技術,顏色如果更多則價格會更高。

4.3 光感藝術(Optical perception art)

歐普藝術有許多知名的抽象黑白作品。它們通常通過給觀看者留下動感、隱藏圖像、扭曲和閃爍的圖案,或膨脹或彎曲的印象。這種趨勢給人有了動態的印象,但其實是一種用靜態的呈現方式。如果要在印刷海報中實現動態效果的想法,這是較合適的方法。

4.4 平面設計中的插畫 (Illustrations in Graphic Design)

插圖在設計的所有領域都非常重要,因此我們在圖形設計中也能發現被大量使用的身影。 2D 插圖在現在已經非常流行了幾年,並且即使在2020年,也將繼續成為設計師的最愛。

4.5 動畫海報 (Animated posters)

動畫無處不在,我們在設計的各個領域都可以找到它們,當然它們也存在於數字海報中。動畫可以將 2D 與 3D 混合在一起,效果令人著迷。

4.6 蒸汽波 (Retro Synthwave)

復古蒸汽波是一種在 80 年代出現的趨勢,但在好萊塢十年後開始發行此風格的電影后,便開始重新出現。隨著《怪奇物語》系列的成功,這一潮流再次開始流行。

01. Cocktails and dreams by Gjorgji Despodov 02. C I N E M A X by Jeison Barba 03. Stranger Things (Netflix.com)

4.7 瑞士、達達、包豪斯風格 (Swiss design, Dadaism, Bauhaus)

20 世紀最重要的圖像設計風格,始終是設計師最好的靈感來源。這些樣式值得一提,因為它們始終是最新的,遵循它們的規則幾乎不可能在設計中犯錯誤。總的來說,這些運動強調版式,無襯線字體(Helvetica於1957年在包豪斯舞台上創建)、幾何形狀、簡單的線條、體積和顏色。

4.8 不間段的色彩象限 (Large uninterrupted colored space)

大膽、不間斷的色彩象限,將在明年成為非常流行的趨勢。它們通常與大膽的字型搭配使用,可以在圖形設計、產品設計以及 UI 中找到。

4.9 極簡主義 (Ultraminimalism)

極簡主義的設計僅使用必需的設計元素,有限的調色和簡單的形狀來打造令人難忘的表現。放棄多餘的元素,讓所有設計都有目的。

要創建超極簡主義的設計,您需要使用盡可能多的白色/留白、簡單的配色方案和一些基本的幾何形狀。

05 Technology-based Trends

通過新的智能設備和嶄新的理念,新科技技術正在徹底改變我們的生活。這些新技術使設計師具備能夠開發出進入當前趨勢的新功能。人工智能、機器學習、虛擬現實和增強現實,這些技術正在影響設計師的思維方式和創作方式。

5.1 移動 APP 擴增實境(Mobile apps with Augmented reality)

隨著蘋果和谷歌推出自己的 AR 開發平台 ARKit 和 ARCore。整個世界的趨勢,將更面向增強現實技術。 許多大品牌已經在其應用程序中採用了這項技術,而那些尚未採用這種技術的公司,必須認真考慮如何使用戶在這種新現實中與之交互。

有一些AR交互可用於創建直觀的應用程序。第一個是將應用程序固定在手機屏幕上時。另一個則是當 AR UI 與用戶周圍的環境相關時。最常用的互動方式之一 是當 UI 與對象相關,並通過掃描特定項目觸發時。此操作將動畫連接到特殊的 “標記”上。

有關更具體的AI規則,可以閱讀 Apple 的設計指南,以提供 “將真實的虛擬對象與現實世界無縫融合的沉浸式,引人入勝的體驗”。

5.2 人工智能、機器學習、虛擬助手與聊天機器人(AI ,ML, Chatbots and Virtual Assistants)

聊天機器人是一種通過聽覺或文本方法進行對話的軟件。此類程序通常旨在令人信服地模擬人類作為對話夥伴的行為。儘管截至 2019 年,它們仍遠遠不能通過圖靈測試。

由於技術的限制,當前的人們還不習慣與 AI 對話,因此設計師(和開發人員)的工作很大一部分是使流程簡單並建立信任。他們需要幫助人們了解系統可以做什麼以及如何使用它。使用AIML(人工智能標記語言)設計和編寫腳本聊天機器人,是出色的 UX 設計人員可以發揮作用的地方。

大多數使用聊天機器人的公司,都選擇虛擬助手來作為用戶接觸點。如下面這些在其 UI 設計中使用聊天機器人的品牌:Spotify,星巴克,萬事達卡,絲芙蘭,Lyft,必勝客。

5.3 虛擬實境 (VR)

由於當前技術發展的瓶頸與應用場景,大多數人將 VR 與遊戲行業強相關聯是有充分理由的。但是隨著越來越多大型科技公司開發 VR 套件和應用程序,我們可以肯定地說,我們將發現更多使用和享受這項技術的新方法。 尤其 VR 已經用開始於教育,醫療保健,旅遊,房地產或建築。

5.4 語音交互 (Voice user interface,VUI)

語音用戶界面(VUI)使用語音識別(ASR)來理解語音命令和問題,通常是文本到語音以播放答复(TTS),從而讓用戶透過語音的方式,與計算機進行交互成為可能。語音命令設備(VCD)則是受語音用戶界面控制的設備。

原文中還包含了許多設計趨勢,比如排版、字體、品牌、動效、包裝等,還有許多很精彩的收集,感興趣的大家,不要忘記過去原文看更多內容喔!

06 包裝與產品設計 Product Design

07 字體設計 Typography

01. Eirik Lyng by Erik Herrström 02. Bauhaus_100 (x3) by BunkerType (Jesús Morentin) 03. UCCA Center for Contemporary Art Beijing by Bruce Mau Design (BMD) ,Jelle Maréchal 04. Think8 Global Institute by Blok Design 05. ZINEZŐ // design periodical by Barbara Katona , Media & Design Department Eger 06. TYPE DESIGN ’19 by TRÜF Creative

08 趨勢工具 Trending Tools

01. Adobe Spark 02.Procreate 03.Adobe XD

感謝您閱讀我們 (Milo) 的文章,如果您喜歡某個藝術家,請點擊鏈接轉到他們的頁面,並通過點贊或關注表示讚賞。再次感謝,期待下此我們的趨勢分析。

此篇文章原文為 2020 Design Trends ,由原文作者:Loredana Papp-Dinea 與共同作者: Mihai Baldean 和共同工作室 Milo Studio ,發表於 Behance。轉載或其他用途,請先獲得原作者同意。

謝謝大家看完,如果你喜歡這篇文章的話,也請記得贊一下喔!如果覺得寫道你的心坎裡,但也不要吝嗇用力點個五次贊!我們下次見囉 See ya~

-Nathan

--

--

NathanChen
UXeastmeetswest

Staff Product Design @Dingtlak.inc Alibaba Cloud., believe in design is communication, to User, to Product, to Company.