Fluent Design System

来自BetaWorld 百科
跳转到导航 跳转到搜索
Beta 常识 > 视觉效果 > Fluent Design System
NoDev Template.png

流畅设计体系（Fluent Design System，简称FDS，代号Project NEON）是微软2017年开发的设计语言。流利的设计是对Microsoft Design Language 2的改造，其中包括为所有Windows 10设备和平台设计的软件中使用的设计和交互指南。该系统是基于五关键组件：光，深度，运动，材料和规模。新的设计语言包括更加突出的深度和半透明作用。 设计的初步成果（特别是“亚克力”半透明效果，“显示”对按钮的影响）已纳入Windows 10，随着时间的推移，更多新的特色将被引入到Windows中。

设计原则

  • 自适应：Fluent体验在每台设备上都显得自然

Fluent体验可根据环境进行调整。Fluent体验在平板电脑、台式机和Xbox上显得很舒适-它甚至在混合现实头戴显示设备中表现得很好。此外，当你添加更多硬件时（例如用于电脑的一台额外显示器），Fluent体验将利用它。

  • 引人共鸣：Fluent体验直观且强大

Fluent体验可根据行为和意图进行调整—它们能了解和预测需求。 它们将人和思想结合起来，不管他们是站在地球的两头还是站在一起。

  • 美观：Fluent体验吸引力十足且令人沉醉

通过融入物理世界的元素，Fluent体验挖掘到了根本的东西。它运用光线、阴影、动作、深度和纹理，以一种直观和本能的方式整理信息。

组成

亚克力材料

FDS introduce-1.png

Acrylic是一种画笔，用于创建半透明纹理。你可以将Acrylic应用到应用图面中，并帮助构建视觉层次结构。

Light主题中的Acrylic
暗色主题中的Acrylic

Acrylic混合类型

Acrylic最明显的特征是其透明度。有两种Acrylic混合类型可改变材料透明度： 背景Acrylic，显示桌面壁纸和当前处于活动状态的应用后的其他窗口，增加了应用程序窗口之间的层次感，同时允许用户进行个性化偏好设置 。 应用内Acrylic，在应用框架内增加层次感，焦点清晰且层次分明 。

FDS introduce-4.png
FDS introduce-5.png

对多层Acrylic图面谨慎分层：多层背景Acrylic会造成令人分心的视觉错觉。

何时使用Acrylic

  • 将应用内Acrylic用于支持UI，例如在滚动或交互时可能重叠内容的图面上。
  • 将背景Acrylic用于瞬态UI元素，例如上下文菜单、浮出控件和可轻型消除的UI。
  • 在瞬态场景中使用Acrylic有助于维护与触发瞬态UI的内容之间的视觉关系。

如果在导航图面上使用的是应用内Acrylic，则考虑扩展Acrylic窗格下的内容，以改善应用上的流。

但为避免产生条纹效果，尽量不要边对边放置多个Acrylic-这可能会在两个模糊图面之间产生多余接缝。Acrylic这种工具可让设计在视觉上更加协调，但使用不当可能会导致视觉干扰。

考虑以下使用模式，确定将Acrylic融入应用的最佳方式：

垂直窗格

对于有助于将应用内容分段的垂直窗格或图面，我们建议使用不透明背景，而不是Acrylic。如果垂直窗格在内容上方展开（比如在NavigationView的“精简”或“最小”模式下），建议使用应用内Acrylic来帮助在用户展开此窗格时维护页面的上下文 。

瞬态图面

对于具有菜单浮出控件、非模式弹出窗口或轻型消除窗格的应用，我们建议使用背景Acrylic。

FDS introduce-6.png


呈现Acrylic图面会大量占用GPU，从而导致设备的功耗增加并缩短电池使用时间。设备进入节电模式时会自动禁用Acrylic效果，并且用户可以选择禁用所有应用的Acrylic效果。

可用性和适应性

Acrylic外观可自动适应各种设备和上下文。

在高对比度模式中，用户仍将看到自己选择的熟悉的背景颜色，而非Acrylic。 此外，背景Acrylic和应用内Acrylic均显示为纯色：

  • 用户关闭“设置”>“个性化设置”>“颜色”中的透明度时
  • 启用节电模式时
  • 应用在低端硬件上运行时

此外，只有背景Acrylic会将半透明度和纹理替换为纯色：

  • 桌面上的应用窗口停用时
  • Windows应用在手机、Xbox、HoloLens或平板电脑模式下运行时

其他样式的Acrylic效果

FDS introduce-7.png
FDS introduce-8.png
FDS introduce-9.png

如何设计Acrylic

微调Acrylic的关键组件以凸显其独特外观和属性。从半透明度、模糊和噪点设置开始，为平滑图面增添视觉深度和维度。添加了排除混合模式层，以确保放置在Acrylic背景上的UI的对比度和可读性。最后，添加了各种颜色色调，以供用户进行个性化设置。这些图层协同作用，形成了全新的实用材料。

FDS introduce-10.png

Acrylic设置：背景、模糊、排除混合、颜色/色调覆盖、噪点

显示焦点

FDS introduce-11.png

显示焦点是10英尺体验（如Xbox One和电视屏幕）的一种灯光效果。当用户将游戏板或键盘焦点移向可聚焦元素（如按钮）时，它会将这些元素的边框进行动画处理。默认情况下，它是关闭状态，但启用很简单。

显示焦点通过在元素边框周围添加动画的明亮辉光来引起对聚焦元素的注意：

FDS introduce-12.gif

在用户可能不会完全注意整个电视屏幕的10英尺场景中这尤为有用。

默认的“显示焦点”视觉对象分为三部分：主边框、辅助边框和显示明亮辉光。主边框为2px粗，在辅助边框的“外部”周围运行。辅助边框为1px粗，在主边框的“内部”周围运行。“显示焦点”明亮辉光的粗细与主边框的粗细成比例，在主边框的“外部”周围运行 。 除静态元素外，“显示焦点”视觉对象还采用动画灯光，在静止状态它会跳动，当移动焦点时它会朝着焦点方向移动。

FDS introduce-13.png

视觉差异

视差是一种视觉效果，即靠近观察者的物体比背景中的物体移动得更快。 视差可产生一种深度、透视和移动感。

工作原理

在UI中，你可以在UI滚动或平移时，通过以不同的速率移动不同的对象来创建视差效果。为了说明这一点，让我们看看两层内容：列表和背景图像。该列表位于该背景图像的顶部，这已经给人以列表可能靠观察者更近的错觉。现在，若要实现视差效果，我们希望对象离我们最近的对象比远离远处的对象“快速”。当用户滚动界面时，列表比背景图像移动得更快，从而产生深度错觉。

FDS introduce-14.gif

连贯的动画

连贯的动画让你可以通过为一个元素在两种不同视图之间的转换创建动画来创建动态且引人入胜的导航体验。这有助于用户维持其上下文并提供不同视图之间的连贯性。

在连接的动画中，在UI内容的更改过程中，在两个视图之间出现“继续”元素，在屏幕上，从其在源视图中的位置到新视图的目标位置。这强调了视图间的通用内容，并在转换过程中创建了漂亮而动态的效果。

FDS introduce-15.gif

为何选择连贯动画？

在页面之间导航时，很重要的一点是让用户了解导航过后会出现哪些新内容，以及这些新内容与他们在导航时的意图有何关联。连贯动画提供了一个强大的视觉隐喻，通过将用户的注意力转移到两个视图之间共享的内容，强调了二者之间的关系。此外，连贯动画为页面导航增添了视觉效果和润色，这可以帮助让你的应用的动态设计与众不同。

协调动画

协调动画是一种特殊类型的入口动画，其中元素与连接的动画目标同时出现，并在屏幕上移动连接的动画元素时与连接的动画元素一起进行动画处理。协调动画可以向一个转换添加多个视觉效果，并进一步将用户的注意力转移到源视图和目标视图之间共享的上下文。在这些图像中，该项目的标题UI使用协调动画创建动画。

FDS introduce-16.gif

当协调动画使用重力配置时，重心将应用于连接的动画元素和协调的元素。 协调的元素将与连接的元素“一次性”，使元素保持真正的协调。

突出显示

FDS introduce-17.png

突出显示是当用户在交互式元素（如命令栏）附近移动指针时突出显示这些元素的灯光效果。

当指针靠近时，突出显示通过显示元素的容器来引起对交互式元素的注意，如此图所示：

FDS introduce-18.gif

通过显示对象周围的隐藏边框，“展示”可以帮助用户更好地理解他们与之交互的空间以及可用操作。这一点在列表控件和按钮分组方面尤其重要。

这里展示几种不同的突出显示：

FDS introduce-19.png

主题中的展示

展示会根据请求的控件、应用或用户设置的主题略微更改。在深色主题中，展示的边框和悬停光线为白色，但在浅色主题中，只有边框变暗为浅灰色。

FDS introduce-20.png

在自定义控件上启用“展示”

可以为自定义控件添加“展示”功能。在执行操作前，最好先对“展示”效果的工作原理多些了解。展示包含两种单独的效果：“边框展示”和“悬停展示”。

  • “边框”会在指针靠近时显示交互式元素的边框。此效果会向你显示，这些邻近项目可以与当前的聚焦项目采用类似操作。
  • “悬停”会在悬停或聚焦的项目周围应用一个柔和的光晕形状，并在单击时播放按下动画 。
FDS introduce-21.png

Build 2018: Fluent Design展望

Fluent Design经过一年的开发，进步着实不少。微软在Build 2018大会上承诺，Fluent Design将获得大幅度更新。这些更新有:

  • 命令条浮层
  • Z轴深度和阴影
  • 瞬间UI的Acrylic质感
  • 导航视图
  • Fluent标准和紧凑布局
  • 表单验证
  • @mentions
  • 行内手写
  • 相关性命令
  • 数据合集
  • Reveal聚焦状态
  • 环境不再生硬
  • 动效系统改进

其中大多数现在已经实现，而Fluent Design System将继续完善，携手WinUI 3，为用户带来更好的视觉交互体验。

FDS现已支持跨平台体验（PC、Android、iOS、macOS、Web）。

Fluent Design@Desktop

从Windows 10 build 1903开始，可以使用称为“XAML岛”的功能在非UWP桌面应用程序中托管UWP控件。可以通过此功能来增强现有WPF、Windows窗体和C++ Win32应用程序的外观和功能，并使用只能通过UWP控件使用的最新Windows 10 UI功能。这意味着，可以在现有的WPF、Windows窗体和C++ Win32应用程序中使用UWP功能（例如 Windows Ink）和支持Fluent Design System的控件。

可以托管派生自Windows.UI.Xaml.UIElement的任何UWP控件，其中包括：

  • Windows SDK提供的任何第一方UWP控件。
  • 任何自定义UWP控件（例如，包含多个可一起使用的UWP控件的用户控件）。必须有自定义控件的源代码，才能通过应用程序对其进行编译。
取自“https://www.betaworld.cn/index.php?title=Fluent_Design_System&oldid=78658”