通过

新型应用程序

使用动态磁贴生成更好的 UX

Rachel Appel

Rachel Appel动态磁贴是一种介绍应用程序的有效方式。可以显示应用程序的相关信息，而无需要求用户进入应用程序。作为 Windows 平台 UX 功能的一部分，动态磁贴非常有吸引力，内含值得点击的相关内容。

动态磁贴可以创造良好的第一印象。用户并不关心代码或任何技术细节。他/她关心的是使用应用程序能得到怎样的体验。是否易于使用？是否直观？对于用户来说，这些事情比底层信息更加重要。

动态磁贴是应用程序的入口，是用户了解应用程序使用情况的第一印象。使用应用程序的每个人都会在使用应用程序的其他部分之前，首先看到并使用动态磁贴。不管动态磁贴是用于启动应用程序还是只在其中显示少量数据，这都无关紧要。动态磁贴用于创造极为重要的第一印象。

即您最好确保磁贴和初始屏幕非常有吸引力。这并不是说您可以忽略应用程序的其他部分，但没有好看的磁贴您永远无法让用户体验您的应用程序。正如您可以想到的，您可以通过推送通知使用最新信息定期更新动态磁贴。您甚至可以通过添加徽章来显示应用程序相关信息，将通知扩展到锁定屏幕。

图 1 展示了 Windows 平板电脑和台式计算机上可用的四种动态磁贴：大、宽、中和小。图 1 中的图像显示磁贴不显示信息时，天气频道如何利用简洁设计。当磁贴显示信息时，您可以看到丰富的图形，而磁贴只显示最重要的信息。这种情况下，显示的是当前天气及严重的风暴警告。

The Four Sizes of Live Tiles—Large, Wide, Medium and Small
图 1 四种大小的动态磁贴：大、宽、中和小

UX 越好，应用商店评级和用户满意度就会越高。带有标记的动态磁贴是使您的应用程序区别于其他应用程序的最佳方式。图 1 演示了磁贴如何成为完美体验的一部分。用户无需打开应用程序就可看到当前天气。在大的主磁贴上，用户可设置三个要跟踪天气的城市，在其他磁贴上可以一个磁贴跟踪一个城市。这会将一些重要数据压缩到只有 310x310 像素大小，或者甚至更小的展示区。

动态磁贴图形的工作原理

由于我已经解释了动态磁贴重要的原因，现在我们将了解如何结合使用图形与磁贴。幸运的是，Microsoft 完成了一项伟大的工作，创建了简单易懂的、开发人员友好的 UX 模式，以及一组适用于平板电脑、手机和较小的触摸优先设备的设计原则。您可以发布外形美观的应用程序，而无需雇佣设计人员。这并不是说您应该完全避免使用设计人员。某些应用程序（尤其是游戏）具有需要设计人员输入的复杂图形。

本文将涵盖一些非设计开发人员就能轻松完成的动态磁贴设计。作为原则集的一部分，动态磁贴允许用户使用应用程序的数据，而无需与应用程序实际交互。这样最为方便，因为用户可以快速扫描设备主屏幕，瞬间就可以从多个源获取相关信息。

新型应用程序中有两种图形：用户生成的图形和应用程序图形。家庭度假照片或专业照片被视为用户生成的图形。动态磁贴中的图像或应用程序栏上的图像为应用程序图形。在构建磁贴时，您可以使用任意一种图形来传达信息。Visual Studio 包含遵循 Microsoft 新型设计的模板，这有助于您完成专业的演示文稿。即您所需的一切内容都已包含在 package.appxmanifest 文件中。您需要做的只是提供大小正确的图形。

让尚未成为动态的磁贴包含适当的标记，这一点很重要。如图 2 所示的磁贴具有简洁的设计，其中包含引号气球和 Quote of the Day (QotD) 的首字母。通过简洁的设计和鲜红的颜色，很容易查找并确定这是什么应用程序。目前，它们还是标准的静态磁贴。当您开始发送更新时将发生变化。

Quote of the Day 应用程序的动态磁贴
图 2 Quote of the Day 应用程序的动态磁贴

在 Windows 应用商店应用程序或 Windows Phone 应用商店应用程序中使用图形时，以下资产需要一些图像：

  • 动态磁贴：用户点击或单击以启动应用程序的大的或小的正方形或长方形。这些正方形或长方形通常包含图像或文本。
  • 徽章：动态磁贴上表示应用程序状态的小图标或字形。图 1 显示了大磁贴、小磁贴中的徽章。
  • 初始屏幕：应用程序加载之前显示的介绍性屏幕。该屏幕通常包含徽标或图形。
  • 应用程序内的磁贴：这些磁贴将显示应用程序数据，且位于 GridView 或 ListView 中。它们看起来像 Windows“开始”页面上的动态磁贴。

这些图像采用 .png 和 .jpg 格式时效果最好。每个 Windows 应用商店应用程序和 Windows Phone 应用商店应用程序都可以包含许多不同大小的图像资产。您可以通过编辑项目的包清单来配置图像属于哪个磁贴。包清单是一个文件，可以在其中设置所有应用程序特定的设置，如名称、版本号、图形资产和功能声明。图 3 显示了您在 Windows 应用商店应用程序的 package.appxmanifest 中定义的徽标。

Configure the Tile Graphics in the App’s Package.appxmanifest File
图 3 在应用程序的 Package.appxmanifest 文件中配置磁贴图形

您应为以下每个资产类型提供至少一个图形，否则应用程序会显示其默认图标：

  • 正方形 70x70 徽标：70x70 像素的图像
  • 正方形 150x150 徽标：150x150 像素的图像
  • 宽 350x150 徽标：350x150 像素的图像
  • 正方形 310x310 徽标：310x310 像素的图像
  • 正方形 30x30 徽标：30x30 像素的图像

您可以且应该为这些磁贴类提供缩放的图形。图 3 中的项目的缩放资产分别为缩放 80%、100%、140% 和 180%。图 3 的底部列出了这些缩放资产所需的精确尺寸。请注意，以上仅适用于 Windows 应用商店应用程序。Windows Phone 应用商店应用程序项目的资产和缩放集略有不同，适合较小的设备类型。Windows 应用商店和 Windows Phone 应用商店应用程序都具有以下徽标和初始屏幕配置：

  • 应用商店徽标：在应用商店中显示的徽标。
  • 徽章徽标：可以在锁定屏幕上或现有磁贴内部显示的小图标。
  • 初始屏幕：在应用程序启动时显示的通常包含徽标或介绍性文本的全屏页面。

这些图像具有多个版本，因为在台式计算机、手机、平板电脑及其他设备上，需要根据不同的屏幕配置将图像缩放至正确大小。150x150 像素的图像不能拉伸太多，否则会像素化且变得模糊。

您可以使用任何照片或图形编辑程序为磁贴创建图形。通过这些工具，创建如图 2 中的这种简洁但引人注目的徽标并不是难事。还有很多股票图形也可用于应用程序。

为来自模板的磁贴编码

磁贴不仅仅是普通图标，因为它们可以在不同时间显示不同的图像和文本。正是这些定期更新使它们成为动态磁贴。您可以通过代码来更新磁贴，或将磁贴与推送通知集成。如果您使用推送，则可以使用适合进程生命周期的后台任务来更新磁贴。这样您的应用程序本身无需运行，而一些代码可以按照预定的时间间隔在五个不同项目中循环运行。有关进程生命周期管理的背景信息，请参阅“Windows 应用商店应用程序的生命周期”，网址位于 msdn.microsoft.com/magazine/jj660301。

图 4 中的代码可执行简单的磁贴更新来生成图 5 中的磁贴，而无需推送通知。它首先通过调用 TileUpdateManager 类的静态 CreateTileUpdaterForApplication 来获取 TileUpdater 对象。完成后，该代码通过将一个 TileTemplateType 枚举选项传递到 TileManager 类的 GetTemplateContent 方法来继续提取预定义的磁贴模板。

图 4 无需推送通知的简单磁贴更新

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
var square150x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileSquare150x150Text04);
square150x150.GetElementsByTagName("text")[0].InnerText =
  "Only in the darkness can you see the stars. –Dr. Martin Luther King, Jr.";
updater.Update(new TileNotification(square150x150));
var wide310x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileWide310x150SmallImageAndText03);
wide310x150.GetElementsByTagName("text")[0].InnerText =
  "We live in a society exquisitely dependent on science and
  technology, in which hardly anyone knows anything about
  science and technology. - Carl Sagan";
((XmlElement)wide310x150.GetElementsByTagName("image")[0]).SetAttribute("src",
  "ms-appx:///Assets/qotd310x150-sm.png");
updater.Update(new TileNotification(wide310x150));
var large310x310 =
  TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare310x310TextList02);
large310x310.GetElementsByTagName("text")[0].InnerText =
  "Let us pick up our books and our pens, they are the most powerful
  weapons. -Malala Yousafzai";
large310x310.GetElementsByTagName("text")[1].InnerText =
  "Never give up, for that is just the place and time that the tide will turn.
  -Harriet Beecher Stowe";
large310x310.GetElementsByTagName("text")[2].InnerText =
  "I've learned that people will forget what you said, people
  will forget what you did, but people will never forget
  how you made them feel. -Maya Angelou";
updater.Update(new TileNotification(large310x310));

可以使用的几个磁贴大小
图 5 可以使用的几个磁贴大小

访问 innerText 属性或调用 SetAttribute 使代码与磁贴配合使用。这是因为 HTML 模板用于描述磁贴的外观。幸运的是，只为制作磁贴的话，XAML 开发人员无需深入了解 HTML。它毕竟看上去像 HTML。但是，您应该了解如本文所述的定义 TileSquare150x150Text04 模板的 HTML 的元素。

<tile>
  <visual version="2">
    <binding template="TileSquare150x150Text04" >
      <image id="1" src=""/>
      <text id="1"></text>
    </binding>
  </visual>
</tile>

您不能只是从老尺寸中挑出任何老磁贴，自己不编写模板 HTML。相反，这里有几个模板供您选择，您可以用来编辑基本的磁贴形状、图标和消息。适用于 Windows 8.1 和 Windows Phone 8.1 的模板列表及代码示例位于 bit.ly/1oqwQd6。

从列表中选取一个模板，并在您的代码中使用它。在图 4 中，对 GetTemplateContent 的调用提取了此预定义模板。您可以从大量可用的模板中进行选择。

到目前为止，代码示例通过执行一些代码立即更新了一次磁贴。如果您要增加更多活力，请用最新信息定期更新磁贴。您可以通过向应用程序添加后台任务和推送通知来执行此操作。由于本文的重点是 UX，您可以观看位于 bit.ly/1vH6J2p 的视频，了解如何通过后台任务更新磁贴。

针对一级 UX 使用辅助磁贴

用户偶尔想要将一些数据固定到“开始”屏幕。航空公司登机牌、电子书或特定股票的股票代码都是用户希望固定到屏幕上的很好的示例。可以使用辅助磁贴在 Windows 8.1 或 Windows Phone 8.1 中实现此操作。辅助磁贴使用户可以轻松地自定义应用程序，从而使应用程序在应用商店中的评级更高。

应用程序世界中有一个深度链接的概念。表示用户在应用程序中导航了数次，且稍后将其固定到指向该应用程序的链接。以下是辅助磁贴的几个用法：

  • 特定城市的天气
  • 特定旅行的行程
  • 保存的游戏
  • 要开始或继续播放的特定电影
  • 朋友的联系信息
  • 最喜爱的图片
  • 自定义警报

请记住，这些磁贴是辅助磁贴，因为您已经有主动态磁贴了。虽然没有任何严格的规则，但还是应该在主磁贴中更新整个应用程序。为辅助磁贴所列的特定数据类型通常在主磁贴中没有意义。用户通常在启动应用程序后转到开始页面。辅助磁贴使用户在启动应用程序后直接进入应用程序的特定部分。这一过程的术语就是“深入链接”。一般来说，使用主磁贴启动可以打开应用程序的“开始”屏幕，使用辅助磁贴可进入特定数据详细信息。

以下代码将创建并显示辅助磁贴：

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
  string displayName = "Secondary tile";          
  string tileActivationArguments = "Look both ways before crossing the street";
  System.Uri square150x150Logo = 
    new System.Uri("ms-appx:///Assets/Logo.scale-100.png");
  SecondaryTile secondaryTile = new SecondaryTile("Pinned",
    displayName,
    tileActivationArguments,
    square150x150Logo,
    TileSize.Square150x150);
}

在调用 SecondaryTile 构造函数时，传入需要的所有信息（如名称、参数、大小以及要使用的图像）以填充磁贴。您所需的所有内容都在调用中，且构造函数已重载，因此您有多种选择。

辅助磁贴类似于标准磁贴，但它们可用于深入链接到内容或应用程序的特定部分。这两种磁贴集对用户越友好，应用程序在应用商店的评论就越好。因此，如果您的应用程序包含从 Windows 开始页面查看时很有用的特定数据，请考虑使用辅助磁贴。

直接结论

如果用户无需执行任何操作就能与您的应用程序进行交互，并收到有用的信息，这就是成功。应用商店中的评级将会反映这一情况。甚至是不擅长图形设计的开发人员也能创建外形美观且实用的应用程序。

请记住，创建尽可能多的缩放尺寸图形，Windows 会根据设备提供最适合的图形。UX 越好，应用商店评级就会越高。这就会直接带来更多的下载量。

Rachel Appel 是一名顾问、作家、导师和前 Microsoft 员工，在 IT 行业有 20 多年的经验。她常在 Visual Studio Live!、DevConnections、MIX 等顶级行业大会上发言。她的专业是开发侧重于 Microsoft 系列开发技术和开放式 Web 并且符合业务和技术需要的解决方案。有关 Appel 的详细信息，请访问她的网站 rachelappel.com。

衷心感谢以下 Microsoft 技术专家对本文的审阅：Frank La Vigne