圖解對稱在網頁設計中的運用

導言：

在設計中，對稱創造了平衡，平衡創造了和諧、秩序和審美。自然界中對稱無處不在，也許正是這種無處不在的狀態讓我們發現對稱的美。形態學的基本原則之一就是對稱，它是一套人類形為理論，形態學認為人類對看到和遇到的事物本能地產生出秩序和完整性。

然而，對稱也會讓人感到厭倦，這時就出現了不對稱。如果用的好，不對稱可以營造出更有趣的效果。在這裏，我也將會談一談不對稱的用法。設計人員如何將對稱作為工具？在下麵的內容中，我們將涉及設計中的對稱，對稱的基本概念、使用對稱的技巧、秘訣和最佳案例，以及對一些使用對稱設計的網站進行討論。

一、對稱的種類

對稱分三種：反射對稱、 旋轉對稱、平移對稱。不同方法的使用可以創造出強烈的興趣點和視覺穩定性。

1、反射對稱

反射對稱也叫做左右對稱。反射對稱就是一種鏡子效映，一個物體在平麵內反射後得到另一個自已。自然界是最普遍的反射是水平反射，如：蝴蝶、人體，中心軸是垂直的。反射對稱可以是任意方向的、垂直的、對角線的，或是界於這兩者之間的任一角度。（圖01）

圖01

2、旋轉對稱

旋轉對稱（或稱放射對稱）是指某一物體繞著某一點在某一方向上做轉動。在自然界中，從花瓣到水母的頂部視角圖，隨處可以發現轉動對稱的存在。在藝術和設計中，轉動對稱可以用來表達動作和速度。即使在一個靜態的介質中，轉動對稱也可以表達出動態的意味。（圖02）

圖02

3、平移對稱

平移對稱，是將一個物體移動到另外一個位置，物體大體的方向不變。如下圖，物體以相等的間隔移動了若幹次。平移對稱的稱動間隔不一定是相等的，隻需要成比例移動。平稱對稱可用來製作各種圖案，例如平鋪的網站背景和重複的設計元素。如果運用的好，平移對稱完全可以像轉動對稱一樣打造出運動和速度效果。（圖03）

圖03#p#e#

二、不對稱

不對稱即是對稱的缺失。不對稱打破了預先的對稱模式，是設計中不協調的元素。不對稱的使用可以創造出不同的興趣點，在一組相似的元素中建立視覺層級。不對稱創造出無秩序的效果從而突出設計。自然界中，樹木的枝杈、雲朵和動物的皮毛都是不對稱的體現。不對稱具有很強的吸引力，因為它可以在統一的設計中營造出視覺的複雜性和多樣性。（圖04）

圖04

三、不對稱vs.對稱

不對稱物體在視覺上要重於對稱物體。因此，對稱最適合用在圖案、背景、總體布局、內容及一切視覺上被動的設計中。而不對稱可以抓人眼球，打破千篇一律。（圖05）

圖05

四、對稱/不對稱設計技巧和最佳案例

在使用對稱或不對稱做設計時，以下最佳案例可以用來參考。

1、適當的使用對稱

合適的使用對稱是一個強大的設計法寶。以下情形中更趨向使用對稱，如：需要更大穩定性的設計中，牢固的組織結構中，或是要傳遞傳統的、令人信賴的信息時。對於一些大膽、創新的設計，不對稱更可以強化這種效果。不對稱可以使平淡的設計出彩。

2、平移對稱最適合用於結構布局

將內容條塊設置成大約相同的尺寸，擴展至整個頁麵，或者輸出內容條塊是實現對稱的最好方法，同時也可以為主要文本和圖像留有足夠的空間。例如，許多網格布局係統通過打破列寬來展示平移對稱，以保持平衡和比例。（圖06）

圖06

3、使用旋轉對稱傳達動作和行為

即使在平麵靜態的介質中，旋轉對稱也可以模擬運動。旋轉對稱可以推斷發展進程和向前運動的方向。（圖07）

圖07#p#e#

4、利用不對稱突出重點

總的來說，不對稱可以讓設計更有趣，但其另有更基本的功能：抓人眼球和營造視覺層級。有時設計者故意打破平衡以將用戶的注意力引導到某個區域。（圖08）

圖08

5、跟著感覺走

對稱是與生俱來的。如果你熟悉格式塔原理，你必定知道人類的大腦對遇到的事物本能產生對稱和平衡。我們的身體生來就是對稱的，對稱在自然界中，對稱就在我們周圍。然而如果什麼東西看起來或感覺起來是不平衡的，這種現象也許是存在的。（圖09）

6、案例：網頁設計中的對稱

下麵的15個案例中，你將學到對稱和不對稱是如何使用的。通過對稱的使用，我們能夠了解到各種設計是如何傳遞特定的信息：使用大量對稱手法的設計看起來更深沉，更有條理；而不對稱的大量運用感覺更個性化。

IWC

在IWC的網站中，使用了平移對稱和反射對稱。許多內容元素和內容塊居中，並且均勻地成比例的分布在兩邊形成反射對稱。每一塊區域保持相同的尺寸擴展至整個頁麵。整個設計中兩種對稱方法的運用，使網站看起來即沉穩又專業。（圖09）

圖09

Regenerator

Regenerator是網站設計中使用反射對稱的極佳的例子。所有設計元素，從Logo到中心位置的圖像（機器人圖像）全部水平反射。這種相當簡潔的設計方案卻呈現出極好的效果。（圖10）

圖10

Beanstalk

總的來說，此設計保持居中並水平對稱。雖然圖像元素並不是完全的反射，但整體設計的平衡卻達到了這個效果。頁麵頂部和底部的元素布局呈水平變換，達到了更深層次的對稱的效果。（圖11）

圖11#p#e#

Pointless Corp

這個頁麵使用不對稱的設計手法。此種風格使頁麵看起來富有創意、天馬行空、視覺上有很大的衝擊力（同時也使用對稱手法以保持設計的一致性）。要學習各種形狀和流程的重複使用（這是平移對稱的展現）。（圖12）

圖12

The Idealists

可以看到，各個形狀間和內容區塊間均使用了平移對稱。主要元素采用居中反射對稱，並均勻地垂直分布於整個頁麵。需要學習的是，雖然個別的幾個設計元素增強了視覺效果，但在設計上它們依然保持對稱以達到平衡。頁麵左上角的黑色Logo是覆蓋上去的，為了達到視覺的平衡，右側的圖片采用更為複雜和色彩明亮的圖像。（圖13）

圖13

Typographisme

這個網站設計采用反射對稱，主要內容均勻的居中對齊。如果將頁麵對折，兩邊會相互吻合。除此之外，不對稱元素的使用更是創造了視覺層次，用以區分其它部分。例如，黃色TG郵戳狀圖像，就打破了單調的對稱設計。（圖14）

圖14

Coda Automotive

這個網站內容很多，因此平衡性和組織性是至關重要的。頁麵中大量使用了平移對稱設計，相同大小的形狀重複出現在不同的位置。為了強化視覺，也為了實用性的內容布局，各個方塊在尺寸上也不盡相同。不同尺寸、不同複雜度、不同顏色和密度的方塊混合，達到視覺的平衡。（圖15）

圖15#p#e#

Jessica Allen

在這個案例中，大量使用了不對稱的設計。除了一小部分使用平移對稱，Logo使用了反射對稱之外，全部采用不對稱手法。正如我們所看到的，不對稱同樣是一種高效的設計方法。（圖16）

圖16

Ambassadors for Life

在這裏，內容上同樣采用了大量的平移對稱，從內容塊的尺寸到內容塊周圍的附加圖像。頁麵Logo和Logo下方的圖形采用了反射對稱。這個設計中最有意思的是主體的照片部分，主體照片大小不一，引導用戶關注網站的專題報道。（圖17）

圖17 

QTRLY

這個網站的背景和導航菜單采用抽象設計。而主體部分是方塊的重複使用，為了達到平衡與結構的完整水平垂直重複。（圖18）

圖18

Elegant Seagulls

這是個對稱設計的案例。Logo、裝飾條、導航以及許多標題元素居中展示。底部的服務列表采用移動對稱設計。（圖19）

圖19#p#e#

Dark Sky

這個網頁設計幹淨、簡潔，采用網格布局區分出平移對稱和反射對稱。左右兩邊均有書籍圖片保持對稱。（圖20）

圖20 

Polecat

這是一個使用旋轉對稱的案例。在頁麵上部特性的描述上采用了一般性的旋轉對稱，下麵“我們的團隊”一欄中，實實在在的采用旋轉對稱。除此之外，雖然頁麵背景采用不對稱設計，主要欄目設置卻保持平衡。這個頁麵是不對稱和對稱的完美融合，是視覺趣味與平衡、比例與整體性的完美搭配。（圖21）

圖21

SVN 2 FTP

這個頁麵的整體布局和圖像設計特點是反射對稱。然而單獨來看，每個元素又是獨一無二的，不對稱的。例如：兩個小人舉起地球的圖片相對來說是對稱的，但是細節上又不完全一致。這種設計在達到平衡性和穩定性的同時，又能保持其獨特性和創造性。（圖22）

圖22

Forever Heavy

這又是一個以居中為主的設計，頁麵元素居中並水平反射。我們要學習的是，如何使用不對稱的元素讓整體性對稱布局更出彩。（圖23）

圖23

小結：

對稱是設計中非常有用的一種工具。對稱設計傳達出頁麵的平衡、安靜和穩定，同時表達了完整性、專業性和一致性。不對稱可以營造強烈的興趣點，顯示獨特和個性。總之，對稱和不對稱的運用能夠幫助設計者設計出更完美的作品。