图2-2

图2-3

二

强调

强调是为了突出页面中非常重要的信息内容。这种手法类似于构成法则中的特异原则，设计者可以设计出实现信息有效传递的层次结构。为了围绕这一设计原则，设计者首先需要分析网站的信息内容，确定应该采取何种分级方式，然后将这些内容按照不同等级的重要性进行规划设计，使页面的版面层次结构清晰、重点突出。需要注意的是，强调的手法应该避免试图强调过多的信息元素，因为如果将一切都作为重点，那么都不会成为重点。pegada ecológica网站首页采用了图形和简单文字结合的方式以突出网站主题，页面中最强调的即是网站的标题，简明扼要、重点突出（图2-4）。

图2-4

三

重复

图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

五

参考书籍

作者：何丽萍、杨光、龙彬

定价：59元

出版日期：2025.06.01

《Web界面设计》重点介绍网页界面设计的相关内容。从设计艺术学的角度说明网页中各部分的作用；在遵循形式美法则的基础上讨论如何提高网页信息传递效率；在总结网页设计规律和方法的同时补充网页交互设计的内容。本书第1章介绍网页设计制作的基本原理和工作流程；第2~5章讲述网页设计的原则和方法；第6、7章介绍网页交互设计的原则和方法。为方便师生教与学，本书还提供了配套的教学视频和课件。

“本案例详解网页版面设计的基本原则——强调、重复和对比。” 一概述网页的版面设计是将丰富的信息和多样化的形返回搜狐，查看更多