Metro UI是一種界面展示技術(shù)，和蘋果的iOS、谷歌的Android界面大的區(qū)別在于：后兩種都是以應(yīng)用為主要呈現(xiàn)對(duì)象，而Metro界面強(qiáng)調(diào)的是信息本身，而不是冗余的界面元素。顯示下一個(gè)界面的部分元素的功能上的作用主要是提示用戶”這兒有更多信息”。同時(shí)在視覺(jué)效果方面，這有助于形成一種身臨其境的感覺(jué)。

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

@愛(ài)上了設(shè)計(jì)的親愛(ài)的蔥 ：2012年7月，在大連中軟實(shí)訓(xùn)基地學(xué)習(xí)時(shí)，老師要求我們分小組開(kāi)發(fā)項(xiàng)目，理所當(dāng)然地，我擔(dān)任前端設(shè)計(jì)和開(kāi)發(fā)的工作。

當(dāng)我略微得意地把設(shè)計(jì)好的頁(yè)面拿給老師顯擺時(shí)，他給了一個(gè)字的評(píng)價(jià)：”俗!”然后講，”中國(guó)風(fēng)看起來(lái)的確美，但這種美很容易趨于小氣和庸俗，遠(yuǎn)不如簡(jiǎn)單用色塊搭配出的效果?！?br />
也是從那時(shí)候起，我開(kāi)始注意色彩的搭配，也開(kāi)始用這種觀點(diǎn)來(lái)把玩一些網(wǎng)頁(yè)和海報(bào)等的設(shè)計(jì)。

《甄嬛傳》再經(jīng)典，老外們也不會(huì)明白隱藏在后宮中的彎彎繞…

下面來(lái)分享一下小編眼中或凌厲傲嬌或簡(jiǎn)潔明朗或大氣磅礴或小家碧玉的一些網(wǎng)頁(yè)截圖：

ux-lx.com

每一個(gè)導(dǎo)航都有一種鮮明的顏色，而且對(duì)應(yīng)的子頁(yè)面中也會(huì)有不同的背景顏色，瞬間能感受到一種撲面而來(lái)的時(shí)尚和熱情了，你怎么看?

piccsy.com

#E02E42和不同灰度的黑白色彩，簡(jiǎn)單的icon圖標(biāo)，營(yíng)造出了一種優(yōu)雅、愉悅的氣氛，flatUI、自然排列的圓角二級(jí)導(dǎo)航菜單，清新明快，有沒(méi)有想再停留一會(huì)兒的趕腳呢?有時(shí)候，管理復(fù)雜比簡(jiǎn)約設(shè)計(jì)更重要哦~:)

kippt.com

這個(gè)網(wǎng)站告訴你神馬叫做一目了然!有時(shí)候，捉迷藏會(huì)令人感到很煩…

ryanfait.com

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

gathercontent.com

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

honghaihaotian.com

之前有提到過(guò)這個(gè)網(wǎng)頁(yè)，flash做的，那些小方塊立體翻滾，煙霧繚繞，建議去感受下，

如果不提動(dòng)態(tài)，背景圖片加上色塊導(dǎo)航，也是挺不錯(cuò)的一款設(shè)計(jì)方案~

smashingmagazine.com

這個(gè)頁(yè)面其實(shí)沒(méi)有很多的色塊元素，但是…信息量很大。把它列在這里的原因是：我發(fā)現(xiàn)它最上方的導(dǎo)航做成了tab樣式，整個(gè)頁(yè)面有層次感，很有特色~~有沒(méi)有發(fā)現(xiàn)搜索顯得很亮?

shejidaren.com

關(guān)于這個(gè)頁(yè)面，我只想說(shuō)兩點(diǎn)：1、底紋往往決定一個(gè)網(wǎng)頁(yè)的氣場(chǎng)和品位;2、繁體字的大標(biāo)題是不是顯得更加飽滿和驚艷?3、我絕對(duì)沒(méi)看出來(lái)這是用wordpress搭建的…

顯然…這個(gè)跟我們標(biāo)題討論的色塊也沒(méi)有關(guān)系…但是，我覺(jué)得很有必要分享…

nicolasgallagher.com

為了讓這個(gè)懶洋洋的頁(yè)面更全面地顯示出來(lái)，小編省略了中間更多的內(nèi)容，特意為兩幅添加了border，拼接起來(lái)供大家賞玩…你看到過(guò)這樣的網(wǎng)頁(yè)么?至簡(jiǎn)啊有木有…

意猶未盡的最后

其實(shí)，不管什么風(fēng)格的頁(yè)面，看久了都會(huì)視覺(jué)疲勞，所以，當(dāng)你看到最后一幅的時(shí)候，你可能會(huì)感覺(jué)到很舒服…我們的眼睛需要休息，多元可定制的風(fēng)格才是王道，期待web帶給我們?cè)絹?lái)越美妙的體驗(yàn)

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

分享文章：巧用色塊布局讓你的網(wǎng)站與眾不同
鏈接分享：http://www.rwnh.cn/news48/314648.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)