首页 > 代码库 > WP8.1学习系列(第十六章)——交互UX之命令模式

WP8.1学习系列(第十六章)——交互UX之命令模式

命令模式

 

技术分享

在本文中

 

  • 命令类型
  • 命令放置
  • 相关主题

你可以在应用商店应用的几个曲面中放置命令和控件,包括应用画布、弹出窗口、对话框和应用栏。在正确的时间选择合适的曲面可能就是易于使用的应用和很难使用的应用之间的差别。

在应用商店应用中,命令是用户可用来执行操作的交互式 UI 元素。命令与导航元素不同,导航元素用于将用户转移到不同的页面,而命令则可让用户对当前页面执行操作。导航元素使应用可以使用。命令使应用有使用价值。

有关应用中不同命令图面的详细信息,请参阅布置你的 UI。

 

命令类型

筛选

筛选命令根据某些条件,删除或隐藏数据集中的内容。例如,用户可能选择仅查看归类为“冒险”的 Windows 应用商店中的游戏。

 

技术分享

 

透视

透视命令重新组织数据集中的内容,并基于透视提供不同的数据视图。例如,用户可能选择按相册、艺术家或歌曲组织歌曲。

 

技术分享

 

排序

排序命令更改数据集中显示内容的顺序。例如,用户可以按受欢迎程度在旅游应用中选择目的地。

 

技术分享

 

查看

查看命令更改显示内容的风格或方法。例如,在查找酒店的应用中,用户可以选择在地图上而不是在列表中查看酒店。

 

技术分享

 

提示

你可以将提示命令放在画布上,如果你认为它们对用户有用。例如,在 Windows 8.1 的邮件应用中,有一个"省略号"命令指示存在其他选项。除了显示应用栏的传统 Windows 方法,还可以单击它显示应用的应用栏。

 

技术分享

 

你可以设计此类提示,使其与应用的样式相匹配。此资讯应用使用相同的应用栏提示和一个带菜单图标的标志,该标志用于显示菜单选项的页面。

 

技术分享

 

其他

使用户能够在当前视图中进行操作的任何交互式 UI 元素都是命令。下面提供了一些示例。

 

技术分享

 

技术分享

命令放置

在画布上

如果一个命令(或命令菜单)非常重要,并且用户在完成核心方案时需要不断地使用,则可以将其放在画布上。例如,在 Windows 8.1 的邮件应用中,当选择邮件时,核心命令(如回复、新建和删除)显示在画布上。

 

技术分享

 

底部应用栏

有时,你不希望命令堆满画布并影响你的用户使用有应用内容的能力。使用底部应用栏,可以在需要时向用户显示各种命令。底部应用栏显示与用户的上下文(通常是当前页面或当前选定的内容)相关的各种命令。

底部应用栏非常适合单选或多选命令操作。你可以对你的应用进行编程,以便在用户选择对象时显示应用栏。

 

技术分享

 

命令放置指南

在应用栏中放置应用的方式可以有一些变化,但应考虑以下方面:

  • 可预测性尽可能在应用的所有视图上使用一致的互动和命令放置。
  • 人体工程学考虑具体命令的放置能如何改进操作命令的速度或提高易用性。
  • 美学限制命令的数量,避免应用栏看起来太复杂。选择易于理解或预测的图标。保持文本标签简短。

我们推荐以下命令放置准则:

将持久性或默认命令放在应用栏右侧。如果只有少量命令,应用栏最终可能仅在右侧有命令。

在这个浏览命令的示例中,查看命令集和筛选/排序命令集是永久性的。

技术分享

 

使用边缘。如果有大量的命令,请将不同的命令集分开在左侧或右侧,以平衡应用栏并让命令更容易访问。

在此示例中,我们决定将查看命令集移到左侧,将筛选/排序命令集保留在右侧。 当地图视图激活时,地图视图命令出现在查看命令集的右侧。

技术分享

 

显示/隐藏已禁用的命令。这些是在特定情形中不相关的命令。当它们显示时,它们不应破坏持久性命令的排序。

在此示例中,地图视图处于活动状态,地图视图命令出现在查看命令集的右侧。

技术分享

 

插入选择命令。用户执行选择后出现的命令会显示在最左侧,任何已在此处的命令会向右滑动。这让选择的命令更显眼且更易于访问。

在此示例中,查看命令集将滑动到右侧,以便为选择的命令集腾出空间。

技术分享

 

常用命令的放置

一些命令是常用的,会在许多应用中出现。为建立一致性和培养用户自信心,我们建议在决定常用命令在应用栏的放置位置时应该遵循以下指南。

将选择命令放在最左侧,无论它们是在选择时显示的上下文命令,还是会影响选择的命令。

在此示例中,用户选择任何内容之前,左侧会显示一个“全选”命令。用户进行选择后,其他选择命令会显示在左侧。

技术分享

 

将新建项目命令靠栏的右边缘放置。新建项目命令可以是添加、创建、编写或创建新实体的任何命令。新建项目命令应能够使用缩略图方便地访问。

在此示例中,“新建评论”命令允许用户新建一条餐馆评论。 其他与“新建评论”相关的命令放在它的左侧。

+ 符号仅应用于表示“新建”命令,它不应显示在应用栏中的任何其他位置。

技术分享

 

将删除命令放在新建项目命令的左侧。如果你的应用将要管理的各个实体可能位于特定应用程序(比如邮件或相机应用)的外部,可以使用“删除/新建”。 “删除/新建”应该始终按此顺序显示。

技术分享

 

将移除命令放在添加命令的左侧。如果你的应用将管理某个列表,如代办事项列表、一个天气应用中的城市列表或一个添加到书签中的餐馆列表,可以使用“移除/添加”。“移除/新建”应该始终按此顺序显示。

技术分享

 

将清除命令放在新建项目命令的左侧。如果你正在对所有可能的项执行破坏性操作,可以使用“清除”。使用命令标签明确表明命令的操作对象,如“清除选择”。

技术分享

 

有关底部应用栏中命令放置的示例,请参阅 Windows 应用商店应用库。

将命令归组到菜单

有时,将多个命令归组到一个命令菜单中效率会更高一些。 菜单可让你使用较少的空间显示更多选项。菜单可以包括交互式控件。

在此示例中,排序命令显示一个简单的菜单,这样用户可以方便地选择排序选项。筛选命令在一个菜单中显示一组控件,可让用户按照更复杂的条件筛选项目。

技术分享

 

上下文菜单

上下文菜单通常包含剪贴板操作,如剪切、复制和粘贴。上下文菜单还可以包含应用于无法选择的内容的命令,如网页上的图像。 系统为应用提供文本和超链接的默认上下文菜单。对于文本,默认的上下文菜单显示剪贴板命令。对于超链接,默认的菜单显示复制和打开该链接的命令。

用户通过按住触摸设备上的内容或者用鼠标右键单击该内容可以调用上下文菜单。

 

技术分享

 

  • 技术分享

 

利用超级按钮

在设计 Windows 应用商店应用时,可以使用超级按钮中的四个非常有用的命令:搜索、共享、设备和设置。用户通过从屏幕右边缘轻扫或者将鼠标指针指向屏幕右上角或右下角可以调用超级按钮。

 

技术分享

 

搜索:允许用户从系统中的任意位置快速搜索应用的内容,包括 从其他应用中搜索。技术分享
共享:允许用户与其他人或应用共享应用中的内容,并接收共享的内容。
开始:此超级按钮将用户转到“开始”屏幕。应用不与此超级按钮交互。该行为是自动的,而且始终是相同的。
设备:允许用户欣赏从应用中流式传输到 家庭网络中的其他设备的音频、视频或图像。
设置:在一个层级上合并所有的设置并允许用户使用他们已经熟悉的常用 机制配置应用。

 

请避免在应用的画布或 应用栏中复制应用合约功能。

WP8.1学习系列(第十六章)——交互UX之命令模式