最新ui設計趨勢_10個最新且有希望的UI設計趨勢

最新ui設計趨勢

重點 (Top highlight)

Recently, I’ve spent some time observing the directions in which UI design is heading. I’ve stumbled across a few very creative, promising and inspiring trends that, in my opinion, will shape the UI design in the nearest future.

最近,我花了一些時間觀察UI設計的發展方向。 我偶然發現了一些非常有創意,有希望和鼓舞人心的趨勢,我認為這將在不久的將來塑造UI設計。

Here are the 10 trends based on my observations:

以下是根據我的觀察得出的10種趨勢:

Neuomorphism examples
Dawid Tomczyk, Ui8net (IG)Dawid Tomczyk ,Ui8net(IG)

1.新 神經同態 (1. New Neuomorphism)

You’ve read it right! Neuomorphism is evolving and, I guess, it’s here to stay (whether you like it or not). It didn’t last long in its initial form, but it is changing towards more sophisticated and accessible direction. It’s almost like skeuomorphism, but with a fresh, modern, more aesthetic vibe.

您已經讀對了! 神經同質化正在發展 ,我猜想它會一直存在(無論您是否喜歡)。 它最初的形式并沒有持續很長時間,但是它正在朝著更加復雜和易于訪問的方向發展。 它幾乎類似于擬態,但具有新鮮,現代,更美的氛圍。

Soft gradients examples
Left to right: Dominik Bednarz, Mufidul.design (IG), Halolabteam, Ariuka_dsgn (IG), Sajon007 (IG)
從左到右:Dominik Bednarz,Mufidul.design(IG),Haolabteam,Ariuka_dsgn(IG),Sajon007(IG)

2.軟漸變 (2. Soft gradients)

Gradients are not going anywhere! In fact, I’m seeing a lot of them, as backgrounds and on UI elements, such as buttons, cards and graphs.Mixing more than two colors to create a colorful blurry background is also a thing!

漸變無處不在! 實際上,我在背景和UI元素(例如按鈕,卡片和圖形)上看到了很多 混合兩種以上的顏色以創建多彩的模糊背景也是一件事情!

Geometry examples
Left to right: Victor.niculici (IG), Sun, Ashik, Interfacely.net, Halolabteam
從左到右:Victor.niculici(IG),Sun,Ashik,Interfacely.net,Halolabteam

3.幾何元素 (3. Geometric elements)

Both used as main background or theme, or just a detail to make the design look more interesting — geometric elements are getting more and more attention. They are often mixed to create a mosaic — and the result looks really cool!

兩者都用作主要背景或主題,或者只是用作使設計看起來更有趣的細節-幾何元素正越來越受到關注。 通常將它們混合在一起以創建馬賽克 -結果看起來非常酷!

Pastel backgrounds examples
Left to right: Emy Lascan, Zerotoone.de, DesigningUI.com, jajadesign (IG), Flowstudio.
從左到右:Emy Lascan,Zerotoone.de,DesigningUI.com,jajadesign(IG),Flowstudio。

4.柔和的背景 (4. Pastel backgrounds)

I have to say I love this trend. 🥰 I’ve seen a lot of astounding, lightweight, aesthetically pleasing designs with very delicate, bright pastel color schemes.It makes the designs look very modern, non-intrusive, fresh and delightful, in which content plays the main role, and everything else is just a subtle background.

我必須說我喜歡這種趨勢。 🥰我已經看到了許多驚人的,輕巧的,美學上令人愉悅的設計,以及非常精致,明亮的柔和配色方案。 它使設計看起來非常現代,不打擾,清新而令人愉悅,其中內容起著主要作用,其他所有內容都只是微妙的背景。

Illustration examples
Left to right: batcz (IG), tranmautitram (IG), Purrweb_design (IG), Izmahsa (IG), tranmautritram (IG)
從左到右:batcz(IG),tranmautitram(IG),Purrweb_design(IG),Izmahsa(IG),tranmautritram(IG)

5.插圖和3D (5. Illustrations and 3D)

Illustrations are still a craze. Different styles, different color schemes, more or less abstract, so they match the product’s characteristics. Not only flat, but also imitating the 3D look. I believe they are a nice change after all these years of using stock images for every single digital project on earth! I give a few tips on how to create a simple illustration here:

插圖仍然很流行。 不同的樣式,不同的配色方案或多或少是抽象的,因此它們與產品的特征相匹配。 不僅平坦,而且模仿3D外觀。 我相信這些年來,對于地球上的每個數字項目都使用庫存圖像,這是一個不錯的改變! 我在此處給出了一些有關如何創建簡單插圖的提示:

Abstract shapes examples
Left to right: Vladimir Gruev, c.sen_ (IG), Eddie Lobianovsky, cmarixtechnolabs (IG)
從左到右:弗拉基米爾·格魯夫(Vladimir Gruev),c.sen_(IG),埃迪·洛比亞諾夫斯基(Eddie Lobianovsky),cmarixtechnolabs(IG)

6.抽象形狀 (6. Abstract shapes)

Used for backgrounds and for different UI elements. They make the interface look more “organic” and playful, which I believe is a good thing. Edit the simpliest shapes (square, oval) with pen tool, play with different border-radius, try different colors/gradients, and you may end up with a very interesting outcome. Or just save yourself a few minutes and try the simple but amazing tool called Blobmaker.

用于背景和不同的UI元素。 它們使界面看起來更“有機”和好玩,我認為這是一件好事。 使用鋼筆工具編輯最簡單的形狀(正方形,橢圓形),使用不同的邊框半徑,嘗試不同的顏色/漸變,您可能會得到非常有趣的結果。 或者只是節省幾分鐘時間,然后嘗試一種名為Blobmaker 的簡單但出色的工具

Dark mode examples
Left to right: UXdesignlabs (IG), dragonlee_design (IG), JIANGGM, reyiands (IG), Saepul Rohman
從左到右:UXdesignlabs(IG),dragonlee_design(IG),JIANGGM,reyiands(IG),Saepul Rohman

7.暗模式 (7. Dark mode)

Dark mode is a color-inverted version of the interface, to make it more accessible at midnight hours. Since I am a typical night owl, I often use dark modes to swipe through my favorite apps before going to sleep. When creating a dark mode, remember to keep the right contrast between different elements and typography.

暗模式是界面的顏色反轉版本,以使其在午夜時分更易于訪問。 由于我是典型的夜貓子,因此我經常在睡覺前使用深色模式在喜歡的應用程序中滑動。 創建暗模式時,請記住在不同元素和版式之間保持正確的對比。

Elements at an angle examples
Left to right: Hype4.com, nickelfoxstudio, purrweb_design (IG), Vadim Drut, UI8net
從左到右:Hype4.com,nickelfoxstudio,purrweb_design(IG),Vadim Drut,UI8net

8.某個角度的元素 (8. Elements at an angle)

Not only used for Dribbble shots, but also as a way to present different content on websites in a more non-standard way. It somehow makes the content looks more interesting and eye-catching. How to quickly achieve this effect? First, make a collage of elements at 0° degrees. Make them one group. Then, change the group angle (from 30° to 50°) and voila! This way you don’t have to change the angle of every single element by hand.

不僅用于Dribbble拍攝,還用作以非標準方式在網站上呈現不同內容的方式。 它使內容看起來更有趣和引人注目。 如何快速達到這種效果? 首先,對0°度的元素進行拼貼。 使他們成為一組。 然后,更改組角度(從30°到50°),瞧! 這樣,您不必手動更改每個元素的角度。

Soft shadows examples
Left to right: Cuberto, Fireart Studio, Dogstudio, Hype4.com, Prakhar Neel Sharma
從左到右:Cuberto,Fireart Studio,Dogstudio,Hype4.com,Prakhar Neel Sharma

9.柔和的陰影 (9. Soft shadows)

Another favorite trend of mine. Soft shadows make the UI looks more in-depth. The effect is often very subtle but aesthetically pleasing. Shadows, in general, make certain UI elements more “clickable”, and they help to differentiate the hierarchy between content. You can learn how to do them here:

我的另一個最喜歡的趨勢。 柔和的陰影使UI看起來更深入。 效果通常非常微妙,但在美學上令人愉悅。 通常,陰影使某些UI元素更“可單擊”,并且它們有助于區分內容之間的層次結構。 您可以在此處了解如何進行操作:

Simple typography examples
Left to right: andreisimon.design (IG), Shakib Ali, Felixlesoeuf (IG), Glebich (IG), Tranmautritram (IG)
從左到右:andreisimon.design(IG),Shakib Ali,Felixlesoeuf(IG),Glebich(IG),Tramautritram(IG)

10.簡單的厚字體 (10. Simple, thick typography)

I was never a fan of thin fonts, (ugh, the iOS7 era) so I am happy to see this trend go away. Right now I’m observing the usage of thicker, simple in form (almost square-looking), readable fonts. They make the interface look extra modern and polished. If you searching for a similar one to use, try Poppins, Montserrat (free) or Gilroy, Sofia Pro, Proxima Nova (paid).

我從不喜歡瘦字體(在iOS7時代),所以我很高興看到這種趨勢消失了。 現在,我正在觀察使用更粗,更簡單的形式(幾乎為正方形)的可讀字體 。 它們使界面看起來更加現代和優美。 如果您要尋找類似的商品,請嘗試Poppins , Montserrat (免費)或Gilroy , Sofia Pro , Proxima Nova (付費)。

Have you seen any other trend worth acknowledging? Let me know down in the comments!

您是否看到其他值得肯定的趨勢? 讓我在評論中知道!

你喜歡這篇文章嗎? 😊 (Did you like this article? 😊)

I just released a >📚 UI DESIGN BOOK 📚<I 🖋 write about design and I’m a 👩🏻?🔧 co-founder/lead designer at HYPE4 design-driven software agency!

我剛剛發布了>📚 UI設計圖書 📚<我🖋 寫的設計 ,我在👩🏻🔧共同創始人/首席設計師HYPE4設計驅動的軟件代理!

Raised fist emojis
UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women),這是一個巴西組織,致力于通過采取行動,賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/10-newest-and-promising-ui-design-trends-929562b25ad6

最新ui設計趨勢

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274410.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274410.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274410.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Lists

動態數組&#xff0c;可以存儲不同數據類型 >>> a [spam, eggs, 100, 1234] >>> a [spam, eggs, 100, 1234] 和string一樣&#xff0c;支持索引&#xff0c;&#xff0c;* >>> a[0] spam >>> a[3] 1234 >>> a[-2] 100 >>&…

學習 axios 源碼整體架構,打造屬于自己的請求庫

前言這是學習源碼整體架構系列第六篇。整體架構這詞語好像有點大&#xff0c;姑且就算是源碼整體結構吧&#xff0c;主要就是學習是代碼整體結構&#xff0c;不深究其他不是主線的具體函數的實現。本篇文章學習的是實際倉庫的代碼。學習源碼整體架構系列文章如下&#xff1a;1.…

404 錯誤頁面_如何設計404錯誤頁面,以使用戶留在您的網站上

404 錯誤頁面重點 (Top highlight)網站設計 (Website Design) There is a thin line between engaging and enraging when it comes to a site’s 404 error page. They are the most neglected of any website page. The main reason being, visitors are not supposed to end…

宏定義學習

【1】宏定義怎么理解&#xff1f; 關于宏定義&#xff0c;把握住本質&#xff1a;僅僅是一種字符替換&#xff0c;而且是在預處理之前就進行。 【2】宏定義可以包括分號嗎&#xff1f; 可以&#xff0c;示例代碼如下&#xff1a; 1 #include<iostream>2 using namespace…

學習 koa 源碼的整體架構,淺析koa洋蔥模型原理和co原理

前言這是學習源碼整體架構系列第七篇。整體架構這詞語好像有點大&#xff0c;姑且就算是源碼整體結構吧&#xff0c;主要就是學習是代碼整體結構&#xff0c;不深究其他不是主線的具體函數的實現。本篇文章學習的是實際倉庫的代碼。學習源碼整體架構系列文章如下&#xff1a;1.…

公網對講機修改對講機程序_更少的對講機,對講機-更多專心,專心

公網對講機修改對講機程序重點 (Top highlight)I often like to put a stick into the bike wheel of the UX industry as it’s strolling along feeling proud of itself. I believe — strongly — that as designers we should primarily be doers not talkers.我經常喜歡在…

spring配置文件-------通配符

<!-- 這里一定要注意是使用spring的mappingLocations屬性進行通配的 --> <property name"mappingLocations"> <list> <value>classpath:/com/model/domain/*.hbm.xml</value> </list> </proper…

若川知乎問答:2年前端經驗,做的項目沒什么技術含量,怎么辦?

知乎問答&#xff1a;做了兩年前端開發&#xff0c;平時就是拿 Vue 寫寫頁面和組件&#xff0c;簡歷的項目經歷應該怎么寫得好看&#xff1f;以下是我的回答&#xff0c;閱讀量5000&#xff0c;所以發布到公眾號申明原創。題主說的2年經驗做的東西沒什么技術含量&#xff0c;應…

ui設計基礎_我不知道的UI設計的9個重要基礎

ui設計基礎重點 (Top highlight)After listening to Craig Federighi’s talk on how to be a better software engineer I was sold on the idea that it is super important for a software engineer to learn the basic principles of software design.聽了克雷格費德里希(C…

Ubuntu下修改file descriptor

要修改Ubuntu下的file descriptor的話&#xff0c;請參照一下步驟。&#xff08;1&#xff09;修改limits.conf  $sudo vi /etc/security/limits.conf  增加一行  *  -  nofile  10000&#xff08;2&#xff09;修改 common-session  $ sudo vi/etc/pam.d/common…

C# 多線程控制 通訊 和切換

一.多線程的概念   Windows是一個多任務的系統&#xff0c;如果你使用的是windows 2000及其以上版本&#xff0c;你可以通過任務管理器查看當前系統運行的程序和進程。什么是進程呢&#xff1f;當一個程序開始運行時&#xff0c;它就是一個進程&#xff0c;進程所指包括運行中…

vue路由匹配實現包容性_包容性設計:面向老年用戶的數字平等

vue路由匹配實現包容性In Covid world, a lot of older users are getting online for the first time or using technology more than they previously had. For some, help may be needed.在Covid世界中&#xff0c;許多年長用戶首次上網或使用的技術比以前更多。 對于某些人…

IPhone開發 用子類搞定不同的設備(iphone和ipad)

用子類搞定不同的設備 因為要判斷我們的程序正運行在哪個設備上&#xff0c;所以&#xff0c;我們的代碼有些混亂了&#xff0c;IF來ELSE去的&#xff0c;記住&#xff0c;將來你花在維護代碼上的時間要比花在寫代碼上的時間多&#xff0c;如果你的項目比較大&#xff0c;且IF語…

見證開戶_見證中的發現

見證開戶Each time we pick up a new video game, we’re faced with the same dilemma: “How do I play this game?” Most games now feature tutorials, which can range from the innocuous — gently introducing each mechanic at a time through natural gameplay — …

使用JXL組件操作Excel和導出文件

使用JXL組件操作Excel和導出文件 原文鏈接&#xff1a;http://tianweili.github.io/blog/2015/01/29/use-jxl-produce-excel/ 前言&#xff1a;這段時間參與的項目要求做幾張Excel報表&#xff0c;由于項目框架使用了jxl組件&#xff0c;所以把jxl組件的詳細用法歸納總結一下。…

facebook有哪些信息_關于Facebook表情表情符號的所有信息

facebook有哪些信息Ever since worldwide lockdown and restriction on travel have been imposed, platforms like #Facebook, #Instagram, #Zoom, #GoogleDuo, & #Whatsapp have become more important than ever to connect with your loved ones (apart from the sourc…

M2總結報告

團隊成員 李嘉良 http://home.cnblogs.com/u/daisuke/ 王熹 http://home.cnblogs.com/u/vvnx/ 王冬 http://home.cnblogs.com/u/darewin/ 王泓洋 http://home.cnblogs.com/u/fiverice/ 劉明 http://home.cnblogs.com/u/liumingbuaa/ 由之望 http://www.cnbl…

react動畫庫_React 2020動畫庫

react動畫庫Animations are important in instances like page transitions, scroll events, entering and exiting components, and events that the user should be alerted to.動畫在諸如頁面過渡&#xff0c;滾動事件&#xff0c;進入和退出組件以及應提醒用戶的事件之類的…

Weather

public class WeatherModel { #region 定義成員變量 private string _temperature ""; private string _weather ""; private string _wind ""; private string _city ""; private …

線框模型_進行計劃之前:線框和模型

線框模型Before we start developing something, we need a plan about what we’re doing and what is the expected result from the project. Same as developing a website, we need to create a mockup before we start developing (coding) because it will cost so much…