网页设计的色彩知识

网页设计的色彩知识

以下就是网页设计的色彩知识等等的介绍,希望为您带来帮助。

网页设计的色彩知识

一:每种颜色代表的情感

#颜色分为暖色(红色/橙色/黄色),冷色(蓝色/紫色),中性色(黑色/白色/灰色)。暖色更刺激,冷色能够使人镇定#

#红色:最刺激的颜色,用来获取注意力和提高警惕。作为能量色,被用来象征权力和年轻活力,对于想打造休闲感的站点不适用#

#橙色:带有红色的能量属性,但是要稍微镇定一些。通常用于展示兴奋和娱乐性#

#黄色:温暖有活力,明亮的黄色极其富有刺激性,中性黄色更加热情,深黄有种复古和永恒的气息#

#绿色:居于暖色和深色之间,绿色混合了能量和舒适。典型象征积极上升趋势,在西方国家代表金钱和环境#

#浅蓝:友好、安全、诱人,Facebook和twitter都使用了这个颜色#

#深蓝:镇定,但是比浅蓝更可靠、忧郁。专业性强的公司比较实用#

#紫色:皇家的颜色,紫色能引出奢华的感觉,甚至颓废。浅紫散发出浪漫,深紫展现出神秘元素#

#黑色:所以颜色中最强的颜色,所以字体和文本使用这个颜色。能够撑起周围的颜色,单独使用可以创造力量和精致感#

#白色:作为主色调,白色释放出干净、纯洁无暇。作为次要色,能够让人更加注意刺激元素,因此完美适用于支撑色#

#灰色:灰色代表中立,在大师手中最能展现功力#

二:对比和补充:颜色组合的艺术

颜色转盘

#对比色:在颜色转盘上相隔至少两格(见下图)。用来吸引注意力或者将某颜色分离,适用于“召唤行动”#

#互补色:能够创造愉悦的美感,颜色转盘对面的颜色就是互补色(见下图),同一种颜色的不同深浅也可以作为互补色。当两个互补色并列开来,他们会将对方代表的情感推向极端。红色放在绿色旁边,会显得更加“刺激、激进、有力量”,绿色也会显得更加舒适。#

三:配色方案:混合颜色的最佳方法

#单一色:只使用一种颜色,或者同一颜色的不同层次。单一配色能够产生视觉愉悦并增强呼应感,但是很难将单个元素分隔开来。由于极简主义非常强调内容,单一配色方案经常用于极简主义设计#

#相似色:相似色比单一配色更具有多样性,更加容易区分元素。采用相似色配色的网站给人镇定和和谐感,相似色在大自然中很常见。采用相似配色方案的网站通常会选取一种主色调,主色调的情感连写最为强烈。次级色用来区分特定元素,如果还有第三种颜色那仅仅用来表示强调#

#互补色:互补色使用相对的颜色创造动态感和感官刺激页面。这种配色方案的优势是各个元素能够明显区分,创造层次感。使用互补色时尽量不要降低饱和度,否则会降低效果。#

#三色系:三色系是最安全的配色方案,转盘上三个角的颜色能够确保视觉平衡,采用三色系的网站在配色上虽略显创意不足但是却十分安全。大多设计师认为三色系是最好的配色方案,但是还要看项目的具体情况,对于用户范围很广的网站这是非常好的选择,略带愉悦感的同时不显乏味。然而,由于缺少对立,在单个元素的吸引力上效果会降低。并且安全的同时意为着缺少激进 — 这种时尚和音乐网站需要风格。医疗网站适用于这种配色方案。#

#分撒互补色系:分散互补色系带有互补色的特征如吸引力,同时创造了颜色的多样性。如今的网页有很多采用这种配色方案,最普遍的是使用黑白作为支撑色,第三个颜色用来突出单个元素(通常红色或绿色)。如果需要更加风格化的效果,可以将三个色颜色加深#

#矩形互补色:由两对互补色组成,想要用好是有一定难度的。选择颜色的时候要尽量平衡暖色和冷色。#

四:一些颜色工具

#Stylify ME:输入网址就能解析出网站使用的所有颜色,并给出具体的色值,参考其他网站配色的神器#

#Adobe Color CC:老牌的配色辅助工具(前身是 Kuler)#

#flatuicolorpicker:扁平 UI 颜色拾取器,快速方便的颜色选取工具#

#Pletton:新手实战利器,确定单个颜色的不同方案#

#Material Palette:物料设计配色方案推荐,选择两种颜色自动输入配色值,Material Design 配色神器#

#Coolors:生成复杂的配色方案,比其他工具要复杂一点#

#Color Combos:网页设计配色论坛,可以阅读博客,浏览案例并获取其他资源#

网页设计师的色彩指南

网站显然是与人沟通的非常直观的方式,和颜色在传播过程中起到了非常大的一部分。网页设计师谁真正了解色彩的力量可以创造在线特性,视觉吸引力的一种方式,其他的设计师似乎不匹配。指导我们在这里放在一起会导致你在发现通过色彩的旅程,这是什么意思为您的网页设计工作。享受!颜色的定义我们的整个世界是由颜色。它会影响我们的情绪,积极和消极。颜色还可以对你的胃口的影响。奇怪的是,我们所看到的颜色无非是光从不同的对象和被拾起和被人眼过滤反射。

但实际上从颜色是什么和我们如何在Web或图形设计的解读呢?色调这些都是纯粹的所有颜色,并有12人在总。这个数字是由三个原色,三次色和六个其他颜色。这12种颜色在光谱中所有其他形式的基础色,所以可以单独使用,或者混合在一起,创造了你可能需要的任何其他颜色。色彩虽然这听起来像是一个复杂的设计理念,色彩无非是一个白原来的颜色添加到它。这显然减轻了色彩本身,而有些人会称之为粉彩。色调/粉彩可以查看人镇静的效果,一般都是有用的在设计各个方面,因为他们容易对眼睛。色调阴影是一个色彩,这是任何颜色有黑色添加到它对面的镜子,为了加深颜色。任何软件的颜色让你选择深色调的颜色,然后改变所有的方式,纯黑色的本身。色调/颜色都有自己的网页设计的地方,但经常被误用,使任何网站觉得“饱和”的颜色-他们还可以 眼睛集中在很长一段时间是非常困难的。

音一个基调是它增加了一个/色调的基色白色和黑色。显然,白人和黑人意味着你加入灰颜色的任何背景或图像相结合,这是一个过程,最专业的图形设计师部分使用图像使其更能吸引人的眼球,并添加额外的视觉语境,他们。饱和这基本上是什么颜色表现不同的照明条件下,影响室内设计比它的网页设计。网页设计中的“饱和”仅仅是指一个给定的颜色是多么生动,重色彩饱和的图像,或设计元素,应该使用难-你只会给人一种头痛否则。强度多么明亮或暗淡的任何给定的图像是可以测量的“强度”。非常鲜艳的颜色,如红色可以刺激大脑和身体,而不太强烈的颜色如蓝色或绿色会有更多的人观看他们的镇静效果。颜色真的进场时,当你的工作与心理颜色,和自己是怎样影响你的观众。

所以现在你明白的颜色实际上是由,和他们的功能在网页设计的基础知识,这实际上是什么意思呢?首先颜色是如何与网站访客沟通的一个重要组成部分,而且更重要的是当你为你的客户网站的设计。我们已经数不清有多少次我们看到设计师用简单的方法与背景颜色很暗的阴影填充整个屏幕,然后在前景光明的色彩。这是创建效果“眩光”人的眼睛,使游客想点击任何其他网站,除了你。颜色,有效地使用时,会对用户体验有重大影响(UX),这就是为什么你需要关注这样的。如果你有任何疑问,如何重要的颜色在网页设计只需要在谷歌这样的网站看一看,或任何主要的电子商务网站,例如每个色彩元素是有一个具体的原因。如果看一罐可口可乐,你会发现它几乎完全极简主义(2色),但效果出奇的好卖自己的品牌。如果你还没有掌握网页设计中色彩的正确使用,那么现在是一个很好的开始。其他专业的网页设计师创建的网站是很好的参考点。

网页设计色彩进阶技巧

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

控制色彩的比例来创造视觉焦点是常见的色彩运用手法之一,控制色彩的比例实际主要是通过控制色彩所在元素的大小来达成效果的。

比如Viporte 这个网站,当你上下滚动首页的时候,每个部分都用超大的字体进行了装饰,而每个字母都使用了漂亮的色彩进行填充。不同的文字使用了不同的色彩,并且搭配以相应的图片。每个页面的焦点肯定是最中心的图片和字母,而焦点的形成和色彩的比例与运用脱不开关系。

控制色彩的占比,无论是多还是少,只要有明确的目的,总能形成吸引注意力的焦点。无论是我们常说的“万花丛中一点绿”,还是极简主义设计中大面积的留白,都是色彩比例控制下所构成视觉焦点的典型案例。

网页设计的色彩知识

2、通过对比度吸引用户注意

在设计过程中,使用色彩来控制对比度也是设计师频繁使用的技巧之一。当设计的整体色调趋于柔和和平静的时候,突然注入强对比的色彩,能够瞬间抓住用户的注意力。

而Thinx 这个网站在设计的时候就将对比度控制得很好。网页主体的配色采用的是经典的黑白搭配,白色的背景搭配黑色的文本。而整体的设计感的来源则主要源于排版和彩色的图片。

网站所采用的图片明显经过精心的选择和设计,红色的底色、黑色的内衣和模特外露的细腻肌肤色在图片激烈的碰撞,漂亮而充满诱惑,图片大胆的色调搭配和素色的背景与文字形成了鲜明而强烈的对比,无论是经典的红黑搭配,还是永恒的黑白配色,都足够漂亮和吸引人。

Thinx 这个案例我非常喜欢,并且经常会用到,因为它证明了设计师并不一定非得靠高饱和度的霓虹色来创造高对比度的配色。即使是两种平衡的颜色,也能让整个设计脱颖而出。

3、使用色彩创造UX模式

高度一致的配色方案能够创造出视觉模式,而延伸到用户体验上,则会让整个UX呈现出模式化的特征。模式化的设计让用户更容易适应,用户更容易摸索出规律,也更容易产生相匹配的预期,换句话说,UX模式能够培养用户习惯,同用户产生深刻的关联。

就像用户习惯了某些特定的图标之后,在其他地方看到这些图标就知道它们的含义,明白该如何交互了。比如,小房子图标会让用户想到首页、主页,而垃圾桶则会关联上删除的概念。色彩相对而言更加主观,因为每个网站和APP都会采用自己的配色方案,不同的色彩代表不同的含义。

那我们就拿Underbelly 这个产品展示页作为示例吧。在Underbelly 这个网站中,所有可点击的组件都是蓝色的,你在试用网站几秒钟之后,能够快速掌握这个UX模式,并且明白如何操作。这就是Underbelly 通过色彩构建UX模式的方法。

UX模式的优势在于,它让用户更快地熟识你的产品。越容易识别,用户的想法越少,产品的的使用也就更加顺畅了。

4、使用色彩来创建层次

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

在Skore 的产品页面中,每一个部分都有使用到绿色的元素。重复的绿色元素不仅创建出可供用户快速识别的模式,它也让用户能够快速明白哪些因素更加重要。

通常,我们解释视觉层次的时候,会用不同大小、粗细的字体来阐述信息层次和结构,但是不同强度的色彩,同样可以实现层次的划分。

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

5、充分利用色彩的相似性

除开其他的目的,设计师使用色彩或者调整色彩的目的,基本都是为了创造设计的一致性。

InVision 的年度总结页面使用了从粉色到紫色的渐变,在页面的下方,粉色和紫色同样应用到了按钮中,此外,在着陆页当中,将对比度明显的白色置于粉色+紫色的背景之上,确保信息的清晰呈现。如果色彩每次都不一样,那么整个设计看起来就不是那么令人难忘了。

另外一个案例来自于 Comotion。Comotion 的工作室首页采用了几种不同的色彩,但是这些色彩的色调是非常接近的,从而创建出了一种和而不同的配色方案。

在这个设计案例当中,几个不同的色彩互为搭配,并不会太过于突出,但是又能够恰到好处地进行强调,最终让色彩足够好看,有保持了用户的参与度。

结语

色彩能够帮助设计师达成各种各样的目的,灵活的运用能够让实现这一切。当你将上述的色彩使用技巧都合理的运用起来,可以灵活的创造视觉焦点,构造层次,打造真正有趣而有用的设计。

网站页面设计之色彩亮度搭配技巧

网站页面设计中页面色彩搭配的亮度属于网站设计细节分析,在实际的网站设计的色彩搭配的亮度是必须要考虑的内容。网站色彩的搭配是企业网站整体给用户的一种视觉感受,色彩亮度搭配好可以以很的突出网站页面中的得点几个,从而帮助网站获得一个更好的用户体验。

现在的网站设计、搜索引擎优化已将用户体验做为网站的核心所在,网站的色彩搭配亮度选择也是用户体验之一。那么网站页面设计师要如何才能搭配好网站色彩的亮度呢?下面分形科技小编就与大家分享一些网站页面设计之色彩亮度搭配的技巧。

亮度指的是色彩的明暗程度,明度越大,色彩越亮。在网站设计中有明度差的色彩更容易调和色彩。明度对比是指色彩之间明暗程度的差别而形成的对比,同样也是页面形成恰当的黑、白、灰效果的主要手段。

明度对比的分析

明度对比在视觉上对色彩层次和空间关系影响较大。明度对比分析:严格来说,网站建设应该是黑白灰色非色彩构成,相对单纯的黑白对比柔和舒适于视觉。能使页面显得更单纯、统一,形成另一道独特的风景。

纯度对比的分析

是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的,而间色多属中纯度的色彩,纯度的对比会使色彩的效果更明确肯定。企业网站色彩搭配一般都是三色搭配,三色搭配更符合国外的一个标准。

色彩均衡的分析

网站页面设计的色彩亮度搭配除了重视明度对比、纯度对比外,还要注意色彩的均衡问题。均衡的色彩搭配的页面设计可以经用户带来舒适,协调的视觉感受。在网站页面设计中除了文字,图片等内容的合理排版,色彩的均衡也是色彩亮度搭配中重要的一个部分。


12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章