如何在网页设计中使用颜色

   在网页设计中,对目前的网站配色(Landscape of color)认真琢磨一下还是非常有趣的。大多数网站或多或少相同,但是颜色的设计搭配却是一个非常给力的工具。

  我并不想尝试去阐述一些具有革命性的东西或者是特别的发现。但如果大部分网站都采用同样的配色方案,那对颜色意味着什么呢?实际上,远超出你的想象。幻想一下整个世界的每一个网站都是非常漂亮和五彩缤纷的,但它同时也意味着千篇一律。这就像你文章中每一个段落的粗体。

  因此,当配色方案比较柔和的时候,它允许有更多的机会。

  关注你想要的任何东西

  许多网站都有一个基本的灰度配色方案-白色的背景和黑色的字体。(网页中)想让你看到的部分会赋予颜色作为强调。这就是为什么网页不会充满颜色—它们使用在想让你看到的按钮,标题或者链接上面。


  使用Vibrant,例如,当你第一次登陆它们的主页,主页的背景和图片是黑白的,网站标志,可点击的按钮和汉堡菜单是亮黄色,这些可以很快的(在灰度背景中)脱颖而出,吸引你的注意力。

  另一个例子是Takeit; 当你第一次登录他们的主页就看一个大大的蓝色背景。然而,其他的都是白色的。最前面并且居中的大标题会让你的注意力集中在中间。同时,你的眼睛在很短的时间内就能注意尺寸较小但是仍然明显的APP商城的按钮。你可以看到是颜色如何指引用户的注意力的。


  创造个性

  颜色是非常奇妙的,因为它可以设置一个网站或者品牌的语气和情绪。Beagle(很 遗憾,译者访问的时候,网站已经不在了)提供创建项目简介的服务,他们的网站使用了较轻的茶色。当你向下滚动他们的主页时,你会看到棕色,炭色,绿色,甚 至粉红色这样一些愉快的色调。世俗的色调(earthly tones)看起来专业和优雅,给人对于其所代表的公司(留下)一个非常好的印象。

  An Interesting Day 网站它特指“在奥斯陆峡湾(Oslofjord)的一个小岛上举办的一个不可思议的,为期一天的会议”( “a weird, one-day conference on a tiny island in the Oslofjord”)。当红色的背景和红色的字体在上面的是偶,你一定会有一种怪异的不同的感觉。这不是我们每天看到的东西。这看起来很好,但更重要的 是这种配色方案传达了一种很明显的“怪异的”(weird)个性。


  写一个非常重要的声明

  通过颜色做一个声明(statement)会很有趣。但你必须保证这个颜色很显眼并且能抓住用户的注意力。这很简单的说~。但对于语句来说也必须是 一个很好的颜色选择。你不能只是随便选取了一种亮色,(反之)它的外观和感觉必须对整个页面来说具有意义和目的性。举个栗子,这是Gaga Symphony的登录页面。当你登录到他们的界面,你会被亮丽的粉红色背景所包围。这不是你期待的交响曲。相反,你觉得交响乐应该更优雅,你期待静谧的色调。但是,不是这一个,Gaga交响乐是充满活力,有趣和创造性的。因此,(其所使用的)桃红色(hot pink)是有意义的。


  提供内聚(Cohesion)和流动(Flow)

  颜色也可以指导用户使用流式页面。在上面的Takeit的例子中,她比较温和的准确指引了用户的注意力。颜色为了指导用户,它可以变得敏感 (subtle)但不需要戏剧性(dramatic)或者过分夸大(over the top)。尤其当各种颜色之间开始紧密结合时特别有效。这基本就是品牌颜色工作的原理。

  看Marvel或者Dropbox。他们APP的配色方案都使用了明显的蓝色,但是你看在它们图形中的其他颜色,像绿色,橘黄色或者红色,非常恰当的搭配在一起;这样就让他们变得有意义了。


  一个不同的例子是Innovation Project Canvas。他们使用了绿色来指引用户(操作)沿着他们的页面滚动。你不需要使用许多颜色来创建一个漂亮的流式页面;仅仅使用一种颜色也可以做得更好。Innovation Project Canvas仅仅使用他们的绿色就达到了极佳的参与指导用户的效果。


  图片中的颜色

  一个关于颜色的有趣的小窍门是通过图片去使用它。用户界面的基础不仅是给网站添加一些颜色而已。随着登录页面上照片背景和大产品图片使用的兴起,去使用合成的图片为你的设计带来色彩也是一个不错的主意。


  CartoDB 是一个能够让你将地理位置数据可视化的APP。(CartoDB是一个开源的允许你在web上存储和虚拟化地理数据的工具,这个数据库通过灵活方式让开发 者更容易的创建地图和设计自己的应用。)有什么最好的方法可以炫耀它们的服务有多好而不是炫耀他们的地图有多美吗?那就是他们的主页。这是一个机智的方式 去为他们的的产品说话,同时为他们的页面增加视觉兴趣和色彩。

  说到产品为它们自己说话,ETQ让 他们的鞋子大大胜过了他们的UI。这个网站风格非常简洁,以最低限度去延伸他们的配色方案。他们把重点放在他们的产品上。尽管他们不是所有的鞋子都像例子 中的一样富有色彩,但是要让他们的鞋子成为其设计中最大的颜色板块,仍然有一段很长的路要走。ETO真正的让鞋子脱颖而出。


  谁需要颜色呢?

  有趣的是看到网站没有颜色。有时候你不需要它(颜色)。网站没有红色,绿色或者蓝色也仍旧可以很华丽。灰度配色方案可以为品牌创建必要的外观和感觉以及发表声明。


  Visual Soldiers确实很好,没有颜色,就像Tomasz Wysocki’s portfolio。 这两个网站有同样的优雅。因为整体缺乏色彩,所以他们反而抓住了你的注意力。你想在一个CTA(引起用户动作)或是一个链接中找到一些轻微的蓝色或者绿色 的提示,但是这里没有。颜色的缺乏是这两个网站品牌的一部分。就算仅有黑和白两种颜色,他们看起来也同样的时髦和美观。


  结论

  就像你所看到的,颜色是非常强大的。如果你能让颜色做一个设计,它可以做到许多事情。颜色可以通过流和重要的声明指引用户的眼睛,帮助指导用户。颜色充满个性,也可以十分有趣。对我而言,我认为颜色,或缺乏(色彩),赋予了设计生命。

  So have fun with it.

时间: 2024-09-29 08:46:56

如何在网页设计中使用颜色的相关文章

网页设计中的颜色如何搭配

  网站建设第一步要做到的就是要有精美的网页设计效果,而我们往往对于美都是有追求的,我们也抵挡不住美给我们带来的好心情,要知道,美丽的事物总是能让我们的心情都更加愉悦,网页设计的美也能给企业带来意想不到的效果.由于每个人的审美观是各有差别的,所以网页设计不可能做到人人都满意,但是一个好的设计,在不喜欢这种风格和颜色搭配上的眼里,也不会差到哪里去的. 对于做网页设计的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的网站,你会发现他们更多运用的是白色.蓝色.黄色等,使得网

网页设计中文字颜色的搭配技巧

技巧|设计|网页|网页设计|中文 对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但浏览一下大型的商业网站,你会发现他们更多运用的是白色.蓝色.黄色等,使得网页显得典雅,大方和温馨.更重要的是,这样可以大大加快浏览者打开网页的速度. 一般来说,网页的背景色应该柔和一些.素一些.淡一些,再配上深色的文字,使人看起来自然.舒畅.而为了追求醒目的视觉效果,可以为标题使用较深的颜色.下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可

网页设计中颜色搭配技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网页设计师通常通过不同颜色来呈现网站风格定位,表达情感和意图.颜色到底是怎样体验情感的呢?下面简单介绍一下网页设计中的颜色搭配: 第一.弄清楚颜色所表达各种情感.颜色根据感情分为冷色.暖色和中性色.(1)红色.黄色.橙色等暖色主要表达的是温暖舒适的感觉;(2)蓝色.绿色和紫色等冷色主要呈现清凉或寒冷的感受.(3)灰色.棕色等中性色所表达的是平

色调心理效应 颜色在网页设计中的重要性

你可能尚未意识到颜色在网页设计中的重要性.你可能觉得一个网站是绿色的,换成蓝色也行,反正无所谓.长期以来,我都在思考颜色在网页设计中的重要性,最近我才得出结论:颜色真能改变很多东西,并且能让读者感受不一样的东西.每种色调的背后都隐藏着某种心理效应,接下来我会深入探讨这个问题. 使人兴奋的东西有很多.科学实验指出,使人兴奋最有效的办法之一,就是将红色投射到其房间墙壁上.住在这样房间的人的心率和血压比蓝色房间的人更高.众所周知,红色能提高兴奋度.这也很好解释了快餐店喜用红色作为主色调的原因.比如,可

网页设计中白色最简洁优雅与和平颜色的应用

当你想到白色的时候什么会跑进你的脑海中? 白色是最简洁,优雅与和平的颜色. 白色被广泛应用于博客,网上证券,电子商务和其他各种网站的网页设计中. 白色可以被用在字体颜色,背景颜色,链接,图片等等. 如果你认为白色网站不那么http://www.aliyun.com/zixun/aggregation/18473.html">吸引读者,那么事实你会感到惊讶.一些设计优秀的网站也在页面上使用白色.在这篇文章中你会找到怎么样在网站中使用白色的灵感与建议. Minimal Beautiful Si

网页设计中最常用到的设计细节

前一段时间在企业管理界流行一句格言叫"细节决定成败".企业管理当然不是我们这里要讨论的主题,但是,把这句话放在网页设计当中的确是颠扑不破的 真理.我们的眼睛和感觉总是非常敏锐的,即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品. 虽然他说不出来为什么这件东西比那些都好,但是直觉会告诉他他自己喜欢哪一个.如果别人向我们问起为什么这件作品要优于其它呢?我们的回答是"很大一部分原因是因为优秀的设计作品总是充满了丰富的细节."在这篇文

网页制作高手进阶:网页设计中的文字运用

设计|网页|网页设计  如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分.网络世界五彩缤纷,涌现出大量优秀精美的网页.大量网络信息的呈现,无非就是通过文本.图像.Flash动画等,其中, 文本是网页中最为重要的设计元素.对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见.     文字的格式化     1.字号.字体.行距字号大小可以用不同的方式来计算,例如磅(Point)或像素(Pixel).因为以像素技术为基础单位打印

HTML网页设计中关于字体设计的详细讲解

设计|网页|网页设计     ●字体(Font)的设置是网页制作新手遇到的第一个难点.如何控制字体大小,如何取消超链接字体的下划线是网友来信问得最多的.好,我们来彻底研究一下字体的各个方面:     字符集的设定.     在查看html文件原代码时,我们经常可以在文件头<head>和</head>之间看到这么一句代码:     <meta http-equiv="Content-Type" content="text/html; charset

合适的配色方案在网页设计中的运用方案

文章描述:论颜色在网页设计中的重要性 你可能尚未意识到颜色在网页设计中的重要性.你可能觉得一个网站是绿色的,换成蓝色也行,反正无所谓.长期以来,我都在思考颜色在网页设计中的重要性,最近我才得出结论:颜色真能改变很多东西,并且能让读者感受不一样的东西.每种色调的背后都隐藏着某种心理效应,接下来我会深入探讨这个问题. 使人兴奋的东西有很多.科学实验指出,使人兴奋最有效的办法之一,就是将红色投射到其房间墙壁上.住在这样房间的人的心率和血压比蓝色房间的人更高.众所周知,红色能提高兴奋度.这也很好解释了快