8,088
个编辑
视觉效果：修订间差异
跳转到导航
跳转到搜索
→亚克力材料
（→连贯的动画） |
（→亚克力材料） |
||
| 第94行： | 第94行： | ||
====组成==== | ====组成==== | ||
=====亚克力材料===== | =====亚克力材料===== | ||
PLACEHOLDER | |||
Acrylic 是一种画笔，用于创建半透明纹理。 你可以将 Acrylic 应用到应用图面中，并帮助构建视觉层次结构。 | |||
PLACEHOLDER|TEXT PLACEHOLDER|TEXT | |||
======Acrylic 混合类型====== | |||
Acrylic 最明显的特征是其透明度。 有两种 Acrylic 混合类型可改变材料透明度： | |||
背景 Acrylic，显示桌面壁纸和当前处于活动状态的应用后的其他窗口，增加了应用程序窗口之间的层次感，同时允许用户进行个性化偏好设置 。 | |||
应用内 Acrylic，在应用框架内增加层次感，焦点清晰且层次分明 。 | |||
PLACEHOLDER | |||
PLACEHOLDER | |||
对多层 Acrylic 图面谨慎分层：多层背景 Acrylic 会造成令人分心的视觉错觉。 | |||
======何时使用 Acrylic====== | |||
* 将应用内 Acrylic 用于支持 UI，例如在滚动或交互时可能重叠内容的图面上。 | |||
* 将背景 Acrylic 用于瞬态 UI 元素，例如上下文菜单、浮出控件和可轻型消除的 UI。 | |||
* 在瞬态场景中使用 Acrylic 有助于维护与触发瞬态 UI 的内容之间的视觉关系。 | |||
如果在导航图面上使用的是应用内 Acrylic，则考虑扩展 Acrylic 窗格下的内容，以改善应用上的流。 | |||
但为避免产生条纹效果，尽量不要边对边放置多个 Acrylic - 这可能会在两个模糊图面之间产生多余接缝。 Acrylic 这种工具可让设计在视觉上更加协调，但使用不当可能会导致视觉干扰。 | |||
考虑以下使用模式，确定将 Acrylic 融入应用的最佳方式： | |||
======垂直窗格====== | |||
对于有助于将应用内容分段的垂直窗格或图面，我们建议使用不透明背景，而不是 Acrylic。 如果垂直窗格在内容上方展开（比如在 NavigationView 的“精简”或“最小”模式下），建议使用应用内 acrylic 来帮助在用户展开此窗格时维护页面的上下文 。 | |||
======瞬态图面====== | |||
对于具有菜单浮出控件、非模式弹出窗口或轻型消除窗格的应用，我们建议使用背景 Acrylic。 | |||
PLACEHOLDER | |||
''呈现 Acrylic 图面会大量占用 GPU，从而导致设备的功耗增加并缩短电池使用时间。 设备进入节电模式时会自动禁用 Acrylic 效果，并且用户可以选择禁用所有应用的 Acrylic 效果。'' | |||
======可用性和适应性====== | |||
Acrylic 外观可自动适应各种设备和上下文。 | |||
在高对比度模式中，用户仍将看到自己选择的熟悉的背景颜色，而非 Acrylic。 此外，背景 Acrylic 和应用内 Acrylic 均显示为纯色： | |||
*用户关闭“设置”>“个性化设置”>“颜色”中的透明度时 | |||
*启用节电模式时 | |||
*应用在低端硬件上运行时 | |||
此外，只有背景 Acrylic 会将半透明度和纹理替换为纯色： | |||
*桌面上的应用窗口停用时 | |||
*Windows 应用在手机、Xbox、HoloLens 或平板电脑模式下运行时 | |||
======其他样式的 Acrylic 效果====== | |||
PLACEHOLDER | |||
PLACEHOLDER | |||
PLACEHOLDER | |||
======如何设计 Acrylic====== | |||
微调 Acrylic 的关键组件以凸显其独特外观和属性。 从半透明度、模糊和噪点设置开始，为平滑图面增添视觉深度和维度。 添加了排除混合模式层，以确保放置在 Acrylic 背景上的 UI 的对比度和可读性。 最后，添加了各种颜色色调，以供用户进行个性化设置。 这些图层协同作用，形成了全新的实用材料。 | |||
PLACEHOLDER | |||
Acrylic 设置：背景、模糊、排除混合、颜色/色调覆盖、噪点 | |||
=====显示焦点===== | =====显示焦点===== | ||
PLACEGOLDER | PLACEGOLDER | ||