知识分享

网站设计配色基础:色彩设计方法

发表日期:2019/11/11 16:11:52 文章编辑: 浏览次数:1793

网站设计中由于对比色相互对比构成的配色,可以分为互补色或相反色搭配构成的色相对比效果,由白色、黑色等明度差异构成的明度对比效果,以及由纯度差异构成的纯度对比效果。

双色对比

色彩间对比视觉冲击强烈,容易吸引用户注意,使用时经常大范围搭配。

1.png

VISA的案例:http://www.visa.cn/

 2.jpg

VISA是一个信用卡品牌,深蓝色传达和平安全的品牌形象,黄色能让用户产生兴奋幸福感。另外蓝色降低明度后再和黄色搭配,对比鲜明之余还能缓和视觉疲劳。

观点:不管是整体对比还是局部对比,对比色给人强烈的视觉冲击,结合色彩心理学对品牌传达效果更佳。

3.1-2 三色对比

三色对比色相上更为丰富,通过加强色调重点突出某一种颜色,且在色彩面积更为讲究。

5

NAVER的案例:www.naver.com

大面积绿色作为站点主导航,形象鲜明突出。使用品牌色对应的两种中差色作二级导航,并降低其中一方蓝色系明度,再用同色调的西瓜红作为当前位置状态,二级导航内部对比非常强烈却不影响主导航效果。

观点:三色对比中西瓜红作为强调色限定在小面积展现非常关键,面积大小直接影响画面平衡感。

3.1-3 多色对比

多色对比给人丰富饱满的感觉,色彩搭配协调会使页面会非常精致,模块感强烈。

7

Metro的案例:http://www.microsoft.com/

9

Metro风格采用大量色彩,分隔不同的信息模块。保持大模块区域面积相等,模块内部可以细分出不同内容层级,单色模块只承载一种信息内容,配上对应功能图标识别性高。

观点:色彩色相对比、色彩面积对比,只要保持一定的比例关系,页面也能整整有序。

3.2 纯度对比

相对与色相对比,纯度差对比,对比色彩的选择非常多,设计应用范围广泛,可用于一些突出品牌、营销类的场景。

10

PINTEREST的案例:http://www.pinterest.com/

11

页面中心登录模块,通过降低纯度处理制造无色相背景,再利用红色按钮的对比,形成纯度差关系。与色相对比相较,纯色对比冲突感刺激感相对小一些,非常容易突出主体内容的真实性。

观点:运用对比重要的是对比例的把握,面积、构图、节奏、颜色、位置等一切可以发生变化的元素,形成视觉的强烈冲突。

3.3 明度对比

明度对比接近生活实际反映,通过环境远近、日照角度等明暗关系,设计趋于真实。

12

ARKTIS的案例

14

明度对比够构成画面的空间纵深层次,呈现远近的对比关系,高明度突出近景主体内容,低明度表现远景的距离。而明度差使人注意力集中在高亮区域,呈现出药瓶的真实写照。

观点:明度对比使页面显得更单纯、统一,而高低明度差可产生距离关系。

 

总结:

色彩是最能引起心境共鸣和情绪认知的元素,三原色能调配出非常丰富的色彩,色彩搭配更是千变万化。设计配色时,我们可以摒弃一些传统的默认样式,了解设计背后的需求目的,思考色彩对页面场景表现、情感传达等作用,从而有依据、有条理、有方法地构建色彩搭配方案。

原文:http://mux.alimama.com/posts/1392


标签: 网站设计
将文章分享到..
相关新闻
全新新闻
随机新闻
最新网站设计案例

芭迪熊亲幼馆

托幼早教品牌 网站设计建设

北京大地风景建筑设计有限公司

景建筑设计有限公司 网站建设案例

AIP国际教育集团

国际艺术留学教育集团 网站建设案例

中金智汇

智能化商业企业网站设计

韩国 NETHOM

海外网站建设 科技类网站

博天大业集团

生物科技公司 网站设计 网站开发

人教社

人教教材中心 网站建设 网站制作

国际教育科技集团

国际教育科技集团 网站建设

新奥集团-新奥财务有限责任公司

新奥集团成员单位提供财务管理服务的非银行金融机构

北京大学-北京北大新世纪集团

北京大学旗下教育集团 网站建设 网站制作

国家文物局-水下文化遗产

中国水下文化遗产保护中心 网站建设

Hi,我来帮您!