相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

没基础也能配好色的三个小技巧

哈慈发布于:2017-10-9 09:34 |原作者: 飞屋睿UIdesign |
哈慈
江苏省 淮安市 绘画/插画师
发私信 + 关注
简介: 版权申明:本文原创作者“飞屋睿UIdesign ”,感谢“飞屋睿UIdesign ”的原创经验分享!配色有理性的层面,也有感性的层面。配色也需要依循一定的节奏。有的配色跳跃明快,有的又显得舒缓柔和。 单色配色法:同色同源 单色系配色是指网站的页面主色只使用一种颜色,需要注意的是 ...
版权申明:本文原创作者“飞屋睿UIdesign ”,感谢“飞屋睿UIdesign ”的原创经验分享!
配色有理性的层面,也有感性的层面。配色也需要依循一定的节奏。有的配色跳跃明快,有的又显得舒缓柔和。

单色配色法:同色同源

单色系配色是指网站的页面主色只使用一种颜色,需要注意的是,所谓的单色并不"单",往往运用单色系配色方案的是配图较多的网站,这些配图自身已经包含着丰富的色彩,从整个页面来看,色彩就并不只有主色一种了。当配图的色彩也参与到了页面整体的配色体系中,只需要寻找到一种与配图都能协调的色彩作为主色,就能轻松掌握单色配色法的技巧。

页面的主色为清爽的蓝绿色,这时选择的背景配图是人脸眼睛的部分,摄影作品本身带有柔和的肉色,与蓝绿色相得益彰:

没基础也能配好色的三个小技巧 飞特网 设计理论

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

单色扮演主色的同时也扮演着强调色,在配色运用中,重要的组件、焦点的部分都可以运用这一色彩,形成明显的视觉重点框架。而与此同时,背景色应该尽量保持黑白灰,不对主色造成干扰。如果想要形成一定的层次,也可以在主色调之外通过降低其色彩饱和度或明度等方式,形成单色配色中色彩的空间视觉深度。

在单色系配色法中,即使属于同一色系,色调也会有所差异,因此这也是另一种配色方式,运用在配图较少,且配图色彩也并不多变的情况下。

页面主色为橙色,也在细微的地方展示出不同调性的橙色,当鼠标Hover按钮变为更为偏红的橙。背景色则用了浅橙色作为底色。这三种色彩都是橙色,而表现了不同的色彩空间层次:

没基础也能配好色的三个小技巧 飞特网 设计理论

当网站的配图较多,往往既要考虑配图本身的配色、配图与配图间的配色、配图色彩与单一主色间的搭配。

想要将页面变得干净清爽除了产品缩略图本身要维持简洁干净的背景、产品拍摄的统一协调,同时也需要考虑产品彼此的色彩呼应:

没基础也能配好色的三个小技巧 飞特网 设计理论

主色的单一色调不一定用在组件上,有时也采用"反白"的处理,尤其是主色本身比较强烈时,填充主色作为背景,传递出主色强烈的表现效果。

页面中的蓝色作为背景色的同时阴影部分显出了图片内容轮廓,制造出朦胧的视感,反白的文字更易于阅读:

没基础也能配好色的三个小技巧 飞特网 设计理论

还有一种更加纯粹的单色调配色方式,将整个网站的配图设定为灰度图案,让主色在整个黑白灰的氛围中显得格外醒目,从而突出主题。这样做的好处是让画面更加简约、克制,当然也就失去了缤纷华丽的氛围。

配图为黑白灰,作为主色的橙红色就能从中脱颖而出。这让每个橙红色的细节元素都格外分明:

没基础也能配好色的三个小技巧 飞特网 设计理论

将配图的颜色"拿掉"是相对冒险的做法,只在一些强调图片的个性与质感并不急于展示产品所有细节给用户的网站中所用较多,品牌站里可以采用这类方式来加强品牌的感染力和形象特征。

渐变配色法:梦幻滑翔

渐变可以视为一种效果,也可以当做一个手段。渐变中使用的多种色彩,将它们的分布呈现柔和过渡,展示出梦幻之感。一般来说,我们安排的渐变色往往是以两种色彩为端点,中间过渡为两种色彩的滑翔地带,其覆盖的色彩范围较广,因此,我们很难判断其主色是哪一固定的色值。从色温的角度为考虑,渐变可以有暖色渐变、冷色渐变,也有冷暖过渡的渐变,而从两端的色彩之间的关系,又分为邻近色渐变、对比色渐变等。不同的色调渐变所呈现出的品牌氛围各有千秋。不管怎样,在轻设计中,渐变的色彩通常集中在高明度的色调范围,让画面显得更为通透柔和。渐变的色彩范围也不宜太广,色彩分布太大让画面本身容易陷入于混沌中。

渐变常以背景的形式出现,或运用于较大的元素之上。根据渐变色的不同,所展示的配图以及其他组件也要根据这一渐变色而协调。

蓝与紫、紫与粉色的邻近色渐变过渡有一种梦幻般的感受,白色文字以及配图甄选也都考虑到与渐变色彩的协调感。色彩丰富饱满,页面则简洁明快:

没基础也能配好色的三个小技巧 飞特网 设计理论

浮动于渐变背景上方的元素色彩也可以与背景形成对比,这时,渐变色的范围就要更为精准清晰,以免让色彩变"浑浊"。毕竟在轻设计中,维持画面的"澄清"是很重要的。

利用渐变色系配色法的灵活多变,在一张大型配图上方叠加一层透明渐变,也同样是非常流行的做法。这样作出的效果也相当炫目耀眼,能瞬间提升摄影本身的感染力。

为了让页面变得更为"清澈",可以采用渐变映射的方式,即只对核心焦点运用蓝绿渐变,而背景色依然维持简洁的白底,这样的做法更巧妙地收住了渐变大面积铺开所形成的华丽感,而像为主角打开了特殊的镁光灯:

没基础也能配好色的三个小技巧 飞特网 设计理论

123下一页
17

好评
11

差评

刚表态过的朋友 (28 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • China明

哈慈
江苏省 淮安市 绘画/插画师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计