Metro风格应用程序的UI基本概念

1.应用程序窗口（App Page）

类似于经典的Window窗口，在Metro风格应该程序中有时也叫画布(Canvas)，注：这里有别于HTML5的Canvas元素。

个人觉得与经典的Window窗口最大的区别就是：

这个窗口没有标题栏、最大最小关闭按钮（当然也可以通过程序模拟类似效果），当然也就没有最大最小化之说，要不关闭，要不打开（全屏）。

但是它有视图状态（View States）的概念（注：与Aspnet里面的ViewState是完全不同的概念）

a.FullView（全视图）

b.SnappedView（辅视图）

c.FillView（填充视图）

可以看出来辅视图与填充视图是相对应的概念，注意根据微软官方的说法，辅视图和填充视图只有在 1366 相对像素或更高的显示屏上可用。

参考这里：辅视图和填充视图指南

2.应用栏（App Bars）

应用栏位于应用窗口之外，是应用的主命令界面。默认情况下，应用栏会被隐藏，当用户使用手指从屏幕的顶部或底部边缘轻扫时（PC上点鼠标右键），会显示应用栏。

 

3.超级按钮（Charms）

微软给每个Metro应用设置的5个公共按钮，看下图，从上到下依次是: 搜索，共享，开始，设备，设置。

• 搜索用户可以搜索你的应用或其他应用中的内容，并且可以从其他应用中搜索你的应用中的内容。
• 共享用户可以与他人或服务共享你的应用中的内容。
• 设备用户可以连接到设备并发送内容、流式传输媒体以及进行打印。
• 设置用户可以根据他们的偏好来配置应用。
• 开始用户可以直接进入“开始”屏幕。

4.上下文菜单（Context Menus）

有时也叫pop menu，这个类似与经典Window程序的鼠标右键菜单，不多说了。

5.消息对话框（Message Dialogs）

和经典的Windows弹出消息类似，但是样式风格不一样而已，看看下面的图就知道了。

6.弹出窗口（Flyouts）

看上去和消息对话框类似：

区别：

仅当用户点击或单击后才应显示弹出窗口，并且当用户点击弹出窗口外部时通常会取消该窗口；

仅当需要中断用户并要求他们进行某些交互时才应显示消息对话框。

简单说类似于C#里面的Form.Show()和Form.ShowDialog().

 

7.Toast（中文意思：面包片）

这个概念应该是从Android里面借鉴过来的吧!？

就是弹出一个消息（一般是一句话），如果不点击，会自动消失。如果点击可以查看详细信息（当然需要加代码处理）

 

8.磁贴（Tiles）与徽标（Badge）

这个是Windows8里面的新概念，其实就是“开始”屏幕上的小方格，看下图：

每个小方块就是一个磁贴，磁贴下面的标识就是徽标(badge),还是直接上图：（大圈Tile，小圈Badge）

 9.错误（Error）

可以采用三种主界面向用户传达应用中的错误。应用的开发人员根据错误的内容和严重性来选择合适的错误界面。

若要显示：	使用此界面：
应用中元素特定的非关键错误。你的应用无法修复问题，但用户可以。 用户交互：用户可以在不解除错误的情况继续与应用、系统组件和其他应用交互。 示例：用户在文本框中输入一个无效字符串，然后重新键入。	画布上的嵌入式文本 仅文本 由应用解除 嵌入式显示在错误源附近
适用于整个应用的非关键错误。你的应用无法修复问题，但用户可以。 用户交互：用户可以在不解除错误的情况继续与应用、系统组件和其他应用交互。 示例：邮件此时无法同步。	页面顶部的文本 仅文本 由应用解除 显示在页面顶部
适用于整个应用且你的应用可以推荐解决方案的重要但非关键错误。 用户交互：用户可以响应你的提示，或在不解除错误的情况继续与应用、系统组件和其他应用交互。	错误和警告栏 文本、两个按钮 由用户解除 显示在页面顶部附近
适用于整个应用且会阻止用户使用应用的关键错误。 用户交互：用户无法继续与应用交互，除非解除该错误。用户仍然可以与系统组件交互及使用其他应用。	消息对话框 文本、1 到 3 个按钮、标题（可选） 由用户解除 居中显示在应用中

 

 

参考文档：

http://msdn.microsoft.com/en-US/library/windows/apps/hh465304