在確認過網站的架構及主要視覺風格之後,接下來就是要開始思考網頁設計的版面配置。網頁設計的版面配置 (也可以說版型規劃) 有幾項重點如下:
1. 運用視覺,強調重點
每一個網站,最重要的都是首頁;每一個首頁,最重要的就是最上方的部分,我們稱之為 "Header" ,因為這個地方是每一位瀏覽者打開網頁後,第一眼所看到的畫面,所以它的設計及規劃自然是整個網站的首要重點。
Header 中通常會有大篇幅的橫幅,有的是圖片,有的是動畫,我們稱之為 "Banner" ,也就是俗稱的『網站主視覺』。隨著 HTML5 及 CSS3 的日益普及,傳統的 Flash 動畫已經漸漸被取代,愈來愈多的網站使用大篇幅精緻圖片來強調企業或品牌的重點。因為圖片並不像 Flash 動畫那樣需要較長的等待讀取時間。例如 Apple 的首頁,一打開就立刻看到非常大面積的橫幅,圖片寬度達到 980px ,讓瀏覽者一看就知道這是目前 Apple 正在主打的熱門商品。
所以,把整個企業或品牌的重點,運用大篇幅的精美圖片呈現在 Header 或 Banner 中,就是網頁設計版型配置的第一個重點。
2. 掌握架構,落實配置
每個網站都會有不同的需求,有些公司需要線上購物來販售商品,有些公司則需要電子相簿來呈現大量的商品照片,這就是為什麼在網站開始設計之前,都要先做好網站架構規劃。
因此,在開始進行版面配置之前,設計師一定要全盤掌握網站的基本架構,了解這個網站會有哪些功能項目,如此一來,才能知道主選單 (Menu) 該放哪些項目?網頁主體 (Content) 該有左欄 (Left) 還是右欄 (Right) ?網頁底部 (Footer) 要不要有版權宣告或聯絡資訊?最新消息要顯示 5 則還是 10 則?首頁要有主打商品還是人氣商品?要放幾筆?廣告連結要放在左邊還是下面?要放幾則廣告?
掌握這些版面配置的重點後,設計師可以先在草稿上勾勒出版型的初稿,以方便接下來的其他版型設計處理。
3. 統一色彩,營造整體
一家公司的形象,最重要的就是企業識別系統(CIS),一個網站也是,最重要的就是色彩是否達到協調性與一致性。
選擇色彩,首要考量當然就是公司或品牌的主要顏色,例如 Facebook 的藍色,法拉利的紅色。除了主色系之外,也要謹慎選擇配色,決定色彩之後,不論瀏覽者切換到哪一個頁面,整個網站的風格都具有一致性,如此一來,網站除了能清楚的表達企業或品牌的精神之外,也能展現其獨特性,提高企業的識別度。
4. 主次分明,簡潔有力
同樣是標題,重要性不同,文字大小就必須不同;同樣是圖片,重要性不同,圖片尺寸也就不同。
例如本周主打商品,就要用比較多的篇幅來介紹,文字大一些,圖片更精美一些,其他的次要商品,就使用較小的文字及圖片,乾淨整齊的排列即可。較重要的訊息,除了文字圖片大小有差異之外,也可以使用顏色來區別,例如在十筆文章標題中,可以把較重要的標題用紅色來表示,並且放在第一筆。除此之外,所有的文字及圖片,都要有適當的間距及留白,才能使畫面閱讀起來輕鬆不費力。
把最重要的 (也是您最優先想讓客戶知道的) 訊息凸顯出來,主次分明,排版整齊,就能達到成功的網頁設計版型規劃。
5. 善用圖片,吸引目光
一般人閱讀網頁的習慣,通常是由上到下,由左到右,但是當遇到圖片時,就會呈現跳躍式的閱讀,也就是說,人們會先看圖片,看到有興趣的,才會繼續看文字。所以,適當的在必要的地方放置圖片,才能更吸引住閱讀者的目光。
一張網頁中,如果都是文字,那閱讀起來肯定枯燥無味,但如果都是圖片,那內容又太過空洞,因此在產品列表中,最好有至少一張的圖片,搭配產品簡介文字,讓閱讀者可以迅速的瀏覽圖片,看到有興趣的產品時,就能再看看它的文字介紹,進而點進去查看產品的詳細內容。
因此,一個成功的網頁設計版型規劃,就是能夠達到圖文並茂、相互呼應的境界。