APP下载

色彩规律在网页视觉设计中的应用

2020-06-09梁蓉蓉

参花(下) 2020年6期
关键词:网页色彩设计

摘要:伴随着社会的不断变化,人们对审美的追求逐步提升,优秀的网页视觉设计俨然成为受众评判网页成功与否的一个重要标准。在竞争激烈的互联网市场,若想要留住老用户、获得新用户的青睐,网页就必须在优化功能内容的基础上拥有一个有想法、有特点、切合大众审美性的视觉设计。而色彩作为视觉设计的组成部分之一,对整体网页视觉设计的优劣定性起着至关重要的作用,合理地应用色彩规律,不仅是网页在美观性上的必然要求,也是帮助网页信息分类和提升用户浏览速度的有效方法。因此,如何通过色彩规律的应用,使网页的视觉效果达到最优,便是值得我们探究和思考的问题。

关键词:网页 色彩 设计

一、网页中色彩的设计原则

色彩规律在网页视觉效果的设计过程中,要在保持审美标准的基调上,遵循相应的设计原则,这样才能呈现高规格且符合网页各方面需求的视觉传达形式。

(一)色彩的鲜明性原则。一个色彩鲜明的网页,很容易就能抓住用户的眼球,带来一种耳目一新的视觉体验,从而更大程度地提升网页整体的吸引力。

(二)色彩的独特性原则。千篇一律的色彩形式会带来审美的疲劳,甚至会产生用户过目即忘的后果,所以网页的配色要有自身独特的风格,才能给浏览者留下深刻的印象。可以利用独特的色彩应用带给用户更加强有力的视觉冲击,促使用户产生独特的内心体验。

(三)色彩的艺术性原则。网页视觉设计本质上来说其实是一种艺术活动,所以我们要充分把握艺术规律,在全面考量网页自身特点的同时,大胆地进行艺术的创新。

(四)色彩的统一性原则。这里说的色彩的统一性,指的是在整体网页设计中我们要注意色彩之间的和谐统一。每一个页面都要形成统一的配色方案以便给用户提供更流畅的浏览和操作体验。

二、网页中色彩的设计方法

我们对颜色理解和感受的程度不同,影响了网页页面的视觉表现,熟练地运用色彩规律进行色彩的搭配,有利于我们更加迅速地把握设计方向。结合色彩的规律,我们可以将网页中的色彩搭配分为三个大类来分析。

(一)色相差而形成的配色

这种方式指的是由一种色相构成的统一性配色。也就是由某一种色相统一主导、支配整个画面;如果说不是同一种色相,那色环上相邻的类似色也可以形成相近的配色形式;当然也有一些色相之间差异较大的配色方法,例如撞色。首先就某一种色相主导统一的形式来说,Twitter的网页设计就是典型的同色系配色案例,它采用蓝色给用户带来整体的印象,再用不同深浅的蓝色来代表不同类型的信息,用颜色主导着网页的信息功能层级,像浅蓝色代表回复内容,更深一些的蓝色代表着可回复操作的含义。

邻近色和类似色是现在比较常见的网页配色方式。邻近色和类似色的表现效果会比同色系略微丰富一些,由于在色相环上相近,色相的过渡就非常柔和,统一性中带了一些色彩的变化,能在缓解单一色产生的单调感的基础上,有效避免因色彩使用过多而易造成的混乱感。在色相差而形成的配色方法中还包括中差色、对比色、中性色和多色搭配等等,这些方法下的网页视觉效果会更具有视觉冲击性。

(二)色调调和而形成的配色

色调调和而形成的配色方法中有三种情况:第一种是有主导色调配色而成的方法,第二种是同色调调和而成的方法,第三种是同色深浅搭配方法。有主導色调配色而成的方法指的是由同一色调构成的统一性配色,这种方式下,即便出现多种色相,只要保持色调一致,画面依然可以表现出整体统一感。例如一个阴暗色调的页面,哪怕是加入了几个颇为鲜艳的色相,只要降低其色彩饱和度使各色块协调并融合进大背景内,这样的多彩色经过统一的色调处理,也不会影响表现整体的视觉氛围。同色调调和而成的方式说的是由同一种或是类似色调中的色相变化组成的配色形式,某种意义上来说这与主导色调配色方式归属于同一类手法,其区别就在于色调分布均匀,并没有过深抑或是过浅的色块,整体的色调范围更为严格一些。第三种同色深浅搭配指的是由同一色相的色调差组成的配色类型,其实也是归属于单一色彩配色的一种,从理论上来看,在同一色相下的色调并不会出现色相的差异化,而应该是通过不同的色调阶层混合形成。

(三)对比配色而形成的配色

对比色配色指的是由对比色相相互对比形成的配色,总的来说可以分成互补色和相反色搭配而成的色相对比、由白色或黑色等明度差异构成的对比效果和由纯度差异形成的纯度对比效果。

互补色和相反色搭配而成的色相对比中包括双色、三色和多色对比形式。双色对比的视觉冲击力很强烈,能够利于吸引用户的视觉注意力,在网页设计的使用过程中经常大范围地搭配使用。例如VISA的品牌官网,巧妙地运用了深蓝色和黄色的色彩对比方式,深蓝色表现着安全和平的品牌形象,黄色给用户带来幸福和满足感,结合色彩心理学的角度,完美地传达了品牌的理念。三色对比从色相的角度来说会更为丰富一些,当然,在实际网页视觉的使用中会通过色调的重点来集中突出某一种颜色,并且在色彩的使用面积上也很是讲究。多色对比在网页中的应用则会给用户带来一种丰富饱满的感受,在色调的和谐处理下,会使得页面呈现出精致的视觉效果。

比起色相的对比,纯度差的对比会在色彩的选择上更为广泛,在网页设计中的应用形式也更为多样化,常用于一些突出品牌或是营销类的场景。比如现如今许多网页经常用这种方式来处理登录模块,通过降低纯度来设计出无色相的背景,再用一种色相作为登录模块的按钮颜色设置,形成整体纯度差的关系。这种对比关系给人的视觉刺激会更为柔和,便于突出表现主题内容的真实感。

而明度的对比会比较接近于实际生活的反映,网页的设计处理上往往会通过图片或图形元素的明暗处理,来构建网页的纵深空间层次,营造出高低远近的视觉效果,用高明度来表现近景主题内容,使用低明度来塑造远景的距离,利用明度差来使用户的目光聚集在高亮位置的主题内容之上。明度对比会显得页面单纯又具有统一性,极具视觉空间感。

三、网页设计中色彩的视觉语言

每种颜色有着自己独特的颜色属性和视觉语言。比如黑色就具备着鲜明、简洁的色彩特征,自身含义包括正式、庄严和肃穆、沉重等,还可以通过黑色色块或线条来表现科技感,网页往往会灵活地运用黑色来提升信息的突出性。白色作为纯洁无瑕的颜色代表,往往会在网页中作为底色或留白来使用,借以展现网页的视觉空间,也赋予页面呼吸感。灰色作为一种较为柔和的色彩,常常在网页中用来划分功能区域,缓和板块之间的生硬过渡,烘托其他颜色,更好地提升用户的使用感。红色往往被用以营造喜庆、温暖的视觉氛围,而黄色作为明度较高的颜色则给人一种鲜艳、明亮的视觉感受,红色和黄色的搭配往往能够给人灵活性、刺激性的内心体验。绿色作为中性色则带给用户清新、平和、充满生机的观感。蓝色通常适用于浪漫、沉稳的风格表现。

结合用户对网页的实际浏览情况来看,往往大家最先感受到的视觉效果和整体风格倾向是色彩的表现,其实色彩就是网页表达内容的一种视觉语言。在这样的背景下,我们进行配色方案的选取前,针对网页的功能和内容以及要表现的主题进行全面有效的分析,并根据分析结果来选取切合主题含义的颜色范围,是确保配色方案成功的重要因素。在选定色彩范围的时候,我们就必须充分考量色彩语言的差异和特点,选用最能合理为网页“发声”的颜色。

四、结语

综上所述,现代网页视觉设计中,若想提高整体审美性体验和用户的使用好感度,离不开色彩的谨慎设计。因此,我们要根据色彩的规律,充分把握色彩的设计方法,合理选取配色方案,更高效率地去完成网页的视觉设计。

(作者简介:梁蓉蓉,女,硕士研究生,湖南信息职业技术学院,助教,研究方向:数字媒体应用技术)(责任编辑 刘冬杨)

猜你喜欢

网页色彩设计
BUBA台灯设计
基于HTML5静态网页设计
有种设计叫而专
搜索引擎怎样对网页排序
神奇的色彩(上)
春天的色彩
色彩当道 俘获夏日
2015春夏鞋履色彩大集结
匠心独运的场地设计画上完美句点
设计之味