首页

上半年最热门的新拟物设计趋势是如何演变的?

资深UI设计者

新拟物化——Neumorphism ,这么说可能不容易理解,但如果说「新拟物风格」,想必 UI 界的设计师们就知道这股「风头」,在2020年刮的多么凶猛了。

乌克兰设计师亚历山大·普卢托 (Alexander Plyuto) 在 Dribble 平台发布了一张 UI 作品《Skeuomorph Mobile Banking》,由于该作品使用了拟物化的设计风格,令人耳目一新,导致了作品的热度持续飙升,并登上了平台 Popular 榜首。Dribble 的评论区直接炸开了锅,大家纷纷讨论。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ 普卢托的《Skeuomorph Mobile Banking》,获得了3000多次喜欢

随后一位评论者杰森·凯利(Jason Kelley)在评论中将 New Skeuomorphism 「新拟物化」组合得到的 Neuomorphism 称为「新拟物」 ,并决定去掉「 o 」,于是新设计词汇「 Neumorphism 」便产生了。之后大家便用此做 Tag ,为自己的新拟物化设计作品打标签上传。

此风格的出现也给一直流行的扁平化设计添加了新的展现形式。今年2月初,三星召开 Galaxy Unpacked 活动,为宣传新设备而发出的邀请函,便应用了新拟物化。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ 凸出的部分,用来比喻新机型的卖点

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

什么是新拟物风格?

想要了解新拟物的由来,就必须知道拟物的概念。拟物又被称为拟物化,或是现实主义(Realism),概括的说其主要目标是使用户界面更有代入感,降低人们使用的学习成本,产生熟悉亲和的情感联系。

A skeuomorph, or skeuomorphism is a design element of a product that imitates design elements functionally necessary in the original product design, but which have become ornamental in the new design. Skeuomorphs may be deliberately employed to make the new look comfortablyold and familiar.

via:en.wikipedia.org/wiki/Skeuomorph维基百科上关于拟物化的释义

Apple 苹果公司最早提出了拟物化的设计概念,通过模拟现实物体的纹理、材质来进行界面设计,当时的 UI 设计师们都为拟物化设计「痴狂」。苹果创始人乔布斯也非常推崇拟物化,他认为:「通过拟物化,用这种更加自然的认知体验方式,可以减少用户对电脑操作产生的恐惧感」。不妨来回忆下曾经拟物化的 IOS 界面:

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ IOS 5系统中的相机展开状态(拟物化的镜头)

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ 拟物化的精美 ICON

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ IOS 6系统中,被精细刻画的录音机(底部指针也很惟妙惟肖)

而新拟物则是拟物的变体,在拟物的基础上改变了图形的样式,让设计元素看起来更有真实感,不再是精细的模拟,更像是从界面中「生长」出来。设计师 Michal Malewicz 以卡片的形式,将新拟物和质感设计(Material Design)对比,阐述了二者在实现时的差别。

新拟物卡片给人呈现的是一种无缝隙的「闭合」感,由界面中凸起;而质感设计卡片,则是漂浮状,阴影向四周发散,没有边界限制;二者的光影效果也非常明显,新拟物偏柔和,质感设计则相反,非常凸显物体本体。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

Michal Malewicz 还标注了新拟物卡片的背景、阴影和高光的色值,整体色调比较接近。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

拟物化风格的结构由背景色+高光色+阴影组成,掌握了基本规律,就可以通过改变按钮、卡片的参数进行调整变换。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ 形状、阴影参数的不同,实际效果也有区别

新拟物风格在UI层面的设计表现及趋势?

新拟物也经常被拿来与扁平化比较,因为拟物和扁平化是两个相对的概念。其实在苹果创造的设计系统的早期界面其实是非常拟物风的,但系统从 IOS 7开始,才转向扁平的设计风格。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

随着 AR、VR 技术的进步,其实对于真实物理环境,或者说对显示效率的提升之后,我们对接近物理环境的设计更热衷了。比较有代表性的就是 Google 推出的 Material Design System,它基于人们去模拟真实的物理世界的样子,进而在数字世界里展现我们对于真实世界的一个反馈后,这样的设计流程和逻辑,也让我们的设计更真实,更具有感染力。当然也不止 Google 一家发布了这样偏拟物化的设计风格。

从美学角度来看,其实新拟物化抛弃了之前很多拟物化里不必要的冗余,比如一些阴影、细节的繁琐设计,更偏近现在先进科技发展的设计风格。比如 Windows 推出的 Fluent Design System ,正迎合了未来的 AR、VR 技术广泛普及后的设计环境,希望打造一个先趋的设计系统。

在 Fluent Design System 提到的特点有:Lignt、Depth、Motion、Material、Scale。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

1. Lignt

光照,它指的是点击或 Hover 的动作上面加入光照的效果,或是像柔和的光源洒落在空间中,可以去反应物体本身的反光质感,它和 Material Design 强调的光影的扩散的光影效果是不同的概念。

2. Depth

深度,其实它的概念从 Material Design 开始就已经被强调了,但是 Fluent Design System 希望是用更多的方式去呈现,比如井深的模糊效果,视差滚动的动态效果,物件彼此的大小与位置等等。

3. Motion

动效,其实它想强调的动态效果更接近真实的世界,更强调细腻的变化,比如李安的电影「比利·林恩的中场战事」,这个电影拍摄的帧数与以往传统电影不一样,看起来的感觉会更加的流畅自然,你体验过之后会很难回去之后那种电影呈现效果了。而 Windows 强调的 Motion 也是一样的,比起这种单调的动作,它也会去强调每个设计对象彼此之间的动态效果的时间差,看起来会更加的流畅自然。而且与真实空间中前景后景的物理概念一样,不同的时间差会更容易凸显出想要凸显的主题效果,也会更加的聚焦。

4. Material

材质,其实在 Windows 提出的 Fluent Design System 里面,它会出现大量的模糊,透明的背景。也就是模拟毛玻璃的材质感。通常也会代入一些微光源的效果。除了能够吸睛,吸引你的视觉之外呢,其实在 AR、VR 的界面上面感知空间中的物件是很重要的,所以模糊的背景的利用可以在不影响观看内容情况下,还能起到背景暗示的作用。其实毛玻璃效果在 Windows 系统中已经被运用到了,但是由于当时的效能以及干扰视线的问题仅仅运用在了一些小区域,而这次 Fluent Design System 的就成为了最强烈的视觉焦点,其实同样的 iOS 和 Mac iOS 系统里面在最近的更新也大量使用了模糊效果。

6. Scale

缩放,在视觉上眼前的物体大,后面的物体小,所以缩放也是来营造空间感、纵深感,尺度感的这样一个设计特性。

新拟物风格在设计上的应用体验?

1. 界面设计上的特点

常应用于图标、卡片或按钮元素设计上,背景板多为干净的纯色;界面平滑,没有明显的颗粒感;

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ HYPE4《 Neumorphic Bank Redesign in Dark and Light mode 》

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ Filip Legierski 《 Banking App 》

按钮的外边框均设置了阴影、渐变效果,突出立体感;

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ Samson Vowles《 Neumorphic dark ui kit components 》

在视觉处理上,凸出的按钮为可点击的状态,凹进去则代表已选中。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ Emy Lascan《 Freebie Neumorphic UX UI Elements 》

2. 被吐糟的缺点

层次结构弱

Whale Lab 观察发现,新拟物弱化颜色区分而强调近远景阴影布局,所以整体色彩都相近,除了在个别的位置加入其它颜色点缀,用户识别起来也会迷茫;而卡片、按钮都使用了阴影,高光效果,层次结构不明确,也很难带来流畅的体验;

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ 新拟物风格,Filip Legierski《 Neumorphism UI Elements 》

对比度和视觉限制

明显的对比是界面设计的重要原则。由于新拟物风格具有各种阴影色调和角度,可单击的内容与不可单击的内容区域在哪里不是很好区分。根据产品的功能和要求,每个应用神经同构的产品都可以具有自己的UI阶段规则;但是由于阴影,角度和浮动水平的不同,由于缺乏一致性,迷失方向的可操作项,「神经变形」会给用户带来混乱,最终为残疾用户造成使用障碍。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

如同下面这个例子,按钮状态已点击和未点击的一个效果,由于受压状态的反差太小,则看起来的效果也没有什么不同。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

增加开发难度

更为严重的是,不少设计者在使用 Neumorphism 进行界面开发过程中,也遭遇到了不少局限。要实现这个风格,主要有两个方式:

卡片、按钮切图,每个状态(Normal、Hover、Pressed)都要裁切,导致资源库图片量过载;

代码实现,这个风格的实现效果是对元素增加两个不同方向的投影,但需要开发对每个元素添加投影,样式代码增多,工作量浩大。

网站neumorphism.io,可以快速生成 Neumorphism UI 。设置按钮的参数值,就能看到多样的新拟物化效果,非常神奇!

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

新技术、事物、趋势的出现,起初都会给人们带来焦虑甚至是恐慌。不管是拟物还是扁平,Whale Lab 觉得若是绝对化的去推崇某一种,都是错误的,尽管苹果放弃了拟物进入扁平化,也不一定代表扁平就是最好,毕竟二者始终相辅相成。不敢否认,新拟物风格在今后是否变得「真香」,但对于设计师来说,从用户体验、产品出发的优秀设计,都值得被认可与尊敬。

文章来源:优设    作者:UX辞典

2020年最值得关注的10个UI设计小趋势

资深UI设计者

编者按:这篇文章来自 UI 设计师 Diana Malewicz,她在日常工作中会非常注意 UI设计的流行趋势,而这篇总结就是她梳理总结的10个小趋势。它们更多的是偏向 UI 视觉方面,并不涉及到体验和交互。

最近我花了不少时间来观察 UI 设计的发展趋势,我偶然间注意到了不少很有意思的苗头,或者说设计趋势。我认为这些设计趋势,能够在不久的将来塑造更加独树一帜的UI 。

下面是我所梳理总结出来的 10 种趋势。

1、新拟物化

的确,新拟物化是2020年处于风口浪尖的一种视觉风格,无论你喜欢不喜欢,觉得它可行不可行,它现在都已经是一个确定的、成型的风格,并且会持续存在着。

不过,新拟物化从最初诞生到现在,已经有一定的改变了,并且在向着更加复杂、完善的方向发展,有着更为良好的可访问性,开始具备更多拟物化的设计特征,但是更加新鲜、现代,并且更能渲染出独特的氛围感。

2、柔和渐变

渐变这种设计趋势正在进入两极分化的一个阶段。一方面,在视觉设计领域,一部分渐变变得更加夸张,但是在 UI 设计领域,无论是背景、UI元素(比如按钮、卡片和图形),渐变依然存在,只不过会显得更加微妙柔和。

在 UI 设计领域,还有的设计师会使用双色渐变,并且结合模糊效果,让它更加柔和。

3、几何元素

几何元素既可以作为背景来使用,也可以作为装饰细节,让你的设计越来越有趣。几何元素在最近几年受到的关注非常多,在设计上的应用也颇为广泛,甚至有人将几何元素拼接成为马赛克,最终呈现出来的视觉效果非常酷!

4、色调柔和背景

必须说,我个人是非常喜欢这种设计趋势的。我已经看到了很多令人惊艳的、轻巧且极富美学价值的背景设计,它们用明亮柔和的色彩铺满背景,展现出极强的色彩和搭配的技巧。

使用色调柔和的背景能够让整个设计都显得现代而沉静,清新,让内容真正抓住用户的注意力。

5、插画和3D元素

插画毫无疑问是非常流行的。不过,不论是配色还是视觉风格,无论是什么样的插画风格,最终的目标依然是要契合产品和 UI,所以很多插画都选择了相对扁平的风格,或者选择模拟类似3D的视觉外观。相比于每个数字项目都在使用的免费图片,插画真的是向前走出了一大步!

在这篇文章当中,我有分享在 UI 中使用插画的一些简单技巧:

6、抽象图形

和传统的规则的几何图形不同,抽象而不规则的图形可以让界面显得更加不拘一格和好玩,更通俗的来讲,就是让 UI 界面更加「有机」,我认为这是一件好事。使用钢笔工具在原始的圆形和矩形上进行编辑,尝试不同的轮廓,承载不同的颜色和渐变效果,最后生成的效果会非常有趣。如果你不想去自己绘制,可以尝试一下 Blobmaker 这个工具,能够帮你节省时间~

7、深色模式

深色模式在这2年绝对是人所共知的一个设计风尚了,如今的深色模式 UI 设计已经深入到各个不同的应用。简单来说他是整个界面配色反转之后的效果,便于用户在深夜更轻松地浏览界面信息。只不过在具体的设计实施上,深色模式远不是简单的色彩反转就可以实施的,有很多注意事项,尤其是在对比度控制上,具体可以看看下面的文章:

8、倾斜角度呈现

最初大家在 Dribbble 上会倾向于使用非标准的排版布局方式来呈现UI界面,后来这种展现方式开始逐渐在实际的设计项目中应用开来。在实际的设计当中,绝大多数情况下都会挑选30度到50度之间的倾斜角度。这种方法非常不错,可以多尝试。

9、弥散的阴影

阴影是拟物化设计当中最重要的视觉元素之一,而如今它又再次大规模流行开来了。只不过相比于之前「沉重」的阴影,柔和的弥散阴影在美学上更加令人愉悦,通常,阴影会让 UI 元素的「可点击感」更强,并且有助于区分界面中的层次结构。在这篇文章当中,我有详细说明:

10、简约加粗的字体

实际上早在 iOS 7 的时代,曾经一度流行过笔触纤细且字体宽度比较窄的字体,不过很庆幸这个时代过去了。现在所流行的字体更加讲究字体的可读性,字体的外轮廓都大体趋近于正方形,外观显得更加大气而现代。如果你正在寻找类似这样的字体,可以试试 PoppinsMontserratGilroySofia ProProxima Nova 等字体。

写在最后

这篇总结,基本上都是基于我个人对于趋势的观察和了解,在我看来,它们都有着非常强大的生命力,UI 设计的未来会更加富有希望。

文章来源:优设    作者:Diana Malewicz

2020年最值得设计们保持关注的8个UI设计趋势

资深UI设计者

快速变化的技术每年都在影响着设计趋势。作为设计师,我们需要时刻保持关注,对设计趋势拥有较高的敏感度,不断学习,扩充自己的设计技能,目的是为了跟上的市场环境。基于我的调研,经验和观察,我甄选了在2020年你将会看到的最为关键的8个UI/UX设计趋势。让我们一起来看看吧。

动效插图

插图被应用到APP中已经有很长一段时间了,它们在最近几年的演变令人印象深刻。插图作为一种非常流行的设计元素,为我们产品的整体产品增加了情感化体验。插图非常能抓人眼球,尤其是在融入动效后会显得更加的自然,将产品带入生活的气息,使得产品功能更加突出,同时也增添了更多的细节和个性。

△ Welcome to Swiggy by Saptarshi Prakash

△ Onboarding animations — Virgil Pana

另一个好处是使用动效后,能抓住用户的注意力使其能够更加沉浸在你的产品中。动效同样是讲好品牌故事,产品或者服务最有影响力的途径之一。

微交互

微交互存在与每一个网页或者app界面中。每当打开你最喜欢的那些应用时,都有机会看到它们,比如像Facebook中就有大量不同的微交互,我认为「Like」功能就是一个完美的例子。有时,我们几乎意识不到它的存在,因为它们非常的不显眼,非常自然地融到界面中去了。但是,如果当你把这些微交互移除掉的话,你又会非常快的注意并能感受到一些非常重要的东西丢失了。

△ Menu toggle close animation — Aaron Iker

△ Tab bar active animation — Aaron Iker

一般来说,在UI/UX中即使非常小和细节处的设计都可能会带来巨大的冲击力。微交互就是完美的证明,细节和对它的关注能极大的改善产品的整体体验,并让产品体验上升一个台阶。每年,新设备的发布伴随着新的机会,能给产品塑造新品牌和创造富有创意的微交互。

3D图形

3D图形设计几乎无处不在,比如在电影,游戏或者运营广告里等等。3D图形设计早在10年前就出现了然后一直在不断提升和进化。手机和web技术进展迅猛,新的web浏览器能力打开了3D设计新世界的大门,这给了设计师们在web和手机界面中创造炫酷3D设计的机会。

△ 3D flip menu by Minh Pham

△ Car health report UI by Gleb Kuznetsov

创造并整合这些3D创意设计到web和手机界面中需要特殊的技能和花费大量的工作,但这些付出会得到回报。

△ Apple AirPods Pro landing page

3D设计对于产品和服务来说,具有非常大的吸引力,例如在交互上能够支持用户360度查看产品,从而大大提升整个的产品体验。

在2020年会有更多的品牌利用3D渲染模型的产品和服务去模仿线下购物体验。

VR设计

VR技术在2019年有一个巨大的飞跃。最近的一年我们激动地看到了头戴式设备有了非常大的发展,尤其是在游戏领域。我们需要记住的是,游戏行业经常在引领着新技术的发展并落地到实际的产品设计中。研究表明,VR也不例外,在Oculus Quest于2019年推出后,许多机会为其他行业打开了大门。Facebook CEO 扎克伯格已经测试了激动人心的手部交互功能,并正式宣布将在2020年初为Quest进行更新。

△ Oculus Quest — hand interaction feature

△ PlayStation Virtual Reality Website Design by Kazi Mohammed Erfan

索尼和微软计划在2020年夏季发布他们的新设备,这就给VR技术带来巨大的机会和发展空间。

学习VR 可以阅读优设这个专题:https://www.uisdc.com/zt/vr-design

AR设计

在最近几年,我们能看到在AR(增强现实)这块有了很大的进步和惊喜。世界引领着科技公司在AR开发方面进行了巨大的投入,所以我们应该期待这项技术在2020年有更大的成长和发展。苹果公司也发布了他们自己的AR套件叫AR KIT3来帮助设计师和开发者在他们的产品中打造AR体验。

△ Apple ARKit 3 by Apple

△ Public transit app by Yi Li

△ House of Plants AR Concept by Nathan Riley

在AR空间里会有无限的机会和创意去打造一个新的品牌和激动人心的体验。为AR做UI设计会在2020年成为一大趋势,这就要求设计师们在面对创造AR产品体验前,应该去准备和抓紧学习新的工具,原型之类的知识。

学习AR 可以阅读优设这个专题:https://www.uisdc.com/zt/ar-design

新拟物化设计

一般来说,拟物化设计是指以现实风格/方式创造出来与现实中的物体相匹配的设计元素。不断发展的VR/AR技术以及在各大最流行设计平台(Dribbble,Behance等)上展示的设计作品趋势来看,预示着拟物化的回归,但这次换了个更现代,更酷略微高大上的名字叫「新拟物风」(也叫Neumorphism)。

△ Skeuomorph Mobile Banking | Dark Mode by Alexander Plyuto

△ Simple Music Player by Filip Legierski

△ Sleep Cycle App — Neumorphism Redesign by Devanta Ebison

你可能注意到了:Neumorphism代表了丰富细节和明确的一种设计风格。高光,投影,发光,这些细节非常令人印象深刻。Neumorphism风格已经鼓舞了全世界一大批的设计师创作作品,它也会成为2020年最大的设计趋势。

学习新拟物风可以阅读优设这个专题:https://www.uisdc.com/zt/neumorphism

不对称布局

最近一年我们也注意到一种不对称风格正在快速发展。传统基于「模板」的布局肯定会消失。这种设计趋势给2020年的设计带来了更多的差异化。合适的不对称风格将会在我们的作品中增多一大批不同的性格,火力以及个性,所以设计不再单纯的基于模板。

△ Limnia Fine Jewelry Grid — Zhenya Rynzhuk

△ Carine fashion store — selection screen concept — Dawid Tomczyk

当设计这种不对称风格时,设计师拥有非常多的选项以及巨大的发挥空间。但是,想设计好这种不对称风格需要大量的练习,它绝不是将元素随机的摆放在网格中,而应该小心使用和实现它们,时刻需要把用户的诉求考虑到设计中。我们并不想让用户迷失在我们的产品中,对吗?

用户故事

故事在整个用户体验中扮演着非常重要的角色。你可能经常会在着落页看到它作为品牌介绍,产品或者一个新的服务。讲故事就是利用创意的形式把信息传递给用户。这可以通过强大的视觉元素来呈现(字体,插画,高清图片,颜色,动画,交互元素)。

△ A+WQ / Young Lab Page Story of The Week Animation by Zhenya Rynzhuk

△ Free Sketch Template :: Mimini by Tran Mau Tri Tam

讲故事可以帮助产品创造出品牌和用户之间积极的情感连接。讲故事可以为你的产品创造出非常多的记忆点,让用户感受到自己就是产品或服务的一部分,他们便会更加愿意使用你的产品。话虽如此,讲故事也是一种非常有效的营销手段,它可以极大地提高你的产品/服务的销量。讲故事作为一种非常成功的手段,将在2020年继续发扬光大。

总结在2020年非常值得关注的8个设计趋势

1. 动态插图

通过把动画和插图进行结合,我们可以使得设计变得更加突出,并把它带入用户的日常生活,为产品赋予了的细节和个性化。

2. 微交互

微交互被证明是可以在当用户注意到他们是能够带来非常大的惊喜体验,它能够有效的提升整个产品的用户体验并把产品的品质提升一个等级。

3. 3D图形的应用

新的浏览器技术打开了3D图形应用的大门,能够给设计师带来非常大的创意机会去打造让人惊叹的3D图形设计应用到网页和手机APP中。

4. 虚拟现实

游戏行业将迎来新的变革,新的技术能够应用到产品设计中。

5. 增强现实

在AR空间中拥有无限的机会去创造新的品牌和令人激动的新体验。为AR技术服务的UI设计将在2020年成为主要趋势,设计师需要位为之准备并去学习新的工具,原型,当真的需要你去做一款AR应用时就需要用到。

6. 新拟物风

AR/VR技术不断发展,以及在各大流行设计平台上大量涌现的写实设计作品预示着拟物风的回归,但只是这次换了个新的更加现代化的名字。

7. 不对称布局

运用不对称布局能让设计创意变得拥有更多选项和机会。虽然,设计一个成功的不对称布局需要投入大量的练习和时间。

8. 讲故事

讲故事就是利用创意形式把信息传递给用户。讲故事是一个非常好的营销工具,可能会大大增长产品的销售额或服务。

文章来源:优设    作者:彩云译设计

2020年最全设计趋势

资深UI设计者

写在前面

过去几年中,我们的积极反应促使我们继续探索和分析主要设计领域的新趋势。尽管大多数趋势都是去年发生的变化,但到2020年,我们仍有一些新趋势值得追求。最重要的趋势是与技术有关的趋势,以及它们的发展趋势,以及它们如何影响设计领域。 


总体趋势

2020年的主要趋势动作设计与动画, 对于2020年,我们认为运动设计是主要趋势,因为我们在所有设计领域都遇到动画,从小的交互到徽标和UI,一切都在变化。动画内容正在进入现代世界,在现代世界中,书面内容没有以前那么吸引人。 动作设计正确实施后,可使广告系列的信息更快,更正确地传达给受众。

undefined

01. theQoos品牌插图由  闵庆  02  军团赛季 3由  尼克Scarcella   03.  溶剂-使大麻银行公开赛由  BluBlu工作室  04  云服务(动画图标)由  亚历山大Baleev  05.  病毒性肝炎由  昂布尔集体 ,  蒂博ZELLER ,  乔纳森Plesel  06 。  UXC_Design2020_Project研究通过  Donerzozo


目录

1. UI / UX

2.插图

3.动态图形

4.平面设计

5.基于技术的趋势 

6.包装

7.版式

8.趋势工具


1. UI / UX

1.1暗模式(Android Q和iOS 13)

暗模式是2020年的新趋势,Android引入了两种类型的暗模式,分别称为“强制暗模式”和“系统暗模式”。微软通过在其电子邮件应用程序中展示其暗模式击败了谷歌,但谷歌迅速推出了自己的针对Android 10的Gmail应用程序的暗版本模式。

有了介绍此更新的大公司,许多设计师将选择在他们的应用程序或站点中使用暗模式,因此希望在来年看到越来越多的暗模式。

undefined


1.2粗体颜色

在过去的两年(到2020年)中,强烈的色彩已成为重要的趋势。大胆的色彩丰富,明亮,甚至极富活力。它们可以是主要或次要颜色。 


undefined

01.  EMART UX / UI可再生的通过  加X,  李宝蓝 ,  Sabum卞 ,  熙荣,  尤金全度妍 ,  원 지 혜,  Bongho彩  02  NSH通过  索菲娅费多托娃   03.   埃尔多拉多赌场-移动Web UI,应用程序ü用  的Loredana PAPP-Dinea ,  Mihai Baldean ,  Milo主题  04.  mmcité+网站由  工作室9  兹林,帕维尔Valek  05.  自动哈克系列#21-25由  安德烈福  06.  Flipd应用程序通过  ESTUDIO PUM


1.3 UI中的插图

多年来,插图一直是设计中最强劲的趋势之一。插图是对概念的直观解释,可以使用户更好地理解产品背后的思想。除了一些精美的插图使这一概念独具匠心外,它们还可以更快地传达信息。

undefined

01.  海妖重新设计,以  西尔Theyssens ,  安东尼科拉德  02  浮雕-医疗项目由  马丁Pankiewicz  葛尔若,  米沃什Pożarkowski  03.  abuk:图书封面设计有声书商店到  谢尔盖Valiukh,  Tubik工作室  04.我llustration系统GOL到  ESTUDIO PUM  05 。  智能家居的应用程序- IOS到  玛丽亚Osadcha  06.斯基林贸易(skilling.com) -   Loredana酒店PAPP-Dinea ,  米哈伊Baldean 


1.4讲故事

设计中的讲故事是关于帮助用户在平台上的旅程,从而使他的体验尽可能轻松和流畅(在UX设计中)。一个好的故事可以帮助用户更轻松地了解产品。为了讲述一个故事,我们可以使用一个特别创建的角色,将这个角色赋予他个性,我们创建一个故事和一个冲突,最终由我们的产品(UI设计)解决。这是产品设计中讲故事的基础。讲故事在UI和UX中都使用,并且基于相同的原理,但实现方式有所不同。

undefined01.  余吴-旅行计划应用由  朱莉张庭  02.  UX / UI | 食品外卖应用由  康斯坦丁Seredkin  03.  COOC通过  cuneyt仙


1.5动画图形和微交互

正如我们所说,动态图形是今年的趋势,它在UI设计中也有很强的表现,它为插图增添了力量,使创意更易于吸收并保留在用户的记忆中。 

微交互在2018年成为第一流,但这一趋势值得在2020年关注。它们是UI设计中极其重要的趋势,这使基本应用程序/网站与非凡的应用程序/网站有所不同。微交互在使用户了解系统的工作原理并引导其获得更好的体验方面起着至关重要的作用。 

如果您是UI设计师,但尚未在工作中使用微交互,建议您这样做,因为到2020年,没有UI的任何UI设计都将是非常基本的。 


undefined

01.  UI / UX | 智能药房应用的   阿纳斯塔西娅中号,  谢尔盖Nikonenko UX   02.  气候与动物:灭绝危机网站UI / UX  由  丹尼尔·谭,  达芙妮龙  03  飞素食者由  帕特里夏赖纳斯  04.  UKRPOSHTA。乌克兰国家邮政局的移动应用程序,伊洛娜·金(  Ilona Kim)  05 .  Tagir Tikeev 的聋人报警应用程序


1.6用户界面中的视频

到2020年,信息必须非常快地到达用户手中,最好通过视频内容来完成。您选择通过动画或经典电影来解释产品,视频内容对于任何网站或应用程序都是必不可少的。


1.7功能

UI设计中的一个重要部分是功能,即,根据其目的和功能选择每个元素。许多人认为您必须在设计和功能之间进行选择,但是在新技术的帮助下,这两种技术可以很好地融合在一起并相互补充。设计负责引起对站点或应用程序的注意,其功能使体验变得更轻松。它使用户可以更快地找到信息。

undefined01.斯基林贸易(skilling.com) -   Loredana酒店帕普用餐 ,  迈克尔Baldean 


1.8注意细节

在UI设计中,对细节的更多关注非常重要。从按钮,图标,加载到导航到细微的细节,都可以打造出非凡的设计。随着新技术的出现,我们在UI中必须注意的细节始终在变化。

在明年,我们将看到越来越少的按钮,以及更多基于手势的导航。例如,后退按钮(Android的导航常用)在Android 10中正式消失。

undefined

01.  FLYR的视觉形象和营销网站的  Ramotion 

02.  闹钟应用聋人通过  Tagir Tikeev


1.8渐变

几年来,我们一直在谈论设计中的渐变,这种趋势在2020年将继续保持强劲,因此值得一提。新鲜的色彩是成功渐变的完美选择。它们可以用于按钮,图标,插图,甚至用于排版。

undefined

01.  Wavecut - IOS应用程序通过  Eleken局  02.  抗忧郁症的应用程序-产品设计(UX / UI)由  安娜Arutiunian 

03.  保罗回肠-电影音乐作曲家,制作人,DJ,Perfomer  通过  的Loredana PAPP-Dinea ,  米哈伊Baldean ,  米洛主题  04.  ITEXIA通过  下一页局 ,  亚历克斯海鸥 ,  Jegor Walowski


2.插图


2.1角色设计

角色设计包括定义一个支持整个概念的角色。最重要的是,通过绘图,设计师向角色灌输了强烈的个性。您在应用程序或网站中遇到的虚拟助手是角色设计的一个很好的例子。

undefined

01.  新微小的事情•儿童图画书由  Vuon插图 ,  荣阮 ,  荣范  02  的Adobe X Createfulness由  迈特弗兰基,  马蒂厄Tarwane  03。 3D人物V2由  安东尼奥·佩蒂特Cwirko  04.  Malayali由  丹尼·何塞


2.2纹理

插图和纹理很好地结合在一起,可以创造出令人难忘的构图。从粒状纹理到预制的笔触,您可以找到许多想法来为插图添加纹理,也可以手动创建它们。浏览网络时,您可以找到许多可以在插图中使用的纹理,预制笔刷和工具。 

undefined

01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 饭 太稀


2.3平面插图

在过去的几年中,我们到处都可以看到平面插图。它们仍然处于趋势中,但现在有了一个新的组成部分:对每个元素应用细线。大多数艺术家都选择使用细的黑色笔触,但也可以将其上色,使其阴影比所涉及的对象暗。

undefined

01. BILLY KENNY -刚刚为音乐通过  桑戈BANG  02 Babelia - Lecturas对维拉诺由  米格尔·安赫尔Camprubí  03.  拳击猫-第一滴血由  Felms   04.  COUSCOUS STUDIO | 解释器VIDEO  由  哈立德abdelazi ž


2.4等轴测图

是的,等轴测图仍然在这里。它们主要可以在UI设计中找到。随着人们对加密货币的兴趣不断增加,这种趋势似乎已经生效,但是在2019年它已经发展了,现在我们在其他业务领域中发现了这一趋势。

undefined

01.  庞克市由  温祚_  02  FastCompany -等距号由  阿图尔Tenczynski  03和05.  抗体亚型由  马里奥·德•梅耶尔  04.  松弛插图由  京张 


2.5 3D

随着效率越来越高的软件和工具的出现,3d渲染已逐渐发生变化。3D插图非常受欢迎,因为与2D插图不同,它提供了更逼真的图像。

undefined

01. 游戏巴伊亚之家由  Miagui  02  天平 由  卡韦萨Patata工作室  03.  城堡毁灭者由  穆罕默德Chahin  04.  Eyoo家庭3D插图由  Baianat  05.  个人插图第1卷由  巴勃罗·马林 06.  一个人旅行通过  乱伊莱恩


2.6超大胆的色彩

大胆的颜色非常适合插图。它们营造出欢乐的氛围,使角色脱颖而出,并在图像背后展现故事。

undefined

01.  玛莎·希肖娃(Masha Shishova)摄于莫斯科的  STRTFD咖啡壁画  02. 作家- 利奥·夏目(  Leo Natsume)的移动互联网思想  03.  可口可乐圆罐插图由塔尼亚·雅库诺娃(  Tania Yakunova) 


3.动态图形


3.1 3D视频 

在2020年,无法想象没有3D设计的运动。设计的这个分支打开了一个世界的大门,在这个世界中,只有想象力是极限。我们可以在广告,电影,游戏,广告活动等中找到3d。

undefined

01.  庞克市由  温祚_ ,  视觉设计艺术的影响  


3.2视频+动画插图(混合媒体)

拍摄的视频,动画插图以及有时是静止的照片的结合可以产生非凡的效果。2d或3d插图可创建令人难忘的视频,从几行运动到3D真实人物甚至是现实生活中不存在的复杂视觉效果。

undefined

undefined

01.  Coppel /回到学校通过  大量工作室  02  PWR  由安娜·霍查,  Edvina元 


3.3 2D动画-说明性视频

2D动画专注于创建故事和角色,并在创作过程中使用矢量。当您想要广告系列或产品的说明性视频时,2D可能是理想的选择。在一个总是忙碌而又没有时间阅读的世界中,说明性视频对于任何网站都是必不可少的。

undefined

01.  Freelive  由  工作室Infografika ,  谢尔盖·萨多斯基 ,  阿纳斯塔西娅Alterka ,  Arsentiy Lesnik宾馆 ,  尤里·阿姆斯特朗 ,  阿林好,  乔治VALD ,马克西姆Tleubaev  


3.4动画徽标

您已经了解到动画是2020年的“必备”,为了保持竞争力,我们还必须将它们集成到徽标设计中。许多公司已开始对其徽标进行动画处理,以引起人们的注意。这也是徽标设计的主要趋势。

undefined


01.  杯茶由  维多利亚伍  02 - 07.  运动野兽✕Logomachine。动画标志的  运动设计学院,  维克托Villamarin的,  波格丹·杜米特留,  Logomachine .NET ,  亚历山大·库兹涅佐夫,  扎克李,  丹尼斯Siurin ,  斯坦尼斯拉夫·马尔琴科,  莉扎薇塔Tsareva ,  Supremus Levenus ,  安东·福明,  埃米尔Khafizov ,  胆碱哈达           


3.5混合动画2D和3D集成

这一趋势不是一个新趋势,但绝对值得一提。混合动画就是使用为此创建的特定软件将2D与3D结合在一起。 

undefined


4.平面设计


4.1平面设计中的3D 

尽管2d垄断了设计的这一分支,但3d可以为最终概念添加额外的内容。3d渲染可以采用插图,动画或字体的形式。

undefined

01.  画像由  费尔南多·多明格斯Cózar  02.  NASA | 太空时代的  工作室-JQΔ   03.  美国宇航局X BBC | 不自然世界的  工作室,JQΔ


4.2双色

精益求精的概念可以完美描述这一趋势,设计师在其中创造出大胆的元素,并带有优雅的手感和强烈的对比。这种趋势是创建更易于访问的打印的理想选择,因为某些打印技术如果颜色更多,则价格会更高。

undefined

01.  冬季公开赛'18由  Kinoto Studio,  Romina Rios,  Luc Geoffroy  02 Synticate©由  斯捷潘索洛德科夫   03.  TIGER在博物馆由  de_form工作室,  诺拉demeczky ,  的Eniko DERI  04.  刻字系列IX由  拉斐尔·塞拉


4.3光学感知艺术

欧普艺术作品是抽象的,有许多知名的黑白作品。通常,它们给观看者留下动感,隐藏的图像,闪烁和振动的图案或肿胀或翘曲的印象。(来源:wikipedia.org)。

这种趋势给人以动静的印象,但是以一种静态的方式。如果要实现在印刷海报中移动图形的想法,这是最合适的方法。

undefined

01 02  东京电影节共混物由  梅赛德斯巴桑 ,  的Adobe住  03.  海报-第一卷由  Xtian米勒


4.4平面设计中的插图

插图在设计的所有领域都非常重要,因此我们在图形设计中也可以找到它们。2D插图在现在已经非常流行了几年,并且即使在2020年,也将继续成为设计师的最爱。 

undefined

01.  GOOSE赫尔-海报由  Ewelina鹅  02  CAT酒吧和舞厅/ 2019至  kissmiklos,  Eszter萨拉 


4.5动画海报

动画无处不在,我们在设计的各个领域都可以找到它们,当然它们也存在于数字海报中。动画可以将2D与3D混合在一起,效果令人着迷。

undefined

01  节地铁地铁由  Bzoing,  维吉尼贝达德  02.  失败的Windows由  皮埃尔Kleinhouse,  辖Zivony 


4.6复古合成波

复古合成波是一种在80年代出现的趋势,但一旦好莱坞开始发行该十年的电影后便开始重新出现。随着《陌生人事物》系列的成功,这一潮流再次开始流行。

undefinedundefined

01.  鸡尾酒和梦想通过  Gjorgji Despodov  02.  CINEMAX由  杰森巴尔巴  03.奇怪的事情(Netflix.com)


4.7瑞士设计,达达主义,包豪斯

20世纪最重要的图形设计运动始终是最好的设计师的灵感来源。这些样式值得一提,因为它们始终是的,遵循它们所施加的规则几乎不可能在设计中犯错误。总的来说,这些运动强调版式,无衬线字体(Helvetica于1957年在包豪斯舞台上创建),几何形状,简单的线条,体积和颜色。

undefined


01.  瑞士海报01(版式方面)由  Mehman Mammedov  02.  黄视VOL.3通过  维奥莱纳齐名


4.8大的不间断彩色空间 

大型,不间断的色彩空间将在明年成为非常流行的趋势。它们与大胆的字体搭配使用,可以在图形设计,产品设计以及ui中找到。

undefined

01.  Synticate©由  斯捷潘索洛德科夫  02  Havaianas人字品牌内容由  约翰Vernizzi  03.  Kekkilä-BVB的  Kurppa Hosk


4.9超极简主义

极简主义的设计仅使用必需品,非常有限的调色板和简单的形状来打造令人难忘的身份。放弃多余的元素,使所有设计项目都有目的。要创建超极简主义的设计,您需要使用尽可能多的白色/负空间,简单的配色方案和一些基本的几何形状。

undefined

01.  Heim杂志,第3页,  Sasha Yaguza撰写  02.  Andrei Gheorghe- DADA-通过  moodley品牌标识发布


5.基于技术的趋势

技术通过智能设备和崭新的理念正在彻底改变我们的生活。这些新技术使设计师已经开发出进入当前趋势的新功能。人工智能,机器学习,虚拟现实和增强现实正在影响设计师的思维方式和创作方式。


5.1增强现实的移动应用

随着苹果和谷歌推出自己的AR开发平台ARKit和ARCore,很明显,整个世界将面向增强现实技术。 

许多大品牌已经在其应用程序中采用了这项技术,而那些尚未采用这种技术的公司必须认真考虑如何使用户在这种新现实中与之交互。


有一些AR交互可用于创建直观的应用程序。第一个是将应用程序固定在手机屏幕上时。另一个是AR UI与用户周围的环境相关联时。最常用的互动方式之一


是当UI与对象相关并通过扫描特定项目触发时。该动作将数字动画连接到特殊的“标记”。 

有关更具体的AI规则,请阅读Apple指南,以提供“将真实的虚拟对象与现实世界无缝融合的沉浸式,引人入胜的体验”。

undefined


5.2 AI,ML,聊天机器人和虚拟助手

聊天机器人是一种 通过听觉或文本方法 进行  对话的  软件。[1]  此类程序通常旨在令人信服地模拟人类作为对话伴侣的行为,尽管截至2019年,它们仍远远不能通过  图灵测试。[2]  资料来源:维基百科


人们还不习惯与AI对话,因此设计师(和开发人员)的工作很大一部分是使流程简单并建立信任。他们需要帮助人们了解系统可以做什么以及如何使用它。


使用AIML(人工智能标记语言)设计和编写脚本聊天机器人,是出色的UX设计人员的魔力可以发挥作用的地方。

大多数使用聊天机器人的公司都选择说明助手来为AI做鬼脸。以下是一些在其UI设计中使用聊天机器人的品牌:Spotify,星巴克,万事达卡,丝芙兰,Lyft,必胜客。

undefined


5.3 VR

大多数人将VR与游戏行业联系在一起是有充分理由的,但是随着所有大型科技公司开发VR套件和应用程序,我们可以肯定地说,我们将发现使用和享受这项技术的新方法。VR已经用于教育,医疗保健,旅游,房地产或建筑。 

undefined


5.4语音用户界面(VUI)

语音用户界面(VUI)使用语音识别  来理解语音命令和问题,通常是文本到语音以播放答复,从而  使语音与计算机的人机交互成为可能  。语音命令设备(VCD)是受语音用户界面控制的设备。资料来源:维基百科 

去年,使用互联网连接的设备的人中有40%每月至少使用一次语音助手,与去年相比,这一数字增加了10%。


6.产品设计


6.1包装中的图案

在过饱和的包装市场中,很难创造出可以脱颖而出的新产品,因此设计师要回到根源并创造出使产品在拥挤的零售货架上脱颖而出的样式。几何,花卉,浪漫或单色图案是任何产品包装的大胆选择。

undefined




01.  飞行山羊咖啡由  妮可LaFave    02.  VITA SPA皮肤  由  DWYW   03.  巧克力包装设计由  算术   04.  100手绘无缝的图案和形状   的  Arseny Samolevsky


6.2包装插图

插图一直是包装设计中的重要元素。通过他们,我们可以讲述一个故事,使目标受众可以更好地理解该概念背后的历史。平面插图已经存在了数十年,并且很可能会一直处于流行趋势。

undefined





01. 布里格斯原件由  熙宰金  02  天鹅绒咖啡杯  由  安东Malishev,  呵呵卡罗拉  03.  废物不包括厨房-品牌打造的  尝试和真正的DESIG ň04  家,甜蜜的寿司儿童  通过  精明的机构,  马里亚纳星火  05.  Cerveza塔Maleante通过  Antonay 


6.3留白

极简主义是设计的基本原则,而今天它又是新事物。它放弃了设计中不需要的所有内容,并用负空间代替了它。这种趋势将功能带到了最前沿,并专注于简洁的设计,使版式脱颖而出。

undefined

01.  香味精油 由Y u型简林,  黄恶嗯-祥  ,  智泰莲 02.  重塑品牌理念,为BodriPincészet由  克里斯托夫Gáthi


6.4单色和两种颜色

首先,在调色板中仅使用1或2个色调似乎有些限制,但它们可以创建非常强烈的视觉识别感。仅使用一种或两种颜色,就可以保持简约的外观,放弃所有多余的东西。结果是精美,高雅的产品令人赏心悦目。

undefined

01. Zerbet冰糕由  才林贾尔斯  02.  贝利啤酒  由  埃德大厅 悉尼,  叶卡捷琳娜Leontyeva ,  波阿斯孙


6.5大胆的颜色

大胆的颜色和渐变仍然是非常强烈的趋势,这种趋势将在2020年持续。使用这些颜色,您可以创建令人难忘的产品。

undefined

01.  极简主义和享乐主义:Fabula Branding 重新设计了  千年品牌

02  纹身商城  通过  Openmint工作室,  叶卡捷琳娜Teterkino ,  烟,  叶戈尔Kumachov 

03.  Organic  by  Larissa Kendrik 和  加布里埃尔· 沙茨曼

04.  VIZOU -老花眼镜  的  工作室开头语,  阿克塞尔杜马克 

05.  包装的调味开心果由  米拉Katagarova


6.6注意细节(受新艺术风格启发)

注重细节的包装比以往任何时候都更受欢迎。设计师选择这种趋势是因为它赋予了产品真实性。这种趋势使我们以现代方式思考经典。 

undefined

01.  HYWILDE由  查德·迈克尔·工作室  02  AMSTEL KARGO IPA通过  卡帕罗设计船员

03.  大岛咖啡烘焙-咖啡咬伤的  农场设计


6.7包装中的讲故事

到2020年,品牌将不得不重新考虑其产品和包装。品牌必须讲述一个故事,以帮助客户体验产品的本质。这可以通过为包装创建视觉和叙述身份来实现。

undefined

01.  喙接通过  骨干品牌推广   02.  Colorea用t  骨干品牌


7.版式


7.1粗体印刷

粗体印刷术是设计中的重要趋势,它取代了图像作为主要元素。勇敢的排版可以在网页设计和图形设计中发挥作用。

undefined

01.  埃里克·林格(Eirik Lyng),作者:  埃里克· 赫斯特雷(ErikHerrström);  02.  包豪斯(Bauhaus_100)(x3),作者:  BunkerType(JesúsMorentin)

03.  UCCA当代艺术中心北京由  布鲁斯·莫设计(BMD)  ,耶勒马雷夏尔 


7.2小写

越来越多的应用程序使用完全小写的文本,非常易于阅读,并且完美地融入了简约和现代的设计中。在明年,我们绝对必须关注这一趋势。

undefined

01.  Autea品牌和网页设计由  米哈尔Markiewicz  02  山大食品公司 CI由  臣藤田/ tegusu公司 03.  Aquality品牌的  哈坎Fidan的


7.3自定义字体 

尽管自定义字体没有什么新意,但我们将看到这种趋势越来越多地出现在设计中,尤其是在徽标和海报中。这种做法在大品牌中更常见,因为生产专用字体可能会非常昂贵,但是设计人员可以对现有字体进行少量调整,结果可能会非常独特。 

undefined

01.  Think8全球研究院通过  勃洛克设计  02  ZINEZŐ//设计周期由  芭芭拉·卡托纳 ,  媒体与设计系埃格尔  03.  式设计'19通过  TRÜF创意  04.  Cako字体由  维奥莱纳齐名


7.4动力学排版

就像我们说的那样,动画在设计中无处不在,因此在排版中也很常见。动态字体使用小的和简单的交互作用来移动和移动屏幕上的字体。这种简单的技术可以处理文本并创建最终产品,该产品保留在查看器的内存中。

undefined

undefined

01和02.  Grafika  ,  Gimmick Studio设计  。03&04.  增强现实与动作排版,作者:  Alex Slobzheninov


7.5堆叠字体 

堆叠文本可能是一种现代化的解决方案,可以吸引您注意基本信息。我们可以在网页设计,应用程序设计和图形设计中看到这种趋势。

undefined




01.  L'嗡通过  Atipus巴塞罗那  02  期刊由  杰玛马奥尼  03.  海报收藏| VOL.8由  罗马发表  04. SMLXL由  梅丽莎Baillache,  垫新郎,  杰森·利特尔


8.趋势工具


8.1 Adobe Spark

Adobe Spark是Adobe Systems  开发的  用于移动和Web的媒体创建应用程序的集成套件  。[1]  它包含三个独立的设计应用程序:  Spark Page,  Spark Post和  Spark Video。(来源:WIkipedia) 


他的免费Adobe Spark Web应用程序可与Spark Page,Spark Post和Spark Video  iOS移动应用程序同步  ,从而使用户可以从任何设备创建,编辑和共享其视觉故事。


[3]  这三个设计应用程序允许用户创建和设计可用于企业,教育,社交媒体营销人员等的视觉内容。[4]  Spark Gallery突出显示了使用该应用程序的人们所做的不同项目。使用这三个应用程序时,用户可以导入图片或搜索图片。

undefined


8.2繁殖

 Procreate是 由Savage Interactive针对iOS开发和发布的   用于  数字绘画的  光栅图形编辑器 应用程序。针对iPad的艺术可能性而设计  ,并且适合从初学者到专业人士的艺术家。


 它提供130多种逼真的画笔,多层,  混合模式,  蒙版,   过程视频的4K分辨率导出  ,  自动保存以及许多其他经典和原始的  数字艺术  工具。除光栅图形外,该软件的编辑和渲染文本和矢量图形能力有限  。(来源:Wikipedia)Procreate是2018年App Store上最畅销的应用程序。

undefined


8.3 Adobe XD

Adobe XD是  由Adobe Inc开发和发布的   用于  Web应用程序  和  移动应用程序的基于矢量的 用户体验设计工具。它适用于  macOS  和  Windows,尽管有适用于iOS  和  Android的版本   可帮助直接在移动设备上预览工作结果。XD支持  网站线框图,并创建简单的交互式点击型原型。(来源:维基百科)

undefined


作者授权


总结

每一年每一个时间段都会有新的趋势,学会的辩证的眼光去看待便是最大的智慧。世界一直都在变,趋势也是。保持学习和探索的心不变就是对自己热爱的事情最好的回应,念念不忘,必有回响。共勉!

文章来源:站酷-木七翻译整理

2020 年值得关注的 10 个UI 设计趋势

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

创意动画

1. 品牌加载

公众喜欢有趣,可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到了启动页和加载页面。结合品牌特点、风格和符号,融合到产品设计中,从而提升视觉的一致性,创造富有特有性格的产品界面。

△ Netflix & Airbnb

2. 图标动画

微交互是建立在移动端上微妙视觉效果的小动画,而图标动画是微交互其中的一种。它的目的是吸引用户,让用户感觉顺畅、愉悦。

最近,让我印象深刻的一个图标动画是 Facebook 的新消息提醒界面,这些由产品所包含的一个个小细节,创造出了新颖而有趣的设计。

△ Facebook Website

留白分隔

在 UI 界面中,最常见的分隔方式是用细线对模块进行划分,但随着设计重心趋向简约,注重内容本身,传统的分隔线方式就略显多余。

根据格式塔亲密原则,通过留白控制间距大小,可以清晰地划分模块层级,同时界面看起来也更加透气、富有张力。可以看到 QQ、飞聊、Gmail、Messenger 等应用都采用了留白分隔。

△ Gmail & Messenger

融入插图

1. 品牌形象插画

一个好的插画作品可以为产品带来极佳的辨识度。Snapchat 的页面用了很多情感化设计和品牌形象,包括开启通知引导动画、查找好友 landing page、下拉刷新页、照片回忆等等。

从品牌的个性化设计,寻找一种基于插画的设计语言,把产品塑造成一个高辨识度的 ID。

△ Snapchat

2. 3D插画

随着软件技术的提升,3D 插画在这几年中大受欢迎,很多应用都使用 3D 渲染产品,如:星巴克、Keep、毒App 等等,因为它真实立体,有着更高的转化率。

△ Starbucks by Wojciech

△ Keep & 毒

圆角卡片

圆角代表友好、亲和力,而卡片模块化的布局更为清晰、有效、整洁。

在上周的微信改版《微信 7.0.5 发布:9个细节提升体验》的文章中,我讲到了订阅号的推送文章去掉了标题栏的背景,卡片变得更加简洁。另外,公众号详情页由原先的列表式,改成了圆角卡片式,弹窗也由直角改成圆角。

△ Broadcasting & 微信

视频背景

长期以来,图像在视觉设计中起着至关重要的作用,而视频能够更直观的吸引用户,传达主要的思想。

在移动端中,视频主要用于登录页背景,一般可以是几秒钟的循环剪辑视频,它可以带来一种身临其境的体验感受。

△ Lyft & Nike

轻提示

Toast 是一种轻量级的提示,作为用户操作后的反馈。UI 形态上从居中浮层,慢慢趋向于底部通栏样式。这样设计的好处是不会挡住当前界面的内容。

举一个反例,iOS 的调整音量提示,大范围的遮住了界面,特别是对正在玩游戏的用户非常不友好,直到 iOS 13 这个设计才被修改。

△ Google Earth & Spotify

色彩平铺

随着扁平化设计和 Material Design 进一步占据主流趋势,简约的界面,明亮,大胆的色彩一直都处于增长趋势。色彩平铺已经成为清新、酷炫、数字时代的代名词。

△ Snapchat & Spotify

注重内容

重内容、轻 UI,把注意力引导在重要内容和功能上。像 Facebook、Instagram 这种以图片社交为主的 App 都有一个特点,就是文字都是黑白灰,将彩色交给图片去传达,让用户关注内容即可。

△ Facebook for Android

AR

增强现实的技术,已经出现在很多 Web、App 等领域中。许多平台开发者也将增强现实技术纳入其开发工具里面,可预期到这种类型的 App 将会越来越多。

1. 地图导视界面

地图+AR,让你不再盯着二维平面上那个蓝色的点,而是现实世界中的箭头告诉你在哪个路口转向。

△ Google Map

2. 表情贴纸

Instagram、Snapchat、Messenger 等平台可用 AR 滤镜来创作,表情贴纸可以帮助用户更直白有效地自我表达、获取注意力。

△ Spark AR

车载系统界面

随着 5G、车联网、人工智能、自动驾驶的发展,车载界面也越来越受重视了。

在今年的 Google I/O 开发者大会上,针对车载系统 Android Auto,推出了新的设计语言,它有着更好的可拓展性。在 UI 上,完全重新设计了导航栏,能够更轻松地访问应用、通知,和你的 Google 智能助理,最大限度的帮助驾驶者减少分心,将注意力集中在道路上。

△ Android Auto UI

此外,还开发了新的系统小部件,在使用地图进行导航时,仍然可以一键控制音乐应用,或者正在进行的电话,同时在屏幕上保持地图的完整视图。

总结

UI 设计的趋势除了侧重内容和情感之外,还会根据不同设备载体、新的技术(3D、AR)而变化。但归根结底还是以人为本,借用 Adobe 设计副总裁 Jamie Myrold 的一句话:如今设计师要思考的,绝不仅仅是设计一款 App、网站或设计工具。我们要思考的是人类的需求,用户的需求,打造真正人性化,多元化与包容性的设计。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


2019 年 LOGO 设计趋势报告(下)

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

抽象图形拼接

坦白说,这些抽象的 LOGO 设计让我立刻想起了JK·罗琳和她书中的魔法符号。如果这些Logo背后都有着独特而富有力量的故事,那么它们确实可以很好地服务于品牌。这样的了 LOGO 设计应当在笔触上保持一致,并且充满意义,我觉得如果能传递出这样的信息,它就很优秀了。

利落清晰的笔触,完美的角度和弧线,这样精准的设计会给人带来可靠的感知。当然,这些Logo 的应用场景同样有着严格的环境要求,设计师几乎没有异想天开的余地。这些 Logo 看上去相当正式,有着明显的高级感。

负空间

借助负空间来传递信息一直一种巧妙的 LOGO 设计技巧,它就像缺少关键证据的犯罪现场,墙上的洞,它并不是借助现有存在的因素来告诉你信息,而是通过一个「不在场的关键元素」,来传递重要信息。负空间就是这样,它同样也是一块画布,只不过给人的感觉是通过画布的背面来呈现信息和故事。

负空间并不是为了隐藏信息而存在,就像联邦快递 (FedEx) Logo中隐藏的箭头,或是 Toblerone 巧克力 Logo 中山腰上的熊。这些元素都不是为了隐藏信息,而是为了通过这种不完整来传递更多的信息。通过正空间来凸显负空间就是关键的技巧,正如 Reinhard Ernst 博物馆的 Logo 所示,中间开放的矩形区块如同画框,似乎可以代表博物馆的任何一件藏品,这也是一种「less is more」的设计。

托拽笔触

很多做 Logo 的设计师都曾经历无法控制的时刻,发呆失神应该也经常会发生。如果你是在纸上画草图,笔尖无意识地滑动,或者墨水洇出,都会产生有趣的笔触痕迹。我知道这不是电脑上绘图的方式,但它确实帮助我描绘出这种视觉设计的特征。将笔尖绘制成一个完美的圆,而笔尖后则是留下托拽的痕迹,在笔痕结束的位置,自然留下的也是一个圆弧边缘。

不管这些 Logo 的布局特征是怎样的,它们都呈现了类似视觉特征。小圆点和托拽痕迹构成了它主要的「笔触」,它们而生动地拼出字母,绘制出路径,或者勾画出有意义的符号。我想你已经捕捉到了它们的特征了——活力四射,生动新鲜的笔触路径。

间断渐变

在logo设计中广泛使用渐变色,是整个行业在过去十年中经历的最两极分化的趋势之一。仍有很多设计师抵触过渡色,因为从LOGO设计的角度上来说,渐变色违背了很多规则,而这些规则是在数字时代之前就已经存在了。不过,LOGO 设计师们总能想出好办法,比如间隔渐变式的设计。

将均匀渐进的色彩变化用连续的纯色片段来替代,同样呈现出色彩的变化和韵律感,但是消解了渐变色在 LOGO 展示过程中潜在各种问题。上面案例中,Qwant 的 logo 就是通过轮廓化的颜色分割来实现这一点,它真实地模拟了渐变的效果,所呈现出的效果比CPA Ireland 要好,CPA Ireland 则使用了的四等分几何分割加上色阶转换。总体上来说,间隔渐变的色彩使用技巧,很好地在当下的流行趋势和 LOGO 设计诉求之间找到了平衡点,值得尝试。

轮廓线条

使用线条来勾勒和描摹事物,传达信息,是一项古老而传统的技艺。在时下的审美体系当中,使用轮廓线条来绘制 LOGO 似乎显得太过于老派,不够现代。不过技术总归是服务于表达的,依然有设计师能够充分的利用这一技术——加入透视,不再局限于二维,而是开始描绘三维的对象。

这一的设计看起来和如今的线性图标的绘制方式在技法上保持了延续性,但是它在维度呈现上更加深入,更加具有表现力和形式感。通过富有规律性的利落的线条,设计师不用太多的线条就能勾勒出立体而抓人眼球的LOGO。这种设计要求设计具备更强大更精准的描摹能力。你可以延续这种思路到整个设计当中,这会使得整个品牌化设计思路更加开阔、有趣。

句点元素

在 LOGO 设计当中,使用句点这样的标点符号,通常都会借用它身处标点符号中的含义和功能。当我仔细琢磨这一趋势时,发现这些类似句点的符号有时像句号,有时则偏向冒号,它们在LOGO中总带着一些奇特的意味。如你所见,这些原点在更多的时候,它更接近于句号,充当收尾和封顶的终止符。

有的时候,它的装饰性更强,以不同的形式漂浮在文本和符号周围。如果你要深究这些 LOGO 设计本身的含义会发现,这个小圆点可能是字母 i 上的那个小圆点简略之后的残留痕迹。这个小圆点,在如今的很多 LOGO 中已经超出了装饰性的范畴,基于不同的需求和设计出发点,它可能意味着时间,可能代表着字母,承载着特定的词汇和含义,可能是感叹号或者句号,表达情绪或者终止。设计师将内容抽象成几何图形,承载意义,提升了对话的智慧。

翅膀元素

在传递放飞、飞翔、展望、自由、远见、轻盈、速度等含义的时候,很多设计师都会借用翅膀的意象。这也是为什么越来越多的地方会看到被提炼和抽象出来的翅膀和羽毛的符号或者图形,某种意义上,翅膀已经远超出了它本身的意味。这些被设计得形制不一的翅膀类的图形,有着冥想的前倾或者后掠的姿态,仿佛在对抗变幻莫测的大风,借助空气动力学向上飞起。

很多翅膀元素形制类似于字母 U,只不过两只翅膀在倾斜角度、弧度和长短上,进行了比较深入的调整。之后,再对 Logo 进行弧度和细节进行修饰,这样就完成了。如同我们上面所在展示的几个案例,设计师经过很快的迭代就可以完成这样的设计。与此同时,在具体的设计过程中,设计师还会引用品牌中一些字母的特征,比如Jetta的字母J,DoorDash 的字母 D。大量包含 Fs、Ps 和非字母的意象共同孕育出了双翼的意象。苹果有翅膀,乌龟也可以有翅膀。我们可以用翅膀填补空白。

门窗元素

门其实我们常常会引申出「打开新世界大门」的概念,它在实际设计中会带有通道、时间、新世界,甚至一种全新心境和意境的概念。很多品牌 LOGO 都想借助这个意象来承载更高远的含义,微软就是一个典型。门和窗本身一直都是一组象征性极强的元素。门象征着通行的权利,解决方案的途径,机会,甚至欢迎的含义,某种意义上它们和眼睛在含义和隐喻上是共通的。这也是很多设计师在设计 LOGO 的时候青睐这一意象的原因所在。

关于2019年的LOGO趋势报告

2019年的LOGO趋势报告,是我们的第17份 LOGO趋势报告。每年的趋势报告都是从成千上万的 Logo 中,寻找新趋势和细微微妙的差别。我们承认,每一个设计案例都代表着来自世界各地的设计师们的思考和心血,我们对他们表示敬畏,并感谢他们不遗余力地帮助我们完成这份报告。感谢所有在过去、现在和未来几年为潮流报告做出贡献的设计师们。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


2019年UI和UX设计趋势来了!

ui设计分享达人

在UI行业里面,设计趋势是更新非常快的,它能够更好的指导我们的设计方向,包括一些设计手法,都在不断地发生变化。作为一个UI设计师,需要更多的了解设计趋势。所以今天MICU哥将与大家分享2019年UI和UX设计趋势,希望给大家带来一些帮助。

为什么如今的APP UI设计如此的趋同?这也许是件好事!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里




现在,当你打开 Instagram、Airbnb、Apple Music、Twitter、Dropbox 这些应用的时候,乍一看很难区分清楚彼此的区别:带有圆润边缘、现代感极强的非衬线字体大标题,极简的黑白色调为主的界面,大量的留白,少量的提亮色甚至没有提亮色。

这种现代的界面设计风格,乍一看很简陋。而具有讽刺意味的地方在于,它们出自于最大的公司,是也是受众最广的产品,在视觉观感上,让人觉得几乎没有被设计过。

Instagram 的深蓝的页头怎么变了?Lyft 中经典的亮粉色元素怎么不见了?这些有着深厚底蕴的品牌是否已经放弃了标识性的设计?又或者是它们开始共享相同的模板了?

问题在于,这不止是 Instagram 和 Lyft 这样了,有迹象表明,Google 这样的大厂也有类似的倾向。比如Gmail 中标志性的红色大幅度减少,白色的背景,白色的交互按钮,白色的输入框,其他的Ui控件都很精准到位地保持了这种简约而一致的风格。

身在硅谷的大型企业,互相之间的借鉴学习是常有的事儿,但是至少保持了足够的差异化。但是现在的局面则不同,这种高度趋同的趋势,让整个事情看起来非常反直觉。

到底是怎么回事?

好吧,我们认为产品设计的一致性是好事情,这里有几个值得注意的原因。


让用户更加关注内容和结果

对于大量APP 的视觉和信息疲劳是谁都无法忽略的真实存在,绝大多数人已经厌倦了在太多应用之间来回切换,每一次下载新的应用都要花费大量的时间来重新了解界面的设计

调研表明,超过四分之一的应用,在首次下载之后,用户只用过一次就卸载了。绝大多数人日常使用的APP 其实是非常固定的,它们中绝大部分,核心在于帮助人们节省时间和金钱(或者兼而有之),让生活更轻松。

对,让生活更轻松。而这需要数字产品具备良好的一致性,而设计师也越来越多地将注意力投注在这一个点上。

正如同我们熟知的UX设计专家唐纳德·诺曼所说的:「很多用户界面所存在的真正的问题,在于它仅仅只是用户界面。很多用户界面的设计阻碍了功能。我想努力达成某个目标,而不是将精力耗费在界面上。」


更一致意味着更好的可用性

所有的电商网站基本上都遵循着类似的交互逻辑和视觉元素,你不会搞错购物车的图标,也不会错过任何环节。这些约定俗成的惯例,意味着用户不再需要重新学习在某个新的平台上购物,降低学习成本。

绝大多数约定俗成的规则和流程都被用户不自觉地印刻在大脑中,成为一种自然的习惯,而独特的设计,截然不同的规则,则常常会成为习惯以外的东西,引起混乱,让初次上手的用户感到受挫和沮丧。

以 Snapchat 为例,今年早些时候曾经发布过一个版本,其中包含有一些比较有争议的设计。这个版本当中,被重新修改过的导航和几乎随意堆砌的功能模块,让用户活跃度几乎立刻下降了73%,甚至直接导致了用户流失和股票下跌。

正如同 Snapchat 所证明的那样,新颖的设计是有风险的。一致的设计,确实有一定的机率降低用户在面对新兴事物时候的不安感。


设计不应止步于视觉

明白用户的需求和意图,在不断探索解决方案的过程中,才能真正创造出伟大的用户体验。相比于独特的外观,差异化的体验是更有价值的。

当然,样式和风格很重要,它们也确实会影响到体验,当人们感知到有视觉吸引力的设计的时候,即使有一些混乱和无效的设计,也是可以忍受的。

但是设计师的精力是有限的,用户的也是如此,相比于在色彩和花哨的动画上反复尝试,帮助用户找到更好完成任务的方式,无疑更有价值。设计好的产品,最终能够给用户带来价值的东西,是需要看似无限的测试和迭代,来向着可用和易用的产品更进一步。

奥巴马、乔布斯和扎克伯格每天穿着相同的衣服,他们的衣服和这种行为同样出名。心理学家将这种现象称之为「决策疲劳」,它们每天需要用有限的能量来做大量的决定,而为了给更重要的事情留下足够的精力,他们穿相对固定的衣服,就可以省心很多。

设计师面对的是同样的局面。随着界面设计的趋同化,设计师可以花费更少的时间来决定用什么色彩,而可以将更多的精力投注在更为深入的设计当中,比如更有效的布局,反思为什么要这样设计,等等。


趋同的设计是否会扼杀创造力

我想你一定在思考这种设计趋势之下的缺点,比如这样的设计是否会显得缺乏创新,甚至会扼杀创造力。老实说,我觉得这样的影响是存在的。

但是,即使每个产品设计师都参与到极简主义设计的运动当中来,仍然有大量的设计工作有待完成,设计的范畴太广泛了,需要设计的东西远超用户界面本身。

事实上,界面中的趋同化在近期看来是颇为有益的,对于长期的影响也是非常巨大的。

首先,最重要的一点,VR、AR 和人工智能的逐渐普及,用户和数字设备之间的互动可能会变得更加隐形,小屏幕同样在普及,手势操作将会成为最基本的交互语言,我们将会越来越多地参与到无屏幕的交互当中去。

即使我们在iPhone 上,人工智能加持下的 Siri 越来越好用,越来越多的用户开始习惯使用类似的语音助手来创建待办事项,选择音乐,发送消息,查看天气,简单的功能它们已经可以很好地完成了,复杂的功能和需求也会通过机器学习逐步习惯、越做越好。

在诸如人工智能、机器学习这样相对高深的概念背后,是软硬件正在更好地帮助人类完成任务,做对事情。设计师的角色需要更进一步,更深入地参与到产品当中。

如果设计师要改进 Siri 的设计,那么要做的工作远不止设计界面,已经有很多相关领域的专家讨论过这个问题了,设计师所需要了解、掌控的维度越来越多,设计正在变得更加深入和复杂。更通俗的讲,设计师需要考虑新的方式,更加富有创造力的策略来吸引用户的注意力,甚至要深入到情感和感知当中去,而不是单纯的视觉。

如果我们仅仅将优秀的设计局限于我们在屏幕上看到的内容,未来更多的可能性,可能就止步于此了。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档