【网页设计案例】打破一成不变的网页布局 破格网站设计需注意什麽

过去几年，一成不变的网页布局早已让人感到乏味，幸好网页设计技术的演进，让网页设计变得更加灵活弹性，也为设计师和工程师带来更广阔的挥洒空间。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主要刊登大人物的访谈，这个网站风格以经典的杂志风为主，每篇人物专访都用一个超大图片作为开头，占满整个萤幕空间。每篇文章页面的两侧各有按钮，左边按钮可到上一篇，右边按钮可到下一篇，中间栏位则是用於放专访内容，这巧妙的设计方便读者无需滑动到下方也能看到更多专访内容。

【最後】

虽然「破格」网站能为读者带来更多新鲜感，亦能加深用户对品牌的印象，但是我们也不能忘记，网页设计的重点是烘托「内容」，内容才是整个网站的核心之处，所以设计网页时需要把握好「度」，天马行空之余，别反客为主，夺走内容的风采。