2019年UI & UX设计趋势分析

授权

文章翻译自Medium 原文地址

2019uiux-Scenery Illustration.png

去年,我们对移动UI设计趋势做出了预测。今年,我们准备更进一步,不局限于移动端。因为现代设计的首要趋势是专注于情景,鲜少再有泛化[1]了。一切设计都与其使用场景相联系。

好像有种感觉,即随着我们工具的增强、技术手段的丰富,我们也在加深对产品如何面向客户工作的理解

我们迟早会形成一种通用设计[2]的思维模式,这种通用设计的思维模式会涵盖生产的一切,而不仅仅是面向销售。我们行事也应有更好的选择,我们也能用设计来更好地为本土文化发声。尽管如此,我们还是远未达到预期的目标。好了,现在让我们来感受2019年界面及用户体验趋势吧!

老规矩,我们会在每种趋势的评注上加一个表情作为提醒,以避免混淆

强大的浏览器

浏览器不仅是互联网的传播媒介,也是一个提高影响力的窗口。现在,浏览器正在变得更快、更强大同时更具有吸引力。

  • 浏览器基准测试及性能测试表明,大多数流行的浏览器性能上都有显著提升
  • 流式编译大幅提升了浏览器的速度,Mozilla的报告中指出,新的编译器比之前优化的编译器还要快10-15倍。
  • 所有现代浏览器都支持WebGL 2,它支持全新的 3D纹理对象渲染片元深度顶点数组 对象。

网页和移动浏览器正在努力缩小概念设计和现实之间的差距。

2019uiux-webbroswerchart.jpg

😑

诚然,浏览器的所有进步提升了它们的价值,但这种进步是在不影响上游产业的前提下进行的。正因为互联网包罗万象,以至于开发者很难想出一种通用的解决方案以净化整个互联网环境——浏览器可能很棒,但如果用户访问一些体验糟糕的网站,浏览器的体验也会被拉下水。

如果可能的话,我们应当强制网站使用更好的设计来发挥浏览器的潜力。

大部分网站都会让浏览器看起来像个垃圾软件

有意义的的动画

现代浏览器拥有了诸多功能,其中自然也为动画打开了新世界的大门。动画不是移动元素这么简单,而是一次绝佳的设计机会。被称为动态设计的学科不仅涉及很多设计的领域,而且也与心理学和生物学有所关联。

页面的加载曾经罕人问津,但现在却成了你的游乐园

2019uiux-CocoladasBlog.gif

在更深的层次上吸引用户意味着在交互体验中每一秒都牢牢吸引着用户,让每一秒都变得有价值。设计师们正在抓住这个机会让用户免为生硬直白[3]的市场营销所害。

动态设计也取代了静态演示和占位符,成为了嵌入品牌标识的正确姿势。虽然LOGO只是个标志,但凭借着我们的想象力和经验却能让它们鲜活起来。那么为何不利用这种想象力让标志以正确的方式呈现在人们面前呢?

2019uiux-fuckgif.gif

如果你没想过你的LOGO能包含些什么——它要给人的感觉、它的味道、气味、声音……——那么是时候这样去思考了!

动态要比照明、定位和材质更善于表达。动态是在讲述一个故事,如果你能让你的logomark成为你故事中的一部分,那么我建议你赶紧去做。

2019uiux-lakkogif.gif

😑

诚然,动画很强大。但是包括动画内容在内的所有创作内容都有一个问题,即你所表达的不一定是用户所理解的。如果我们的产品容易被曲解或者容易与某些不好的情景相联系,那么即使动画可以表达正确的含义,我们也难以承受动画被误读所带来的严重后果。如果面临情感上的矛盾,请务必保持中立。

动画虽好,请勿滥用

3D界面与深度平面

3D渲染与CG增强现实的技术已经出现了不短的时间。但为了速度、性能以及可访问性,设计师曾有意避免在UI中使用复杂的3D模型。但现代浏览器却将3D模型那奢侈的性能损耗降低到了可接受的程度。高度复杂的视觉效果使得网站拥有了电影般的体验。

3D图形界面模糊了现实与数字动画的边界

对于拥有复杂流程的产品公司来说,这种趋势特别有用。通过使用3D可视化,你可以深入任何技术过程,让人获得更深刻的理解。

2019uiux-braker.jpg

3D可视化之所以会在电影和电子游戏里得到应用,是因为它们只需要给观众一个大致的样子,而不是一定要实事求是地还原,因而这些图像的显示时间都很短[4]。如果你在这基础上再结合前文所述的有意义的动画,3D将成为一个强大的设计工具。

移动行业依托于新的功能强大的芯片,不仅可以渲染3D对象,还能在界面中使用它们,在小屏(如手机)上的显示尤其出众。

2019uiux-3dcard.gif

2019uiux-3dmenu.gif

平面UI设计已经主导了超过5年的设计趋势,一直没什么真正的改变。但最近,我们观察到,在不改变其主要设计理念的情况下,设计师们开始给平面增加深度,扩展显示维度。为什么深度是必要的?这也是平面设计为何出现的原因——我们理解事物往往会抽象出一个象征,而平面则是核心的象征。

带有深度的平面是一种全新的平面

真正的3D和CG组合展现了人们对他们可以与之交互的逼真的对象的需求。而平面设计也能够以一种独特的,且尚未被探索过的方式实现这一点,人们称其为伪3D

它通过平面的堆叠,来形成一种三维的感觉,其所用到的效果包括阴影、光源定位及反射。

2019uiux-ARTA.jpg

还有一种伪3D的趋势出现,即使用传统工具如PrincipleAfter Effects创建一种动态模式来模拟3D效果[5]

2019uiux-spacer.gif

在2019年,我们甚至可能看到拟物[译者注:Skeuomorphism,又称拟真设计。早期的IOS系统就是典型代表]以一种全新的方式回归,如果平面可以有深度,那么平面也应该可以是等距[译者注:等距视角(Isometric)是一个术语,也称等轴测图,知名游戏纪念碑谷是其典型代表]的。在保持平面的抽象基础上不断贴近现实,这是一个值得探索的趋势。

😑

也许我们最终会没有选择的余地。现在的3D化UI没有一个明确的方向,它同时兼具着两个特点——简化繁杂。诚然,要给我们留下深刻的印象,需要应对更大的技术挑战;但若要将复杂性抛诸脑后,推出一个疯狂的抽象概念,也同样需要巨大的勇气。但是,若最复杂的界面缺少实际应用价值,抑或是最简化的界面已与平面无异,那么这些努力就白费了。

我们可以做出让人印象深刻的设计,那么是时候为它赋予人文意义以及解决更深层次的需求了。我们怎样才能做到这一点呢?

超现实设计

技术的发展为我们带来了实现3D和动态设计的能力与机遇。但如果作品不能产生情感的共鸣,那么充其量无非是张好看的图片罢了。具有讽刺意味的是,让人产生情感的共鸣并不需要多么复杂的技术。

叛逆一直与主流相伴相随,原因就在于其天然的吸引力。

我们往往需要一种常识之外的东西,我们需要一个魔鬼站在我们的肩膀上,而有时候,我们仅仅觉得这样很好玩

一些大型的设计活动的相关插图看起来就像是来搞笑的,像下面这样:

2019uiux-dropbox.gif

2019uiux-shopsmall.png

这些卡通风格的插图,甚至是UI,它们只有一个目的——保持新鲜的外观。这种风格的受众是谁并不重要,但它必须是奇怪的,甚至是丑陋的。非常期待在2019年看到更多前卫的和超现实的设计。

😑

好吧,并不是所有公司都能Hold住这种搞怪的风格。你的产品受众越多,你的设计就会越偏于主流。也许一时的搞怪对那些知名品牌有奇效,但是一些规模较小的公司和那些挣扎求存的公司将不得不谨慎行事,并依附于主流。

先跟随潮流,再引领潮流

渐变2.0,浓重黑暗下那一抹炽烈的光彩

新屏幕的表现非常出色,厂商们甚至不得不通过默认壁纸来展示自己的屏幕究竟有多棒。设计人员也因此得以在UI中榨干色彩的表现力,探求渐变的极限。

渐变的色彩不再是首要关注的对象,它现在正赋予界面新的深度与维度

2019uiux-Grabient.png

渐变2.0是微妙而简单的。它不去使用对比强烈的颜色。它有一个清晰的光源,并且与形状对齐,为图像赋予深度。

鲜艳的颜色并不会消失,我们将看到更多的色彩组合和更丰富的颜色层次。事实上,就算是单色,也能够通过深度和尺寸呈现出某种视觉美感。

2019uiux-fi.png

我们向来缺少信任,罕有乐观。如果说热辣的色彩能让人积极向上,那么这样的加密应用你会使用吗?

2019uiux-crypto.png

更棒的是,充满活力的色彩和有含义的渐变在黑暗的背景下更为突出。黑暗主题一直存在,现在的黑暗主题只会变得更好。在这里,我们利用人类学的方法来寻找黑暗主题,以及它们起作用的原因。那些能够在暗色UI的易用性与艳丽色彩的反应之间把握尺度的人,将会在明年脱颖而出。

深度平面、色彩还有3D汇聚于此,匿于黑暗之中

2019uiux-dashboard.png

😑

心动了吗?别急。易用性不是渐变、色彩和暗黑主题的唯一问题。一般来说,明亮的色彩常被用作强调,但是当一切都是明亮色彩时,你能强调什么呢?除此之外,并不是所有用户都在使用OLED屏幕,设计中的某些渐变可能会损失。与此同时,过多的颜色对比会分散用户的注意力。还有还有,在外面阳光明媚时使用暗色模式可不是个好主意。不过……也许这是件好事呢?

可变字体

在过去,字体被视作具有有限可调参数的静态实体。设计师和作家必须在上下文中通过x-heightstrokeletter width调整文本的可读性。

每当设计需要多种字体时,设计师都必须提供全部所涉字体文件。你不能完全致力于在产品中实现丰富的排版,除非你解决了所有基础问题。但对于可变字体,你只需要一个字体文件,因为可变字体提供了无限的字母权重和宽度调整。

可变字体可以覆盖剩余的设计空间

2019uiux-Marvin Visions.png

可变字体在响应式设计和本地化中蓬勃发展。在这样的地方,设计师不得不绞尽脑汁地思考文本如何在小屏幕上显示才不会失去韵味,同时也不会在不同语言的显示上出现排版问题。

2019uiux-vt.gif

WEB字体常常缺少响应能力,没有足够的灵活性导致文本可读性下降和对齐问题。可变字体是全新的解决方案,它有助于为WEB提供更快的字体加载,同时简化一般的设计流程

这只是个开始,可变字体在2019年仍是一片处女地

2019uiux-TypographyGuru.gif

😑

唉!究竟要多久,可变字体才能真正商用?如果你能让字体对上下文的每一处都做出微妙的回应,那么它如何才能让读者对其进行控制?有限参数的字体起源于书籍印刷,而书籍印刷是物理世界客观限定的情景,这促进人们节约纸张和墨水,也使得阅读成为我们进步的最重要原因之一。

Figma

我们经常会问一些老生常谈的问题,如设计师需要懂编程吗? 然后就是 **程序员需要懂UX知识吗?**提出这些问题的目的显而易见——希望在实现设计时避免沟通障碍和实现差异。所以,如果为了这一目的,那么上述两个问题的答案不言自明。

学习编程是一个合乎逻辑的选择。如果你可以实现自己的设计,那你就能避免很多问题。但是,作为一个专职的设计人员或者开发人员,你所需要学习的专业知识是很多的,你能同时兼顾吗?如果你做得到,自然再好不过。但那些做不到的人也应该有其他的选择。

我们的目的并不在于培养一个通用设计师,而在于以更愉悦的方式构建更好的产品

实现这一目标的另一个方法是使用和推广更好的工具。Figma就是其中的一个工具。在此之前, 设计人员必须考虑很多变量, 如操作系统、集成、插件、存储、同步、协作, 最后是将它们汇总的方法。

那些为此构建了一整套工作流程的人确实值得尊重,但我们希望可以减少这些压力。

2019uiux-figma.png

Figma是一个值得我们使用的工具。它有很多预设以及很多的假设。

Figma干掉了Sketch

Sketch和Adobe XD有的它都有,而且做的更多更好。更为重要的是,Figma的目标是构建可用的东西。每个Figma组件都可以通过API转化为React组件,并在前端实现。截至目前,Figma在成本、性能速度、协作、共享、嵌入、支持等方面都战胜了竞争对手。话虽如此,Figma仍在发展之中,在2019年,更强大的Figma将会到来。

😑

听上去很美好,但是每当我们开发出更好的产品,如果不能够进行行之有效的管理,那就将毁于一旦。看看Twitter吧,它仍在试图挽回自己的品牌形象,2018年一年就有多位科技公司高管出庭。事实证明,我们仅仅把工具做出来是不够的,我们还必须观察用户是如何使用它的。Figma会保护用户免受暗黑模式用户体验、糟糕的设计和假新闻的影响吗?

语音用户界面

设计不必是可视的或可见的。经过一段时间的摸爬滚打,我们意识到,如果我们正在构建不具有触觉的体验,那么工具并不重要。设计逻辑意味着使用心理学。构建语音控制意味着自然语言处理。

语音用户界面既感性又复杂

Voice UI实现了无UI的概念。这个过程是内部的,并且与实际设计相比,更多地涉及编写、构建上下文和合成数据。即便如此,设计师仍然沉迷于寻找表达语音UI的方法。它主要是通过令人印象深刻的少量报告式界面和动画来实现。

2019uiux-oaid.gif

大多数情况下,它们和现实的语音界面没有任何共同点。但它们正准备帮助用户更好地控制语音,并且教会他们如何使用无控件交互。

在2019年,随着越来越多的设计师从简单的视觉美学过渡到有实际意义的交互体验,我们有希望看到语音界面技术的深化。

😑

具有讽刺意味的是,语音交互面临的最大问题不是人机互动,而是人与人之间的互动,这种交互必须由比这两者更聪明的技术来做中间人。我们生活在一个严重失衡的社会中。我们正努力在许多方面互相理解,包括技术。但语音控制的汽车、电话还有房子都可能会扩大我们之间的鸿沟。

作为设计师,我们应该始终把人类福祉作为我们的首要任务。如果说有什么技术——即使是设计精美的技术,它是以牺牲其它技术为代价而为某些特殊人群服务。那这样的技术就不该存在。

用户体验书写和用户体验编辑

去年,设计师开始关注带有字体的单词的含义。小说家和科技作家、笔友和记者的技能辐射到了毗邻的行业。事事相连,我们定义了写作在设计中的作用:

在与客户谈生意时,你必须注意你的说话方式

在过去,企业介绍往往是一大堆自恋的垃圾话和一坨坨技术术语的混合。企业误以为它在做的事情可以给客户带来价值。尽管企业是伟大的,但它们缺乏一种简单明确、有说服力的措辞来和客户进行沟通。

用户体验书写基于两个基本原则:尊重务实,它们是一切的基石。尊重他人意味着简洁,让他们比你更珍惜自己的时间。为文本内容绞尽脑汁的是你,而不是客户。务实意味着明确的含义,能够避免歧义,保护自己不受曲解。用开诚布公的方式和客户交流,始终把帮助用户放在首位,不要炫耀你的口才,不要为了提高搜索排名不择手段,永远不要使用营销的那套陈词滥调,如此足矣。

如果你认可并践行尊重务实两大原则,用户体验写作对你而言轻而易举

人们对你的宣传手段不感兴趣,他们只关心你能不能帮到他们,一切以服务说话。

2019uiux-writting.gif

2018年,我们见证了各大公司对实用性设计的追求显著提高,他们不再追求独创性,而是专注于客户的价值。在2019年,我们还未看到用户体验编辑发展成一个独立的设计门类。

用户体验书写和用户体验编辑的区别在于覆盖面。UX书写者写出客户看到的文本,而UX编辑者对这份文本进行任意分析、变形、弯曲和扭曲,将其转化为简单的设计稿。没有人能速成用户体验编辑师,经验、观察和友好的态度,这三者缺一不可。

2019年,每一次重大的设计升级都需要用户体验编辑者的参与

😑

每一种趋势都会经历一系列阶段。首先是怀疑,然后是痴迷,最后就是厌倦。痴迷的阶段是最危险的,因为它经常失控。它可以把想法变成夸张的漫画,肆意扭曲。用户体验写作也没什么不同。当力求简洁的时候会被误解成肚子里没半点墨水;当阐述清晰时会被误解为生硬直白;被说服时就变成了屈尊俯就。

在产品设计里,创意写作尚有一席之地,但这不是到哪都行得通的。举个例子,耐克和波音公司付钱给科幻作家,让他们预测公司的未来。

把产品设计师作为一个职业对待

UX设计是一个非常宽泛的词儿,它是跨行业服务设计的一部分。因此,设计师和设计公司收集了种类繁多的组合项目,从简单的实用程序到复杂的FinTech[6]平台。

服务设计包罗万象,无物不可服务,无物不可设计

服务设计师们可以有自己的风格,这种风格可以应用到任何产品上。这正是他们出名的原因,也是企业愿意支付的代价。这就像从靠谱的供应商那里购买零件一样。

然而,大多数公司都是产品公司,他们可能需要设计师对产品有着更加深刻的理解。这些公司需要一个产品设计师,他是团队不可分割的一部分,拥有所有可用的数据,以及影响整个架构的所有工具。

相比与服务设计,产品设计有着更明显的优势,即对产品的分析以及审查设计提案的能力。

产品设计师能够专注于他们所创造的产品的细节打造,将其他的事情置之度外。和大多数服务设计人员必须处理的预设相反,产品设计师通过用户调查对自己的用户群有着深刻的理解,并且拥有着实际可靠的真实数据。

2019uiux-Innovative.png

😑

向产品设计过渡是需要勇气的,你正在冒险让自己和某个行业甚至某个产品绑定,我们可能正在做出一个没办法回头的选择。这种情况下,必须要慎重考虑这个决定,必须考虑这个行业的生存能力和专业发展的前景。

这是一场勇敢者的游戏。到2019年,我们将看到更多有献身精神的设计师尝试成为专精人才,放弃他们的通用技能。时间会证明一切。

最后,我们注意到设计的最大趋势是开始表达真诚。你也只能耍这么多花招。没有什么能比一颗真诚的心更宝贵的了,设计的核心就是真诚。


  1. 译者注:这里可能指的是泛用式的UI设计:没有实际的主题,以图形替代具体的内容,或使用如乱数假文一类的占位符代替实际文本 ↩︎

  2. 译者注:Universal Design,中文译作通用设计,指无需改良或者特别设计就能为所有人使用的产品、环境及通讯 ↩︎

  3. 译者注:市场营销中最常见的方式就是大声喊出自己产品的名字,这就是所谓的生硬直白 ↩︎

  4. 译者注:往往有些影视片段——尤其是科幻电影——它们时常会丢出一个三维场景,所谓大楼结构模型、飞船结构模型之类的,这些模型看上去很炫很赞,为电影增色不少,但实际却没人根据这个结构建大楼或者造飞船 ↩︎

  5. 译者注:即利用一些更专业的工具将3D流媒体导出成某种格式,通常是GIF,嵌入到网页中来实现某种程度上的3D效果,其本质仍是图片或视频,仍称不上3D模型 ↩︎

  6. 译者注:FinTech,指金融科技,国内称互联网金融,主要是指代那些可用于撕裂传统金融服务方式的高新技术 ↩︎