fluent ui_Windows 10的现代UI方法Fluent简介

fluent ui

每个操作系统都有其自身的外观，超越了按钮和控件的位置。 有些人试图模仿现实世界，增加类似物理学的行为。 其他人则沉迷于数字化本质，重点是文本和几何图形。 微软一直在寻找这两个极端之间的路径，首先是使用Windows Vista的Aero Glass效果，然后转向Windows 8的Metro和其印刷设计。

Windows 10最初采用类似于Metro的方法，将其与Windows 7中熟悉的隐喻相结合。但这只是一个开始，并且在多个版本中，它开始展现自己的风格。 从Metro中学到的经验教训，它仍然将活版图和图标集中在版式上。 但是它也开始建立在现代GPU的功能之上，增加了透明度和动画效果，将其从2D世界移动到开始显示3D元素的世界。

[探索图形的力量-Microsoft Graph，即在您的应用程序中： Microsoft Graph：Office 365隐藏财富的API • Microsoft Graph和Microsoft Teams重塑Office • Cortana超越了成为个人助理的范围 。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

引入Fluent设计系统

微软将其Fluent设计系统描述为一种用于创建“自适应，善解人意且美观的用户界面”的工具。 这是一个雄心勃勃的声明，但与其通用Windows平台（UWP）方法保持一致。 尽管尚未扩展到Xamarin Forms，但Fluent逐渐在各种Windows版本中推出，从平板电脑到台式机再到混合现实。

Fluent Design以现有的熟悉的XAML控制模型为基础，将开箱即用的功能与新的控制选项混合在一起。 某些元素会随Windows SDK的新版本自动提供，并且只需要使用更新的控件重新发布您的应用程序即可。 其他语言，例如Fluent的Acrylic纹理，则需要其他代码。

Fluent更好的功能之一是显示工具，该​​工具可以照亮对象周围的边界，快速显示哪些屏幕元素可以进行交互，当您将鼠标悬停或压入活动字段时，这些元素便会亮起。 与Windows 10的新暗模式一起使用时，此功能特别有效。

添加连接的动画

另一个选择是Microsoft所谓的“ 连接动画” ，它可以将您从一个视图转到另一个视图。 单击某个元素时（例如，单击在线中的一个项目以打开详细信息视图），而不是在屏幕之间切换，而是对选定的元素进行动画处理以在两个视图之间提供链接。 这种方法可以使用户始终处于交互流程中。 它旨在在应用程序的页面之间切换期间保持上下文。 Fluent提供了具有三种动画类型的向前和向后切换工具。

因为Windows为您处理实际的动画，所以设置连接的动画非常简单：首先，在页面XAML中定义源图像，然后添加代码以启用动画。 在目标页面中，将目标图像设置为目标。 在页面加载时调用动画。 反向进行此过程以进行导航。 UWP GridView和ListView控件中的特定方法将连接的动画从列表元素添加到详细视图，

用亚克力增加透明度

Fluent外观的核心是一种称为Acrylic的新型纹理显示模型。 混合了透明度和突出显示，可以帮助突出相关信息，显示用户选择了哪些内容以及一个视图与另一个视图的关系。

微软从Google及其Material Design借用了一个术语，将半透明的丙烯酸效果描述为“材料”。 作为画笔应用到支持的控件上，该效果使窗口和控件区域具有类似于塑料的效果，从而模糊了背景。 您可以对不同的亚克力样式的控件进行分层以创建布局深度。 您可以控制用于区分应用程序与背景的模糊程度，从显示基础图像的形状到提供有助于融合窗口和背景的颜色提示。

效果可以在应用程序内外使用； 背景效果适用于屏幕背景，应用程序内效果适用于应用程序内覆盖。 亚克力的工作原理是将导航元素与应用程序中的内容分开。 您将其用于导航窗格，以及用于应用内容的标准背景颜色和图像。 应用内选项适用于在应用中显示和消失的内容，例如上下文菜单或下拉菜单。 同样，背景亚克力效果对于任何在屏幕上任何地方显示为辅助窗口的元素都适用。

压克力窗户

丙烯酸效果可以是中性色，可以从背景以及您选择浅色或深色Windows主题中拾取颜色。 还可以选择使用Windows强调色的色调。 但是，Microsoft建议很少使用此功能，仅作为重点。 同样，您可以选择自己的颜色来添加品牌，不过最好还是仅将其用作突出显示或视觉提示。

像大多数Fluent一样，Acrylic简化了特定的设计任务。 过去，编写和显示带边框的分层窗口经常使用户想知道该对话框的去向。 通过使其成为窗口的临时元素并使用亚克力效果来显示其与应用程序和屏幕之间的关系，用户可以更轻松地了解需要完成的工作，因此他们可以快速完成任务并避免留下隐藏的模态对话框，以免进一步阻塞互动，直到找到并撤消。

诸如透明性之类的视觉效果确实需要GPU支持，并且当设备以节电模式运行（关闭GPU）时，需要有一个后备选项。 如果您使用默认的颜色和色调，则会自动为您处理。 但是，如果使用自定义丙烯酸色，则需要指定后备颜色，该颜色将显示为纯色。

一种设计，多种设备

由于Fluent旨在支持多种设备，因此您将需要考虑如何使用UWP支持响应式设计。 这种方法的关键是断点的概念，重点是一组应用程序宽度以处理屏幕尺寸的自动更改。 相同的代码应在现代台式PC的大屏幕上以及较小的设备（如Surface Go笔记本电脑）的显示器上运行。 尽管响应式设计在很多情况下都可以使用，但添加Surface Hub支持之类的极端差异可能需要针对不同的屏幕尺寸使用单独的UI模型，才能为最小和最大的显示器提供功能。

随着Microsoft将Fluent设计元素添加到Windows 10及其默认捆绑的应用程序中，值得考虑更新任何UWP应用程序以支持Fluent的元素。 您不需要一次全部添加它们，但是每次更新时在代码中添加一个或两个元素将使您的应用程序更具吸引力，并且更符合Microsoft采取Windows用户体验的方向。 Fluent 对大多数常用设计工具的支持 ，也简化了开发人员进入Fluent的旅程。

翻译自: https://www.infoworld.com/article/3315657/introducing-fluent-windows-10s-modern-ui-approach.html

fluent ui