2021設計趨勢:UI/UX篇

編輯導語：轉眼間，2020年就要結束了。這一年許多東西都放慢或者停滯了，正如2020年的設計趨勢沒有發生太大的變化，但是2020年的許多因素卻會對2021年產生很大的影響。接下來，本文作者為我們預測總結了2021年的主要趨勢。

After months of quarantine and isolation brought on by the global pandemic, we look at 2021 with high hopes and cautious optimism.

由於全球疫情大流行，在經歷了幾個月的檢疫與隔離之後，展望2021，我們依然滿懷希望和樂觀。

Being such an atypical year, in which time seems to have stopped, there have been no major changes in the trends of 2020, which will continue to dominate in 2021, in fact we can say that some of the trends were influenced by the pandemic and the needs it created in all domains.

時間似乎停在了這樣一個特殊的年份，2020年的設計趨勢沒有主要變化，仍然會持續到2021年；事實上一些設計趨勢被疫情大流行所影響，並且它所創造的需求幾乎涉及每一個領域。

In the third quarter of the year began to appear, very shy, new influences whose dominance will be felt gradually in 2021.

在今年第三季度，這些影響開始顯現出來並將在2021年逐漸顯現。

Even if most trends from 2020 will continue to influence the design scene next year, we will try to keep only those that will dominate in 2021.

儘管2020年的設計趨勢會繼續影響接下來的一年，我們會嘗試保持哪些在2021年的主要趨勢。

一、Main Trend of 2021

3d is definitely the trend of 2021, because it is found in all branches of design, and the novelty is that it is starting to be used in UI, which until now has been dominated by flat design.

3D無疑是2021的設計趨勢，每一個設計細分領域都有它的身影。新奇的是它開始在扁平化所主導的UI領域被應用。

The more and more frequent adoption of 3d is also due to the fact that we have at hand some new software, very easy to use, some even free (Figma for example, it is free for freelancers and has some plugins that make the use of 3d user friendly )

3D越來越頻繁的應用，事實上是由於我們擁有觸手可及的新軟體，這些軟體易用，甚至一些是免費的，例如Figma對自由職業者免費，並且擁有方便製作3D效果的插件。

How many of us were not discouraged when they opened complex programs like C4D, 3D Studio Max or Maya? Now with software like Figma or Dimensions CC, any designer can quickly learn how to create beautiful 3d scenarios. These softwares are perfect for a 3D beginner.

當我們打開複雜的軟體如C4D、3DMax和Maya，我們很多人都會感到無助。現在，有了像Figma，Dimensions CC這樣的軟體，任何一個設計師都能學會創作漂亮的3D作品，這些軟體非常適合3D初學者。

Another factor that will lead to the more frequent use of 3d is the imminent release of Apple’s Big Sur, the new operating system for Mac. At the time of writing, Apple Big Sur is not yet released and does not even have an announced release date. Big Sur is currently in Beta. The Public Beta version (there is a developer Beta as well) became available on August 6th.

另外一個能導致3D更應用更普及的是即將發布的蘋果新作業系統Apple’s Big Sur，在寫這篇文章時還沒有發布，甚至沒有公布發布日期，Big Sur 目前是測試版本，公開的測試版本8月6號可提供，同時有一個開發者版本。

You’re probably wondering how the design world will be influenced by this release. Well, Apple showed us a sneak preview to have a glimpse at how the new Mac interface will look like. The most important changes in design are the introduction of 3d elements (icons), areas with transparency and the abandonment of grey shades.

你可能想知道Apple’s Big Sur的發布將如何影響設計界，蘋果給我們展示了一個預覽版本關於新的Mac界面會是什麼樣，設計中最重要的改變是3D元素（icon）的應用，拋棄了灰色陰影，應用透明效果。

二、Ui & IxD Design

1. App vs Mobile web

App與移動端網站

We can agree that in 2021 a website that is not 「mobile first」 is completely obsolete. In most branches of business the best experience comes if you are using an application, so these businesses focus on their development and implementation.

我們認為2021年不是移動優先的網站絕對是過時的，在大多數業務領域，最好的體驗來源於你在使用的應用程式，所以這些企業專注於應用程式的開發和實施。

Online stores, social media platforms, trading platforms, etc., will choose to migrate their customers to apps for a better customer experience and to increase their conversions.

為了更好的客戶體驗和交流，線上商店，社交媒體平臺，交易平臺等會選擇把顧客遷移到App。

Mobile Website of Mobile App? How do you know which one is better for you or your customer?According to studies, users prefer mobile apps more than mobile websites.

移動端網站和APP，對你和你的顧客來說，你如何知道哪一個更好呢？研究顯示用戶更喜歡移動App。

Platforms that are paying attention to web based services, will find themselves at a disadvantage, both in how they present themselves to their users and in development as well.

那些把重心放在移動網站服務的平臺，會發現不論是向用戶展現自身還是發展方面都處於劣勢。

According to Forbes.com, mobile users spend almost 90% of their time on mobile apps and just 10% of the time on browsers/ mobile websites.Apps have disadvantages as well, like higher development and maintenance costs.

根據Forbes.com，移動用戶在App花費了90% 的時間,而在瀏覽器和移動網站的花費僅僅為10%。當然App同樣有劣勢，如更高的研發和維護成本。

2. Colors on White Surfaces

色彩與留白

Colors are one of the most important visual elements of UI design. They can highlight your content and reinforce your brand’s style. A color theme should be designed to be harmonious. It should help the UI elements and surfaces to be easily distinguished from one another.

色彩是UI設計中最重要的視覺元素，能強調內容和加強品牌識別度；一個色彩主題設計應該是和諧的，它能幫助UI元素和外觀很容易彼此區分開。

The surfaces are the tiles, cards, sheets and components that are placed on top of the background. These cards are white and have a smooth shade that creates a floating effect.. Usually the background is white or a very light grey.

外觀包括標題、卡片、表單以及置於背景層上的元素。這些卡片是白色的並且有柔和的陰影過度，這樣能創造一種懸浮效果；通常背景是白色的或者是淺灰色。If you don’t want to spend time

choosing your color palette, there are websites that can help you by generating beautiful and vibrant mixes.

如果你不想在選擇色彩板選擇上花費太多時間，這些網站能幫助你生成漂亮的豐富的色彩組合。例如： https://flatuicolors.com/ or https://colorsupplyyy.com/app/

3. Widget sizing

組件大小

IOs 14, is here and it’s bringing some new changes that will affect all UI Design.Widgets come now in three sizes: small, medium, and large and you can smartly rearrange them between app icons. A designer must create a widget icon in all 3 styles, so the user can choose which one to use.

IOS 14帶來的一些新改變會影響整個Ui設計，組件有小、中、大3個尺寸，你能迅速地在APP圖標之間排布，設計師必須設計3種尺寸風格的組件，因此用戶能選擇其中的任意一種使用。

Each size of the widgets lets you display a different amount of information, so you need to be clear and display the right content. Remember that larger widgets allow you to show more data and information.

每一種尺寸呈現的信息量是不一樣的，所以你需要清晰的展現正確的內容，更大的組件能呈現更多的信息和數據。

4. Animations & Interactions

動畫與交互

Animations are an important part of an app’s design and user experience. These days, a design seems unfinished and static if it doesn’t incorporate an animation.

動畫是APP設計和用戶體驗中的重要部分，當下，如果一個設計是靜態沒有相應動畫，似乎就是一個半成品。

There are many ways to create them and here are some of them:JSON (stands for Javascript Object Notation) takes your images & animations and renders them into a code.

有很多方法製作動畫，這裡就有一些：JSON能將你的圖片與動畫渲染成代碼。

The advantage of JSON animations is that it is a fraction in size compared to a GIF and it supports full transparency ( no BG needed).

JSON動畫的優勢是，相比於GIF它比較小並且支持全透明。

A couple of years ago, the guys at Airbnb have created a tool named Lottie, that makes small animations really easy, using JSON files. Lottie is an open-source library for iOS, Android, and React Native that renders animations in real time. If you haven’t tried it yet, you should definitely give it a chance.

幾年以前，Airbnb的一個傢伙創造了一個名為Lottie的工具，這個工具製作小動畫非常容易。Lotties對於IOS、安卓和RN都是開源的庫，能實時渲染動畫。如果你還沒有用過，應該嘗試一下。

5. Custom made 3d Icons

3D圖標

So far we think everyone has realized that 3d is an important category in design. Now it influences the Ui segment more than ever. 3d icons are the new UI trend in 2021 so if you are bored with the flat icons, which have dominated the Ui scene in the last decade, then you can try the 3d ones. The final project will look fresh and modern.

到目前為止我認為大家都認識到3D是設計的重要部分，現在它對UI的影響超過以往任何時候。3D圖標是2021年的設計趨勢，因此如果你已經受夠了主宰UI設計近10年的扁平化圖標，可以嘗試3D圖標了，這會比較新穎和時尚。

三、Illustrations

插畫

1. Thin Outline in Illustrations

插畫——插圖中細輪廓呈現

We predicted this trend last year in our Trend Guide. Illustrations in 2020 were dominated with this particular style of drawing and will continue to be in 2021 as well. Because this trend seemed to take off especially in the last semester of this year, we decided to call it the main trend in the category of illustrations for 2021.

在上一年的趨勢指導中我們它進行了預測。2020年的插畫被這種特殊的插畫所主導，並且會持續到2021年，因為在今年上半年這種趨勢似乎已蔚然成風，我們決定把它作為2021年的插畫主要趨勢。

2. 3D

The fact that 3d has taken by storm the design scene in recent years is no surprise. 3D has evolved a lot and is presented with some very polished illustrations that impress the viewer.

事實上，近幾年3D在設計中風起雲湧的運用並不奇怪，3D改變了很多，光滑的外觀形象很是給觀看者以深刻印象。

The colors used are strong or pastel, depending on the message they want to convey. The difference from previous years is that 3d illustrations are more minimalist, as if inspired a little by the simplicity of flat design.

使用的色彩表現力強還是粉色調，這要根據所要傳達的信息進行運用。與去年不同的是，3D插畫形象更小，似乎是受到簡潔的扁平化設計的啟發。

四、Motion Design & Interactions

動效與交互

1. TikTok & Instagram Reels

Reels are a short and entertaining video content format. These short videos can be used as effective marketing strategies. With the launch of Instagram Reels, an alternative to TikTok, big companies have started using this tool to promote themselves and grow their reech.

Reels是短娛樂視頻內容形式。這些短視頻能被用作有效的市場營銷策略，隨著TikTok的替代品Instagram Reels的發布，大公司已經開始使用這個工具來做為自己企業做宣傳並擴大影響。

These videos are no longer just made as a pastime for teenagers, but the big brands pay agencies to deliver such reels to them. If you’re already using social media for your business, it may be worth giving Instagram Reels or Tiktok a try.

這些視頻不再僅僅為了青少年的消遣而製作，大品牌向宣傳商支付費用從而向年輕人推廣他們的宣傳視頻。如果你的企業已經在用社交媒體，那麼Instagram Reels或TikTok也許值得一試。

2. Animated Logos

動效LOGO

Animated logos have been present for several years but now they are very visible and have taken by storm everything that means branding, so they deserve a mention this year as well.

動效logo已經出現了很多年，但是現在非常盛行並且用盡一切能傳達品牌，因此今年也應當受到重視。

A logo is the first thing we see when entering an app, so it should be memorable using only a symbol or a typeface. Combining the logo with a smooth and sleek animation, you can achieve a memorable outcome for any company.

我們使用APP第一眼看到的就是logo，logo應該是易記憶的，且只用一個象徵性符號或字體。logo融合流暢自然的動效，使得任何一個公司都能深入人心難以忘卻。

這些趨勢都在意料之中？，還是……你有不同的看法？

翻譯自：Milo 2021設計趨勢

譯者：蟲二無二；公眾號：看摹設

本文由 @蟲二無二 翻譯發布於人人都是產品經理，未經作者許可，禁止轉載。