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

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

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

主 色

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

衬托色

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

背景色

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

强调色

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

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

相关文章
|
JavaScript IDE 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
467 0
|
2月前
|
传感器 算法 安全
具有飞行约束的无人机MPC模型预测控制研究(Matlab代码实现)
具有飞行约束的无人机MPC模型预测控制研究(Matlab代码实现)
142 2
|
消息中间件 人工智能 运维
暸望塔丨一站式服务和生态,助力中企无忧出海
凭借十载服务出海客户的深厚积累,阿里云形成了面向出海不同阶段的专业、系统的技术产品服务和生态。
暸望塔丨一站式服务和生态,助力中企无忧出海
|
2月前
|
算法 关系型数据库 文件存储
ProxylessNAS:直接在目标任务和硬件上进行神经架构搜索——论文解读
ProxylessNAS是一种直接在目标任务和硬件上进行神经架构搜索的方法,有效降低了传统NAS的计算成本。通过路径二值化和两路径采样策略,减少内存占用并提升搜索效率。相比代理任务方法,ProxylessNAS在ImageNet等大规模任务中展现出更优性能,兼顾准确率与延迟,支持针对不同硬件(如GPU、CPU、移动端)定制高效网络架构。
297 126
ProxylessNAS:直接在目标任务和硬件上进行神经架构搜索——论文解读
|
6月前
|
SQL DataWorks 大数据
DataWorks x 婚礼纪:智能一站式数据开发治理平台让千万新人的幸福时刻“数智化”
婚礼纪是杭州火烧云科技推出的结婚服务平台,覆盖婚宴酒店、婚纱摄影等全产业链,年服务超2000万对新人。为应对海量数据处理挑战,婚礼纪选择阿里云DataWorks作为一站式大数据开发治理平台,解决数据血缘不清、指标口径混乱等问题。通过湖仓一体架构与全链路数据治理,实现多源异构数据高效整合,支撑精准营销、交易风控等核心场景。DataWorks新版数据开发Data Studio大幅提升开发效率,Copilot智能助手优化SQL代码生成与测试,助力婚礼纪构建数据驱动的结婚产业服务中枢。
|
2月前
|
存储 安全 固态存储
基于C#实现的支持文件传输的Socket聊天室
基于C#实现的支持文件传输的Socket聊天室
226 5
|
7月前
|
缓存 搜索推荐 数据库
使用SiteGround搭建WordPress网站的方法
以上就是在SiteGround上搭建WordPress网站的步骤。这个过程可能需要一些时间和耐心,但只要你按照步骤操作,你就可以成功搭建自己的WordPress网站。
268 23
|
7月前
|
缓存 PHP 数据库
WordPress网站服务器性能优化方法,站长必备。
最后,当你将这些方法组合起来并实施时,您将发现你的WordPress网站性能有了显著的提高。别忘了,这不是一次性的任务,要定期执行,保持你的车(网站)始终在轨道上飞驰。
259 21
|
6月前
|
Kubernetes Cloud Native 区块链
Arista cEOS 4.30.10M - 针对云原生环境设计的容器化网络操作系统
Arista cEOS 4.30.10M - 针对云原生环境设计的容器化网络操作系统
225 0