网络广告设计的配色.ppt

网络广告设计中的色彩,网络广告色彩之重要性,2019/12/1,选色彩对于网络广告设计或者网站配色来说尤为重要，而选择颜色绝非易事，美感、识别度和易用性都需要考虑进去。我们的液晶显示屏可显示的颜色超过一千六百万种，随之诞生的配色组合将数以无计算。,2019/12/1,2019/12/1,色彩心理学,2019/12/1,色彩心理学的研究领域，着重在分析色彩和配色对于情绪与行为所造成的影响。广告主想知道什么颜色能促使访客花更多的钱来购物；负责家饰配置的人，寻求让卧室变身充满禅意的宁静休憩所；餐厅负责人，渴望得知什么样的配色能够顾客胃口大开。所以色彩心理学充满商机！,2019/12/1,2019/12/1,2019/12/1,2019/12/1,六、,2019/12/1,色彩的系别,我们生活的自然界，五彩斑斓、多姿多彩，所有事物都有其各自的色彩，大致分为：有彩色系和无彩色系。,色彩的三要素,色相纯度明度,色相,指色彩的相貌，是色与色之间相貌上的差别，如大红、普兰、中黄、草绿等，每个名称代表一种色彩的相貌。,明度,指色彩的明暗程度。无彩色和有彩色都有明度。在无彩色中，白色明度最高，黑色明度最低。在有彩色中，黄色明度最高，蓝紫色明度最低。,纯度,指色彩的纯净程度或饱和度，也叫彩度（鲜艳程度）。纯度越高颜色越鲜艳，纯度越低颜色越灰暗。,色彩的分类,原色间色复色,三原色,红、黄、蓝是三原色，是任何颜色都调配不出来的。,间色,间色是指由三原色中任意两色混合产生的颜色。如橙色、紫色、绿色。,复色,凡是有3种原色或两种间色的不同混合，而形成不同色彩的颜色，都是复色，复色纯度较低，色感偏灰。,同类色,在色相环上45度以内的颜色，统称为同类色。用同类色的颜色表现主题可以实现色彩的融合，使画面产生协调清新的视觉效果。,类似色,在色相环上90度以内的颜色，统称为类似色。用同类色的颜色表现主题可以实现色彩的融合，使画面产生舒适的视觉效果。,东山魁夷（日本）：与川端康成成为日本“双璧”,清响,其风景画以西方写实的眼光捕捉日本情调之美，善于表现未经现代文明污染的纯洁的大自然。他的作品在保持平面性的同时增强空间感，在装饰性中抒情寓意，格调高雅蕴藉，充满诗情哲理，透着淡淡的伤感。,对比色,马蒂斯舞蹈,补色,在色相环上直径两端正对的一对颜色被称作互为补色。如红与绿、黄与紫、橙与蓝，这是三对最基本的补色。,安迪沃霍尔作品,沃霍尔画中特有的那种单调、无聊和重复，所传达的是某种冷漠、空虚、疏离的感觉，表现了当代高度发达的商业文明社会中人们内在的感情。,2019/12/1,到现在为止，我们拥有的色彩相关知识，已经足以拿来讨论如何应用颜色来进行网络广告设计了。1、单色2、相近色3、互补色4、分离补色5、三分色6、四分色或称为双补色,1、单色配色方案,2019/12/1,在之前有关明度的内容中，我们讨论到浅色与深色。该网络logo采用就是紫色的深浅组合。,单色配色范例,2019/12/1,高纯度的粉红色以及黑与白的搭配，充满了强大的能量。简单的纹路和大体积的字体打造出强有力的对比与视觉焦点。,单色配色范例,2019/12/1,2019/12/1,以奶黄色为主色调的咖啡网站,单色配色范例,2019/12/1,在这个设计中大面积黑白灰的运用，使这个页面充满高级感，从而大量摒弃色彩也是中间的插图显得格外显眼。,单色配色范例,相近色配色方案,2019/12/1,相近色配色方案，是由色环上相邻的颜色组成。我选择时候色环上大小务必控制在整体三分之一之内，否则会使得观者看得腻味。,相近色配色方案,2019/12/1,在这个设计中，选用富有皇家色彩的深紫色，并以部分橘色调来增添整体的暖意。,相近色配色方案,2019/12/1,这个设计完全颠覆一般对企业网站的刻板形象，整个网站仿佛冰凉的大海，充满蓝绿色到黄色之间色彩，而冷暖的对比色彩对比让你双眼回到signup按钮上。,2019/12/1,此效果来自由蓝色与绿色构成的扎实相近色的配色方案。页面上方白色搜寻区域非常醒目。,相近色配色方案,互补色配色方案,2019/12/1,互补色配色方案由色环上正对彼此的颜色所组成。,互补色配色方案,2019/12/1,佛罗里达大学运动网站运用了橘色和蓝色这一配色方案对比十分强烈，突出了视觉识别性。,互补色配色方案,2019/12/1,我们不一定要像佛罗里达大学网站蓝色和橘色对比那么醒目。通过减少饱和度，此采用橘色和绿色的设计显得自然质朴，有助于呼应其生物主题的题材，加上网站上美丽的插画和富有艺术性的底色肌理，使得其设计脱颖而出。,互补色配色方案,2019/12/1,这个咖啡主题网站不仅自然好看，而且考虑到冷暖的对比，蓝绿色和红色的对比使人联想到太阳底下澄碧色湖水。,互补色的陷阱,2019/12/1,互补色的对比能使得设计更为鲜艳和显著。但是如果是前景色与背景色的关系，那效果是惨不忍睹。,互补色的陷阱,2019/12/1,选的颜色并不是色环上的正对位置，但又不够相近到符合相近色的颜色，这种组合称作不协调色，这些颜色会互相冲突，造成视觉上的刺眼。,分离补色、三分色、四分色,2019/12/1,分离补色，需选用与主色的互补色相邻的两个颜色。,三分色，色环上间距都做了三等分。,四分色，色环上任两对的互补色组合。,扁平化,2019/12/1,哈,网络广告设计色彩进阶,1、通过比例变化创造视觉焦点,2019/12/1,控制色彩的比例来创造视觉焦点是常见的色彩运用手法之一，控制色彩的比例实际主要是通过控制色彩所在元素的大小来达成效果的。比如Viporte这个网站，当你上下滚动首页的时候，每个部分都用超大的字体进行了装饰，而每个字母都使用了漂亮的色彩进行填充。不同的文字使用了不同的色彩，并且搭配以相应的图片。每个页面的焦点肯定是最中心的图片和字母，而焦点的形成和色彩的比例与运用脱不开关系。控制色彩的占比，无论是多还是少，只要有明确的目的，总能形成吸引注意力的焦点。无论是我们常说的“万花丛中一点绿”，还是极简主义设计中大面积的留白，都是色彩比例控制下所构成视觉焦点的典型案例。,2、通过对比度吸引用户注意,2019/12/1,在设计过程中，使用色彩来控制对比度也是设计师频繁使用的技巧之一。当设计的整体色调趋于柔和和平静的时候，突然注入强对比的色彩，能够瞬间抓住用户的注意力。而Thinx这个网站在设计的时候就将对比度控制得很好。网页主体的配色采用的是经典的黑白搭配，白色的背景搭配黑色的文本。而整体的设计感的来源则主要源于排版和彩色的图片。网站所采用的图片明显经过精心的选择和设计，红色的底色、黑色的内衣和模特外露的细腻肌肤色在图片激烈的碰撞，漂亮而充满诱惑，图片大胆的色调搭配和素色的背景与文字形成了鲜明而强烈的对比，无论是经典的红黑搭配，还是永恒的黑白配色，都足够漂亮和吸引人。,3、使用色彩创造UX模式,2019/12/1,高度一致的配色方案能够创造出视觉模式，而延伸到用户体验上，则会让整个UX呈现出模式化的特征。模式化的设计让用户更容易适应，用户更容易摸索出规律，也更容易产生相匹配的预期，换句话说，UX模式能够培养用户习惯，同用户产生深刻的关联。就像用户习惯了某些特定的图标之后，在其他地方看到这些图标就知道它们的含义，明白该如何交互了。比如，小房子图标会让用户想到首页、主页，而垃圾桶则会关联上删除的概念。色彩相对而言更加主观，因为每个网站和APP都会采用自己的配色方案，不同的色彩代表不同的含义。那我们就拿Underbelly这个产品展示页作为示例吧。在Underbelly这个网站中，所有可点击的组件都是蓝色的，你在试用网站几秒钟之后，能够快速掌握这个UX模式，并且明白如何操作。这就是Underbelly通过色彩构建UX模式的方法。UX模式的优势在于，它让用户更快地熟识你的产品。越容易识别，用户的想法越少，产品的的使用也就更加顺畅了。,4、使用色彩来创建层次,2019/12/1,当我们浏览网页和各种界面的时候，信息的层次感很大程度是借助视觉来营造的。使用色彩来创造视觉层次感就很顺其自然了。在Skore的产品页面中，每一个部分都有使用到蓝色的元素。重复的蓝色元素不仅创建出可供用户快速识别的模式，它也让用户能够快速明白哪些因素更加重要。通常，我们解释视觉层次的时候，会用不同大小、粗细的字体来阐述信息层次和结构，但是不同强度的色彩，同样可以实现层次的划分。在Skore这个案例当中，蓝色和灰色的文本以及白色的背景之间有着良好的对比度，整个配色方案不依赖其他的强调色，以蓝色为主。这种相对稳定的配色结构有助于让每个部分都有层次地呈现出来。蓝色不仅吸引用户关注关键的元素，而且为不同的部分的内部提供层次结构。http:/www.skore.io/,5、充分利用色彩的相似性,2019/12/1,除开其他的目的，设计师使用色彩或者调整色彩的目的，基本都是为了创造设计的一致性。InVision的年度总结页面使用了从粉色到紫色的渐变，在页面的下方，粉色和紫色同样应用到了按钮中，此外，在着陆页当中，将对比度明显的白色置于粉色+紫色的背景之上，确保信息的清晰呈现。如果色彩每次都不一样，那么整个设计看起来就不是那么令人难忘了。,2019/12/1,Comotion的工作室首页采用了几种不同的色彩，但是这些色彩的色调是非常接近的，从而创建出了一种和而不同的配色方案。在这个设计案例当中，几个不同的色彩互为搭配，并不会太过于突出，但是又能够恰到好处地进行强调，最终让色彩足够好看，有保持了用户的参与度。,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,2019/12/1,