快速构建Windows 8风格应用23-App Bar概述及使用规范

简介:

本篇博文主要介绍App Bar概述、App Bar命令组织步骤、App Bar最佳实践。

 
App Bar概述
Windows 8 Store应用中的App Bar(应用程序工具栏)起到的作用和Windows Phone中AppBar一样。我们可以向用户提供各种操作接口,实现导航或者触发命令等。
 
AppBar一般默认是隐藏的,也可以设置为始终可见。我们可以通过清扫屏幕上边缘或下边缘时显示AppBar,AppBar被点击之后或失去焦点后隐藏,当然我们也可以通过编程方式控制AppBar显示或隐藏。
 
Windows 8 Store应用中通常包含两种AppBar:
1)底部AppBar
底部AppBar通常用于触发命令,并且全局命令在右侧,上下文命令在左侧。当选中上下文命令的项目时,可以通过编程方式调用。如果有单个常用命令,可以将其放置在画布上。菜单弹出可以用于显示相关的命令组。
2)顶部AppBar
顶部AppBar用于沉浸式视图中的导航,例如:添加返回按钮或标题等,也可以用于在页面或视图间进行切换。
 
App Bar命令组织步骤
 
Step 1:组织命令
确定所有应用命令,然后按照方案或位置组织它们。
我们需要考虑的问题包括:
1)什么命令应该显示在整个应用中;
2)什么命令应该只显示在某些页面上;
3)什么命令应该使用超级按钮或转至设置;
下面是我们浏览一个餐馆应用时可能用到的命令列表:
 
Step 2:创建命令集
我们需要将相似的命令分组到命令集。AppBar将命令集显示为一个单元,每个命令集之间有一个分隔符。
我们需要考虑的问题包括:
1)哪些命令在功能上相关;
2)哪些命令在功能上相关;
3)做出选择时应该显示哪些命令;
将上面的餐馆应用中命令分组到命令集:
 
Step 3:创建菜单
我们需要考虑命令集是否在一个命令菜单中更合适。
我们需要考虑的问题包括:
1)AppBar是否太拥挤或存在太多命令而无法适应
2)是否存在一个集可以从更长的标签或互动控件中获益
命令菜单给我们带来的好处是:允许使用更少的空间提供更多选项,并包含互动控件。

 
上图中“排序”菜单弹出一个简单列表,以方便选择选项,“筛选”菜单弹出一组控件,允许用户按照更复杂的条件筛选项目。
Step 4:将命令添加到AppBar
我们可以通过多种方式将命令放在AppBar中。但是需要尽可能遵守一些命令放置规则:
1)可预测性:尽可能在应用的所有视图上使用一致的互动和命令放置;
2)人体工程学:考虑具体命令的放置能如何改进操作命令的速度或提高易用性;
3)美学:限制命令的数量,避免AppBar看起来太复杂。选择易于理解或预测的图标。保持文本标签简短;
另外还有一个放置命令的常用技巧:
1)将永久性的命令放在右侧
首先将默认命令放在AppBar右侧。若只有少量命令,AppBar可能仅在右侧有命令。
2)使用边缘
如果有大量的命令,可以将不同的命令集分开在左侧或右侧,来平衡AppBar并让命令更容易访问。
3)显示/隐藏已禁用的命令
与某些环境不相关的命令应该隐藏。当它们显示时,不应该破环持久性命令的排序。
4)插入选择命令
用户执行选择后出现的命令会出现在最左侧,任何在此处的命令会向右侧滑动。
 
Step 5:为常用命令使用标准位置
一些命令是常用的,会在许多应用中出现,因此我们需要建立一致性。
我们在决定将常用命令放在AppBar的何处时应该遵循以下原则:
1)选择命令
和我们的选择相关的命令始终显示在最左侧,无论它们是在选择时显示的上下文命令还是会影响选择的命令。
 
2)新建命令
如果应用调用“新建”命令来创建(添加、创建、撰写)任何新类型的实体,将该命令放在AppBar的右边。这会为每个“新建”命令提供一致的位置(无论具体的应用或上下文是什么),并使用缩略图来方便访问。
 
3)删除命令
如果我们的应用将要管理的各个实体可能位于特定应用程序(比如邮件或相机应用)的外部,可以使用“删除/新建”。 “删除/新建”应该始终按此顺序显示。
 
4)移除命令
如果你的应用将管理某个列表,如代办事项列表、一个天气应用中的城市列表或一个添加到书签中的餐馆列表,可以使用“移除/添加”。“移除”应该始终显示在“添加”的左侧。
 
5)清除命令
如果你正在对所有可能的项执行破坏性操作,可以使用“清除”。使用命令标签明确表明命令的操作对象,如“清除选择”。
 
 
App Bar最佳实践
1)一定要以同样的方式放置命令并按命令集对它们进行组织;
2)一定要将上下文命令放在AppBar上,在不更改视图的情况下选择某个项目时, 以编程方式显示AppBar;
3)当命令太多时时,一定要使用菜单;
4)一定要考虑AppBar在贴靠视图和竖屏视图下的呈现;
5)一定将AppBar设计为水平滚动;
6)一定要使用命令、菜单和弹出窗口的默认样式;
7)不要将关键命令(用户完成任务必不可少的命令)放在AppBar上;
8)不要在AppBar中放置登录、注销或其他帐户管理命令;
9)不要将用于文本的剪贴板命令放在AppBar上;
 
关于App Bar更多详细信息可参考MSDN 中: 添加应用栏







 本文转自 王祖康 51CTO博客,原文链接:http://blog.51cto.com/wzk89/1040299 ,如需转载请自行联系原作者
相关文章
|
19天前
|
Unix Linux Ruby
在windows和linux上高效快捷地发布Dash应用
在windows和linux上高效快捷地发布Dash应用
|
19天前
|
Linux iOS开发 开发者
跨平台开发不再难:.NET Core如何让你的应用在Windows、Linux、macOS上自如游走?
【8月更文挑战第28天】本文提供了一份详尽的.NET跨平台开发指南,涵盖.NET Core简介、环境配置、项目结构、代码编写、依赖管理、构建与测试、部署及容器化等多个方面,帮助开发者掌握关键技术与最佳实践,充分利用.NET Core实现高效、便捷的跨平台应用开发与部署。
52 3
|
22天前
|
Java 应用服务中间件 开发工具
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
|
16天前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
28 0
|
16天前
|
存储 开发者 C#
WPF与邮件发送:教你如何在Windows Presentation Foundation应用中无缝集成电子邮件功能——从界面设计到代码实现,全面解析邮件发送的每一个细节密武器!
【8月更文挑战第31天】本文探讨了如何在Windows Presentation Foundation(WPF)应用中集成电子邮件发送功能,详细介绍了从创建WPF项目到设计用户界面的全过程,并通过具体示例代码展示了如何使用`System.Net.Mail`命名空间中的`SmtpClient`和`MailMessage`类来实现邮件发送逻辑。文章还强调了安全性和错误处理的重要性,提供了实用的异常捕获代码片段,旨在帮助WPF开发者更好地掌握邮件发送技术,提升应用程序的功能性与用户体验。
19 0
|
16天前
|
C# Windows 监控
WPF应用跨界成长秘籍:深度揭秘如何与Windows服务完美交互,扩展功能无界限!
【8月更文挑战第31天】WPF(Windows Presentation Foundation)是 .NET 框架下的图形界面技术,具有丰富的界面设计和灵活的客户端功能。在某些场景下,WPF 应用需与 Windows 服务交互以实现后台任务处理、系统监控等功能。本文探讨了两者交互的方法,并通过示例代码展示了如何扩展 WPF 应用的功能。首先介绍了 Windows 服务的基础知识,然后阐述了创建 Windows 服务、设计通信接口及 WPF 客户端调用服务的具体步骤。通过合理的交互设计,WPF 应用可获得更强的后台处理能力和系统级操作权限,提升应用的整体性能。
34 0
|
16天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
35 0
|
19天前
|
存储 XML Linux
深入理解操作系统:进程管理与调度策略探索安卓应用开发:从零开始构建你的第一个App
【8月更文挑战第28天】在数字世界里航行,操作系统是掌控一切的舵手。本文将带你领略操作系统的精妙设计,特别是进程管理和调度策略这两大核心领域。我们将从基础概念出发,逐步深入到复杂的实现机制,最后通过实际代码示例,揭示操作系统如何高效协调资源,确保多任务顺畅运行的秘密。准备好了吗?让我们启航,探索那些隐藏在日常电脑使用背后的奥秘。 【8月更文挑战第28天】在这个数字时代,拥有一款自己的移动应用程序不仅是技术的展示,也是实现创意和解决问题的一种方式。本文将引导初学者了解安卓开发的基础知识,通过一个简单的待办事项列表App项目,逐步介绍如何利用安卓开发工具和语言来创建、测试并发布一个基本的安卓应用
|
20天前
|
Java 程序员 Android开发
探索安卓开发:构建你的第一个App
【8月更文挑战第27天】在数字化时代的浪潮中,移动应用成为人们生活不可或缺的一部分。对于渴望进入软件开发领域的新手而言,掌握如何构建一款简单的安卓App是开启技术之旅的关键一步。本文旨在通过浅显易懂的语言和步骤分解,引导初学者了解安卓开发的基础知识,并跟随示例代码,一步步实现自己的第一个安卓App。从环境搭建到界面设计,再到功能实现,我们将一同揭开编程的神秘面纱,让每个人都能体会到创造软件的乐趣。
|
22天前
|
网络安全 API 数据安全/隐私保护
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)