[好文精選] 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 年代出現的趨勢,但在好萊塢十年後開始發行此風格的電影后,便開始重新出現。隨著《怪奇物語》系列的成功,這一潮流再次開始流行。

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.