- 前言
在之前关于如何使用fluent design system的文章中，我们已经简要介绍了reveal的用法，本文将更详细地探讨其他方面。
自从Windows 8放弃了Aero界面后，用户对毛玻璃效果回归的需求一直很强烈。Fluent Design System引入了新的透明背景Acrylic，提供了更好的性能和更时尚的外观。（然而，由于使用简单，滥用Acrylic的情况似乎已不可避免。）
- 使用Acrylic
2.1 在XAML中使用Acrylic
UWP提供了一组预定义的Acrylic Brush供开发者使用，通过ThemeResource找到包含“Acrylic”的Brush资源即可轻松在应用中使用Acrylic，代码如下：
可用的ThemeResource详见官方文档：
![[UWP]使用Acrylic（亚克力）](https://img.php.cn/upload/article/001/503/042/175789549663330.jpg)
Acrylic具体包含两种：
Background acrylic：可以透视整个应用UI，看到应用窗体后的其他应用或桌面（在ThemeResource中名称包含 -AcrylicWindow-）。
In-app acrylic：只透视应用了acrylic brush的元素（在ThemeResource中名称包含 -AcrylicElement-）。
![[UWP]使用Acrylic（亚克力）](https://img.php.cn/upload/article/001/503/042/175789549770047.jpg)
![[UWP]使用Acrylic（亚克力）](https://img.php.cn/upload/article/001/503/042/175789549779878.jpg)
2.2 正确使用Acrylic
目前，常见的应用大多只使用了Background acrylic，In-app acrylic的使用场景较少。
Background acrylic的常见应用场景包括：
作为导航菜单的背景：
![[UWP]使用Acrylic（亚克力）](https://img.php.cn/upload/article/001/503/042/175789549865229.jpg)
Widget或轻量级应用可以将整个应用的背景设置为Acrylic，像计算器那样：
![[UWP]使用Acrylic（亚克力）](https://img.php.cn/upload/article/001/503/042/175789549820715.jpg)
In-app acrylic的应用场景通常是弹出的Modal Layer或Flyout的背景：
![[UWP]使用Acrylic（亚克力）](https://img.php.cn/upload/article/001/503/042/175789549899544.jpg)
- 自定义AcrylicBrush
可以使用TintColor（颜色）、TintOpacity（不透明度）、BackgroundSource（background 或 in-app acrylic类型）、FallbackColor这四个属性来自定义AcrylicBrush。
其中FallbackColor是指当background acrylic不生效时（如运行于节电模式、根据设置不激活Acrylic或运行于XBOX等设备）的替代颜色。当窗口处于非激活状态时也会使用FallbackColor代替AcrylicBrush。
![[UWP]使用Acrylic（亚克力）](https://img.php.cn/upload/article/001/503/042/175789549977014.jpg)
- Acrylic与Depth
在Fluent Design System的五个话题中，Acrylic同时属于Material和Depth话题。半透明的背景可以透视到Z轴下一层的内容，从而营造出深度的效果。
![[UWP]使用Acrylic（亚克力）](https://img.php.cn/upload/article/001/503/042/175789549917964.jpg)
具体来说，可以在应用内将弹出的Modal Layer背景设为In-app acrylic，并结合ScalarAnimation制作出内容向后缩退的感觉：
private void OnSave(object sender, RoutedEventArgs e){
ModalLayer.Visibility = Visibility.Visible;
ImageScale.ScaleX = 1;
ImageScale.ScaleY = 1;
}
private void OnSaved(object sender, RoutedEventArgs e){
ModalLayer.Visibility = Visibility.Collapsed;
ImageScale.ScaleX = 1.1;
ImageScale.ScaleY = 1.1;
}![[UWP]使用Acrylic（亚克力）](https://img.php.cn/upload/article/001/503/042/175789549960474.jpg)
希望将来能看到更多为营造有深度的UI而使用的Acrylic，不要为了让UI闪闪发光就滥用。
- 其它
5.1 Acrylic没有生效及其它各种问题
在如何使用Fluent Design System (下)中详细介绍了Acrylic没有生效的各种情况，也介绍了正确使用Acrylic的方式及版本兼容代码，这里不再赘述。
5.2 窗口处于非激活状态
当窗口处于非激活状态时，background acrylic会失效并使用FallbackColor指定的纯色背景代替。有些应用在导航、弹出提示或最大化/还原时会让窗口暂时失去焦点，这样会导致使用了background acrylic的地方（通常是整个导航菜单）意外地闪烁一下。这种情况如果频繁发生会很烦人，需要谨慎处理。
- 结语
实际上，Acrylic并不是那么容易使用，而且很容易被滥用，尤其是一些应用在整个背景上使用Acrylic，但又处理不好内容的显示，导致文字等内容的识别率下降。如何正确使用微软提供的这件工具是值得设计师深思熟虑的一件事。
顺便一提，上篇文章关于使用Reveal的部分原本打算尽量简洁，结果很快就被移出首页，真是为难。于是本文原本打算再多写一些，但昨晚家里的爱机突然坏了，看来连天都要阻止我婆婆妈妈。
参考中给出的链接都是一些有趣的内容，不妨一看。
- 参考
Acrylic material
From 3D to 2D and back again – Microsoft Design
Digital Design is Never Done – Microsoft Design
How to use Acrylic Accent in Windows 10 Creators Update - Stack Overflow
- 源码
Fluent Design System Sample
