借助应用栏采用按需 UI

为了创建出一个卓越的应用，开发人员应专注于可让该应用从同类应用中脱颖而出的内容。Windows 8 提供了诸如超级按钮和应用栏等工具，从而可让开发人员轻松实现真正专注于让应用成为同类最优的内容，并最大程度减少其他内容分散用户对这一核心内容的注意 力。立即从本篇博文中了解如何使用这些工具，让您的应用和用户真正体会到其卓越之处。

专注于您的应用所最擅长的内容

当 您在影院中观看电影时，大屏幕中所播放的影片是您所能看到的唯一内容。影院中的其他地方都是漆黑一片。影院的各个角落都可听到影片环绕播放的声音，因此影 片也是您所能听到的唯一内容。人们常说有些影片属于是您“需要”前往影院观看的影片；如果您无法完全沉浸于影院环境，进而获得影院观影的体验，那么您将无 法充分感受这部影片的价值。在影院中观影，您可听到更清晰的对话，并可看到更逼真的画面，仿佛身临其境。可以说，您的注意力将完全集中于影片，直至您旁边的观影者手机响起，此时您的注意力将分散，观影体验也将中断。每一次注意力的分散都将逐渐让您远离充分欣赏影片的体验。

您的应用就像是影院，而您的应用就像是影院中播放的影片。在您的应用中为用户创造一个环境，让用户完全沉浸其中，这一理念便是新设计的核心。在博文创建能够脱颖而出的 Metro 风格应用中， 我们探讨了如何选择声明，以描述出您的应用相比同类应用的最大优势。如果您知道您的应用在同类应用中的最大优势，那么请专注于这一优势，Window 8 为您提供了多种工具，以便您将全部能分散注意力的其他内容排除在外，直至用户需要使用这些内容。我们将使用名为“与好友聚餐”(Food with Friends) 的示例应用来介绍这一理念。

我们在“与好友聚餐”应用中设计了以下页面：

图 1：“与好友聚餐”应用的层次结构

基 于“与好友聚餐”应用中的已有布局，您可响应好友当晚活动安排的建议，查找好友想去的餐厅，并查找您想去的餐厅。而且其中还包括一些您尚无法操作的内容。 您无法将餐厅添加到您的意愿列表，排序或筛选所有餐厅列表，或搜索某一特定餐厅。这些都没有关系。所有这些功能都很重要，但是这并不是您的应用最所最擅长 的内容。请记住我们从上一篇博文中所了解到的内容：

• “与好友聚餐”应用是帮助用户及其好友查找当晚就餐餐厅的同类最佳。

确 实如此，这正是您可使用的功能，而且您只需与我们已经完成布局的应用 UI 进行交互即可。“最擅长”声明最好能呈现于画布之中。如果我们打算添加按钮和小组件来让用户将项目添加到意愿列表或排序及筛选列表，那么在用户不需要使用 这些命令时，这将把用户的注意力从内容中分散。但是有些时候用户将需要使用这些命令。那么这些次要，但也重要的命令应位于何处呢？

Windows 8 为用户提供了一些标准的方式来在应用中访问 UI。这一 UI 将按需显示，即当用户不需要使用时，其将一直隐藏。按需显示的命令将不会使您的应用画布超负荷，因而不会分散用户的注意力。按需 UI 可让您在“最擅长”声明中专注于应用的每一个像素。几乎所有应用都可使用两种机制来显示其按需 UI：超级按钮和应用栏。由于超级按钮和应用栏将在整个生态系统内可用，而且用户将始终以一个标准的方式来调用它们，因此您大可放心：用户将在需要时启动 它们，并在不需要时专注于应用的内容。

超级按钮

图 2：超级按钮栏

在 设计 Windows 8 时，我们发现了几乎所有应用都将使用一些功能，而且所有用户都希望在卓越的应用中获得这些功能。考虑到这一普遍性，我们在每个应用中为这些命令创建了一个 名为“超级按钮”的起始点。超级按钮为用户提供了一个入口点，以便在每个应用和系统本身内搜索、共享、连接到设备和设置。您可在系统中的任何地方使用它 们。因此，在设计您的应用时，您不需要为用户确定一个智能方式来与其他应用或社交网络共享您的内容，抑或确定搜索框的位置。这并不会让您的应用从其他应用 中脱颖而出。设置固然重要，但是您不能让它们将用户的注意力从您所构建的优秀并有趣的功能中分散出来。超级按钮为用户提供一个标准方式来使用这些功能。而 最棒的一点在于，它们在用户希望使用之前将一直隐藏于屏幕之外，因此它们并不会将用户的注意力从真正让您的应用脱颖而出的内容中分散开来。在系统中的各个 部分中，用户都可通过向右轻扫、将鼠标向右侧角落拖动、或同时按下“Windows”键和“C”键来打开超级按钮。

应用栏和导航栏

图 3：应用栏和导航栏

超 级按钮为用户提供了一个访问几乎所有应用功能的标准方式，而应用栏和导航栏则为用户提供了访问每个应用特定功能的方式。各个填充了导航栏的应用的部分将由 于应用的不同而有所差异。应用栏上的命令将融入应用、页面甚至是当前选择的上下文。尽管应用栏和导航栏将由于应用的不同而有所差异，但由于这是用户查看应 用功能的首个位置（所有应用都是如此），因此它们将是所有应用的强大工具。在所有应用中，用户可通过从上或从下轻拂屏幕、在应用任何位置单击鼠标右键、或 在键盘上同时按下“Windows”和“Z”键来启动按需 UI，这些操作在所有包含应用栏和导航栏的应用中有效。

Windows 8 中的标准按需 UI 可让用户将时间用于浏览应用的内容，而非研究用户界面。这一效果明显的原因在于其在 Windows 和所有应用中保持一致，并可预测。在本博文接下来的部分中，我们将探讨如何设计并构建卓越的应用栏。而在今后的博文中，我们还将进一步详细介绍系统中诸如 单独超级按钮等其他功能，这些功能将有助于您专注于您的应用所最擅长的内容，并帮助您充分利用 Windows 8 应用生态系统的庞大优势。

应用栏中的内容

在 创建应用栏时，我们首先将想到的在于其中应装入哪些内容。正如我们此前所提到的，其应包含仅按需可用的功能，这是因为如果您的应用要成为同类最佳，那么这 些功能并不是主要应用场景的核心。您通常可通过确定应用生命周期内的使用频率来识别出这些功能。例如，让我们一同来看看 Release Preview 中 SkyDrive 应用中的应用栏：

图 4：SkyDrive 应用栏

SkyDrive 应用的最大优势在于让用户随处访问大量内容。因此应用的画布将专注于浏览这一内容。当然，添加文件也是该应用的一个重要部分。毕竟，如果不添加文件，您又 怎么才能在那形成海量收藏集？但是这毕竟不是用户时刻进行的某项操作，因此“添加”按钮最好能按需显示。这样一来，应用画布中的每一个像素都可专门服务于 您浏览收藏集，除非某时您确定希望添加新文件。在这些情况下，您的用户将准确了解如何启动添加命令，这是因为其显示方式与应用特定的隐藏 UI 在整个系统中的显示方式是一样的。

创建应用栏

使用 WinJS 和 XAML 中的 AppBar 控件是创建按需 UI 的最佳方式。您可使用该控件来创建位于屏幕底部的应用栏和位于顶部的导航栏（但是此处，我们将重点讨论前者）。

卓越的应用栏中最重要的一点在于其让用户使用标准的手势（从上/下轻扫、右键单击、或同时按下“Windows”和“Z”键）而显示所有可用的应用命令。应用栏控件可让您实现自由操作，除此之外，您还可轻松创建一个与整体外观协调的基本应用栏。

例如，如果我们为“与好友聚餐”应用中心页面而创建一个应用栏，那么默认情况下相关的唯一命令是为当晚创建新计划的功能，因此我们的应用栏将如下图所示：

图 5：“与好友聚餐”应用的应用栏

HTML

在 HTML 中创建标准应用栏较为容易。您只需创建一个 AppBar 控件，然后将 AppBarCommand 控件安放其中，并视情况设置这些控件的属性。借助 AppBarIcons 枚举，这一操作将变得更为简便，该枚举是一个预建的并准备使用与新样式相匹配的图标列表。

<div id="foodWithFriendsAppBar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdAdd',
            label:'New plan',
            icon:'add',
            section:'global',
            tooltip:'Create a new plan'}">
        </button>
    </div>

XAML

要在 XAML 中创建 AppBar，您需要实例化一个 AppBar 元素，并在根据您希望 AppBar 所显示的位置而在页面对象上将其设置为 BottomAppBar 或 TopAppBar 属性。然后再使用面向 Windows 应用商店应用的默认 Visual Studio 项目模板中所提供的存货样式来将按钮添加到 AppBar。在 XAML 中，您可通过将按钮放置于所需的布局面板之内而在 AppBar 中确定按钮的布局方式。

<Page.BottomAppBar>
    <AppBar>
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button    Style="{StaticResource AddAppBarButtonStyle}"
AutomationProperites.Name="New plan"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

可位于应用栏中的控件

我们通常可在应用栏中看到几类命令：按钮、切换按钮，以及 JS 中的浮出控件。为了列举各个类型的示例，让我们一同来看看 Release Preview 中有“邮件”应用的应用栏：

图 6：“邮件”应用栏

“邮件”应用栏中拥有标准按钮（例如“粘贴”）、切换按钮（例如“粗体”、“斜体”和“下划线”），以及可启动菜单（如“更多”）和自定义浮出控件（如“字体”、“字体颜色”和“突出显示”）的示例。要在 JS 中创建这些按钮类型，请参阅 AppBarCommand 对象。在 XAML 中，请遵循项目模板中的样式，而对于浮出控件，请使用包含轻型消除行为的填充类别。

将应用栏融入下上文

提供按需 UI 仅将在用户准确知道从何处查找 UI 时奏效。如果用户需要在您的应用内的各个角落或尝试各个 UI 来搜索下一个隐藏的命令，那么他们可能无法充分享受您的应用的乐趣。正因如此，成功的应用栏始终将显示给定时间内可用的所有命令。相关命令可能基于如下内 容而有所不同：当前页面、当前选择或更改应用状态的其他内容。在这些情形中，请显示所有相关的命令、（由于仍在运行而）全局可用的命令，以及当前上下文特 定的命令。例如，如果您右键单击“开始”屏幕而不进行任何选择，那么应用栏只将包含所有应用按钮：

图 7：“开始”屏幕应用栏

如果您右键单击一个磁贴来选择该磁贴，那么应用栏将在其正常位置中包含所有应用按钮，但同时在右侧显示磁贴特定的命令：

图 8：显示了磁贴特定命令的“开始”屏幕应用栏

当我们显示所有相关命令时，用户可右键单击屏幕任何地方以获取所有按需 UI，用户无需查看步骤并确保右键单击，只需确保不意外选择一个磁贴即可。通过将霎来即去的命令置于左侧（在从右到左的语言环境中置于右侧），您可为用户 提供一个可预测的位置来查看他们可如何进行选择。用户可确保右键单击任何地方都将显示所有可用命令，且在左侧显示其选择特定的所有内容。

霎来即去的上下文命令位于左侧符合人体工程学的原理。我们在研究中发现大多数用户（甚至包括左撇子）使用右手操作触控设备。如果基于选择的命令显示 于右侧，那么随着您举起右臂来选择项目，您将看到刚刚出现了新命令！类似地，将始终呈现的命令位于右侧将让您使用右手来使用它们，由于大多数用户使用右手 与触控设备交互，因此这一点十分理想。综上，将霎来即去的命令位于左侧，将始终显示的命令位于给定屏幕右侧可让用户更高效地使用触控设备。

在“与好友聚餐”应用的中心页面，以下所显示的是未选择任何内容时的默认应用栏：

图 9：中心页面中未进行任何选择的“与好友聚餐”应用栏

当您选择一个餐厅时，您将有机会将其从意愿列表中添加或删除。因此，
一旦选择一个餐厅后，应用栏中将出现一个意愿列表切换按钮：

图 10：中心页面中选定一个事件的“与好友聚餐”应用栏

与“开始”屏幕中的情形类似，基于选择的霎来即去的命令将显示于左侧，与始终显示的新计划命令区别开来。

以下将向您介绍如何将命令置于应用栏的两侧，以及如何实现命令的霎来即去。

HTML

要将一个命令置于左侧，您必须将其置于选择部分。要在默认情况下将其隐藏，请将隐藏数据设置为“true”。extraclass 属性可让您在代码中轻松引用一系列命令，因此我们可使用该属性来聚集应在选择一个事件时一同显示的命令。

<div id="foodWithFriendsAppBar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdAdd',
            label:'New plan',
            icon:'add',
            section:'global'">
        </button>

        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdWishlist',
            label:'Wishlist',
            icon:'favorite',
            section:'selection',
            hidden:'true', 
            extraClass:'restaurantSelection'}">
        </button>
    </div>

要在应用栏中动态显示或隐藏命令，只需调用：

var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
    appbar.showCommands(restaurantSelectionCommands);

要查找为应用栏所提供的所有图标，查看 AppBarIcon 枚举。要获取 AppBarCommand 属性的完整列表，请查看 WinJS.UI.AppBarCommand 对象。

XAML

默认情况下，XAML AppBar 并不管理按钮的布局，因此要使用左命令部分和右命令部分来遵循规定的布局，您必须提供必要的布局面板来承载按钮。此处我们使用包含两栏的网格，其中每一栏 占据 AppBar 的一半。随后，我们将添加两个 StackPanel，其中一个与左侧对齐，另一个与右侧对齐以包含按钮。

您只需设置每个按钮的可视性属性即可隐藏/显示 XAML AppBar 按钮，但是这无法使按钮呈现正确的进入或退出动画效果。要匹配 HTML AppBar 按钮进入或退出动画行为，您需要为承载 AppBar 按钮的各个面板而将 AddDeleteThemeTransition 添加到 ChildrenTransitions 属性。随后，要启动这些切换动画，您必须将按钮从 AppBar 中实际删除/添加。

<Page.BottomAppBar>
        <AppBar x:Name="BottomAppBar1" IsSticky="True">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <StackPanel.ChildrenTransitions>
                        <TransitionCollection>
                            <AddDeleteThemeTransition/>
                        </TransitionCollection>
                    </StackPanel.ChildrenTransitions>
                </StackPanel>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                    <Button x:Name="New" Style="{StaticResource AddAppBarButtonStyle}" AutomationProperties.Name="New" Tag="New"/>
                    <StackPanel.ChildrenTransitions>
                        <TransitionCollection>
                            <AddDeleteThemeTransition/>
                        </TransitionCollection>
                    </StackPanel.ChildrenTransitions>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

        private void AddEventSelectionCommands(object sender, RoutedEventArgs e)
        {
            Button inButton = new Button();
            Button vetoButton = new Button();
            Button mehButton = new Button();

            inButton.Style = App.Current.Resources["AcceptAppBarButtonStyle"] as Style;
         inButton.AutomationProperties.Name = "In";
            vetoButton.Style = App.Current.Resources["CancelAppBarButtonStyle"] as Style;
         vetoButton.AutomationProperties.Name = "Veto";
            mehButton.Style = App.Current.Resources["HelpAppBarButtonStyle"] as Style;
         mehButton.AutomationProperties.Name = "Meh";

            // Make it the second item
            LeftPanel.Children.Insert(1, inButton);
            LeftPanel.Children.Insert(2, vetoButton);
            LeftPanel.Children.Insert(3, mehButton);
        }

在您需要时准备就绪

创建上下文应用栏的部分要求在于其将在用户需要时立即显示。例如，当您（使用手指向下轻拂磁贴、右键单击一个磁贴，或为某一磁贴同时按下 “Ctrl”和空格键）在“开始”屏幕上选定一个磁贴时，应用栏将自动在您进行选择后显示。如果用户选择了一个磁贴，那么一定是因为他们希望对该磁贴“进 行某个操作”。而应用栏正是您进行操作的位置，因此您必须显示应用栏。类似地，当用户撰写邮件以及当您选定文本时，“邮件”应用栏将显示复制/粘贴和格式化命令。毕竟，如果一名用户选定文本，那么很有可能是因为他们希望对其进行某种操作！

正常情况下，应用栏可轻型消除。这意味着如果用户点击应用栏外侧，那么其将消失。每当您以编程的方式启动应用栏（正如您将选择的），通过固定应用栏 而禁用轻型消除将至关重要。这样可让用户在完成操作后更改其选择，或进行多个选择，而不消除应用栏。当清除选择后，请确保重新启用轻型消除！

HTML

以下代码可处理已选定的对象：

var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.showCommands(restaurantSelectionCommands);
appbar.sticky = true;
appbar.show();

When the selection is cleared, you would write the inverse code:
var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.hideCommands(restaurantSelectionCommands);
appbar.sticky = false;
appbar.hide();

查看 HTML AppBar 控件示例，以了解利用基于选择的上下文命令而显示和隐藏应用栏的操作示例。

XAML

在 XAML 中，您需要在列表中设置 SelectionChanged 处理程序，在该处理程序中，您需要查看项目是否被选定或清除。如果某一项目被选定，您需调用方法来显示命令，将 AppBar 上的 IsSticky 属性设置为“true”，随后显示 AppBar。如果该选定项目被清除，您需要调用方法来隐藏命令，将 IsStricky 属性还原成“false”，并关闭 AppBar。

private void RestaurantList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ListView lv = sender as ListView;
    if (lv.SelectedItem != null)
    {
        ShowRestaurantCommands();
        BottomAppBar.IsSticky = true;
        BottomAppBar.IsOpen = true;
    }
    else
    {
        HideRestaurantCommands();
        BottomAppBar.IsSticky = false;
        BottomAppBar.IsOpen = false;
    }
}

命令布局

下一步在于确定如何布局您的命令。命令的最佳位置在于屏幕的左右两侧。对于触控设备而言，由于用户最常见的手持平板设备的方式是握住其两侧，因此将命令置于边缘无需用户移动手掌，而只需使用拇指访问命令。而对于鼠标设备，由于费兹定律，相比屏幕中的其他区域，用户将更加容易和快速地将指针移动至底部角落，因此命令越靠近边缘，用户越容易定位这些命令。

此时唯一的问题在于每个命令应具体位于何处，以及如何在两侧间划分命令。我们在 Metro 风格应用的命令设计一 文中详细介绍了这一内容，但是简言之，这与应用栏设计的每个元素相类似，请准确布局您的命令，以确保它们的位置可预测。从基于最常见的屏幕和最常见的命令 来开始布局命令，这可让这些命令变得出众。一条良好的经验法则在于将最常用的命令置于最靠近边缘的位置，或遵循其他热门应用中类似的命令示例。这样一来， 用户可在使用您的应用之前预测其运行方式。然后，在后续的每一个屏幕上，将任何共享的命令置于同一位置，并将其他命令置于这些共享命令的周边。当某一命令 包含起始点时，请勿移动该命令。这样一来，用户可了解命令属于哪一位置，而且使用您的应用将成为他们的第二天性，这将进一步有助于他们专注于您的应用的主 内容。

通常情况下，命令将基于选择或应用当前的上下文而霎来即去。例如，在“与好友聚餐”应用中，餐厅列表页面中有一些仅与用户以（诸如排序等）列表形式 查看餐厅时相关，还有一些命令仅在地图视图（例如集中于当前地图位置）中可用。在这些情况中，应将诸如刚刚显示的命令置于靠近边缘的两个上下文中，因此在 用户切换上下文时，这些命令将不会随之移动。

在“与好友聚餐”应用中，用户可在所有餐厅页面上的列表视图和地图视图中切换。视图发生变更时，可用的命令也将随之变更，因此命令的摆放将至关重要：

图 11：“与好友聚餐”应用列表视图中所有餐厅的页面

 

图 12：“与好友聚餐”应用地图视图中所有餐厅的页面 

您是否注意到了筛选命令在列表视图中位于排序命令的左侧，而在地图视图中位于地图样式按钮的左侧？现在，如果您在两个视图之间切换，所有常见操作将保留于起始点，而不会来回切换，以确保应用栏的固定性和可预测性。

变更视图

从为您的应用的横向视图布局命令开始是一项标准操作，但是考虑应用栏在纵向视图以及辅屏视图中的情形也同样至关重要。默认情况下，WinJS 应用栏将基于可用的宽度而自动重排，以确保可始终容纳多达 10 个命令。在纵向视图中，应用栏将减少命令标签，而在辅屏视图中，按钮将排列成两行。这通常将自动发生，如果应用程的内容在两个视图下保持一致，那么这也将 是可采用的一项卓越功能。

使用 XAML 应用栏或者 WinJS 应用栏的自定义布局，您可完整控制内容以及命令的布局。这意味着在纵向和辅屏视图中，您必须额外注意确保可容纳所有命令，且保持美观。您在这些情况中可采用减少所有按钮标签、分组菜单命令、或隐藏状态中不相关命令的策略。

图 13：所有餐厅的辅屏地图视图

在“与好友聚餐”应用中，您可看到定制的应用栏示例，其可在辅屏视图中呈现良好的视觉效果，同时保留了所有相关命令。在这一情况下，为了减少到 5 个按钮（因此这些按钮可全部显示于单一行中），视图切换、列表视图和地图视图全部合并至单一菜单。

进行量身定制

AppBar 控件可让您轻松创建一个基本应用栏。该控件同时可让您轻松对其进行自定义，以真正适合您的应用的风格。常见的自定义包括更改按钮的颜色、自定或样式。尽情发挥您的创意吧！应用栏应该像是您的应用的自然延伸，因此请将您其他应用的个性注入其中。您可查看 HTML AppBar 控件示例和 XAML AppBar 控件示例了解这一操作示例。

您甚至可根据已有的命令而考虑以一种与应用栏完全不同的方式来显示按需 UI。这一切完美至极，立即发挥您的创意！如果您选择这一方式，请确保记住用户将在使用标准手势（从顶部或底部轻扫、右键单击或同时按下 “Windows”和“Z”键）时看到隐藏的 UI，而且您通常可通过点击 UI 而消除该 UI。有关标准按需 UI 事件的信息，请参阅 EdgeGesture 类。

正是如此

大部分的新设计都将您的应用专注于其最擅长的某个特定内容。请通过采用按需策略而保留让您的应用处于领先位置的内容，并限制可让用户分散注意力的内 容。使用应用栏是进行该操作的一个非常简便的方式，遵守有关命令放置的常见约定并将应用栏融入上下文可让您的用户将时间用于充分体验您的应用的独特指出， 而不是研究命令布局。如果您使用 Windows 8 为您提供的工具和约定来将您的 UI 专注于您的应用的最大优势，那么用户将充分感受到您应用的出众之处。

有关按需 UI 模式的其他信息，请查看 http://design.windows.com 和应用栏指导原则。有关 JS 中 AppBar 控件的更多信息，请使用 HTML AppBar 控件示例、XAML AppBar 控件示例，查看 WinJS.UI.AppBar 对象，以及 Windows.UI.Xaml.Controls.AppBar 类。

希望您能开心地编写代码！

-- Windows 项目经理主管 Jon Gordner