
上QQ阅读APP看书,第一时间看更新
2.3 色彩和谐性原则
色彩是一种强有力的视觉语言,它甚至比网页布局更具视觉影响力。色彩的搭配会影响整个网站的定位、风格、情感。通过不同的配色方案,可以给访客带来感官上的刺激,从而产生共鸣。


色彩和谐的网页设计
每一种色彩都具有不同的情感,所以一个优秀的网页设计,色彩的搭配是至关重要的。网页中的色彩和谐,能给访客一种心旷神怡的感觉,也能够传递一种统一、正确的观念,让访客觉得这个网站是认真、庄重的。

设计理念:该网页采用海报型的布局方式,视觉效果强烈,利用全屏的图片和简洁的文案传递出产品的气质和理念,同时给人大方、舒展的感觉。
色彩点评:该网页以粉色为主色调,以红色、洋红色作为点缀色。整体采用同类色的配色方案,画面色感和谐,多种点缀色让画面颜色变得丰富。
该网页主题明确,非常具有吸引力和号召力。
以粉色调作为该网页的主色调,非常贴切主题。
网页中虽然内容丰富,但是条理清晰,非常易于访客的理解和消化。


在该网页中,有彩色的部分主要来自于网页中的图片。我们可以看到,这两幅图片色调是非常相近的,这也是网页色彩和谐的关键。


该网页采用单色调的配色方案,红色的配色与商品的颜色相协调,整个画面色彩统一、和谐。网页中黑色的导航栏有稳定画面效果的作用,白色的文字在红色背景的衬托下,显得洒脱、率真,而且易于阅读。

提升网页品质的技巧——主次分明的层级关系
视觉元素如果有清楚的浏览次序,那么应该明确它们的层级关系。层级关系明确的网页设计通常会按照顺序去浏览网页,网页的主旨也会在短时间内精准地传递给访客。
如果一个网页层级关系不明确,那么访客在浏览网页的过程中就会困惑,甚至离开网页。
例如在图中,标题文字与段落文字的字号存在着较大的差异,这就是层级关系的一种体现。

配色方案

三色配色

四色配色

五色配色
网页设计赏析

