引用自http://nowills.blogspot.tw/2010/07/layout.html
（本篇文章內容已於2010年7月8號做為教育訓練使用，應該算是演講稿，不過呈現在部落格上將會做另外詮飾，對於問答的部份也一律省略，但是大至上內容不會改變太多，講述時間含發問約40分鐘，如果您在閱讀的過程中有任何問題也歡迎留言詢問。）
當我們打開瀏覽器映入眼簾的可能不外乎是YAHOO!奇摩首頁，當然也有其他選項，不過我們就以奇摩首頁來當個開始。下圖左邊是一般打開瀏覽器時我們所看到的畫面，那右邊呢？其實右邊就是網頁設計師眼中的排版與規劃的部份。
你可以很明確的看到右邊有四個區塊，通常我都把單位稱作欄，相信很多設計師也是這樣，外國設計師稱為wrapper，翻譯是包裝、外皮，這樣的一個區塊方式，已經算是現今Web 2.0 模式網站常見的畫面，他呈現出一塊一塊的區塊，不光是在排版上比較有條理，就連在網頁設計製作的過程也變得非常有條理，而當我們把後面的YAHOO!奇摩首頁拿掉，他就僅僅只剩下四個紅色框框，我們先不管內容怎樣，其實四個框框代表的就是四行DIV的HTML Code，這部份稍候會在提到。
我們剛提到YAHOO!奇摩首頁，那是已經有畫面的網頁了，算是後面的結果了，人家説因果因果，有因才有果，我們現在就從因開始看，這個因就是網站形成的原因，也就是網站存在的目的，依照不同的目的會有不同的取向，在這中間彼此的討論就會經過一個Paper Prototype的過程，也就是網站企劃發揮他最大效能的階段，他需要產出網站企劃書，讓設計師明白整體網站架構與大致上的規劃，這些過程對網頁設計流程來說都算是前期規劃，以後有機會在細說這個部份，當規劃完成後就近入了設計階段，也是屬於網頁設計師的曼妙舞台。
對於網頁設計師的設計過程我想因人而異，絕對沒有一個標準流程可以依循，但是確有一些準則可以參考，對於網頁設計來說，排版在設計過程上算是佔有非常重大比例，每一頁網頁在產生的過程中會有許多設計與細節，在設計方面每位設計師都有他自己的一套方法，但是在細節上常常會是許多設計師為了求快或者不知不覺中就忽略的細項，那對於這些細項有沒有一個快速簡單的工具可以作為協助？其實是有的，打從瀏覽器解析度到每欄的排列，其實都是有一個簡單的輔助工具可以來使用的，這個工具就叫做Guideline，中文翻譯為指引，通常稱呼為格線。其實格線沒有一定的標準也沒有一個統一的規定，一些國際網站或者國內知名網站，較注重的都會設定一套統一的格線標準，確保網站不管在任何情況下，都有一個統一的視覺舒暢度，不會因為國家或頻道切換就覺得文字變得擁擠、標題變得不清的情況，在這裡我要推薦一個我個人非常喜歡喜用的格線系統，叫做960 Grid System。
960 Grid System為什麼是960，不是970、980? 原因很簡單，因為現在目前大部份的使用者解析度還是1024X768，有些人喜歡使用書籤列側欄，或者桌面上有安裝Google 桌面等這些側欄輔助工具，在這樣的情況下使用者的解析度勢必會小於1024，再加上一般網頁設計的背景並不是沒有任何存在的意義，所以保留一些範圍讓背景顯露出來，對整體網頁的設計其實一個很棒的襯托。經過測試與研究，最後他們決定以960像素作為一個標準，制定出960 Grid System，設計出12欄與16欄格線，並提供Fireworks、Flash、InDesign、GIMP、Inkscape、Illustrator、OmniGraffle、Photoshop、Visio, Exp Design樣板可以直接下載使用，甚至還有一份PDF版本可以直接列印並手繪上去，非常方便也非常好用。
既然有了格線系統，當然就要照著格線來做設計，它可以讓你整體的排版呈現的更有調理，不過有個地方需要注意，那就是960 Grid System他只有做直向的格線，對於橫向也請設計師們不要忽略，這也是非常重要的一個細節項目，對於每個頁面的排版因為文字段落有長有短，這個比較難做出一個橫向格線系統，所以務必請設計師們可以注意到這個點。另外對於破格設計的部份，也希望設計師可以照著格線系統來跑，你可以跨很多欄做設計，但是請不要超過邊緣欄位，或者剛好卡在兩欄中間，這其實都不是很好。
現在讓我們來看看排版規劃的部份，上圖是一個單欄式頁面的呈現方式，我們一律都先不考慮內容的部份，就從最簡單的外框來看就好，就如同一開始有提到三個區塊分別就是代表三行DIV HTML Code，跟以前網頁設計師使用表格table切板的那段時間比起來，真的是精簡非常多，也顯得非常容易好懂，讓我們來比較一下過去與現在的寫法到底落差有多大，從下圖就可以明顯的比較出來。
我沒有辦法告訴你左邊有幾行，但是左右兩邊比較起來應該是非常顯而易見，右邊明顯比左邊少很多字母與符號，就是因為右邊這樣的寫法讓頁面的HTML顯得非常簡單易懂，所以現今的網頁設計師漸漸都採用右邊的模式，國外的網頁設計師已經採用這種寫法行之多年了，但是台灣依然還是有許多網頁設計師採用左邊的寫法，這樣的寫法不但在撰寫上需要花費較多的時間，而且維護起來也顯得非常不容易，很容易就發生拿掉一個表格table就導致版面毀損，不管是日後自我維護或是他人維護都需要花費相較右邊模式數倍的時間，更別說需要與程式設計師合作或者team work 設計大型網站所產生的問題了。
而目前網頁設計師還有一個非常有利的工具叫做CSS，它可以與HTML做搭配，從文字到背景亦或是icon圖示定義等等，都可以做到一個彈性非常大的撰寫方式，透過CSS裡的ID與Class，適度的規劃是可以做到頁面修改不須變動任何的HTML，僅需修改CSS文件即可，這對不懂程式的網頁設計師來說是非常大的福音，你不必在擔心害怕因為變動頁面上的某些圖案或排列就導致程式無法執行的惡夢，下圖就是英國廣播公司BBS網站所致定的一些元件組部份，因為BBC有大量的新聞與資訊，所以各個頻道都有屬於自己的顏色標示，透過CSS的制定可以設定出多款的元件組，這樣的一份元件組可以交給任何一個設計師使用，不會產生因為不同設計師導致產出的頻道顏色有色差或色塊粗細不一的窘境。
使用HTML+CSS的製作方式好處有很多，舉凡頁面一致性、元件重覆利用率提高、提升SEO效果等等，好處可以說是說不盡，那壞處呢？壞處可以說都是因為瀏覽器惹的禍，現今的瀏覽器並沒有一個統一標準，所以同樣一個CSS寫法在每個瀏覽器呈現的畫面又會多少有些差異，像是表單的呈現，每個瀏覽器都有自己的樣子，更別說到跨作業系統了！為了減少這樣的「環境差異「，通常在製定頁面CSS的第一個步驟就是先將每個瀏覽器的預設值通通歸零，因為這個部份的CSS是差不多的，所以像是YAHOO!就有在YUI中釋出CSS Reset文件，而有些網頁設計師也有會有自己的一套寫法，我個人曾經使用過YUI的CSS Reset方式，但是使用起來沒有我自己制定的順手，所以目前我還是採用自己的一套CSS Reset方式，有機會在跟各位詳細說明這個部份。
以上就是本次教育訓練的內容，希望對於各單位的夥伴們都可以有一些幫助，有任何問題也歡迎與我討論。
原也網頁設計、網站規劃、網站行銷。
留言列表
