創(chuàng)建非對稱的平衡:談談網(wǎng)頁設計中的不對稱設計技巧

2012-11-27    藍藍設計的小編

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

來源: http://www.cnblogs.com/lhb25/archive/2012/11/27/using-asymmetry-in-web-design.html

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

不對稱是對稱的反面,但并不意味著不對稱就缺少平衡與和諧。不對稱的設計技術可以在視覺上引人入勝,為內容創(chuàng)建出重要程度不同的差異性。這篇文章分享一組鼓舞人心的例子,介紹了不對稱設計在網(wǎng)頁中的使用技巧。

大多數(shù)人想到的對稱性都是一種自然發(fā)生的現(xiàn)象,其實不對稱也是一種自然現(xiàn)象,例如人都是顯性的左撇子或右撇子。不對稱設計的用途也非常廣泛,常用來突出重點,讓人的視線自然的被吸引到焦點上面。

不對稱設計的應用

  什么樣的項目可以受益于非對稱設計?簡單地說,幾乎所有的項目都可以。這項技術如果能夠合理運用,將會給項目增強對比度和差異性。其關鍵是要元素的組織和排布以達到非對稱的平衡。

  在網(wǎng)頁設計中,對稱通常都是指水平對稱,而不對稱都是指首屏部分的內容,即用戶不用拖動滾動條就能看到的那部分。最常用的不對稱設計都是把對稱的元素組合在一起,重新排布,下面是幾個不對稱設計的示例。

 

 

 

 

圖片和文本的不對稱設計

  讓不對稱設計達到平衡的方法之一是配對不同的元素,如圖像和文本 。這是一種常用的技術,眾多設計師都在使用。

  這種技術的秘訣就在于你如何把二者結合起來,需要的只是一張圖片和幾句話,不多圖片和文字必須是互補 的。這種技術關鍵要素之一是如何鏈接文本和圖像。文字和圖片是表示同樣的事情嗎?它們存在關聯(lián)嗎?字體的大小是否能體現(xiàn)圖像的權重?

 

 

 

夢想天空博客關注前端開發(fā) 技術,展示HTML5 CSS3 應用,分享實用的jQuery 插件,推薦網(wǎng)頁設計 案例。

 

 

 

圖片和空白的不對稱設計

  空白通常搭配一些重的元素(圖片或文字)以創(chuàng)造出重量或運動感。空虛的空白和頁面其它部分的豐滿形成強烈的對比 。

  另一種創(chuàng)建不對稱性的方法是遮擋部分可視區(qū)域 。使用側邊欄和色塊是做到這一點的簡單方法。通常在使用這個技巧的時候,雖然這樣的設計在網(wǎng)站的局部具有鮮明的對稱感,但總體看是不對稱的。

 

 

 

 

顏色在不對稱設計中的應用

  不對稱也可以通過顏色的使用來創(chuàng)建。鮮明的對比色調 ,例如白色和黑色的或者調色板上的其它對立顏色,能然人感覺到失去平衡。

  非對稱的彩色圖案也自然會有一種奇怪的平衡感。在許多物種中,雄性動物幾乎都有完全對稱 的顏色標記,而雌性動物則很少有(這種自然現(xiàn)象被認為是生物進化的自然選擇。) 另一種常用的方法是創(chuàng)建一個色彩多種多樣的項目,而和它搭配的項目則它含有很少或根本沒有顏色。

 

 

寫在最后

  不對稱設計可能會非常棘手,但成功的設計也非常美麗。我喜歡不對稱設計,同時更喜歡不對稱設計中出其不意的平衡。最好的不對稱設計是搭配合適的圖像和文字以創(chuàng)建平衡,在屏幕上創(chuàng)造一個獨特的從圖像到文字的視線移動路徑。

日歷

鏈接

個人資料

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

存檔