Win8系統(tǒng)中的Metro界面曾一度受到用戶體驗不佳的反饋，但這并不影響Metro在網(wǎng)頁設計師心目中的地位。隨著扁平化設計的日益興起，Metro的利用率也因此大大的提高了，不可否認，Metro與扁平化的融合稱得上恰到好處。

Metro也被親切的稱為方塊元素設計，這一稱呼也正體現(xiàn)了它最明顯的特點。Metro的設計風格能凸顯出網(wǎng)頁的個性化，但在整體布局上卻更加井井有條。

AnyForWeb為大家精心挑選了10個Metro風的網(wǎng)頁設計案例，供大家欣賞評論。

1.這個網(wǎng)站中的Metro風格再明顯不過了，不同的方塊尺寸和顏色，讓整體看起來不僅沒有雜亂無章的感覺，還有一種整潔的感覺。這也是Metro風的另一種精髓所在。其實在小模塊的搭配中，設計師也花了很多心思，圖案、照片、顏色、文字，每一處細節(jié)都需要有準備的把握，最終令網(wǎng)站看起來隨性但不隨便。

2.通常情況下，Metro風格的界面也會相應的選用五彩繽紛的色彩，甚至使用撞色效果也不為過，而下面這個案例是比較少有的單一色系Metro網(wǎng)頁設計。全局使用了黑色作為主色調(diào)，不由的渲染出一種詭異驚悚的氛圍。

3.Very make up school是一個源自于日本的化妝學校，網(wǎng)站上半部分采用了粉嫩馬卡龍色系的Metro風格設計。根據(jù)不同系列的妝容案例搭配相應的色彩，讓網(wǎng)站洋溢著青春活力的氣息。

4.John Jacob Designs是一個比較特別的Metro風格網(wǎng)站，在一個頁面中呈現(xiàn)了兩種截然不同的Metro界面。按鈕模塊利用了單一低調(diào)的黑色來襯托網(wǎng)頁要體現(xiàn)的主要內(nèi)容，讓兩個Metro部分顯得毫不沖突。

5.這個案例從嚴格意義上來說，其實并不屬于Metro的范疇之中，只能說是由Metro的元素構(gòu)成的網(wǎng)頁。但如果要評定Metro中的用戶體驗，這個網(wǎng)站就值得一提了。每個導航和按鈕都很清楚，讓用戶能夠及時的找到自己所需要的分類。清新的顏色和扁平化手繪風格的圖示也都很符合瀏覽的視覺習慣。

6.Blocklevel的網(wǎng)站采用了單頁式的設計手法，特別之處是網(wǎng)站全局都使用了Metro的風格設計。普通情況下，Metro的使用只是局限于一個網(wǎng)頁或是一個小范圍，這個網(wǎng)站很大膽的將Metro設計充滿了整個網(wǎng)頁，看起來別有一番風味。

7.PROTEST的網(wǎng)站對于Metro的使用，采取了較為保守的方法。圖片和色塊屬同一個色系，純色塊與照片之間形成了融洽的合作。在矩陣的數(shù)量上也基本達到了簡潔主義的要求，讓瀏覽者的視覺重點都落在了圖片上。

8.Think Basic是個充滿創(chuàng)意的日本女裝網(wǎng)站。商家提煉出不同的單品，把上裝和下裝用Metro的風格設計合并在一起，達到既合理搭配又mix的效果，真正實現(xiàn)商品宣傳和美化網(wǎng)站兩不誤。

9.下面這個案例充滿了現(xiàn)代感，每一個矩陣中的圖像看似各有各的位置，其實這之間有著密切的關(guān)聯(lián)。每一張圖片之間的連貫性成就了一段小故事，至于情節(jié)內(nèi)容就要靠你自己來發(fā)揮想象了。

10.有色彩的部分被集中在頁面中部，其余的范圍都用了黑白的Metro風格，意義在于突出彩色的重點部分，但如果其他的地方留白優(yōu)惠顯得很空洞，因此，這樣的設計在Metro中也具有一定的創(chuàng)新意義。

因為有清晰明了的布局，矩陣中的內(nèi)容才能任你盡情發(fā)揮。從色彩到效果，甚至模塊之間的間隔大小，The choice is yours!