从视觉、交互和技术三方面，系统分析2021设计趋势

这是一篇回顾 2020-2021 年用户体验设计趋势的文章，通过 2020 年的回顾，然后再进行视觉、交互和技术三个方面的拆分描述。由于篇幅比较长，因此您可以找个比较空闲的时间，躺好然后再开始阅读，希望以下内容能为 2021 年的工作提供一些参考。

想要探索未来趋势，必然需要了解当下和过去的事情。因此，我们需要先来回顾下 2020 年的变化吧。

2020 年因为疫情，让协作、云端、即时通讯、远程会议、AI 智能等等，成为了远程办公的必需品。目前，疫情在国内已经获得了控制，后疫情时代已经到来，许多最初没有的习惯，在发现新的工作模式更加有效率后，也就继续保留了下来。这些保留下来的习惯，也将在 2021 年会有更进一步的发展。

1. 大厂的变化

在视觉设计层面，各大设计语言陆续推出了新的设计版本，更为突出各自设计风格，以建立自己的视觉护城河。谷歌发布了 Android 11，Apple 发布了 iOS14，微软持续宣传他的 Fluent UI 设计理念。在国内的办公领域，腾讯文档推出了类似 Fluent UI 设计理念的风格，石墨文档依旧保持独特的东方韵味，飞书发布了飞书文档，继承飞书本身简洁的 UI，以及活泼的插画风格。

谷歌的 Android 11

基于 Material Design 设计的 Android 11，装饰上运用了简洁的几何图形，UI 细节上开始趋向圆角的运用，色彩方面选择了更为协调的配色，对比之前版本纯度有所降低，显得更为高级。

苹果的 iOS 14

UI 设计延续原有的风格，清晰的字体，大圆角的运用，加上丰富的动态效果，并且新增了许多贴心的新功能，例如悬浮播放视频、主屏幕的 Widget。

微软的 Fluent UI

这是微软为跨平台，而提出的设计解决方案。支撑设计概念的关键词有深度、材质、动画、光线等等，这听起来感觉与 Material Design 特别相似。不过在最终的视觉呈现上微软会更接近于真实世界，例如，透明的毛玻璃效果，或更为立体的图标等。2. 社区中的热门设计

Behance 和 Dribbble 在 2020 年出现了许多以 3D 插画为主视觉的设计方案，因为技术的发展，设计师借助 Figma 或 Dimensions 就可以轻松的创作所需的 3D 素材。关键的这不是设计方案中的“花瓶”，因为在 Mac 的最新系统 Big Sur 中，已经开始运用了 3D 图标，相信在以后 3D 的运用场景将会不断的被挖掘出来。

2020 年初时在 Dribbble 流行起来的一个风格叫“新拟态”，这是将投影运用到极致后出现的效果，正如作者所说的：“让我们想象一下，如果在移动界面设计中，投影的形式发展的更好的话，那将来的界面将会是什么样的，这是我的愿景。”新拟态在视觉上表现确实很惊艳，为此 Android 还制作了一个新拟态的 12 宣传视频，但是，主观感觉这应该很难广泛运用到实际产品当中。

1. 设计服务于内容

设计专注于表现内容，这是从包豪斯到现在一直遵循的规则，而这个理念也将会持续下去。设计目标终将是需要把关键信息传达到用户手中，让用户知道自己为什么在这，这里有什么，并且能到哪里去。

技术的发展，形式也一直在发生变化，提升信息传达效率，这已经不单是平面设计专属。学会运用动效、交互或智能推荐等综合的方法，来达到设计目标，会是将来常用的设计手法。

2. 更大的圆角

在以前由于屏幕分辨率太低，窗口四角正常会运用直角，因为圆角会出现锯齿或者模糊，影响界面美观。而先如今移动端屏幕质量早已超过纸媒的印刷技术，圆角也开始被广泛的运用。另一方面圆角在之前的认知中，是儿童的专属，是更为亲和力的表现形式。而经过近几年的发展，这个偏见正在慢慢改变，因为圆角也可以做的很高大上，也能设计的很潮流。

苹果总是第一个吃螃蟹的公司，Mac 的最新系统 Big Sur 整体变得更加圆润，窗口四角从以前的 10px 增加到 20px，并且全新的控制中心也沿用了 iOS 14 的设计风格和设计布局。值得再一提的是，微软 Win10 的概念稿中也开始尝试运用起了圆角。所以这个趋势是蛮值得关注的一点。

3. 用有含义的插画提升用户体验

设计师常常会陷入形式主义，而忽略了本该表达的内容，特别是在插画上。也许这个道理每位设计师都懂，但为何还是会前仆后继的扑倒在自我满足的陷阱中呢？也许原因中会有一点是，当内容过于直接表达，或者元素过于普通，就很容易让作品变得毫无趣味，这就是矛盾所在了。

那如果设计师既不想脱离内容，又不想设计出乏味的设计，怎么办呢？这就需要让插画具有含义，而不是沦为纯粹的形式。优秀的插画所承载的信息量，能够远比文字或界面 UI 来的丰富。

4. 新材料新拟态

包豪斯有个教学目标，“培养感觉清晰，认知准确的设计师”。因此在包豪斯的基础教学中，会让学员研究各种材料的不同属性。在 UI 设计当中，我们也能制作出各种各样的材料，在拟物化的时代就能证明这一点。但在 2020 年初时，当某位设计师发现了一种新材料，并把这种材料运用到了 UI 设计当中，一时间火爆整个社区，这就是上面提到的“新拟态”。

这世界是充满可能的，所以我相信在未来还会有更多的材料会被发现，或者被以新的方式使用。例如，在 2020 下半年又有一种风格开始回归“毛玻璃”，其中我们所知道的钉钉，在钉钉 6.0 的设计概念中就融入了毛玻璃的效果。在社区中，毛玻璃也被运用到 UI 的各种场景中卡片、弹窗或图标等。实话实说，毛玻璃的材质的确能增加许多品质感。

5. 自然的界面和运动效果

这里所说的自然，是能让人感到熟悉和安心，是以人为本的设计。王敏老师说过：“科学求真，艺术为美，设计从善，设计可以作为结点，让真善美实现统一。”连接人与产品之间的纽带是 UI 界面，它需要承载不仅是信息内容，还有用户体验，因此，以人为本的设计终会赢得用户的喜爱。

自然运动效果，不是那种大开大合的酷炫效果，而是让界面过渡更为自然合理。想要让界面体验更为自然，那必然要遵循真实世界的物理规则，例如，重力、摩擦力、向心力、浮力等动态效果。

6. 来自未来的风格

科学技术的快速发展，让我们感觉未来近在咫尺，但又十分迷茫不知何去何从。我相信承载 UI 的媒介，必然不仅仅是现在我们所使用的各种设备。VR、AR 或全息影像等技术的发展，将使得 UI 设计会有更多的可能性。赛博朋克 2077 也许真的离我们不远，那种满世界无处不在屏读的社会，怎样的设计才能真正满足需求呢？这是我们需要长期思考的问题。

7. 深色模式

在 2020 年各大厂都推出了暗色调模式，这已成了现如今 APP 的标配。除了深色模式外，以后还会在可视性、场景和实现成本等因素方面，更进一步的打磨。

1. 更具装饰性的平面插画风格

虽然在 2020 年不管是社区，还是实际项目，许多设计师都开始热衷于 3D 插画，就连苹果微软也不例外。但是 Google 却继续坚守自己的设计风格，扁平的装饰性插画，例如 Android 11 就运用简单的几何图形进行装饰，相关的插画也是更多运用的扁平风格，这种坚持必然会有其重要的原因。

装饰性插画在各种屏幕的适配性更广泛，并且在绘制成本和实现成本方面也会更有优势。在屏幕媒介还没发生颠覆性改变前，我认为扁平的装饰性插画在未来将还会大放异彩。

2. 情感化的插画设计

后疫情时代的远程办公，我们需更加考虑如何缓解合作的疏离感。如何拉近人与人之间的协作，打破远程的空间桎梏，让合作更具沉浸感。这时情感化的设计就能充分体现它的价值，例如，这几年开始火的 emoji 头像，或者各种表情包，它们让沟通的双方产生情感共鸣，而不是面对着冷冰冰的屏幕。

3. 插画的组件化与创新

皮克斯运用技术的创新，提升了质量和效率，从而改变了整个动画的历史。对于我们来说，未来的插画需求会越来越多，并且还要求独特的创新性，这就需要有更优的解决方案。

Ant Design 的 HiTu 在 SEE Conf 的时候提出了解放图形化生产力，那就是将插画各部件组件化，这有效的提升插画效率。然而在插画库的维护方面，还需要设计的创新。因为效率的提升，让设计师能有更多时间，专注于更有创造性的工作，然后将新的创意理念融入部件，最终完善整个插画组件库。