UWP Design Style文档笔记

Design and UI Style 笔记。

Icons for UWP apps App icons and logos

Small tile 71x71 Medium tile 150 x 150 Wide tile 310 x 150 Large tile 310x310

App icon 44x44 Splash screen Badge logo? Package logo/Store logo

为了支持不同的缩放级别（100%~400%），需要准备不同尺寸的图标。由于图标是位图，推荐准备以下缩放尺寸的图标：100%, 125%, 150%, 200% 400%。

应用商店默认使用App打包里面的图标，如果这不是想要的，你可以自己上传图片。参考 Display only uploaded logo images in the Store

Visual Studio自带的Manifest Designer可以方便地为你生成各式尺寸的图标。

下面目标尺寸的图标是推荐要生成的：

16x16
24x24
32x32
48x48
256x256

你可以提供一个Unplated图标，背景是透明的，这样图标显示的时候可以适配场景中自带的背景。以下场景可以使用unplated图标：

任务栏
任务栏弹出列表
任务视图
任务切换ALT+TAB

关于启动大图的设置，可以参考：UWP splash screens article

关于徽章图标，关于：Badge notifications for UWP apps article

默认情况下，Visual Studio生成图标时会加入边距。如果你图标设计时已经自带边距了，可以把让Visual Studio加边距的选项去掉。

图标会被放置在贴片上。对于small tiles，在宽和高方面，图标会被限制在贴片的66%大小。对于medium titles，wide tiles，large tiles，宽限制在66%，高限制在50%。对于66%宽的情况下，两边的边距大概是16%。

如果是要根据主题、语言等条件来区分图标，可以参考：Tailor your resources for language, scale, high contrast, and other qualifiers

（本篇完）

Icons for UWP apps Segoe MDL2 icons

图标是一种对信息图形化的表达，可以简单利落干脆得以较小的屏幕空间达成意思的表达。

图标可以在应用之内使用，也可以在应用之外使用。本篇只适用于前者，对于后者，可以参考app and tile icons article

由于图标是非常简单化的，所以最好是对约定俗成的信息才使用图标表达，太复杂的信息可能无法使用图标来表达。

创建图标的方式有多种，可以使用Windows自带的资源（比如Segoe MDL2 符号字体）来创建，也可以使用自建的矢量或者位图来创建图标。

Segoe MDL符号字体带有1000多个图标，专门为Windows优化，易于使用，具体参考Segoe MDL2 icons。

也可以使用Windows自带的其他符号字体，比如Wingdings和Webdings。

使用SVG的话可以参考SVGImageSource。SVG是采用几何方法构成的，你可以在UWP中直接使用这些几何方法生成图形，参考Move and draw commands for geometries

你可以使用PNG, GIF或者JPEG这种位图，但是这种位图扩展性差，无法适应不同分辨率。

创建图标按键，方式一，使用Segoe字体：

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

方式二，使用BitmapIcon, FontIcon, PathIcon, 或者 SymbolIcon：

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

command bar可以把多个图标拢到一起，形成一个图标组。这个组中的每个图标是AppBarButton类型，这个类型有一个Icon部属，可以用来指定图标。Windows在给一些图标（Symbol enumeration）列举了名字，这些图标名字可以直接被Icon部属中使用：

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

Segoe MDL2是Windows10引入的，替代了Win8中的Segoe UI符号字体。Segoe MDL2的字体编码映射到的是Unicode的Private Use Area of Unicode (PUA)。这是Segoe私有的，所以当使用这些Unicode编码时，必须指定Segoe MDL2编码，否则可能无法显示字体。

从设计上Segoe MDL2不能和其他字体混排在一起，这不像它的上一代的做法。所有的字形在Segoe MDL2中都有固定的宽度，以及固定的左边缘点，这样可以方便把字形堆叠到一起，容易形成新的组合。

Symbol enumeration列举了有命名的字体，可以直接使用：

<SymbolIcon Symbol="GlobalNavigationButton"/>

没有预先命名的，则使用的时候需要指定字体以及编号：

<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;"/>

可以从XAML主题中获取字体名字：

<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE700;"/>

如果不是Windows10，在其他操作系统上可以参考 Get the Segoe UI and MDL2 icon fonts来获取Segeo MDL2。

Icon list列举了一堆的Segeo MDL2字符。

Using brushes to paint backgrounds, foregrounds, and outlines

可以使用Brush画刷来涂绘XAML形状、文本以及空间的内在和外围。下面是相关辖属

Shape的Fill
Control的Background、Foreground

有以下既有的画刷类型：

AcrylicBrush
SolidColorBrush
LinearGradienBrush
RadialGradienBrush
ImageBrush
WebViewBrush
XamlCompositionBrushBase

SolidColorBrush简单地使用一种颜色作为画刷。可以通过颜色名、16进制颜色值，以及辖属元素语法三种不同方式设置。

首先XAML预定义了256中颜色地名字。这是从CSS3中借鉴地。XAML会自动把这些颜色转化成对应的类型：

<Rectangle Width="100" Height="100" Fill="Red" />

可以通过16进制值以ARGB方式指定颜色，也就是通过分别指定透明度、红、绿、蓝的方式来指定颜色：

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

可以通过辖属元素语法显示指定Brush:

<Rectangle Width="200" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
    </Rectangle.Fill>
</Rectangle>

下面讨论渐变画刷，LinearGradientBrush可以沿着一条线改变颜色。默认情况下这条线从左上到右下。可以使用StartPoint和EndPoint来改变这条渐变轴的走向。在这个渐变轴上，可以设置多个GradientStop来调整颜色值。每个GradientStop通过偏移来指定其位置。偏移是一个双精度浮点，范围可以从0到1。

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Visual Stuio或者Blend中的Linear Gradient页面也可以帮助生成LinearGradientBrush.

RadialGradientBrush是环形向外扩散渐变的。需要使用Center定义渐变起点, 以及使用RadiusX和RadiusY来定义渐变终点。

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

其他略。

（停笔）

Icons for UWP apps App icons and logos#

Icons for UWP apps Segoe MDL2 icons#

Using brushes to paint backgrounds, foregrounds, and outlines#

Icons for UWP apps App icons and logos

Icons for UWP apps Segoe MDL2 icons

Using brushes to paint backgrounds, foregrounds, and outlines