FluentDesign Acrylic
Acrylic material
Acrylic是一种创建部分透明纹理的画笔。您可以将Acrylic添加到应用表面以增加深度并帮助建立视觉层次结构。
重要的API：AcrylicBrush类，Background属性
Acrylic和Fluent Design
Fluent设计系统可帮助您创建融合了光线，深度，运动，材质和比例尺的现代大胆UI。Acrylic是一个Fluent Design组件，可以为您的应用程序添加物理纹理（材质）和深度。要了解更多信息，请参阅UWP概述的Fluent Design。
何时使用压克力
我们建议您将支持UI（如应用内导航或命令元素）放在Acrylic表面上。这种材料对瞬态UI元素（如对话框和弹出窗口）也很有帮助，因为它有助于保持与触发瞬态UI的内容之间的视觉关系。我们设计Acrylic作为背景材料，并在视觉上显示不连续的窗格，所以不要将Acrylic应用于详细的前景元素。
主要应用内容背后的表面应该使用坚实，不透明的背景。
考虑将Acrylic扩展到您的应用程序的一个或多个边缘，包括窗口标题栏，以改善视觉流。避免通过堆叠彼此相邻的不同混合类型的Acrylic来创建条纹效果。Acrylic是一种为您的设计带来视觉和谐的工具，但如果使用不当，可能会导致视觉噪音。
考虑下面的使用模式来决定如何最好地将Acrylic结合到您的应用程序。
垂直Acrylic面板
对于具有垂直导航的应用，我们建议将Acrylic应用于包含导航元素的辅助窗格。
NavigationView是为您的应用程序添加导航的新常见控件，在其视觉设计中包含了Acrylic。当窗格与主要内容并排打开时，NavigationView的窗格显示背景为Acrylic，并在窗格作为叠加层打开时自动转换为应用内的Acrylic。
如果您的应用程序无法使用NavigationView，并且您计划自行添加Acrylic，则建议使用相对透明的Acrylic，并使用60％的色调不透明度。
- 当窗格以其他应用程序内容的叠加层打开时，这应该是60％的应用程序内Acrylic
- 当窗格与主应用程序内容并排打开时，这应该是60％的背景Acrylic
多层Acrylic面板
对于具有三个不同垂直窗格的应用，我们建议将Acrylic添加到非主要内容。
- 对于离主要内容最近的辅助窗格，请使用80％的背景Acrylic
- 对于远离主要内容的第三层面板，使用60％背景Acrylic
水平的Acrylic面板
对于水平导航，指挥或应用程序顶部的其他强大横向元素的应用程序，我们建议将70％的Acrylic应用于此视觉元素。
强调连续的，可缩放的内容的应用程序应该使用顶部栏中的应用程序内置Acrylic来让用户连接这个内容。画布应用的例子包括地图，绘画和绘画。
对于没有单一连续画布的应用程序，我们建议使用Acrylic背景将用户连接到整个桌面环境。
Acrylic在实用程序的应用程序
小部件或轻量级应用程序可以通过在其应用程序窗口内边缘对边绘制来加强其作为实用程序应用程序的使用。属于这个类别的应用通常具有简短的用户参与时间，并且不太可能占用用户的整个桌面屏幕。例子包括计算器和行动中心。
**注意:**渲染Acrylic表面是GPU密集型的，这会增加设备功耗并缩短电池寿命。当设备进入节电模式时，Acrylic效果自动禁用，用户可以选择禁用所有应用的Acrylic效果。
Acrylic混合类型
Acrylic最引人注目的特点是其透明度。有两种Acrylic混合物可以改变材料的可见性：
- 背景Acrylic揭示了当前活动应用程序背后的桌面壁纸和其他窗口，在庆祝用户的个性化偏好的同时在应用程序窗口之间增加了深度。
- 应用内Acrylic在应用程序框架内增加了深度感，提供了焦点和层次结构。
可用性和适应性
Acrylic自动适应各种设备和环境的外观。
- 在高对比度模式下，用户继续看到他们选择的熟悉的背景颜色代替Acrylic。另外，背景Acrylic和应用内Acrylic都显示为纯色
- 当用户关闭个性化设置中的透明度时
- 节电模式启动时
- 当应用程序运行在低端硬件上时
- 此外，只有背景Acrylic将取代它的透明度和纯色的纹理
- 桌面上的应用程序窗口停用时
- 当UWP应用程序在手机，Xbox，HoloLens或平板电脑模式下运行时
易读性考虑
确保您的应用呈现给用户的任何文本都符合对比度比例是非常重要的。我们对Acrylic配方进行了优化，使得高色黑色，白色甚至中等灰度的文字符合Acrylic的对比度。平台提供的主题资源默认情况下对比80％不透明度的色调。在Acrylic上放置高色彩的文本时，可以减少色彩不透明度，同时保持易读性。在黑暗模式下，色调不透明度可以达到70％，而轻型Acrylic则可以在50％不透明度下达到对比度。
我们不建议在您的Acrylic表面上放置重音颜色的文字，因为这些组合可能无法通过15px字体大小的最低对比度要求。尽量避免将超链接放在Acrylic元素上。另外，如果您选择在主题资源提供的平台默认值之外自定义Acrylic色调或不透明度级别，请牢记可读性的影响。
定制Acrylic刷
您可以选择在应用程序的Acrylic上添加色彩，以显示品牌或与页面上的其他元素进行视觉平衡。要显示颜色而不是灰度，您需要使用以下属性定义自己的Acrylic画笔。
- TintColor：颜色/色调叠加层。考虑指定RGB颜色值和alpha通道不透明度。
- TintOpacity：色调层的不透明度。我们建议将80％的不透明度作为出发点，但不同的颜色在其他透明胶片上看起来更有吸引力。
- BackgroundSource：用于指定是否需要背景或应用内Acrylic的标志。
- FallbackColor：在低电量模式下替换Acrylic的纯色。对于背景Acrylic，当您的应用程序不在活动桌面窗口中或当应用程序在手机和Xbox上运行时，回退颜色也会替换Acrylic。
…
将Acrylic扩展到标题栏中
为了让您的应用程序的窗口看起来无缝，可以在标题栏区域使用Acrylic。此示例通过将ApplicationViewTitleBar对象的ButtonBackgroundColor和ButtonInactiveBackgroundColor属性设置为Colors.Transparent将Acrylic扩展到标题栏。
private void extendAcrylicIntoTitleBar()
{
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar; titleBar.ButtonBackgroundColor = Colors.Transparent; titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}
这个代码可以放在你的应用程序的OnLaunched方法（App.xaml.cs）中，在调用Window.Activate之后，如下所示，或者在你的应用程序的第一页。
// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame; // Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (rootFrame == null)
{ // Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame(); rootFrame.NavigationFailed += OnNavigationFailed;
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{ //TODO:
Load state from previously suspended application
} // Place the frame in the current Window
Window.Current.Content = rootFrame;
}
if (e.PrelaunchActivated == false)
{
if (rootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
rootFrame.Navigate(typeof(MainPage), e.Arguments);
}
// Ensure the current window is active Window.Current.Activate(); // Extend acrylic extendAcrylicIntoTitleBar();
}
}
另外，您需要使用TextBlock来绘制应用的标题，标题通常会自动出现在标题栏中CaptionTextBlockStyle。有关更多信息，请参阅标题栏自定义。
该怎么做和不该做什么
- 请使用Acrylic作为非主要应用程序表面（如导航窗格）的背景材料。
- 将Acrylic至少延伸到您的应用程序的一个边缘，通过巧妙地与应用程序的环境混合来提供无缝的体验。
- 不要在应用程序和背景Acrylic直接相邻，以避免在接缝处的视觉张力。
- 请勿将多个相同色调和不透明度的Acrylic面板放在一起，否则会导致不合需要的可见接缝。
- 不要在Acrylic表面上放置重色文字。
我们如何设计Acrylic
我们调整了Acrylic的关键组件，以达到其独特的外观和性能。我们从透明度，模糊和噪音开始，为平面表面增加视觉深度和尺寸。我们添加了排除混合模式图层，以确保在Acrylic背景上放置UI的对比度和易读性。最后，我们为个性化机会添加了色调。在实际中，这些层叠加起来是一种新鲜的，可用的材料。
Acrylic组成：背景，模糊，排除混合，色彩/色调叠加，噪点
原文地址
