【优秀外文翻译 第55弹】

文章字数：6030字，阅读时间预计：20分钟。

作者简介：

Moses Kim。UX作家和研究者，前科技作家和自由翻译家。

又到了解新一年的UI/UX趋势的时间了。今天的文章还是由去年的作者Moses Kim带来。（2019年的趋势，请戳这里查看）

希望这篇译文能给大家在2020年的工作带来一些新思路。那么，正文开始了。

1

有意义的产品价值

随着技术的进步，设计师和开发者获得了很多强大的工具。这些工具可以帮助我们将对产品的“情感”和“感觉”转化为有意义、可表达的。

格式塔理论表明一个整体比各个部分简单相加更好。当我们通过设计来解决业务问题时，我们正在做很有意义的事情。

（译者注：可以联想滴滴公司。滴滴的确构建起了有空余车辆的人和有乘坐需求的人之间的平台。但是这样的平台应该怎么去保护双方的安全呢？这又让滴滴有了社会责任。）

通过产品来影响用户是公司法律之外的责任。社会影响力在产品设计中变得越来越重要。公司所代表的意义和它所提供的产品或服务的质量同样重要。

“为什么做”比“做”更重要。

2

令人惊叹的动画

大家存在一个误解，认为复杂的动画取决于硬件，所以为处理速度缓慢的那些硬件去创作动画是没有意义的。

事实证明，有些产品即使在处理缓慢的硬件上也可以胜任，无需依赖硬件的性能。有很多设计公司正在这方面努力，他们创造了用于交互式动画的插件和开发工具。他们通过一些方法优化了实现交互式项目的过程，可以“高效”“流畅”地在几乎所有设备上工作。

动态所能表达的故事胜于言语。有了TweenMax和WebGL等更好的技术，我们可以在动画中添加更多实质的内容。对于很多设计师公司来说，这还是一个未知的领域。不过，最终，高质量的动画一定能够被大众所用。这是一件很酷的事情，可以帮用户过滤掉无用信息。

是时候动起来了。让你的产品动起来。

3

不对称布局和分屏

“块布局”是一个经典的布局。块布局是一种易于消化的信息流方式，块布局中的内容有明确的边界。它能满足了用户对于完整感的心理，并且有助于更好地理解结构。“块”表示对称。不过，不对称的趋势始终存在着，但从未成为主流。特别是在当今宽阔的台式机屏幕上，不对称的布局越来越多。

2020年将是“不对称布局”卷土重来的一年。首先，我们已经渐渐习惯各种内容都来争夺屏幕资源。其次，我们对于“分屏布局”越来越感到满意，这种布局方式也逐渐应用于各个平台。

Scuba Diving Course Landing Page by tubik in Web Design

最初在一个屏幕内提供两个单独的信息块是一个功利主义的方法，现在却成为了一种呈现信息的吸引用户的方式。

分开。

4

低调的渐变色

总的设计趋势技术正在朝着“自动化”、“AI代劳”、“少即是多”的方向发展。在这里就不对这些点多写了。但是，这些设计趋势中的各种视觉元素仍然是需要耗费大量人工的工作。

其中一项工作就是色彩的微妙调整，以及简化和还原。这些设计趋势需要淡淡而梦幻的色彩。

Get your daily quote ✌️Animation by Sebastian Jungbluth

2018年充满了蓝紫色渐变。2019年类似，但是更柔和。2020年我们会看到更加淡化的渐变。

水能灭火。 

5

和谐的色彩

2020年的色彩将“欢快”和“低调”结合在一起，这是一种在各个时代都受欢迎的减压方式。

总体而言，所有设计行业中流行的颜色将会比前几年更加自然。

A+WQ / Young Lab Slider Animation by Zhenya Rynzhuk

当然，这也不意味着所有颜色都必须使用相同的调色板。色彩鲜艳的色彩元素也同样可以起到很好的传达效果。

低调一点。 

6

产品说“人”话

过去两年UX写作趋势的进展为UX文案设计师设定了很高的标准。“UX文案设计”一词本身将逐渐消失。因为任何为用户编写的产品文案都属于UX文案设计。

文案不是伴随着设计，它是设计的一部分。场景很重要，UX文案设计师也很重要。文案和它所能引起的用户操作一样重要。通过“人”写出的文案可以帮助用户去判断和选择产品。

世界上不存在咒语，都是人所写的语言。 

7

混合的体验

视觉胜于语言。将快速加载的视频整合到布局中，是增强体验的好方法。内容为王，而其展现的方式在其产生的影响中发挥着巨大的作用。

Allpress Culture一家咖啡公司的网站

https://allpressculture.com/

“融合内容”意味着根据用户的要求构建整体的体验。后面我们将说到根据用户的行为量身定制体验，但最终的趋势是一个不包含屏幕、插图和视频的网站。这是一个整体。

构建体验，而不是构建UI组件。

8

“美”又回来了

这没什么好多说的，来欣赏下吧。

“确保你的作品感觉是人类设计出来的，同时也是为人类设计的。”

—平面设计大师施徳明（Stefan Sagmeister） 

9

设计+开发

设计师的基石是开发。有时候我们设计的东西在特定的时间、预算、或团队内无法实现。有些设计师学会代码以后会变得有点“危险”，因为他们知道了足够的知识可以用来争论，但没有足够的知识用来实现。

由于Webflow之类的工具，这种情况一定会在2020年结束。未来已来。简单来说，Webflow这类的工具是一种可视化的工具，只要可以用HTML和CSS完成的，你都可以尽情设计。每个像素移动都是代码更改，所以这个工具可以成为设计师开始编码的理想方法。

上图是由Webflow制作的电商网站-Ryan Morrison设计

当一切都朝着基于交互的设计方向发展时，设计师就很难向所有人解释清楚交互的形式和外观。所以，这样的可视化工具的重要性就凸显出来了。

当一个“危险的”设计师。开始玩代码吧。

 

10

空白

当元素们都在争夺注意力时，没有一个元素获得足够的关注。而当一个元素获得聚光灯时，它就能吸引所有的关注。根据UI传递信息的原理，一定要留出一定的空间使该信息突出。

空白分成微观、宏观、文本之间和段落之间，它们可以是主动的，也可以是被动的，并且它们都可以被压缩。“可以被压缩”是一个很实在的事情，因为我们倾向于用更长的时间处理压缩过的信息，而对信息的理解却更少了。

上图是“Hello Monday”创意工作室的主页，其中有很多空白

https://www.hellomonday.com/

“用空白包围信息”是使信息脱颖而出的一种方法。现在，就需要你确保突出的信息值得你这么做。

什么都没有也是一个东西。

11

注重渲染

虽然作为设计师多少都会一些“渲染”这项技能。但业界的高手正在将其带回到简单的场景和出色的渲染中。

令人惊叹的Apple AirPods Pro网页

为了在2020年展示产品或服务，更多公司会使用产品的超详细图片以及使用这些产品的场景。

高清晰度的渲染可以模拟接近触觉的体验，距离用户购买只有一步之遥。即使现在还可能存在加载时间的问题，但是如果使用正确的技术和交互方式，效果也可以变得很好。

太真实了。我好像闻到了一样。

12

多样的用户体验

就像人有不同的脾气一样，用户的在线行为也多种多样。长期起来，我们都是在普遍的场景下，根据平均的参与度为普通用户而设计。

现在，我们有能力根据用户的行为设计不同的体验。先进的分析技术使我们能够确定与我们产品打交道的人：浏览能力强的浏览者，主意不确定但人气很高的领导者，或者一个主意坚定的独行者。根据用户在浏览网页时所花费的时间或滚动的速度，网页可以相应表现得不同。

Apple的官网根据用户滚动的速度不同，会以不同的速度显示iPhone11 Pro

这将要求我们在用户研究上采取激进的姿态，并且这可能不是服务设计师的选择，但品牌设计师将会为用户构建量身定制的体验。这也意味着我们需要理解用户场景、用户情绪、以及用户行为可能造成的影响。

教你的设计去理解场景。

13

新的移动Web应用

PWA的出现填补了原生应用和移动端Web网页之间的鸿沟。用户可以通过两种方式访问相同的功能，当然，这也迫使设计师需要构建一致的交互模式。

原生应用和移动端Web网页的一个差别就是后者需要一个载体：浏览器。2019年，第一款真正的移动优先的浏览器-Cake开起了先河。（目前仅在部分Android平台有下载）

译者插话解释下什么是“PWA”：（查了些资料，很多人会比我了解得更好，这里简单说下基本概念）

PWA(Progressive Web Apps )，翻译过来就是渐进式Web应用。它可以理解为一种理念，使用多种技术来增强Web应用，让网站的体验更好，接近于原生应用。Google在2015年开始着手推广这种无需下载的应用，命名为“PWA”。只需要有一款支持PWA应用的浏览器就可以添加PWA应用。现在Chrome、Firefox等浏览器都支持PWA应用。而我们常见的微博、饿了么也已经开发了PWA应用。

那么，可能有人就要问了。这种PWA应用有什么用？我打开个网页不也一样吗？

首先，非PWA的Web应用和原生应用存在着较大的性能差异。例如网页总是会受制于网络状况，并且Web应用依赖浏览器为入口。所以Web应用在移动端总是比不过原生应用。其次，非PWA的Web应用和PWA又存在差异。PWA通过一些技术（ Service Worker 与 Cache Storage、Web App Manifest、Push API 与 Notification API 等），让PWA应用具备以下3个特点：

• 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现

• 体验 - 快速响应，并且有平滑的动画响应用户的操作

• 粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

所以，打开一个普通的网页当然和PWA应用不一样啦。有的文章也将PWA比作了下一代Web应用模型。不过，PWA也有自己的优势和劣势，感兴趣的童鞋可以网上进一步搜索PWA。

从技术上来说，支持PWA的浏览器是AppStore中的一个应用，旨在将用户从应用中解放出来。它的作用是在使用搜索引擎和浏览网站时提供类似于原生应用的体验。PWA应用在2020年不会消失，并且在一些移动优先的浏览器的支持下，我们可以预期会有更多的PWA应用真正投放市场。

拥抱PWA。

14

重叠的排版

这是大胆的排版趋势的延续。海报上各种的重叠标题可以看作是声音的替代。你可以通过这种吸引人的排版方式来传递信息。

Orkestra的主页就采用了标题盖住图片的排版

Spatzek 工作室

由于我们每天需要消化大量的文本信息，因此我们更喜欢能发出突出声音的信息。在这种情况下，使它们脱颖而出才是真正的挑战。

Largo Studio使用重叠的文本来描述他们正在做的项目。标题下面播放的是视频。

https://largo.studio/

把文字放上去。

15

插画

到2020年，我们会把一切插图化，所以我们需要重塑插画风格。而这些重塑的风格，其实就是之前被删减掉的精美的、虚构的艺术在数字媒体中再现出来。

这给讨厌素材库里插画的艺术家们打开了一个机会之窗。

https://absurd.design/网站使用了插画

是否采用这种趋势取决于你的营销方案。

Qode Interactive Catalog采用了插画样式的菜单

https://www.awwwards.com/sites/qode-interactive-catalog

前面是插画，后面其实是生意。

16

可定制的导航

提供定制化体验的产品是2020年的终极趋势。对于特定的目标，我们已经可以设计出行之有效的转化方法和准备工作。但是如果我们想通过强有力的视觉来支持一个品牌，那网站中的所有东西都可以拿过来用，导航就是其中之一。

Corphes网站通过倒立的导航促使用户查看山顶而不是向下滑动

https://www.corphes.gr/en/

如果我们把导航合理地融入到场景中，它可以起到很好的作用。导航元素有两种：可见的和隐藏的。依靠信息流来设计导航非常重要。

2ndstreet的导航菜单重复出现页面的标题

https://2ndstreetusa.com/

为了效果而导航，而不是为了用户没看到的。

17

全屏的视觉效果

将聚集在中心区域的内容展开来布局对于设计师们来说一个多层面的挑战。因为屏幕的中心自然是最吸引用户眼睛的地方。所以，我们在页面中间放置大量内容，打出了传递信息的安全牌。但是，充分利用整个页面才会带来更多好处。

Shimane Misato是一个来自日本的非常有意思的互动式全屏网站。强烈推荐去原网址打开看看。

http://www.town.shimane-misato.lg.jp/misatoto/

为了创造一个沉浸式的体验，我们需要表明屏幕空间只是可见内容的一部分。这鼓励用户进一步探索，并有可能降低跳出率。

Fishing Feed网站带着你随着海洋深度的变化了解渔业遇到的问题

https://www.fishingthefeed.com/#pFour

全屏体验的完整度受制于你的产品所创造的效果。对复杂的事情和具有社会意义的问题，确保先将用户置于正确的环境中是非常重要的。

不要盖墙，要拆墙。

18

数据可视化

让人叹为观止的互动体验成为可能的技术现在已经变得越来越简单。因此，营销人员可以围绕可视化的数据制定其整体策略。展示比讲述效果好，但是如果你既能展示又能讲述，那就是终极的表达。

如果需要展示有意义的数据，那么WebGL和3D是一个强大的组合。任何可以数据化的东西都是来源。我们要做的就是对来源过滤，找到最有影响力的数据，然后好好展示它们。

这是汽车音响管理的Autoneum可视化设计。这是一门科学，而这种展示方式让它看起来的确是一门科学。

https://acoustics.autoneum.com/

数据可视化不单单是将表格和图表变成易于理解的片段。根据用户的喜好，我们可以自由选择数据源并以图形方式展现它们。

可视化那些重要的数据，而不是所有可获得的数据。

19

不间断的用户体验

想要产品吗？单击此处，访问此页面。

想要查看更多图片吗？单击此处滚动页面。

想要做出评论吗？单击此处，并查看底部。

想要购买吗？单击购物车图标，然后跳转到结账页面。在签名前，请先填写27个文本框，同意以下条款和条件，获取电子发票点击这里，跟踪你的订单点这里，然后你终于可以购物了。

上述操作流程中的每一步仿佛都试图让你质疑自己的购物意图。每一个需要你填写的文本框都占用了你可以做其他事情的时间。用户必须有很强的动机才能完成在线购买流程。

（译者注：必须要说下，国内的淘宝等应用比国外的购物应用的用户体检好很多。）

如果有这样一个网站，只需要用户有购买意愿，剩下的网站都可以帮你完成。感觉怎么样？一键控制所有功能。移动端正在将付款集成到简单的手势和面部ID中。而目前网页中还没有看到这种趋势的兴起。

上面自行车配置就是一个很好的例子，它体现了一种探索和尝试产品的购物体验

过去的技术对隐私疏忽大意，所以它对人类的隐私安全的确负有责任。解决这个问题的唯一方法不是逃避个人数据，而是为了更好的目的而使用它。用户不必推测他们是否可以将自己的个人信息委托给你。如果你的产品需要数据，你就要做到让它们像在混凝土中一样安全。而这就是我们的责任。我们的工作是理解用户的意图，让用户感到愉悦。只要我们遵守道德准则并与当今安全性要求保持一致，那么我们正在使用的方法都是可以的。

互联网依靠Cookie运行。没有它们，互联网将会一团糟。地理位置将是下一个重头戏。当用户的敏感信息得到足够的尊重，而不是被当作商品，不间断的用户体验才算真正开始。

不仅仅是关于购买的用户，任何目的的用户都该被如此对待。你让你的用户感到安心和满足，那么，你才算赢了这场吸引注意力的战斗。

不要打扰想给你钱的用户。

20

设计者的尊严

技术炒作值得让所有人保持警惕。有的时候为了快速跟随潮流，我们会忘记我们自己入行的初心，在行业中多年的学习、挫折和专业知识。

盲目跟随一些趋势炒作，我们就忘记了自己的喜好和特色。“设计趋势”很酷，但是有自己的个人意见更重要。

做个小测试。翻翻你一年来的设计网站账号，看看你收藏了些什么东西。一年以后，你再回来看看，变化了多少。如果你做的东西让你感到不适，很有可能是因为它只是一次炒作，不符合你的初心。想要赚钱没有错，但设计师因与众不同而被人铭记。成功没有秘诀，但是始终保持寻找成功的心态对我们有好处。

最后，引用一段《天才的46条规则：创新者的创造力指南》中的话来结束本文：

“创造力是你前往未知的旅途中不知道答案时候的准则。在这样的旅程中，错误实际上只是一个必经的步骤。每个错误都会让你更接近答案。” 

最后总结下本文关于2020年的UI/UX趋势：

• 有意义的产品价值

• 令人惊叹的动画

• 不对称布局和分屏

• 低调的渐变色

• 和谐的色彩

• 产品说“人”话

• 混合的体验

• “美”又回来了

• 设计+开发

• 空白

• 注重渲染

• 多样的用户体验

• 新的移动Web应用

• 重叠的排版

• 插画

• 可定制的导航

• 全屏的视觉效果

• 数据可视化

• 不间断的用户体验

• 设计者的尊严

原文作者：Moses Kim

原文链接：https://uxplanet.org/ui-ux-design-trends-for-2020-f6512b5eb3ac