UWP风向标 - 向 Windows 10 商店通用应用中添加矢量图标

Universal Windows Platform (UWP) App 的设计是面向有效像素进行设计的,它与 DPI 无关,能够为所有的 Windows 设备提供一致的用户感官体验。因此,我们建议你在进行面向 Windows 10 进行开发时尽量的使用矢量图标而不是位图图标,这样能够极大的减少你的程序包的大小,并且能让图标在任何设备上都能拥有平滑锐利的边缘,这能给用户带来更好的感官体验。

这篇文章将会详细的介绍如何在 Windows 10 商店通用应用中加入矢量图标,以及最佳实现。

使用 Path 元素绘制矢量图标

Path 元素支持绘制各式各样的矢量图形,你可以通过 Path 绘制几乎所有的矢量图形。

使用专为设计人员提供的设计工具 Blend for Visual Studio 2015 就能够以类似 Adobe Photoshop 的钢笔工具快速的设计出各式各样的矢量图形。

例如,以下代码可用于显示一个由 Path 绘制的矢量图标。

<Path Data="M6.88477,9.68345 L8.11523,9.68345 L8.11523,10.9432  
 L6.88477,10.9432 z M6.88477,4.67369 L8.11523,4.67369 L8.11523,8.42369
 L6.88477,8.42369 z M7.5,2.79869 C6.13281,2.79869 4.95605,3.29185
 3.96973,4.27818 C2.9834,5.26451 2.49023,6.44126 2.49023,7.80845
 C2.49023,9.17564 2.9834,10.3524 3.96973,11.3387 C4.95605,12.3251
 6.13281,12.8182 7.5,12.8182 C8.86719,12.8182 10.0439,12.3251 11.0303,11.3387
 C12.0166,10.3524 12.5098,9.17564 12.5098,7.80845 C12.5098,6.44126
 12.0166,5.26451 11.0303,4.27818 C10.0439,3.29185 8.86719,2.79869 7.5,2.79869
 z M7.5,1.56822 C9.21875,1.56822 10.6885,2.17857 11.9092,3.39927
 C13.1299,4.61997 13.7402,6.0897 13.7402,7.80845 C13.7402,9.5272 13.1299,10.9969
 11.9092,12.2176 C10.6885,13.4383 9.21875,14.0487 7.5,14.0487 C5.78125,14.0487
 4.31152,13.4383 3.09082,12.2176 C1.87012,10.9969 1.25977,9.5272
 1.25977,7.80845 C1.25977,6.0897 1.87012,4.61997 3.09082,3.39927
 C4.31152,2.17857 5.78125,1.56822 7.5,1.56822 z" Fill="Black" Height="16" Width="16" Stretch="Fill"/>

使用 TextBlock 元素与图标字体绘制矢量图标

字体图标是将图形信息储存在字体文件中,使用的时候在 TextBlock 元素中指定制定的图标字体,并输入对应的文字,以文本的形式在屏幕上绘制图标。

这样做可以在运行时通过更改 TextBlock 的 Text 属性来更改绘制的图标,这样做要比更改 Path 的数据更为方便。并且,得益于 Windows 10 的新文本呈现算法,在 UWP 中呈现文字元素的性能得到了很大的优化,并且占用内存更小。

例如,以下代码可用于显示一个由 TextBlock 与图标字体呈现的矢量图标。

<TextBlock Text="" FontFamily="Assets/icomoon.ttf#icomoon"/>  

&#是用于 XAML 的 Unicode 转义标志。

将文字转换为 Path

如果你使用字体图标,在Blend for Visual Studio 2015 中还提供了将文字直接转换为 Path 的快速的方法,让设计人员可以在设计时对字体图标进行调整。要想使用该项功能只需要在 Xaml 可视化设计器中,对想要转换为 Path 的 TextBlock 右键,在弹出的菜单中选择“路径 > 转化为路径”即可。

免费的图标字体资源

下面列举了一些我们为开发人员收集了一些免费的图标字体资源。

Fontello 在线定制属于你的图标字体,提供大量的图标供选择。 http://fontello.com/
Icomoon 可以上传 SVG 文件在线定制图标字体,也有很多图标库能直接使用。 http://icomoon.io/
FontAwesome 为Bootstrap 框架设计的免费开源图标字体,拥有 249 个图标。 http://www.bootcss.com/p/font-awesome/

最佳实现:使用 Glyphs 元素与图标字体绘制矢量图标

得益于Glyphs 的新的 IsColorFontEnabled 和 ColorFontPalleteIndex 属性,这表示程序的设计人员和开发人员可以使用 Glyphs 元素来呈现具有彩色的图标字体,这可以让图标看起来更丰富与多彩。并且在运行时中,只需要更改字符串 ColorFontPalleteIndex 属性就可以非常方便的达到各种各样的显示效果。

OpenType 彩色字体方案

微软为 OpenType 字体标准加入了一种能够支持多彩色的图标字体方案,该方案已经用于 Windows 8.1 以及 WindowsPhone 8.1 的 Emoji 表情中。该方案将一个彩色字体拆成多个部分,通过给每个部分渲染不同颜色顺序拼合,以达成多彩字体的绘制,并且该方案还为彩色字体的非彩色字体提供解决方案,以达到向上兼容。

例如,在Emoji 0x1F605 号表情。

0x1F605 号表情的黑白模式:

0x1F605 号表情的彩色模式:

0x1F605 号表情的彩色模式的组成部分:

给三个部分分别填充黄,黑,蓝,然后顺序摆放起来就组成彩色的Emoji 0x1F605 号表情,当彩色禁用时就会呈现黑白模式的图形。

使用Glyphs 元素来呈现图标字体

在XAML 中能轻松的通过 Glyphs 元素来绘制与呈现图标字体,下面这段代码可用于显示一个由Glyphs 与图标字体呈现的矢量图标。

<Glyphs UnicodeString="" FontRenderingEmSize="64" FontUri="ms-appx:///Assets/icomoon.ttf" Fill="Black"/>  

UnicodeString 属性提供了用于呈现图标的文本。

FontRenderingEmSize 属性提供了绘制文字时的大小。

FontUri 属性提供了绘制文字所使用的字体,这是一个 Uri 类型的属性,所以需要提供完整的 Uri 路径。

Fill 属性则提供了绘制文字所用的画刷。

构建支持多彩的彩色字体

并不是所有图标字体都有多彩的图标模式,设计人员与开发人员可能需要自己构建彩色字体,接下来会介绍如何使用字体创建工具来构建支持多彩的彩色字体。

在这里使用 high-logic 研发的FontCreator 字体创建工具来当作示例,你可以通过访问他们的官网 http://www.high-logic.com/ 来获取该工具。其他的字体创建工具也大同小异。

首先,我们使用FontCreator 字体创建工具打开我们需要修改的图标字体,假设你已经通过 Icomoon 或者 Fontello 等图标字体创建应用创建了不支持彩色的图标字体。

选用 0xE005 号图标作为实验对象。 打开该字符,进入编辑模式。 该字符由外围的图形和 3 个圆点, 4 个部分组成,想要转换为如下的彩色字体。

首先将外围图形与 3 个原点,通过颜色不同分别单独创建一个字符。由于圆点的颜色是一致的,才可以放在同一个字符中。

选择菜单“Insert > Characters”插入字符,并在 Unicode 表中找到合适的空位。

接着分别编辑这两个空字符,将原图形的两个部分复制到空字符中,并且保存。

接着我们打开0xE005 号图标,打开菜单“View > Color Mode”,进入彩色模式。

右键单击工作区,选择“Add…”加入之前创建的两个部分的字符,并使用“Paint Bucket”工具对两个部分进行上色。

此时可在弹出的“Palette”窗口编辑调色板,可以添加多个调色板,可用于不同情况下的配色,例如:可用与禁用状态的图标,可以在之后通过 Glyphs 元素的 ColorFontPalleteIndex 属性来选择不同的调色板与配色方案。

导出该字体,添加到项目中,要想字体在Windows 10 商店通用应用中正常使用,请在 Visual Studio 中将字体的“生成操作”属性改为“内容”。

下面代码可用于显示一个由Glyphs 与图标字体呈现的彩色矢量图标。

<Glyphs UnicodeString="" FontRenderingEmSize="64" FontUri="ms-appx:///Assets/icomoon2.otf"  IsColorFontEnabled="True" ColorFontPaletteIndex="0"/>  

IsColorFontEnabled 属性表示是否使用彩色模式的字体。ColorFontPaletteIndex 属性表示当前绘制的时候使用的调色板的索引,调色板可以在上色时的“Palette”窗口编辑与添加。

禁用彩色模式的显示效果: 启用彩色模式,并且调色板索引为0的显示效果: 启用彩色模式,并且调色板索引为1的显示效果:

结束语:

唔,大家可能有体会了,这篇文章中,我带有深深的MSDN 的文风,2333333,其实写起来还是挺麻烦的,要注意各种地方,有些地方也很啰嗦。但是,感觉这样的文风可能会更加的正(dou)式(B)。

这篇文章主要就是告诉大家如何使用Glyphs 元素来更好的呈现图标字体,还是挺方便的,希望能够帮助大家在解决在开发中关于图标字体的问题。

至于这个 UWA 风向标呢,是一个我另外开的一个系列的文章的坑,这个系列的文章 主要是讲一些 UWA 的新特性与其他一些大家很少关注的豆知识之类的。最近由于需要攒 MSP 积分什么的,所以大概会经常写博客,希望大家多多支持咯。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章