Metro UI是一種界面展示技術，和蘋果的iOS、谷歌的Android界面大的區別在于：后兩種都是以應用為主要呈現對象，而Metro界面強調的是信息本身，而不是冗余的界面元素。顯示下一個界面的部分元素的功能上的作用主要是提示用戶”這兒有更多信息”。同時在視覺效果方面，這有助于形成一種身臨其境的感覺。

科普一下：神馬是Metro?Metro是由微軟公司開發的內部名稱為” typography-based design language”(基于排版的設計語言)。最早出現在微軟電子百科全書95，后來的產品如：windows媒體中心、Zune播放器都有用到這項技術。該技術已于2010年初(美國)獲得Metro UI專利批準(USPTO)如今該技術被引入到微軟最新開發的Windows Phone操作系統和已經發布的Windows 8預覽版以及Office 15中。

@愛上了設計的親愛的蔥 ：2012年7月，在大連中軟實訓基地學習時，老師要求我們分小組開發項目，理所當然地，我擔任前端設計和開發的工作。

當我略微得意地把設計好的頁面拿給老師顯擺時，他給了一個字的評價：”俗!”然后講，”中國風看起來的確美，但這種美很容易趨于小氣和庸俗，遠不如簡單用色塊搭配出的效果。”

也是從那時候起，我開始注意色彩的搭配，也開始用這種觀點來把玩一些網頁和海報等的設計。

《甄嬛傳》再經典，老外們也不會明白隱藏在后宮中的彎彎繞…

下面來分享一下小編眼中或凌厲傲嬌或簡潔明朗或大氣磅礴或小家碧玉的一些網頁截圖：

ux-lx.com

每一個導航都有一種鮮明的顏色，而且對應的子頁面中也會有不同的背景顏色，瞬間能感受到一種撲面而來的時尚和熱情了，你怎么看?

piccsy.com

#E02E42和不同灰度的黑白色彩，簡單的icon圖標，營造出了一種優雅、愉悅的氣氛，flatUI、自然排列的圓角二級導航菜單，清新明快，有沒有想再停留一會兒的趕腳呢?有時候，管理復雜比簡約設計更重要哦~:)

kippt.com

這個網站告訴你神馬叫做一目了然!有時候，捉迷藏會令人感到很煩…

ryanfait.com

在這個全屏、居中、甚至居左的頁面都滿天飛的web時代，這個頁面是不是很別致?是不是很空靈?是不是很…美?看header上文字的巧妙排版，有木有拍自己腦袋的沖動?

gathercontent.com

這種…最近風頭挺旺的，暗含內容被虛化的大背景圖片，上面擺放文字、半透明的div塊，有些頁面中會將圖片加上一層暗紋，不多做介紹~

honghaihaotian.com

之前有提到過這個網頁，flash做的，那些小方塊立體翻滾，煙霧繚繞，建議去感受下，

如果不提動態，背景圖片加上色塊導航，也是挺不錯的一款設計方案~

smashingmagazine.com

這個頁面其實沒有很多的色塊元素，但是…信息量很大。把它列在這里的原因是：我發現它最上方的導航做成了tab樣式，整個頁面有層次感，很有特色~~有沒有發現搜索顯得很亮?

shejidaren.com

關于這個頁面，我只想說兩點：1、底紋往往決定一個網頁的氣場和品位;2、繁體字的大標題是不是顯得更加飽滿和驚艷?3、我絕對沒看出來這是用wordpress搭建的…

顯然…這個跟我們標題討論的色塊也沒有關系…但是，我覺得很有必要分享…

nicolasgallagher.com

為了讓這個懶洋洋的頁面更全面地顯示出來，小編省略了中間更多的內容，特意為兩幅添加了border，拼接起來供大家賞玩…你看到過這樣的網頁么?至簡啊有木有…

意猶未盡的最后

其實，不管什么風格的頁面，看久了都會視覺疲勞，所以，當你看到最后一幅的時候，你可能會感覺到很舒服…我們的眼睛需要休息，多元可定制的風格才是王道，期待web帶給我們越來越美妙的體驗

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

分享文章：巧用色塊布局讓你的網站與眾不同
鏈接分享：http://www.js-pz168.com/news48/314648.html

成都網站建設公司_創新互聯，為您提供網站營銷、網站排名、網站設計公司、移動網站建設、小程序開發、網站維護

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯