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

简介: 原文:快速构建Windows 8风格应用23-App Bar概述及使用规范本篇博文主要介绍App Bar概述、App Bar命令组织步骤、App Bar最佳实践。   App Bar概述 Windows 8 Store应用中的App Bar(应用程序工具栏)起到的作用和Windows Phone中AppBar一样。
原文: 快速构建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用于沉浸式视图中的导航,例如:添加返回按钮或标题等,也可以用于在页面或视图间进行切换。

1

 

App Bar命令组织步骤

2

Step 1:组织命令

确定所有应用命令,然后按照方案或位置组织它们。

我们需要考虑的问题包括:

1)什么命令应该显示在整个应用中;

2)什么命令应该只显示在某些页面上;

3)什么命令应该使用超级按钮或转至设置;

下面是我们浏览一个餐馆应用时可能用到的命令列表:

3

Step 2:创建命令集

我们需要将相似的命令分组到命令集。AppBar将命令集显示为一个单元,每个命令集之间有一个分隔符。

我们需要考虑的问题包括:

1)哪些命令在功能上相关;

2)哪些命令在功能上相关;

3)做出选择时应该显示哪些命令;

将上面的餐馆应用中命令分组到命令集:

4

Step 3:创建菜单

我们需要考虑命令集是否在一个命令菜单中更合适。

我们需要考虑的问题包括:

1)AppBar是否太拥挤或存在太多命令而无法适应

2)是否存在一个集可以从更长的标签或互动控件中获益

命令菜单给我们带来的好处是:允许使用更少的空间提供更多选项,并包含互动控件。

5

上图中“排序”菜单弹出一个简单列表,以方便选择选项,“筛选”菜单弹出一组控件,允许用户按照更复杂的条件筛选项目。

Step 4:将命令添加到AppBar

我们可以通过多种方式将命令放在AppBar中。但是需要尽可能遵守一些命令放置规则:

1)可预测性:尽可能在应用的所有视图上使用一致的互动和命令放置;

2)人体工程学:考虑具体命令的放置能如何改进操作命令的速度或提高易用性;

3)美学:限制命令的数量,避免AppBar看起来太复杂。选择易于理解或预测的图标。保持文本标签简短;

另外还有一个放置命令的常用技巧:

1)将永久性的命令放在右侧

首先将默认命令放在AppBar右侧。若只有少量命令,AppBar可能仅在右侧有命令。

2)使用边缘

如果有大量的命令,可以将不同的命令集分开在左侧或右侧,来平衡AppBar并让命令更容易访问。

3)显示/隐藏已禁用的命令

与某些环境不相关的命令应该隐藏。当它们显示时,不应该破环持久性命令的排序。

4)插入选择命令

用户执行选择后出现的命令会出现在最左侧,任何在此处的命令会向右侧滑动。

6

Step 5:为常用命令使用标准位置

一些命令是常用的,会在许多应用中出现,因此我们需要建立一致性。

我们在决定将常用命令放在AppBar的何处时应该遵循以下原则:

1)选择命令

和我们的选择相关的命令始终显示在最左侧,无论它们是在选择时显示的上下文命令还是会影响选择的命令。

7

2)新建命令

如果应用调用“新建”命令来创建(添加、创建、撰写)任何新类型的实体,将该命令放在AppBar的右边。这会为每个“新建”命令提供一致的位置(无论具体的应用或上下文是什么),并使用缩略图来方便访问。

8

3)删除命令

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

9

4)移除命令

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

10

5)清除命令

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

11

 

App Bar最佳实践

1)一定要以同样的方式放置命令并按命令集对它们进行组织;

2)一定要将上下文命令放在AppBar上,在不更改视图的情况下选择某个项目时, 以编程方式显示AppBar;

3)当命令太多时时,一定要使用菜单;

4)一定要考虑AppBar在贴靠视图和竖屏视图下的呈现;

5)一定将AppBar设计为水平滚动;

6)一定要使用命令、菜单和弹出窗口的默认样式;

7)不要将关键命令(用户完成任务必不可少的命令)放在AppBar上;

8)不要在AppBar中放置登录、注销或其他帐户管理命令;

9)不要将用于文本的剪贴板命令放在AppBar上;

 

关于App Bar更多详细信息可参考MSDN 中:添加应用栏

目录
相关文章
|
1天前
|
安全 前端开发 Windows
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
本文介绍了 Electron 应用在 Windows 中的更新原理,重点分析了 `NsisUpdater` 类的实现。该类利用 NSIS 脚本,通过初始化、检查更新、下载更新、验证签名和安装更新等步骤,确保应用的更新过程安全可靠。核心功能包括差异下载、签名验证和管理员权限处理,确保更新高效且安全。
11 4
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
|
23天前
|
XML 缓存 前端开发
Electron-builder 是如何打包 Windows 应用的?
本文首发于微信公众号“前端徐徐”,作者徐徐深入解析了 electron-builder 在 Windows 平台上的打包流程。文章详细介绍了 `winPackager.ts`、`AppxTarget.ts`、`MsiTarget.ts` 和 `NsisTarget.ts` 等核心文件,涵盖了目标创建、图标处理、代码签名、资源编辑、应用签名、性能优化等内容,并分别讲解了 AppX/MSIX、MSI 和 NSIS 安装程序的生成过程。通过这些内容,读者可以更好地理解和使用 electron-builder 进行 Windows 应用的打包和发布。
94 0
|
27天前
|
API 开发工具 UED
在 UWP 中使用 Windows App SDK
【10月更文挑战第17天】在UWP中使用Windows App SDK可增强应用功能和性能。首先了解SDK特性,接着安装Visual Studio 2022及以上版本,并从微软官网下载安装SDK。配置项目时,确保目标版本支持SDK,添加SDK引用后即可使用新API提升应用体验。开发过程中应充分利用调试工具进行测试,确保应用的兼容性和稳定性。
|
1月前
|
监控 安全 Apache
构建安全的URL重定向策略:确保从Web到App平滑过渡的最佳实践
【10月更文挑战第2天】URL重定向是Web开发中常见的操作,它允许服务器根据请求的URL将用户重定向到另一个URL。然而,如果重定向过程没有得到妥善处理,可能会导致安全漏洞,如开放重定向攻击。因此,确保重定向过程的安全性至关重要。
59 0
|
1月前
|
数据可视化 程序员 C#
C#中windows应用窗体程序的输入输出方法实例
C#中windows应用窗体程序的输入输出方法实例
40 0
|
3月前
|
Unix Linux Ruby
在windows和linux上高效快捷地发布Dash应用
在windows和linux上高效快捷地发布Dash应用
|
3月前
|
Linux iOS开发 开发者
跨平台开发不再难:.NET Core如何让你的应用在Windows、Linux、macOS上自如游走?
【8月更文挑战第28天】本文提供了一份详尽的.NET跨平台开发指南,涵盖.NET Core简介、环境配置、项目结构、代码编写、依赖管理、构建与测试、部署及容器化等多个方面,帮助开发者掌握关键技术与最佳实践,充分利用.NET Core实现高效、便捷的跨平台应用开发与部署。
157 3
|
3月前
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
|
3月前
|
PHP Windows
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
|
3月前
|
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功能,从而提升用户体验并拓展应用功能边界。
64 0
下一篇
无影云桌面