趋势总体来说还是跟着技术走的。以前2G、3G网络受限于传输速度,那时候流行的是像素设计,然后慢慢的支持更大的图片,到现在3D设计、视频动画设计流行起来,这背后很多都是依赖于技术的升级,硬件的升级才得以落地。
这是我们连续5年针对未来设计趋势发布预测了。在过去几年中,我们获得了非常多积极的反馈,这不断激励我们在设计领域发现和探索设计的新趋势。虽然大多数趋势都是过去一年就已经形成的,但在2020年,我们还是会有一些值得追求的新趋势。
设计趋势往往会随着技术的升级而改变。
话不多说,让我们一起探索最新最复杂的2020年设计趋势吧!
彩云注:这个标题原文是Motion和Animations,我相信很多人可能会分不清,我在这里解释一下。Motion我翻译为动效,比如Loading动画,没有任何故事性的设计;而Animations我翻译为动画,类似于动画片,是有故事性的。
在2020年,我们认为动效设计会是主要趋势,因为在几乎所有的设计领域都能用到动效,从微动效到Logo和UI,一切都在动。动画内容正在进入一个全新世界,在这个世界里,纯文字内容不再像以前那样吸引人了。
正确的动效设计可以使信息更快更准确的传达给受众。
△01.theQoosBrandIllustrationbyMinkyung;02.LegionSeason3byNickScarcella;03.Solvent-MakingCannabisBankingOpenbyBluBluStudios;04Cloudservices(animatedicons)byAlexanderBaleev;05.VIRALbyAmbreCollective,ThibaultZELLER,JonathanPlesel;06.UXC_Design2020_ProjectResearchbyDonerzozo
1.深色模式(androidQandiOS13)
深色模式会成为2020年的新趋势,Android推出了两种深色模式,分别叫ForceDarkMode和SystemDarkMode。微软抢在谷歌之前在他们的邮件应用中首先更新了深色模式,谷歌紧随其后,也在他们的Android10中的邮件应用Gmail中跟进了这个模式。
随着这一波更新的发布,许多设计师将会选择在他们的设计中使用这一模式,所以预计在未来的一年里会看到越来越多的深色模式。
2.大胆的配色
大胆鲜艳的配色在最近两年成为了一种很重要的趋势,在2020年这一趋势将会继续。这些颜色丰富,明亮,充满活力。他们既可以作为主色也可以作为辅色。
△01.EMARTUX/UIRENEWAbyPlusX,Leeboram,SabumByun,HeeJung,YoujinJeon,,BonghoChoi02NSHbySofiyaFedotova03.EldoradoCasino-MobileWebUI,AppUbyLoredanaPapp-Dinea,MihaiBaldean,MiloThemes04.mmcité+websitebyStudio9Zlín,PavelValek05.TheAutomatedHackSeries#21-25byAndreaHock06.FlipdappbyEstudioPum
3.更多的插画被应用在UI中
△01.rakenRedesignbySylvainTheyssens,AntoninCollard02.Reliefy-MedicalProjectbyMarcinPankiewiczGorzów,MioszPoarkowski03.ABUK:BookCoversDesignforAudiobookStorebySergeyValiukh,TubikStudio04.IllustrationSystemforGOLbyEstudioPum05.SmartHomeApp-IOSbyMariaOsadcha06.SkillingTrading(skilling.com)-LoredanaPapp-Dinea,MihaiBaldean
4.更多的故事性
故事,能帮助用户在产品的使用过程中,获得尽可能简单和流畅的体验。一个好的故事更容易帮助用户理解产品。为了把故事讲好,我们可以创造出一个品牌人物,赋予他人格,为他制造一些故事和冲突,最终帮助我们解决产品问题。这是在产品设计中讲好故事的基础,至于讲故事的方式,在UI和UX中都有使用,原理一样只是落地方式不同。
△01.YOGO-TripPlannerAppbyJulieTruong02.UX/UI|FooddeliveryappbyKonstantinSeredkin03.coocbycuneytsen
5.更多的微交互动效
正如我们所说,动效是今年的趋势,在UI中的表现尤为突出,也能为插画增加丰富的细节,强化信息传达,提升记忆点。
如果你是一位UI设计师但还不会在工作中用微交互,我们建议你赶紧学起来,因为在2020年的UI设计工作中,缺少了微动效,整个产品都会黯然失色。
△01.UI/UX|SmartPharmacyappbyAnastasiaM,SergeyNikonenkoUX02.Climate&Animals:ExtinctionCrisisWebsiteUI/UXbyDanielTan,DaphnieLoong03.FlyingVeggiesbyPatriciaReiners04.UKRPOSHTA.MobileappofUkraine'snationalpostbyIlonaKim05.AlarmAppfortheDeafbyTagirTikeev
6.应用视频到UI中
在2020年,信息的触达将会变得更快,而视频是最好的载体。无论是选择通过动画还是电影的方式来推广产品,视频都是任何网站或应用所必须具备的。
△Pockee–afamilybankingappbyAdamZielonko,TotoCastiglione,WiktorPótorak,IrynaKorshak,NetguruTeam,MaciejDyjak
UI设计中很重要的一个部分就是其功能性。每一个元素的设计都是基于它的目的和功能。很多人认为在设计过程中,对于视觉和功能只能二选一,但是随着技术的发展,两者可以很好的兼顾到。设计是为了让网站或应用引起用户的注意,而功能是为了让体验变得容易,目的是为了让用户更快的找到自己想要的信息。
△SkillingTrading(skilling.com)-LoredanaPapp-Dinea,MihaiBaldean
8.追求极致细节
明年我们会看到越来越少的按钮,更多的基于手势的导航。例如,Android的一个主要导航按钮「返回」,将会在Android10中正式消失。
△FLYRVisualIdentityandMarketingWebsitebyRamotion
△AlarmAppfortheDeafbyTagirTikeev
9.渐变
△01.Wavecut-IOSApplicationbyElekenAgency02.Productdesign(UX/UI)-anti-depressionappbyAnnaArutiunian03.PaulIlea-FilmScoreComposer,Producer,DJ,PerfomerbyLoredanaPapp-Dinea,MihaiBaldean,MiloThemes04.ITEXIAbyNextpageAgency,AlexSeagull,JegorWalowski
1.角色
角色设计包括需要定义出符合整个品牌概念的形象。这其中最重要的事情是,通过插画,设计师需要给角色注入强烈的个性特征。当你在App或网站中遇到虚拟助理就是角色设计的一个很好的例子。
△01.NewlyTinyThingsChildren'sPictureBookbyVuonIllustration,VinhNguyen,RongPham02.AdobexCreatefulnessbyMatéFranchi,MatthieuTarwane03.3DCharactersV2byAntonioPetitCwirko04.MalayalibyDannyJose
2.纹理
插画和纹理是一对非常棒的组合,能够创造出令人难忘的画面。你可以自己制作笔刷,也可以在素材网站上找到非常多的纹理和笔刷预设,能很方便地把你很多的创意想法和图案纹理加入插画中。
△01.JDE-CommonGroundsbyMariannaTomaselli02.Japanby饭太稀
3.扁平描边插画
在过去几年,扁平插画几乎无处不在,这个趋势将会继续,但是会有一些新的变化:在每一个元素上会画上一条细的描边。大多数设计师习惯使用一条黑色的细线描边,但其实也可以用其他颜色,颜色要比插画主色深一些。
△01.BILLYKENNY-justcameforthemusicbySANGHOBANG02.Babelia-LecturasparaveranobyMiguelángelCamprubí03.BoxingCat-FirstBloodbyFelms04.COUSCOUSSTUDIO|EXPLAINERVIDEObykhaledabdelaziz
4.轴侧图
轴测图(也叫2.5D)依然会流行,主要应用于UI设计。这一趋势发迹于虚拟货币领域,但在2019年得到了充分的发展,现在已经被广泛的应用到其他领域。
△01.CyberpunkCitybyONJO_02.FastCompany-IsometricNumbersbyArturTenczynski03&05.ISOTYPEbyMarioDeMeyer04.SlackillustrationsbyJingZhang
5.3D
随着越来越高效的软件和工具的出现,3D渲染也逐渐产生了变化。3D元素已经开始变得越来越受欢迎,因为与2D不同,它提供了更为逼真的效果。
△01.GamesCasasBahiabyMiagui02.BalancebyCabezaPatataStudio03.CastleCrashersbyMohamedChahin04.Eyoofamily3DillustrationbyBaianat05.PersonalIllustrationsVol1byPabloMarín06.APersonTravelby乱Elaine
6.超大胆的颜色
大胆的配色给插画提供了强大的表现力。这些颜色能营造出活泼的氛围,使人物脱颖而出,在背景上也给人以丰富的想象力。
△01.MuralforSTRTFDCoffeeinMoscowbyMashaShishova02.Twitter-MobileInternetMindbyLeoNatsume03.Coca-ColaSleekCansIllustrationsbyTaniaYakunova
1.3D视频
△CyberpunkCitybyONJO_,VisualDesignArtS
△StatesofMatter#3:MontagebyJuanGarcíaSegura
2.视频+动画插图(也叫混合媒体)
拍摄的视频,生动的插图,还有静止的照片,把这些结合在一起会产生意想不到的惊喜。2D或3D插图能够创造出令人难忘的视频,从几条线的动画到3D中的真实人物,甚至是现实生活中并不存在的复杂视觉效果。
△Coppel/BacktoschoolbyPlentyStudio
△PWRbyAnaHoxha,EdvinaMeta
3.2D动画——介绍性视频
△FreelivebyStudioInfografika,SergeySadowski,AnastasiaAlterka,ArsentiyLesnik,YuriyArmstrong,ArinGood,GeorgeVald,MaximTleubaev
△ESN-RailwayPackagebyAndresHertsens,SquarefishStudio
4.动态Logo
△CuppabyVictoriaNg02-07.MotionBeastLogomachine.LogoanimationsbyMotionDesignSchool,VíctorVillamarín,BogdanDumitriu,Logomachine.net,AlexanderKuznetsov,ZackLee,DenysSiurin,StanislavMarchenko,LizavetaTsareva,SupremusLevenus,AntonFomin,EmileKhafizov,AchHadda
5.2D与3D的混合动画
这种趋势并不新鲜,但绝对值得一提。通过一整套软件流程,将2D与3D的动画结合到了一起。(彩云注:比如可以用c4d+ae组合的软件制作流程)
△OlofStormChannelOnYoutube
1.在平面设计中运用3D元素
虽然在平面设计领域主要是用2D元素来呈现的,但3D元素的加入可以为画面增加了更多的视觉体验。3D元素可以是插画,动画或者字体等形式。
△01.PortraitsbyFernandoDomínguezCózar02.NASA|SpaceAgebyStudio—JQ03.NASAXBBC|UnnaturalWorldbyStudio—JQ
2.双色
少即是多,这几个字非常完美的诠释了这一趋势,在其中设计师运用大胆的元素,优雅而又对比强烈。这种趋势非常适合印刷,如果颜色过多,印刷费用和技术要求也更高。
△01.WinterOpen'18byKinotoStudio,RominaRios,LucGeoffroy02.SynticatebyStepanSolodkov03.TIGERINAMUSEUMbyde_formstudio,norademeczky,enikoderi04.LetteringSeriesIXbyRafaelSerra
3.欧普艺术
欧普艺术是抽象的,很多著名的作品只有黑白两色。通常,它们给观众的印象是动感,神秘,闪烁或抖动,膨胀或扭曲的。
这种趋势是以静态的画面,但能给人动感的视觉印象。如果想在印刷海报中实现这种「动态图形」,这是最合适的方法。
△01&02TokyoBlendsFilmFestivalbyMercedesBazan,AdobeLive03.Posters—VolIbyXtianMiller
4.平面设计中应用插画
插画在所有设计领域都非常重要,所以平面设计中也能表现良好。2D插画在最近几年极为流行,在2020年以后,将继续受设计师喜爱。
△01.NAHELU-PLAKATYbyEwelinaGska02.CATbaranddanceclub/2019bykissmiklos,EszterSarah
5.动态海报
动画无处不在,我们在设计的各个领域都能找到它们,在一些线上海报中也有使用到。动画混合了2D和3D元素,效果非常棒。
△01.FestivalMetroMetrobyBzoing,VirginieBédard02.FailingWindowsbyPierreKleinhouse,OhadZivony
6.复古科技风(赛博朋克)
赛博朋克是80年代出现的一种趋势,但在好莱坞发行那个时代的电影又重新出现。随着《怪奇物语》系列的成功,这股浪潮又开始流行起来。
△01.CocktailsanddreamsbyGjorgjiDespodov02.CINEMAXbyJeisonBarba03.StrangerThings(Netflix.com)
7.瑞士平面风格,达达主义,包豪斯
△01.Swissposter01(typographyterms)byMehmanMammedov02.YellowVisionvol.3byViolaine&Jeremy
8.大面积连续的色彩空间
大面积连续的色彩空间将会在明年大为流行,它们大胆的排版及搭配,可以在平面设计,产品设计以及UI中找到。
△01.SynticatebyStepanSolodkov02.HavaianasBrandedContentbyJohannVernizzi03.Kekkil—BVBbyKurppaHosk
9.极简主义
极简主义强调设计只使用必要元素,用简单有限的颜色和形状来设计出一个难忘的画面。放弃任何多余的元素,所有的设计内容都聚焦于每一个目的。为了打造出一个极简主义的设计,需要使用尽可能多的留白,一个简单的配色方案和一些最基本的几何形状。
△01.Heimmagazine,n.3bySashaYaguza02.AndreiGheorghe-DADA-Publishingbymoodleybrandidentity
科技正在用智能设备和全新的理念给我们的生活带来革命性变化。这些新技术使得设计师们已经开发出了符合当前趋势的新功能。人工智能,机器学习,虚拟现实和增强现实正在影响着设计师们的思维方式和创作方式。
1.增强现实的移动应用
随着苹果和谷歌推出的各种AR开发平台,ARKit和ARCore,很明显,整个世界都将转向增强现实技术。
许多大的品牌已经开始在他们的应用中采用这些技术,而那些还没有这样做的,必须认真考虑如何让用户体验这种新的交互方式。
有一些AR交互形式可以创建非常直观的应用。第一种是直接把应用界面放在手机内,另一种是把ARUI与周围的环境相互关联。最常用的交互之一是当UI与对象关联并通过扫描特定的内容来触发,这个操作的结果是把界面中的某一个元素链接到现实世界中的一个特殊标记上。
有关更具体的人工智能规则,可以去阅读下苹果公司编著的规范,这个规范旨在提供身临其境的体验,能将虚拟物体与真实世界无缝的融合在一起。
2.AI,机器语言,聊天机器人,虚拟助手
聊天机器人是一种软件,它通过听觉和文本的方式进行交互。这些程序经常设计成模拟人类进行对话,尽管在2019年,它们还远远不能通过「图灵测试」。
人们还不习惯跟人工智能聊天,所以设计师和开发的一大部分工作就是简化过程并建立信任。他们需要帮助人们理解这个系统可以做什么,以及如何使用。
在AIML(人工智能标记语言)中设计和编写机器人脚本是一个优秀的UX设计师的魔力之处。
大多数使用聊天机器人的公司都选择用一个助手来演示如何面对人工智能。以下是一些在用户界面中使用聊天机器人的品牌:Spotify、Starbucks、MasterCard、Sephora、Lyft、PizzaHut。
3.VR
大多数人将VR与游戏产业联系在一起,这是有原因的,但当所有主要的科技公司都在开发VR工具包和应用的时候,我们可以肯定地说,我们在不久的将来可以发现使用和享受这项技术的新方法。VR已经在教育,医疗,旅游,房地产或建筑领域得到应用。
4.语音用户界面
语音用户界面(VUI)使人与计算机的语音交互成为可能,它使用语音识别来理解说话,然后用文本转化为语音的流程来播放回答。语音命令设备(VCD)是由语音用户界面控制的设备。
在过去的一年中,40%使用互联网设备的人每月至少使用一次语音助手,这一数字比去年增加了10%。
1.包装上的图案
在一个过度饱和的包装市场中,很难创造出引人注目的新产品,所以设计师回到原点,期望创造出能让产品在拥挤的零售货架上脱颖而出的包装图案。几何图形,花卉,浪漫或单色图案是任何产品包装的大胆选择。
△01.FlyingGoatCoffeebyNicoleLaFave02.VITASPAforskinbyDWYW03.ChocolatePackagingDesignbyarithmetic04.100Hand-drawnseamlesspatternsandshapesbyArsenySamolevsky
2.包装上的插画
插画一直是包装设计中的一个强大元素。通过这些插画能让用户更好的理解产品背后的故事,插画已经存在了几十年,很有可能它们永远都是一股潮流。
△01.BriggsOriginalbyHeeJaeKim02.VelvetCoffeCupsbyAntonMalishev,OhCarola03.Waste-NotKitchen—BrandCreationbyTried&TrueDesign04.HomeSweetSushiKidsbySavvyAgency,MarianaSpark05.CervezaMaleantebyAntonay
3.留白
如今,极简主义已经是设计中的一个基本原则。它以留白替代了任何无用元素。这种趋势带来了干净的设计,也让字体得以突出。
△01.ASCENTEssentialOilbyYu-ChienLin,HuangWun-Siang,ChiTaiLin02.RebrandingconceptforBodriPincészetbyKristófGáthi
4.单色和双色
只使用一种或两种颜色似乎是限制了设计的发挥,但却可以创造一个强大的视觉识别系统。只使用一种或两种颜色,可以让产品保持一个极简主义的外观,放弃一切多余的元素。其结果就是得到一种精致,优雅,赏心悦目的产品。
△01.ZerbetSorbetbyCailinGiles02.BaileyBrewbyEdHallSydney,EkaterinaLeontyeva,BoazSuen
5.大胆的颜色
大胆的颜色和渐变在2020年依然是一股强大的趋势,使用好颜色你可以创造出难忘的产品。
△01.MinimalismandHedonism:MillenniumBrandRedesignbyFabulaBranding;02.TattooMallbyOpenmintStudio,EkaterinaTeterkina,DimaJe,YegorKumachov;03.OrganicabyLarissaKendrik,GabrielSchatzmann;04.VIZOU-ReadingGlassesbyStudioChapeaux,AxelDomke;05.PackagingforFlavouredPistachiosbyMilaKatagarova
6.注重细节
△01.HYWILDEbyChadMichaelStudio02.AMSTELKARGOIPAbyCaparodesigncrew;02.BigIslandCoffeeRoasters-EspressoBitesbyFarmDesign
7.包装里讲故事
到2020年,各个品牌将不得不重新思考产品和包装。品牌必须讲故事,帮助顾客体验到产品的精髓。这可以通过在包装上的视觉设计来实现。
△01.BeakPickbyBackboneBranding02.ColoreatbyBackboneBranding
1.粗体
粗体字设计是一个极为重要的设计趋势,将能代替图片成为主要的元素。新颖的字体设计能在网页设计和平面设计中发挥作用。
△01.EirikLyngbyErikHerrstrm02.Bauhaus_100(x3)byBunkerType(JesúsMorentin);02.UCCACenterforContemporaryArtBeijingbyBruceMauDesign(BMD)elleMaréchal
2.小写字母
△01.AuteaBranding&WebDesignbyMichaMarkiewicz02.YamadaiFoodCorporationCIbyMasaomiFujita/tegusuInc.03.AqualityBrandingbyHkanFidan
3.自定义字体
虽然这种自定义的版式已经不算新鲜,但我们会看到这种趋势越来越多的出现在设计中,尤其是在Logo和海报中。这种做法在大品牌中更为常见,因为生产一种专用字体可能相当贵,但设计师其实可以对现有字体进行小的调整,结果就可以做到非常独特。
△01.Think8GlobalInstitutebyBlokDesign02.ZINEZ//designperiodicalbyBarbaraKatona,Media&DesignDepartmentEger03.TYPEDESIGN'19byTRüFCreative04.CakotypefacebyViolaine&Jeremy
4.动态字体
就像我们前面说的,动画在设计中真的是无处不在,所以我们也会在字体中发现它的身影。动态字体在屏幕上会用一些小的形变和移动进行设计。这个简单的技术设计字体,给观众留下记忆点。
△01&02.GrafikabyGimmickStudio.03&04.AugmentedReality&MotionTypographybyAlexSlobzheninov
5.堆叠字体
△01.L'OmbyAtipusBarcelona02.JournalbyGemmaMahoney03.postercollection|vol.8byRomanPost04.SMLXLbyMelissaBaillache,MatGroom,JasonLittle
1.AdobeSpark
这三个设计应用允许用户创建和设计可用于企业,教育,社交媒体等领域的视觉内容。Spark图库可以突出显示使用者所做的不同项目。使用这些应用的时候,用户可以导入和搜索图片。
2.Procreate
Procreate是SavageInteractive为iOS开发并发布的绘画app。针对iPad而设计,适合初学者到专业人士使用。
它提供了超过130个逼真笔刷,多图层功能,有混合模式,遮罩,4k分辨率导出,自动保存以及其他许多经典应用都有的工具。它的缺点在于编辑,渲染文本和矢量图形的能力有限。
3.AdobeXD
AdobeXD是一款为网页和app而设计的矢量工具,由Adobe开发并发布。它有Windows和mac版本,在iOS和Android上都有可以预览的工具。XD可以支持网页原型和制作简单的交互行为。