[UWP]如何使用Fluent Design System (上)

1. 前言

微软在Build 2017中公布了新的设计语言Fluent Design System（以下简称FDS），不过官网只是堆砌了各种华丽的词语以及一堆动画。至于在UWP中要做成怎么样，怎么做，可以参考这个视频：
Build Amazing Apps with Fluent Design - Build 2017

视频中使用BuildCast这个示例应用详细展示了Fall Creators Update(16299)中如何实现FDS以及其它FCU的新API，极具参考价值。

或者参考开发人员官网，这里详细介绍了FDS的五大核心主题（Material（材质）、Light（光照）、Depth（深度）、Motion（动态）和 Scale（伸缩性））相关功能及使用规范。

好像没见到专门提供给设计人员的FDS指南？

2. Fall Creators Update中的Fluent Design System

本文主要介绍微软在Fall Creators Update中主打的各种FDS特效、控件。

2.1 Material

材质是FDS最好玩的主题，以往主推的Metro强调去材质化，现在又重新提把材质捡回来。不过目前FDS中材质的应用场景有明确规定，并不是和以前材质化泛滥时一样连所有按钮都材质化。从材质的回归可以看出UWP的承载主体已经从屏幕延伸到MR。

Acrylic是目前FDS主打的材质。在Fall Creators Update之前计算器等几个应用已经用上了这个特效，效果看起来还不错。Acrylic除了负责展现材质化的效果，还负责营造有深度的UI。简单来说Acrylic只是一个Brush，UWP提供了一组Acrylic Brush给开发者使用，通过ThemeResource找到资源名字中包含“Acrylic”的Brush即可轻松在应用中使用Acrylic，代码如下：

<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">

Acrylic包含两种。

  • Background acrylic 透视整个应用UI，可以看到应用窗体后的其它应用或桌面（在ThemeResource中名称包含 -AcrylicWindow-）。
  • In-app acrylic 只透视套用了acrylic brush的元素（在ThemeResource中名称包含 -AcrylicElement-）。

2.2 Light

UWP使用CompositionLight可以制造很多很有趣的光照效果，FDS主打的光照特效是Reveal，在FCU中大部分Items Control（ListView、GridView等）都默认启用了Reveal特效，一些Button控件也可以通过套用Style启用这个特效。

<Button Content="Button Content" Style="{StaticResource ButtonRevealStyle}"/>

Reveal最大的特点是鼠标靠近时控件的边框会被照亮，这对于无边框按钮或ListViewItem可以在不破坏其简约设计的前提下提示其可操作区域。（或许在MR中Reveal有更多的应用场景。）

2.3 Depth

即使在强调扁平化的时代，深度仍是设计师关心的一个主题。FCU中除了使用Acrylic营造有深度的UI，还新增了ParallaxView控件，可以制作简单的视差滚动效果。

<ParallaxView x:Name="parallaxView"
              Source="{Binding ElementName=listView}"
              VerticalAlignment="Top"
              HorizontalAlignment="Left"
              VerticalShift="50">
    <Image Source="ms-appx:///Assets/cliff.jpg" />
</ParallaxView>
<ListView x:Name="listView"
          HorizontalAlignment="Stretch"
          VerticalAlignment="Top"
          Background="#80000000">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    ...
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"
                       Foreground="White" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

2.4 Motion

UWP控件自带的动画已经不少，Connected animations则更进一步。Connected animations通常用于在导航中引导视觉，定位操作对象。

比起默认的写法，我更喜欢UWP Community Toolkit封装好的 Connected Animations 附加属性。只需在源页面和目标页面的操作对象使用相同的Connected.Key即可轻松实现Connected animations。

MotionPage.xaml

<Border Height="100"
        Width="100"
        Background="{ThemeResource SystemControlForegroundAccentBrush}"
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        animations:Connected.Key="item"
        Tapped="Border_Tapped" />

MotionPage.xaml.cs

navigationService.NavigateToPage<ConnectedAnimations2ndPage>();

ConnectedAnimations2ndPage.xaml

<Border x:Name="HeroElement"
        Height="300"
        Width="300"
        Background="{ThemeResource SystemControlForegroundAccentBrush}"
        animations:Connected.Key="item"/>

2.5 Scale

在FDS中，伸缩性这个主题比较特殊。它没有主打的控件或API，简单地理解成适应各种屏幕尺寸的响应式设计也可以，但我更愿意将它的主旨理解成设计可以在0D到3D的形式中延伸，即可以适应从语言到鼠标、键盘、触摸、MR等各种形式的输入和输出。

对设计师和开发人员来说这个主题可能不太有趣，毕竟它看起来只是繁琐，一点都不华丽。但我觉得重申这个主题十分重要，UWP诞生的目的就是为了打造能在各种设备上运行的通用应用，伸缩性对UWP至关重要。即使只针对桌面设备，能有各种输入方式对可用性都有很大提高。可惜随着最近移动系统的流行，设计师越来越习惯设计只针对触摸的UI，连带影响到桌面应用，快捷键越来越少，有些设计师甚至拒绝提供按钮的PointerOver效果。希望随着设计规范及控件的完善这个问题能有所改善吧。

3. 在Fall Creators Update中升级应用

在Fall Creators Update中只需要修改导航及标题栏，应用的UI即可有大幅提升。

3.1 使用NavigationView更新导航菜单

以前很多教程都专门讲解了怎么制作汉堡包菜单，现在UWP终于提供了默认方案。NavigationView是Fall Creators Update提供的新导航菜单，它应用了FDS最常用的两个特效：Acrylic和Reveal，可以折叠及最小化，使用简单：

<NavigationView IsSettingsVisible="True"
                x:Name="NavigationView"
                AlwaysShowHeader="False"
                ItemInvoked="NavigationView_ItemInvoked"
                x:FieldModifier="Public">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Material"
                            IsSelected="True">
            <NavigationViewItem.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Light">
            <NavigationViewItem.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Motion">
            <NavigationViewItem.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Depth">
            <NavigationViewItem.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Scale">
            <NavigationViewItem.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame x:Name="RootFrame"
           Navigated="RootFrame_Navigated">
    </Frame>
</NavigationView>

3.2 将内容扩展到标题栏

在程序启动或每次更改主题颜色时调用SetupTitlebar()这个函数，注意要根据当前主题颜色改变TitleBar上按钮的颜色（因为官方文档上没有，所以很多人会忘了处理按钮的颜色）：

private static void SetupTitlebar()
{
    if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView"))
    {
        var titleBar = ApplicationView.GetForCurrentView().TitleBar;
        if (titleBar != null)
        {
            titleBar.ButtonBackgroundColor = Colors.Transparent;
            if (TrueTheme() == ElementTheme.Dark)
            {
                titleBar.ButtonForegroundColor = Colors.White;
                titleBar.ForegroundColor = Colors.White;
            }
            else
            {
                titleBar.ButtonForegroundColor = Colors.Black;
                titleBar.ForegroundColor = Colors.Black;
            }

            titleBar.BackgroundColor = Colors.Black;

            titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
            titleBar.ButtonInactiveForegroundColor = Colors.LightGray;

            CoreApplicationViewTitleBar coreTitleBar = TitleBarHelper.Instance.TitleBar;

            coreTitleBar.ExtendViewIntoTitleBar = true;
        }
    }
}

public static ElementTheme TrueTheme()
{
    var frameworkElement = Window.Current.Content as FrameworkElement;
    return frameworkElement.ActualTheme;
}

主页中使用TextBlock代替应用标题：

<TextBlock x:Name="WindowTitle"
           Style="{ThemeResource CaptionTextBlockStyle}"
           Visibility="{x:Bind TitleHelper.TitleVisibility, Mode=OneWay}"
           Margin="{x:Bind TitleHelper.TitlePosition, Mode=OneWay}"
           VerticalAlignment="Top"
           Text="{x:Bind appmodel:Package.Current.DisplayName}" />

我自己的ColorfulBox应用在使用上述方案升级后外观有了不少改善（请忽略标题没有垂直居中这个小错误）：

（待续...）

原文地址：https://www.cnblogs.com/dino623/p/FluentDesignSystem.html

时间： 2024-08-01 02:10:33

[UWP]如何使用Fluent Design System (上)的相关文章

[UWP]如何使用Fluent Design System (下)

原文:[UWP]如何使用Fluent Design System (下) 4. 兼容旧版本 FDS最常见的问题之一是如何与Fall Creators Update之前的版本兼容,其实做起来也挺简单的,ColorfulBox就实现了Creators Update与Fall Creators Update之间的兼容. 4.1 使用HamburgerMenu代替NavigationView UWP Community Toolkit中的HamburgerMenu是以前制作汉堡包导航菜单最常用的方案,升

Microsoft Fluent Design System

转载自:http://www.ui.cn/detail/131217.html 就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言--"Fluent Design System". 就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言--"Fluent Design System",这一消息给广大设计师又带来了一针强心剂,作为软件大鳄的微软也开始要在设计语言的道路上扮演一个指路人的

Advanced Design System 2014.01 (64-bit Simulations)终于要得到lisence了,很期待2014版本可以使用

这几天一直在想着怎么破解Advanced Design System 2014.01  (64-bit Simulations),没有一点进展,有点失望,莫非正版软件必须要购买才能使用?有点想卸载的冲动,还不如装上Advanced Design System 2009呢?今天又试了一下,终于收到回复邮件,看到了希望 *******************************************************************************************

【转】OS X Base System 上没有足够的空间来进行安装

今天在windows环境下安装IOS虚拟机,安装过程中报了一个错:"OS X Base System "上没有足够的空间来进行安装.如图: 之后的解决办法是:点击上方的[实用工具]->[磁盘工具],显示如下: 选择下方的[VMware virtual SA--],然后点击上方的[抹掉]按钮,弹出弹框: 填入名称后,点击弹框中的[抹掉]按钮,然后关闭磁盘工具.在安装页面可以看到可使用的硬盘: 选择该硬盘,点击[继续]按钮,即可继续安装. from:https://blog.csdn

WP8.1 和UWP 如何使用下载网页的上的音频 并保存

WP8.1: private async Task<StorageFile> GetVoiceData() { HttpClient httpclient = new HttpClient(); var GetData = await httpclient.GetStreamAsync(new Uri("http://dx.sc.chinaz.com/Files/DownLoad/sound1/201207/1771.mp3")); var file = await App

Win10/UWP 让你的App使用上扫描仪

UWP的扫描仪功能现在被微软划分到了[Windows Desktop Extensions for the UWP]中,如果要使用扫描仪扫描图片到自己的App中,首先我们要添加[Windows Desktop Extensions for the UWP]的引用,这个dll中的所有类都是只能在Desktop设备上才能正常运行的.添加[Windows Desktop Extensions for the UWP] 扫描仪需要用Windows.Devices.Scanners 命名空间下的成员,有几

[UWP]使用Reveal

1. 前言 之前在 如何使用Fluent Design System 这篇文章里已经简单介绍过Reveal的用法,这篇再详细介绍其它内容. 2. 自定义RevealButtonStyle 我觉得常用ItemsControl都已经自动应用了Reveal,用就是了. 没有默认应用Reveal的控件,UWP也为其中一部分提供了可用的Reveal样式. 只需简单地应用Style即可: <Button Content="Button Content" Style="{Static

[UWP]新控件ColorPicker

1. 前言 Fall Creators Update中提供了一个新得ColorPicker控件,解决了以前选择颜色只能用Combo Box的窘境. 2. 一个简单的例子 <ColorPicker x:Name="ColorPicker" Margin="5" /> <Grid Margin="5"> <Grid.Background> <SolidColorBrush Color="{x:Bin

design language

design language https://en.wikipedia.org/wiki/Design_language 设计语言(设计词汇)是一种超架构的方案和风格, 它用于指导产品组件或者架构配置的设计. 设计者希望他们的产品包都具有一致的外观和感受. 描述设计方面的选择, 包括 : 材料 颜色方案 形状 模式 质地 布局 A design language or design vocabulary is an overarching scheme or style that guides