很早之前我已打算寫這篇文章，一切要從 Google 搜尋開始說起：打開搜尋首頁，先來個很易懂的文字輸入框，但下一秒則完全相反：「右邊的空白畫面，搞甚麼啊？！」
我不是第一人有這疑問，不過習以為常也非好事。Google 身為網絡先驅，早就該砍掉這種失衡的版面。隨智能手機和平板電腦面世，加上最新技術 HTML5 和 CSS3，網頁版面起了前所未有的變化，而當中又不乏舊式版面的影子。若以舊準則衡量當今版面，視覺平衡又是否依舊？
影響視覺平衡的因素
以下所述的平衡是指視覺平衡 (Visual balance)，套用在網頁設計上就是把區塊、顏色、虛位等放在天秤上量重。當版面重心均稱安定，輕重濃淡得宜，則令人看得舒服；如果重心在中央，滑鼠 與中心點的平均距離會更短。或許有人會覺得「安定」與否很主觀，試想想，如果手機上的網頁內容全擠在一邊，誰也不會看得舒服，桌面版網頁也同理。要設計一 個 Responsive 的網頁，我認為有兩點需特別留意，不過因為沒有甚麼根據，所以佐證就免了：
- 不管版面如何分割，主內容或較大的區塊放在右邊會較左邊安定。這與人們普遍認為左輕右重有關，在漢字設計上也有同樣的說法。哪麼為何是左輕右重呢？也許是受到慣用手或由左至右的閱讀習慣影響。
- 現在人們用電腦時的姿勢層出不窮。假如用右手托腮，頭部向右側，右眼的視線便會偏低，所以視覺平衡點會在左上方；左手托腮，平衡點則在右上方，因此正確坐姿很重要，一般情況下視覺平衡點會在畫面中央稍上方。
版面重心在何處？
主內容位置
從 Web 1.0 到 Web 2.0，最常見莫過於左右二欄式設計，比如左邊選單，右邊主內容。以前流行固定版面，不需長時間捲視，所以視線和鼠標分別在選單和主內容兩邊走，可是現在流行「流動版面」和 Feed，捲視範圍大了，主區域可往下延伸，愈捲愈有，例如 Twitter 和 Facebook。這類版面的重心不再是兩邊走，而是集中在主內容一方。若主內容的位置擠在一邊，重心會偏移，視覺上也不平衡了，因此主區域的擺放位置非常重要，版面重心靠近中央會較易閱讀。
反面教材
Google Search 首當其衝，你確實長歪了！版面重心嚴重偏移，虛位太多，看起來不舒服之餘，也迫用戶將視線和鼠標放在左方。YouTube 好不了多少，右邊又是一片空白。
主區域和選單之闊度比
設計時需考慮框架是否合適，會否過闊或過窄，閱讀起來舒服與否。在極端情況下，如果選單欄太闊，主區塊太窄，即使兩欄置中，版面重心仍會偏向較闊那邊。 Google News 在版面分割上沒有出問題，但忽略了新聞標題的長度，使區塊太闊和右邊的空位太多；Wordpress Reader 的版面則比較好，採用常見的兩欄式設計，重心中間略偏左，但不構成閱讀障礙。
顏色之運用
色相與版面輕重沒有絕對關係，但高對比用色會看起來比較重，低對比用色則較輕。有效運用顏色能達到有如攝影中「前後景」的分隔效果，也能幫助平衡版面重心。 Tumblr 的主區域幾乎置中，並以高反差白色背景突顯；選單靠右，版面輕重權衡得宜。唯與選單相比，主區域有點窄，有點緊縮擠迫的感覺，放寬一點會較舒適。 Feedly 採三欄式設計，右欄的重要性很低，與主區域共用白色背景後，範圍變闊，略偏右，但非常安定。
版面重心即視覺平衡，本文雖以新式版面為題，但以上三點適用於任一設計範圍，重點是設計時需注意新式版型的重心和視線走向，左右兼顧。除了以上三點，Steven Bradley 提出的 19 項因素對視覺平衡頗有影響，詳情可參考他的網頁。
此文因 Google 搜尋版面壞了重心有感而發，稱不上教學或經驗之談，純粹個人見解，若有偏激之處還請見諒。撰文時不時憶起流行過的彩色邊框和無邊框版面，那時候設計網頁不需技術高，只要在素材網站左拼右拼即可建站，各有特色（還記得日本的素材之森嗎？）。當時我也是經營素材網站的一員，營運五年主打（會動會閃很可愛）Logo / banner 底圖和當時流行的網頁評鑑服務。直至今天我發現自己見證着各種版面和風格的冒起與消亡，感受尤深；現在我們努力達到技術上的標準，卻犧牲了網站的風格和特色，百花齊放的好年代總令人懷念。
Constance Tang 