Behance2019設計趨勢「下」——UI

此篇文章原文為 2019 Design Trends Guide ,由原文作者:Loredana Papp-Dinea 與共同作者: Mihai Baldean,發表於 Behance。

Behance2019設計趨勢「下」——UI/UE趨勢

本篇文章總結的是Behance 2019年設計的UI/UE趨勢,主要趨勢如下:

1. 仍然是移動端第一(Mobile First)

2. 減負設計(Negative Space)

3. 定製插圖(Custom made illustrations)

4. 情感化圖標(Illustrative Icons)

5. 流體、幾何、非對稱(Fluid, Geometrical, Asymetrical)

6. 視頻背景(Video Background)

7. 動效(Animation)

8. 微交互(Micro-interactions)

9.粗體代替圖片(Bold Fonts instead of images)

10.柵格突破與元素重疊(Broken Grid & Overlapping Elements)

11. 3D 插圖(3D Illustrations)


UI/UE TRENDS

2.1仍然是移動端第一(Mobile First)

隨著谷歌首先實現在移動端使用響應式網頁技術後,移動端現在已成為產品優先考慮的設計因素。移動端第一,首先是為移動用戶設計網站,然後再創建一個也適用於桌面用戶的版本。

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

(1) Author: Milo Themes — Project Etopium UI/UX; ; (2) Author: fps ecosystem — Project: Budapest Park website redesign; (3) Author:Nikita Resh — Project: Logistics Corporate website | UX/UI Design;


2.2 減負設計(Negative Space)

少即是多!在設計中做減法一直都能有不錯的效果,目前在所有設計領域都看到或多或少這類負空間的使用,而 2019 年將更大量的使用於網頁設計和應用程序設計中。

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

(1) , (2) Author: Alexander Plyuto — Project ZIPL v 3.0; (3) Author: Alexander Plyuto — Project SUBURBIA


2.3 定製插圖(Custom made illustrations)

正如前面所提到的年度趨勢,插圖一直是幾年中不斷增長的主要趨勢。在 2019 年從登陸頁面到整個網站,定製插圖將會風靡整個數位設計行業。


Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

(1) Author: Daniel Tan — Project My Portfolio Website; (2) Author: Nimasha Perera — Project: Illustration Pack; (3) Author: Milo Themes — Project Etopium UI/UX; (4) Author: Daniel Tan, Daphnie Loong — Project: Tofu Design — Website & Identity; (5) Author: Mumtahina Hasnat, Mushfiq — Project: Evento App Design;

Kuznetsov✈ — Project: Organic Artificial Intelligence design;


2.4 情感化圖標(Illustrative Icons)

好的圖標可以自然的把用戶的視線,導引到需要重點關注的信息或功能上。同時也能自然地將與服務相關聯的信息,透過良好的視覺層次結構說明。

同時搭配好令人會心一笑的情感化設計,肯定能起到不錯的效果。


Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

(1) , (2) Author: Denis Shepovalov — Project: Illustration Constructor; (3) Author: Netguru Team — Project Trello Atlassian — Redesign;


1.5 流體、幾何、非對稱(Fluid, Geometrical, Asymetrical)

Fluid 風格一直都能在 2017–2018 年中持續看到流體,但這類的風格在 2019 年將會更加顯性。配合前面所提的混搭風、大膽的顏色和強烈的漸變,流體形狀是 2019 年必不可少的網頁設計趨勢。

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

(1) Author: Mariusz Mitkow — Project: LuxuryClean UI/UX iOS App; (2) Author: Eddie Lobanovskiy — Project: CrowdRise; (3) Author: Tal Midyan, Lillie Ferris — Project: PharrellWilliams.com;


2.6 視頻背景(Video Background)

大量的研究數據表明,2018 年使用短視頻可以提高更高的轉化率。視頻相較於文字與圖片,可以在幾秒鐘內傳達更多更好更清晰的內容,同時也仍持續吸引用戶的注意力。


2.7 動效(Animation)

動效設計早已是數位設計行業中不可或缺的專業,試著在你的移動產品或網頁設計裡,加入一些順暢的平滑過渡或漂亮的懸停效果,可以讓你的設計更加地吸引人。

Behance2019設計趨勢「下」——UI/UE趨勢


Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

(1) Author: Leo Natsume — Project: Destination for the trash; (2) Author: Dannniel — Project: HQ Launch Animation Redesign; (3) Author: Charles Patterson — Project: Invision Projects — Spaces iOS; (4) Author: Stan Yakusevich — Project: Mi Smart Home;


2.8 微交互(Micro-interactions)

微交互效果是移動端上,常用於創建微妙視覺效果的小動畫。今年,我們比以往任何時候都要更關注這些微觀互動。

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

(1) Author: Oleg Frolov — Project: Microinteractions V; (2) Author: Oleg Frolov — Project: Search icon interaction; (3) Author: Mauricio Bucardo — Project: Navigation Interaction; (4) Author: Dannniel — Project: Tab Bar Cube Interaction;


2.9 粗體代替圖片(Bold Fonts instead of images)

隨著近年對於排版的關注,許多巨頭企業如蘋果,都在嘗試選擇通過獨特的字體與排版風格來做出品牌聲明。在一些場景下,透過排版能達到更好的說明。

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

(1) Author: Yi Shi — Project: Yi Shi Portfolio; (2) Author: Hrvoje Grubisic, Bornfight Company — Project: Bornfight — Digital Innovation Company;


2.10 柵格突破與元素重疊(Broken Grid & Overlapping Elements)

網頁設計中柵格突破在 2018 年末開始盛行,可以預見在 2019 年可以看到更多結合柵格突破的方式,與元素重疊的網頁設計組合,但在使用時,記得始終要牢記移動端的體驗!

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

(1) Author: Abhishek Biswas — Project: Meaww; (2) Author: Daniel Tan — Project: Aero — Airline Flight Booking UI/UX;(3) Author: Slava Kornilov — Project: FRASH Canada; (4) Author: Soongyu Gwon, D.FY creative studio — Project: The D.FY you know, but better.; (5) Author: Ovik Mooshlyan — Project: Cittá | Furniture website concept; (6) Author:Soongyu Gwon, D.FY creative studio — Project: The D.FY you know, but better.;


2.11 3D 插圖(3D Illustrations)

3D 形態的插圖在過去幾年中已經開始大受歡迎,許多大品牌也使用 3D 效果來作為產品宣傳渲染,如:運動鞋,運動裝備,包裝設計等等。

Behance2019設計趨勢「下」——UI/UE趨勢

Behance2019設計趨勢「下」——UI/UE趨勢

(1) Author: spiilka design büro — Project: Megogo Brand Identity; (2) Author: Apus Agency — Project: Teleset Plus. Telecommunication company;


原文的作者收集了總共六大章節的大量案例,除了我們已經分享的基本趨勢、UI/UE趨勢,還包含了其他細分領域的設計趨勢,比如排版、字體、品牌、動效、包裝等,如果感興趣,可以點擊以下原文鏈接,查看原文。

https://www.behance.net/gallery/71481981/2019-Design-Trends-Guide


— end —

請尊重作者的勞動,僅供分享交流,切勿用作商用

圖 | 版權歸原作者所有

AI插畫

讓畫畫成為一種樂趣


分享到:


相關文章: