1.4 布局设计

1.4.1 布局设计原则

当Web站点的开发者完成了站点的栏目规划后，实际上就已经掌握了网站用户群体最希望看到的标题内容，接下来就是使用页面布局将这些内容以合理的方式展示给用户。

网页布局体现的是网页中各个模块的重要程度及用户可能的关注重点，合理的布局应能够将站点想要传达的信息快速而高效地提供给用户，因此布局是整个界面的核心。在布局时，一定要注意网页内容和形式的统一、协调和均衡。

通过对各种公司网站页面信息内容进行分析可以发现，大多数公司网站的网页上部主要放置公司的Logo和广告条，然后是一个横向导航条；中间大部分区域为内容信息区，由于这部分内容较多，又将其划分为左、中、右3部分，分别放置不同类型的信息内容；底部为页脚区域，主要放置公司的版权信息、底部导航等。这种就是标准的上中下的布局结构。

设计者应考虑如何使网页的布局与内容完美地结合。使得网站既能准确、快速地表达网站的主要内容，让用户把注意力集中到浏览内容上，还能够维持网页整体的稳定和美观。通常可以从以下几个大的方面考虑布局的基本设计原则。

1）网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式。网页中要展示的内容必须是依据站点的主要栏目进行规划的。同时可以将所要表达的相近栏目集中放在一个区域显现，构成一种群体效应。

2）网页布局应区分栏目模块的重要程度。区分开栏目的主次性，重要栏目以顶部、左侧排列，次要栏目以底部、右侧排列。即重要信息、重要功能模块遵循“靠上靠左”原则。

3）网页布局必须尊重用户习惯。不仅要考虑不同类型用户的使用习惯差异，还要考虑中、英文等不同语种用户的浏览习惯。

1.4.2 布局设计类型

1. 传统布局类型

网页布局大致可分为“国”字型、“匡”字型、标题正文型、框架型、封面型和变化型等。

（1）“国”字型

也可以称为“同”字型，是一些大型网站常用的类型。即最上面是网站的标题及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式和版权声明等。这种结构是最常见的一种结构类型，如新浪、搜狐、网易和腾讯等门户网站。

（2）“匡”字型布局

这种结构与“国”字型其实只是形式上的区别，它去掉了“国”字型布局的最右（或左）边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左（或右）侧是一窄列链接等，右（或左）列是很宽的正文，最下面也是一些网站辅助信息。

（3）标题正文型

这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类型。

（4）框架型

框架型可分为左右框架、上下框架及综合框架等几种。框架型网站的优势在于可以使网站的维护变得相对容易，但其不易被搜索引擎索引。框架结构的一个共同特点就是浏览方便、速度快，但结构变化不灵活，通常用于网站后台管理页面的布局。由于在最新的Web标准中不再被支持，所以要慎用。

（5）封面型

这种类型基本上出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页中，处理好了会给人带来赏心悦目的感觉。

（6）“三”或“川”字形布局

“三”字形布局是一种简洁明快的网页布局，在国外用得比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。

“川”字形布局的整个页面在垂直方向分为3列，网站的内容按栏目分布在这3列中，最大限度地突出主页的索引功能。

2. 网页设计趋势

移动设备的流行改变了整个网页设计的技术，同时也影响了设计风格。设计趋势每年都在改变，出于各种原因，有的设计趋势在演进中逐渐消失，有的则在大家的熟练运用过程中渐入佳境，甚至逐步变为主流。如今，响应式网页设计、全幅背景、滚动式与微动画等几种网页模式成了主流设计。

（1）响应式网页设计

响应式网页设计是一种网页设计的技术方法，可使网站在多种设备上阅读和浏览。响应式网页可让同一个网页界面随着不同设备的尺寸调整网页的浏览方式，同一笔图文数据在计算机上为模式排列，当浏览器宽度缩减到手机尺寸时，则显示为竖直排列，即不会因设备尺寸不同而无法正常阅读。

（2）全幅背景

随着屏幕尺寸越来越大及移动设备的盛行，可随屏幕缩放图片尺寸的全幅背景网页设计开始流行起来。全幅背景和传统固定宽度的横幅（Banner）场景图相比，更能凸显气势磅礴的形象。除使用图片外，还可以借助HTML5新增的视频（Video）标签实现全幅视频设计。

（3）单页式网页

单页式网页也可称为“滚动式网页”，移动设备改变了人们浏览网页的方式，过去在使用台式机时常常希望网页不要有滚动条，有了平板电脑后反而开始习惯手滑屏幕来浏览网页，这时单页式网页设计就成了主流。

单页式网页设计近似于浏览幻灯片的概念，让用户一次专注于了解一件事情，不用再分心去看左右两边不相干的文章。过去一个页面塞满一堆信息的网页设计已经不再流行，在信息海量的时代，简单的区块式设计才能让用户专心阅读和理解想传达的信息。

单一网页越来越长已是很普遍的做法，尤其是在移动设备普及的时代，首页通常不设链接，改而将所有内容放在单一页面中，让低头族“滑上瘾”。比起在一堆链接中跳转，必须不断重新等待新的页面加载，信息通通放在单页的形式则更易于浏览，而且不再只是首页“变长”。其实about或描述产品的网页都能采取滚动到底的方式。例如，苹果公司的iPhone页面显示网页的方式就符合长网页的趋势，把所有规格与功能全部放在单一网页内，并且增添了一些精致的动画元素，吸引用户滚动全程的注意力。

（4）固定式菜单

固定式的主菜单也是近年来流行的趋势之一，尤其是功能性菜单，大多会设计成固定式菜单。在早期，当逐步往下浏览网页内容时，最顶端的菜单其实早已看不到了，必须重新回到网页顶端后才可单击其他链接进行浏览。为了改善用户的体验，就会将菜单固定在网页的顶端，无论页面如何向下滚动，菜单依然存在。在网页下方加上“回到顶部（Back to Top）”的固定式按钮也是常见的解决方案。

（5）扁平化设计

有别于过去讲求逼真立体感的设计，扁平化设计的核心在于简洁化，只保留必要的元素。扁平化的优势在于不仅让网页程序轻量化、提升网站速度，同时也能为用户带来清晰的视觉观感。

（6）微动画

在Flash时代，企业网站充满各种酷炫的动画，如今随着网页的发展，取而代之的是简单、不影响阅读的微动画，如首页轮播（Slider）就是常见的做法。另外，用CSS3制作的颜色渐变按钮、主菜单特效等，都会让网站在体验上有画龙点睛的效果。

（7）卡片式设计

卡片式设计也称为“砖墙式设计”或“瀑布流设计”，经常用于显示许多信息流的页面，例如用图片显示整个照片墙。卡片式设计由于可横排/竖排切换，因此也常见于响应式网页设计中。

此设计技巧不算新颖，但却是响应式网页设计的最佳实践。卡片式设计的优势是模块化，重新编排栏目也不会草率或紊乱，在浏览器中能浏览大量数据。

（8）隐藏式菜单

有些网站选择把菜单隐藏起来，只有当用户单击或悬停在某个元素上时才会打开菜单，借此尽量维持画面的整洁，强调功能性。

（9）超大的字体

有些设计师会跳脱平淡的做法，尝试将字体做不同的编排风格，使用较大的标题来排版以呈现简单、有力的视觉效果。

（10）幽灵按钮

将按钮透明化，仅以能够识别的超细边框包裹着无衬线的字体，一方面减少了按钮与背景的突兀感，另一方面依然有清楚的指向。

页面的布局没有固定的方式方法，要针对具体问题具体分析，从而决定采用哪种类型，如果把上述几种类型相结合并做适当变化，就是变化型布局了。

1.4.3 布局设计元素

在网页文件中，会涉及很多页面元素。要想将这些页面元素有机地组合起来，达到满意的视觉效果，必须把这些元素放在合适的位置上，这就是网页元素的定位。

1. 页面规格

由于页面尺寸和显示器大小及分辨率有关，一般显示分辨率采用800×600、1024×768、1280×1024、1366×768和1920×1080等，所以实际设计的宽度一般采用减去右边浏览器滚动条宽度20像素就差不多了，但不可能为每种分辨率都设计一种规格，而高度设计时除封面型外，一般不考虑是否会超出一屏。

2. Logo设计

Logo代表整个网站乃至公司的形象，网页中的Logo基本上会出现在整个网站中的所有页面，其重要性不言而喻，现在的Logo越来越具有创意性，越来越简单、干净、直接，但这并不影响网站形象，这是互联网潮流趋势和设计理念的动向。好的Logo可以直接代表网站的灵魂，甚至延伸至产品、文化、精神和理念等，好的Logo也能刻画出作者的风范，甚至能体现出蕴藏在作者心中的寄托和心血。

常见的Logo类型有以下几种。

● 纯文字。最直接的表达方式，不作修饰和掩盖，如drupal.org网站。

● 文字加点缀。简洁的文字加上创意的矢量图形点缀，这类风格的Logo使用最广泛。

● 带3D元素和质感。3D质感的Logo相对比较少，除了流行趋势外，主要是和网络产品文化有关。

● 暖色简洁矢量。优秀Blog和个人站点比较常用的风格。

3. 页头

页头又可称为“页眉”，其作用是定义页面的主题。比如一个站点的名称多数都是显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它涉及下面的更多设计和整个页面的协调性。页头中常放置拥有站点名称的图片和公司标志，以及旗帜广告。

4. 文本

网页中的主要内容是文本，若排版不合理就容易产生视觉上的疲劳。在使用文本时，要注意正文字体最好使用默认，颜色要与背景色显示区别，合理使用行距。

5. 页脚

一般使用标准的页脚，提供版权信息、最后更新的日期和法律声明等，也可以加上导航栏。

6. 图片

图片是网页中除文本外用得最多的元素，它直接影响网站的浏览速度和浏览者的第一感觉，常用的格式有GIF、JPEG和PNG，还有SVG格式。GIF适用于透明背景的动画或字体图像等内容，保存的文件小，但颜色数只有256种。JPEG适用于不透明背景的、拥有丰富颜色的照片，但它是一种有损压缩保存的文件。PNG是一种支持无损压缩、可以透明背景和丰富颜色的新格式，但不支持动画。使用图片时要注意尽量使用图片的原始大小。

7. 多媒体

除文本与图片外，还有声音、动画和视频等其他媒体。原则上不使用自动背景音乐。

8. 留白

留白是指网页中元素之间的空白。可以利用留白来达到页面平衡，使整个页面布局松紧有度，形成虚实、浓淡、动静、轻重的效果，给人以跌宕起伏之感。留白可以是空白，也可以是大面积的单纯色彩，或是规则图形的组合，它使文字之间、图形之间形成页面节奏感、版块层次感、内容主次感。具体设计时要注意：网页顶部留白，保留传递网站的类型、风格的Logo和提供简单明了的导航链接；页面背景留白，去除阻碍视线顺畅流动的底纹等装饰性元素，根据实际需要设计好页面边空；简化标题表现，去除题花等装饰性元素，特别是头条、置顶和图版等，不做围框、流动和色彩变换等特效重复强调；版块分离用空白而不是表格或线条。

1.4.4 布局设计技术

1. TABLE表格布局

表格布局的优点是简单易用、所见即所得、设计速度快。但表格布局的代码可读性差、可维护性差、网页打开速度较慢。由于后台代码太多，导致网站打开速度慢。如果要考虑手机客户，请不要使用该布局。

2. DIV+CSS布局

DIV+CSS布局的优点为：DIV用于搭建网站结构、CSS用于实现网站表现，将表现与内容分离，便于大型网站的协作开发和维护；提高搜索引擎对网页的索引效率；缩短改版时间；大大缩减页面代码，提高页面浏览速度，缩减带宽成本；强大的字体控制和排版能力。

随着浏览器版本的标准化和制作工具的完善，该布局技术原来的缺点已经逐渐被克服了，建议使用。

3. 框架布局

框架由于不能进行精确的元素定位，因此不能独立完成页面的布局，它常常与表格配合使用，先用框架将页面划分为几个区域，然后再用表格实现各区域的精确局部，常用在网站系统的后台页面设计中。由于在HTML5标准中已经不推荐，所以该布局不建议使用。

4. 响应式布局

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师开始采用这个技术，不仅看到很多的创新，还看到了一些成形的模式。这种布局主要是采用CSS3中的Media Query（媒体查询）来实现。