网页设计色彩运用的技巧

本文格式为Word版，下载可任意编辑——网页设计色彩运用的技巧色调几乎是全体设计体系中不成疏忽的组成片面，而在网页设计中，色调本身所发挥的作用并不单一，除了最根本的着色构成色调搭配的作用之外，色调能够通过比较创造视觉焦点，构建信息层次，影响用户心绪，甚至引导访客的行为。下面我整理了网页设计色调运用的技巧，供大家参阅。

1、通过比例变化创造视觉焦点

操纵色调的比例来创造视觉焦点是常见的色调运用手法之一，操纵色调的比例实际主要是通过操纵色调所在元素的大小来达成效果的。譬如Viporte这个网站，当你上下滚动首页的时候，每个片面都用超大的字体举行了装饰，而每个字母都使用了美丽的色调举行填充。不同的文字使用了不同的色调，并且搭配以相应的图片。每个页面的焦点断定是最中心的图片和字母，而焦点的形成和色调的比例与运用脱不开关系。操纵色调的占比，无论是多还是少，只要有明确的目的，总能形成吸引留神力的焦点。无论是我们常说的“万花丛中一点绿”，还是极简主义设计中大面积的留白，都是色调比例操纵下所构成视觉焦点的典型案例。

2、通过比较度吸引用户留神

在设计过程中，使用色调来操纵比较度也是设计师频繁使用的技巧之一。当设计的整体色调趋于温和和宁静的时候，突然注入强比较的色调，能够瞬间抓住用户的留神力。

而Thinx这个网站在设计的时候就将比较度操纵得很好。网页主体的配色采用的是经典的黑白搭配，白色的背景搭配黑色的文本。而整体的设计感的来源那么主要源于排版和彩色的图片。网站所采用的图片明显经过用心的选择和设计，红色的底色、黑色的内衣和模特外露的细腻肌肤色在图片强烈的碰撞，美丽而弥漫诱惑，图片大胆的色调搭配和素色的背景与文字形成了鲜明而猛烈的比较，无论是经典的红黑搭配，还是永恒的黑白配色，都足够美丽和吸引人。

Thinx这个案例我分外热爱，并且经常会用到，由于它证领略设计师并不确定非得靠高饱和度的霓虹色来创造高比较度的配色。即使是两种平衡的颜色，也能让整个设计脱颖而出。

3、使用色调创造UX模式

高度一致的配色方案能够创造出视觉模式，而延迟到用户体验上，那么会让整个UX呈现出模式化的特征。模式化的设计让用户更轻易适应，用户更轻易摸索出规律，也更轻易产生相匹配的预期，换句话说，UX模式能够培养用户习惯，同用户产生深刻的关联。就像用户习惯了某些特定的图标之后，在其他地方看到这些图标就知道它们的含义，明白该如何交互了。譬如，小房子图标会让用户想到首页、主页，而垃圾桶那么会关联上删除的概念。色调相对而言更加主观，由于每个网站和APP都会采用自己的配色方案，不同的色调代表不同的含义。

那我们就拿Underbelly这个产品表示页作为例如吧。在Underbelly这个网站中，全体可点击的组件都是蓝色的，你在试用网站几秒钟之后，能够快速掌管这个UX模式，并且明白如何操作。这就是Underbelly通过色调构建UX模式的方法。UX模式的优势在于，它让用户更快地熟悉你的产品。越轻易识别，用户的想法越少，产品的的使用也就更加顺畅了。

4、使用色调来创造层次

当我们欣赏网页和各种界面的时候，信息的层次感很大程度是借助视觉来营造的。使用色调来创造视觉层次感就很顺其自然了。

在Skore的产品页面中，每一个片面都有使用到绿色的元素。重复的绿色元素不仅创造出可供用户快速识别的模式，它也让用户能够快速明白哪些因素更加重要。通常，我们解释视觉层次的时候，会用不同大小、粗细的字体来阐述信息层次和布局，但是不同强度的色调，同样可以实现层次的划分。

在Skore这个案例当中，绿色和灰色的文本以及白色的背景之间有着良好的比较度，整个配色方案不凭借其他的强调色，以绿色为主。这种相对稳定的配色布局有助于让每个片面都有层次地呈现出来。绿色不仅吸引用户关注关键的元素，而且为不同的片面的内部供给层次布局。

5、充分利用色调的好像性

除开其他的目的，设计师使用色调或者调整色调的目的，根本都是为了创造设计的一致性。InVision的年度总结页面使用了从粉色到紫色的渐变，在页面的下方，粉色和紫色同样应用到了按钮中，此外，在着陆页当中，将比较度明显的白色置于粉色+紫色的背景之上，确保信息的明显呈现。假设色调每次都不一样，那么整个设计看起来就不是那么令人难忘了。

另外一个案例来自于Comotion。Comotion的工作室首页采用了几种不同的色调，但是这些色调的色调是分外接近的，从而创造出了一种和而不同的配色方案。在这个设计案例当中，几个不同的色调互为搭配，并不会太过于突出，但是又能够恰到好处地举行强调，最终让色调足够好