快速构建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 ,如需转载请自行联系原作者
相关文章
|
15天前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
51 0
|
16天前
|
运维 iOS开发 Windows
windows电脑备案ios APP获取公钥和证书指纹Sha-1值的方法
在阿里云进行APP备案、在备案IOS端的环节的时候,发现需要我们将p12证书安装在电脑上,再用xcode或或钥匙串访问来获取这个证书的公钥和sha-1值。 但是大部分开发uniapp应用的同学们,或者进行发布的运维人员的电脑都是windows,无法按照阿里云的教程来获取ios的公钥和sha-1。备案就被卡主了。 这里介绍下另一个方法,就是使用香蕉云编来在线上传证书获取。如下图所示,打开香蕉云编后,找到下图这个功能
169 0
|
3月前
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
180 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
|
3月前
|
Java Shell Maven
【Azure Container App】构建Java应用镜像时候遇无法编译错误:ERROR [build 10/10] RUN ./mvnw.cmd dependency:go-offline -B -Dproduction package
在部署Java应用到Azure Container App时,构建镜像过程中出现错误:“./mvnw.cmd: No such file or directory”。尽管项目根目录包含mvnw和mvnw.cmd文件,但依然报错。问题出现在Dockerfile构建阶段执行`./mvnw dependency:go-offline`命令时,系统提示找不到可执行文件。经过排查,确认是mvnw文件内容异常所致。最终通过重新生成mvnw文件解决该问题,镜像成功构建。
|
8月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
413 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
3月前
|
存储 移动开发 监控
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
App Trace系统通过一键拉起、快速安装和免提写邀请码三大功能,显著提升用户转化率、安装成功率和邀请注册率。结合深度技术实现与优化,助力公司用户增长,成为移动端核心基础设施。
|
8月前
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
5424 80
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
5月前
|
搜索推荐 API UED
淘宝/天猫获得淘宝app商品详情原数据 API 返回值的应用
该API专注于商品信息整合与展示,提供基础信息抓取、多媒体内容整合等功能,助力实时同步商品数据,构建丰富的详情页。同时支持数据分析与市场洞察,包括销售趋势分析和竞品对比,优化库存与定价策略。此外,动态促销管理和个性化推荐系统可提升营销效果,而实时库存预警和评价数据可视化则显著增强用户体验,为用户决策提供透明依据,全面提升平台竞争力与用户满意度。
|
5月前
|
人工智能 自然语言处理 前端开发
从0到上线,CodeBuddy 如何帮我快速构建旅游 App?
本文详细介绍了AI代码助手CodeBuddy的功能与使用方法,并通过实战演示其在前端开发中的应用。文章首先讲解了CodeBuddy的安装步骤,以VS Code为例,引导用户快速上手。随后,通过构建一个旅游APP页面的实例,展示了CodeBuddy在生成代码、调整样式、修复问题等方面的能力。实战中涉及Craft模式交互、提示词优化、元素布局调整等内容,验证了插件的高效性与灵活性。尽管过程中遇到一些小问题,但整体效果令人满意。最后,文章鼓励开发者进一步探索CodeBuddy的潜力,为开发工作带来更多便利。
396 0
|
7月前
|
小程序
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
466 1
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡

热门文章

最新文章