配色方法,三种UI的选择配色方法_第1页
配色方法,三种UI的选择配色方法_第2页
配色方法,三种UI的选择配色方法_第3页
配色方法,三种UI的选择配色方法_第4页
配色方法,三种UI的选择配色方法_第5页
已阅读5页,还剩5页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

10/10配色方法,三种UI的选择配色方法方法一:色轮配色色轮由12种基本的颜色组成。首先包含的是三原色(Primarycolors),即蓝、黄、红。原色混合产生了二次色(Secondarycolors),用二次色混合,产生了三次色(tertiarycolors)。色轮有五个同心环组成,从暗到亮-暗色处于大环,明色处于小环,而中间是颜色的基本色相。根据颜色的关系有以下几种配色分类a、单色配色单色搭配就是以一个颜色为主,然后利用颜色的深浅来进行搭配的方法,即色轮中,一种色相的暗、中、明三种色调,单一颜色是比较单调,所以利用颜色的深浅变化来增加多彩性。优点:画面统一,搭配时相对简单而且一般都不会给人难看的感觉,一般不会给人难看的感觉。案例:b、邻近色配色在色相环上相邻的色彩互为邻近色优点:

色调统一,具有低对比度的和谐美感。这种颜色搭配产生了一种令人悦目、低对比度的和谐美感。类比色非常丰富,在设计时应用这种搭配同样让你轻易产生不错的视觉效果。案例:c、互补色和对比色配色互补色是在色相环上180°相对的两个颜色,而对比色则是在色相环上150°到180°范围内相对的两个颜色。优点:补色和对比色形成强列的对比效果,传达出活力、能量、兴奋等意义。补色要达到最佳的效果,最好是其中一种面积比较小,另一种比较大。比如在一个蓝色的区域里搭配橙色的小圆点。案例:d、分裂补色配色如果我们同时用补色及类比色的方法来确定的颜色关系,就称为分裂补色。优点:这种颜色搭配既具有类比色的低对比度的美感,又具有补色的力量感。形成了一种既和谐又有重点的颜色关系。如在上面三种颜色中,红色就显得更加突出。案例:e、原色搭配配色除了在一些儿童的产品中,三原色同时使用是比较少见的。但是,无论是在中国还是在美国的文化中,红黄搭配都是非常受欢迎。红黄搭配应用的范围很广――从快餐店到加油站,我们都可以看见这两种颜色同时在一起。蓝红搭配也很常见,但只有当两者的区域是分离时,才会显得吸引人,如果是紧邻在一起,则会产生冲突感。案例:f、二次色搭配二次色之间都拥有一种共同的颜色――其中两种共同拥有蓝色,两种共同拥有黄色,两种共同拥有红色,所以它们轻易能够形成协调的搭配。优点:如果三种二次色同时使用,则显得很舒适、吸引,并具有丰富的色调。它们同时具有的颜色深度及广度,这一点在其它颜色关系上很难找到。案例:方法二:叠柔配色法这个方法,看起来复杂,但用起来很简单。主要分三个步骤1、任意选择一个白色或黑色,或黑白渐变(可以是点、线、面…甚至字体)2、然后混合模式选择叠加或柔光3、调整透明度(1%-100%随意,省心的做法是直接键入一个整数值,比如:轻质感类页面可以选20%-40%,重质感感类可以键入60%或以上)如下图(将色块使用“柔光”混合模式,调整不一样的数值得到不同的效果)同样的方法:界面中的字体颜色、细节线条、按钮渐变、边角高光、描边阴影……都可以用这样的方法取色使用这个方法的优点是:色彩获得比较简单,无需了解色彩的指数和直方图,不用看色轮只需要设计师具备色彩的审美,能够合理的应用。方法三:色彩提取法这个方法是从现有的自然色、图片色中提取所要的颜色,给应用和搭配赢得了不少的时间。1、找图找一张符合所要设计界面风格的图(本教程用图为GalaxyS4自带壁纸)2、提取颜色将图片放入PS中,点击“存储web所有格式”(Windows快捷键为Ctrl+shift+Alt+s),格式选择png,色块选择8。在颜色显示区域会留下8种颜色,点击颜色区域右侧下拉按钮,会找到“存储颜色表”,把他存储到桌面上或者你容易找到的地方。然后用PS打开,色板中会显示刚才提取到的颜色。成功提取出8种颜色3、应用具体的颜色应用为:1、导航文字及logo的颜色为最浅的蓝色;2、Banner区域既大背景,这里用了开始的图片。上面的大标题logo则用了最深的蓝色;3、内容区域出现的提取到的三个色相的色彩,如果只是排列剩下的几个颜色的话,颜色会很冲,所以用了几张图片来过度颜色调整画面的节奏。现在看来效果还不错,内容区域的文字颜色与导航文字一致,都是最浅的蓝色;4、内容区域的几个按钮并没有用提取的颜色,而是用白色叠加然后调整透明度出来的。总结:以上的三种HYPERLINK"/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=19&is_app=

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论