Metro用户界面实现与资源

Windows8已经到来，基于Metro UI风格完全改变了Window要操作系统。Metro是微软的设计语言，微软将这个新的UI用于他们的所有平台，包括台式机、平板电脑、手机和他们的网站。就我个人而言，我喜欢Metro　UI，它的简单性、基于网格的接口（适合响应式设计），以及他在每个部分的一致性很适合现代网页设计的需求。Metro　UI也将挑起网页设计的一股新浪潮。

Metro的用户界面具有以下几个特性：

多色块的组合
基于文本的按钮
浮动的区块
明亮的标志代表不同的项目
简约、轻松

现在Metro的概念传播到多种产品上。品牌宣传、媒体中心，Windows Phone，Windows8操作系统。其最大特点就是通过方正的区块标记简单的连接到需要的地方，简单明了，从视觉上就能告诉我们要去的地方是什么？

微软是这样描述的：“Metro是我们的设计语言。我们称之为‘Metro’，是因为他的现代和简约，而且他在移动时，速度非常的快，他的排版结合印刷术。而且他是完全真实的”。

METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT'S MODERN AND CLEAN. IT'S FAST AND IN MOTION. IT'S ABOUT CONTENT AND TYPOGRAPHY. AND IT'S ENTIRELY AUTHENTIC.
——Microsoft

Metro专注的四大原则：

排版（Typography）:排版风格非常漂亮，他不仅吸引了用户的眼球，还实出了功能。正确的使用区块的权重和定位，可以创建一个视觉层次结构性。此外还可以帮助你使用更多的内容和功能。
移动（Motion）：移动带来了用户新的体验与用户界面。转换在图形设计中也同样的重要，通过开发一组一致的动作或动画按钮，并且创建一个系统，为用户提供上下文可用性，同时额外的添加维度和深度，通过这些方面来提高实际性能和整个用户界面效果。
内容焦点（Content not Chrome）:在Metro中，内容不在是焦点，是一个较为特殊的原则。通过删除UI焦点的观念，内容就成为主要焦点。这一点也是因为小屏幕大小和手势进行信息交流而有关。
真实（Honesty）：给手持触摸屏、高分辨率设备简化和加速用户界面交互。换句话说，就是“真正的数字”。

下图是Microsoft TechEd Africa 2013的设计图效果：

尽管基于Metro UI并不是什么新鲜事,但Metro UI肯定会激发很多Web设计师,我们将看到很多网站类似于他。如果你喜欢Metro UI或者计划在您的下一个网站创建一个类似于Metro UI的风格,下面的资源将对你会有很大的帮助:

一、Web上Metro UI 框架和模板

Metro UI真的很有吸引力,我们收集了大量的资源,这样你就可以很容易在Web项目或应用程序中实现Metro UI效果。

1、Metro UI CSS

这可能是最大介绍基于Metro UI的Web开发。这个UI分类很全，覆盖了“全局样式”、“网格系统”、“基本样式”以及大量的“Javascript组件”。非常详细和优秀的文档（类似于twitter的bootstrap），如果您想学习有关于Metro UI在Web上的相关知识，这个网站你必须得去看看。

Read More download