视觉效果：修订间差异

视觉效果 (查看源代码)

2023年10月23日 (一) 09:11的版本

删除11,565字节、 2023年10月23日 (星期一)

→‎Fluent Design System(流畅设计体系)

DaveHawk

534

个编辑

@@ 第108行： / 第108行： @@
 除了对 "开始" 菜单所做的更改之外, Windows 8 还采用了一种更具模式的方法, 它的Modern UI应用程序使用全屏模式, 从而避开了对基于图标的桌面界面的依赖。然而, 在这样做的同时, 微软已经将其重心从多任务和业务生产率转移了出来。在不久以后, Fluent Design System 代替了它。
 ===Fluent Design System(流畅设计体系)===
-{{NoDev}}
+{{Main|Fluent Design System}}
-====综述====
+Fluent Design System是微软于2017年推出的一种视觉设计语言，取代了自Windows 8起长期使用的Modern UI。该设计语言以“光、深度、运动、材料和规模”五大元素作为设计主线。
-FDS(代号Project NEON)是微软2017年开发的设计语言。流利的设计是对 Microsoft Design Language 2的改造, 其中包括为所有 Windows 10 设备和平台设计的软件中使用的设计和交互指南。该系统是基于五关键组件: 光, 深度, 运动, 材料和规模。新的设计语言包括更加突出的深度和半透明作用。
-设计的初步成果(特别是 "亚克力" 半透明效果, "显示" 对按钮的影响) 已纳入 Windows 10, 随着时间的推移, 更多新的特色将被引入到Windows中。
-====原则====
-* '''自适应'''：Fluent 体验在每台设备上都显得自然
-Fluent 体验可根据环境进行调整。 Fluent 体验在平板电脑、台式机和 Xbox 上显得很舒适 - 它甚至在混合现实头戴显示设备中表现得很好。 此外，当你添加更多硬件时（例如用于电脑的一台额外显示器），Fluent 体验将利用它。
+原介绍图文篇幅过长，因此单独分出一篇条目。
-* '''引人共鸣'''：Fluent 体验直观且强大
-Fluent 体验可根据行为和意图进行调整—它们能了解和预测需求。 它们将人和思想结合起来，不管他们是站在地球的两头还是站在一起。
-* '''美观'''：Fluent 体验吸引力十足且令人沉醉
-通过融入物理世界的元素，Fluent 体验挖掘到了根本的东西。 它运用光线、阴影、动作、深度和纹理，以一种直观和本能的方式整理信息。
-====组成====
-=====亚克力材料=====
-[[File:FDS introduce-1.png|none|920px]]
-Acrylic 是一种画笔，用于创建半透明纹理。 你可以将 Acrylic 应用到应用图面中，并帮助构建视觉层次结构。
-[[File:FDS introduce-2.png|thumb|left|Light 主题中的 Acrylic]] [[File:FDS introduce-3.png|thumb|right|暗色主题中的 Acrylic]]
-<br><br><br><br><br><br><br><br><br><br><br><br>
-======Acrylic 混合类型======
-Acrylic 最明显的特征是其透明度。 有两种 Acrylic 混合类型可改变材料透明度：
-背景 Acrylic，显示桌面壁纸和当前处于活动状态的应用后的其他窗口，增加了应用程序窗口之间的层次感，同时允许用户进行个性化偏好设置 。
-应用内 Acrylic，在应用框架内增加层次感，焦点清晰且层次分明 。
-[[File:FDS introduce-4.png|none]]
-[[File:FDS introduce-5.png|none|]]
-对多层 Acrylic 图面谨慎分层：多层背景 Acrylic 会造成令人分心的视觉错觉。
-======何时使用 Acrylic======
-* 将应用内 Acrylic 用于支持 UI，例如在滚动或交互时可能重叠内容的图面上。
-* 将背景 Acrylic 用于瞬态 UI 元素，例如上下文菜单、浮出控件和可轻型消除的 UI。
-* 在瞬态场景中使用 Acrylic 有助于维护与触发瞬态 UI 的内容之间的视觉关系。
-如果在导航图面上使用的是应用内 Acrylic，则考虑扩展 Acrylic 窗格下的内容，以改善应用上的流。
-但为避免产生条纹效果，尽量不要边对边放置多个 Acrylic - 这可能会在两个模糊图面之间产生多余接缝。 Acrylic 这种工具可让设计在视觉上更加协调，但使用不当可能会导致视觉干扰。
-考虑以下使用模式，确定将 Acrylic 融入应用的最佳方式：
-======垂直窗格======
-对于有助于将应用内容分段的垂直窗格或图面，我们建议使用不透明背景，而不是 Acrylic。 如果垂直窗格在内容上方展开（比如在 NavigationView 的“精简”或“最小”模式下），建议使用应用内 acrylic 来帮助在用户展开此窗格时维护页面的上下文 。
-======瞬态图面======
-对于具有菜单浮出控件、非模式弹出窗口或轻型消除窗格的应用，我们建议使用背景 Acrylic。
-[[File:FDS introduce-6.png|none|900px]]
-''呈现 Acrylic 图面会大量占用 GPU，从而导致设备的功耗增加并缩短电池使用时间。 设备进入节电模式时会自动禁用 Acrylic 效果，并且用户可以选择禁用所有应用的 Acrylic 效果。''
-======可用性和适应性======
-Acrylic 外观可自动适应各种设备和上下文。
-在高对比度模式中，用户仍将看到自己选择的熟悉的背景颜色，而非 Acrylic。 此外，背景 Acrylic 和应用内 Acrylic 均显示为纯色：
-*用户关闭“设置”>“个性化设置”>“颜色”中的透明度时
-*启用节电模式时
-*应用在低端硬件上运行时
-此外，只有背景 Acrylic 会将半透明度和纹理替换为纯色：
-*桌面上的应用窗口停用时
-*Windows 应用在手机、Xbox、HoloLens 或平板电脑模式下运行时
-======其他样式的 Acrylic 效果======
-[[File:FDS introduce-7.png|none]]
-[[File:FDS introduce-8.png|none]]
-[[File:FDS introduce-9.png|none]]
-======如何设计 Acrylic======
-微调 Acrylic 的关键组件以凸显其独特外观和属性。 从半透明度、模糊和噪点设置开始，为平滑图面增添视觉深度和维度。 添加了排除混合模式层，以确保放置在 Acrylic 背景上的 UI 的对比度和可读性。 最后，添加了各种颜色色调，以供用户进行个性化设置。 这些图层协同作用，形成了全新的实用材料。
-[[File:FDS introduce-10.png|900px|none]]
-Acrylic 设置：背景、模糊、排除混合、颜色/色调覆盖、噪点
-=====显示焦点=====
-[[File:FDS introduce-11.png|920px|none]]
-显示焦点是 10 英尺体验（如 Xbox One 和电视屏幕）的一种灯光效果。 当用户将游戏板或键盘焦点移向可聚焦元素（如按钮）时，它会将这些元素的边框进行动画处理。 默认情况下，它是关闭状态，但启用很简单。
-显示焦点通过在元素边框周围添加动画的明亮辉光来引起对聚焦元素的注意：
-[[File:FDS introduce-12.gif|920px|none]]
-在用户可能不会完全注意整个电视屏幕的 10 英尺场景中这尤为有用。
-默认的“显示焦点”视觉对象分为三部分：主边框、辅助边框和显示明亮辉光。 主边框为 2px 粗，在辅助边框的“外部”周围运行 。 辅助边框为 1px 粗，在主边框的“内部”周围运行 。 “显示焦点”明亮辉光的粗细与主边框的粗细成比例，在主边框的“外部”周围运行 。
-除静态元素外，“显示焦点”视觉对象还采用动画灯光，在静止状态它会跳动，当移动焦点时它会朝着焦点方向移动。
-[[File:FDS introduce-13.png|920px|none]]
-=====视觉差异=====
-视差是一种视觉效果，即靠近观察者的物体比背景中的物体移动得更快。 视差可产生一种深度、透视和移动感。
-======工作原理======
-在 UI 中，你可以在 UI 滚动或平移时，通过以不同的速率移动不同的对象来创建视差效果。 为了说明这一点，让我们看看两层内容：列表和背景图像。 该列表位于该背景图像的顶部，这已经给人以列表可能靠观察者更近的错觉。 现在，若要实现视差效果，我们希望对象离我们最近的对象比远离远处的对象 "快速"。 当用户滚动界面时，列表比背景图像移动得更快，从而产生深度错觉。
-[[File:FDS introduce-14.gif|none]]
-=====连贯的动画=====
-连贯的动画让你可以通过为一个元素在两种不同视图之间的转换创建动画来创建动态且引人入胜的导航体验。 这有助于用户维持其上下文并提供不同视图之间的连贯性。
-在连接的动画中，在 UI 内容的更改过程中，在两个视图之间出现 "继续" 元素，在屏幕上，从其在源视图中的位置到新视图的目标位置。 这强调了视图间的通用内容，并在转换过程中创建了漂亮而动态的效果。
-[[File:FDS introduce-15.gif|none]]
-======为何选择连贯动画？======
-在页面之间导航时，很重要的一点是让用户了解导航过后会出现哪些新内容，以及这些新内容与他们在导航时的意图有何关联。 连贯动画提供了一个强大的视觉隐喻，通过将用户的注意力转移到两个视图之间共享的内容，强调了二者之间的关系。 此外，连贯动画为页面导航增添了视觉效果和润色，这可以帮助让你的应用的动态设计与众不同。
-======协调动画======
-协调动画是一种特殊类型的入口动画，其中元素与连接的动画目标同时出现，并在屏幕上移动连接的动画元素时与连接的动画元素一起进行动画处理。 协调动画可以向一个转换添加多个视觉效果，并进一步将用户的注意力转移到源视图和目标视图之间共享的上下文。 在这些图像中，该项目的标题 UI 使用协调动画创建动画。
-[[File:FDS introduce-16.gif|none]]
-当协调动画使用重力配置时，重心将应用于连接的动画元素和协调的元素。 协调的元素将与连接的元素 "一次性"，使元素保持真正的协调。
-=====突出显示=====
-[[File:FDS introduce-17.png|920px|none]]
-突出显示是当用户在交互式元素（如命令栏）附近移动指针时突出显示这些元素的灯光效果。
-当指针靠近时，突出显示通过显示元素的容器来引起对交互式元素的注意，如此图所示：
-[[File:FDS introduce-18.gif|none]]
-通过显示对象周围的隐藏边框，“展示”可以帮助用户更好地理解他们与之交互的空间以及可用操作。 这一点在列表控件和按钮分组方面尤其重要。
-这里展示几种不同的突出显示：
-[[File:FDS introduce-19.png|none]]
-======主题中的展示======
-展示会根据请求的控件、应用或用户设置的主题略微更改。 在深色主题中，展示的边框和悬停光线为白色，但在浅色主题中，只有边框变暗为浅灰色。
-[[File:FDS introduce-20.png|none]]
-======在自定义控件上启用“展示”======
-可以为自定义控件添加“展示”功能。 在执行操作前，最好先对“展示”效果的工作原理多些了解。 展示包含两种单独的效果：“边框展示”和“悬停展示” 。
-*“边框”会在指针靠近时显示交互式元素的边框 。 此效果会向你显示，这些邻近项目可以与当前的聚焦项目采用类似操作。
-*“悬停”会在悬停或聚焦的项目周围应用一个柔和的光晕形状，并在单击时播放按下动画 。
-[[File:FDS introduce-21.png|none]]
-====Build 2018: Fluent Design 展望====
-Fluent Design 经过一年的开发，进步着实不少。微软在Build 2018 大会上承诺，Fluent Design 将获得大幅度更新 这些更新有:
-*命令条浮层
-*Z 轴深度和阴影
-*瞬间 UI 的 Acrylic 质感
-*导航视图
-*Fluent 标准和紧凑布局
-*表单验证
-*@ mentions
-*行内手写
-*相关性命令
-*数据合集
-*Reveal 聚焦状态
-*环境不再生硬
-*动效系统改进
-其中大多数现在已经实现，而 Fluent Design System 将继续完善，携手 WinUI 3 ，为用户带来更好的视觉交互体验。
-FDS现已支持跨平台体验（PC,Android,iOS,macOS,Web）。
-====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 控件的用户控件）。 必须有自定义控件的源代码，才能通过应用程序对其进行编译。
 ===Windows 11 中的设计===

视觉效果：修订间差异

视觉效果 (查看源代码)

2023年10月23日 (一) 09:11的版本

导航菜单

搜索