1. 前言

微软在Build
2017
中公布了新的规划语言Fluent
Design
System(以下简称FDS),但是官网只是堆砌了种种华丽的辞藻以及一堆动画。至于在UWP中要做成什么,如何是好,可以参照那么些视频:
Build Amazing Apps with Fluent Design – Build
2017

视频中应用BuildCast本条示例应用详细浮现了Fall
Creators Update(16299)中哪些促成FDS以及其余FCU的新API,极具参考价值。
2018正版葡京赌侠诗 1

要么参考开发人排长网,那里详细介绍了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-)。
    2018正版葡京赌侠诗 2

  • In-app acrylic 只透视套用了acrylic
    brush的因素(在ThemeResource中名称包括 -AcrylicElement-)。
    2018正版葡京赌侠诗 3

2.2 Light

UWP使用CompositionLight能够创造过多很有趣的普照效果,FDS主打的普照特效是Reveal,在FCU中半数以上Items
Control(ListView、GridView等)都默许启用了Reveal特效,一些Button控件也足以因此套用Style启用那个特效。

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

2018正版葡京赌侠诗 4

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>

2018正版葡京赌侠诗 5

2.4 Motion

UWP控件自带的卡通片已经重重,Connected
animations
则更进一步。Connected
animations寻常用于在导航中率领视觉,定位操作对象。

2018正版葡京赌侠诗 6

比起默许的写法,我更喜欢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"/>

2018正版葡京赌侠诗 7

2.5 Scale

在FDS中,伸缩性这么些宗旨相比非凡。它从不主打的控件或API,不难地领会成适应种种屏幕尺寸的响应式设计也足以,但自我更乐于将它的宏旨明白成设计可以在0D到3D的款型中延长,即可以适应从言语到鼠标、键盘、触摸、MR等各类花样的输入和出口。

2018正版葡京赌侠诗 8

对设计师和开发人员来说那一个大旨可能不太有意思,毕竟它看起来只是累赘,一点都不豪华。但自身以为重申那个焦点极度根本,UWP诞生的目的就是为着创制能在各个装备上运行的通用应用,伸缩性对UWP至关主要。尽管只针对桌面设备,能有各样输入方式对可用性都有很大压实。可惜随着近日运动系统的盛行,设计师越来越习惯设计只针对触摸的UI,连带影响到桌面应用,连忙键越来越少,有些设计师甚至拒绝提供按钮的PointerOver效果。希望随着设计规范及控件的圆满这么些题材能有所革新吧。

3. 在Fall Creators Update中升高使用

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

2018正版葡京赌侠诗 9

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="&#xF126;" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Light">
            <NavigationViewItem.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="&#xF126;" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Motion">
            <NavigationViewItem.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="&#xF126;" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Depth">
            <NavigationViewItem.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="&#xF126;" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Scale">
            <NavigationViewItem.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="&#xF126;" />
            </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运用在运用上述方案升级后外观有了广大改进(请忽略标题没有垂直居中那些小错误):

2018正版葡京赌侠诗 10

(待续…)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图