巧用色塊布局,讓你的網站與眾不同!

2013-12-24    藍藍設計的小編

轉載藍藍設計(   sillybuy.com  )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供有效的   BS界面設計 、 cs界面設計 、  ipad界面設計   、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、   網站建設 、平面設計服務

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中,   請點這里 

QQ截圖20130428163130

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

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

藍藍設計 :2012年7月,在大連中軟實訓基地學習時,老師要求我們分小組開發(fā)項目,理所當然地,我擔任前端設計和開發(fā)的工作。
當我略微得意地把設計好的頁面拿給老師顯擺時,他給了一個字的評價:”俗!”然后講,”中國風看起來的確美,但這種美很容易趨于小氣和庸俗,遠不如簡單用色塊搭配出的效果?!?/p>

也是從那時候起,我開始注意色彩的搭配,也開始用這種觀點來把玩一些網頁和海報等的設計。
《甄嬛傳》再經典,老外們也不會明白隱藏在后宮中的彎彎繞…

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

ux-lx.com

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

ux-lx.com

 

piccsy.com

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

httppiccsy.com

 

kippt.com

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

kippt.com

 

ryanfait.com

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



 

gathercontent.com

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

gathercontent.com

 

honghaihaotian.com

之前有提到過這個網頁,flash做的,那些小方塊立體翻滾,煙霧繚繞,建議去感受下,
如果不提動態(tài),背景圖片加上色塊導航,也是挺不錯的一款設計方案~

QQ截圖20130428163954

 

smashingmagazine.com

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

QQ截圖20130428162446

 

shejidaren.com

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

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



 

nicolasgallagher.com

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

nicolasgallagher.com QQ截圖20130428161428

 

意猶未盡的最后

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

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔