2014-4-28 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
Metro UI是一種界面展示技術(shù)，和蘋果的iOS、谷歌的Android界面最大的區(qū)別在于：后兩種都是以應(yīng)用為主要呈現(xiàn)對象，而Metro界面強(qiáng)調(diào)的是信息本身，而不是冗余的界面元素。顯示下一個(gè)界面的部分元素的功能上的作用主要是提示用戶”這兒有更多信息”。同時(shí)在視覺效果方面，這有助于形成一種身臨其境的感覺。今天藍(lán)藍(lán)設(shè)計(jì)分享一些巧用色塊布局的網(wǎng)站設(shè)計(jì)，希望能提升UI設(shè)計(jì)師的網(wǎng)站設(shè)計(jì)能力。
更多巧用色塊布局的網(wǎng)站設(shè)計(jì)欣賞：http://www.chinatradebeam.com/
每一個(gè)導(dǎo)航都有一種鮮明的顏色，而且對應(yīng)的子頁面中也會(huì)有不同的背景顏色，瞬間能感受到一種撲面而來的時(shí)尚和熱情了，你怎么看？
#E02E42和不同灰度的黑白色彩，簡單的icon圖標(biāo)，營造出了一種優(yōu)雅、愉悅的氣氛，flatUI、自然排列的圓角二級(jí)導(dǎo)航菜單，清新明快，有沒有想再停留一會(huì)兒的趕腳呢？有時(shí)候，管理復(fù)雜比簡約設(shè)計(jì)更重要哦~:)
這個(gè)網(wǎng)站告訴你神馬叫做一目了然！有時(shí)候，捉迷藏會(huì)令人感到很煩…
在這個(gè)全屏、居中、甚至居左的頁面都滿天飛的web時(shí)代，這個(gè)頁面是不是很別致？是不是很空靈？是不是很…美？看header上文字的巧妙排版，有木有拍自己腦袋的沖動(dòng)？
這種…最近風(fēng)頭挺旺的，暗含內(nèi)容被虛化的大背景圖片，上面擺放文字、半透明的div塊，有些頁面中會(huì)將圖片加上一層暗紋，不多做介紹~
之前有提到過這個(gè)網(wǎng)頁，flash做的，那些小方塊立體翻滾，煙霧繚繞，建議去感受下，
如果不提動(dòng)態(tài)，背景圖片加上色塊導(dǎo)航，也是挺不錯(cuò)的一款設(shè)計(jì)方案~
這個(gè)頁面其實(shí)沒有很多的色塊元素，但是…信息量很大。把它列在這里的原因是：我發(fā)現(xiàn)它最上方的導(dǎo)航做成了tab樣式，整個(gè)頁面有層次感，很有特色~~有沒有發(fā)現(xiàn)搜索顯得很亮？
關(guān)于這個(gè)頁面，我只想說兩點(diǎn)：1、底紋往往決定一個(gè)網(wǎng)頁的氣場和品位；2、繁體字的大標(biāo)題是不是顯得更加飽滿和驚艷？3、我絕對沒看出來這是用wordpress搭建的…
顯然…這個(gè)跟我們標(biāo)題討論的色塊也沒有關(guān)系…但是，我覺得很有必要分享…
為了讓這個(gè)懶洋洋的頁面更全面地顯示出來，小編省略了中間更多的內(nèi)容，特意為兩幅<img>添加了border，拼接起來供大家賞玩…你看到過這樣的網(wǎng)頁么？至簡啊有木有…
更多巧用色塊布局的網(wǎng)站設(shè)計(jì)欣賞：http://www.chinatradebeam.com/
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chinatradebeam.com