Rm 4+5

排版的傳承:柵格設計

leave a comment »

 

轉載自: http://ka-yue.com/blog/web-composing

網頁與柵格計

我曾提及過,一個網頁設計好看與否,排版至關重要。排版是為了以最合適的方法放置和呈現各種資訊。排版由來已久,並一直用於印刷品上。但對於網頁這一新媒體,很多人都忽略了排版對其的重要,所以很多網頁看起來多少有點亂的感覺,究其原因,大都是因為沒注意「柵格」所致。


柵格是協助設計師排版的一種技法,能夠確保頁面整整齊齊,井井有條。所有印刷品之中,報紙的版式設計尤其著重排版,因為每頁都要處理大量文字,排版直接影 響報紙的可讀性。為此我特地找來 The News York Times 的截圖,你可以清楚看到由左至右四條縱向主軸,這些就是柵格。即使左上方的標題橫跨兩欄,依然沒有打破柵格。再看看其網站的柵格:

網頁排版計

你會發現網站跟報紙的版式有點異曲同工之妙。因為附合柵格的設計,使網站看上去整齊得很。縱使資訊很多,仍沒造成混亂之感。究竟柵格是怎樣起了整齊版面的作用呢?

其實,只要避免讓元素打破柵格,網站就會整齊得多。你會發現,整個頁面沒有任何元素打破縱線,所以頁面一整都井井有條。縱使底部有些冒出縱線的圖 片,但其依然和其他部份隱約有點聯繫。而且底部其實可以看作一個橫向的整體,所以不會做成混亂的感覺。甚麼? 我偏心? 沒有啦,看看下面這幅圖你就會明白了:

網頁計和排版

認得出這是個圓吧。為甚麼不是一條條間線? 因為你的大腦會自動補完缺失的部份,幫你組成一個圓。同理,我們在設計網頁的時候,要保證相關的內容要看上去像一組,頁面才不會支離破碎。注意喔,不是你在一堆內容外面畫個 Box 它們就會變成一組的。雖然有幫助,但更好的方法是留意細節,例如元素之間的間距、背景色等等。

是不是這樣我們就要死守這些柵格呢? 不,太整齊的網頁反而會顯得沉悶。一些「破壞性創新」可以成為網頁的特點,但一不可再。過份強調的結果不是失去重點就是令文章難以閱讀。例如我就很反感下面這些充滿特式的排版:

網頁計-突破

當然,我不是說 NY Times 的網頁無械可擊。你應該也發現網頁右上方其實頗凌亂的。我只能說,都是廣告的錯。如果 NY Times 能規範一下廣告的尺寸,頁面將會更加美好。值得一提的是,就是從來沒有網站會花人力去像校正報紙般校正網頁。 (報紙一般在完成排版後會校正多次才印刷。) 相信 NY Times 是少數會校正網頁的公司之一。

再貼個反面例字給大家參照一下:

Tvb網頁計

Tvb.com 首頁的內容比 NY Times 少一半不止,柵格線卻不見得少。最主要是色塊又多又濃… 原本標題應該跟內容融為一體的,但是顏色這麼濃,還融個鬼啊。標題沒必要無需過份強調,讓人看著就覺得辛苦。
參考資料:

Written by chin7

十二月 7, 2007 於 4:33 下午

張貼於designs

Tagged with ,

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

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

Twitter picture

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

Facebook照片

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

Google+ photo

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

連結到 %s

%d 位部落客按了讚: