次來跟大家談談網頁設計中的版面編排,小至部落格版面,大至企業公司網頁設計,其實我們生活中已經充斥了許多網頁編排的奧妙在裏頭,我們簡單列了幾項較常看到的網頁編排:

一、主欄置中、標題與頁尾固定型

weblayout1

欄置中型的特色就是保留視覺畫面超過2/3版面的區域做為主要的視覺形象,這樣的設計非常依賴官方提供的高解析度形象照片,或者是清晰漂亮的產品展示,最常見於女性群眾使用的服飾、時尚或婚紗珠寶類產業,除此之外,也推薦重視佳餚呈現的餐廳業者與飯店展業運用此型設計,如下面的案例:

2013-09-09_141639

▲キユーピー「パスタカフェ」のWEBデザイン

是你的餐廳已經擬定好料理風格和主打的菜色,近距離的佳餚照片一定不可或缺,如何讓坐在電腦前的人也能感到食指大動,這樣的網頁會有加分效果喔!

2013-09-09_154338

▲京都 舞鶴の観光情報「まいづる観光ネット」のWEBデザイン

論是觀光、美景或是旅遊產業,景色宜人的光景,也很適合採用這樣的網頁設計。

H&M - Designed by Hugo Albönete

▲H&M – Designed by Hugo Albönete

於女性心理喜愛觀賞精美的圖片,採用這樣的設計也能讓客戶眼睛為之一亮,前提是這樣的設計必須有定期更換形象圖片的素材產生,才能加深客人對於品牌的定期更新印象,尤以時尚、女性向網站最為明顯。

二、2欄固定、左側選單型

IMG_4997

台灣的網頁設計中,極大部分會採用2欄式的設計,無論是左欄選單還是右欄選單,這樣的網頁編排設計因為可將子選單獨立為一個區塊,再讓程式設計師去控制是否要顯示子選單,所以適用於選單類別較多的網頁,最典型的案例就是購物網站拍賣網站這一類的電子商務網站。

而內容欄位又可涵括形象、推薦商品、最新消息或廣告等曝光,屬於資訊與商品並重的設計方式,如以下案例:

2013-09-09_140919

▲日本無印良品

無印良品為例,由於販售的商品種類眾多,就可以將商品的類別逐一排列在左側,形成一個獨立的子選單,而非商品類的主選單就可以設計在標題列上固定顯示,無論切換到哪一頁,都可以看到主選單和商品子選單,非常便利。

2013-09-09_161411

▲iRead 灰熊愛讀書

2欄式排版還可變化為3欄式,最常見的線上書店網站也常用此種編排方式,增加商品和銷售的曝光成長。只是這樣的版面設計,相同的也容易讓人難以專心閱讀,注意力容易分散,筆者會建議一個螢幕畫面裏頭盡量不超過4個資訊區塊,像下方無印良品的設計,無論在16:9螢幕、16:10螢幕或4:3螢幕中,若不捲動滑鼠,基本上一個螢幕畫面不會顯示超過4個資訊區塊,是較佳的資訊呈現方式。

block

▲網頁資訊區塊示意圖

三、置中3欄式,標題列固定型

IMG_49962

種置中3欄式的網頁設計,非常普及在國外的網頁設計上,尤其是在CMS(Content Management System)平台上,不難發現國外的設計趨向使用這種置中的欄位分割方式,不僅擁有彈性的形象設計區塊,也能透過欄位清楚的指出服務項目,再透過其他分割欄位強化產品服務的圖像,儼然形成了一種大器且專業的第一印象,列舉以下案例:

2013-09-09_144158

▲日本星光商會官網

本的星光商會官網就是採用置中欄位分割的網頁設計方式,雖說其中混用了3欄和4欄的設計,不過設計的道理是相同的,運用了項目欄位的優點,點出了公司的主要服務項目,也增強了實績介紹的呈現,不知道你是否也有看過這樣的網頁設計呢?

2013-09-09_112058

▲Enfold – Designed by Kriesi

中三欄式的網頁設計方式,推薦運用在資訊科技產業專業服務業品牌企業網站上,會您下一次網站改版的另一個新選擇。

然,還有更多彈性的網頁設計方式存在著,我們即將在 【網站設計】淺談網頁版面設計編排 #下繼續與您分享新興的行動版網頁設計要點和版面編排,在這個智慧型裝置普遍的網路世界下,為您繼續介紹行動版網頁電腦版網頁的區別與注意事項。

Designer Kate L.C. Wang