• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 学会这3个方法,零基础也能做出好看的配色

学会这3个方法,零基础也能做出好看的配色

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,色彩搭配,配色等相关知识,希望在学习及工作中可以帮助到您

@飞屋睿UIdesign?:认识了色彩,并不表示你就能对颜色运用自如。配色有理性的层面,也有感性的层面。配色也需要依循一定的节奏。有的配色跳跃明快,有的又显得舒缓柔和。我们从理性出发的同时,也要把自己的触角深入到感性的层面去理解色彩。

注:本文节选自《轻设计——网页设计中的轻奢主义与禅意思维》,购买地址:https://item.jd.com

配色秩序

每一种色彩都有其自身的特质,而这一特性的发挥,还需要依赖于色彩在整个配色时所处的位置、面积等,即色彩与其他色彩所形成的秩序。

主色

主色是指在配色中处于支配地位的色彩。在配色前,主色是最先确定的颜色,例如,当我们想要设计一个珠宝展示的页面,这个页面所需要什么色彩时,我们决定采用紫色,而紫色就是主色。主色的确定看起来并不困难,因为一开始被确定下主色只是定出一个宏观方向,并没有细化成具体的色调。主色的选择也非常自由,因为并没有完全正确的“公式”,每种颜色都有它的特性和优劣,没有最好的颜色或最差的颜色。

最终确定对主色色调的选择则需要感性的参与,你希望你的网站看上去“沉稳典雅”还是“清新明快”?这些不同的感受都来自色调的制约平衡。

一般情况下,主色是配色中使用面积最多的色彩。用于主要的组件、组件的背景、大面积色块等。

页面中的主色是清爽的蓝色。尽管背景也运用了大面积的白色,但是黑白灰属于无彩色,无彩色并不参与到配色过程中。红色是作为衬托色而出现的:

衬托色

衬托色是主色以外,为了衬托主色而出现的另一种色彩。衬托色通常为主色的互补色或对比色。衬托色所使用的面积可大可小,只要达到衬托的目的即可。

黄色是主色,蓝色衬托色。蓝黄两色互为对比色:

衬托色也可用在面积较大的地方,和主色平分秋色,彼此呼应。

页面的主色为橙色,而衬托色为浅色粉,这两种色彩为邻近色,彼此饱和度上有非常明显的对比,也能很好的衬托出主色,为页面的氛围增加温度:

一组配色中一定会有一个主色,而衬托色并非必不可少。是否采用衬托色,取决于你的配色计划。通常单一的色彩会比较单调,而利用衬托色来强化主色的丰富变化是解决这一问题的方案之一。

背景色

背景色经常表现为无彩色(黑、白、灰)或者低饱和度的色彩。背景色主要是作为背景而存在,它最好不要以非常强烈的姿态出现。背景色并非具有某种功能,它是一个页面的基础底色。

页面的背景色为蓝绿色到蓝紫色的渐变色,因此配图时就应该考虑与背景色的搭配协调:

黑色作为背景色时,浅米色作为主色,主色和背景色之间的相得益彰,这时的背景色也可看作衬托色:

强调色

强调色是在主色以外起强调作用的色彩,可以说它是非常重要的视觉焦点。它本身具有一种独立性,因此在配色上要形成与主色的强烈对比。它可以是主色的对比色、互补色等,使其能跳脱于主色的色彩。

页面的主色为蓝色,红色则作为强调色,在进入另一个页面时,红色又作为了主色,而紫色作为了强调色:

强调色所用的面积比较小,只要在焦点领域运用上强调色,其本身就有着聚焦的作用。有时候强调色还扮演着衬托色的角色。

单色配色法:同色同源

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

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

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

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

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

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

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

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

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

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

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

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

渐变配色法:梦幻滑翔

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

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

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

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

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

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

利用渐变色的变化,通过切换图片,

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2017-08-06网页设计师学习网页设计的经验和技巧小结
  • 2018-08-23新手科普文!每个设计师都该懂的栅格系统基础六要素
  • 2018-08-23这篇8000字长文,能帮你学会组件化设计与开发的思维方式
  • 2018-08-23看似一模一样的搜索框,在设计师眼里有这么多细节!
  • 2018-08-23超详细的 2018 年设计师面试指南
  • 2018-08-23基础小技巧!5个简单直观的设计对比方法
  • 2017-08-06如何设计制作自适应网页
  • 2018-08-23Google I/O 大会之后,Material Design 发生了这些变化
  • 2018-08-23学会这两招,快速提升设计师的作品集格调!(实例演示)
  • 2018-08-23收福利!5个不为人知但干货超多的交互设计公众号

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 腾讯设计师:极速适配 iPhone X 的技巧揭秘!
    • 强化用户体验!3个方法有效提升用户的控制感
    • 为什么你的APP总是不耐看?
    • AI教程!教你绘制超萌的小火龙和皮卡丘
    • 写给设计师的AR入门指南之5分钟做一个AR应用!
    • 编制网站首页的基本原则
    • 前端开发必备常用工具函数小结
    • 人气好文!写给网页设计师的视觉设计基础手册
    • Bootstrap之所以广泛流传的11大原因
    • 大盘点!互联网产品Logo 的分类及特点总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有