网页框架

和每行字数等具体情况分析，五分栏结构已经是最大
分栏数了。五分栏设计本身已经很特殊，网络上非常 少见。图1.8所示是笔者曾设计的标准五分栏框架的页
面。由于方块汉字略大于西方字母，因而中文网站能
使用五分栏结构的情况更加少了。
网页框架
图1.8 标准五分栏· Home2v.com
网页框架
图1.9 五分栏· 韩国短信商业站点
网页框架
图1.3 德国WM Team公司站点
网页框架
1.1.2 分栏式结构
分栏式结构是最常见的网页框架，也可以称为竖 分栏。这是一种超过一屏半，把页面从上到下分割为 几列构架的设计结构，类似于新浪(sina.com.cn)的页面 骨架设计(见图1.4)。
网页框架
图1.4 sina.com.cn分栏式框架结构
网页框架
图1.21为没有明显的分栏结构。它表面看似杂乱， 实际上却是用很规则的方块来编排页面信息的。动静 结合的页面，鬼魅而血腥，给我们带来摇滚乐最直接 的震撼。 图1.22为小巧的Flash站点，区域分割比例恰到好
处，大方轻快。虽使用了明确的区域划分，却没有局
限作品的风格，作品中依然体现出更多的时尚感和数 码感。由此看来，采用区域排版的页面伸缩性很好，
网页框架
图1.22 既属于分栏式结构又属于区域编排式结构
网页框架
图1.23 特色的区域编排结构类站点(一)
网页框架
图1.24 特色的区域编排结构类站点(二)
网页框架
图1.25 特色的区域编排结构类站点(三)
网页框架
图1.26 特色的区域编排结 构类站点(四)
网页框架
总体来说，分栏式和区域编排没有严格的界限。 只要能设计出风格独特的网页，就是好的框架。在进
你会注意到在变化了的二分栏或三Leabharlann Baidu栏骨架中会出现
小的四分栏式结构。图1.13、图1.14和图1.15展示了三 种不同的分栏结构。
网页框架
图1.13 右栏宽式三分栏骨架
网页框架
图1.14 四分栏结构设计
网页框架
图1.15 韩国的Web.st内嵌五分栏式结构骨架设计
网页框架
图1.11中的Ⅴ是一些特殊的分栏结构。 在人们都选用开放式的分栏结构的同时，往往又 需要在相同的框架结构中设计出不同效果来，以致于 看起来“四不像”的框架结构越来越多。栏宽窄不同， 底色不同，小区域划分不同，位置不同，排列组合后
网页框架
1.1.3 分栏式结构的变化 在新浪网二分栏框架的解析图(图1.10)上，我们可
以清楚地看到右列被分成了多个小的区域，这些利用
列宽而划分出的多个小区域，可以配合网站内容放置 不同的信息和功能区。并且能灵活地处理页面元素，
以活跃页面气氛。
网页框架
图1.10 形式可爱的二分栏页面设计
网页框架
适用于更广泛的不同信息类型的网站形式。图1.23显示
的是一种十分具有特色的区域编排结构类站点。
网页框架
图1.24中的页面使用了插图、色彩作为分割的界
限，艺术味道十足，是韩国十分有名的艺术网站。 很少见到如图1.25中页面插图跨越了几个分割区域 的情况。插图的运用使得页面显得更具有张力感和空 间感，开阔大气。 图1.26中的页面较长，信息量很大，插图位置明显， 难以忽略。新闻区的长度不够，则在页面内使用滚动 条，解决了页面空间问题，同时能够快速、便捷地查
图1.29 Presstube.com
网页框架
图1.30 蓝色虎牙· Huya.net
网页框架
图1.31 INFRONT
网页框架
1.3.3 静态页面设计第二类
图1.32中的非主流的网页设计即是非规律静态网 页第二类。 通常在设计分栏式或区域排版风格的网页时，设 计师们十分介意浏览器出现横向滚动条。一方面只带
所谓通栏，顾名思义，从上到下一通到底，也可 以称为一栏。这种结构一般用于显示信息内容、注册 信息页面等，是竖分栏式骨架结构的特殊情况。
网页框架
图1.5 Linkdup.com三分栏框架结构
网页框架
图1.6 最典型的四分栏框架结构
网页框架
图1.7 通栏· 注册信息页面
网页框架
竖分栏数越多，列宽越窄，一行排列的文字越少， 显得过于拥挤，不易于阅读。根据屏幕分辨率、字号
网页框架
分栏式结构是竖长方形页面的框架。 图1.4所示的新浪网骨架结构，从上到下被分成两
列，我们称之为二分栏结构。最常见的分栏式骨架结
构，还有如Linkdup.com的三分栏(见图1.5)，以及国外 常见的四分栏式结构(见图1.6)。另外还有较为特殊的
通栏(见图1.7)和五分栏(见图1.8、图1.9)。
的情况是右窄左宽，导航居右，但非主流。
网页框架
图1.11 分栏布局情况
网页框架
Ⅲ是以三分栏作为基础结构的。三分栏属于开放式 结构，给人的感觉十分大气，适用于门户和流量大的 网站。常规内容设置是：导航横排在页面上部，左右 两栏为功能区和附加信息区。中栏为主要信息显示区 和重要资料显示区。根据信息源，将中栏进行一些小
图片式导航条，确定了活泼俏皮的个人风格。此站属 于个人主页的典范。
网页框架
如图1.31所示的网页设计，在高雅的淡色背景上， 搭配小面积的插图，而将文字信息集中在一起，导航 和条目信息分居两旁，有张有弛，视觉效果不亚于图 1.28中的黑色背景的网页。
网页框架
图1.28 Seoleuna.com
网页框架
网页框架
图1.33 横向滚动加长页面
网页框架
1.3.4 静态页面设计第三类 袖珍型的页面设计，同样适用于信息量少的网站。 商业网站也可以设计得很高雅，只是可选择的框 架并不多。而个人主页五花八门，甚至一些小信息的 网站，设计起来只占整个浏览器页面的一个小块区域，
可以衍生出无穷无尽的变化，给网站带来无穷的魅力
和新的生命力。 图1.16所示的网页结构，是在通栏里内嵌小二分栏，
使得页面色彩鲜明，极活泼又大气。
网页框架
图1.17是典型的二分栏，但是却没有明显的界限，
导航区和信息区自然分割为两栏，使页面既简洁大方、 色彩搭配合理，又不失独特的风韵。 图1.18是别致的三分栏式结构骨架的页面设计。信 息量少却运用了开放型的三分栏骨架，利用背景颜色、 图案互补，把文字留白区填充完整，使页面既不显得 空荡，反而更显特色。
网页框架
三类框架结构各有特色，分别适用于不同信息类 型的网站。运用得当，蓬荜生辉。其中分栏式结构是
运用最为广泛的页面结构，它适用于门户、商业、个
人等不同信息类别的网站设计。分栏式结构应用最为 普遍，也是网页设计发展的最初形态。我们可以从分
栏式结构着手了解网页框架。
网页框架
图1.2 多变化Flash新媒体设计
一个滚动键的鼠标不能滚动横向页面，在鼠标操作上
多有不便；另一方面，在商业类或门户类站点中出现 滚动条，是十分不美观的。出现此类情况，人们会认
为是设计师或制作者由于粗心而造成的制作疏漏，有
点大煞风景的味道。
网页框架
图1.32 横向滚动加长页面
网页框架
一旦横向能够滚动两屏或两屏以上(如图1.33所示)， 特殊怪异的个性美就展现出来了。信息平铺到该页， 无所谓导航的概念，其内页信息都是以弹出窗口的形 式连接。横向滚动的同时，好似观看一场展览。沿着 墙壁一路过去，滋味别样。
图1.27 竖四分栏的分栏式结构骨架和横四分栏区域编排
网页框架
1.3 非规律框架设计
1.3.1 非规律框架设计 分栏式结构和区域编排以外的网页框架归属为一 类，即非规律框架。非规律框架设计真的没有规律吗？ 也不尽然。非规律框架按整体效果可先分为动态网页 和静态网页。
网页框架
其中，静态网页主要有以下三种情况： 第一类：由无框架式的整张图片分割生成的网页。
分栏变化，以确立网站特色。色彩分布则主要是左右
两栏色彩深一些，而中栏为白色等常见情况。
网页框架
图1.12 Ya.com
网页框架
Ⅳ中的前两个是四分栏的结构框架，后两个是五
分栏的结构框架。 四分栏式结构会使得页面相对很拥挤，给人一种 网站的信息量很大的感觉。信息储备少的站点采用这 种框架，可以在视觉感观上调整信息量少的不足。 由于英文字比中文方块汉字占用空间小，因而四 分栏在国外比较多见。作为突破性的设计，应该有一 些尝试，也许会发现它的妙用之处。如果细心观察，
行设计时，不要给自己太多的条条框框和先入为主的
思想，它们会妨碍思路的开阔和创意的展开。 图1.27中的两个页面，一个是无变化的分栏式骨架
结构，一个是无分割的区域排版骨架结构，两种最典
型的骨架结构，各有其妙用之处。浏览过那么多精致 的页面后，对比这两个页面设计，或多或少有一些返 璞归真的感觉。
网页框架
第二类：横向页面很长，有些怪异的网页。
第三类：整个信息区很小的袖珍型网站。
网页框架
1.3.2 静态页面设计第一类 如果把静态的网页设计归为平面设计的一种，则
应把网页当作平面出版物创意设计，信息与背景画面
融为一体，没有清晰的界限区分，导航、信息区等属 于网页本身的特征。设计好的网页图片采取分割整张
图片生成网页的形式去制作。此种情况就是非规律框
在竖分栏内增加多个小分区的方式，可以使分栏 式结构产生多种变化形式，打破分栏式的死板架构， 加强了分栏式结构的应变能力。 根据常见的分栏式布局，我们绘制了一张简单变 化结构图(见图1.11)。Ⅰ和Ⅱ以二分栏作为基础结构。
其中，Ⅱ是Logo和导航处在页面下方的情况，这种结
构也是很普遍的，可以选用Frame制作。二分栏结构一 般是左窄右宽，导航居左，底色加重表示强调。也有
网页框架
分栏式结构的页面容易过长，过长的页面载入非常 慢，从而失去分栏式的优越性。为了不给访客带来太大 的麻烦，应尽量保证页面的长度在两屏到三屏为佳。 笔者在图1.11中绘制的网页框架是普通而有限的。 看过更多优秀的网页结构后，你将会有一个全新的思路
和方向。骨架的设计好像生物圈的物种突变，为了寻找
找短期过往新闻。
网页框架
小区域信息区疏密得当，给人的感觉是大气，条理清 晰。其实，国内的门户站点，也应该有一些突破，完 全可以效仿这个站，尝试使用区域排版的网页框架， 依旧可以设计开放式页面，给人耳目一新的感觉。
网页框架
图1.20 标准区域分布的骨架结构
网页框架
图1.21 浓烈的气息，精彩的摇滚站点
非商业网页设计构架的首选。
网页框架
非规律的页面排版，主要是指无框架页面设计(见
图1.1)以及多变化Flash新媒体设计(见图1.2)。由于这两 种排版形式变化多，不好把握，而且个性化极强(见图 1.3)，没有规律，因而通称为非规律的页面排版。
网页框架
图1.1 无框架页面设计( Xperimentz.com )
网页框架
图1.19 区域编排结构的网站
网页框架
区域编排的结构灵活，变化多，通常可利用颜色、
线条、文字的断口或插图的变换等手段来划分区域。 划分出来的区域的大小、形式都可以自行定义，格局
则变化莫测。
图1.20中，四个网站抓图均是标准的区域编排框 架。此类框架适合于信息量小，信息源有规律的网站。 区域编排不适用于门户开放式站点和信息交错紧密的 站点；比较适用于企业站点和产品单一的电子商务类 站点，以及对页面要求较高、信息流通量小的专业性 信息站点。
架的静态网页第一类，如图1.28所示。
网页框架
如图1.29所示，页面中文字信息较多，但也可以使 用静态页面设计。页面分左右两部分，左部是图片， 右部是文字和超链接，导航置顶。这是一个享誉国际 的工作室主页。 如图1.30所示，蓝色虎牙属于典型的信息量少、个
性化强的个人主页。大面积的插图、小面积的文字、
网页框架
网页框架
1 分栏式结构 2 区域编排 3 非规律框架设计
网页框架
1.1 分栏式结构
1.1.1 框架的分类 根据目前网页设计现况，以及在网络上能呈现的设 计条件，可以把网页框架归类为三大类：分栏式结构、 区域排版和非规律的页面排版。 分栏式结构和区域排版是两种较常见的基本构架形
式，在商业网页设计方面有较广泛的应用，同时也是
与众不同的设计风格，很多特殊的页面结构纷纷诞生。 在这些特殊的页面结构中，有一部分页面既属于分栏式
结构也属于区域排版结构。
网页框架
图1.16 多变化分栏式骨架设计
网页框架
图1.17 简洁的二分栏结构骨 架设计
网页框架
图1.18 别致的三分栏骨架设计
网页框架
1.2 区域 编 排
利用辅助线、插图、色彩把网页平面分为几个规 则的或不规则的区域，形成类似图1.19所示的网页框架， 这种网页框架笼统称为区块分布式结构，也叫做区域 编排式结构设计。横向割断分栏式结构，就可以变成 区域排版，所以也可以称区域排版为分栏结构的变异。