2.1 知识准备

2.1.1 网站版面设计流程

在网站建设行业中，一个网站项目，首先需要设计出网站版面，然后与客户沟通，客户确认版面后，才开始进入版面“切图”环节。因此，网站版面的质量，直接关系到网站项目的设计开发效率和效果。通常，一个网站项目的版面是按照图2-1所示的流程设计出来的。

1．构思

网站版面的构思是在充分了解客户的需求、网站的定位、受众群等基础上进行的，如果这些问题没弄清楚，就不要去设计，因为在不了解客户需求的情况下，盲目地通过页面设计来达到某种效果是很难的，也会很容易被客户推翻。当真正了解客户需求后，尽可能发挥想象力，将想到的“构思”画出来。这是一个构思的过程，不讲究细腻工整，也不必考虑细节部分，只需用几条粗陋的线条勾画出创意的轮廓即可。

2．粗略布局

粗略布局阶段主要根据前面的构思画出页面的粗略布局图，然后对照客户需求，分析框架是否合理，是否符合客户的需求。

3．细化布局

细化布局是对粗略布局的进一步细化，使得布局图上的版位能体现网站的内容描述。

4．搜集素材

搜集素材阶段主要是紧密结合网站主题，根据版面布局的版位实际状况，通过互联网等手段搜集相关的素材，包括图片、文字以及视音频等。

5．设计版面

设计版面阶段主要是结合版面布局，使用相关工具对素材进行加工处理，最终设计出网站项目版面。

2.1.2 网站版面设计原则

网站界面的设计，既要从外观上进行创意以达到吸引眼球的目的，还要结合图形和版面设计的相关原理，使得网站版面设计成为一门独特的艺术。通常，企业网站用户界面的设计应遵循以下几个基本原则。

1．用户导向原则

设计网站版面之前，先要明确到底谁是使用者，要站在用户的立场以用户的观点考虑问题。要做到这一点，必须与用户沟通，了解他们的需求、目标、期望和偏好等。

2．KISS原则

KISS就是Keep It Simple And Stupid的缩写，简洁和易于操作是网页设计中非常重要的原则。毕竟，网站建设出来要便于普通网民查阅信息和使用网络服务，没有必要在网页上设置过多的操作，堆集过多复杂和花哨的图片。

3．布局控制原则

关于网页排版布局，通常要遵循的原则如下。

（1）Miller公式。

根据心理学家George A·Miller的研究，人一次性接受的信息量在7比特左右为宜，公式描述为：一个人一次所接受的信息量=(7±2)比特。这一原理被广泛应用于网站建设中，一般网页上的栏目数量在5～9比特为最佳。如果网站提供给浏览者的内容链接超过这个范围，人在心理上就会烦躁、压抑。

（2）分组处理。

对于信息的分类，一行不超过9个栏目，但如果内容实在太多，超出了9个，则需要进行分组处理。如果网页上提供几十篇文章的链接，需要每隔7篇加一个空行或平行线加以分组。

4．视觉平衡原则

网页上的各种元素如图形、文字、空白等都会产生视觉作用。根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，在设计网页时需要以更多的文字来平衡一幅图片。另外，中国人的阅读习惯是从左到右、从上到下，因此视觉平衡也要遵循这个这个习惯。例如，很多文字采用左对齐，则需要在网页的右侧加一些图片或一些较明亮、较醒目的颜色。一般情况下，每张网页都会设置一个页眉部分和一个页脚部分，页眉部分常放置一些Banner广告或导航条，而页脚部分通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平衡。同时，决不能低估空白的价值，如果网页上所显示的信息非常密集，那么不但不利于读者阅读，甚至会引起读者反感，破坏网站的形象，因此，在页面设计上适当增加一些空白，可以精练网页，使得页面更加简洁。

5．色彩的搭配和文字的可读性

色彩是创造美感的重要元素，不同的颜色会给人不同的感觉，例如，红色和橙色使人兴奋，黄色让人感觉温暖，黑色显得比较庄重等。因此，在版面设计的过程中，应根据项目版面情况构建配色系统，赋予每一个元素合理的色彩。

文字是传递信息的重要载体，为了提高其可读性，通常将文字与图片混合排版，并设置合理的字体、字形和字号。

6．一致性原则

通常，网站设计要保持一致性的原则。因为一致的结构设计，可以让浏览者对网站的形象有深刻的记忆；一致的导航设计，可以让浏览者迅速而又有效地进入感兴趣的页面；一致的操作设计，可以让浏览者快速学会整个网站的各种功能操作。破坏这一原则，会误导浏览者，并且让整个网站显得杂乱无章，给人留下不良的印象。当然，网站设计的一致性并不意味着刻板和一成不变，有的网站在不同栏目使用不同的风格，或者随着时间的推移不断地改版网站，都会给浏览者带来新鲜的感觉。

7．个性化

（1）符合网络文化。

企业网站不同于传统的企业商务活动，要符合网络文化的要求。首先，网络最早是非正式性、非商业化的，只是科研人员用来交流信息的方式。其次，网络信息只在计算机屏幕上显示而没有被打印出来，而且网络上的交流具有隐蔽性，谁也不知道对方的真实身份。另外，许多人是在家中或网吧等一些比较休闲、随意的环境下上网，此时网络用户在该使用环境下的思维模式与坐在办公室里正式工作时大相径庭。因此，整个互联网的文化是一种休闲、非正式、轻松活泼的文化。在网站上使用幽默的网络语言，创造一种休闲、轻松愉快、非正式的氛围，会使网站的访问量增加。

（2）塑造网站个性。

网站的整体风格和整体气氛表达要与企业形象相符合，并应该很好地体现企业CI（企业形象）。在这方面比较经典的案例有：可口可乐公司的“Life Tastes Good”网站；通用电气公司的“We bring good things to life（GE带来美好的生活）”网站；通用汽车公司的“以人为本”网站；希尔顿大酒店“宾至如归”理念的网站。

2.1.3 网站版面布局

网站版面布局是设计网站版面的第一步。选择一个正确的网页布局，对网站的整体建设具有举足轻重的作用。

1．网页布局

网页布局是指在页面上划分出不同的区域，按照设计的原则和方法，把不同的内容放置在不同的位置，并通过色彩调和出不同的网站色彩基调，使网页内容形成一个有机的整体，充分表达网站主题的过程。

2．网站版面布局图

网站版面布局图通常是指根据网页布局使用线条勾画出来的框图，是网页布局在宏观上的表现。某网站首页版面的布局图如图2-2所示。

3．绘制网站版面布局图的工具

绘制网站版面布局图的工具非常多，常用的有Word、Photoshop、Firework等。使用原型设计工具，如Axure、Mockup，也能快捷画出网站版面布局图，当然也可以用笔在纸上画出来。

2.1.4 常见的网站版面布局

常见的网站布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、海报式布局、Flash布局、框架式布局、“顶部大图Banner+简单栅格”布局、单页单栏布局、极简分层布局、变化式布局等。

1．“国”字形布局

“国”字形布局也可以称为“同”字形布局。该布局，从上到下主要包括3部分：上面的部分（页头）通常用于展示网站的标题以及横幅广告条；中间部分为左、中、右3列，并罗列到底；最下面的部分（页脚）用于展示网站基本信息、联系方式、版权声明等。这种结构是常见的网站布局。“国”字形布局简化示意图如图2-3所示。

2．“匡”字形布局

“匡”字形布局与“国”字形布局的区别在于它去掉了“国”字形的最右边部分，给主内容区释放出更多空间。这种布局的页头是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，页脚也是网站基本信息、联系方式、版权声明等内容。“匡”字形布局简化示意图如图2-4所示。

3．“三”字形布局

“三”字形布局是一种简洁的网页布局。这种布局的特点是页面由横向上、中、下3部分构成：上面的部分为页头，中间部分为页面内容，下面的部分为页脚。该布局通常用于注册页面、文章内容页面以及其他介绍性单页面等。“三”字形布局简化示意图如图2-5所示。

4．“川”字形布局

“川”字形布局是把整个页面纵向从左到右分为3列，网站的内容按栏目分布在这3列中，通常左列为网站内容的一级栏目，中间列为网站内容的二级栏目，右侧列为网站的详细内容。该布局的最大特点是突出主页的索引功能。在Web页面的实现上，左、中列所占的宽度较小，右侧列所占的宽度较大，通常自适模式居多。“川”字形布局简化示意图如图2-6所示。

5．海报式布局

海报式布局没有固定的结构，它根据网站主题设置精美的海报来作为网页布局的主体，并引入一些动画、图片链接等元素。这种布局通常用在时尚类网站版面设计上，如果把握到位，可以给人带来赏心悦目的感觉，在视觉上也会带来较强的冲击。该布局的示例如图2-7所示。

6．Flash布局

Flash布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较艳丽、有趣，是一种比较新潮的布局方式。这种布局结构与海报式布局相类似，不同的是，由于Flash强大的功能，页面所表达的信息更丰富。如果视觉效果及听觉效果处理得当，则会是一种非常有魅力的布局。该布局示例如图2-8所示。

7．框架式布局

框架式布局采用框架布局结构，常见的有左右框架形、上下框架形和综合框架形。由于兼容性和美观等因素，对于这种布局，目前专业设计人员采用得已不多，不过在一些大型论坛的网页布局上还是比较受青睐的。左右框架式布局简化示意图如图2-9所示，上下框架式布局简化示意图如图2-10所示，综合框架式布局简化示意图如图2-11所示。

8．“顶部大图Banner+简单栅格”布局

该布局无论屏幕多大都能为用户展示充足的内容，供用户浏览和探索。这种布局随着屏幕设置、设备的不同而有所差异，有的设计师会设计成固定宽度或者横跨整个页面的布局，使设计画面干净清爽，有较强的视觉表现力，并且常采用响应式设计。使用该布局的网页，每个元素都各司其职，并且整个流程富有逻辑。顶部大图足以营造氛围，给予用户特定的体验。越来越多的这类网页开始采用色彩丰富的插画式的图标，而扁平化的设计与这种布局页面有着天然的契合。图2-12所示的版面采用了该种布局。

9．单页单栏布局

目前，单页单栏布局非常流行，它非常适宜于展现极简的内容，或者专注于呈现一个主题。当网站的主题集中，内容也比较固定的时候，不必采用复杂的布局来呈现，单页单栏式的布局就足以应付一切。采用这种布局模式的时候，空间的控制至关重要，相当考验设计师设计留白和布局平衡的功力。元素和元素之间的疏密关系是需要设计师反复推敲的，如果空间控制不合理，就会给用户一种混乱的感觉，如果过于紧密则会产生局促感。

该布局适合于小网站或者小型项目的展示，它可以用来制造一个简单的介绍页面，让简单的内容显得不那么单调，强化内容的形式感和重量感。对于内容简单的博客网站而言，单页单栏式设计也是不错的选择。

该布局和单页设计结合最紧密的是动效设计和视差滚动，这让单页单栏式设计更加生动有趣，淡化单调的设计，赋予页面更强的生命力。单页单栏布局简化示意图如图2-13所示。

10．极简分层布局

极简分层布局风格一直在流行，该布局所呈现的开放式空间让用户感觉更加轻松，也使得其中展现的内容更容易被聚焦。如果在页面中加入不多的几个并列的内容层，则可以让信息更有层次，也使得极简的页面拥有了细节。这种设计并不复杂，但是让页面更加有趣了，它可以适配多种不同类型的项目，这也解释了为什么用户会如此地喜爱类似某网站这样的设计，如图2-14所示。

11．变化式布局

变化式布局是融合上述多种布局形成的一种版面布局。