8.3.1 网页布局设计
网页布局是指在一个限定的面积范围内, 设计网页版块的结构及数量, 然后在每个版块合理安排图片、文字的位置, 并按照轻重缓急和审美要求逐步将信息展示出来的过程。网页布局能决定网页是否美观。合理的布局, 可以将页面中的文字、图像等内容完美、直观地展现给访问者, 同时合理安排网页空间, 优化网页的页面效果和下载速度。在对网页进行布局设计时, 应遵循对称平衡、异常平衡、对比、凝视和空白等原则。常见的网页布局形式包括“国” 字形布局、T 形布局、“口” 字形布局、标题正文形布局、“三” 字形布局、“川” 字形布局、框架布局、封面形布局、Flash 形布局和变化形布局等。
1.“国” 字形布局
“国” 字形也被称为“同” 字形, 顶部是网站的标题、横幅广告条, 然后是网站的主体内容, 而左、右分别是一些比较小的内容条, 中间就是主体内容, 最底部是网站的一些基本信息、联系方式、版权声明等。这也是现在网上见到的最多的一种结构类型, 如图8-5所示。
图8-5 “国” 字形布局
2.T 形布局
T 形布局与“国” 字形布局很相近, 只是右侧为主体内容, 同样其顶部是标题、横幅广告条, 左侧是导航链接。这也是比较常见的网页布局形式, 如图8-6所示。
图8-6 T 形布局
3.“口” 字形布局
这是一个象形的说法, 就是页面一般上、下各有一个广告条, 左侧为主菜单, 右侧为友情链接等, 中间是主体内容。这种布局的优点是充分利用版面, 信息量大; 缺点是页面拥挤, 不够灵活, 如图8-7所示。
图8-7 “口” 字形布局
4.标题正文形布局
标题正文形布局中, 上方是标题、横幅广告等, 下方直接就是正文内容, 如一些文章或者注册登录页面, 如图8-8所示。
图8-8 标题正文形布局
5.“三” 字形布局
“三” 字形布局的特点是页面上有横向两条或多条色块, 将页面分割为三部分或更多,每一部分放置相应内容, 如图8-9所示。
图8-9 “三” 字形布局
6.“川” 字形布局
“川” 字形布局的整个页面在垂直方向分为3列, 网站的内容按栏目分布在这3列中,最大限度地突出主页的索引功能。如图8-10就是一种“川” 字形的布局。
图8-10 “川” 字形布局
7.框架布局
这是采用框架进行布局的一种类型。网页左、右为分别两页的框架结构。框架布局的一般布局: 左边是导航链接, 顶部有时是一个小的标题或标志, 而右边就是主体内容, 最常使用的是论坛网站, 企业网站中的内页有很多是采用这种布局方式的。这种页面布局形式的特点是结构清晰明了。同样也可以采用上、下框架布局和综合框架布局。如图8-11就是一种框架布局。
图8-11 框架布局
8.封面形布局
封面形布局多用在一些网站的首页, 多是精美平面结合小动画, 再加几个简单链接或仅是一个“进入” 链接或无任何提示, 如图8-12所示。但是, 进入站点的其他页面, 还是有可能采用其他布局方式。
图8-12 封面形布局
9.Flash 形布局
Flash 形布局与封面形布局的结构是类似的, 采用了目前非常流行的Flash。与封面形布局不同的是, 由于Flash 强大的功能, 页面所表达的信息更丰富, 其视觉效果及听觉效果如果处理得当, 绝不差于传统的多媒体, 如图8-13所示。
图8-13 Flash 形布局
10.变化形布局
变化形布局如图8-14所示, 其实是上述几种形式的结合与变化, 所实现功能的实质还是上、下、左、右结构的综合框架形, 毕竟浏览网页的显示器或者手机屏幕都是矩形的。
图8-14 变化形布局
以上总结了目前网络上常见的布局, 其实还有许许多多别具一格的布局, 关键在于创意和设计。对于版面布局的技巧, 本书提供以下4个建议。
①加强视觉效果。
②加强文案的可视度和可读性。
③统一感的视觉。
④新鲜和个性是布局的最高境界。