网页设计配色方法论:配色秩序

简介: 每一种色彩都有其自身的特质,而这一特质的发挥,还需要依赖于色彩在整个配色时所处的位置、面积等,即色彩与其他色彩所形成的秩序。 本文选自《轻设计:网页设计中的轻奢主义和禅意思维》。

配色有理性的层面,也有感性的层面。配色也需要遵循一定的节奏,有的配色跳跃明快,有的又显得舒缓柔和。我们从理性出发的同时,也要把自己的思维深入到感性的层面去理解色彩。

主 色

  主色是指在配色中处于支配地位的色彩。在配色前,主色是最先确定的色彩,例如,当我们想要设计一个珠宝展示的页面,我们决定这个页面所需要的色彩是紫色时,紫色就是主色。主色的确定看起来并不困难,因为一开始确定好主色只是定出一个宏观方向,并没有细化成具体的色调。主色的选择也非常自由,因为并没有完全正确的公论,每种色彩都有它的特性和优劣,没有最好的色彩或最差的色彩。
  最终确定对主色色调的选择需要感性的参与,你希望你的网站看上去“沉稳典雅”还是“清新明快”?这些不同的感受都来自色调的制约平衡。
  一般情况下,主色是配色中使用面积最大的色彩。用于主要的组件、组件的背景和大面积色块等。
              图片描述
  页面中的主色是清爽的蓝色。尽管背景也运用了大面积的白色,但是黑白灰色属于无彩色,无彩色并不参与到配色过程中。红色是作为衬托色而出现的。

衬托色

  衬托色是主色以外,为了衬托主色而出现的另一种色彩。衬托色通常为主色的互补色或对比色。衬托色所使用的面积可大可小,只要达到衬托的目的即可。
            图片描述
  黄色是主色,蓝色是衬托色,黄蓝两色互为对比色。
  衬托色也可用在面积较大的地方,和主色平分秋色,彼此呼应。
               图片描述
  页面的主色为橙色,而衬托色为浅粉色,这两种色彩为邻近色,彼此饱和度上有非常明显的对比,也能很好地衬托出主色,为页面增加了气氛。
  一组配色中一定会有一个主色,而衬托色并非是必不可少的。是否采用衬托色,取决于你的配色计划。通常单一的色彩会比较单调,而利用衬托色来强化主色的丰富变化是解决这一问题的方案之一。

背景色

  背景色经常表现为无彩色(黑白灰色)或者低饱和度的色彩。背景色主要是作为背景而存在的,它最好不要以非常强烈的姿态出现。背景色并非具有某种功能,它是一个页面的基础底色。
             图片描述
  页面的背景色为蓝绿色到蓝紫色的渐变色,因此配图时就应该考虑与背景色的搭配协调。
               图片描述
  黑色作为背景色时,浅米色作为主色,主色和背景色之间相得益彰,这时的背景色也可看作衬托色。

强调色

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

  页面的主色为蓝色,红色则作为强调色,在进入另一个页面时,红色又作为了主色,而紫色作为了强调色。
  强调色所用的面积比较小,只要在焦点区域运用强调色,其本身就有着聚焦的作用。有时候强调色还扮演着衬托色的角色。
                      图片描述
  本文选自《轻设计:网页设计中的轻奢主义和禅意思维》,想及时获得更多精彩文章,可在微信中搜索“博文视点”或者扫描下方二维码并关注。
                         图片描述

相关文章
|
2天前
|
算法 API 异构计算
MistoLine-线条魔法,驾驭每一缕创意!
MistoLine 是一个可以适配任意类型线稿,准确性高,稳定性优秀的SDXL-ControlnetNet模型。它可以基于用户输入的任意类型的线稿图(手绘、各类controlnet-line preprocessor、模型线框轮廓等)作为条件,生成高质量图像(短边大于1024px),无需再根据不同线预处理器选择不同的controlnet模型,MistoLine在各类线稿条件下都有较好的泛化能力。
|
6月前
|
安全 iOS开发
让人惊艳的高级配色,让你的色彩灵感爆棚!
让人惊艳的高级配色,让你的色彩灵感爆棚!
47 0
|
人工智能
没有美术基础,能不能做UI设计这一行?
想入行UI设计的同学,都会遇到一个问题:就是说我是一个零基础的小白,想学好UI设计,但是没有美术绘画基础可以学好吗? 答案:是可以的,一般报培训班学习都会教美术绘画,也可以很快学会,毕竟报班学习的同学都是本着就业来学习,那么在UI当中的美术绘画都会一一来教学,在我们UI实际工作中用到的美术方面的内容都会学习。
1132 0
|
API
《超越平凡的平面设计: 版式设计原理与应用》—怎样运用对比确定字体风格
<span style='letter-spacing:1px'>本节书摘来自异步社区《超越平凡的平面设计: 版式设计原理与应用》一书中的怎样运用对比确定字体风格,作者【美】John McWade,更多章节内容可以访问云栖社区“异步社区”公众号查看。</span>
1890 0
|
UED HTML5 移动开发
另类网页设计:30个复古怀旧风格的网站作品
  复古怀旧风格的网页设计是一种独特的网页设计模式。在过去的几年里,我们看到很多复古设计的例子,其中的一些看起来真的很不错,并提供出色的用户体验。当然,复古设计不是适合任何类型的网站,设计必须是故事的一部分并有适应的业务领域,但是如果应用得当,效果是惊人的!这里是30个美丽的复古设计的网站,一起欣赏。
1505 0
|
移动开发 前端开发 HTML5
五彩缤纷!13个学习网站配色技巧的绝佳案例
  使用恰当的调色板是网页设计过程中最重要的部分,也是最困难的部分。通常现有的品牌对于采用什么颜色影响最大,但也可能有其它因素发挥作用。例如,要为网站的访问者定下的基调和情绪主要是由颜色决定。   这篇文章,我们收集了一组优秀配色的网页作品,为您提供很好的启发。
998 0
|
移动开发 前端开发 HTML5
分享10个创新的扁平风格的简历页面设计
  扁平化设计蔓延到各种领域的界面设计中,所以看到它被应用在简历设计之中时不要惊讶。这篇文章原本整理一组创新的扁平风格的简历页面设计,不过没有那么多的例子,因此其中有一部分是普通的扁平风格页面作品,供设计简历页面的时候参考。
729 0
潮流设计:15个创意的 3D 字体版式作品欣赏
  3D字体设计是真的很棒,它最适用于广告。使用3D文字和不同的惊人效果,例如灯光或纹理带来了很多东西。在版式设计中,最重要的是消息。如果它抓住了用户的注意力,设计工作是在正确的轨道上。 您可能感兴趣的相关文章 字体大宝库:10款有趣的精美节日字体 字体大宝库:25款免费的英文 3D 字...
980 0