网页设计中的配色精髓

本文格式为Word版，下载可任意编辑——网页设计中的配色精髓网页设计中的配色精华

你需要斟酌色调的多与少，了解色调在网页设计中的度，熟谙每种色调的性格，明白如何在繁杂的噪音和广袤的世界中找到属于自己的位置。下面我为大家共享网页设计中的配色精华，接待阅读学习!

用色调引导用户留神力

绝大多数网站在布局设计之初，通常就采用简朴的黑白灰，白色背景+黑色文字。而色调在这种处境下会起到强调和高亮的作用，可以引导用户留神按钮、标题和链接。

以Vibrant的网页设计为例，他们的首页中背景和图像都采用的是黑白色调，但是LOGO，按钮和汉堡图标都采用的是闪亮的黄色，它们可以很快抓住用户的留神力。

Takeit的页面设计同样如此，整屏的蓝色背景让白色的网页元素显得分外明显。白色的大标题是视觉重心，然后用户会留神到标题周边的AppStore按钮，LOGO和汉堡菜单。

这些案例都陈述了如何用色调来吸引用户留神力。

创造天性

色调的美好之初字啊与，它可以为网站或者品牌定下基调或者营造情感、传达心绪。Beagleis为用户供给制作工程简介的服务，而他们的网站配色采用的是自然系色调。当你向下滚动的时候，背风景会从绿色变为棕色、深灰甚至粉红色。自然色能给人优雅而专业的感受，从而让这个服务给人留下深刻的印象。

AninterestingDay是为一个"在奥斯陆峡湾的小岛上上为期一天的古怪小型会议'而设计的网站。web前端开发培训班黄色背景上用红色文字的网站并不多见，合作着天性十足的图片，整个网站全体的设计元素都是在为你表明"古怪'的特色。

用色调发声

用色调来发声，做一个属于自己网站的声明，这比起单纯的"吸引用户'来的更加好玩。要吸引用户留神力，色调足够突出就行，但是更重要的是，这种色调要足够为你"做声明'。你不能随意挑拣一个娇艳的色调，这个色调还要契合你的精神，想要传递的独特心绪。

就以Gaga交响乐的着陆页为例，当你开启网站的时候，鲜亮的粉色会让你眼前一亮。在"交响乐'的主题之下，用户对网站风格的预期是沉稳的色调，但是亮粉色那么完全不再低调优雅之列，但是它符合网站中交响乐活力四射、乐趣无穷和创造力十足的特色，所以，此处的亮粉色符合规律，也为设计者"发声'了。

巩固凝结力，引导用户流程

色调同样可以用来引导用户来举行用户流程。就像上方Takeit的案例，色调会引导用户的眼睛，但是不会采用太过强烈的搭配方式。微妙而富有凝结力的配色方案会让用户更加舒适，引导效果也更好。色调彼此衬托营造独特的品牌视觉，也构成用户的视觉路径，吸引他们看下去。

诸如出名的生产力工具Dropbox和Marvel也是这样来举行配色的，Dropbox尤为典型。两个工具都采用了蓝色作为主色调，北京web前端培训同时还使用了绿色、橙色和红色来搭配，整个近似色和比较色都有了，几种色调在一起会给人一种相互搭配良好的感觉。

InnovationProjectCanvas的处境那么稍有不同，设计师使用单纯的绿色来引导用户欣赏，网页并未使用更多的色调，但是童言分外优秀地完成了极具凝集力的色调设计。

图片中的`色调

借助图片中的色调来构建配色是分外好玩的用色技巧，UI元素切实不是网页中唯一可设计的色调。大图背景和高清产品图的流行使得图片色调成为整个设计中不成忽略的和总要组成，通过合成图片将色调注入到设计中，也是相当不错的选择。

CartoDB是一款可以将位置数据可视化的好玩APP，那么有什么能比真实的地图来的更加直观美观呢?所以它展现在网站首页，用最视觉化的方式来呈现自己的产品，让色调为产品代言。

说道让产品，ETQ也同样让产品优先级压过UI，极简的网站设计风格之下，配色方案鲜明是延续自产品配色。设计师让产品本身成为视觉重心，尽管不是全体的鞋子都是五颜六色，但照旧尽量让配色兼容尽量多的产品，这也是真正意义上的以产品为中心。

不是全体网站都要醒目的色调

并不是全体的网站都需要娇艳的色调。照旧有大量独特的网站使用经典的黑白灰来作为配色方案，而这些中性色也很好地呈现出了属于它们的心绪。

VisualSoldiers和TomaszWysocki的网站都是这样，优雅而干练的色调是它们的基因。简练的布局和独特的品牌定位，使得它们无需娇艳的色调来呈现CTA按钮和边角的菜单，宁静的白与