WP8.1学习系列(第十六章)——交互UX之命令模式
命令模式
你可以在应用商店应用的几个曲面中放置命令和控件,包括应用画布、弹出窗口、对话框和应用栏。在正确的时间选择合适的曲面可能就是易于使用的应用和很难使用的应用之间的差别。
在应用商店应用中,命令是用户可用来执行操作的交互式 UI 元素。命令与导航元素不同,导航元素用于将用户转移到不同的页面,而命令则可让用户对当前页面执行操作。导航元素使应用可以使用。命令使应用有使用价值。
有关应用中不同命令图面的详细信息,请参阅布置你的 UI。
命令类型
筛选
筛选命令根据某些条件,删除或隐藏数据集中的内容。例如,用户可能选择仅查看归类为“冒险”的 Windows 应用商店中的游戏。
透视
透视命令重新组织数据集中的内容,并基于透视提供不同的数据视图。例如,用户可能选择按相册、艺术家或歌曲组织歌曲。
排序
排序命令更改数据集中显示内容的顺序。例如,用户可以按受欢迎程度在旅游应用中选择目的地。
查看
查看命令更改显示内容的风格或方法。例如,在查找酒店的应用中,用户可以选择在地图上而不是在列表中查看酒店。
提示
你可以将提示命令放在画布上,如果你认为它们对用户有用。例如,在 Windows 8.1 的邮件应用中,有一个"省略号"命令指示存在其他选项。除了显示应用栏的传统 Windows 方法,还可以单击它显示应用的应用栏。
你可以设计此类提示,使其与应用的样式相匹配。此资讯应用使用相同的应用栏提示和一个带菜单图标的标志,该标志用于显示菜单选项的页面。
其他
使用户能够在当前视图中进行操作的任何交互式 UI 元素都是命令。下面提供了一些示例。
命令放置
在画布上
如果一个命令(或命令菜单)非常重要,并且用户在完成核心方案时需要不断地使用,则可以将其放在画布上。例如,在 Windows 8.1 的邮件应用中,当选择邮件时,核心命令(如回复、新建和删除)显示在画布上。
底部应用栏
有时,你不希望命令堆满画布并影响你的用户使用有应用内容的能力。使用底部应用栏,可以在需要时向用户显示各种命令。底部应用栏显示与用户的上下文(通常是当前页面或当前选定的内容)相关的各种命令。
底部应用栏非常适合单选或多选命令操作。你可以对你的应用进行编程,以便在用户选择对象时显示应用栏。
命令放置指南
在应用栏中放置应用的方式可以有一些变化,但应考虑以下方面:
- 可预测性尽可能在应用的所有视图上使用一致的互动和命令放置。
- 人体工程学考虑具体命令的放置能如何改进操作命令的速度或提高易用性。
- 美学限制命令的数量,避免应用栏看起来太复杂。选择易于理解或预测的图标。保持文本标签简短。
我们推荐以下命令放置准则:
将持久性或默认命令放在应用栏右侧。如果只有少量命令,应用栏最终可能仅在右侧有命令。 在这个浏览命令的示例中,查看命令集和筛选/排序命令集是永久性的。 |
使用边缘。如果有大量的命令,请将不同的命令集分开在左侧或右侧,以平衡应用栏并让命令更容易访问。 在此示例中,我们决定将查看命令集移到左侧,将筛选/排序命令集保留在右侧。 当地图视图激活时,地图视图命令出现在查看命令集的右侧。 |
显示/隐藏已禁用的命令。这些是在特定情形中不相关的命令。当它们显示时,它们不应破坏持久性命令的排序。 在此示例中,地图视图处于活动状态,地图视图命令出现在查看命令集的右侧。 |
插入选择命令。用户执行选择后出现的命令会显示在最左侧,任何已在此处的命令会向右滑动。这让选择的命令更显眼且更易于访问。 在此示例中,查看命令集将滑动到右侧,以便为选择的命令集腾出空间。 |
常用命令的放置
一些命令是常用的,会在许多应用中出现。为建立一致性和培养用户自信心,我们建议在决定常用命令在应用栏的放置位置时应该遵循以下指南。
将选择命令放在最左侧,无论它们是在选择时显示的上下文命令,还是会影响选择的命令。 在此示例中,用户选择任何内容之前,左侧会显示一个“全选”命令。用户进行选择后,其他选择命令会显示在左侧。 |
将新建项目命令靠栏的右边缘放置。新建项目命令可以是添加、创建、编写或创建新实体的任何命令。新建项目命令应能够使用缩略图方便地访问。 在此示例中,“新建评论”命令允许用户新建一条餐馆评论。 其他与“新建评论”相关的命令放在它的左侧。 + 符号仅应用于表示“新建”命令,它不应显示在应用栏中的任何其他位置。 |
将删除命令放在新建项目命令的左侧。如果你的应用将要管理的各个实体可能位于特定应用程序(比如邮件或相机应用)的外部,可以使用“删除/新建”。 “删除/新建”应该始终按此顺序显示。 |
![]() |
将移除命令放在添加命令的左侧。如果你的应用将管理某个列表,如代办事项列表、一个天气应用中的城市列表或一个添加到书签中的餐馆列表,可以使用“移除/添加”。“移除/新建”应该始终按此顺序显示。 |
![]() |
将清除命令放在新建项目命令的左侧。如果你正在对所有可能的项执行破坏性操作,可以使用“清除”。使用命令标签明确表明命令的操作对象,如“清除选择”。 |
![]() |
有关底部应用栏中命令放置的示例,请参阅 Windows 应用商店应用库。
将命令归组到菜单
有时,将多个命令归组到一个命令菜单中效率会更高一些。 菜单可让你使用较少的空间显示更多选项。菜单可以包括交互式控件。
在此示例中,排序命令显示一个简单的菜单,这样用户可以方便地选择排序选项。筛选命令在一个菜单中显示一组控件,可让用户按照更复杂的条件筛选项目。
上下文菜单
上下文菜单通常包含剪贴板操作,如剪切、复制和粘贴。上下文菜单还可以包含应用于无法选择的内容的命令,如网页上的图像。 系统为应用提供文本和超链接的默认上下文菜单。对于文本,默认的上下文菜单显示剪贴板命令。对于超链接,默认的菜单显示复制和打开该链接的命令。
用户通过按住触摸设备上的内容或者用鼠标右键单击该内容可以调用上下文菜单。
利用超级按钮
在设计 Windows 应用商店应用时,可以使用超级按钮中的四个非常有用的命令:搜索、共享、设备和设置。用户通过从屏幕右边缘轻扫或者将鼠标指针指向屏幕右上角或右下角可以调用超级按钮。
搜索:允许用户从系统中的任意位置快速搜索应用的内容,包括 从其他应用中搜索。 | ![]() |
共享:允许用户与其他人或应用共享应用中的内容,并接收共享的内容。 | |
开始:此超级按钮将用户转到“开始”屏幕。应用不与此超级按钮交互。该行为是自动的,而且始终是相同的。 | |
设备:允许用户欣赏从应用中流式传输到 家庭网络中的其他设备的音频、视频或图像。 | |
设置:在一个层级上合并所有的设置并允许用户使用他们已经熟悉的常用 机制配置应用。 |
请避免在应用的画布或 应用栏中复制应用合约功能。
WP8.1学习系列(第十六章)——交互UX之命令模式的更多相关文章
- WP8.1学习系列(第二十六章)——控件模板
在本文中 自定义控件模板示例 指定控件的可视结构. 指定控件的可视行为 使用工具轻松处理主题 控件和辅助功能 了解有关控件默认模板的详细信息 控件模板中的主题资源 相关主题 在 XAML 框架中,如果 ...
- WP8.1学习系列(第二十二章)——在页面之间导航
在本文中 先决条件 创建导航应用 Frame 和 Page 类 页面模板中的导航支持 在页面之间传递信息 缓存页面 摘要 后续步骤 相关主题 重要的 API Page Frame Navigation ...
- WP8.1学习系列(第二十五章)——控件样式
XAML 框架提供许多自定义应用外观的方法.通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观. 路线图: 本主题与其他主题有何关联?请参阅: 使用 C# 或 Visua ...
- WP8.1学习系列(第十九章)——事件和路由事件概述
我们将介绍在使用 C#.Visual Basic 或 Visual C++ 组件扩展 (C++/CX) 作为编程语言并使用 XAML 进行 UI 定义时,针对 Windows 运行时应用的事件的编程概 ...
- WP8.1学习系列(第二十四章)——Json解析
.net已经集成了json解析,类名叫DataContractJsonSerializer DataContractJsonSerializer 类型公开以下成员. 构造函数 名称 说明 Da ...
- WP8.1学习系列(第十二章)——全景控件Panorama开发指南
2014/6/18 适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1 全景体验是本机 Windows ...
- Dubbo学习系列之十六(ELK海量日志分析框架)
外卖公司如何匹配骑手和订单?淘宝如何进行商品推荐?或者读者兴趣匹配?还有海量数据存储搜索.实时日志分析.应用程序监控等场景,Elasticsearch或许可以提供一些思路,作为业界最具影响力的海量搜索 ...
- 【WPF学习】第二十六章 Application类——应用程序的生命周期
在WPF中,应用程序会经历简单的生命周期.在应用程序启动后,将立即创建应用程序对象,在应用程序运行时触发各种应用程序事件,你可以选择监视其中的某些事件.最后,当释放应用程序对象时,应用程序将结束. 一 ...
- WP8.1学习系列(第十八章)——Windows Phone 交互和可用性
本主题讨论了布局会对应用的可用性产生怎样的影响.在应用的可用性上下文中还讨论了其他常用 UI,例如搜索和设置. 在继续使用控件和交互之前,请执行以下操作: 有关概念化应用的策略,请参阅尽你所能,设计最 ...
随机推荐
- e867. 获取和设置外观
To change the look and feel, you need to know the class name of the new look and feel. This example ...
- 关于makefile文件研究
makefile文件采用依赖倒推的模式进行编译. 主要由以下几步构成: 1 申明 2 default 默认生成的对象 3 TARGET 链接过程 4 cpp 编译过程 5 生成一个version.h文 ...
- java web 过滤器跟拦截器的区别和使用
注:文章整理自知乎大牛以及百度网友(电脑网络分类达人 吕明),特此感谢! 一.过滤器 1.什么是过滤器? 过滤器是一个程序,它先于与之相关的servlet或JSP页面运行在服务器上.过滤器可附加到一个 ...
- unity------各种坐标理解
本人学生一枚,刚接触Unity3D,若有理解得不对的地方,还望各路大神不吝赐教~ unity中的坐标系统包括世界坐标(World Space),屏幕坐标(Screen Space),视口坐标(View ...
- Java获取正在执行的函数名
利用StackTrace堆栈轨迹获取某个时间的调用堆栈状态. package com.dsp.demo; public class TechDemo { public static void main ...
- 运行 Shell 脚本有两种方法:
1.作为可执行程序 将上面的代码保存为 test.sh,并 cd 到相应目录: chmod +x ./test.sh #使脚本具有执行权限 ./test.sh #执行脚本 注意,一定要写成 ./tes ...
- mysql5.7 java读取乱码
一直很自信自己编码格式设置的都没有问题,以前就算遇到也都很快找到问题并解决.没想到掉进了5.7的坑里. 这段时间实习,大多做的都是.net+sqlserver,确实不用操心这些问题.主要还是各自默认编 ...
- [Learn AF3]第四章 App framework组件之Button
Button 组件名称:Button 是否js控件:否 使用说明:如果说panel组件是af3的“核心(heart of the ui)”,那么Button就是af中的五虎上将之 ...
- Thinkphp5笔记七:设置错误页面①
设置网站的错误提示页面,也是一个很重要的环节. 一.空操作 在当前控制器里面增加E_empty操作 public function _empty(){ $this->error('方法不存在') ...
- css只改变input输入框光标颜色不改变文字颜色实现方法
input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...