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

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

由于全球疫情大流行，在經(jīng)歷了幾個月的檢疫與隔離之后，展望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年的設(shè)計趨勢沒有主要變化，仍然會持續(xù)到2021年；事實上一些設(shè)計趨勢被疫情大流行所影響，并且它所創(chuàng)造的需求幾乎涉及每一個領(lǐng)域。

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

在今年第三季度，這些影響開始顯現(xiàn)出來并將在2021年逐漸顯現(xiàn)。

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年的設(shè)計趨勢會繼續(xù)影響接下來的一年，我們會嘗試保持哪些在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的設(shè)計趨勢，每一個設(shè)計細分領(lǐng)域都有它的身影。新奇的是它開始在扁平化所主導(dǎo)的UI領(lǐng)域被應(yīng)用。

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越來越頻繁的應(yīng)用，事實上是由于我們擁有觸手可及的新軟件，這些軟件易用，甚至一些是免費的，例如Figma對自由職業(yè)者免費，并且擁有方便制作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.

當(dāng)我們打開復(fù)雜的軟件如C4D、3DMax和Maya，我們很多人都會感到無助?，F(xiàn)在，有了像Figma，Dimensions CC這樣的軟件，任何一個設(shè)計師都能學(xué)會創(chuàng)作漂亮的3D作品，這些軟件非常適合3D初學(xué)者。

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.

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

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的發(fā)布將如何影響設(shè)計界，蘋果給我們展示了一個預(yù)覽版本關(guān)于新的Mac界面會是什么樣，設(shè)計中最重要的改變是3D元素（icon）的應(yīng)用，拋棄了灰色陰影，應(yīng)用透明效果。

二、Ui & IxD Design

1. App vs Mobile web

App與移動端網(wǎng)站

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年不是移動優(yōu)先的網(wǎng)站絕對是過時的，在大多數(shù)業(yè)務(wù)領(lǐng)域，最好的體驗來源于你在使用的應(yīng)用程序，所以這些企業(yè)專注于應(yīng)用程序的開發(fā)和實施。

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.

移動端網(wǎng)站和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.

那些把重心放在移動網(wǎng)站服務(wù)的平臺，會發(fā)現(xiàn)不論是向用戶展現(xiàn)自身還是發(fā)展方面都處于劣勢。

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.

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

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設(shè)計中最重要的視覺元素，能強調(diào)內(nèi)容和加強品牌識別度；一個色彩主題設(shè)計應(yīng)該是和諧的，它能幫助UI元素和外觀很容易彼此區(qū)分開。

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.

外觀包括標(biāo)題、卡片、表單以及置于背景層上的元素。這些卡片是白色的并且有柔和的陰影過度，這樣能創(chuàng)造一種懸浮效果；通常背景是白色的或者是淺灰色。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.

如果你不想在選擇色彩板選擇上花費太多時間，這些網(wǎng)站能幫助你生成漂亮的豐富的色彩組合。例如：?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設(shè)計，組件有小、中、大3個尺寸，你能迅速地在APP圖標(biāo)之間排布，設(shè)計師必須設(shè)計3種尺寸風(fēng)格的組件，因此用戶能選擇其中的任意一種使用。

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.

每一種尺寸呈現(xiàn)的信息量是不一樣的，所以你需要清晰的展現(xiàn)正確的內(nèi)容，更大的組件能呈現(xiàn)更多的信息和數(shù)據(jù)。

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設(shè)計和用戶體驗中的重要部分，當(dāng)下，如果一個設(shè)計是靜態(tài)沒有相應(yīng)動畫，似乎就是一個半成品。

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動畫的優(yōu)勢是，相比于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的一個家伙創(chuàng)造了一個名為Lottie的工具，這個工具制作小動畫非常容易。Lotties對于IOS、安卓和RN都是開源的庫，能實時渲染動畫。如果你還沒有用過，應(yīng)該嘗試一下。

5. Custom made 3d Icons

3D圖標(biāo)

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是設(shè)計的重要部分，現(xiàn)在它對UI的影響超過以往任何時候。3D圖標(biāo)是2021年的設(shè)計趨勢，因此如果你已經(jīng)受夠了主宰UI設(shè)計近10年的扁平化圖標(biāo)，可以嘗試3D圖標(biāo)了，這會比較新穎和時尚。

三、Illustrations

插畫

1. Thin Outline in Illustrations

插畫——插圖中細輪廓呈現(xiàn)

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.

在上一年的趨勢指導(dǎo)中我們它進行了預(yù)測。2020年的插畫被這種特殊的插畫所主導(dǎo)，并且會持續(xù)到2021年，因為在今年上半年這種趨勢似乎已蔚然成風(fēng)，我們決定把它作為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在設(shè)計中風(fēng)起云涌的運用并不奇怪，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.

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

四、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是短娛樂視頻內(nèi)容形式。這些短視頻能被用作有效的市場營銷策略，隨著TikTok的替代品Instagram Reels的發(fā)布，大公司已經(jīng)開始使用這個工具來做為自己企業(yè)做宣傳并擴大影響。

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.

這些視頻不再僅僅為了青少年的消遣而制作，大品牌向宣傳商支付費用從而向年輕人推廣他們的宣傳視頻。如果你的企業(yè)已經(jīng)在用社交媒體，那么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已經(jīng)出現(xiàn)了很多年，但是現(xiàn)在非常盛行并且用盡一切能傳達品牌，因此今年也應(yīng)當(dāng)受到重視。

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應(yīng)該是易記憶的，且只用一個象征性符號或字體。logo融合流暢自然的動效，使得任何一個公司都能深入人心難以忘卻。

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

翻譯自：Milo 2021設(shè)計趨勢

譯者：蟲二無二；公眾號：看摹設(shè)

本文由 @蟲二無二 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。