2019 UI 和 UX 设计趋势 [译]

图片描述

对于不断发展的设计行业来说,年底是一个分界线,你可以有一周多的时间放下工作去享受假期。

同样,我们可以在年底的时候做一些深度的探索,一起看看来年你将会做些什么,这是一个去深入了解设计行业未来发展方向的好机会。

去年我们做了一个关于移动端 UI 设计趋势的预测报告。今年我们将进一步深入的探讨 UI & UX 设计,这次不仅仅只局限在移动端,因为对设计来说,很多东西在不同场景下都是相通的。

我们使用的工具,技术和对产品面对用户时如何工作的理解都在逐渐进步

我们迟早会形成一种通用的设计思维模式,这种思维模式包括我们产出的一切,而不仅仅是关心如何把产品卖出去。我们甚至可以用更好的设计对社会产生影响。尽管如此,我们离未来还很远,先让我们看看 2019 年的 UI & UX 设计趋势。

依照惯例,我们会对每个趋势中存在问题进行提醒,以免滥用。

强大的浏览器

浏览器不仅仅是互联网的载体,也对互联网产生影响。现代浏览器正在变得更快,更强大,更有吸引力。

  • 对浏览器的基准性能测试证明了大多数的现代浏览器有显著的性能提升。
  • 由于流式编译技术的出现, 在 Mozilla 的报告中新编译器要比之前的编译器快 10-15 倍。
  • 所有的现代浏览器都支持 WebGL 2,它支持全新的 3D 纹理和对象渲染,fragment 深度和顶点数组对象。

现代浏览器已经有能力来缩小概念与现实之间的差距

img 可惜 evolutionoftheweb.com 在 2012年就停止运营了,图表并不是最新的

😑

虽然浏览器技术的进步会提升其价值,但不会影响到更高层次的行业。互联网上的内容太多了,浏览器的工程师很难提出使互联网变好的通用解决方案。

即使浏览器本身非常强大,但无可避免的,用户会访问到有着不好的用户体验的网站。所以我们必须用更好的设计来发挥浏览器的潜力。

大多数的网站使浏览器看起来像糟糕的软件。

有目的性的动画

浏览器技术的进步为动画打开了大门。我们探讨的不仅仅是简单的动效,这是一个与心理学和生物学相关的全新设计方向。

我们将会看到在 2019 年,这一领域的知识将会有更深入的探索。复杂取代了流行成为动画设计的主要特征,动画的运动和之间的过渡传达了很多原本会被丢失的信息。

现在你可以在两个页面之间肆意发挥你的创意想法

img Cocoladas Creative Blog Artist Preview Page By Zhenya Rynzhuk

想要和客户在更深层次上交流,就要抓住和他们在一起的每一秒钟,让每一秒都变的有价值。设计师们正在有意识的这样做,以免让客户直接面对生硬的营销广告。

动效设计也不仅仅是单纯的展示和填补空白,现在它已经成为品牌的一部分。尽管如此,我们也要充分利用我们的经验和想象力去确保它方向的正确。

img by Eduard Mykhailov

如果你还没有想过你的 logo 是由什么组成的,它带给人怎样的感觉、味道、气味和声音,那么是时候去做了

动效比光影、形状和材质更有说服力的原因是动效会讲故事。如果你能通过一些有趣的想法,让 logo 成为你故事的一部分,那马上去做吧!

img Lakko – Logo animation by Zlatko Kelemenić

😑

话虽如此,但任何东西都要考虑所处的环境,包括动画。在设计师的角度看到的不一定是用户所看到的,如果我们设计的是实际可操作的产品,或者本身用意不良,即使它们是有意义的,也不能加入动画。如果价值观上有矛盾,一定要先保持中立的态度。

不要毫无顾忌地使用动画。

3D 界面和带深度的扁平化

3D 渲染和 CG 镜头已经出现了很长时间。为了速度、性能以及可访问性,设计人员在以往的 UI 设计中都会避免使用 3D 元素。但现在更强大的浏览器允许我们将高度复杂的特效或有着电影般视觉效果的场景使用在网站中。

3D 技术使现实和数字动画的边界越来越模糊。

这一趋势将特别适用于具有流程复杂且不太直观的产品。利用 3D 界面,可以使用户对产品的理解更加直观和深入。

img Baker Hughes Digital by Sanu Sagar

结合有目的性的动画,3D 技术将会成为一种强大的设计工具。

随着技术的发展,移动端上功能强大的芯片不仅可以渲染 3D 对象,还可以在界面中使用它们。现在在手机上的显示效果已经非常好了。

扁平化的 UI 设计趋势已经存在 5 年多了,并且一直没有发生真正的变化。但最近我们感觉到了一个明显的转变,那就是在不改变扁平化本质的情况下,向它增加深度和其它纬度。为什么深度是必要的呢?这也是扁平化出现的原因——我们需要象征主义来理解一切。扁平化是最核心的象征。

带深度的扁平化是扁平化新的发展趋势

3D 和 CG 技术让我们知道了用户对他们能与之互动的东西会有更好的反应。扁平化也能够以某种独特且尚未被探索的方式实现 3D 效果。这种方式被称之为伪 3D,我们可以在平面上使用光影、叠加等方式来模拟 3D 的效果。

img ARTA / Art Gallery by Mike | Creative Mints

还有一个虚拟的 3D 趋势正在兴起,它的原理是用 After Effects 等传统的设计工具来模拟 3D 的运动模式。

img Astronaut by Markus Magnusson

在 2019 年,我们甚至可能看到拟物设计以一种新的方式回归。如果扁平化可以有深度,它或许会在未来更加接近拟物化。利用拟物表现手法的同时保留扁平的象征意义将会是未来的趋势。

😑

但我们最终会尝试完所有的方向。目前 3D 和 UI 设计的结合并没有一个确切的方向。它有两种发展趋势——简化或复杂。虽然需要更复杂的技术和努力才能给我们留下深刻的印象,但是使用简单的技术实现一个大胆的想法同要需要勇气。然而,如果复杂的界面毫无意义,或者大胆的想法并没有使人们产生情感上的共鸣,那么所有的努力都将毫无用处。

我们可以设计出让人印象深刻的图像,现在我们需要唤起人们情感上的共鸣,同时解决更深层次的问题

超现实主义设计(Surreal design )

如果不能唤起人们情感上的共鸣,更先进的技术带来的 3D 界面和动画将毫无用处。有趣的是我们不需要用更复杂技术来达到这个目标,叛逆的想法会更吸引人。

有趣的东西总是违反常识的

一些重大的 redesign 和相关的插画因为这个原因变得有趣起来:

img How to stay scrappy by Justin Tran for Dropbox Design

img Shop Small by Joe Montefusco for Mailchimp

这种卡通风格的插画以至于 UI 界面都有一个共同的目的——保持品牌形象的新鲜感。如果你的品牌名字是一种食物,你甚至可以用永无止境的嗡嗡声包围它。什么风格无所谓,但它必须是标新立异的。期待在 2019 年看到更多的先锋设计和超现实设计。

😑

但并非所有公司和产品都能接受这种标新立异的设计风格。产品受众越广泛,设计就需要越中立,尽管这可能只适用于知名品牌,但小公司和那些正在努力挣扎的公司首要目标是要保证自己活下去,所以中立的设计风格对他们来说会更安全。

创造一种趋势,让大家追随

渐变 2.0,鲜艳的色彩和黑暗模式

伴随着技术的发展,我们的电脑屏幕具有更加出色的色彩表现,甚至必须通过新的默认壁纸来展示这一点。设计师也一直在探索 UI 设计中可用性和渐变之间的边界在哪儿。

渐变本身不再受到关注,但它们现在为界面带来了深度和空间感

img Grabient 2.0 by Eddie Lobanovskiy

渐变 2.0 是微妙和简单的,它不再使用冲突的颜色,而是有着清晰的光源方向和形状以带来深度信息。

鲜艳的色彩不会随处可见,我们将会看到更多层次颜色的组合。事实上,即使是单色系也会通过深度和空间感呈现不一样的视觉美感。

img Valley Illustration by J.HUA for Tunan

当我们我们缺乏信任感和乐观的状态时,鲜艳的颜色能促进积极性。你会信任这样的加密应用程序吗?

img crypto app by uixNinja

更酷的是,在深色的背景中,鲜艳的色彩和有意义的渐变会更加突出。深色主题的应用正在越来越广泛,我们曾经在之前采用人类学的方法去研究深色主题为何是有效的。那些能够在深色主题中取得可用性和丰富色彩间平衡的人,将会在明年有更好的成就。

带有深度的扁平化、鲜艳的颜色和 3D 效果在深色主题中的表现

img Dashboard by uixNinja

😑

尽管如此,但可用性并不是渐变,鲜艳的色彩和深色主题存在的唯一问题。我们一般用鲜艳的色彩来强调重要信息,当屏幕上全都是鲜艳的色彩时该如何起到强调的作用呢?另一方面,并非所有用户都使用 OLED 屏幕,这会导致一些渐变的细节丢失。太多的对比度也会妨碍用户的注意力。还有,在户外的阳光下暗色主题是难以使用的,但这也许是件好事。

可变字体(Variable Font )

在字体排印学中,字体是由一个或多个字型组成的集合。设计师和作家必须考虑在当前 x 字高,笔划和字宽限制下文本的易读性。

当需要多种字体完成设计时,设计师必须提供所用字体样式的所有文件,只有这样,才能满足丰富的排版样式。但对于可变字体,你只需要一个文件,因为它可以满足几乎所有字体属性的调整。

可变字体可以在原有字体基础空间上产生非常丰富的变化

img Marvin Visions

可变字体在响应式设计和本地化设计中有很广泛的使用前景,在一些地方,设计师不得不绞尽脑汁把文字压缩到更小的屏幕上并且还要保留字体特征,或者为了使用另一种字符较少的语言而拉长文字。

img VOTE by Josh Rinard

当 Web 字体被引入移动布局时,缺乏响应式是一个问题。字体没有足够的灵活性,影响到了文本的易读性,甚至也会影响到设计的本身。可变字体是非常新的技术,它们有助于更快地为网站提供字体,并帮助简化设计过程。

但这仅仅是个开始,可变字体的应用在 2019 年还有待探索

img Typography.Guru

😑

但是这种智能的可调节的字体需要多久才能成为一种促销手段呢?如果你可以让字体微妙的去适应环境,又如何去保护读者不受操控?我们现在使用的字体起源于书籍印刷,印刷是受物理条件限制的,这让人们无法去节约纸张和墨水,也使阅读成为我们进步的最重要的原因之一。

Figma

“设计师需要会编程吗?”

“工程师是否需要了解交互设计?”

这些问题被反复提出,目的很简单:我们一直在努力减少设计和实现设计过程中的阻力。因此,如果问题的目的是这个,那么它也应该也能为我们带来解决问题的方法。

学习编程看起来是一种合乎逻辑的选择,如果可以自己开发确实可以避免很多问题。但是,如果既要成为一名优秀的设计师,又要成为一名优秀的工程师,这需要非常多的知识量,你可以做到吗?如果可以做到,那当然是最好的,但对于那些做不到的人,也应该可以有其他选择。

我们的目的不是培养全栈设计师,而是使开发好的产品变得更加简单

实现这一目标的另一种方法是推广和使用更强大的设计工具, Figma 是其中之一。在此之前,设计师在工作过程中必须考虑许多与设计本身无关的东西,比如操作系统、插件、存储、同步、协作等,我们需要同时解决这些所有的问题,但我们希望减少压力。

img

Figma 是一个为我们考虑的设计工具,它有着很多前瞻性的功能。

Figma 摧毁了 Sketch

Figma 完成了 Sketch 和 Adobe XD 所做的一切,而且做的更好。更重要的是,Figma 旨在构建将要实现的内容。每个 Figma 组件都可以通过 API 转换为 React 组件。到目前为止,Figma在成本、性能、速度、协作、共享、插件、系统支持等方面击败了它的竞争对手。即使这样,Figma 仍在继续开发中,我们可以预见,在 2019 年它还会变得更加强大。

😑

当我们开发出更好的产品,但却未能建立对其道德的约束,只会自取灭亡。看看 Twitter,它正在努力挽回自己的名声。事实证明,仅仅把工具放在那里是不够的,我们还必须观察人们如何使用它们。Figma 会保护用户不受恶意的用户体验、糟糕的设计和虚假新闻的影响吗? 让我们拭目以待。

语音交互界面(VUI)

设计不一定必须是可视化的。经验告诉我们,如果我们正在建立一种非触觉体验,工具并不重要。设计逻辑本身就是是和心理学密切相关的,构建语音控制系统则意味着我们要对自然语言进行处理。

语音用户界面是复杂的,也是感性的

语音交互界面最大限度地实现了无界面的概念。整个交互过程是内部的,它只与语言、环境和数据有关,而与界面设计无关。即便如此,设计师们仍痴迷于寻找展示语音交互界面的方法,目前已经有一些让我们印象深刻的界面和动画。

多数情况下,语音交互界面与语音技术并没有联系,但它们为用户使用语音技术做好了准备

在 2019 年,随着越来越多的设计师从单纯的追求视觉设计转变到重视有意义的设计,我们可以期待语音交互界面会有更好的发展。

😑

具有讽刺意味的是,语音 UI 设计最大的挑战不是人机交互,而是人和人之间的交互,我们必须找到比这两种交互更智能的技术来协调其中的关系。我们生活在一个严重失衡的全球性社会,语音技术的出现可能会在某些方面扩大人与人之间的差距。

作为设计师,我们应该始终把造福人类看作是最高优先级。如果某种技术和设计对人类的长远发展没有任何好处甚至有危害,我们应该毫不犹豫的抛弃它们。

UI & UX 写作

去年,设计师们开始关注写作在设计中的重要性。作家、记者靠写作吃饭,我们也定义了写作在设计中的作用:

你必须掌控你的产品与客户沟通的方式

在此之前,很多企业的宣传和文案中充满着自夸和专业性的术语。尽管可能业绩很好,但他们还是缺乏简单明确且有说服力的措辞来吸引他们的观众。

UX 写作有两个简单的原则:礼貌、有用,其它一切都是源自于这两个原则。简洁就意味着对别人礼貌,尊重他们,为他们节省时间。文本是死的,用户是活的。有用意味着我们要明确的表达观点,避免模糊不清的含义,表达的意思要真诚,不要隐藏任何缺点。永远专注于帮助用户,而不是炫耀你的口才,不要 SEO,也不要用营销手段,这样就足够了。

一旦你开始掌握礼貌、有用这两个原则,UX 写作就很容易。

人们不会想看到你的自我推销,他们想知道你是否能帮助他们,让你的产品告诉他们。

在 2018 年,我们看到大公司的的发声开始有了变化。他们不再追求独创性,而是关注用户的价值。在 2019 年,我们希望 UX 写作发展成为一门设计学科。

img

UX 写作和 UX 编辑之间的区别在于宽泛性。UX 作家写的文章是面向用户的。UX 编辑是通过分析、整理、重组,使文字变得简单易读。UX 编辑并没有速成班,这需要你的经验、观察,最重要的是有一颗善良的心

2019年的每一次重要的 redesign 都需要 UX 编辑人员

😑

每一种趋势都会经过一系列阶段。第一个是就被怀疑,这会很容易扭曲其本身的价值。UX 写作也不例外,简单会被怀疑为愚蠢,直白会被怀疑为无礼,有说服力被怀疑为以势压人。

在产品设计中仍有创意写作的空间。例如耐克(Nike)和波音(Boeing)正在付钱给科幻作家,让他们预测自己的未来。

产品设计师

UX 设计是一个非常广泛的术语,它是跨行业服务设计的一部分。设计师和设计公司的服务对象非常广泛,可以从简单的工具到复杂的金融科技平台。

服务设计就像一块毯子,它可以普适性的覆盖到每个行业。

服务设计师可以有自己的风格,他们可以把自己的风格融入到任何产品。这就是他们为什么出名,也是企业愿意为之付费的原因。

然而,大多数公司都是产品公司,这需要设计人员对产品有更深入的理解。这些公司需要的是一名可以深入到团队中的产品设计师,他可以通过数据对产品的整体作出判断。

产品设计比服务设计具有明显的优势,因为前者具有更好的分析能力和测试设计决策的能力。

产品设计师有能力专注于与产品相关的所有细节。与大多数服务设计人员不得不面对的假设数据相比,他们对所设计产品的用户群体有深入的了解,并有真实的数据可供参考。

img

😑

向产品设计过渡需要积极的态度。冒着让自己投入在某个行业或产品的风险,我们做出了我们可能永远都不会回来的选择。在这种情况下,我们必须考虑到所处行业的生存能力和行业内专业发展的前景。

机遇总是降临在有勇气的人的身上,在 2019 年,我们将看到更多的设计师们尝试在专业领域有更深入的研究,时间会告诉我们结果。

最后,我们注意到最大趋势是设计的意图逐渐变得真诚。你可以耍很多的小心思,但没有什么能打败一颗为用户着想的心,这也是设计的核心