宿州学院商学院,安徽宿州,234000
摘要:
在互联网已经进入web4.0时代,人们已经对网页的浏览量超过纸质图文。网页的美观直接影响用户在网页的点击以及停留时长,色彩在网页如何搭配才能有带给用户舒适体验,不仅满足网站的主题风格,也运用色彩去优化网页排版和布局,去增强网页的宣传效果。
摘要:网页设计、色彩搭配、优化网页
作者简介:丁美近,女,1995年1月生,安徽六安人,汉族,宿州学院商学院电子商务专业2014级学生
基于信息技术快速发展的互联网在人们的日常生活中已经不可或缺,网页设计的好坏决定人们使用的愉悦性和满意度,最终决定着项的商业目标。网页设计师需要不断地调整视觉元素,改进界面设计来心全回用户的需求和偏好,色彩搭配是网页设计的重要设计元素,如何更好地搭配色彩让网页色彩过度平和,不突兀。
本文从色彩搭配优势效应理论出发,研究不同领域的网站适用哪种配色,基于诺曼理论和实验结果,提出网页设计中图片优势的两大性,认知优势效应和情感优势效应,丰富了网页设计中的色彩搭配。
1.色彩基础知识
色彩是一种自然界的客观存在,不同的色彩能够给人以愉快、压抑、温馨等不同的心理感受。
根据光的来源来分类分为:光源色,固有色,环境色。
色彩本身并没有情感,主要是各种色相、明度、纯度组合在一起所产生的不同效果。
色彩的组成:
原色:红黄蓝
间色:二次色,原色混合后得到的颜色。
复色:原色与间色混合,间色与间色混合。
三次色来源于间色与原色的混合。
色环:三种原色、三种间色、六种复色组成的系统统称为十二环色。
2.色彩的三个属性:
色相:色相,即各类的相貌称谓。色相是的首要特征,是区别各种不同色彩的最准确的标准。色相的特征决定于的组成以及有色物体表面反射的各辐射的比值对人眼所产生色相的感觉。
饱和度:纯度用来表现色彩的鲜艳和深浅。纯度是深色、浅色等色彩鲜艳度的判断标准。纯度最高的色彩就是原色,随着纯度的降低,就会变化为暗淡的,没有色相的色彩。纯度降到最低就是失去色相,变为无彩色。
明度:色彩亮度,反映的是色彩的深浅变化。
3.色彩搭配原理
色彩的搭配:单色
相似色:是指在色轮上相邻的三个颜色,可以在同一个色调中制造丰富的质感和层次。
互补色:是指色轮上那些呈180°角的颜色。在颜色饱和度很高的情况下,可以创建十分震撼的视觉效果。
明暗:颜色的色调也可以影响颜色给人的感觉,实际应用中,在采用单色配色方案时,通过改变颜色的色调来创建不同的感觉。
暖色:可以创造温暖的感觉。给图像添加一个橙色的滤镜,图像看起来就会有温馨快乐的感觉。
冷色:冷色可以给人平静、安宁的感觉。
色彩的情感属性:某一种色彩或者色调的出现,往往引起人们对生活的联想和情感共鸣。
4.网页设计中色彩作用:不仅仅美化页面,更有其他作用视觉区域划分层次对主次关系的引导主次关系。
5.网页配色原则:整体性原则,适用性原则,独特性原则,艺术性原则。
6.网页配色技巧:
A、色相差而形成的配色方式
(1)同色系配色
同色系配色是指主色和辅色都在统一色相上,往往会给人页面很一致化的感受。
(2)邻近色配色
邻近色配色搭配比同色系稍微丰富,色相柔和过渡看起来也很和谐。
(3)类似色配色
类似色配色对比不强给人色感平静、调和的感觉。
期刊文章分类查询,尽在期刊图书馆
(4)中差色配色
中差色对比相对突出,色彩对比明快,容易呈现饱和度高的色彩。
(5)对比色配色
主导的对比配色需要精准地控制色彩搭配和面积,其中主导色会带动页面气氛,产生激烈的心理感受。
(6)中性色配色
用一些中性的色彩作为基调搭配,常应用在信息量大的网站,突出内容,不会受不必要的色彩干扰。这种过配色比较通用,非常经典。
(7)多色搭配下的主导
主色和其他搭配色之间的关系会更丰富,可能有类似色、中差色、对比色等搭配方式,但其中某种色彩会占主导。
B、色调调和而形成的配色方式
B.1有主导色调的配色。
这是由同一色调构成的统一性配色。
B.1.1清澈调子使页面非常和谐,即使是不同色相形同色调的配色能让页面保持较高的协调度。
观点:互补的色相搭配在一起,通过统一色调的手法,可以缓和色彩之间的对比效果。
B.1.2阴暗的色调渲染场景氛围,通过不同色相的色彩变化丰富信息分类,降低色彩饱和度使各色块协调并融入场景。
Tips:多色彩经过统一色调处理,区域间非常协调,也不影响整体页面阴暗气氛表现。
B.1.3明亮的颜色活泼清晰,但铺满高纯度的色彩,过于刺激,不适宜长时间游览。
观点:饱和度与纯度特性明显的搭配,在达到视觉冲击力的同时,可适当采用对比色或降低明度等方法调和视觉表现。
B.1.4页面以深暗偏灰色调为主,不同的色彩搭配,白色文字的排版,整个页面显得厚重精致,小区域微渐变增加版面质感。
观点:以低暗色调构成整体画面氛围,小面积明亮部分不会影响整体感觉。
B.1.5柔和的色调使页面显得明快温暖,就算色彩很多也不会造成视觉负重。页面的同色调搭配,颜色作为不同模块的信息分类,不抢主体的重点,还能衬托不同类型载体的内容信息。
观点:同色调不同色彩的模块,就算承载着不同的信息内容也能表现很和谐。
B.2同色调配色
这是由同一或类似色调中的色相变化构成的配色类型,与主导色调配色中的属于同类技法。
观点:综合运用的情况,整体界面要有主导色调。
B.3 同色深浅搭配
这是由同一色相的色调差构成的配色类型,属于单一色彩配色的一种。与主导色调配色中的同色系配色属于同类技法。
观点:同色深浅配色有着极高的统一性,但有点枯燥。
C、对比配色而形成的配色方式
由于对比色相互对比构成的配色,可以分为互补色或相反色搭配构成的色相对比效果。
3.1-1 双色对比
色彩间对比视觉冲击强烈,容易吸引用户注意,使用时经常大范围搭配。
观点:不管是整体对比还是局部对比,对比色给人强烈的视觉冲击,结合色彩心理学对品牌传达效果更佳。
3.1-2 三色对比
三色对比色相上更为丰富,通过加强色调重点突出某一种颜色,且在色彩面积更为讲究。
观点:三色对比中西瓜红作为强调色限定在小面积展现非常关键,面积大小直接影响画面平衡感。
3.1-3 多色对比
多色对比给人丰富饱满的感觉,色彩搭配协调会使页面会非常精致,模块感强烈。
观点:色彩色相对比、色彩面积对比,只要保持一定的比例关系,页面也能整整有序。
3.2 纯度对比
相对与色相对比,纯度差对比,对比色彩的选择非常多,设计应用范围广泛,可用于一些突出品牌、营销类的场景。
观点:运用对比应注重对比例的把握,面积、构图、节奏、颜色、位置等一切可以发生变化的元素,形成视觉的强烈冲突。
3.3 明度对比
明度对比接近生活实际反映,通过环境远近、日照角度等明暗关系,设计趋于真实。
观点:明度对比使页面显得更单纯、统一,而高低明度差可产生距离关系。
总结:
色彩是最能引起心境共鸣和情绪认知的元素,设计配色时,我们可以摒弃一些传统的默认样式了解设计背后的需求目的,思考色彩对页面场景表现、情感传达等作用,从而更合理地构建色彩搭配方案。
参考文献:
[1]浅谈网页色彩设计[J]. 李立伟.郑州轻工业学院学报(社会科学版).2007(02)
[2]网页经典配色与设计手册[M]. 中国青年出版社 , 卢坚, 2006
论文作者:丁美近
论文发表刊物:《知识-力量》2017年12月下
论文发表时间:2018/4/11
标签:色彩论文; 色相论文; 色调论文; 明度论文; 纯度论文; 页面论文; 间色论文; 《知识-力量》2017年12月下论文;