视觉效果

来自BetaWorld 百科

主题方案

Windows Classic

它的 CPU 占用较少, 提供了更好的性能,更高的颜色和字体自定义选项。Windows XP 包含此视觉样式的预设配色方案。此主图被视力受损者优选。此方案是 Windows 9x 、Windows NT 4.0 和 Windows 2000 的默认配色方案, Windows Vista 和 Windows 7 也出现此主题。 Windows 经典样式在安全模式和 Win32 控制台窗口中自动使用。它还出现在 Windows NT 4.0 Server 到Windows Server 2008 R2 中。此 Windows 经典主题已从 Windows Server 2012 和 Windows 8 中删除。(但仍然存在于内核中)。

WaterColor

Watercolor是 Microsoft 在开发 Windows XP 操作系统期间创建的临时主题的名称。最初出现于5.1.2223,最后在Build 2419。在Build 2250中, 它被称为professional, 默认情况下没有启用。

Watercolor(在Build 2410之前称为Professional) 是 Windows XP Beta 版中使用的视觉样式。它的任务栏看起来相当像Windows 2000, 并有一个早期的Windows XP RTM使用的全新开始菜单。当窗口活动时, 标题栏为蓝色, 当非活动时为粉红色。(2223中非活动窗口标题栏为青褐色)在Build 2410由Sample Test Visual Style替换此主题。

Sample Test Visual Style

Sample Test Visual Style(内部称为Mallard)是Windows XP的一些预发布版本中包含的视觉样式。 截至2019年,包括在Windows XP build 2410,2416和2419内,其中包括三种颜色方案,称为Chartreuse Mongoose和Blue Lagoon(内部称为Paler)。

在 Build 2428 中由 Luna 取代。

历史

2000-02-22中的Whistler功能规划电子表格提到了一个默认皮肤集,其中包含计划在2000-04-28完成的消费者和专业版,其中指的是Watercolor(当时名为Business),Build 2257中的任务栏和开始菜单属性控制面板在2000-08-10编译,包括桌面的低分辨率屏幕截图,其中新的开始菜单打开,用于说明相应的选项。有趣的是,屏幕截图还显示了一个任务栏,其设计与以后包含在Beta 2版本之前的样本风格有许多相似之处,但是,它不包含水印,因此它很可能是一个概念。

从早期的Beta 2之前版本中嵌入test.mstheme中的themes.ini文件包含最后更新日期2000-07-11。但是,水彩主题中的相同文件声称最后更新日期为2000-04-19,早于构建2250.鉴于水彩主题(当时名为Professional)已经在构建2250和2257之间进行了重大更新,并且INI文件本身已经多次更新,在最后更新日期保持不变的情况下构建2419,这个值不应该被认为是准确的。

雷蒙德·陈在2006-01-11的一篇博客文章中说,这个主题曾作为诱饵引起大众注意力,同时微软团队一直秘密地在Luna身上工作。

Candy

从 Windows XP 的泄露的源代码中发现的主题,该主题的按钮元素和滚动条 UI 和 Apple 当时的 Aqua 主题高度相似。其中的操作系统图形方案类似于 Windows XP 的最终方案。其他的部分更像是 Windows Whistler 中的 Business 或 Watercolor 。在源码中亦被标记为 Whistler skin with eye candy.

Luna

"Luna" 是 Windows XP 默认视觉样式的代号,其正式名称为 "Windows XP 风格"。它有三种配色方案: 蓝色 (默认), 橄榄绿色和银色。该视觉样式一开始适配的背景是"红色月亮沙漠",最终更改为现在我们熟知的蓝天白云背景(Bliss)。

Royale

Royale(也称为Energy Blue)是Windows XP Media Center Edition 2005中的默认视觉风格。它在主题界面中使用强烈的绿色和蓝色色调,并带有类似于Bliss的字段的默认壁纸(称为“Energy Bliss”))。 Royale Noir是这个主题的衍生品,主要以黑色调为主。 嵌入式主题类似于Royale。

Slate

Slate初次登场是在Build 4042中。

该版本支持DCE和显示特效,相较于Plex,该版本更加......丑。

它将系统主色调更改为黑色,侧边栏和开始菜单都是黑色的基调,而且,在开启DCE过后,标题栏上并没有模糊效果,而是完全透明。导致用户要查看标题栏文字和关闭,最小化等窗口管理按钮变得很费劲。

不过,它取消了开始按钮上的Start字样,一定意义上有进步意义。(而这个设定并没有节约标题栏面积。。。)

该版本一直到4093都与Jade共存。

Jade

Jade是Windows Longhorn Build 4066中引入的视觉风格,并延续到Build 4093。在Build 4074,Jade可以启用Windows Aero主题。

Windows Aero

Windows Aero,即A(Adjective,真实), E(Energetic,精神),R(Reflection,反射)和O(Open,开♂放)的缩写,是由 Windows Vista 操作系统介绍的设计语言。在Aero接口中所做的更改影响了 Windows 界面的许多元素,包括新外观的合并,以及反映外观、布局的界面指南的变化,以及指令的措辞和语调,第三方应用程序的显示也有所改变。

Windows Vista中的 Aero

取代了 Windows XP 的 "Luna" 主题。直到 2005年7月 Windows Vista Beta 1的发布, 在公开或泄露的版本中几乎没有显示出Aero。以前的用户界面是Plex(3683–4042),Jade或Slate。Microsoft 在构建5048中开始使用该主题。

Windows Aero 在 Windows Vista 中加入了以下功能。

  • 新的主题: Aero的主要组成部分, 它是 Windows XP 的 "Luna" 的后继者, 并改变图形控制元素的外观和感觉, 包括但不限于按钮, 复选框, 单选按钮, 菜单, 进度条和默认的 Windows 图标。甚至消息框也被更改。
  • Windows Filp改进: Windows Vista 中的 Windows Filp (Alt + Tab) 在Vista里会显示每个打开窗口的实时预览, 而不是应用程序图标。
  • Windows Filp 3D: Windows Filp 3D (Windows 键 + Tab) 会呈现打开窗口的实时图像, 允许一个在三维视图中显示它们,并在之间切换。
  • 任务栏实时缩略图 悬停在窗口的任务栏按钮上会显示任务栏中该窗口的预览。
  • 桌面窗口管理器 (DWM)-由于新更改对硬件和性能的重大影响, 引入了桌面窗口管理器来实现硬件加速, 将 UI 呈现的职责从 CPU 转移到图形子系统。DWM 在 Windows Vista 中需要兼容的硬件。
  • 任务对话框: 用来帮助与用户进行通信并接收简单用户输入的对话方块。任务对话框比传统的仅承载消息和一组命令按钮的InfoBox更复杂。任务对话框可能具有可扩展的节、超链接、复选框、进度栏和图形元素等。

Windows 7中的Aero

新增几个 UI 更改, 如更友好的界面, 以及许多新的视觉效果和功能。

  • Aero Peek: 悬停在任务栏缩略图上, 会显示整个窗口的预览。还可以通过任务栏右端的 "显示桌面" 按钮来提供Aero Peek, 这使得所有打开的窗口都透明, 可以快速查看桌面。类似的功能在 Windows Vista 开发期间获得了专利。
  • Aero Shake: 摇晃 (快速拖来回) 窗口将所有其他窗口最小化。
  • Aero Snap: 将窗口拖动到桌面的右侧或左侧会导致窗口填满屏幕的相应一半。将窗口贴紧到屏幕顶部可将其最大化。可以通过将窗口拉伸到屏幕的顶部或底部来调整大小, 这完全增加了它们的垂直屏幕属性, 同时保留了它们的宽度, 这些窗口可以在标题栏移动时水平滑动, 或被拉走, 从而返回窗口的原始高度。使用经典主题, 此功能仍然可用。
  • 触摸用户界面增强: Windows Aero对触摸屏幕更为友好。例如, 在显示器上添加了触摸手势和对高 DPI 的支持。
  • 最大化窗口的标题栏保持透明, 而不是变得不透明。
  • 非最大化窗口的轮廓是完全白色的, 而不是在右侧和底部有青色轮廓。
  • 当悬停在打开的程序的任务栏按钮上时, 该按钮会发光其图标的主 RGB 颜色, 并在鼠标光标移动后产生效果。
  • 任务栏按钮中存在进度指示器。例如, 通过 Internet 资源管理器下载程序会导致该按钮在操作过程中以颜色填充。

在 2012年, 随着 Windows Server 2012 (以及后来的 Windows 8) 的发展, 微软转向了一个代号为 "Metro" 的设计语言。

Aero Lite

Aero Lite是在Windows 8中首次出现的隐藏视觉样式的名称,本计划在未来的Windows版本中使用。 msstyles文件但不是主题文件存在于Windows 8 / 8.1 / 10中的C:\ Windows\Resources\Themes\aero文件夹中。 要启用主题,请创建名为aerolite.theme的aero.theme文件的副本,并将其重定向到aerolite.msstyles文件,并将其显示名称设置为Aero Lite。

Embedded

Embedded是一种类似于Windows Embedded 2009中使用的Royale的视觉风格。它主要采用蓝色阴影。

Modern UI(Metro)

Metro(正式被称为Microsoft Design Language或MDL) 是由微软创建的设计语言。这种设计语言的重点是排版和简化的图标, 和基本的几何形状。Modern UI的早期例子可以在 Encarta 95 和 MSN 2.0 中找到。此语言在Windows XP Media Center Edition和 Zune 演变了,并且随着Windows Phone 7的揭幕,它正式地被称作 "Metro" 。此后, 它被并入了公司的一些其他产品, 包括 Xbox 360 系统软件、Xbox One、Windows 8、Windows Phone和 Outlook.com。

除了对 "开始" 菜单所做的更改之外, Windows 8 还采用了一种更具模式的方法, 它的Modern UI应用程序使用全屏模式, 从而避开了对基于图标的桌面界面的依赖。然而, 在这样做的同时, 微软已经将其重心从多任务和业务生产率转移了出来。在不久以后, Fluent Design System 代替了它。

Fluent Design System(流畅设计体系)

NoDev Template.png

综述

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 ,为用户带来更好的视觉交互体验。

并且微软宣布Fluent Design Language 在未来将不仅仅是UWP一家的特性,也会支持Win32,甚至WPF。

这句话,现在早就已经成为了现实。

Fluent Design Language的未来究竟怎样,我们拭目以待。

Fluent Design @ Desktop

从 Windows 10 版本 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 控件的用户控件)。 必须有自定义控件的源代码,才能通过应用程序对其进行编译。

专有名词与技术

Visual Style

视觉样式是用于修改Windows用户界面的位图和其他图形的集合,已在Windows XP中引入。 与在Windows XP之前使用的经典主题之上应用的常规颜色方案相比,它们更先进。 由于包含桌面合成器,视觉样式的行为和效果在Windows Longhorn和Windows Vista操作系统中发生了显着变化。 它们是.msstyle文件中的自包含文件,可以包含几种视觉样式的变体。 视觉样式在uxtheme.dll中实现。

早在 Windows Neptune 便颇具雏形,现在的 Windows 10 仍离不开本技术。

DCE

桌面组合引擎 (或 DCE) 是一个主题渲染引擎, 用于早期构建的 Windows Longhorn,始于3683。 不过其中的Bug比较多,兼容性较差。从Build 4008开始, DCE 只提供透明效果。它与 WinFS、Avalon和其他内部 Windows 数据库同步开发。

从Build 4066开始, DCE 被桌面窗口管理器(DWM)替换。

DWM

桌面窗口管理器是windows Vista及windows 7中的一个新组件:Desktop Window Manager(DWM)。它建立在WPF核心图形层组件基础之上。DWM的桌面合成是建立在Composition引擎基础之上的新特征。它的出现几乎改变了Vista中应用程序的屏幕象素显示方式。启用DWM后,提供的视觉效果有毛玻璃框架、3D窗口变换动画、窗口翻转和高分辨率支持 。其中最明显的特征有:任务栏窗口的实时缩略图;Alt-Tab和Win-Tab组合键所看到的效果。

桌面组合

到目前为止Vista最大的改变就是引进桌面组合。这成为一切都由DWM执行的基础。桌面组合的主要特点是:应用程序取得屏幕上像素的方法已经本质的改变。

内存的使用情况

因为每个窗口都需要在内存中有一个缓冲区来存储窗口的上下文, 所以这个 dwm.exe 进程所占的内存大小是由打开窗口的个数控制的. 如果打开了大量的窗口, dwm.exe 则会占用更多的内存. 在大多数情况下, 相比占用相对较少的内存, 使用复合窗口管理器是值得的.

关闭 dwm

关掉 dwm.exe 的唯一方法是停止这个服务运行. 在控制面板或者开始菜单中打开"服务", 然后找到列表里的 "Desktop Window Manager Session Manager", 然后点击"停止"按钮, 注意在点了"停止"按钮后你会切换到系统的基本主题(Basic Theme) .

可以以管理员模式运行控制台然后使用下面的命令:

Stop Service net stop uxsms
Start Service net start uxsms
Disable Service sc config uxsms start= disabled
Enable Service sc config uxsms start= auto