Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

28 Mar 2020

UWP设计文档阅读笔记(四):关于图标

Design and UI > Style > 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 icons

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字符。

(本篇完)

Categories

Tags

comments powered by Disqus