网站建设之网页配色颜色搭配网页制作
发布时间：2022-04-15 10:37:08 所属栏目：搜索优化 来源：互联网
导读：无论是在网站建设网页或者App都离不开网页设计和UI设计,颜色的搭配,网页整体颜色搭配,整体版面构造从而也给客户增加了体验的度,毕竟经济互联网,是眼球经济,流量经济,这一块起着重要作用,详细见下文代码颜色详解,对于网站建设和网页设计朋友有所帮助。下面文
|
无论是在网站建设网页或者App都离不开网页设计和UI设计,颜色的搭配,网页整体颜色搭配,整体版面构造从而也给客户增加了体验的度,毕竟经济互联网,是眼球经济,流量经济,这一块起着重要作用,详细见下文代码颜色详解,对于网站建设和网页设计朋友有所帮助。下面文字稍长了些大家可以看一些觉得自己用的到的质量文字。星乐优化专业服务网站建设，SEO优化，SEM托管，网站托管，网络推广,App推广等业务，如您遇到疑难问题欢迎咨询客服交流。 普通来说，网页的背景色应该柔和少许、素少许、淡少许，再配上深色的文字，使人看起来天然、舒畅。而为了追求醒目的视觉效果，能够为标题使用较深的颜 色。下面是我做网页和浏览别人的网页时，对网页背景色和文字色彩搭配蕴蓄堆积的经验，这些色彩能够做正文的底色，也能够做标题的底色，再搭配不同的字体，一定 会有不错的效果，希望对大家在制作网页时有用。 BgcolorΚ″#F1FAFA″———做正文的背景色好，清雅 BgcolorΚ″#E8FFE8″———做标题的背景色较好 BgcolorΚ″#E8E8FF″———做正文的背景色较好，文字色彩配黑色 BgcolorΚ″#8080C0″———上配黄色白色文字较好 BgcolorΚ″#E8D098″———上配浅蓝色或蓝色文字较好 BgcolorΚ″#EFEFDA″———上配浅蓝色或血色文字较好 BgcolorΚ″#F2F1D7″———配黑色文字素雅，如果是血色则显得醒目 BgcolorΚ″#336699″———配白色文字悦目些 BgcolorΚ″#6699CC″———配白色文字悦目些，能够做标题 BgcolorΚ″#66CCCC″———配白色文字悦目些，能够做标题 BgcolorΚ″#B45B3E″———配白色文字悦目些，能够做标题 BgcolorΚ″#479AC7″———配白色文字悦目些，能够做标题 BgcolorΚ″#00B271″———配白色文字悦目些，能够做标题 BgcolorΚ″#FBFBEA″———配黑色文字比较悦目，普通作为正文 BgcolorΚ″#D5F3F4″———配黑色文字比较悦目，普通作为正文 BgcolorΚ″#D7FFF0″———配黑色文字比较悦目，普通作为正文 BgcolorΚ″#F0DAD2″———配黑色文字比较悦目，普通作为正文 BgcolorΚ″#DDF3FF″———配黑色文字比较悦目，普通作为正文 浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。血色底配白色文字，比较深的底色配黄色文字显得非常有效果。 此文只是起一个“抛砖引玉”的好处，大家能够发挥想象力，搭配出更有新意、更醒目的色彩，使网页更具备吸引力 如今，互联网越来越走近我们的生活，网上冲浪也渐渐成为我们生活不可贫乏的一部分。网络世界五彩缤纷，涌现出大量优秀精美的网页。大量网络消息的呈 现，无非就是通过文本、图像、Flash动画等，其中， 文本是网页中最为紧张的设计元素。对于网页设计初学者而言，打听和掌握网页设计中的文字排版设计就显得尤为紧张，下面笔者想谈谈一相情愿。 文字的格式化 字号、字体、行距 字号大小能够用不同的方法来计较，例如磅#quotel.quoter#或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅，因此，建议接纳磅为单位。 最适用于网页正文显示的字体大小为12磅左右，现在很多的概括性站点，由于在一个页面中需要放置的内容较多，通常接纳9磅的字号。较大的字体可用于标 题或其余需要夸大的地方，小少许的字体能够用于页脚和辅助消息。需要留意的是，小字号容易产生整体感和细腻感，但可读性较差。 网页设计者能够用字体来更充分地体现设计中要表白的情愫。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体假想和浏览者 的需要。例如：粗体字强健有力，有男性特点，适用机器、建筑业等内容；细体字高雅细致，有女性特点，更适用服装、化装品、食品等行业的内容。在同一页面 中，字体品种少，版面雅致，有稳定感；字体品种多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。 从增强平台无关性的角度来考虑，正文内容最好接纳缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的 机器里只装有三种字体类型及少许相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。办理疑问的办法是：在确 有必要使用分外字体的地方，能够将文字制成图像，然后插入页面中。 行距的变化也会对文本的可读性产生很大影响。普通情况下，靠近字体尺寸的行距设置比较适用正文。行距的常规比例为10:12，即用字10点，则行距 12点。这主要是出于以下考虑：适当的行距会形成一条明显的程度空白带，以引导浏览者的眼光，而行距过宽会使一行文字落空较好的延续性。 除了对于可读性的影响，行距自己也是具备很强阐扬力的设计语言，为了增强版式的装饰效果，能够有意识地加宽或缩窄行距，体现怪异的审美意趣。例如，加 宽行距能够体现轻松、舒张的情绪，软件于娱乐性、抒怀性的内容恰到好处。另外，通过精心放置，使宽、窄行距并存，可增强版面的空间层次与弹性，阐扬出独到 的匠心。 行距能够用行高(line-height)属性来设置，建议以磅或默认行高的百分数为单位。例如：｛line-height：27px｝、｛line-height：150%｝。 文字的整体编排 页面里的正文部分是由很多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的好处。从艺术的角度能够将字体自己当作是一种艺术形 式，它在个性和情愫方面临人们有着很大影响。在网页设计中，字体的处理与色彩、版式、图形等其余设计元素的处理一样非常关键。从某种意义上来讲，全部的设 计元素都能够理解为图形。 1．网页设计|文字的图形化 字体具备两方面的好处：一是实现字意与语义的功能，二是美学效应。所谓文字的图形化，就是夸大它的美学效应，把记号性的文字作为图形元素来阐扬，同时 又强化了原有的功能。作为网页设计者，既能够按照常规的方法来设置字体，也能够对字体进行艺术化的设计。无论怎样，全部都应围绕如何更出色地实现自己的设 计目标。 将文字图形化、意象化，以更富创意的形式表白出深层的设计头脑，能够克服网页的单调与平淡，从而打动民气。 2．网页设计|文字的叠置 文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、噪音感和叙事感，从而成为页面中活跃的、使人注目的元素。虽然叠置手 法影响了文字的可读性，但是能造成页面怪异的视觉效果。这种不追求易读，而刻意追求“噪音”的阐扬手法，体现了一种艺术思潮。于是，它不仅大量运用于传统 的版式设计，在网页设计中也被广泛接纳。 3．网页设计|标题与正文 在进行标题与正文的编排时，可先考虑将正文作双栏、三栏或四栏的编排，再进行标题的置入。将正文分栏，是为了求取页面的空间与弹性，幸免通栏的呆板以 及标题插入方法的单纯性。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，乃至能够直接插入字群 中，以新鲜的版式来冲破旧有的规律。 4．网页设计|文字编排的四种基本形式 页面里的正文部分是由很多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的好处。 两头均齐：文字从左端到右端的长度均齐，字群形成方朴直正的面，显得端正、严谨、美观。 居中分列：在字距相等的情况下，以页面中心为轴线分列，这种编排方法使文字更加突出，产生对称的形式美感。 左对齐或右对齐：左对齐或右对齐使行首或行尾天然形成一条清楚的垂直线，很容易与图形合营。这种编排方法有松有紧，有虚有实，跳动而飘逸，产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯，显得天然；右对齐因不太符合阅读习惯而较少接纳，但显得新鲜。 绕图分列：将文字绕图形边缘分列。如果将底图插入文字中，会使人感应融洽、天然。 文字的夸大 1．网页设计|行首的夸大 将正文的第一个字或字母放大并作装饰性处理，嵌入段落的开头，这在传统媒体版式设计中称之为“下坠式”。此技巧的发现溯源于欧洲中世纪的文稿抄写员。 由于它有吸引视线、装饰和活跃版面的好处，因此被软件于网页的文字编排中。其下坠幅度应横跨一个完整字行的高低幅度。至于放大多少，则依据所处网页环境而 定。 2．网页设计|引文的夸大 在进行网页文字编排时，常常会碰到提要挈领性的文字，即引文。引文概括一个段落、一个章节或全文马虎，因此在编排上应给予分外的页面位置和空间来强 调。引文的编排方法多种多样，如将引文嵌入正文的左右侧、上方、下方或中心位置等，并且能够在字体或字号上与正文相区别而产生变化。 3．网页设计|个别文字的夸大 如果将个别文字作为页面的诉求重点，则能够通过加粗、加框、加下划线、加指示性符号、歪斜字体等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而醒目。另外，改变某些文字的色彩，也能够使这部分文字得到夸大。这些方法实际上都是运用了对比的法则。 文字的色彩 在网页设计中，设计者能够为文字、文字链接、已访问链接和当前举止链接选用各种色彩。例如，如果你使用FrontPage编辑器，默认的设置是这样 的：正常字体色彩为黑色，默认的链接色彩为蓝色，鼠标点击之后又变为紫血色。使用不同色彩的文字能够使想要夸大的部分更加有目共睹，但应该留意的是，对于 文字的色彩，只可少量运用，如果什么都想夸大，其实是什么都没有夸大。况且，在一个页面上运用过多的色彩，会影响浏览者阅读页面内容，除非你有分外的设计 目的。 色彩的运用除了能够起到夸大整体文字中分外部分的好处以外，对于整个文案的情愫表白也会产生影响。这涉及色彩的情愫象征性疑问，限于篇幅，在这里不做深入探究。 另外需要留意的是文字色彩的对比度，它包含明度上的对比、纯度上的对比以及冷暖的对比。这些不仅对文字的可读性发生好处，更紧张的是，你能够通过对色彩的运用实现想要的设计效果、设计情愫和设计头脑。 一、网页设计|色彩处理 色彩是人的视觉最敏感的东西。主页的色彩处理得好，能够如虎添翼，达到事半功倍的效果。色彩总的软件原则应该是“总体协调，部分对比”，也就是：主页的整 体色彩效果应该是调和的，惟有部分的、小局限的地方能够有少许猛烈色彩的对比。在色彩的运用上，能够根据主页内容的需要，划分接纳不同的主色调。因为色彩 具备象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就能够划分象征着春、夏、秋、冬。其次还有职业的标记色，例如：军警的橄榄绿，医疗卫生的白色等。色彩 还具备明显的生理感受，例如冷、暖的感受，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较 大的差异。充分运用色彩的这些特征，能够使我们的主页具备深刻的艺术底蕴，从而提升主页的文化品位。下面介绍几种常用的配色方案： 1.暖色调。即血色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页出现和睦、和煦、热情的氛围。 2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页出现宁静、清冷、高雅的氛围。 3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，能够产生猛烈的视觉效果，给人亮丽、璀璨、 喜庆的感受。固然，对比色调如果用得欠好，会适得其反，产生俗气、醒目的不良效果。这就要把握“大调停，小对比”这一个紧张原则，即总体的色调应该是统一 调和的，部分的地方能够有少许小的猛烈对比。 末了，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜 色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的色彩就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化 在色彩学中称为“明度变化”。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较靠近，读者在阅览时，眼睛就会感受很吃力，影响了阅读 效果。固然，色彩的明度也不能够变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。 网页色彩的搭配 网页的色彩是建立网站气象的关键之一，色彩搭配却是网友们感应头疼的疑问。网页的背景，文字，图标，边框，超链接...，应该接纳什么样的色彩，应该搭配什么色彩才气最好的表白出料想的底蕴呢？阿捷这里谈少许心得，希望对你有所启发。 首先我们先来打听少许色彩的基本常识： 1.色彩是因为光的折射而产生的。 2.红，黄，蓝是三原色，别的的色彩都能够用这三种色彩调停而成。网页html语言中的色彩表白就是用这三种色彩的数值表示例如：血色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们时常看到的"bgColor=#FFFFFF"就是指背景色为白色。 3.色彩分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的全部色彩。 4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，因此起码能够制作几百万种色彩。 网页制好处彩色或是非彩色好呢？根据专业的钻研机构钻研表明：彩色的记忆效果是黑白的3.5倍。也就是说，在普通情况下，彩色页面较完全黑白页面更加吸引人。 我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。 ●非彩色的搭配 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清楚明了。 灰色是万能色，能够和任何彩色搭配，也能够帮助两种对立的色彩调和过渡。如果你实在找不出适宜的色彩，那么用灰色试试，效果统统不会太差。 ●彩色的搭配 色彩千变万化，彩色的搭配是我们钻研的重点。我们仍然需要进一步学习少许色彩的常识。 一.色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变，就能够得到一个色彩环。色环的两头是暖色和寒色，中间是中型色。(以下图) 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红 |___________| |____| |_________| |_________| | | | | 暖色系 中性系 寒色系 中性系 二.色彩的生理感受。不同的色彩会给浏览者不同的生理感受。 血色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，生气的感受。 绿色---介于冷暖两中色彩的中间，显得辑穆，宁静，健康，安全的感受。 它和金黄，淡白搭配，能够产生优雅，舒服的气氛。 橙色---也是一种激奋的色彩，具备轻快，欢乐，热烈，和睦，前卫的效果。 黄色---具备快乐，希望，智慧和轻快的个性，它的明度最高。 蓝色---是最具凉爽，清新，专业的色彩。它和白色夹杂，能体现柔顺，清雅，浪漫的气氛(象天空的色彩:) 白色---具备洁白，明快，纯真，清洁的感受。 黑色---具备深厚，秘密，寂静，悲哀，压制的感受。 灰色---具备中庸，平凡，温和，忍让，中立和高雅的感受。 每种色彩在饱和度，透明度上略微变化就会产生不同的感受。以绿色为例，黄绿色有芳华，兴旺的视觉意境，而蓝绿色则显得幽宁，阴深。 ●网页色彩搭配的道理 1.色彩的显然性。网页的色彩要璀璨，容易有目共睹。 2.色彩的怪异征。要有不同凡响的色彩，使得大家对你的印象猛烈。(参考设计思考第二篇网站CI的标准色彩一节) 3.色彩的适宜性。就是说色彩和你表白的内容气氛相适用。如用粉色体现女性站点的柔性。 4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，血色想到喜讯等，选择色彩要和你网页的底蕴相关联。 ●网页色彩掌握的过程 随着网页制作经验的蕴蓄堆积，我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和常识缺乏，只能制作 出简单的网页，色彩单纯；在有一定基础和质料后，希望制作一个漂亮的网页，将自己网络的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂 乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当末了设计理念和技术达到顶峰时，则又返朴归真，用单纯 色彩乃至非彩色就能够设计出简洁精美的站点。 ○网页色彩搭配的技巧 文章写到这里，有心急的网友要问了：“到底用什么色彩搭配悦目呢？你能不能够保举几种配色方案？”别急，这里有一点技巧，能够帮助你快成为调色大师:) 1.用一种色彩。这里是指先选择一种色彩，然后调整透明度大概饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。 2.用两种色彩。先选择一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样断定的。整个页面色彩丰富但不花稍。 3.用一个色系。简单的说就是用一个感受的色彩，例如淡蓝，淡黄，淡绿；大概土黄，土灰，土蓝。断定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就能够了:) 4.用黑色和一种彩色。好比大红的字体配黑色的边框感受很"跳"。 在网页配色中，忌讳的是： 1.不要将全部色彩都用到，尽管控制在三种色彩以内。 2.背景和前文的对比尽管要大，(统统不要用花纹繁复的图案作背景)，以便突出主要文字内容 颜 色 搭 配 一、网页设计|血色的色感温暖，脾气刚烈而外向，是一种对人刺激性很强的色。血色容易惹起人的留意，也容易使人兴奋、激动、紧张、冲动、或是一种容易造成人视觉疲劳的色。 a) 在血色中加入少量的黄，会使其热力强盛，趋于躁动、不安。 b) 在血色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。 c) 在血色中加入少量的黑，会使其脾气变的沉稳，趋于厚重、朴实。 d) 在红中加入少量的白，会使其脾气变的温柔，趋于含蓄、羞涩、娇嫩。 二、网页设计|黄色的脾气淡漠、清高、敏感、具备扩张和不悠闲的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的别的色，其色相感和色脾气均会发生较大程度的变化。 a) 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其清高的脾气也随之消散，趋于一种平易、潮润的感受。 b) 在黄色中加入少量的红，则具备明显的橙色感受，其脾气也会从淡漠、清高转化为一种有分寸感的热情、温暖。 c) 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具备明显橄榄绿的复色印象。其色性也变的成熟、随和。 d) 在黄色中加入少量的白，其色感变的柔和，其脾气中的淡漠、清高被淡化，趋于含蓄，易于靠近。 三、网页设计|蓝色的色感冷嘲热讽，脾气朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向脾气，常为那些脾气活跃、具备较强扩张力的色彩，提供一 个悠久、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色或是一种在淡化后仍旧似能保持较强个性的色。如果在蓝色中划分加入少量的红、黄、 黑、橙、白等色，均不会对蓝色的脾气构成较明显的影响力。 a) 如果在橙色中黄的成份较多，其脾气趋于甜美、亮丽、芳香。 b) 在橙色中混入小量的白，可使橙色的知觉趋于焦躁、疲乏。 四、网页设计|绿色是具备黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的压缩感相中庸，将黄色的温暖感与蓝色的严寒感相抵消。这样使得绿色的脾气最为平易、安稳。是一种柔顺、安静、潢足、优美的色。 a) 在绿色中黄的成份较多时，其脾气就趋于活泼、友善，具备幼稚性。 b) 在绿色中加入少量的黑，其脾气就趋于庄重、老练、成熟。 c) 在绿色中加入少量的白，其脾气就趋于清洁、清新、鲜嫩。 五、 紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、秘密的感受。 a) 在紫色中红的成份较多时，其知觉具备压制感、威胁感。 b) 在紫色中加入少量的黑，其感受就趋于沉闷、伤感、恐怖。 c) 在紫色中加入白，可使紫色沉闷的脾气消散，变得优雅、娇气，并充满女性的魅力。 六、 白色的色感光明，脾气朴实、贞洁、快乐。白色具备圣洁的不容侵犯性。如果在白色中加入别的任何色，都会影响其贞洁性，使其脾气变的含蓄。 a) 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。 b) 在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。 c) 在白色中混入少量的蓝，给人感受清冷、清洁。 d) 在白色中混入少量的橙，有一种干燥的气氛。 e) 在白色中混入少量的绿，给人一种稚嫩、柔和的感受。 f) 在白色中混入少量的紫，可诱导人联想到淡淡的芳香。 （编辑：我爱故事小小网_铜陵站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330570号