大道至简 爱上Metro

一直以来我都在寻找一种简洁而又华丽的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

posted @ 2011-08-28 17:10  FrankFang  阅读(3694)  评论(11编辑  收藏