過去幾年，一成不變的網頁佈局早已讓人感到乏味，幸好網頁設計技術的演進，讓網頁設計變得更加靈活彈性，也為設計師和工程師帶來更廣闊的揮灑空間。Inspirr預計，今年將可看到更多「破格」網站，為我們帶來處處經營的驚奇的感官饗宴。

本文將通過一些網頁設計案例，為大家整理「破格」網站的設計特點和注意事項，有興趣的朋友不妨往下看!

什麼是「破格」網站設計?

網站設計的「格」，其實就是「Standard Content Design Model，簡稱SCDM」，即是我們習以為常的兩欄、三欄網頁佈局方式。從很多網頁設計案例中，不難發現這兩種排版佈局方法佔了絕大多數，這也導致我們經常有種錯覺——網頁佈局就只有這些排版佈局方法。

隨着CSS技術的出現，設計師們開始有了「為內容量身訂做排版設計」的能力，亦間接宣告SCDM的死亡。

SCDM 不死，也沒有逐漸凋零

事實上，到了今天我們依然看到SCDM充斥着各種網頁設計，甚至因為Blog、社群平台的興起，SCDM變得更加普遍。當然，也有可能是某些設計師為了節省時間，乾脆使用同一種模板去套用所有內容，畢竟像設計雜誌那樣針對內容而排版實在太花時間。

但不可否認的是，如今印刷品之所以比網站更加好讀，正是因為排版是針對內容來設計的，而不是用同一種佈局去套所有內容。

以Esquire雜誌為例：

▲ 網站版

▲ 雜誌版

Esquire網站採用三欄式佈局，從左到右分別是網站按鈕、文章、外部鏈接與廣告。網站版的主要內容(文字)被一大堆混雜資訊擠在中間，容易分散讀者在閱讀時的注意力，大幅降低介面的易讀性。

在看回雜誌版，傳統的印刷排版佈局再度發揮主要的設計作用：清晰的欄位佈局將文字和裝飾元素區分開來，對比明顯不容易混淆讀者的視線;文字具有一定呼吸空間，看起來非常舒適;兩欄文字版位依照人類閱讀習慣來佈局，讓讀者的眼睛可以自然地從上到下、從左到右掃視。總體來說，與網站版相比，雜誌版的易讀性會相對更高。

【網頁設計案例】破格網站設計需注意什麼

隨着網站用戶體驗的重要性越發明顯，很多企業網站逐漸打破慣有的「對稱」、「秩序」守則，讓網頁佈局變得更加精彩。以下是Inspirr為大家準備的例子，讓大家能領略到「破格」網站的魅力。

網頁設計案例一：I Love Typography

網頁設計案例

I Love Typography不僅提供很多字型排版方面的資訊，在各種文章中也有不同的版型呈現，而不是萬年不變的SCDM。頁面預設字型大小適中，背景與文字對比明顯，搭配雙欄設計可以讓眼睛快速掃描，讀得很舒服。

網頁設計案例二：Jason Santa Maria

網頁設計案例

Jason Santa Maria最厲害的地方就是排版根據內容來設計，而非用內容屈就排版。就以網站的「其他文章」為例，三欄設計能讓讀者快速找到他們所需的內容;客製化版型附上截圖，也為介面設計帶來更多神奇的效果。

網頁設計案例三：Craig Mod

網頁設計案例

Craig Mod的字體設計雖然偏小，但欄位間距很好，給予文字足夠的呼吸空間。另外，副標題的佈局有助於分割欄位空間，讓讀者可以快速掃視頁面內容。

網頁設計案例四：The Great Discontent

網頁設計案例

The Great Discontent主要刊登大人物的訪談，這個網站風格以經典的雜誌風為主，每篇人物專訪都用一個超大圖片作為開頭，佔滿整個螢幕空間。每篇文章頁面的兩側各有按鈕，左邊按鈕可到上一篇，右邊按鈕可到下一篇，中間欄位則是用於放專訪內容，這巧妙的設計方便讀者無需滑動到下方也能看到更多專訪內容。

【最後】

雖然「破格」網站能為讀者帶來更多新鮮感，亦能加深用戶對品牌的印象，但是我們也不能忘記，網頁設計的重點是烘托「內容」，內容才是整個網站的核心之處，所以設計網頁時需要把握好「度」，天馬行空之餘，別反客為主，奪走內容的風采。