第2章
网页设计的五大原则
网页设计也是艺术类的表现形式，视觉传达设计开拓了新的网络视觉文化空间。对于网页设计师来说，打造非凡的交互体验，设计一个可用性强的网站是大家共同的目标。但是企业也有着自己的需求，因而这两者经常会出现冲突。所以在对网页版式的设计中要遵循以下几点原则。
（1）主题鲜明性原则。
（2）形式统一性原则。
（3）色彩和谐性原则。
（4）简洁清晰性原则。
（5）界面友好性原则。
2.1 主题鲜明性原则
网页设计的主题是整个网站的灵魂所在，它起到对网站的整体风格和特色做出定位、规划网站的组织结构的作用。通常，设计师会通过视觉设计去表现网页的主题，这就要求设计师不但要以单纯、简练、清晰和精确的形式进行表达，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力来鲜明地突出设计主题。可以通过以下三点做到网页主题鲜明。
（1）对网页构成元素运用艺术的形式美法则进行条理性处理，以便更好地营造符合设计目的的视觉环境，从而起到使主题鲜明的作用。
（2）抓住访客心理，按照视觉心理规律和形式将主题主动地传达给访客，以使主题在适当的环境中被访客接受。
（3）网页的效果力求简洁，要点明确，以简单明确的语言和画面来体现本站的主题，从而吸引访客的注意。
主题鲜明的网页设计
在制作网页的初期，一定要为网页设定一个明确的主题，尤其是个人网站。只有明确网页的主题，才能在此基础上更好地进行创意构思，从而形成总体的设计方案。
设计理念：在该网页中，画面中的图片都与食品相关联，从而可以判定这是一个以食品为主题的网页设计。该网页结构并不复杂，内容一目了然。
色彩点评：该网页整体呈现出一种灰色调，是典型的日式风格配色。其中采用浅卡其色作为背景颜色，让整体画面呈现柔和、朴素的效果。
导航栏位于网页的左侧，并将文字竖向排列，非常有民族特点。 画面中，宣传图中的灰色背景与浅卡其色的对比较弱，给人一种柔和、亲切的感觉。
作为食品类的网页设计，以绿色作为点缀色，给人一种健康、自然、美味的视觉效果。
CMYK=7,7,16,0 RGB=241,237,220
CMYK=71,48,100,7 RGB=94,117,10
CMYK=23,35,82,0 RGB=213,173,63
CMYK=3,51,66,0 RGB=248,155,87
CMYK=60,49,44,0 RGB=121,126,131
该网页为运动主题的网页，以白色搭配红色，给人一种积极、奋进的视觉印象。该网页布局简约，以大幅图片作为视觉中心，非常具有吸引力。
CMYK=78,72,69,39 RGB=58,58,58
CMYK=12,93,85,0 RGB=228,42,42
CMYK=19,15,14,0 RGB=213,213,213
CMYK=0,0,0,0 RGB=255,255,255
这是一个矢量插画风格的网页设计，画面中颜色简单，配色效果鲜明，非常具有吸引力。该网页以冰淇淋作为主题，它并没有以实景图片作为宣传重点，这种另辟蹊径的设计方式，给人留下深刻的印象。
CMYK=100,96,26,0 RGB=23,41,132
CMYK=11,96,17,0 RGB=230,0,126
CMYK=6,16,82,0 RGB=254,220,49
CMYK=45,11,92,0 RGB=164,196,47
提升网页品质的技巧留白
留白就是留下空白，它不是一个色彩概念,而是一种形式概念,它依存于整体布局结构关系中。利用留白这种手段，可以向访客传达出设计者的诉求。
留白效果处理得当，整个画面会显得整洁而有开放感，画面的主题往往更具吸引力。留白的表现手法不只应用于网页设计，在其他领域也应用广泛，例如版式设计、海报设计、绘画等多个领域。
配色方案
双色配色 三色配色 四色配色
2.2 形式统一性原则
形式统一性原则是指在整个网站中，每个网页之间在内容上存在联系、在表现形式上相互呼应，做到整个画面风格统一、色彩统一、布局统一的效果。
在一个网站中会存在多个页面，当访客从一个页面跳转到另外一个页面时，两个页面在风格、色彩和布局上要有一定的关联，这样才能够符合形式统一性原则。如果违背了形式统一性原则，则设计出来的作品不但没有生气，就连最基本的视觉设计和信息传达功能也无法实现，甚至有可能会传递错误的信息，造成混乱。
形式统一的网页设计
形式统一的网页设计可以让访客更加快捷、精准、全面地掌握网站的内容，并给人一种内部有机联系、外部和谐完整的美感。通常可以从布局、色彩、风格三个方面来构成形式上的统一。
设计理念：这是来自一个网站中的两个页面之一，它们的布局、色彩和风格都是互相统一的。整个页面的布局非常简单，中央的宣传图很好地介绍了商品，网页Logo、标题和导航分别位于图片的左、上、右侧，使用方法一目了然。
色彩点评：该网页以白色作为主体颜色，整个画面看起来干净、清爽，在对比的作用下，黑色的文字变得非常突出，易于访客的阅读和理解。 高度的形式统一可以让整个网站看起来非常连贯，符合人们的审美习惯。
网页的布局别出心裁，将网页Logo放置画面的左侧，这样的手法是比较少见的。
简约的布局方式和白色调的配色，使整个页面看起来非常简单、大方，可以给访客留下极佳的印象。
CMYK=0,0,0,0 RGB=255,255,255
CMYK=100,100,100,100 RGB=0,0,0
CMYK=0,96,95,0 RGB=255,0,0
该网页以灰色作为主色调，整体给人一种内敛、儒雅的感觉，画面中，图形以相同的形状整齐摆放，在视觉上营造了一种平衡的感觉。商品的背景为统一的灰色，也形成了统一的视觉感受。
CMYK=78,70,64,27 RGB=66,70,74
CMYK=91,66,88,50 RGB=7,54,39
CMYK=19,14,14,0 RGB=214,214,214
CMYK=4,3,3,0 RGB=247,247,247
该网页采用类似色的配色原理，青色为主色调，绿色为辅助色。整个页面给人清新、活泼的感觉。商品包装中的绿色与绿色的草地相呼应，整个画面色彩协调统一。
CMYK=11,0,83,0 RGB=253,255,0
CMYK=83,43,17,0 RGB=0,128,182
CMYK=55,11,100,0 RGB=136,186,26
CMYK=56,4,85,0 RGB=130,195,75
CMYK=58,4,5,0 RGB=98,203,245
提升网页品质的技巧整个网站风格一致
在网页设计的过程中，尽管要融入很多创新元素，但是整个网站的风格要统一，这样才能使整个网站看起来是一个整体。我们可以通过按钮、链接、导航栏等设计，让整个网站的风格一致。
配色方案
三色配色 四色配色 五色配色
网页设计赏析
2.3 色彩和谐性原则
色彩是一种强有力的视觉语言，它甚至比网页布局更具视觉影响力。色彩的搭配会影响整个网站的定位、风格、情感。通过不同的配色方案，可以给访客带来感官上的刺激，从而产生共鸣。
色彩和谐的网页设计
每一种色彩都具有不同的情感，所以一个优秀的网页设计，色彩的搭配是至关重要的。网页中的色彩和谐，能给访客一种心旷神怡的感觉，也能够传递一种统一、正确的观念，让访客觉得这个网站是认真、庄重的。
设计理念：该网页采用海报型的布局方式，视觉效果强烈，利用全屏的图片和简洁的文案传递出产品的气质和理念，同时给人大方、舒展的感觉。
色彩点评：该网页以粉色为主色调，以红色、洋红色作为点缀色。整体采用同类色的配色方案，画面色感和谐，多种点缀色让画面颜色变得丰富。
该网页主题明确，非常具有吸引 力和号召力。
以粉色调作为该网页的主色调，非常贴切主题。
网页中虽然内容丰富，但是条理清晰，非常易于访客的理解和消化。
CMYK=14,99,76,0 RGB=224,8,54
CMYK=14,26,7,0 RGB=225,200,216
CMYK=19,100,100,0 RGB=215,5,18
CMYK=48,100,58,7 RGB=153,8,76
CMYK=63,69,45,2 RGB=119,92,114
在该网页中，有彩色的部分主要来自于网页中的图片。我们可以看到，这两幅图片色调是非常相近的，这也是网页色彩和谐的关键。
CMYK=38,23,13,0 RGB=171,186,207
CMYK=46,21,49,0 RGB=156,181,143
CMYK=25,13,19,0 RGB=202,211,206
CMYK=37,19,21,0 RGB=174,192,196
该网页采用单色调的配色方案，红色的配色与商品的颜色相协调，整个画面色彩统一、和谐。网页中黑色的导航栏有稳定画面效果的作用，白色的文字在红色背景的衬托下，显得洒脱、率真，而且易于阅读。
CMYK=91,87,87,78 RGB=4,4,4
CMYK=0,0,0,0 RGB=255,255,255
CMYK=59,76,52,6 RGB=126,79,98
CMYK=53,100,100,41 RGB=105,2,1
CMYK=28,100,100,1 RGB=199,1,0
提升网页品质的技巧主次分明的层级关系
视觉元素如果有清楚的浏览次序，那么应该明确它们的层级关系。层级关系明确的网页设计通常会按照顺序去浏览网页，网页的主旨也会在短时间内精准地传递给访客。
如果一个网页层级关系不明确，那么访客在浏览网页的过程中就会困惑，甚至离开网页。
例如在右图中，标题文字与段落文字的字号存在着较大的差异，这就是层级关系的一种体现。
配色方案
三色配色 四色配色 五色配色
网页设计赏析
2.4 简洁清晰性原则
简洁清晰性原则是指去除不重要的内容，而仅保留较少的重要内容，突出网页设计的主题信息。简洁清晰的网页设计通常主题突出，中心思想明确，非常易于记忆和理解，而且简洁、清晰、新颖的效果将更加深入人心。如今简洁清晰的网页设计越来越流行，缩短了人们观看网页的时间。大量的文字内容，会不利于突出重点，满屏的产品介绍，将导致杂乱无章。而简单的网页设计更能直击人心，快速传递情感。
简洁清晰的网页设计
简洁清晰的网页设计通常会减少设计元素的使用，或是在网页中安排大量留白，这样做的目的，在于将干扰降至最低，以便用户能够专注于重要的内容。
设计理念：这是一个网站的首页，大面积的留白可以非常清晰地突出主题，增强网页的表现效果。网页的构图十分简单，内容简练，易于访客理解。
色彩点评：该网页颜色非常简单，首先映入眼帘的是大面积的红色，具有非常鲜明的视觉效果。
在该网页中，大面积的留白增加了网页的空间感。 在精简的布局方式下，画面中的商品具有很强的存在感。
红色 白色的配色是十分经典的配色方案。在页面中，白色的文字和红色的背景反差性很大，具有很强的视觉冲
击力。
CMYK=0,0,0,0 RGB=255,255,255
CMYK=16,88,91,0 RGB=221,62,36
CMYK=84,79,76,61 RGB=30,32,33
该网页采用高明度的配色方案，画面属于亮灰色调，视觉效果柔和、优雅。网页的布局十分简约，在很大程度上提升了用户体验。
CMYK=10,34,20,0 RGB=233,187,187
CMYK=16,52,49,1 RGB=120,120,120
CMYK=12,8,11,0 RGB=230,231,227
CMYK= 8,4,3,0 RGB=238,243,247
该网页采用整张大图作为背景，具备极强的视觉冲击力，同时，可以有效地引导访客驻足观看，从而达到点击网页的目的。在该网页中，网页的布局也非常简洁，半透明的按钮，可以拉开网页前景与背景的距离，使之产生更强烈的空间感。
CMYK=78,72,70,40 RGB=57,57,57
CMYK=69,96,37,2 RGB=113,44,108
CMYK=10,8,8,0 RGB=235,233,232
CMYK=38,42,45,0 RGB=174,151,134
CMYK=31,26,24,0 RGB=188,184,184
提升网页品质的技巧文字排列与字的色彩
文字与整个版式都息息相关，虽然字体有很多种，但是，真正能够使用的也只有一小部分，所以要尽可能地选择网页安全字。在字体的选择上要符合画面整体的气氛，例如，有的字体体现严肃，有的字体体现幽默，有的字体体现力量感。也要根据信息的主次关系去选择不同的字体及字号，而且要对文字的字间距与行间距进行调整。文字颜色的选择也非常重要，因为色彩可以使文字不受位置的局限，加强或减弱文字的表现强度。
配色方案
三色配色 四色配色 五色配色
2.5 界面友好性原则
网页设计的友好性原则包括三个方面。
1. 对用户友好
能够充分满足用户的需要，以友好的信任感打动人心，从而提高网站的访问量。
2. 对网络环境友好
适合搜索引擎进行检索，便于积累网络营销资源。
3. 对经营者友好
能够使经营者的网站日常维护和管理更高效、方便、友好。
友好性原则
网页设计的友好性原则通常表现为打开网站后界面美观，便于使用，可用性高，给人以美观、舒适、大方的感觉。
设计理念：该网页采用海报式的布局方式，整体效果舒展大气。在画面中央，利用色相的区别，将版面一分为二，形成了鲜明的对比。
色彩点评：该网页采用类似色的配色方案，以青色与青绿色为主体色，以黄色和绿色为点缀色，整体色调轻松
活泼。
前景中的文字位于两个版面的中间，让两个版面产生了紧密的联系。 在背景中以人物剪影效果作为点缀，既丰富了画面的内容，又不会喧宾
夺主。
标题文字在字体的选择上非常符合整个画面的气氛，黄色的字体在画面中效果也非常突出。
CMYK=62,0,25,0 RGB=70,213,218
CMYK=54,0,39,0 RGB=106,232,191
CMYK=8,5,86,0 RGB=253,237,2
CMYK=75,3,100,0 RGB=0,178,0
该网页以黄色作为主色调，绿色作为点缀色。我们可以看到，网站的Logo是一个绿色的仙人掌，而选择黄色作为主色调是为了让访客联想到沙漠。矢量插画的风格设计方式给人一种幽默、有趣的感觉。
CMYK=91,87,87,78 RGB=4,4,4
CMYK=0,0,0,0 RGB=255,255,255
CMYK=71,13,93,0 RGB=73,170,66
CMYK= 7,17,88,0 RGB=253,217,0
这是一个网站的首页设计，画面正中间的欢迎问候非常符合网站的友好性原则。藏蓝色的色调给人一种神秘、悠远的感觉。采用俯拍手法的图像，很好地将访客的视线集中到了画面中心位置的文字上，具有一定的视觉导向作用。
CMYK=0,0,0,0 RGB=255,255,255
CMYK=47,51,69,1 RGB=156,130,91
CMYK=91,82,55,26 RGB=38,54,79
CMYK=96,93,74,68 RGB=4,10,26
提升网页品质的技巧导航栏（条）的设计
导航栏最明显的作用就是指引用户快速进入页面。合理的导航条可以使得页面层次清晰，方便用户使用。在导航栏的设计方面，要考虑其摆放位置、风格、所用技术、可用性和网页易读性。
配色方案
双色配色 三色配色 四色配色
|
購物車/收銀台(
0
) | 在線留言板
| 付款方式
| 聯絡我們
| 運費計算
| 幫助中心 |
加入書簽
HOME
新書上架
