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

原文地址:https://www.cnblogs.com/visi/p/2554891.html