这些UI和UX趋势，在2019年最值得关注

绝地灬酷狼 2023-02-09 14:07 14阅读 0赞

对于设计趋势，我们一直都在定期总结和梳理。但是以往的设计趋势总结通常只会聚焦在某个很小的、特定的点上。实际上，在设计越来越现代的今天，其实当下的语境是塑造各种设计趋势的根源，而它几乎是全部趋势的最好概括。我们以往所总结的「设计趋势」大多停留在风格和技法层面上，而现在当你观察设计领域所呈现出来的状态，会发现这些东西都是互相关联的，单独挑出其中的一种趋势，往往有以偏概全的嫌疑。

现在我们设计师所面临的状况，仿佛是所有的技术进步和全部的新工具，正在打造各种产品一齐解决用户所面临的全部问题。

![format_png][]

设计越来越系统化，设计师的身份不再局限于视觉呈现这一个层面，对于产品、营销的要求早已成为很多企业招聘的基本要求。更系统的知识、更全面的方法支撑，让设计师能够在产品设计流程中作出更好的决策。

尽管我们还没有达到这个可预期的未来，但是我们仍然向着那个方向坚定不移地靠近着。

我们会将这些明显的设计趋势视作为当下设计不足的一种提醒，密切关注，确保我们能在现有基础上越做越好。下面，看看我们通过持续观察所预测的2019年的设计趋势。

**更强的浏览器**

毫无疑问，技术的发展让浏览器正在变得近乎无所不能，无论是桌面端还是移动端。

浏览器基础测试所呈现出来的数据，反映出的情况很明显，绝大多数的浏览器在性能上都在飞速地增长着。由于流式编译的流行，使得浏览器的设计和开发的效率越来越高，Mozilla 的报告显示，目前新的编译器比以往优化过的编译器还要快10到15倍。

如今，所有的现代浏览器都支持 WebGL 2 ，它支持全新的3D纹理和对象渲染，边度深度和顶点数组对象。

![format_png 1][]

桌面端和移动端的浏览器正在弥合概念设计和实际可行设计之间的鸿沟，想到就能做到正在成为一件越来越真实的事情。

虽然浏览器本身性能一直在提升，不过浏览器的开发者仍然无法兼顾到全部的网站，尤其是以往设计得比较糟糕的网站。身为设计师应该多了解浏览器，并且尽量去发挥浏览器应有的性能。

**目的明确的动画效果**

近两年来动画效果的持续升温，这几乎成了设计师的新必修课。而浏览器和硬件的性能提升，使得动画效果近乎无处不在。可是，现在新的问题出现了，那就是设计师不仅要让元素动起来，而且要更加合理地运动。

动效设计是一个典型的多学科交叉之后的产物，设计师不仅要懂得物体运动的物理规则，而且要懂得在 UI 和网页中使用动效的心理学效应。

动效已经不仅仅代表着时尚，它是诸多知识的交汇处，设计师需要通过学习来了解如何合理、正确、有效地呈现动画，传递信息，确保体验，还不会让人厌倦。

![format_png 2][] 以前，界面和界面之间的间隙是无人区，如今是动效设计师的后院。

△ Cocoladas Creative Blog Artist Preview Page by Zhenya Rynzhuk

动效让用户更深层地参与到 UI界面当中，并且每一个交互都更有意义。但是，动效能做的东西更多，UI界面中每个元素的运动和变化都有意义，都会有产出价值，你要怎么驾驭它们？这是2019年需要面对的问题。

![format_png 3][]

△ Fuck by Eduard Mykhailov

哪怕是 LOGO，加入动效之后，都会呈现出不同的样子。你的LOGO 要带有什么样的感觉，传达什么样的情绪，有着什么样的变化？如果都没有，那么你应该想想了。比起简单的布局、光影和材质，动效所传递出来的信息量更大，表现出来的效果更神奇，能承载的故事性是令人咋舌的。那么，为什么不让动效来帮你做点什么呢？

不要太过放飞，还是让动画效果给你产出价值吧。

△ Lakko — Logo animation by Zlatko Kelemenić

**深度扁平和3D**

游客，如果您要查看本帖隐藏内容请[回复][Link 1]

△ Baker Hughes Digital by Sanu Sagar

至于扁平化的 UI 设计，在过去的几年中一直是主流。最近，我们发现扁平化的 UI 元素，在视觉深度上开始发生明显的变化，但是整体风格和使用方式上并没有明显变化。当然，在纵深上的变化，很大程度上是强化层次的象征意味，让用户更容易理解，而扁平依然是核心的特征。

深度扁平，就是新的扁平化设计。

![format_png 4][]

△ Cards 3D transition by Gleb Kuznetsov

![format_png 5][]

△ 3D flip menu by Minh Pham ✪

3D 和 CG技术的结合让用户在视觉上感觉仿佛是在和真实内容进行交互，这一点和深度扁平在内核上是一致的。从某种意义上来说，深度扁平也可以算是伪3D ，它是为了营造出真实的质感，而调整出拟真的光影效果（在纵深上）。

![format_png 6][]

△ ARTA / Art Gallery by Mike | Creative Mints

另外还有一种伪3D的处理方式，就是使用AE 这样的传统工具，在二维平面上模拟物体在3D的运动方式。

![format_png 7][]

△ Astronaut by Markus Magnusson

在接下来的2019年，我们有很大的机率会迎来拟物化设计的回归。如果扁平化设计在纵深上足够明显的话，它会更加接近等轴测的效果。如果真的要给未来一年的趋势进行界定的话，应该是保留扁平化设计的趋势，并且在界面中尽力探索还原真实世界的层次和质感。

当然，我们能拥有的选项太少了，要么做的更简单，要么更复杂。想要给人留下深刻的印象，必须是让人感觉印象深刻的，无论是彻底抛弃复杂性，还是使用疯狂的概念，都需要设计师拥有足够的勇气。最重要的始终是界面本身功能明确，否则设计的形式感就失去了意义。

我们可以使用令人深刻的图片，但是如果解决不了用户深层次的问题，还是没用。

**超现实主义的设计**

更好的性能和更好的技术并不一定能塑造优秀的设计，如果不能产生情感影响，那么技术也解决不了。具有讽刺意味的地方在于，如果你想最大程度地发挥影响力，不一定需要太强大的技术支持。而在设计领域，叛逆的设计一直都显得那么吸引人，这很大程度上是因为它们天然地与其他不同，让人忍不住被吸引。

有时候，我们需要一些不一样的东西来平衡常识，比如让魔鬼站在肩膀上，这样会更好玩。

一些特立独行的插画会让整个设计变得更加有趣：

![format_png 8][]

△ How to stay scrappy by Justin Tran for Dropbox Design

![format_png 9][]

△ hop Small by Joe Montefusco for Mailchimp

这些风格独树一帜的 UI插画的目的只有一个：让视觉和内容保持新鲜。在很多同类设计当中，插画的风格称得上是八仙过海各显神通，其中不乏设计得并不好看的，因为它们的首要目标，是用独特的视觉来给人留下深刻的印象，哪怕用的是丑陋的视觉。这些先锋而独特的视觉设计，你会在接下来的2019年看到更多。

不过，并不是所有的设计师或者企业都能接受的路子。这就像之前的粗野主义设计风格，通常是一些大企业和品牌更容易接受这样先锋的设计，而在生死线上挣扎的企业，通常会选择更加稳妥的风格。

**渐变 2.0，炽烈的色彩**

对于色彩表现力的追求，也是一个非常明显的趋势，从最新的网站配图和配色上，就表现得非常明显。设计师在 UI 的可访问性的探索上，所投入的精力是令人震惊的。

扁平化之后所进化出来的「微妙的渐变」已经无法满足需求了，直接的反映就是大家在渐变的色彩梯度和纵深上，开始更加用力，更加大胆了。

![format_png 10][]

△ Grabient 2.0 by Eddie Lobanovskiy

就像之前我们将更加成熟的扁平化设计命名为扁平化 2.0 一样，如今我们也有了渐变 2.0 。所谓的渐变 2.0 也不难理解，使用不冲突的色彩来构建色彩变化，拥有清晰的光源，使用具体的形状或者形体来统筹色彩，构建纵深。

鲜艳的色彩不会平铺满整个屏幕，我们将会看到更加清晰的色彩组合和明确的图层，事实上，即使是单色为主的页面也可以借助渐变 2.0 来创造视觉美感。

![format_png 11][]

△ Valley Illustration by J.HUA for Tunan

![format_png 12][]

△ crypto app by uixNinja

更酷的地方在于，鲜艳的渐变色彩在深色系网站当中会变得尤为醒目和富有表现力。

当然，另外一方面，设计师也要考虑到色彩本身的可访问性，在色彩表现力并不那么突出的屏幕上会呈现出的效果，以及对比度过强的配色，会不会对整个页面产生喧宾夺主的效果。追随趋势的同时，注意平衡。

![format_png 13][]

△ Dashboard by uixNinja

游客，如果您要查看本帖隐藏内容请[回复][Link 1]

![format_png 14][]

△ Marvin Visions

可变字体在响应式设计中蓬勃地发展着，设计师不得不绞尽脑汁地在不拉伸的前提下给各种屏幕，塞入他们所设计的字体。这仅仅只是一个开始，可变字体在接下来的2019年还会有更多的变化和发展。

![format_png 15][]

△ Typography.Guru

**Figma**

如今，依然有很多人在问这两个问题：

设计师是否还需要学习代码？

开发者是否需要学习用户体验设计？

这两个问题都因为很多设计和开发之间存在割裂。可是，无论是设计师还是开发者都很难真正兼顾到全部的知识领域，好在还有其他的选择。在如今的很多新兴工具当中， Figma 就是其中一种，它让设计师无需考虑操作系统、集成开发环境，不需要管理插件、存储，也不需要管同步和协同的问题。

![format_png 16][]

△ Totally switched to Figma by Alexey Kolpikov

从某种意义上， Sketch 和 Adobe XD 没有做到的事情，它做到了，Figma 的组件通过 API 转换和 React 组件来进行前端效果的实现，设计师可以在它的帮助下输出实际可用的代码和数字产品。在2019年，这款工具非常值得关注。

**语音用户界面**

设计师所实现的界面不一定非得是可见的。近年来，语音助手类产品越来越成熟，对于看不见的语音交互的要求越来越高。语音这种交互方式更加直觉，也更加感性。

而另外一方面，语音用户界面的构建要求也更高，它们和数据紧密关联，而非我们所熟知的视觉设计。令人深刻的语音用户界面在处理自然语言逻辑上有着突出的表现，为数不多的需要视觉化呈现的地方，也大多是报告和列表页，以及动效。

![format_png 17][]

△ Organic Artificial Intelligence design by Gleb Kuznetsov

视觉上的 UI设计和语音用户界面在绝大多数时候没有什么共同点。不过两者在深层逻辑上有很多共通的地方。本质上都是帮助用户更好的控制，获得想要的结果。在2019年，越来越多的设计师会参与到语音用户界面的设计当中来，从单纯的视觉美学工作逐步过渡到更有意义的体验设计当中。

**UX写作和UX文案**

游客，如果您要查看本帖隐藏内容请[回复][Link 1]

**产品设计师成为了一个新的职业**

UX设计和服务设计都是覆盖领域非常广泛的术语。它们是跨行业服务设计的一部分。从最初的视觉设计，到体验设计，再到如今所流行的服务设计，设计师的职能越来越复杂和多变。

不过，考虑到绝大多数的公司都是产品公司，所以当企业需要设计师走的更加深入的时候，会需要一个真正能够贯穿团队、深入到产品当中的角色，不仅能够用好数据，做好设计，还能够影响整个系统，统筹全部的工具和人员。

于是产品设计师成为了越来越清晰、独立和炙手可热的职能。相比于更加宽泛的服务设计的概念，产品设计的针对性更强，更加讲究分析、测试、设计、决策的综合能力。

产品设计师关注当前产品的服务形态和产品细节，深入洞悉产品所涉及用户的统计数据和调研个案，清楚如何利用真实的数据来完善产品，怎样让产品服务于这些需求迫切的用户，比起服务设计师更贴近产品，更接地气。

![format_png 18][]

△ Innovative Eye Pillow Landing Page Design by Sasha Turischev

不过，想要过渡到产品设计师并非易事，它需要一名设计师深入某个行业或者产品，需要具备当前行业的专业性，有清晰而富有远见的洞察能力。

在2019年，我们会看到更多更加专注于特定行业的设计师，逐渐演化为产品设计师审视产品专家，用一部分技能来换对于某个行业或者产品的掌控。

**结语**

对于即将过去的2018年和即将到来的2019年，我们所洞察到的最重要的趋势，其实并不是特定的技能、发展方向或者某种风格，而是在整体上，「人性」和「真诚」的回归。身为设计师，必须面对人性中固有的需求和倾向，必须保持良好的意图和 真诚的心境，方可带来用户能够接受的产品。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDAyMG8xcTRvMTQxMmo2eTZycmgucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDA1MGZ1M3hnbmE1Z2s3ejVhOW4ucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDEyMGV6aHRkMWhiNHczNDZ0bGMucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDIxMW5hOGw0cjZ1MTY2dWtuM3UucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[Link 1]: http://bbs.itheima.com/forum.php?mod=post&action=reply&fid=405&tid=438329
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDQzMGtkczJwcGxpbDJmcGRnb3IucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDQ1MmF5endxc2NpcTZ4MTFkeGMucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDUxNnpnYjg4dGJnYjlvcGY3Z2gucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDYyMG1teGEyeWFheTV5eTd5emYucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDcxNGhrcWk5cWF0ZGJ2OXkxeWkucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDc0NnQ4YWFsbnk4NTEwMWlkYXYucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDgyMGJyMjJ1Z3ptdW04dmptaG0ucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDg0OGlyNmlpemVycmQ4MHQ4dG4ucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDkxM3ZxcmdmcWtxZXB0ZmZmenoucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NDkzOGE1Zm5vMG4wZ3pnMG4wemwucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NTAwM3pmeWl6YzlpYzdhaWlnemkucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NTAyNXFqZWViaDNscDM0d2VxYmUucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NTA0OGJrY3F3YzNscjN2dzQweGgucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NTEyMXYxNDk0aTR4amkyNjk5dnYucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzA5LzE3NTE0OG55YzVjbDAwMDAybnM1cjUucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png