![网页配色设计手册(写给设计师的书)](https://wfqqreader-1252317822.image.myqcloud.com/cover/217/27111217/b_27111217.jpg)
上QQ阅读APP看书,第一时间看更新
2.3 色彩和谐性原则
色彩是一种强有力的视觉语言,它甚至比网页布局更具视觉影响力。色彩的搭配会影响整个网站的定位、风格、情感。通过不同的配色方案,可以给访客带来感官上的刺激,从而产生共鸣。
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-069.jpg?sign=1739241313-uTgpQ6vZcuo9YwRU3sbZ74JrAlKW3GJA-0-1b8b21900c035c80ebe7fd57c73b11f8)
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-070.jpg?sign=1739241313-pJv7IGNgFJ0nXJrkjHVQQjqBhFnSXhSO-0-1dc86f1b4f095df11c71147c6ca2eba3)
色彩和谐的网页设计
每一种色彩都具有不同的情感,所以一个优秀的网页设计,色彩的搭配是至关重要的。网页中的色彩和谐,能给访客一种心旷神怡的感觉,也能够传递一种统一、正确的观念,让访客觉得这个网站是认真、庄重的。
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-071.jpg?sign=1739241313-6aG7TAd1VXDOVJrgLgUxssWDooEsisjI-0-7c5396105c5ba16229078e387ba5a3e4)
设计理念:该网页采用海报型的布局方式,视觉效果强烈,利用全屏的图片和简洁的文案传递出产品的气质和理念,同时给人大方、舒展的感觉。
色彩点评:该网页以粉色为主色调,以红色、洋红色作为点缀色。整体采用同类色的配色方案,画面色感和谐,多种点缀色让画面颜色变得丰富。
该网页主题明确,非常具有吸引力和号召力。
以粉色调作为该网页的主色调,非常贴切主题。
网页中虽然内容丰富,但是条理清晰,非常易于访客的理解和消化。
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-072.jpg?sign=1739241313-y9o0JNOCGuqPON0S4inkhEBkB9fe0kgN-0-664e4d50c8e94c51a2d126ae61a86eb8)
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-073.jpg?sign=1739241313-nJbO3rZAp2QpAnrDSKNZRBYAcpor9zht-0-8c68a0a0ee40bf06a69bcfb5dd1b04ed)
在该网页中,有彩色的部分主要来自于网页中的图片。我们可以看到,这两幅图片色调是非常相近的,这也是网页色彩和谐的关键。
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-074.jpg?sign=1739241313-pwvbhOcCmFL8lMNucBmRHJewBdYUeskw-0-871ccd79c79875f7b6c38f28d5c90f19)
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-075.jpg?sign=1739241313-9ElqcHmku7EnFR4pgeO5nXzEi67hsYAq-0-25f872eafa79955596d2247933eb8306)
该网页采用单色调的配色方案,红色的配色与商品的颜色相协调,整个画面色彩统一、和谐。网页中黑色的导航栏有稳定画面效果的作用,白色的文字在红色背景的衬托下,显得洒脱、率真,而且易于阅读。
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-076.jpg?sign=1739241313-7IadSTu3xIdUCSUO20krb9rvoYXoU0mk-0-dcd4fd540092eb8311f9b50597b88afd)
提升网页品质的技巧——主次分明的层级关系
视觉元素如果有清楚的浏览次序,那么应该明确它们的层级关系。层级关系明确的网页设计通常会按照顺序去浏览网页,网页的主旨也会在短时间内精准地传递给访客。
如果一个网页层级关系不明确,那么访客在浏览网页的过程中就会困惑,甚至离开网页。
例如在图中,标题文字与段落文字的字号存在着较大的差异,这就是层级关系的一种体现。
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-077.jpg?sign=1739241313-cJvmHU82I7TeRAabuxUJiSeojeXjHt2r-0-3f2f5a14dac0746979c6dd892ef792e9)
配色方案
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-078.jpg?sign=1739241313-GU2sEVx0GU83IS4OgTelb66SBbYCPlvx-0-6712022c99b9cbf7f0beb85e541e2252)
三色配色
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-079.jpg?sign=1739241313-mOmGluGNMGnOQWZKCvZ9JI14RU3XdgHf-0-8f912bea0286b2e8c9a564ca02ca180d)
四色配色
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-080.jpg?sign=1739241313-7qk0FRC7alBuYqc9d3Mb33jDHTbcB9mC-0-c666d85d69d664ac5cb1fde25154263f)
五色配色
网页设计赏析
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-081.jpg?sign=1739241313-9Z3AIMsiHOv13OpyRiszvT73erAuodJy-0-e69579bb1bf498271ea2644b35298f2f)
![](https://epubservercos.yuewen.com/3A3ED0/15477649504561606/epubprivate/OEBPS/Images/AA-082.jpg?sign=1739241313-hYzIV9ws6IOJfcKWpf7CNY1IXFynaNTh-0-328f50f67e98dc82af4e0423a457c4cf)