本案例详解网页版面设计的基本原则——强调、重复和对比。
”
网页的版面设计是将丰富的信息和多样化的形式组织在一个统一的页面结构中，所有的细节不仅各得其所，而且各有不同的分工。网页的版面设计规则与印刷品的设计规则一样，存在于信息要素、装饰要素等不同关系之中。文字、图片、符号的相互作用建立起一套整体有效的信息传递系统，构成网页的信息框架。点、线、面和色彩的组合运用是构成网页的装饰要素。网页界面的装饰是各部分视觉要素在页面内进行规划的结果，网页的整体结构是基于装饰要素的对立或平衡而形成的。
网页的版面结构划分是将视觉元素进行相互配合时所显示出的视觉差异。它体现在各种视觉元素的形态、对比、协调等关系中。网页的版面结构对表达网站的风格类别具有十分重要的作用。可以从一些优秀的网页中了解网页版面设计的一些规律，这有利于突破一般构成法则追求网页设计的至高境界。Yojin公司的网站主页采用卷纸效果增加界面的层次感和动态效果，在传统的二维空间营造三维效果，整个网页的版式和风格与网站的建筑主题非常吻合，有效地展示了网站的宣传主题（图2-1、图2-2）。This is now公司的网站首页则采用了版式分割的创意手法，以动态图形作为背景，同时将网站的主题贯穿于网页的始终（图2-3）。
图2-1
图2-2
图2-3
强调是为了突出页面中非常重要的信息内容。这种手法类似于构成法则中的特异原则，设计者可以设计出实现信息有效传递的层次结构。为了围绕这一设计原则，设计者首先需要分析网站的信息内容，确定应该采取何种分级方式，然后将这些内容按照不同等级的重要性进行规划设计，使页面的版面层次结构清晰、重点突出。需要注意的是，强调的手法应该避免试图强调过多的信息元素，因为如果将一切都作为重点，那么都不会成为重点。pegada ecológica网站首页采用了图形和简单文字结合的方式以突出网站主题，页面中最强调的即是网站的标题，简明扼要、重点突出（图2-4）。
图2-4
相比强调，重复在设计中是以一种平淡温和的面貌出现的。重复的表现形式多种多样，可以是页面元素的形状、大小、方向以相同的方式出现，使页面产生安定、整齐、规律的氛围。重复在版面设计中的优势是它的可预测性。如果网站以统一的方式来展现版式结构，那么对于用户来说，网站的整体识别性就会增强。相反地，如果一个网站的每个页面都以不同的模板形式来展现，那么这个网站的版面设计就缺乏视觉的连续性，也会大大削弱用户的视觉识别性。nerisson网站首页采用了六边形的绝对重复方式，将每个链接图标放入其中，这样的设计手法可以让用户方便地找到导航内容，也强化了页面的视觉效果（图2-5）。gonzelvis网站首页则采用了立体四边形的重复图形，并将网站的导航图标放在其中，页面采用了交互式动态网页技术，使得网站在简单的二维空间中显示出丰富的立体效果，增加了网站的视觉趣味性（图2-6）。与前面两个网站不同，second world cup网站首页为了突出网站的主题，采用了大小不同的圆形做不规则的排列，使页面富有动感，非常贴切地展示了网站的主题（图2-7）。
图2-5
图2-6
图2-7
在使用重复设计方法时需要注意重复在视觉感受上容易显得呆板、平淡、缺乏趣味性，因此对于网页版面中的重复，需要关注的是版面构成元素如何以不拘一格的方式多次出现。可以适当地添加一些交叉与重叠，增加页面版式的趣味性，提高用户的视觉关注度。例如，duplos网站首页虽然使用了重复设计的手法，但是重复的视觉元素有大小、位置、形式的变化，增加了页面的层次感和空间感（图2-8）。
图2-8
对比是两个或多个视觉元素之间的差异。设计中的对比能够给网页带来视觉上的变化，不会让人感觉到平淡无味。对比还能帮助网页聚集用户的视觉焦点，从而满足传递某些重要页面信息内容的需求。对比还可以对其他设计原则产生影响，设计者可以运用不同的视觉元素来实现对比。例如，图形、文字和色彩在页面中排列组合、互相比较，产生大小、明暗、强弱、粗细、疏密的对比。大众甲壳虫的网站页面设计采用了图形对比的方式，将车身的造型和唱片以及封套之间的图形进行对比，结合黄黑两色的对比，极大地增加了画面的视觉冲击力（图2-9）。sberbank1网站的网页采用了线和面的对比方式，丰富了页面的层次感（图2-10），该网站的内页也采用了大面积对比的方式，在变化的基础上增加页面的稳定感，适合放置更多的文字内容，装饰性和功能性结合得很好（图2-11）。
图2-9
图2-10
图2-11
由于对比手法常常被用于加强重点信息，所以它能在页面的层次结构上产生最大的影响。通过对比这种方式，可以对网页版面的视觉秩序产生作用，能够迅速引起用户对关键元素的关注。因此，设计者需要认真考虑网站的各种需求，有意识地运用对比来吸引用户关注某些元素。goodbytes网站首页将页面分成两部分，综合运用了色彩、图形、文字和图像对比的方法，极具个人风格。页面的上半部分将内容丰富的图像作为背景，网站的主题和标识则运用简单的文字说明，页面的下半部分使用了简单的色块与图像背景做对比，色彩则运用了两组互补色，整个画面在丰富背景的前提下，运用了简洁夸张的对比手法，使页面繁中就简，很好地展示了网站的主题（图2-12）。jan mense网站也同样将网页分为上下两部分，以图形和文字对比的方式统一在矢量图风格之中，很好地体现了作为设计类网站的风格特色（图2-13）。对比手法非常多样化，也包括图像内容以及版式设计的对比，这在很多网站设计中很常见（图2-14、图2-15）。
图2-12
图2-13
图2-14
图2-15
優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
44010602000978號
專屬顧問
