Metro用户界面实现与资源

Metro用户界面实现与资源

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

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

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

现在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专注的四大原则:

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

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

metro

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

一、Web上Metro UI 框架和模板

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

1、Metro UI CSS

metro

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

Read Moredownload

2、Metro.css

metro

Metro.css灵感来源于Twitter Bootstrap,Metro.css包括了“基本样式”、“常用UI控件样式”等。

Read Moredownload

3、Bootmetro

metro

Sergey Pimenou基于Twitter Bootstrap创建的一个Metro UI CSS。所以你可以想像得到,里面收藏的样式、UI组件和javascript组件。

Read Moredownload

4、Metro-Bootstrap

metro

Metro-Bootstrap是另一个通过Bootstrap实现的Metro UI。这意味着,Bootstrap具有的功能,在这个Metro UI中都将包括。

Read Moredownload

5、MetroUI by Brobot

metro

这个主题不单单是基于Web上的应用,你下载他后你可以运用到你的桌面和手持设备中。

Read Moredownload

6、Metro UI Template

metro

这是一个很好看的Metro UI模板,不过你要是想使用这个模板中的所有功能,你是需要付费购买的。

Read Moredownload

7、Droptiles

metro

Droptiles是一个开源的,像Metro风格的Windows 8开始面板的Web 2.0控制面板。迷你应用程序,可以从外部源获取数据。点击一个完整的应用程序启动区块。Droptiles是建立几乎完全的HTML、Javascript和CSS,因此高度移植到任何平台。

Read Moredownload

8、Browsertiles

metro

Droptiles是一个开源的,像Metro风格的Windows 8开始面板的Web 2.0控制面板。迷你应用程序,可以从外部源获取数据。点击一个完整的应用程序启动区块。Droptiles是建立几乎完全的HTML、Javascript和CSS,因此高度移植到任何平台。

Read Moredownload

二、Metro UI方面的jQuery插件

1、jQuery Metro Plugin

metro

jQuery Metro Plugin可轻松的帮你创建一个水平滚动的Web,而且这个Web具有Metro UI风格。

Read Moredownload

2、MetroJs

metro

Metro JS是一个JavaScript插件,jQuery开发很容易激活Metro web上的界面。这个版本主要关注生活版块,应用程序栏和主题。他还处在早期发展阶段,但所有的特性兼容IE7 +(Win / WinPhone),Firefox,Chrome,Opera和Safari Android,,(OSX / iOS)。

Read Moredownload

3、TileJs

metro

TileJs使用CSS3和Javascript实现了Window8 Tiles' subtle效果。

Read Moredownload

4、jQuery UI Metro Theme

metro

jQUIT Builder是一款基于Metro UI的jQuery UI组件。

Read Moredownload

4、jQuery Mobile Metro Theme

metro

这个主题提供了一个Metro UI用户界面应用程序,支持jQuery Mobile和Windows Phone 7.5。

Read Moredownload

三、免费的Metro UI图标

1、Metro UI Dock Icon Set

metro

到目前为止,最大的Metro UI的图标集。目前包含678个512x512 Dock图标,

Read Moredownload

2、Metro Icons

metro

Windows Phone 7的130个特性图标,

Read Moredownload

3、Windows 8 Set

metro

世界上最大的免费图标的原套Windows8/Metro。今天的总数为1027。还可以下载作为字体文件的可伸缩的版本。

Read Moredownload

4、Modern UI Icons

metro

手工制作的具有Metro UI风格的像素图标。

Read Moredownload

上面都是有关于Metro UI主题方面相关资源,希望这些资源对于学习Metro UI会有所帮助。如果您发现有这方面相关的资源,希望能在下面的评论中分享。

如需转载,烦请注明出处:http://www.w3cplus.com/source/metro.html

返回顶部