为企业提供网站平台解决方案

服务热线:18661157512

QQ客服:点击这里给我发消息 网站建设在线咨询

最新动态:

视觉设计

你的位置: 首页>>我的观点>>视觉设计

如何在网页设计中使用正确的色彩以表达情感

点击数:43032015-04-07 19:48:14 来源: 网站建设|网站优化|百度优化|网站推广- 桐骆网络

新闻摘要:如何在网页设计中使用正确的色彩以表达情感

使用颜色的技巧并不比一个艺术形式较少。
在整个人类历史上,主画家和其他艺术家已经赢得了他们的操纵能力,色彩全球认可。在当今时代,在艺术形式,现在开辟了很多新的商业和商务应用,首先在广告,现在在网页设计。与几乎见底的深度,颜色使用的技能可以提高和完善不休。
我们将探讨色彩理论和配色方案的基本原理,然后检查某些颜色的情绪影响。


色彩理论


色彩的话题可以自行填写一整本书,所以我们会坚持到什么是有关这里的UI设计。我们可以色彩理论分解成三部分关于网页UI设计:


  • # 对比度 - 色彩每个灯罩都有一套相反的 - 一个“头号克星”,其对比度是远远超过任何其他的色彩更大。您可以使用下面的色轮,以找到每个特定颜色的对面。简单地定位圆上的相对端的颜色。
  • # 互补 - 颜色并不总是相互矛盾:互补色口音彼此衬托出对比他们最好的,相反的。这些是紧邻彼此在色轮上,例如颜色,紫色的补码是蓝色和粉红色。
  • # 活力 - 每种颜色唤起特定的情绪:较亮的暖色调(红,橙,黄)往往激励用户,使他们的警觉,而较暗的色调酷(绿,蓝,紫)往往更放松和宁静。 CNN采用的是红色的横幅在他们的顶部导航,提高警觉性,适合网站的最新新闻内容的颜色决定。


色彩理论在网页设计不仅仅是视觉装饰,它可以对您的企业改变游戏规则的影响。如果你不相信我们,读取转换顾问杰里米·史密斯的文章,解释了如何颜色的心理可以拓展业务。

活力:色彩的情感意蕴

不可否认的情绪和色彩之间的联系:其实,人类已记录的颜色,因为中世纪的心理影响。当然,任何网页设计师都想利用这个为好,因为正确的颜色营造合适的情绪和氛围,让您的网站。
我们已经分析了研究人员在Vandelay设计和碎杂志的建议,并通过我们自己的经验,在UXPin过滤它。
请注意,在世界各地不同的文化感知的颜色不同。我们描述情感关联最紧密相关的西方文化。为了更深入了解不同的文化是如何看待的颜色,阅读这一块彻底从网页设计师车厂。


推广:电力,重要性,青年
色520x279如何创建色彩正确的情感在网页设计
最刺激的颜色,红色是如此激励它已被用于增加血液循环。代表激情和力量,红色,吸引了最多的关注,这就是为什么它是常用的警告和重要通知的颜色。
红色很适合没有路NSA的网站,其目的是呼吁警报从NSA一个潜在威胁。在单页网站的第一部分用红色特别聪明,因为它提请注意的主要消息而引起的生理人“走出危险区”,由向下滚动。此,当然,不仅使用户与更多的内容。
然而,这可能对你不利,因为红色可以煽动愤怒,或者至少是过度刺激。如果你正在寻找一个更轻松的氛围,有节制地(或者至少在一个较淡),或根本不使用它。


提倡:友好,能源,独特性

芬达520x312如何创建色彩正确的情感在网页设计
作为国内最静音的温暖的色调,橙色是唯一的通用性。作为一个主要的颜色也可以是接合和活力,并作为二次色它也保留在一个不显眼的方式这些属性。橙色也有助于创造一个运动感觉和能量。
除了它是品牌风格的一部分,橙色可以很好地芬达的轻松和卡通的网站。色彩显示的创造力,同时保留熟悉。


提倡:快乐,热情,古风(暗色调)

黄520x265如何创建色彩正确的情感在网页设计
黄色是比较通用的颜色之一,这取决于阴影。
明亮的黄色是最有活力的颜色,没有红色的严重程度。黄色中间色调赋予的舒适感,同时还感到振奋。暗色调(包括黄金)可以给古代的印象,并借给了永恒,智慧和好奇心的空气。
在从网页设计公司的Flash Media上面的例子中,黄色的暗的阴影,散发着活力,好奇心,和权威。这使得有很大的意义的公司谁兴旺的咨询和技能的价值。


绿

推广:增长,稳定,经济的主题,环保主题

绿色520x236如何创建色彩正确的情感在网页设计

绿色桥梁冷色和暖色之间的差距,但更趋于冷静的颜色。这意味着绿有蓝一样放松的效果,但仍保留了一些黄色的活力特质。因此,它创建了一个非常平衡的,稳定的氛围。暗色调散发出更多的钱/丰衣足食的感觉,你可以与Ameritrade的见上面。


蓝色

提倡:平静,安全性,开放性(较浅的颜色),可靠性(暗色调)

蓝色520x242如何创建色彩正确的情感在网页设计

喜欢黄色,蓝色的意思有很大关系的阴影。所有的蓝色都普遍放松和安全,但较浅的颜色会显得更友好,而较暗的人似乎更忧郁。社交媒体网站,如Twitter和Facebook采取的轻型和中型色调的优势,而企业网站偏爱强度和可靠性的暗色调“色调。

范·弗利特和陷阱,事件设计机构,使得巧用深蓝色的。通过在后台的花蓝,它们在视觉上暗示其在花艺设计的专业知识,同时也散发着信任和可靠性。它使一个很大的意义,因为他们计划极高的知名度(和有些伤脑筋)如婚礼事件。


提倡:奢华,浪漫(较浅的颜色),神秘(暗色调)

紫色520x261如何创建色彩正确的情感在网页设计
历史与皇室有关,紫保留奢华的基调,甚至颓废的地步。
紫色暗示奢华和财富一般,使之成为时尚和奢侈品的热门选择(甚至巧克力,像上面的例子吉百利)。较浅的颜色像薰衣草(使用粉红色调)被认为是浪漫的,而暗色调看起来更加豪华和神秘。


推广:电力,急躁,复杂

黑520x263如何创建色彩正确的情感在网页设计

中性色彩最强,黑色,几乎每一个网站上存在。
它可以采取不同的特性取决于其配套的颜色,或支配所有这些,如果过量使用。其强度之中中立使其选择的颜色为大段文字,但作为一个原色能给急躁,精致,甚至邪恶的印象。
对于大多数网站,黑色用于创建复杂性和永恒的瞬间感觉。优雅的感觉特别强烈时,也用白色字体配对,并设置对简约的布局,你可以在看“梦前屈”微型从百色。


提升:清洁,美德,简约

白520x311如何创建色彩正确的情感在网页设计

白色是美德,纯洁,在西方文化中最纯真关联的颜色。
极简主义和简单化网站最常使用它作为背景。通过绘制所有的颜色的至少注意,白色是最适合重音其它颜色的页面上。
这工作特别为艺术家Kaloian Toshev的awwwards殊荣的网站。白色背景提请注意他的充满活力的艺术作品,同时创造高雅的艺术画廊的光环。


提倡:中立,形式,忧郁

灰色520x262如何创建色彩正确的情感在网页设计
而在某些情况下,它似乎育雏或悲伤,灰色仍然是为寻找传统或专业的热门选择。但是,灰色的谎言在改变其色调的最大优势之一 - 改变了树荫可以给你属性的定制组合,从白色和黑色,在灵巧的手一个强有力的工具。
当与明亮的色彩配对,并在一个平面UI呈现,awwwards的灰色背景感觉更现代的比它阴沉。


米色

提倡:周围的颜色特征

米色520x299如何创建色彩正确的情感在网页设计

米色的颜色的通配符,作为其主要用途是绘制出其他颜色。
就其本身而言,米色显得呆板,虽然这可以被用来象征谦虚。然而,这将需要在它周围的颜色的特性,使其成为一个有趣的设计工具。由于这些原因,米色几乎总是仲或背景色。
米色(如在Dishoom网站)的暗色调将创建一个朴实,几乎纸张般的质感,而较浅的颜色感觉新鲜。在这种情况下,围绕品牌名称,变暗向外较淡,帮助创建,该餐厅是一个新鲜的现代手法朴实的美食的感觉。


象牙

提倡:舒适,优雅,简约

象牙520x307如何创建色彩正确的情感在网页设计
在情绪反应方面,象牙(和奶油)是白色的细微变化。
象牙被视为较暖(或更少无菌)较白,使它更舒服,同时仍渗出相同简约和互补的方面。象牙应当用来代替白色的软化它和较暗的颜色之间的对比度。对于本领域的我的咖啡的网站,为橙色/褐色重音添加到奶油背景(看起来性能稍微灰色)创建的温暖的感觉。
如果你想读的色彩和情感更多的分析,看看这片由1stWebDesigner其中解构色彩运用,从20顶级品牌。

配色方案

每个网站都有一个配色方案,主色调,它使用的主要领域。正如我们一直在讨论,反复使用这些颜色会影响到使用者的心态和情绪,通常是下意识的,所以选择他们。

虽然有很多不同的方式来搭配颜色一呆,我们将专注于3个最成功的,普遍的,那些:

三元 - 该三元是最基本的三种结构的平衡。用活力和互补,但从棘手的对比度偏离的三元结构是最安全和最可靠的方案。在12步色轮,选择位于距离彼此120度的任何三种颜色:1色为背景,和两个用于内容和导航。
为三如何使用颜色在网页设计营造合适的情绪

化合物(拆分互补) - 接下来的计划变得有点棘手拉断,但如果做得好可以是有益的。这一概念使用四种颜色:两种截然不同的对和两个互补对。

复合如何创建色彩正确的情感在网页设计
看看如何惊人的佛罗里达州蓬勃发展的页面看起来只是根据它的颜色孤单。红色和绿色的对比与文本标签和植物,再加上蓝色和橙色的天空之上的沙漠。与此同时,在红/橙和蓝/绿互补真正带动整个视图在一起很好。
floridaflourish 520x255如何使用颜色在网页设计营造合适的情绪

类比 - 最后有类似的计划,但仅集中于互补色。这个人真的凸显所选颜色的活力,例如,红橘黄色的类似计划,会显得很有朝气,活泼。虽然这个方案是比较容易拉断,关键是在决定颜色的活力要使用的,因为它会被夸大。
全日空如何创建色彩正确的情感在网页设计
通过使用蓝色,绿松石,和绿色为自己的类似网站,Blinksale创建一个柔和的,甚至安全的氛围,它的网站。请注意他们是如何使用对比黄色提请注意他们的号召行动。
websiteexample如何创建色彩正确的情感在网页设计
我们刚才讨论的色彩理论如何能提高你的UI设计,只需基本面,但有没有限制的深入,你可以去网站上的颜色。如果您想了解更多,您可以检查出这片碎杂志就如何创建自己的调色板。

色彩工具

值得庆幸的是,有很多工具可以帮助您把色彩理论付诸实践。看看这些预先制作的调色板,所以你并不需要从头开始。

    Adobe Color CC  - 以前称为的Kuler,这是目前最值得信赖的色彩援助工具之一。
    Paletton - 如果你在需要速度的工具或简化的易用性,这最小的工具,可以帮助你的。非常适合初学者。
   平板UI颜色选择器Flat UI Color Picker  - 虽然对于平板UI设计只,这仍是色彩选择一个有用的和方便的工具。
为了进一步缩短学习曲线,你还可以检查出28个网站的色彩工具列表。


另外

没人指望你是米开朗基罗,但色彩使用的一个基本的了解是一个坚实的前提网页设计。
正如我们刚才解释,颜色与他们进行了大量的额外重量,有时被忽视。无论你选择什么颜色,他们对设计作为一个整体有一定的影响 - 从通信对比度或相似,以唤起精确的情绪。
要了解更多关于如何创建视觉易消化接口,下载适合人眼的免费电子书的Web UI设计:色彩,空间,对比度。视觉案例研究包括来自33家企业,包括的tumblr,Etsy的,谷歌,Facebook,微博中,对讲,和Bose。
【责任编辑:(Top) 返回页面顶端