2020,UI設計師應該關注的3大設計趨勢

2020-12-21 人人都是產品經理

今年要關注的是新擬物風還是2.5D矢量插畫又或者是其他？讓我們一起來看看在2020年可能會影響我們日常設計體驗的三大設計趨勢。

最近有大量的設計軟體和工具雨後春筍般湧現——Sketch,Figma,Adobe Creative Cloud,C4d,Redshift等等。這使得設計創作門檻越來越低，設計師們也能夠以更多的形式和更低的成本表達自己的創意。

我覺得趨勢應該是能夠相互結合，還能以創造性的方式在web和許多APP中得到使用。如果使用正確，3D插圖、動畫和自定義的組合可以為用戶提供一套完整的解決方案。

一、3D 插畫

由於一批3D愛好者在Instagram上分享他們的作品，3D在2019年流行了起來。在2020年，3D設計領域會得到更加重要的發展。

3D之所以變得如此流行主要得歸功於一些強大的渲染工具，比如OC，RedShift等等，以及非常便宜的顯卡和其他硬體設備。

越來越強大的軟體以及越來越便宜的設備，使得不同領域的設計師們也能夠通過3D表達自己的創意。

Illustrations by Crystal Yumumu on Dribbble

Illustrations by Luis Yrisarry Labadía on Behance

Illustration by Mike | Creative Mints on Dribbble

Illustration by Mike | Creative Mints on Dribbble

將平面設計概念轉化為3D有無數種方法。我可以看到設計師們大多在以下領域重新構思舊的想法，形成新的作品。

  • 中小企業，企業，高科技(人工智慧，機器學習，大數據等)和it相關公司的插圖
  • 兒童插圖和動畫
  • 實驗性的幾何插圖

幾年前，網頁設計師的設計工具還不需要會3D軟體。鮮明反差的是，今天的設計師們正在成為更全面的設計師，不斷學習插畫，攝影，C4D，動畫等。

設計師們已經走了很長一段路，我喜歡看到他們慢慢成長為超級英雄！

二、動畫

在當今快節奏的技術時代，動畫的發展緊跟步伐。尤其是近期在3D領域的應用，把曾今的不可能實現變成了可能，為更加富有創意性的設計打開了大門。

2019年，我寫了一篇關於2D和3D混合使用的趨勢，預測設計師能有更加多的創意空間。隨著技術支持更進一步，設計師可以更加大膽的去思考2D與3D結合的創意，產出的動畫流暢順滑，這一趨勢在2020年肯定會大放異彩。

在2019年，我們注意到在一些網頁中，動畫被非常多具有想像力的方式呈現。一個很棒的例子是蘋果AirPods頁面。

毫無疑問，在2020年，網頁上會看到非常多的過渡動畫，場景動畫，這得益於網頁技術的支持，一些新的JS庫，比如ScrollMagic. js, Three.js, Anime.js, Mo.js, Velocity, Scroll Reveal 等等。

我用ScrollMagic庫設計了一個我的個人網站，它非常輕量，但很強大。儘管我直接應用庫來做，幾乎未做修改，但是依然可以獲得比較好的網頁效果：

我的個人網頁截圖

使用SwiftUI庫可以讓iOS設計師很輕易的做出不錯的動畫。下面的動畫是我用SwiftUI不到10分做出來的動畫效果。

基於這些動畫庫和工具，能做出比較複雜的2D和3D動畫。設計師能夠更加大膽的設計創意效果，開發現在也能比較容易的用代碼實現出來。

Illustration by Zak Steele-Eklund on Dribbble

Illustration by Daniel Tan on Dribbble

Illustration by Stian ◒ on Dribbble

動畫可能看起來像一個閃亮的新玩具，但我們需要小心使用。過度使用動畫不僅會影響用戶體驗，還會影響性能。

三、自定義或是組件化

在2019年，我們見證了數量激增的定製插畫，特別是在商業設計中。這個趨勢在2020年將得到延續。

雖然在幾年前，很難說服客戶採用適合他們的業務或行業的插畫，但現在這點已經成為行業標準。

組件化圖片通常應用於通用對象，即那些易於可視化的對象。隨著人工智慧，大數據，區塊鏈和機器學習的興起，這些插圖廣泛應用於web和UI設計已經成為不爭的事實。

Illustration by the Netguru Team

Illustration by Daniel Tan on Dribbble

Illustration by Ben Schade on Dribbble

Illustration by Calvin Sprague on Behance

擬物設計是仿照真實世界物件的樣式，也是在初代iPhone上被應用的最亮眼的趨勢。巔峰之後，就漸漸被人遺忘。現如今，新擬物更多的被應用於遊戲設計或復媒體設計中。

Illustration by Paarth Desai on Dribbble

設計師們意識到，簡單易懂的風格能更好的講好故事。乾淨的風格也使得設計師能夠設計出風格獨特的插圖。

哪種風格會持續下去？

我唯一能確定的就是未來會變得越來不確定。我這篇文章中的預測是基於觀察，分析數千個網頁，設計稿，插畫等等得出來的。

最近設計圈非常狂熱的追捧新擬物風（軟UI），在一些功能簡單的應用像音樂或日曆應用上效果很不錯。為了畫出新擬物風的效果，你需要做3層有差別的顏色：

  1. 最淺的顏色用在左上角的投影上
  2. 中間色用到元素及背景上
  3. 最深的顏色用到右下角的投影上

我最近用這種方法設計了一個音樂APP概念。

新擬物風才剛剛站上舞臺，所以我並不確定它是否能成為主流。我們需要看到它繼續發展並能真正應用到實際的APP中。

對於現在，新擬物風並不能取代扁平設計趨勢，它只是一個簡單的加法。

漸變在如今也很流行，許多人不確定它是否會持續下去。但是，漸變在現在已經非常適合UI設計，它提供了非常優雅的視覺體驗。

Stripe’s homepage

Illustration by Mike | Creative Mints on Dribbble

我熱切的期待設計師們能夠在今年使用這些趨勢，並能綜合這些設計方法為用戶提供極致的用戶體驗。

 

原文：https://uxdesign.cc/visual-trends-that-ui-designers-should-keep-an-eye-on-e622d9086310

作者：Pranav Ambwani

譯者: 彩雲Sky，公眾號：彩雲譯設計

本文由 @彩雲Sky 翻譯發布於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議

相關焦點

  • 設計師如何將品牌元素融入ui設計
    設計師如何將品牌元素融入ui設計？在為企業提供ui設計服務的過程中，設計師需要將品牌元素有機融合到ui設計中去，使之更加符合企業的基本定位。然而很多在ui培訓學校學習的新人並不清楚應該如何將品牌融入ui設計，接下來小編就給大家簡單講一下這個問題。
  • 2021年UI設計趨勢指南
    -2021-637ac038cb99 譯文地址：非科班設計（公眾號） 譯者：逗砂 我們終於還有一個月就要告別魔幻的2020年了，uxdesign又寫了一篇趨勢指南。
  • 2020年的5種UI趨勢
    與時尚一樣，網頁設計也有其趨勢，並且每年都在變化。我們將趨勢分為兩個方面：用戶界面（UI）和用戶體驗（UX）。在這裡，您會發現將在2020年蓬勃發展的界面設計趨勢和視覺樣式。
  • 趨勢|2020UI設計流行什麼?
    2020已過半，設計行業大洗牌。整個設計風格會更偏向於服務性：字體設計、圖形設計、色彩設計、動效設計、空間3D設計、插畫設計、國潮設計、IP品牌形象設計、攝影、視頻剪輯等都漸漸融入UI流行趨勢。
  • 2021設計趨勢:UI/UX篇
    編輯導語：轉眼間，2020年就要結束了。這一年許多東西都放慢或者停滯了，正如2020年的設計趨勢沒有發生太大的變化，但是2020年的許多因素卻會對2021年產生很大的影響。接下來，本文作者為我們預測總結了2021年的主要趨勢。
  • 優秀UI設計師必知的字體設計規範
    前幾期給大家分享了關於UI設計的排版、配色、流行趨勢、情感化設計等等。這些都固然重要但是似乎忽略了什麼，沒錯那就是字體!今天胡老師就和大家聊聊優秀UI設計師必知的字體設計規範。字體為什麼重要?排版並不是界面的點睛之筆，它只是將所有UI設計元素結合在一起的粘合劑。但是，由於有許多可用的字體，很多UI設計師在選擇適合該產品的字體會感覺像雷區。為了幫助小夥伴，給大家說說字體以及注意事項。字體分為襯線和無襯線。
  • 2020的UI設計趨勢完整版,看這篇就夠了
    上期我們一起來研究關於2020界面設計趨勢，從色彩、插畫、字體三方面分析 2020的UI設計趨勢，我先收藏了（上）今天從圖形、布局等方面，繼續聊聊設計趨勢，希望這篇文章幫你弄懂2020的UI設計趨勢，一定記得收藏哦。
  • 最基礎的角度來聊聊一位優秀的ui設計師是如何進行設計的
    在這之中，最基礎也是最困難的也就是設計，眾所周知設計有很多流程，比如創意階段、網站設計等，但是大部分設計師的工作流中最常用的其實就是ps做圖，通過ps進行作品的美化。然而，其實很多設計其實都只是表面的美觀工作，本質上來講根本不能稱之為設計，需要我們從最本質的方面來進行設計、前期開發和後期運營等等環節的工作。
  • 2020的平面設計趨勢
    一個優秀的設計師，就應擁有對行業足夠的敏銳力，能迅速捕捉到潮流和新穎的事物。那2020的平面設計趨勢，又會有哪些？乾貨又來了，趕快拿好本子筆。 2020年的平面設計趨勢！
  • 2019年UI設計趨勢
    2019年的UI設計趨勢，從最近半年的Dribbble和Behance作品中可以窺得一斑，本文從三個大的方面，設計元素：顏色、形狀、版式、界面層次的使用
  • 2020年UI設計五大流行趨勢分析
    對於一個優秀的UI設計師來講，把握設計流行趨勢是一項基本能力。在反覆分析了2020年已經過去的幾個月的UI設計作品之後，本文為大家整理總結了2020年UI設計五大流行趨勢，分別是深色模式、顏色對比、卡片設計、擬物風格以及留白設計。
  • 2020年值得關注的10大標誌設計趨勢
    也就是說，偉大的設計並不存在於真空中！看看其他品牌的成功之處，可以激發你的靈感，讓你有自己的想法。這就是為什麼我們邀請了兩位設計師來預測2020年最大的標誌設計趨勢。 從新興的設計技術到新的配色方案，請繼續閱讀新的一年裡值得關注的10大標誌設計趨勢。
  • 2020下半年,平面設計九大趨勢來了!
    一晃2020即將過去一半，作為優秀的平面設計師，應該具備足夠的行業敏銳力，緊跟世界最新設計潮流，時刻關注設計風格的發展趨勢，為客戶設計前沿的時尚設計作品。 那麼，今年下半年，平面設計趨勢流行哪些呢？
  • Behance報告:2021年UI設計流行趨勢
    Behance是Adobe公司旗下的一個設計創意交流網站，也是設計師們必備的欣賞設計大神作品、汲取設計靈感的素材網站之一。 2020年即將結束，Behance為設計師們總結了一些2021年UI設計流行的趨勢，趕緊來看看吧！
  • 2021年UI界面設計的9個趨勢
    2020年已經過去一大半，這些時間以來，我一直在關注數字設計領域未來的設計趨勢。我們很有必要時刻關注這個趨勢，未來將會在更多設計中看到擬物化圖標的出現。不過這種風格也不能大面積運用在界面中，我們可以運用在一些關鍵功能入口設計上。
  • 2020年做UI設計、手繪插畫師是最吃香的?工資高,兼職單多
    行不行看ui和插畫分析還有後面作品  末尾還有免費福利彩蛋2020年網際網路將迎來一波新的高潮那麼誰可以抓住這波機會呢
  • app界面設計的流行趨勢
    app界面設計的流行趨勢，界面作為我們認識app的第一道門檻，是app的「面子」，更是不可忽視的一項重點設計，為了建立有效的ui，設計師需要根據移動端app本身的特性和當下趨勢，作出不一樣的改變。但當今設計趨勢瞬息萬變，在沒有統一標準的設計規則之下，緊跟設計趨勢，才能保證ui對用戶的吸引力常在。
  • 如何利用品牌元素進行ui設計
    如何利用品牌元素進行ui設計？在企業發展的過程中往往需要進行一定的品牌建設和推廣，優秀的品牌形象設計能夠加深消費者對於品牌的特有印象，進而促使企業更好地發展。那麼設計師應該如何根據品牌元素進行品牌形象的設計呢？接下來小編就跟大家簡單分析一下。
  • UI設計師怎樣做,才能達到年薪30w?
    UI設計師的水平，直接決定了App、網站的「顏值」。一個好的UI設計師，能潤物於無聲，在渾然天成的設計中為產品注入新的價值，不是普通的打雜美工。並且，要想成為一名優秀的ui設計師你不僅需要熟練使用各種軟體，還要會設計頁面，還要懂客戶、懂溝通、懂數據、懂動效……工具是每位設計師必須了解熟悉的，它們就是你生存的武器，時下常用的軟體我們都應該掌握，比如ai、ps、ae、Axure RP等等。學軟體必須精通使用，練到爐火純青，將會大大提高你的工作效率。
  • ui設計師必須了解的圖標分類
    ui設計師必須了解的圖標分類。圖標設計作為ui界面設計的重要組成部分，對於信息的傳播具有至關重要的作用。那麼一般情況下圖標可以分為哪幾種呢？今天優行者就跟大家科普一下那些常用的圖標分類。這類圖標在設計風格上的迎合了目標受眾的偏好與期望，具有獨特外觀，並且提升了整個設計的可靠性和友好度。三、說明性圖標說明性圖標主要是用來解釋說明特定的功能或者內容，它們並不一定是可直接操作的UI設計元素，有時僅僅是作為靜態頁面對於文字的輔助說明。它們通常也會配有輔助解釋其含義的文案，以提高信息的可識別性，是頁面設計中使用範圍最廣的一種圖標。