一直以來我都在尋找一種簡潔而又華麗的Web界面風格，卻一直未能如愿。

如今網頁設計中大行其道的設計元素有華麗的Icon、柔和的光線和自然的陰影、恰當的配色，當然還有時下風靡男女老少的Apple風，確實絢麗無比，這種風格可以說是對上面說到的幾種元素的完美組合！但是要知道，一種藝術或風格，永遠都是有人喜歡有人厭的——我還是覺得這些都不夠簡潔，直到我聽說了Metro，一種以“sleek, quick, modern”（平滑、快捷、現代）為宗旨的設計風格，尤其適用于以文字為主的界面。

圖一 這是Zune播放器的界面截圖，使用了Metro界面風格

圖二 Metro Twit的界面截圖

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

樸素+點綴色

Metro中真的很少用到金屬光澤、陰影、外發光，更多的是樸素的背景顏色（黑、白等）、簡潔的二維圖標加上清晰的文字，還有就是七彩的點綴色！

the ie 6 count down

不規則的方塊布局

可以在地鐵站里找到原型

Zune

Microsoftmag

地鐵標識一樣的Icon

現實世界中的日本地鐵標識

中國某地的地鐵標識

IE9中的Icon

Zune中的Icon

Metro Twit中的Icon

放大醒目的文字

一般來說，英文字體使用Segoe UI字體，如下圖，這是一種橫豎粗細一樣的無襯線字體。中文可以用微軟雅黑。

深圳地鐵（同時也可以看到不規則方塊布局的影子）

Zune

App Hub

zune.net

簡潔的布局

Zune

狀態轉換時的細節

Zune:進入全屏模式時的提示

Zune:模式對話框，周圍白色遮罩

Zune:文本框獲取焦點

Zune:選中狀態與懸浮狀態

另外，還可以觀察一下每個窗口載入時文字出現的順序：從左向右，從上到下，滑動淡入！

無縫導航

比如在Zune中，當你的鼠標放在屏幕靠左位置時，導航會向左移動：

當你的鼠標慢慢向右時，窗口中的右邊的內容也會慢慢出現：

真實的Metro體驗，你要自己去感受！

我真的愛上了Metro，所以我打算給自己的Blog做一個Metro風格的WordPress主題，遺憾的是我還不會做WordPress主題，如果你會的話，我很樂意你教教我:)

轉載請注明： 轉載自Frank Fang .com

本文鏈接地址: 大道至簡 愛上Metro