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