- 网页配色设计手册(写给设计师的书)
- 孙芳编著
- 980字
- 2025-02-16 19:13:54
2.1 主题鲜明性原则
网页设计的主题是整个网站的灵魂所在,它起到对网站的整体风格和特色做出定位、规划网站的组织结构的作用。通常,设计师会通过视觉设计去表现网页的主题,这就要求设计师不但要以单纯、简练、清晰和精确的形式进行表达,而且在强调艺术性的同时,更应该注重通过独特的风格和强烈的视觉冲击力来鲜明地突出设计主题。可以通过以下三点做到网页主题鲜明。
(1)对网页构成元素运用艺术的形式美法则进行条理性处理,以便更好地营造符合设计目的的视觉环境,从而起到使主题鲜明的作用。
(2)抓住访客心理,按照视觉心理规律和形式将主题主动地传达给访客,以使主题在适当的环境中被访客接受。
(3)网页的效果力求简洁,要点明确,以简单明确的语言和画面来体现本站的主题,从而吸引访客的注意。


主题鲜明的网页设计
在制作网页的初期,一定要为网页设定一个明确的主题,尤其是个人网站。只有明确网页的主题,才能在此基础上更好地进行创意构思,从而形成总体的设计方案。

设计理念:在该网页中,画面中的图片都与食品相关联,从而可以判定这是一个以食品为主题的网页设计。该网页结构并不复杂,内容一目了然。
色彩点评:该网页整体呈现出一种灰色调,是典型的“日式风格”配色。其中采用浅卡其色作为背景颜色,让整体画面呈现柔和、朴素的效果。
导航栏位于网页的左侧,并将文字竖向排列,非常有民族特点。
画面中,宣传图中的灰色背景与浅卡其色的对比较弱,给人一种柔和、亲切的感觉。
作为食品类的网页设计,以绿色作为点缀色,给人一种健康、自然、美味的视觉效果。


该网页为运动主题的网页,以白色搭配红色,给人一种积极、奋进的视觉印象。该网页布局简约,以大幅图片作为视觉中心,非常具有吸引力。


这是一个矢量插画风格的网页设计,画面中颜色简单,配色效果鲜明,非常具有吸引力。该网页以冰淇淋作为主题,它并没有以实景图片作为宣传重点,这种另辟蹊径的设计方式,给人留下深刻的印象。

提升网页品质的技巧——留白
“留白”就是留下空白,它不是一个色彩概念,而是一种形式概念,它依存于整体布局结构关系中。利用留白这种手段,可以向访客传达出设计者的诉求。
留白效果处理得当,整个画面会显得整洁而有开放感,画面的主题往往更具吸引力。留白的表现手法不只应用于网页设计,在其他领域也应用广泛,例如版式设计、海报设计、绘画等多个领域。

配色方案

双色配色

三色配色

四色配色
网页设计赏析

