第九课 学生作品解析
课时：4课时
要点：本课以案例分析为主，使学生了解页面中首页的地位与功能，明白在网页整体风格的统一、色彩的搭配和版式布局等方面如何规划，以进一步掌握网页界面的设计方法。
网站设计中的界面设计直接关系到整个网站的最终展示效果，那么，如何对网站的界面进行评价呢？首先需要了解网站的页面组成要素。网站一般包括以下4个部分：
①首页——网站的门面，如同公司的形象，要特别注重设计和规划。
②框架页——网站的主要结构页面，又称次首页、内页。在大型网站中，往往框架页即首页，如一些门户网站。框架页通常是网站内部主要栏目的首页，讲究风格的一致性，并与首页相呼应。
③普通页——网站主要的承载信息的页面，一般设计要求不高，但要求链接准确、文字无误、图文并茂，并沿袭网页的风格。
④弹出页——主要用于广告、新闻、消息以及其他网站的链接等（实际运用较少）。
从功能上来看，首页主要承担着树立企业形象（当然不仅仅是首页）的作用。一般来说，网站首页的形式不外乎两种：
第一种是纯粹的形象展示型。这种类型的网站首页文字信息较少，图像信息较多，注重艺术造型和设计布局，利用一系列与公司形象、产品、服务有关的图像和文字信息，组成一幅生动的画面，从而向浏览者展示一种形象、一个氛围，吸引浏览者进入浏览。这种首页形式的制作首先需要设计者具有良好的设计基础和审美能力，能够挖掘企业深层的内涵，展示企业文化。在设计过程中也须明确要以设计为主导，通过色彩、布局给访问者留下深刻的印象。
第二种是信息罗列型。这是一般的大、中型企业网站和门户网站常用的方式，即在首页中罗列出网站的主要内容分类、重点信息、网站导航、公司信息等，也就是我们上面所谈到的框架页。这种风格较适合信息量大、内容丰富的网站，以展示信息为主。在设计过程中要求设计者从细微入手，体现企业形象。
建议设计者事先仔细阅读企业的CI手册，熟悉企业标志、吉祥物、字体及用色标准等，通过网站的局部来体现。往往平淡之中一个优美的符合企业特点的曲线就能够给人以深刻的印象，从而将企业形象印在浏览者的脑海里。设计者在设计过程中要学会使用这些语言符号来表达独特的企业信息。
下面，通过两个学生所做的网页案例，来进行功能结构上的分析，进而介绍在网站中各个页面所包含的内容与相互之间的关系。
案例1
网站：赣南八公山豆腐有限公司官网
设计者：王丽娜
本案例属于纯粹的形象展示型网站，以“八公山豆腐”为拳头产品，进行品牌推广。公司地处安徽省寿县，当地的“八公山豆腐宴”是汉族传统名肴，属于沿淮菜系。
八公山豆腐起源于淮南王刘安时期八公山一带，即淮南市八公山区与寿县的交界地，距今已有两千多年的历史。这种豆腐采用纯黄豆作原料，加入八公山的泉水精制而成。当地农民制作豆腐的技艺世代相传，很多人都掌握了一套好手艺，做出的豆腐细、白、鲜、嫩，深受群众欢迎。明代李时珍的《本草纲目》、叶子奇的《草木子》、罗颀的《物原》等著作中，都有八公山豆腐之法始于汉淮南王刘安的记载。
网站设计者采用毛笔书写的文字作为设计主要元素，搭配简洁的图标，摒弃浮华，在首页中没有多余的符号、颜色混淆视线，彰显出品牌朴素、内敛的特质（图4-1）。
首页是企业在网上的虚拟门面，因此，线上营业的企业需要格外注重自己门面（网站首页）的设计，网站的页面就好比“无纸的印刷品”。
图4-1
接下来，进入整个网站最关键的框架页设计。框架页在导航方面起着重要的作用，如各栏目内部主要内容的介绍都可以在框架页中体现，从而使浏览者在进入普通页前，能够迅速了解网站各栏目的主要内容，择其需要而浏览。而如何保持网站风格的一致性，是进行框架页设计过程中需要着重考虑的问题。
图4-2是该网站的框架页面，也称为次首页面。设计者采用了非常简洁的导航方式，把网站布局划分为“首页”“历史文化”“生产工艺”“豆腐盛宴”“魅力展示”和“联系我们”等几大板块，分类明确，很好地为浏览者进行了方向引导。
图4-2
随着导航指向的步步深入，又进入普通页。普通页是主要的信息页面，也是网站的最终页面。下面6个页面的设计就分别对“历史文化”“生产工艺”“豆腐盛宴”“魅力展示”等内容进行了细分设计，保证做到每一页既相互关联又互不干涉。对于大型网站来说，这种结构非常重要，可以按照不同的层次分为二级页面、三级页面等。而对于中小型企业而言，网站规模较小、页面数量不多，框架页也会担当起普通页的作用。一般来说，普通页的布局比较简单，即内页的一栏式版面布局。
在版面布局中，主要考虑的是导航、必要信息与正文之间的布局关系。较普遍的情况是采用顶部放置必要信息的方式，如公司名称、标志、广告条以及导航条，或将导航条放左侧、正文放右侧，等等。这样的布局，结构清晰，易于使用。当然，也可以尝试布局的变化形式，如左右两栏式布局，一半是正文，一半是形象的图片、导航；或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等（在设计中注意多吸取好的网站设计的精髓）。但由于浏览器宽幅所限，不宜将其设计成三栏及以上的布局。
如图4-3至图4-8所示的6个页面都属于网站的二级页面，也就是普通页。每个页面都按照既定的内容进行了设计，导航条的设计也较为中规中矩，在布局上采用上下两栏式，构成更为灵活的图文排版形式。(https://www.daowen.com)
图4-3
图4-4
图4-5
图4-6
图4-7
图4-8
需要提醒注意的是弹出页的设计。弹出页，顾名思义是指在普通页的基础上新弹出的窗口页面，能起到提醒或者广告宣传等作用（图4-9）。如果是邮箱用户登录的界面设定，弹出页可根据需要酌情慎用。
图4-9
网页在满足了功能需求的基础上，还需要符合审美的需求。网站设计最大的原则就是必须保持一致性，网站的一致性在网站营销中占据重要地位，其中包括网站布局、文字排版、装饰性元素出现的位置、导航的统一性、图片的位置等。在浏览国外一些著名的电子商务网站时，你会发现这些网站结构惊奇的一致，不同的只是色彩或内容。这种方式是目前网站设计中普遍采用的结构，一方面可以减少设计、开发的工作量，另一方面更有利于往后网站的维护与更新。一致性主要体现在以下 3 个方面：
①特别元素的一致性。在网站设计中，个别具有特色的元素（如标志、象征图形、局部设计等）重复出现，也会给访问者留下深刻印象。比如网站结构在某一点上的变化，由直线变为圆弧、暗色点缀的亮色、色彩中的补色等。
②图像风格的一致性。网页中的图像在使用上一定要慎之又慎。作为网站结构一部分的局部图像，应根据网页内容的不同，配以风格相似的图像或动画，从而给浏览者带来视觉上的舒适感。
③背景元素的一致性。从技术上而言，网页背景包括背景色和背景图像两种。目前更多的是使用背景色或色块。原因很简单，第一，下载速度快。背景色的下载速度基本可以忽略不计，而背景图像就得根据图像字节大小下载。第二，显示效果好。经常看到国内一些网站设有背景图像，或是公司的厂房、办公大楼，又或是产品图片，甚至是某某人物的照片，这样的处理经常使得前面的文字难以辨认，给人以模糊、不确切的感觉。
只有遵循以上原则，进一步明确网页界面设计的任务和重点，才能做到心中有数，得心应手。
此外，网页设计还需要注重色彩搭配的技巧。在颜色的运用上，该网站采用了以绿色作为主色，以灰色调作为过渡色进行调和，使整体色彩干净、沉稳、朴素。除此之外，还有相同色系色彩运用法、对比色或互补色彩运用法，以上两种用色方式在实际应用中都要注意主体色彩的运用，即以一种或两种色彩为主、其他色彩为辅，以免造成色彩的混乱。色彩搭配是网页设计中最难处理的问题之一。如何运用最简单的色彩表达最丰富的含义、体现企业形象，是网页设计人员需要不断学习、探索的课题。
案例2
网站：肯德基KFC官网
设计者：陶月敏
该网站属于第二种——信息罗列型，是促销性质的商业类网站。设计者采用左右双栏式布局，左边是附带Logo的导航按钮，右边是各种产品信息。由于增加了在线服务功能，网站设计的目的是针对需要网上订餐的用户，所以设计者采用更为直观的以图为主的元素进行版式设计。
设计者尽量保持网站风格的一致性，采用了暖色调，以肯德基红色和黄色为主进行搭配，视觉上产生强烈的对比，整体色彩明快、氛围热烈，也能使消费者（访问者）浏览时产生食欲，形成购买的欲望。背景留白给人干净利落的感觉（图4-10）。 大家可试着从网站设计的一致性原则分析该网页在元素运用、色彩搭配、版面布局等方面的优劣，提出自己的主张和修改建议。
图4-10
