色彩基础与界面配色原则ppt课件.pptx

《色彩基础与界面配色原则ppt课件.pptx》由会员分享，可在线阅读，更多相关《色彩基础与界面配色原则ppt课件.pptx（49页珍藏版）》请在三一办公上搜索。

1、色彩,色彩基础与界面配色原则,目 录,CONTENTS,视觉中的色彩原则,PART 01,色彩基础、对比、性格、远近、重量,PART.1,PART.1,色彩基础知识（Intercation Design）,三原色绘画色彩中最基本的颜色为三种即红、黄、蓝，称之为原色。这三种颜色纯正、鲜明、强烈，而且这三种原色本身是调不出的，但是他们可以调配出多种色相的色彩。间色由两个原色相混合得出的色彩，如黄调蓝得绿、蓝调红得紫。复色将两个间色（如橙与绿、绿与紫）或一个原色与相对应的间色（如红与绿、黄与紫）相混合得出的色彩。复合色包含了三原色的成分，成为色彩纯度较低的含灰色彩。,PART.1,PART.1,色彩

2、基础知识（Intercation Design）,互补色色相环中相隔180度的颜色，被称为互补色。如：红与绿，蓝与橙，黄与紫互为补色。同类色同一色相中不同倾向的系列颜色被称为同类色。如黄色中可分为柠檬黄、中黄、橘黄、土黄，都称之为同类色。对比色色环中相隔120度至150度的任何三种颜色。,PART.1,PART.1,色彩基础知识（Intercation Design）,互补色色相环中相隔180度的颜色，被称为互补色。如：红与绿，蓝与橙，黄与紫互为补色。同类色同一色相中不同倾向的系列颜色被称为同类色。如黄色中可分为柠檬黄、中黄、橘黄、土黄，都称之为同类色。对比色色环中相隔120度至150度的任何

3、三种颜色。,PART.1,PART.1,色彩基础知识（Intercation Design）,互补色色相环中相隔180度的颜色，被称为互补色。如：红与绿，蓝与橙，黄与紫互为补色。同类色同一色相中不同倾向的系列颜色被称为同类色。如黄色中可分为柠檬黄、中黄、橘黄、土黄，都称之为同类色。对比色色环中相隔120度至150度的任何三种颜色。,PART.1,PART.1,色彩基础知识（Intercation Design）,冷色色环中蓝、绿一边的色相称冷色，它使人们联想到海洋、蓝天、冰雪、月夜等。暖色色环中红、橙一边的色相称暖色，能带给人温馨、和谐、温暖的感觉。这是出于人们的心理和感情联想。它会使人联想到

4、太阳、火焰、热血。黑白灰黑白灰事实上是属于无色系，色环则是根据原色来指定的，没有原色则是白，原色完全混合则是黑，灰是黑白之间的过渡。,PART.1,PART.1,PART.1,PART.1,色彩基础知识（Intercation Design）,色相色相是指能够比较确切地表示某种颜色色别的名称。如玫瑰红、桔黄、柠檬黄、钴蓝、群青、翠绿从光学物理上讲，各种色相是由射入人眼的光谱成分决定的。纯度含有色彩成分的比例愈大，则色彩的纯度愈高，含有色成分的比例愈小，则色彩的纯度也愈低。可见光谱的各种单色光是最纯的颜色，为极限纯度。当一种颜色渗入黑、白或其他彩色时，纯度就产生变化。明度同一颜色在强光照射下显得

5、明亮，弱光照射下显得灰暗模糊；同一颜色加黑或加白掺合以后也能产生不同的明暗层次。二是各种颜色的不同明度。每一种纯色都有与其相应的明度。黄色明度最高，蓝紫色明度最低，红、绿色为中间明度。,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,PART.1,色彩的远近（Color Distance）,明度越高，视觉心理上就越靠前。,明度 纯度 冷暖 清晰度,PA

6、RT.1,PART.1,色彩的远近（Color Distance）,纯度越高视觉感受越靠前。,明度 纯度 冷暖 清晰度,PART.1,PART.1,色彩的远近（Color Distance）,暖色视觉上靠前，冷色靠后。,明度 纯度 冷暖 清晰度,PART.1,PART.1,色彩的远近（Color Distance）,色彩越清晰越靠前，相反，模糊的颜色靠后。,明度 纯度 冷暖 清晰度,PART.1,PART.1,色彩的重量（Color Weight）,颜色是有重量的！当然，这并不是我们生活中所提到的重力。而且心理重量。不同的颜色有不同的“重量”。原因很简单：日常生活中我们看到的颜色在很大程度上受

7、心理因素影响，形成了心理颜色视觉感。色彩的轻重感一般由明度决定，高明度（例如白色）具有轻感，低明度（例如黑色）具有重感。,PART.1,PART.2,色彩的重量（Color Weight）,美国心理学家戴尔教授早就发现了色彩对人有光色度效应影响的“重量”。他经过多重复杂的实验后得出结论：各种颜色在人的大脑中都代表一定的重量。从小到大排列成如下顺序：红、蓝、绿、橙、黄、白。其中白色的心理重量为100克，黄色为113克，绿色为133克，蓝色为152克，紫色为155克，红色为158克，黑色为187克，并且同色系明度越高，给人的重量感越轻。,色彩在界面中的应用,PART 02,色彩的应用场景以及注意事

8、项,色彩在界面中的应用（The application of color in interface）,色彩可以让一个界面的整体架构更清晰一个产品界面总是借助图形化的外观直接作用于客户的视觉系统。用户接触一个产品界面，看到的往往是一个由底色、其他几何色块、图标、按钮等元素构成的图形符号系统。用色彩可以非常直观的凸显出背景、导航栏、状态栏，按钮等构成元素，并显示出产品界面的逻辑架构。,PART.1,PART.2,PART.1,PART.2,产品设计中不同的内容属于不同的层级关系，如菜单与菜单间的同级关系、内容间的从属关系等等。用同色系色彩、不同色相色彩间的差距可以非常直观地区分内容的层级关系，还可

9、以通过色彩间的强对比突出关键内容。就像我在这篇的排版中一级标题用紫色强调，而次级标题不使用色相，从而明确视觉层级关系。,色彩可以明确视觉层级关系,PART.1,PART.2,色彩在界面中的应用（The application of color in interface）,色彩可以营造一个产品的风格一个产品中色彩的搭配可以直接反映出这个产品的风格，以及产品的属性，例如电商类的橙红色，工具类的蓝绿色，或者文字阅读类的净白色。,PART.1,PART.2,色彩在界面中的应用（The application of color in interface）,60+30+10原则60%的主色，30%的辅助色

10、，10%的点缀色。其实这个用色原则在产品设计时同样适用，当然在产品的设计中可能没有这么一个准确的比例，我习惯性的把主色、辅助色、点缀色分为有色相颜色的与无色相颜色，有色相颜色一般应用在按钮，图标，提示性元素中，而无色相的颜色应用在字体、分割线、背景色等元素中。例如我们说一款产品的主题色是某某颜色，但其实页面中80%的颜色都是无色相颜色，主题色仅仅占据了页面10%不到，所以这里我提到的60+30+10原则是单指有色相的颜色比例。,PART.1,PART.2,色彩在界面中的应用（The application of color in interface）,60+30+10原则比如微信的主题色我们都

11、知道是绿色，而页面的设计中真正的主色是深灰色，我们并不能因此说微信的主题色是深灰色，只有当一个产品中真正的不存在色相，例如“one”“字里行间”这种禁欲系产品，我们才可以说他的主色就是黑白灰。,PART.1,PART.2,色彩在界面中的应用（The application of color in interface）,注意事项在我们做产品的页面设计时，尽量不要使用过多的颜色。虽然过少的颜色搭配很难第一眼就能吸引住用户。但是产品的设计与平面设计的差距就在此，做产品更多的是偏向于做一个工具，一个让用户连续浏览20分钟甚至更长时间的工具，而平面设计仅仅在做一个传递信息的视觉，需要在一瞬间抓住浏览者的

12、视觉，并且在3-10秒内把信息传递出去。多伦多大学曾经做过一项调查，发现大部分用户都倾向于一个app页面中只有2-3款颜色。,PART.1,PART.2,色彩在界面中的应用（The application of color in interface）,主题色主题色是一个产品给予用户的第一个印象，主题色应该是产品内需要特殊处理时的首要用色选择。例如产品的主icon，标题栏，底部导航button，以及产品内标签与标签型文字等等。所有需要色相出现的地方，都会有主题色的出现，主题色至少要占有产品内有色相用色60%或者以上比例。,PART.1,PART.2,色彩在界面中的应用（The applicati

13、on of color in interface）,辅助色辅助色出现的场景一般都会伴随着主题色一起，当页面中需要提示的内容不止一种，并且需要作出区分时，辅助色就派上用场了。还有一种情况就是当页面中主题色占比过大，需要小部分的辅助色来让视觉平衡。辅助色与主题色的色相不会差距过大，并且占据产品内有色相用色不超过30%。,PART.1,PART.2,色彩在界面中的应用（The application of color in interface）,点缀色点缀色出现的场景分为三种，一种是需要区分信息超过两种时，点缀色会出现来填补辅助色不足。另一种情况是需要特殊的色彩提示时，利用点缀色来提醒。第三种情况是

14、产品内主题色与辅助色同为暖色系或者冷色系，当同一界面内主题色与辅助色出现面积较大，导致页面过暖或者过冷，点缀色起到平衡画面冷暖的作用，所以点缀色与主题色一般色相差距较大，也是因为如此，点缀色出现的频率较低，占据产品内有色相比例一般不会超过10%。,PART.1,PART.2,色彩在界面中的应用（The application of color in interface）,单色配色与多色配色的情况上面所说的三种颜色是在常规情况下，而一些体量较小或者特殊属性类的产品也经常使用单色相配色，在这种情况下辅助色与点缀色所起到的功能就统一使用主题色来代替了，并且要尽量避免页面内主题色面积过大而导致视觉不适

15、，单色配色不适用于体量较大的产品。而相对于类似淘宝、京东这种大体量的产品，三种颜色远远满足不了需求，此时可以增加辅助色的数量，而主题色仍然要占据有色相颜色60%左右的比例，并且同一页面需要多种不同颜色标签时，尽量控制在3-4种颜色之内。,界面配色指南,PART 03,零基础也能做出好看的配色,PART.1,PART.3,人与计算机的互动主要基于与图形用户界面元素的交互，而色彩在该交互中起着关键作用。 它可以帮助用户查看和理解界面内容，与正确的元素互动，并了解操作。 每个界面都会有一套配色方案，并在主要区域使用其基础色彩。正因为有无数种色彩组合的可能，在设计一个新的界面时，人们往往很难决定一个效

16、果好的配色方案。在创建配色方案时，需要考虑很多因素，包括品牌色彩及色彩在你所在区域的特殊意义。 在这章中，我们将讨论在界面配色指南。,PART.1,PART.3,PART.1,PART.3,PART.1,PART.3,相近色配色方案是由在十二色环图中相邻的三种色彩创建的。这个方案相对容易使用，其诀窍是选择哪种颜色作为主调色来突出。 Calm，一款冥想APP ，使用相近的色彩蓝绿色彩，帮助用户感到轻松和平和。,PART.1,PART.3,相邻色（Adjacent color）,PART.1,PART.3,它们对比强烈，可以用来吸引观众的注意力。 当使用互补色方案时，重要的是选择主色并且使用其互补

17、色用于强调。 例如，当人眼看到一块不同色调的绿色物体时，一点红色就会很突出。使用互补色是让内容脱颖而出的最简单方法。但是你必须谨慎使用互补色，以防止你的内容在视觉上显得不和谐。,PART.1,PART.3,补色搭配（Complementary color）,PART.1,PART.3,向灰度设计中添加一种色彩可以很轻易地吸引眼球。白底加灰色文本，点缀以蓝色高亮。,PART.1,PART.3,自定义配色（Custom color matching）,PART.1,PART.3,提升色彩使用技能是一个不断努力和积累的过程。如果你想学习如何创建美观，实用的配色方案，需要的是实践，决心和大量的用户测试。,感谢,色彩基础与界面配色原则,