不對稱是對稱的反面,但并不意味着不對稱就缺少平衡與和諧。不對稱的設計技術可以在視覺上引人入勝,為内容建立出重要程度不同的差異性。這篇文章分享一組鼓舞人心的例子,介紹了不對稱設計在網頁中的使用技巧。
<a href="http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.html" target="_blank">10套精美的免費網站背景管理系統模闆</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/05/16/parallax-scrolling-effect-web-design.html" target="_blank">35個立體動感的視差滾動效果網站作品</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/08/31/free-application-icon-sets.html" target="_blank">13套非常精美 Web 應用程式圖示素材</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/11/03/html5-business-websites-inpiration.html" target="_blank">10個精美的 HTML5 商業網站設計案例</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/12/06/fresh-best-inspirational-website-designs.html" target="_blank">30佳别出心裁的企業網站設計優秀作品</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html" target="_blank">25個優秀的國外單頁網站設計作品欣賞</a>
大多數人想到的對稱性都是一種自然發生的現象,其實不對稱也是一種自然現象,例如人都是顯性的左撇子或右撇子。不對稱設計的用途也非常廣泛,常用來突出重點,讓人的視線自然的被吸引到焦點上面。
什麼樣的項目可以受益于非對稱設計?簡單地說,幾乎所有的項目都可以。這項技術如果能夠合理運用,将會給項目增強對比度和差異性。其關鍵是要元素的組織和排布以達到非對稱的平衡。
在網頁設計中,對稱通常都是指水準對稱,而不對稱都是指首屏部分的内容,即使用者不用拖動滾動條就能看到的那部分。最常用的不對稱設計都是把對稱的元素組合在一起,重新排布,下面是幾個不對稱設計的示例。

讓不對稱設計達到平衡的方法之一是配對不同的元素,如圖像和文本。這是一種常用的技術,衆多設計師都在使用。
這種技術的秘訣就在于你如何把二者結合起來,需要的隻是一張圖檔和幾句話,不多圖檔和文字必須是互補的。這種技術關鍵要素之一是如何連結文本和圖像。文字和圖檔是表示同樣的事情嗎?它們存在關聯嗎?字型的大小是否能展現圖像的權重?
空白通常搭配一些重的元素(圖檔或文字)以創造出重量或運動感。空虛的空白和頁面其它部分的豐滿形成強烈的對比。
另一種建立不對稱性的方法是遮擋部分可視區域。使用側邊欄和色塊是做到這一點的簡單方法。通常在使用這個技巧的時候,雖然這樣的設計在網站的局部具有鮮明的對稱感,但總體看是不對稱的。
不對稱也可以通過顔色的使用來建立。鮮明的對比色調,例如白色和黑色的或者調色闆上的其它對立顔色,能然人感覺到失去平衡。
非對稱的彩色圖案也自然會有一種奇怪的平衡感。在許多物種中,雄性動物幾乎都有完全對稱的顔色标記,而雌性動物則很少有(這種自然現象被認為是生物進化的自然選擇。) 另一種常用的方法是建立一個色彩多種多樣的項目,而和它搭配的項目則它含有很少或根本沒有顔色。
不對稱設計可能會非常棘手,但成功的設計也非常美麗。我喜歡不對稱設計,同時更喜歡不對稱設計中出其不意的平衡。最好的不對稱設計是搭配合适的圖像和文字以建立平衡,在螢幕上創造一個獨特的從圖像到文字的視線移動路徑。
<a href="http://www.cnblogs.com/lhb25/archive/2012/10/29/stunning-big-backgrounds.html" target="_blank">25個以全屏照片為背景的精美網頁作品</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/12/16/30-well-designed-website.html" target="_blank">30個與衆不同的國外優秀網站設計案例</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/08/04/really-cool-and-creative-404-error-pages.html" target="_blank">讓人驚歎的國外創意404錯誤頁面設計</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/10/30/html5-portfolio-great-examples.html" target="_blank">16個精美的HTML5作品集網站設計案例</a>
歡迎任何形式的轉載,但請務必注明出處。