淺談網頁版面設計編排
這次來跟大家談談網頁設計中的版面編排，小至部落格版面，大至企業公司網頁設計，其實我們生活中已經充斥了許多網頁編排的奧妙在裏頭，我們簡單列了幾項較常看到的網頁編排：
主欄置中型的特色就是保留視覺畫面超過2/3版面的區域做為主要的視覺形象，這樣的設計非常依賴官方提供的高解析度形象照片，或者是清晰漂亮的產品展示，最常見於女性群眾使用的服飾、時尚或婚紗珠寶類產業，除此之外，也推薦重視佳餚呈現的餐廳業者與飯店展業運用此型設計，如下面的案例：
▲ キユーピー「パスタカフェ」のWEBデザイン
若是你的餐廳已經擬定好料理風格和主打的菜色，近距離的佳餚照片一定不可或缺，如何讓坐在電腦前的人也能感到食指大動，這樣的網頁會有加分效果喔！
▲ 京都 舞鶴の観光情報「まいづる観光ネット」のWEBデザイン
無論是觀光、美景或是旅遊產業，景色宜人的光景，也很適合採用這樣的網頁設計。
▲ H&M – Designed by Hugo Albönete
由於女性心理喜愛觀賞精美的圖片，採用這樣的設計也能讓客戶眼睛為之一亮，前提是這樣的設計必須有定期更換形象圖片的素材產生，才能加深客人對於品牌的定期更新印象，尤以時尚、女性向網站最為明顯。
在台灣的網頁設計中，極大部分會採用2欄式的設計，無論是左欄選單還是右欄選單，這樣的網頁編排設計因為可將子選單獨立為一個區塊，再讓程式設計師去控制是否要顯示子選單，所以適用於選單類別較多的網頁，最典型的案例就是購物網站、拍賣網站這一類的電子商務網站。
而內容欄位又可涵括形象、推薦商品、最新消息或廣告等曝光，屬於資訊與商品並重的設計方式，如以下案例：
▲ 日本無印良品
以無印良品為例，由於販售的商品種類眾多，就可以將商品的類別逐一排列在左側，形成一個獨立的子選單，而非商品類的主選單就可以設計在標題列上固定顯示，無論切換到哪一頁，都可以看到主選單和商品子選單，非常便利。
▲ iRead 灰熊愛讀書
2欄式排版還可變化為3欄式，最常見的線上書店網站也常用此種編排方式，增加商品和銷售的曝光成長。只是這樣的版面設計，相同的也容易讓人難以專心閱讀，注意力容易分散，筆者會建議一個螢幕畫面裏頭盡量不超過4個資訊區塊，像下方無印良品的設計，無論在16:9螢幕、16:10螢幕或4:3螢幕中，若不捲動滑鼠，基本上一個螢幕畫面不會顯示超過4個資訊區塊，是較佳的資訊呈現方式。
▲ 網頁資訊區塊示意圖
這種置中3欄式的網頁設計，非常普及在國外的網頁設計上，尤其是在CMS(Content Management System)平台上，不難發現國外的設計趨向使用這種置中的欄位分割方式，不僅擁有彈性的形象設計區塊，也能透過欄位清楚的指出服務項目，再透過其他分割欄位強化產品服務的圖像，儼然形成了一種大器且專業的第一印象，列舉以下案例：
▲ 日本星光商會官網
日本的星光商會官網就是採用置中欄位分割的網頁設計方式，雖說其中混用了3欄和4欄的設計，不過設計的道理是相同的，運用了項目欄位的優點，點出了公司的主要服務項目，也增強了實績介紹的呈現，不知道你是否也有看過這樣的網頁設計呢？
▲ Enfold – Designed by Kriesi
置中三欄式的網頁設計方式，推薦運用在資訊科技產業、專業服務業與品牌企業網站上，會是您下一次網站改版的另一個新選擇。
