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

命令模式

在本文中

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

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

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

命令类型

筛选

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

透视

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

排序

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

查看

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

提示

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

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

其他

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

命令放置

在画布上

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

底部应用栏

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

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

命令放置指南

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

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

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


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

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


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

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


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

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


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

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

常用命令的放置

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


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

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


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

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

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


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


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


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

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

将命令归组到菜单

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

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

上下文菜单

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

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

利用超级按钮

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

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

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

时间: 2024-10-04 13:01:40

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

WP8.1学习系列(第二十六章)——控件模板

在本文中 自定义控件模板示例 指定控件的可视结构. 指定控件的可视行为 使用工具轻松处理主题 控件和辅助功能 了解有关控件默认模板的详细信息 控件模板中的主题资源 相关主题 在 XAML 框架中,如果要自定义控件的可视结构和可视行为,请创建控件模板.控件有多个属性,如 Background.Foreground 以及FontFamily,可以设置这些属性以指定控件外观的多个方面.但是可以通过设置这些属性所做的更改有限.可以使用 ControlTemplate 类创建提供其他自定义的模板.在此处,

WP8.1学习系列(第二十二章)——在页面之间导航

在本文中 先决条件 创建导航应用 Frame 和 Page 类 页面模板中的导航支持 在页面之间传递信息 缓存页面 摘要 后续步骤 相关主题 重要的 API Page Frame NavigationCacheMode 本主题将讨论基本的导航概念,并演示如何创建一个在两个页面之间进行导航的应用. 有关为你的应用选择最佳导航模式的帮助,请参阅导航模式. 在操作时请参阅平面导航和分层导航模式,它们是应用功能大全系列的一部分. 路线图: 本主题与其他主题有何关联?请参阅: 使用 C# 或 Visual

WP8.1学习系列(第十九章)——事件和路由事件概述

我们将介绍在使用 C#.Visual Basic 或 Visual C++ 组件扩展 (C++/CX) 作为编程语言并使用 XAML 进行 UI 定义时,针对 Windows 运行时应用的事件的编程概念.你可以在 XAML 中的 UI 元素声明中为事件分配处理程序,或者在代码中添加处理程序.Windows 运行时支持路由事件:借助此功能,某些输入事件和数据事件可由引发该事件的对象以外的对象来处理.在定义控件模板或使用页面或版式容器时,路由事件十分有用. 事件即编程概念 通常而言,对 Window

WP8.1学习系列(第二十五章)——控件样式

XAML 框架提供许多自定义应用外观的方法.通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观. 路线图: 本主题与其他主题有何关联?请参阅: 使用 C# 或 Visual Basic 的 Windows 运行时应用的路线图 使用 C++ 的 Windows 运行时应用的路线图 应用功能大全系列中突出显示的 Windows 应用商店应用 UI 详细信息 本主题包含下列部分: 先决条件 样式基础知识 应用隐式或显式样式 使用基于样式 使用工具轻松处理样式 修改 Windo

WP8.1学习系列(第十二章)——全景控件Panorama开发指南

2014/6/18 适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1 全景体验是本机 Windows Phone 外观的一部分.与旨在适合手机屏幕边界的标准应用不同,全景应用通过使用超出屏幕边界的长水平画布提供了一个查看控件.数据和服务的独特方式.这些固有的动态视图使用分层动画和内容,以便各层以不同的速度流畅地平移,类似于视差效果. 本主题包括以下部分. 全景控件概述 导航支持 全景应用功能 相关

WP8.1学习系列(第二十四章)——Json解析

.net已经集成了json解析,类名叫DataContractJsonSerializer DataContractJsonSerializer 类型公开以下成员. 构造函数   名称 说明 DataContractJsonSerializer(Type) 初始化 DataContractJsonSerializer 类的新实例,以便序列化或反序列化指定类型的对象. DataContractJsonSerializer(Type, IEnumerable<Type>) 初始化 DataCont

quick-cocos2d-x 学习系列之十六 塔防完结

quick-cocos2d-x 学习系列之十六 塔防完结 1.  math2d.lua文件 该文件实现了常用的数学函数. Dist函数实现两点的距离. radians4point求两点的夹角(弧度) pointAtCircle求圆上一个点的位置 pointAtLineToPoint求线段上与指定点距离最近的点 degrees2radians角度转换为弧度 radians2degrees弧度转换为角度 2.  utils.lua文件 2.1         drawCircle 返回newCirc

【WPF学习】第二十六章 Application类——应用程序的生命周期

原文:[WPF学习]第二十六章 Application类--应用程序的生命周期 在WPF中,应用程序会经历简单的生命周期.在应用程序启动后,将立即创建应用程序对象,在应用程序运行时触发各种应用程序事件,你可以选择监视其中的某些事件.最后,当释放应用程序对象时,应用程序将结束. 一.创建Application对象 使用Application类的最简单方式是手动创建它.下面的示例演示了最小的程序:在应用程序入口(Main()方法)处创建名为MainWindow的窗口,并启动一个新的应用程序: 在本质

WP8.1学习系列(第六章)——交互UX:具有面板部分的Hub

本主题中呈现的模型类似于适用于 Windows Phone 的具有主页菜单(中心或透视控件)的中心应用中描述的模型.正如之前的案例所示,你要向用户呈现不同的功能区域.此处的区别在于你可以在顶层呈现所有主要 UI,而无需主页菜单. 用于足球队管理的中心应用中心 UI 如果你的应用没有要导航到的子区域,则你的所有 UI 都可位于一组水平的可访问部分中.你仍可使用 中心控件,但在此案例中,你无需具有主页部分.Windows Phone 上的 People Hub 即属于这种情况.下图显示了中心的基本布