网站色彩设计与搭配技术(上)

简介: 网页访客第一眼看到的网站,不是优美的版式或者美丽的图片,而是网页的色彩。

网页访客第一眼看到的网站,不是优美的版式或者美丽的图片,而是网页的色彩。可见网页色彩对于网页设计是多么重要,本篇重点讲述网页色彩设计与搭配的技术。

在任何一个设计中,色彩对视觉的刺激都起到的是第一信息传达的作用。网页中的色彩设计是最直接的视觉效果,不同颜色的运用会给人以不同的感受。

高明的设计师会运用颜色来表现网站的理念和内在品质。为了能更好地应用色彩来设计网页,需要掌握以下色彩基础知识。

image.png
**
一、认识色彩**

自然界中的颜色五颜六色、千变万化,比如红色的玫瑰,蓝色的大海,橙色的橘子……但最基本的色彩其实只有3种:红、黄、蓝。其他的色彩都可以由这3种色彩调和而成,通常称这3种色彩为“三原色”。

大家平时看到的白色光经过分析,在色带上可以看到,它包括红、橙、黄、绿、青、蓝、紫7种颜色,各种颜色之间自然过渡,其中红、绿、蓝是三原色,三原色通过不同比例的混合可以得到各种颜色。

现实生活中的色彩大致可以分为彩色和非彩色两种,其中黑、白、灰属于非彩色系列,其他的色彩都属于彩色系列。任何一种彩色都具备三个特征:色相、明度和饱和度,非彩色只有明度属性。

同一色相的色彩调整一下亮度或纯度很容易搭配,如深绿、暗绿、草绿、亮绿。例如,一些购物、儿童类网站用的是一些鲜亮的颜色,让人感到绚丽多彩、生气勃勃。明度越低,则颜色越暗。明度主要用于一些游戏类网站,可使网站充满神秘感。

非彩色只有明度属性,没有色相和饱和度属性。那么网站设计时用彩色还是非彩色好呢?根据专业研究表明:彩色的记忆效果是黑白色的3.5倍。也就是说,在一般情况下,彩色页面相比黑白页面更加吸引人。

image.png

通常是将主要内容(比如文字)用非彩色(黑色),边框、背景、图片这些用彩色。这样整体页面显得不单调,和谐统一。

二、网页的安全颜色

在网页中,常以RGB模式来表示颜色的值,RGB表示红(Red)、绿(Green)、蓝(Blue)三原色。通常情况下,RGB各有256级亮度,用0~255表示。

对于单独的R、G或B而言,当数值为0时,代表这种颜色不发光;如果为255,则代表这种颜色为最高亮度。当RGB这3种色光都发到最强的亮度时(RGB值为255、255、255),表示纯白色,用十六进制数表示为“FFFFFF”。

相反,纯黑色的RGB值是0、0、0,用十六进制数表示为“000000“。纯红色的RGB值是255、0、0,意味着只有红色R存在且亮度最强,G和B都不发光。同理,纯绿色的RGB值是0、255、0,纯蓝色的RGB值是0、0、255。

按照计算,256级的RGB色彩总共能组合出约1678万种色彩,即256256256=16777216,通常也被简称为1600万色或千万色,也称为24位色(2的24次方)。既然理论上可以得出16777216种颜色,那为什么又出现了网页安全颜色范畴为216种颜色呢?这是因为浏览器的缘故。

image.png
网页被浏览器识别以后,只有216种颜色能在浏览器中正常显示,多于这个范围的颜色有的浏览器显示时就可能发生偏差,不能正常显示。因此将能被所有浏览器正常显示的216种颜色称为网页安全颜色范畴。

现在浏览器的性能越来越高,网页的安全颜色范畴也越来越广,但最安全的还是216种颜色。在Dreamweaver中,提供了具有网页安全颜色范畴的调色板,可将网页的颜色选取控制在安全范围之内。

RGB模式是显示器的物理色彩模式,这就意味着无论在软件中使用任何色彩模式,只要是在显示器上显示,图像最终就是以RGB方式出现。
**
网页色彩的搭配**

打开一个网站,给用户留下第一印象的既不是网站的内容,也不是网站的版面布局,而是网站的色彩。色彩对人的视觉效果非常明显。一个网站设计得是否成功,某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计,在平面图上,色彩的冲击力是最强的,它最容易给用户留下深刻印象。
image.png
**
三、如何处理色彩**

色彩是人的视觉中最敏感的要素。网页的色彩处理得好,可以锦上添花,达到事半功倍的效果。

1.色彩的感觉

①色彩的冷暖感

红、橙、黄代表太阳、火焰;青、蓝、紫代表大海、晴空;绿、紫代表不冷不暖的中性色;无色系中的黑代表冷,白代表暖。

②色彩的软硬感

高明度,高纯度的色彩能给人以软的感觉,反之则感觉硬。

③色彩的强弱感

亮度高的明亮、鲜艳的色彩感觉强,反之则感觉弱。

④色彩的兴奋与沉静

红、橙、黄偏暖色系,高明度,高纯度,对比强的色彩感觉兴奋;青、蓝、紫偏冷色系,低明度,低纯度,对比弱的色彩感觉沉静。例如,下图为大气漂亮的果农蔬菜基地公司网站(该网站由阿里云模板建站产品-「速美」提供)

⑤色彩的华丽与朴素

红、黄等暖色和鲜艳而明亮的色彩能给人以华丽感;青、蓝等冷色和浑浊而灰暗的色彩能给人以朴素感。

⑥色彩的进退感

对比强、暖色、明快、高纯度的色彩代表前进,反之代表后退。对色彩的这种认识早在10多年前就已经被国外众多企业所认可和接受,并由此产生了色彩营销战略。

许多企业将此作为市场竞争的有利手段,和再现企业形象特征的方式,通过设计色彩抓住了商机。像绿色的“鳄鱼”、红色的“可口可乐”、红黄色的“麦当劳”以及黄色的“柯达”等。在欧美和日本等发达国家,设计色彩早就成了一种市场竞争力,被广泛适用。

2.色彩的季节性

春季处处是生机,所以会流行一些活泼跳跃的色彩;夏季气候炎热,人们渴望凉爽,所以流行以白色和浅色调为主的清爽亮丽的色彩;秋天秋高气爽,流行的是沉重的暖色调;冬天气候寒冷,深颜色有吸光、传热的作用,人们渴望能暖和一些,喜欢穿深色衣服。

这就很明显地形成了四季的色彩流行趋势,春夏以浅色、明艳色调为主;秋冬以深色、稳重色调为主。每年色彩的流行趋势都会因此而分成春夏和秋冬两大色彩趋向。

3.颜色的心理感觉

不同的颜色会给网站访客不同的心理感受。

①红色

红色是一种激奋的色彩,代表热情、活泼、温暖、幸福和吉祥。红色极易引起人的注意,容易使人兴奋、激动、热情、紧张和冲动,也是一种容易给人造成视觉疲劳的颜色。

②绿色

绿色代表新鲜、充满希望、和平、柔和、安逸和青春,显得和睦、宁静、健康。绿色具有黄色和蓝色两种颜色成分。在绿色中,将黄色的扩张感和蓝色的收缩感中和,将黄色的温暖感与蓝色的寒冷感相抵消。绿色和金黄、淡白搭配,可产生优雅、舒适的气氛。
image.png
该网站由阿里云模板建站产品-「速美」提供

③蓝色

蓝色代表深远、永恒、沉静、理智、诚实、公正、权威,是最具凉爽、清新特点的色彩。蓝色和白色混合,能体现柔顺、淡雅、浪漫的气氛(天空的色彩)。

④黄色

黄色具有快乐、希望、智慧和轻快的个性。它的明度最高,代表明朗、愉快、高贵,是色彩中最为娇气的一种色。只要在纯黄色中混入少量的其他色,其色相感和色性格均会发生较大程度的变化。

⑤紫色

紫色代表优雅、高贵、魅力、自傲和神秘。在紫色中加入白色,可使其变得优雅、娇气,并充满女性魅力。

⑥橙色

橙色也是一种激奋的色彩,具有轻快、欢欣、热烈、温馨、时尚的效果。

⑦白色

白色代表纯洁、纯真、朴素、神圣和明快,具有洁白、明快、纯真、清洁的感觉。如果在白色中加入其他任何色,都会影响其纯洁性,使其性格变得含蓄。

⑧黑色

黑色具有深沉、神秘、寂静、悲哀、压抑的感受。

⑨灰色

在商业设计中,灰色具有柔和、平凡、温和、谦让、高雅的感觉,具有永远流行性。在许多的高科技产品中,尤其是和金属材料有关的,几乎都采用灰色来传达高级、科技的形象。使用灰色时,大多利用不同的参差变化组合和其他色彩相配,才不会过于平淡、沉闷、呆板和僵硬。

色彩在饱和度、亮度上略微变化,都会产生不同的感觉。以绿色为例,黄绿色有青春、旺盛的视觉意境,而蓝绿色则显得幽静、深沉。

色彩设计既是一项技术性工作,也是一项艺术性很强的工作。因此在设计网页时,除了要考虑网站本身的特点外,还要遵循一定的艺术规律,从而设计出色彩鲜明、个性独特的网站。

以上,是有关网站色彩设计(选取)的基础内容,掌握这些以后就可以轻松设计出符合网站风格的色彩,也可以将这些知识运用到生活中的其他地方。限于篇幅,我将本节内容分为了上下两篇,此为上篇。关于网站色彩搭配技术的内容我会在下篇文章中讲述,请持续关注。

相关文章
|
缓存 图形学
游戏通用解决方案之红点设计
游戏通用解决方案之红点设计
547 0
|
12天前
|
数据可视化 搜索推荐
如何利用动画效果来提高用户对产品的记忆度?
利用动画效果提高用户对产品的记忆度,需要从多个方面入手
20 1
|
6月前
|
UED
【专栏:交互与用户体验篇】网页中的色彩搭配与配色方案
【4月更文挑战第30天】网页设计中,色彩搭配影响用户体验。了解色彩心理学、搭配原则及配色方案至关重要。色彩能传达信息、影响感知,通过对比与和谐、色彩平衡和层次创造良好视觉效果。单色、类似色、对比色和互补色四种配色方案各有优缺点,需根据目标用户和网页需求选择。恰当的色彩运用能提升美感,增强网页吸引力。
133 5
|
6月前
|
机器学习/深度学习 人工智能 算法
免费背景音人声分离解决方案MVSEP-MDX23,足以和Spleeter分庭抗礼
在音视频领域,把已经发布的混音歌曲或者音频文件逆向分离一直是世界性的课题。音波混合的物理特性导致在没有原始工程文件的情况下,将其还原和分离是一件很有难度的事情。 言及背景音人声分离技术,就不能不提Spleeter,它是一种用于音频源分离(音乐分离)的开源深度学习算法,由Deezer研究团队开发。使用的是一个性能取向的音源分离算法,并且为用户提供了已经预训练好的模型,能够开箱即用,这也是Spleeter泛用性高的原因之一,关于Spleeter,请移步:[人工智能AI库Spleeter免费人声和背景音乐分离实践(Python3.10)](https://v3u.cn/a_id_305),这里
免费背景音人声分离解决方案MVSEP-MDX23,足以和Spleeter分庭抗礼
|
缓存 Kubernetes API
数据缓存系列分享(三):通过 StableDiffusion 扩展插件实现网红爆款文字光影图
在文章《23秒完成从零开始搭建StableDiffusion》中我们详细讲解了通过ECI的数据缓存快速搭建StableDiffusion应用,用户通过模型网站选择好自己需要的模型,然后创建ECI数据缓存,即可快速部署自己的StableDiffusion应用。本文将基于StableDiffusion + 扩展插件 ControlNet 来完成实现网红爆款文字光影图
403 0
数据缓存系列分享(三):通过 StableDiffusion 扩展插件实现网红爆款文字光影图
|
计算机视觉
平面设计实验六 色彩调整与风景美化
平面设计实验六 色彩调整与风景美化
94 0
|
Java 计算机视觉
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏04图像资源的透明处理
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏04图像资源的透明处理
123 0
|
机器人
网站色彩设计与搭配技术(下)
这篇文章是我总结出的关于网站色彩搭配的精华所在,供大家参考,希望你在建站这条路上少走弯路。
563 0
网站色彩设计与搭配技术(下)
|
机器学习/深度学习 安全 Android开发
搞颜色指南|巧用色彩搭配,制作吸睛网站。
建站|全网最系统的色彩搭配指南,教你制作吸睛网站
437 0
|
UED
这些更细致的色彩知识,能让你的设计体验更好
当我们讨论色彩的时候,聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美学上的选择,但是实际上,色彩对于用户的心理和行为的影响相对更深,最终会反映在用户体验和行为反馈上。 经过深思熟虑的配色最终会从「不错」提升到「优秀」,平庸的配色最终会降低用户体验,甚至会影响网站本身的可用性。
1255 0
下一篇
无影云桌面