UI界面设计(色彩)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
观点：同色调不同色彩的模块， 就算承载着不同的信息内容也能 表现很和谐。
二、色调调和而形成的配色方式 →同色调配色
由同一或类似色调中的色相变化构成的配 色类型，与主导色调配色中的属于同类技 法。区别在于色调分布平均，没有过深或 过浅的模块，色调范围更为严格。
二、色调调和而形成的配色方式 →同色调配色
同色系配色
同色系配色是指主色和辅色都在统一色相上，这种配色方 法往往会给人页面很一致化的感受。
邻近色配色
近邻色配色方法比较常见，搭配比同色系稍微丰 富，色相柔和过渡看起来也很和谐。
类似色配色
类似色配色也是常用的配色方法，对比不强给人 色感平静、调和的感觉。
中差色配色
中差色对比相对突出，色彩对比明快，容易呈现饱和度高的色彩
Tips：多色彩经过统一色调处理， 区域间非常协调，也不影响整体页 面阴暗气氛表现。
明亮色调
明亮的颜色活泼清晰，热 闹的气氛和醒目的卡通形 像叙述着一场庆典，但铺 满高纯度的色彩，过于刺 激，不适宜长时间游览。
观点：饱和度与纯度特性 明显的搭配，在达到视觉 冲击力的同时，可适当采 用对比色或降低明度等方 法调和视觉表现。
二、色调调和而形成的配色方式 →有主导色调配色
这是由同一色调构成的统一性配色。深色调和暗 色调等类似色调搭配也可以形成同样的配色效果 。即使出现多种色相，只要保持色调一致，画面 也能呈现整体统一性。 根据色彩的情感，不同的调子会给人不同的 感受： 2.1-1 清澈的色调 2.1-2 阴暗的色调 2.1-3 明亮色调 2.1-4 深暗色调 2.1-5 雅白色调
等边三角形内的三原色─红、黄、蓝作为第一次色，将三原色两两相加可调出 橙、绿、紫等第二次色，如果再将这六种颜色中两相邻的颜色等量互调，得 到该两色的中间色（第三次色），便产生了十二色色环。
推荐一个网站uiGradient，无聊没事的时候可以上去晃晃 找点渐层配色的灵感。
色彩三要素
类似色渐层
清澈的色调
清澈调子使页面非常和谐，即使是不同色相形同色调的配色能让页面保持较 高的协调度。蓝色另页面产生安静冰冷的气氛，茶色让我们想起大地泥土的 厚实，给页面增加了稳定踏实感觉，同时暖和蓝色的冰冷。
观点：互补的色相搭配在一起，通过统一色调的手法，可以缓和色彩之间的 对比效果。
阴暗色调
阴暗的色调渲染场景氛围，通过不 同色相的色彩变化丰富信息分类， 降低色彩饱和度使各色块协调并融 入场景，白色和明亮的青绿色作为 信息载体呈现。
静态页面设计的流程： 构思版面（手绘）-设计效果图（PS）-切
割版面（FW）-编辑页面（DW）-加动画 （FL） 构思版面阶段
注意几点： 1、版式与文字 2、色彩搭配 3、多媒体的应用 4、主题鲜明 5、形式简洁性 6、风格定位
UI界面的渐变色设计
类似色渐层（Linear Gradient） 对比色渐层（Linear Gradient） 金属色渐层
对比色配色
主导的对比配色需要精准地控制色彩搭配和面积，其中主 导色会带动页面气氛，产生激烈的心理感受。
中性色配色
用一些中性的色彩作为基调搭配，常应用在信息量大的网站，突出内容，不 会受不必要的色彩干扰。这种过配色比较通用，非常经典。
多色搭配下的主导
主色和其他搭配色之间的关系会更丰富，可能有类似色、中差色、对比色等 搭配方式，但其中某种色彩会占主导。
高明度色系渐层
对比色渐层
对比选色的彩度差异不要太大。 在选色上不一定要拘泥于刚刚好180度，基本上160–200度这个区间都可以达
到相当不错的效果。 建议画面的配置上一个做为主色一个作为副色。
Байду номын сангаас
色彩搭配
同类色搭配 （色环上相邻的颜色，距离大约30°以内）
优点：一致感、协调 感
缺点：易单调 注意事项： 1、注意色彩明度对
深暗色调
页面以深暗偏灰色调为主，不同 的色彩搭配，像在叙述着不同的 故事，白色文字的排版，整个页 面显得厚重精致，小区域微渐变 增加版面质感。
观点：以低暗色调构成整体画面 氛围，小面积明亮部分不会影响 整体感觉。
雅白色调
柔和的调子使页面显得明快温暖 ，就算色彩很多也不会造成视觉 负重。页面的同色调搭配，颜色 作为不同模块的信息分类，不抢 主体的重点，还能衬托不同类型 载体的内容信息。
在实际的设计运用中，常会用些 更综合的手法，例如整体有主导 色调，小范围布局会采用同色调 搭配。拿tumblr的发布模块来说 ，虽然页面有自己的主色调，但 小模块使用同色调不同色彩的功 能按钮，结合色相变化和图形表 达不同的功能点，众多的按钮放 在一起，由于同色调原因模块非 常稳定统一。
比 2、注意面积对比 3、背景色一般跟主
色同色调 4、注意色彩呼应
邻近色搭配（色环上大约30°-90°）
对比色搭配（色环上大约120°）
优点：强烈、醒目、有力、活泼、丰富 缺点：易杂乱、刺激、造成视觉疲劳 色彩调和： 1、增加和降低色彩明度 2、增加和降低色彩纯度 3、注意面积对比 4、注意色彩呼应
对比色搭配（色环上大约120°）
一、色相差而形成的配色方式→有主导色彩配色
根据主色与辅色之间的色相差不同，可 以分为以下各种类型： 1.1-1 同色系主导 1.1-2 邻近色主导 1.1-3 类似色主导 1.1-4 中差色主导 1.1-5 对比色主导 1.1-6 中性色主导 1.1-7 多色搭配下的主导
UI界面设计--色彩搭配
页面模块
主页 二级子页：（产品介绍、企业介绍、信息
中心、留言版、联系我们） 三级页面：（产品分类介绍） 特色功能：（产品价格表，注册会员，提
交订单） 后台管理：（会员管理、订单管理、信息
管理、产品管理）
二、主页效果图的设计
可分为两大部分，静态（界面）部分和动 态（互动功能）部分
左侧上浅下灰的渐层，在搭配内光晕后能够轻易的让图形浮凸于纸 面；右侧上灰下浅搭的渐层，则可以搭配内阴影来呈现凹陷于纸面 的效果。
类似色渐层
想要做出中间凹陷，但是凹陷的部分是浮 凸出来的感觉，除了上灰下浅的基本技巧 之外还要稍微运用一点放射状渐层来分别 调整上部以及底部的光影
类似色渐层
高彩度色系渐层
二、色调调和而形成的配色方式 →同色调配色
由同一或类似色调中的色相变化构成的配 色类型，与主导色调配色中的属于同类技 法。区别在于色调分布平均，没有过深或 过浅的模块，色调范围更为严格。
二、色调调和而形成的配色方式 →同色调配色
同色系配色
同色系配色是指主色和辅色都在统一色相上，这种配色方 法往往会给人页面很一致化的感受。
邻近色配色
近邻色配色方法比较常见，搭配比同色系稍微丰 富，色相柔和过渡看起来也很和谐。
类似色配色
类似色配色也是常用的配色方法，对比不强给人 色感平静、调和的感觉。
中差色配色
中差色对比相对突出，色彩对比明快，容易呈现饱和度高的色彩
Tips：多色彩经过统一色调处理， 区域间非常协调，也不影响整体页 面阴暗气氛表现。
明亮色调
明亮的颜色活泼清晰，热 闹的气氛和醒目的卡通形 像叙述着一场庆典，但铺 满高纯度的色彩，过于刺 激，不适宜长时间游览。
观点：饱和度与纯度特性 明显的搭配，在达到视觉 冲击力的同时，可适当采 用对比色或降低明度等方 法调和视觉表现。
二、色调调和而形成的配色方式 →有主导色调配色
这是由同一色调构成的统一性配色。深色调和暗 色调等类似色调搭配也可以形成同样的配色效果 。即使出现多种色相，只要保持色调一致，画面 也能呈现整体统一性。 根据色彩的情感，不同的调子会给人不同的 感受： 2.1-1 清澈的色调 2.1-2 阴暗的色调 2.1-3 明亮色调 2.1-4 深暗色调 2.1-5 雅白色调
等边三角形内的三原色─红、黄、蓝作为第一次色，将三原色两两相加可调出 橙、绿、紫等第二次色，如果再将这六种颜色中两相邻的颜色等量互调，得 到该两色的中间色（第三次色），便产生了十二色色环。
推荐一个网站uiGradient，无聊没事的时候可以上去晃晃 找点渐层配色的灵感。
色彩三要素
类似色渐层
清澈的色调
清澈调子使页面非常和谐，即使是不同色相形同色调的配色能让页面保持较 高的协调度。蓝色另页面产生安静冰冷的气氛，茶色让我们想起大地泥土的 厚实，给页面增加了稳定踏实感觉，同时暖和蓝色的冰冷。
观点：互补的色相搭配在一起，通过统一色调的手法，可以缓和色彩之间的 对比效果。
阴暗色调
阴暗的色调渲染场景氛围，通过不 同色相的色彩变化丰富信息分类， 降低色彩饱和度使各色块协调并融 入场景，白色和明亮的青绿色作为 信息载体呈现。
静态页面设计的流程： 构思版面（手绘）-设计效果图（PS）-切
割版面（FW）-编辑页面（DW）-加动画 （FL） 构思版面阶段
注意几点： 1、版式与文字 2、色彩搭配 3、多媒体的应用 4、主题鲜明 5、形式简洁性 6、风格定位
UI界面的渐变色设计
类似色渐层（Linear Gradient） 对比色渐层（Linear Gradient） 金属色渐层
对比色配色
主导的对比配色需要精准地控制色彩搭配和面积，其中主 导色会带动页面气氛，产生激烈的心理感受。
中性色配色
用一些中性的色彩作为基调搭配，常应用在信息量大的网站，突出内容，不 会受不必要的色彩干扰。这种过配色比较通用，非常经典。
多色搭配下的主导
主色和其他搭配色之间的关系会更丰富，可能有类似色、中差色、对比色等 搭配方式，但其中某种色彩会占主导。
高明度色系渐层
对比色渐层
对比选色的彩度差异不要太大。 在选色上不一定要拘泥于刚刚好180度，基本上160–200度这个区间都可以达
到相当不错的效果。 建议画面的配置上一个做为主色一个作为副色。
Байду номын сангаас
色彩搭配
同类色搭配 （色环上相邻的颜色，距离大约30°以内）
优点：一致感、协调 感
缺点：易单调 注意事项： 1、注意色彩明度对
深暗色调
页面以深暗偏灰色调为主，不同 的色彩搭配，像在叙述着不同的 故事，白色文字的排版，整个页 面显得厚重精致，小区域微渐变 增加版面质感。
观点：以低暗色调构成整体画面 氛围，小面积明亮部分不会影响 整体感觉。
雅白色调
柔和的调子使页面显得明快温暖 ，就算色彩很多也不会造成视觉 负重。页面的同色调搭配，颜色 作为不同模块的信息分类，不抢 主体的重点，还能衬托不同类型 载体的内容信息。
在实际的设计运用中，常会用些 更综合的手法，例如整体有主导 色调，小范围布局会采用同色调 搭配。拿tumblr的发布模块来说 ，虽然页面有自己的主色调，但 小模块使用同色调不同色彩的功 能按钮，结合色相变化和图形表 达不同的功能点，众多的按钮放 在一起，由于同色调原因模块非 常稳定统一。
比 2、注意面积对比 3、背景色一般跟主
色同色调 4、注意色彩呼应
邻近色搭配（色环上大约30°-90°）
对比色搭配（色环上大约120°）
优点：强烈、醒目、有力、活泼、丰富 缺点：易杂乱、刺激、造成视觉疲劳 色彩调和： 1、增加和降低色彩明度 2、增加和降低色彩纯度 3、注意面积对比 4、注意色彩呼应
对比色搭配（色环上大约120°）
一、色相差而形成的配色方式→有主导色彩配色
根据主色与辅色之间的色相差不同，可 以分为以下各种类型： 1.1-1 同色系主导 1.1-2 邻近色主导 1.1-3 类似色主导 1.1-4 中差色主导 1.1-5 对比色主导 1.1-6 中性色主导 1.1-7 多色搭配下的主导
UI界面设计--色彩搭配
页面模块
主页 二级子页：（产品介绍、企业介绍、信息
中心、留言版、联系我们） 三级页面：（产品分类介绍） 特色功能：（产品价格表，注册会员，提
交订单） 后台管理：（会员管理、订单管理、信息
管理、产品管理）
二、主页效果图的设计
可分为两大部分，静态（界面）部分和动 态（互动功能）部分
左侧上浅下灰的渐层，在搭配内光晕后能够轻易的让图形浮凸于纸 面；右侧上灰下浅搭的渐层，则可以搭配内阴影来呈现凹陷于纸面 的效果。
类似色渐层
想要做出中间凹陷，但是凹陷的部分是浮 凸出来的感觉，除了上灰下浅的基本技巧 之外还要稍微运用一点放射状渐层来分别 调整上部以及底部的光影
类似色渐层
高彩度色系渐层