网页设计配色剖析之绿色使用技巧

姚仁全

姚仁全

2016-02-16 23:26

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的网页设计配色剖析之绿色使用技巧懂设计的网友们快点来了解吧!

每个人都有自己最喜欢的颜色,在工作以及生活中,当购买产品或进行艺术创作的时候,他们会选择自己喜欢的颜色。对于设计师来说也是同理。设计师偏好在设计中重复使用他们最喜欢的色系。虽然命题是无限的,但是他们还是喜欢遵循自己的审美感觉。

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

推广成功、运营优秀的网站,往往让用户感觉到页面和谐感强、视觉效果符合本能审美、元素具有图像象征且与产品服务紧密联系,这归功于网页设计。

绿色的定义

绿,是一种颜色,绿色处于光谱中间,波长较短,大约为500~570nm。在减色法中,绿色不是主色,但是可以由黄色和蓝色、或者黄色和青色创造出来的。绿色是加法三原色之一。

Green

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

网页设计中的绿色

绿色在网页设计中效果极佳,因而被广泛的应用。可能是因为绿色是自然中最多的颜色,绿色能够唤起一种人类对于自然的本能意识。高手能够行之有效的将绿色和其它颜色有机结合,奏出一曲色彩、色调、明暗完美互补的视觉三重奏,让人兴趣满满。

而材质的加入也能改变颜色的效果,比如,粗糙的材质表面让颜色看起来更深,平滑的表面让颜色看起来更浅。

正如色彩理论专家J.L.Morton说的那样:

成功的设计知道如何用色彩去传达意义。网页设计师应该像对待图形和布局一样认真对色彩其中蕴藏的象征意义。

绿色在心理学上具有冲击力,因此被应用于广告、机构标识和电子媒体中。想要在网络上创收的工业制造商通常会发现,官方主页上使用绿色效果很棒。

很多设计师认为,当按钮和选项采用绿色时,能够吸引更多的点击或操作,具有很强的行为召唤力

行为召唤

WedoXHTML用绿色突出了重要的信息,同时绿色的字体也易于阅读。

Wedoxhtml

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Pagelime使用绿色,作为一种行为召唤的暗示

Pagelime

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

为何选择绿色?

视觉感受器具有一些特性与限制,大多数人对于光的频谱中间部分最为敏感,比如绿色。

绿色是一种合成色,有多种用途,能够清晰的传达设计师的意图。绿色让食物看起来自然、清新、生态环保。在工业环境下,如果设备被涂上绿色,会让人感觉安全,同时也能促进生产。这种环保的感觉让人们感到洁净并不会危害到个人健康。

绿色令人放松。当一想到绿色,大多数人会想到户外和植物。因此具有平静心态的功效。

绿色能够最大化可读性,降低视觉疲劳发生的几率,这在网页设计中非常关键。还能够激发用户的视觉兴趣。

绿色的作用

绿色对人具有显著的心理冲击作用,在很多文化中非常流行。绿色使人宽心,经常在医疗设施上看到绿色。绿色降低血压,缓解神经紧张,放松大脑,启发创造,但也抑制胃口。绿色的视觉负担很小,以绿色为背景的图像看起来更有深度。

绿色虽然能够帮助人们走出焦虑和沮丧的情绪。但是如果使用过度,就让用户有种极度、仇恨、占有的负面情绪!

网页设计中不同种类的绿色

绿色对于绿色食品、保健、有机产品来说是很好的推广工具。但是要按需而定,要合理的使用。

DARK GREEN(深绿色)

通常与金钱和野心联系在一起。对于公司来说很不错。能够给用户一种强力、有名望、踏实的感觉。

Heineken

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

BRIGHT GREEN(亮绿色)

象征着自然中的生机与活力。

Yodaa

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

CELADON(青瓷绿)

在中国、朝鲜、日本经常使用的绿色,后来传播到其他国家,一种难以描述的优雅感。

Qilady

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

YELLOW-GREEN/LIME GREEN(黄绿/柠檬绿)

因为会让人联想到反胃呕吐时的病态,要谨慎使用。对于与食物不相干的网站和保健品网站来说,是很理想的颜色。

Pado

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

OLIVIA GREEN(橄榄绿)

非常的愉悦视觉,安宁大方,适合公众场合。但是也有一点军事色彩。

Mocapoke

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

BLUE GREENS(青绿色)

最容易让人接受的绿色,对男女都有吸引力。

Amitkhera

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

绿色与其他颜色的搭配

绿色和其它互补色搭配效果良好。互补色的定义:凡两种颜色相结合产生白色或灰色,则称其中一种颜色为另一种颜色的互补色。三组基本互补色:红色与绿色互补,蓝色与橙色互补,紫色与黄色互补。

了解了这些,就能有效的组织网页中的色彩搭配,深色与浅色的搭配一般不会差。另外值得一提的是,要避免在网页中使用多种色彩。最好开始设计时做做实验,调调明暗度,可以用互补色开始实验。现在,我们来看看绿色的配色方案。

绿色与蓝色的搭配

自然的呼唤感,新鲜而又清澈。象征着新生事物的萌芽。

Narhir

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

The Forbidden Corner

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

绿色与褐色,棕褐色或米黄色的搭配

这种组合,有机感强,让人感觉自然循环生生不息,也适合产品包装设计

Mailchimp

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Juandiego Velasco

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

绿色与黄色与黑色/白色的搭配

三种颜色的结合(绿黄黑、绿黑白)让页面具有户外运动感

Evacare

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Bugworldexperience

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

绿色与紫色/红色的搭配

对比强烈,生动并扣人心弦。

Designheartsme

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Naturestable

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

绿色与橙色/黄色的搭配

柠檬绿与橙色/黄色的搭配,营造了一种如同水果的新鲜感,让人感觉非常的健康环保。

Web Banner Ad Design

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Blymp

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

网页设计中应用绿色的案例:机构篇

广泛应用,作用明显。

Nutrifield

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Gbados Energy Solutions

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Compograss

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Blossoms Village

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Aquaadria

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Rcleaners

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Daguia

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Geo Vision

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Green Globe Ideas

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Ecoservice

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Gbb

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Greenanysite

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Hrasti

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

E Schneider Garten

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Rbc

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Sleepydog

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Biofoolish

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Cobahair

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Shopify

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Sprintbio

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Liptongreenmint

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Organic Supermarket

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Reallywildtravel

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Oypro

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Outdooritalia

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Terrasse Concept

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

网页设计中应用绿色的案例:机构篇

Anna Pawelczyk

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Quadrifolia

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Tyler Web Design

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Snailbird

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Anandakm

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Artist in design

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Inspirationbit

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Ladysign

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Paulicio

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

网页设计中绿色的应用案例:独立设计师篇

Cgalvin

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Pestovo Golf

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Sageblue

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Somoslaperalimonera

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Studio7designs

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Viget

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Blogfullbliss

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Ztradycja w nowoczesnosc

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

Growmedia

网页设计配色剖析之绿色使用技巧,PS教程,图老师教程网

绿色调色工具

Colourlovers: 有一些非常棒的绿色

Colorcombos: 便捷高效

Colorscheme: 在线的组织,用户可以分享自己的绿色主题。

保护环境

保护环境人人有责,必须要注意到对环境的保护,资源的合理利用,让自然的循环更加和谐有机。

展开更多 50%)
分享

猜你喜欢

网页设计配色剖析之绿色使用技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页设计配色剖析之绿色使用技巧

网页设计配色应用实例剖析之橙色系讲解

Web开发
网页设计配色应用实例剖析之橙色系讲解

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

网页设计配色应用实例剖析之红色系讲解

Web开发
网页设计配色应用实例剖析之红色系讲解

网页设计配色应用实例剖析——黑色系

Web开发
网页设计配色应用实例剖析——黑色系

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

网页设计配色应用实例剖析—紫色系

Web开发
网页设计配色应用实例剖析—紫色系

网页设计配色基本概念 网页设计怎么配色

网页设计 配色 设计
网页设计配色基本概念 网页设计怎么配色

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

几款适合设计师的交互内容设计工具

几款适合设计师的交互内容设计工具

详细解析网页设计中非常常见的错误

详细解析网页设计中非常常见的错误
下拉加载更多内容 ↓