微软宣布Fluent UI:开启Microsoft 365体验新篇章-冯金伟博客园

  在今天更新的官方博文中,微软面向开发者和用户详细介绍了针对设计语言 Fluent Design 的改进。目前该设计语言已广泛应用于 Outlook、Teams 和 OneDrive 等应用程序中,而在这篇博文中微软引入了 Fluent UI,在共享章程下实现了 Web 和移动 UI 的统一。

  在这篇博文中微软详细介绍了开发者框架的演进,收集和采纳了来自设计师、开发者、可访问性、国际专家以及编写人员的意见。微软表示已经确定了 Fluent Design 需要改进的诸多方面,在 2020 年他们的目标就是缩小设计和代码之间的差距,而第一步就是从设计 token 系统开始。

微软宣布Fluent UI:开启Microsoft 365体验新篇章-冯金伟博客园

  全新的跨平台库

  Fluent UI 是 UX 框架的集合,方便创建可共享代码、设计和交互行为的 Web 和移动应用程序。

  使用来自微软的 Fluent UI React(web)、Fluent UI Apple(iOS 和 macOS)以及 Fluent UI Android GitHub 库的组件,可以确保 Microsoft 365 应用和服务保持强大的生产力基础上,同时在跨平台上感觉更直观、更连贯。

微软宣布Fluent UI:开启Microsoft 365体验新篇章-冯金伟博客园

  通过添加新的 Fluent UI React Native library,微软创建了多个跨平台组件,能够让 JavaScript 开发者更容易跨设备向客户快速交付体验。

  各种设备原生体验,依然统一的 Fluent

  微软表示,他们相信他们的 Fluent 设计元素,如自定义导航栏,使应用程序在原生 iOS 和 Android 平台上仍能感受到独特的 Fluent 和跨平台的一致性。

微软宣布Fluent UI:开启Microsoft 365体验新篇章-冯金伟博客园

  提供更连贯、更具生产力的体验

  在所有的微软 365 应用中使用相同的设计语言,还可以让用户轻松地从一个应用切换到另一个应用,并对如何浏览它和完成事情有一个相当好的想法。平台也是如此。 微软指出,人们经常会在一台设备上开始一项任务,然后从另一台设备上完成,因此创建跨平台的连贯体验可以减少客户的认知过载。

微软宣布Fluent UI:开启Microsoft 365体验新篇章-冯金伟博客园

  微软主题架构的现代化

  目前,微软多款产品都使用了脱节的主题涉及方法。

  微软正在寻求对其主题架构进行现代化改造,以创建一个可扩展的、面向未来的设计系统。在通用的主题架构、分类法和跨微软框架下,未来能够更轻松、更快速的将主题部署在所有平台上。

  为了做到这一点,微软正在从固定值转向更多的不可知晓的变量,也就是 design tokens(设计令牌)。设计令牌定义了 UI 界面的视觉属性,并使用通用的语法将设计与代码连接起来。设计和开发工具都可以访问的集中式风格库将作为更新的地方,无需修改编码的组件。

  为了暴露出令牌的力量并减轻其复杂性,微软正在探索如何在现有的设计工具内部满足设计人员的需求。由于微软的大多数设计人员都在使用 Figma,因此,微软寻找了一些方法来扩展该工具的功能,以支持他们的设计令牌,而且几乎没有任何障碍。

  初步成果是 Figma 插件,它将取代原生属性面板。设计师将不再通过属性面板分配颜色或笔画宽度来创建设计,而是将为其图层分配令牌。如果有必要,他们可以将这些令牌重新映射为不同的值,让任何变化在整个设计中传播。微软还在建立开发管道,将这些设计令牌转化为平台特定的值。

  这些努力共同帮助将设计值直接分配到代码库中,为产品设计人员和开发人员提供了一个完全集成的从设计到代码的工作流程。

  对于终端用户来说,能够轻松选择加入他们创建的应用程序的主题库。然后他们可以对这些库进行定制,以更好地反映产品的品牌或服务,并在整个生态系统中感受到更多的一致性。

  微软将在 5 月 19 日-20 日的微软 Build 2020 在线大会上谈论更多关于 Fluent UI 以及他们对 Fluent 设计系统的未来期望,该大会对所有人免费开放。