关闭

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

标签: 网页设计
911人阅读 评论(0) 收藏 举报
分类:

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

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

主 色

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

衬托色

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

背景色

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

强调色

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

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

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

系统架构设计方法论

系统架构设计方法论 软件架构设计方法体系涵盖了预想架构(PA)概念架构(CA)细化架构(RA)三个阶段和一个贯穿环节。 一、预备架构 预备架构阶段主要是通过系统的理解需求和挖掘潜在需求以此建立需求大局观并根据架构驱动因素及五维关注点来确定架构设计方向和蓝图。 1.1 需求结构化 执...
  • u012921921
  • u012921921
  • 2016-11-07 20:29
  • 2054

2015网龙产品策划暑期实习心得

2015网龙软件产品策划暑期实习总结 设计中心软件设计部 产品策划沈轩     网龙实习,为期一月,似学习,似培训,似竞赛,更似度假。     武汉到福州,心想着从一个火炉进入另一个火炉。初入网龙,蓝天、大海,飞船、泳池,怀着一颗实习的心,...
  • shuytu
  • shuytu
  • 2015-08-21 14:19
  • 1074

软件测试的起点和源泉——七种测试驱动模式(方法论)

在进行软件测试时,总要有一个出发点吧?从哪里开始分析?测试设计是基于什么?简单地说,什么驱动测试工作?这是一个基本问题,基于自己多年对软件工程、产品质量和测试等的理解,总结出七类测试驱动模式。
  • KerryZhu
  • KerryZhu
  • 2014-10-01 13:01
  • 7442

对ADMEMS架构设计方法论的一点随笔

今天翻出了温昱老师的《一线架构师实践指南》老书,Review了一下,虽然书是2009年发行的,而且其思想也是作者09年以前的经历和总结,升华到方法论,但时到今日,其架构思想依然是可圈可点的。随笔记下阅后几点,以作小结。 什么是ADMEMS? ADMEMS是Architecture Design ...
  • cooldragon
  • cooldragon
  • 2015-07-22 17:34
  • 2510

网站页面的颜色和线条搭配

网站类型不同,设计时所使用的颜色也会不同,而且颜色直接影响着人们的感受,科泉网络经过调查发现,红色系标志着剧烈、兴奋,灰色系标志着平平和低沉。旅行和园林类型的网站运用绿色系比较多,蓝色则被誉为是公司色确http://934.dtczj.gov.cn实许多公司和都使用的,这是因为沉稳而大方。 网络营...
  • dashuvd
  • dashuvd
  • 2016-06-12 14:00
  • 393

向大牛学习!11名顶尖设计师的设计启迪+职业忠告

@十萬個為什麽 :优秀的设计师活到老学到老。在Springboard,我们把用户体验和数据科学方面的导师与学员相互组队,这对于聆听前辈的建议有重大意义。我们整合了许多顶尖从业者的建议,用来编写我们的用户体验职业指南。因此,我们采访了11位了不起的用户体验设计师,问他们从何处获得灵感,有什么...
  • vanessary2016
  • vanessary2016
  • 2016-03-18 11:43
  • 923

html网页颜色代码表(必备)

html网页颜色代码表,网页设计者必备 红色和粉红色,以及它们的16进制代码。 #990033 #CC6699 #FF6699 #FF3366 #993366 #CC0066 #CC0033 #FF0066 #FF0033 #CC3399 #FF3399 #FF9999 #FF99...
  • needayeah_com
  • needayeah_com
  • 2015-01-18 12:42
  • 1129

教你从零开始成为优秀交互设计师(三):入行篇

在校大学生篇
  • ysydao
  • ysydao
  • 2014-11-05 09:39
  • 1493

美工(一)网页颜色搭配技巧 文字字体、字号、字体排版等

对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他们更多运用的是白色、蓝色、黄色等,使得网页显得典雅,大方和温馨。更重要的是,这样可以大大加快浏览者打开网页的速度。 一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,...
  • wangeen
  • wangeen
  • 2013-12-29 20:14
  • 9291

《产品经理方法论》

从书店看到这本书,读完作下总结,让我对产品猫的认知又上了个台阶。
  • lws_derek
  • lws_derek
  • 2017-04-29 23:04
  • 1359
    个人资料
    • 访问:3861462次
    • 积分:55895
    • 等级:
    • 排名:第58名
    • 原创:1460篇
    • 转载:83篇
    • 译文:1篇
    • 评论:3782条
    博客专栏
    文章存档
    最新评论