Grid System — Symmetric & Asymmetric

對稱 & 不對稱

今天來聊聊在排版上另一個要注意的是 Symmetric (對稱) 與 Asymmetric (不對稱)。Symmetric (對稱) 是幾何形狀,可以說是另一邊鏡射。Asymmetric (不對稱) 則是由兩個不相似的形狀或物體組合而成,但是擁有相同視覺上的重量而產生的吸引力,不僅也讓人想多看兩眼。就好比一公斤的棉花與一公斤的鉛塊分別放在天秤的兩端,但又產生平衡狀態。

Asymmetric

對稱平衡與不對稱平衡在我們的日常生活中也常常看到與運用。
例如自然界的花、草、樹、木、我們所用的符號與 Logo 的設計、等等還有很多 ; 我們人類本身就是一個對稱平衡。

Symmetric

攝影其實也常常運用到對稱與非對稱的技巧。

Symmetric & Asymmetric

但這跟排版有什麼關係? 以 Graphic Design (平面設計) 來說,左邊那張會給你有平衡且閱讀上較舒適。但反觀右邊那張海報,雖然左邊留白很多,但還是會感覺右邊比較重,整體視覺上的呈現讓人感到不舒服,好像哪兒怪怪的但又說不上來。

source from: https://hellosanta-mis.hackpad.com/ep/pad/static/cY5eOG2Rhsg

Symmetric (對稱) 與 Asymmetric (不對稱) 又跟網站的排版有什麼關係? 拿現在流型的 12 Column Grid 來說,只有一個 column 時是 940px,在不對稱裡被切分為 60px & 860px、140px & 780px、220px & 700px、300px & 620px、380px & 540px,一直到最後的對稱 460px & 460px 剛好區分成 2 個 column。

下圖,左手邊是 IAM 網站,右手邊是 Wireframe。左邊 IMA 的網站相較右邊的 Wireframe 來說確實是比較不對稱。因為 IMA 的 Menu 佔了 2 columns,而右邊廣告的部份佔了 3 columns。比較理想的狀況是改成 1. 讓 Menu 也佔 3 columns 或 2. 讓廣告佔 2 columns。

在排版上也不一定對稱就是美,也有不對稱的網站排版…例如: Microsoft Windows & Azure,早期 Chrome Web Store 也是一種不對稱的排版,不過後來 Chrome Web Store 改版面哩。

右手邊 Asymmetrical Balance 的範例讓我想到 G+ & Pinterest 瀑布流的閱讀網站方式。

好啦,這次說的有點多,希望有幫助到大家在排版上需要注意的地方,並且對於排版多了些了解與認識 : D
對此次主題有興趣的朋友還可以多找找是否還有更多不對稱的排版與網站,大家交流 :D

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.