此篇文章原文為 2019 Design Trends Guide ,由原文作者:Loredana Papp-Dinea 與共同作者: Mihai Baldean,發表於 Behance。
本篇文章總結的是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)
隨著谷歌首先實現在移動端使用響應式網頁技術後,移動端現在已成為產品優先考慮的設計因素。移動端第一,首先是為移動用戶設計網站,然後再創建一個也適用於桌面用戶的版本。
(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 年將更大量的使用於網頁設計和應用程序設計中。
(1) , (2) Author: Alexander Plyuto — Project ZIPL v 3.0; (3) Author: Alexander Plyuto — Project SUBURBIA
2.3 定製插圖(Custom made illustrations)
正如前面所提到的年度趨勢,插圖一直是幾年中不斷增長的主要趨勢。在 2019 年從登陸頁面到整個網站,定製插圖將會風靡整個數位設計行業。
(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)
好的圖標可以自然的把用戶的視線,導引到需要重點關注的信息或功能上。同時也能自然地將與服務相關聯的信息,透過良好的視覺層次結構說明。
同時搭配好令人會心一笑的情感化設計,肯定能起到不錯的效果。
(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 年必不可少的網頁設計趨勢。
(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)
動效設計早已是數位設計行業中不可或缺的專業,試著在你的移動產品或網頁設計裡,加入一些順暢的平滑過渡或漂亮的懸停效果,可以讓你的設計更加地吸引人。
(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)
微交互效果是移動端上,常用於創建微妙視覺效果的小動畫。今年,我們比以往任何時候都要更關注這些微觀互動。
(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)
隨著近年對於排版的關注,許多巨頭企業如蘋果,都在嘗試選擇通過獨特的字體與排版風格來做出品牌聲明。在一些場景下,透過排版能達到更好的說明。
(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 年可以看到更多結合柵格突破的方式,與元素重疊的網頁設計組合,但在使用時,記得始終要牢記移動端的體驗!
(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 效果來作為產品宣傳渲染,如:運動鞋,運動裝備,包裝設計等等。
(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插畫
讓畫畫成為一種樂趣