大道至简 爱上Metro

标签： 大道 metro | 发表时间：2011-08-28 17:10 | 作者：FrankFang Pei
出处：http://www.cnblogs.com/

一直以来我都在寻找一种简洁而又华丽的Web界面风格，却一直未能如愿。

如今网页设计中大行其道的设计元素有华丽的Icon、柔和的光线和自然的阴影、恰当的配色，当然还有时下风靡男女老少的Apple风，确实绚丽无比，这种风格可以说是对上面说到的几种元素的完美组合！但是要知道，一种艺术或风格，永远都是有人喜欢有人厌的——我还是觉得这些都不够简洁，直到我听说了Metro，一种以“sleek, quick, modern”（平滑、快捷、现代）为宗旨的设计风格，尤其适用于以文字为主的界面。

3

图一 这是Zune播放器的界面截图，使用了Metro界面风格

3

图二 Metro Twit的界面截图

首先，我想知道Metro里面常见的元素（Element）和模式（Pattern）有哪些。

朴素+点缀色

Metro中真的很少用到金属光泽、阴影、外发光，更多的是朴素的背景颜色（黑、白等）、简洁的二维图标加上清晰的文字，还有就是七彩的点缀色！

the ie 6 count down

image

不规则的方块布局

可以在地铁站里找到原型

0QQT000-0

Zune

18

Microsoftmag

www.microsoftmag.eu

地铁标识一样的Icon

现实世界中的日本地铁标识

httpwww.tokyometro.jpcnsubwaymap

中国某地的地铁标识

bced7acd0fdc154a4445483669a269ed

IE9中的Icon

ie9

Zune中的Icon

7

Metro Twit中的Icon

11

放大醒目的文字

一般来说，英文字体使用Segoe UI字体，如下图，这是一种横竖粗细一样的无衬线字体。中文可以用微软雅黑。

Segoe UI

msyhmsyhbl

深圳地铁（同时也可以看到不规则方块布局的影子）

1425036100-5

Zune

19

App Hub

create.msdn.com_en-US

zune.net

social.zune.net_videos

简洁的布局

Zune

20

image

状态转换时的细节

Zune:进入全屏模式时的提示

6

Zune:模式对话框，周围白色遮罩

11

Zune:文本框获取焦点

12

Zune:选中状态与悬浮状态

2122

另外，还可以观察一下每个窗口载入时文字出现的顺序：从左向右，从上到下，滑动淡入！

无缝导航

比如在Zune中，当你的鼠标放在屏幕靠左位置时，导航会向左移动：

image

当你的鼠标慢慢向右时，窗口中的右边的内容也会慢慢出现：

image

真实的Metro体验，你要自己去感受！

我真的爱上了Metro，所以我打算给自己的Blog做一个Metro风格的WordPress主题，遗憾的是我还不会做WordPress主题，如果你会的话，我很乐意你教教我:)

 

转载请注明： 转载自Frank Fang .com

本文链接地址: 大道至简 爱上Metro

作者: FrankFang 发表于 2011-08-28 17:10 原文链接

评论: 7　查看评论　发表评论

最新新闻：
· Forecast：制造邂逅(2011-08-28 21:48)
· 安卓烤糊Linux的20岁生日蛋糕(2011-08-28 21:41)
· Socialite，微软 Windows 8 的社交客户端？(2011-08-28 21:37)
· 微软已在开发 Windows、Mac、iOS 和 Android 平台的 SkyDrive 应用？(2011-08-28 21:34)
· 求解淘宝一变三：C2C与B2C冲突 大公司病渐现(2011-08-28 21:33)

编辑推荐：菜鸟CLR VIA C#之旅(1)：品味细节，CLR的执行模型

网站导航：博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [大道 metro] 推荐：

大道至简 爱上Metro

- Pei - 博客园-首页原创精华区
一直以来我都在寻找一种简洁而又华丽的Web界面风格，却一直未能如愿. 如今网页设计中大行其道的设计元素有华丽的Icon、柔和的光线和自然的阴影、恰当的配色，当然还有时下风靡男女老少的Apple风，确实绚丽无比，这种风格可以说是对上面说到的几种元素的完美组合. 但是要知道，一种艺术或风格，永远都是有人喜欢有人厌的——我还是觉得这些都不够简洁，直到我听说了Metro，一种以“sleek, quick, modern”（平滑、快捷、现代）为宗旨的设计风格，尤其适用于以文字为主的界面.

Metro UI 平板概念图

- 冉波 - 爱范儿 · Beats of Bits
在 《从应用启动器的设计来谈谈 Metro UI 的不足》 中，我曾抱怨过 Metro UI ，主要是针对它的主屏幕，因为在手机那样的小屏幕上，主屏似乎更适合摆放图标，而不是动态格窗. 但是如果我们将 Metro UI 放到平板上，情况就会完全不同. iOS 在 iPhone 上表现虽然很好，但是将同样的 UI 放到 iPad 上，总感觉不够大气.

Metro UI 专利终于获批

- linsen - 爱范儿 · Beats of Bits
最近的专利大战挺火热，对于微软来说，美国专利商标局又给他们带来了好消息：微软在 2010 年初申请的 Metro UI 专利终于得到了批准. 整个专利描述很长，也比较抽象，比如这一段：. 在用户界面当中，当用户进行输入时，提供一种视觉反馈. 例如在边界提供视觉线索，表明这个可移动的界面元素已经到达边界（比如说滚动到列表末尾）.

Metro 风 — Windows 8 几张新截图

- SotongDJ - 爱范儿 · Beats of Bits
随着微软 Build 大会的临近，Windows 8 的更多信息也开始慢慢透露出来，今天有人在 Reddit 上放出了几张 Windows 8 的新截图. 第一张锁屏界面相当漂亮，基本上是 WP7 的风格，从大小跟元素来看我猜是 Tablet 版本的截图：. 下面是主界面，怎么说呢，Metro UI 的主界面色调明快，功能清晰，但我使用起来总是觉得不便，因为信息量太小，大量屏幕空间被色块占用了.

Metro风格应用的统一设计

- - 设计之外 - UCD大社区
Tasks是Windows Phone平台上一款todo类型的任务管理应用，发布以来在marketplace中获得了比较高的用户评价. 其应用开发商Telerik是一家专注于.net平台的表示层和内容管理控件的企业. Windows Phone 发布以后，Telerik也开发了相应的RadControl for Windows Phone套件.

7 款免费的 Metro UI 模板

- - 开源中国社区最新新闻
很棒的蓝色调 Metro UI 管理模板. Metro Bootstrap 是基于 Bootstrap 开发的 Metro 主题. 非常易用的 Metro UI 框架，付费版本提供更多功能和特性. 这是很不错的管理界面的模板，不适合用于首页，主要是后台界面框架. Metro JS 是一个免费而且非常有用的 JavaScript 库，可帮你开发 Metro 风格的 Web 应用，可在块和创建一些简单的动画效果.

第三方Win7主题下载：Windows 8 Metro

- 皮皮 - cnBeta.COM
昨天我们为大家介绍了意大利开发人员Sergio James Bruccoleri的一项壮举，他正在开发一种应用程序将Windows 7也能使用Windows 8的沉浸式用户界面. Bruccoleri开发的这款软件能为Windows 7的应用程序和游戏自定义Tile（贴片），实现多任务的分屏显示，内置Immersive浏览器……几乎能让Windows 7彻底变身为Windows 8.

谈谈Windows 8的Metro设计风格和桌面

- 远 - cnBeta.COM
感谢Steven Sinofsky的投递. 我们认为花一点时间介绍一下我们在设计 Windows 8 用户界面时的目标会有所帮助. 到目前为止，您已经看到两种不同的 Windows 8 设计元素：首先是 Metro 风格的用户界面，我们之前曾通过视频展示过这一界面，有数百万人观看了该视频.

6张Windows 8 Metro风格界面图片欣赏

- Nanqi - 36氪
今天，在全球开发者大会上微软发布了一组Windows 8 Metro界面风格的图片，我们一起来看一下：. 经过个性化定制的lock screen可以显示你的未读邮件和其他应用通知. 在启动界面时预览应用及其大体内容. 还开着 Windows ，关掉它吧：又一个潜伏在微软的俄罗斯间谍被捕. 三星Windows 8平板电脑将采用英特尔芯片.