網頁版面重心權衡

很早之前我已打算寫這篇文章,一切要從 Google 搜尋開始說起:打開搜尋首頁,先來個很易懂的文字輸入框,但下一秒則完全相反:「右邊的空白畫面,搞甚麼啊?!」

我不是第一人有這疑問,不過習以為常也非好事。Google 身為網絡先驅,早就該砍掉這種失衡的版面。隨智能手機和平板電腦面世,加上最新技術 HTML5 和 CSS3,網頁版面起了前所未有的變化,而當中又不乏舊式版面的影子。若以舊準則衡量當今版面,視覺平衡又是否依舊?

影響視覺平衡的因素

以下所述的平衡是指視覺平衡 (Visual balance),套用在網頁設計上就是把區塊、顏色、虛位等放在天秤上量重。當版面重心均稱安定,輕重濃淡得宜,則令人看得舒服;如果重心在中央,滑鼠 與中心點的平均距離會更短。或許有人會覺得「安定」與否很主觀,試想想,如果手機上的網頁內容全擠在一邊,誰也不會看得舒服,桌面版網頁也同理。要設計一 個 Responsive 的網頁,我認為有兩點需特別留意,不過因為沒有甚麼根據,所以佐證就免了:

  • 不管版面如何分割,主內容或較大的區塊放在右邊會較左邊安定。這與人們普遍認為左輕右重有關,在漢字設計上也有同樣的說法。哪麼為何是左輕右重呢?也許是受到慣用手或由左至右的閱讀習慣影響。
  • 現在人們用電腦時的姿勢層出不窮。假如用右手托腮,頭部向右側,右眼的視線便會偏低,所以視覺平衡點會在左上方;左手托腮,平衡點則在右上方,因此正確坐姿很重要,一般情況下視覺平衡點會在畫面中央稍上方。

版面重心在何處?

主內容位置

從 Web 1.0 到 Web 2.0,最常見莫過於左右二欄式設計,比如左邊選單,右邊主內容。以前流行固定版面,不需長時間捲視,所以視線和鼠標分別在選單和主內容兩邊走,可是現在流行「流動版面」和 Feed,捲視範圍大了,主區域可往下延伸,愈捲愈有,例如 Twitter 和 Facebook。這類版面的重心不再是兩邊走,而是集中在主內容一方。若主內容的位置擠在一邊,重心會偏移,視覺上也不平衡了,因此主區域的擺放位置非常重要,版面重心靠近中央會較易閱讀。

comparison

反面教材

Google Search 首當其衝,你確實長歪了!版面重心嚴重偏移,虛位太多,看起來不舒服之餘,也迫用戶將視線和鼠標放在左方。YouTube 好不了多少,右邊又是一片空白。

YouTube
YouTube
Google Search
Google Search

主區域和選單之闊度比

設計時需考慮框架是否合適,會否過闊或過窄,閱讀起來舒服與否。在極端情況下,如果選單欄太闊,主區塊太窄,即使兩欄置中,版面重心仍會偏向較闊那邊。 Google News 在版面分割上沒有出問題,但忽略了新聞標題的長度,使區塊太闊和右邊的空位太多;Wordpress Reader 的版面則比較好,採用常見的兩欄式設計,重心中間略偏左,但不構成閱讀障礙。

Google News
Google News
Wordpress Reader
WordPress Reader

顏色之運用

色相與版面輕重沒有絕對關係,但高對比用色會看起來比較重,低對比用色則較輕。有效運用顏色能達到有如攝影中「前後景」的分隔效果,也能幫助平衡版面重心。 Tumblr 的主區域幾乎置中,並以高反差白色背景突顯;選單靠右,版面輕重權衡得宜。唯與選單相比,主區域有點窄,有點緊縮擠迫的感覺,放寬一點會較舒適。 Feedly 採三欄式設計,右欄的重要性很低,與主區域共用白色背景後,範圍變闊,略偏右,但非常安定。

Feedly
Feedly
Tumblr
Tumblr

版面重心即視覺平衡,本文雖以新式版面為題,但以上三點適用於任一設計範圍,重點是設計時需注意新式版型的重心和視線走向,左右兼顧。除了以上三點,Steven Bradley 提出的 19 項因素對視覺平衡頗有影響,詳情可參考他的網頁。

此文因 Google 搜尋版面壞了重心有感而發,稱不上教學或經驗之談,純粹個人見解,若有偏激之處還請見諒。撰文時不時憶起流行過的彩色邊框和無邊框版面,那時候設計網頁不需技術高,只要在素材網站左拼右拼即可建站,各有特色(還記得日本的素材之森嗎?)。當時我也是經營素材網站的一員,營運五年主打(會動會閃很可愛)Logo / banner 底圖和當時流行的網頁評鑑服務。直至今天我發現自己見證着各種版面和風格的冒起與消亡,感受尤深;現在我們努力達到技術上的標準,卻犧牲了網站的風格和特色,百花齊放的好年代總令人懷念。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s