网页设计网页配色技巧巧 最好带图的

专为0基础小白量身打造的UI设计入门课程(ps,ai软件+图标技巧),在线学习2个月包教会(公开课3位师傅),拜师费1666,随到随学,可插班。咨询请加QQ群:
作为一个设计师,不但要新奇的创意,强大的构图布局能力,还要有敏锐的洞察力和流行趋势的把握。有时候难免会碰到网页色彩搭配上面的问题,今天小编给大家带来的文章是的网页设计配色趋势预测,看完真心受教,不想错过流行趋势,就一起来看下这篇文章吧。
色彩搭配是设计界永恒的话题,而在网页设计中该如何掌控色彩似乎很少有标准和定论,只能一味的凭借设计师自己的经验和客户的偏好进行设计工作。
AnyForWeb根据2015年的色彩大致趋势走向,并且结合相关的网页设计经验,作出了以下网页配色预测分析,希望对大家有所帮助。
1.Metro和柔和鲜嫩的色彩
Odam Luiran的网站是Metro风格,这种风格尤其适合一些比较鲜嫩柔和的颜色,扁平化网页设计在2014年中的流行让柔和色彩的用途变得越来越广泛。这样的色彩基调将在2015年得到进一步的延续,马卡龙色系也许会常常出现在网页设计中。
2.偏灰的冷色系粉彩
偏灰的冷色系色彩是一种看起来比较百搭的颜色,但是实际上,要将这类颜色使用的恰如其分却并不是一件容易的事情。这类色彩表现的比较中性,所以搭配任何颜色都不会显得突兀,但也不算出挑,而要让色彩之间真正融合,应该选择清淡的粉彩系透明色,让网页看起来清新脱俗。
3.根据图片搭配背景色
网页设计需要看整体,而不能针对性的看局部。网页中显示的图片往往是表达网站思想和意图的一部分,属于网站元素中比较重要的环节,所以让背景色来适应图片的颜色是情理之中。如下案例所示,蓝色系的图片搭配蓝灰色的背景,整体表现的十分融洽。
4.只有一个重点色
一谈到色彩搭配,常常有人会说一个比较保守的搭配方法:一个区域范围里不能超过三种颜色。这句话并不算完全正确,更深层的含义是,只能有一个重点色。
5.以简单灰作为网页基调
用灰色作为网站的主基调是一种比较保守的做法。灰色属于所有色彩中最简单的颜色之一,所以设计师有充分的理由去选择使用灰色,以此来衬托出网页中内容的可读性,减少用户的阅读干扰。
6.低透明度色彩
透明度低的色彩也很有可能成为2015年网页设计的主要色彩趋势。如今的设计越来越追求用户的交互体验,因此低透明度的色块能让用户更加容易发现并且阅读。
7.用高亮色体现用户交互
一大片高亮色设计一定会造成用户的视觉疲劳,令人很反感,但小部分的高亮色设计却能起到突出重点的作用,既能将内容有效的区分开来,又能保证与整体色调保持一致。
8.不轻易减少亮度中的黑色
下面这个案例中很简单的使用了黑色和橙色。橙色作为很亮眼的一种颜色有时会给人带来一种比较刺眼的感觉,但案例中的橙色却令我们的视觉感觉很舒适。原因在于设计师在原本亮丽的颜色中加入了一些黑色,既能让颜色之间形成对比,又不会显得很招摇。
9.蓝色是网站的“基本款”
蓝色在网页设计中属于不会出错的颜色,当你举棋不定或是在色彩上产生困惑的时候,你可以用蓝色尝试一下,也许能顺利化解你的问题。
10.单色网页
单色网页设计看起来似乎不会存在色彩搭配方面的问题,但这里说的单色网页更应该理解为单色系网页。所以,要打造一个色彩统一的网页,设计师可以以一个基本色调来扩张色相、饱和度和亮度等条件。
色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能渲染出截然不同的情感效果。因此,好好利用色彩与生俱来的魅力,就能让你的网页设计更特别。
本文最初由AnyForWeb UDC视觉发布,如需查看详情,请点击《AnyForWeb观点:2015年网页设计配色趋势预测》
AnyForWeb和AnyForWeb UDC的官方微博微信现已正式开通,欢迎大家关注!
原文地址:
原文作者:
其他推荐文章:
转载请注明: &
学UI就上学UI网!越努力,越幸运!
“学UI网 ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!
【特色推荐】
海量APP截图,让你灵感爆发!国内最好的APP截图站。
同一个APP,IOS和安卓截图对比分析,并且提供5种以上尺寸的APP截图打包下载,真贴心。
专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?
【学UI网 原创文章 投稿邮箱:,也可以找各个群的管理】
你可能喜欢的:网络网页(2)
&&&&&&&&&&&&&
&&&&&&&&&&&& &
&&&&&&&&&&&&&&
&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&& &
&&&&&&&&&&&&&&&&&&&&& &
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&& &
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&& &&&&&&
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&
网页设计成功与否往往决定于网页的色彩搭配,下面我们就来讲讲网页色彩搭配的原则,说到色彩的运用,黑、白、灰这三色是万能色,可以跟任何色彩搭配,当设计者为某种色彩的配色苦恼时,不妨试试采用它们,也许会得到满意的效果,针对明度较高的网站,为其配上黑色,则可以适当降低明度。
白色则是网站中应用得最普遍的颜色,很多网站甚至留着大块的白色空间作为组成的一部分,也就是留白的艺术。适当的留白对网页的协调与均衡有很大的作用,也会令人感觉舒适、畅快、没有压力。网页色彩搭配要注意下列几点。
(1)色彩鲜明 网页的色彩要鲜明,以便引人注目。
(2)色彩独特 要有与众不同的配色,达到画龙点睛的效果,加深读者的印象。
(3)色彩合适 网页的色彩配色要与表达的主题气氛贴切、协调。
(4)色彩联想 色彩会使人产生不同的联想,例如蓝色使人想到天空、黑色使人想到黑夜、
红色使人想到喜事等,所以色彩的选择要和网页内容相关联。
确定网页的版式结构是设计网页的第一步,与传统的报纸杂志一样,设计者可以将网页当成一张白纸,然后将网页内容安排在这张纸上,这就出现了布局问题,那么今天我们就来讲讲网页板式设计及网页结构布局。网页的版式结构与平面设计一样,有着相同的基本美学原则,好的布局可以使网页结构清晰、平衡视觉,给用户以舒适、大方的感觉。
一、具体采用什么样的版式结构,可以遵循以下几点设计原则。
1、对称的原则
网页的区域划分完全均等,主要强调秩序感,给人以安定、诚实、信赖的感受,但其缺点是过于死板。
2、平衡的原则
这里的平衡指视觉平衡,不是对称平衡,而是指利用视觉规律,通过大小、距离、形状、疏密等因素形成的非对称平衡,它可以给人以新颖、活泼的感觉。
3、对比的原则
对比原则是指有效地运用网页元素的各种差异,通过大小、形状、颜色、方向、明暗、面积等变化来引起用户的注意,这种方法多运用在个人网站中。
4、留白的原则
版面中适当留出一定的空白,能够起到强调、引起注意的作用。在网页设计中,留白是一种比较有效的设计方法。
二、网页结构的基本类型很多,主要包括骨骼型、满版型、分割型、中轴型、对称型、三角型、自由型等。本节主要讨论最常见的版式结构----骨骼型。它是一种规范化的、理性的、成熟的版式结构,主要分为通栏、二分栏、三分栏、四分栏等。
在HTML的语法中,颜色会以十六进位值(例如:#FF0000)或颜色名称(例如:Red)来表示。网页安全色是指在256色模式下,无论在Windows或Macintosh系统下,在Netscape Navigator和Microsoft Internet Explorer浏览器中都能显示相同的颜色。传统上有216种常用颜色,而任何结合00、33、66、99、cc和ff(RGB值分别是0、51、102、153、204、和255)的十六进制值都代表网页安全色。
不过,测试显示只有212种网页安全色,而不是完整的216色,因为Windows上的Internet Explorer不会正确呈现#0033ff(RGB&#、255)、#3300ff(RGB&#、255)、=00ff33(RGB、51)?n#33ffoo(RGB、O)四种颜色。
当网页浏览器首次呈现外观时,大部分的计算机都只显示256色(8位元):但目前大部分的计算 机都能显示几千或几百万种颜色(16位元和32位元),所以使用现行计算机系统的使用者在设计网站时,完全没有必要使用浏览器的网页安全色调色盘。
使用网页安全色调色盘的原因之一是,如果在其他网页装置上进行设计,例如PDA、行动***的显示画面,这类装置大多只提供黑色(1位元)或256色(8位元)显示画面。
在Dreamweaver软件中,立方体色(预设)和连续色调色盘都是使用216色的网页安全色调色盘:从这些调色盘选取颜色时,系统会显示该颜色的十六进位色彩值。
如图所示为网页安全色调色盘,其中提供了颜色名称、RGB值和十六进制值,为用户提供参考。
明白色彩的基本概念及搭配原理之后,网页页面中各个要素的色彩又该如何搭配呢,下面我们就来讲讲网页色彩搭配的技巧相关内容?
首先,一个网站不可能只使用一种颜色,否则会让人感觉单调、乏味;但是也不能将所有颜色都用到网站中,这会让人感觉轻浮、花哨。一个网站最好有一至三种主题色,所以确定网站的主题色是设计者最重要的课题。
其次,一页网页尽量不要使用超过四种颜色,用太多色彩会让人感觉不够稳重。当主题确定之后,考虑其他配色时,记得要留意其与主题色的关系,以及要呈现的效果。此外还要考虑配色中的哪种因素占主要地位,是明度、彩度还是色相。
使用以下几种方式可以快速地找到网页配色的最佳方案,供读者参考。
使用同色系:先选定种色彩,然后调整明亮度或彩度,产生新的色彩,用于网页中的不同位置,这样的页面看起来色彩统,又有层次感。
使用互补色:先选定一种色彩,然后选择它的对比色,接着调整彩度,用于网页中的不同位置,和谐的对比能够使整个页面色彩丰富、不花哨。
使用相近色:简单地说就是使用相同感觉的色彩,例如,淡蓝、淡黄、淡绿或土黄、土灰、土蓝。
使用黑、白或灰搭配种色彩:黑、白或灰色基本上可以和任一种色彩相互搭配,看起来都会很和谐,不会令人感到突兀;有时甚至可以配出很“跳”的感觉,例如黑色背景配上红色文字。
网页配色中,有两点较为忌讳
1、不要将所有色彩都用到,尽量控制在三种色彩之内。
2、背景与文字的对比尽量要大,以便突出主要文字内容,绝对不要使用花纹繁复的图案作为背景
在整个人类发展历史中,红色始终代表着一种特殊的力量与权势。今天我们就来讲讲红色系网站的配色方案,在我国,红色一直都是吉祥的象征,是幸福的代表色;同时,鲜血、火焰、危险、狂热等极端的感觉也都会和红色联系在一起,红色所具有的生命力在很多艺术大师的作品中也发挥得淋漓尽致。在网页中会将红色应用在突出效果上,因为鲜明的红色极易吸引浏览者的目光。将高亮度的红色加上灰色、黑色等无彩色搭配使用,可以得到现代、激进的感觉;低亮度的红色具有冷静沉重的感觉,可以营造出古典的氛围;若加入少量的***,会使其散发热力;如果加入少量的蓝,会显得文雅、柔和;而在红色中加入黑色,会使其看起来沉稳、朴实;如果是选择加入少量的白色,会使其显得温柔、含蓄、羞涩、娇嫩。
使用高亮度橙色的网站会带给人晴朗新鲜的感觉,若与***、黄绿色等类似颜色搭配,也能得到非常好的效果,今天我们就来讲讲橙色、***系网页配色方案。中等色调的橙色类似于泥土的颜色,所以也常用来创造自然氛围。橙色可以通过变换色调营造出不同氛围的典型颜色,既能表现出青春活力,也能展现沉稳老练的效果,所以在网页配色中使用相当广泛。橙色通常给人朝气蓬勃的感觉,可以使原本抑郁的心情变得开朗。在东方文化中,橙色象征着爱情和幸福,充满活力的橙色会给人健康的感觉,据说还有提高食欲的效果。
黄绿色时而能表现出自然的感觉,时而能呈现出虚幻的感觉,这两种印象之间有着很大的差异,但黄绿色就像穿越时间隧道一样,能够自由地展现着两种截然不同的效果。今天我们就来讲讲在网页设计中的黄绿色系网页配色方案,黄绿色通常与蓝色搭配使用,主要用于表现温暖、亲切的感觉或者高科技神秘虚幻的感觉。
黄绿色和草绿色都会让人联想到大自然,黄绿色同时含有***和绿色两种颜色的共同点,也就是既能表现***的温暖,也能表现绿色的清新。统计数据表明,儿童和年轻人比较喜欢黄绿色。
绿色也是在网站配色中使用最为广泛的颜色之一,它本身就给人健康的印象,保健类的网站、公司的公关网站、教育网站等经常使用它来配色。今天我们就来讲讲绿色、青色系网页配色方案,绿色和红色搭配,可以得到鲜明、丰富的感觉,一些色彩专家和医疗专家们也提出,绿色可以适当缓解眼部疲劳。
绿色是大自然的颜色,也代表自然界中每个可贵的生命。大自然中充满新鲜的空气,而绿色也能使人们的心情变得格外明朗,当需要舒缓心中的抑郁,想找回安详与宁静的感受时,亲近大自然是最好的方法。
青绿色给人带来凉爽清新的感觉,也可以冷静兴奋的心情,或者活跃原本沉静的心情。青绿色与***、橙色等颜色搭配,可以营造出亲切、可爱的气氛;若与蓝色、白色等颜色搭配,可以得到清新爽朗的效果。
青绿色可以说是草绿色的健康感和蓝色的清新感觉的结合体,但在自然界中并不多见,会给人较强的人工感。色彩和心理学家分析说,青绿色可以带给心情低迷的人特殊的信心与活力。
很多网站都使用蓝色与青绿色的配色,最具代表性的蓝色物体莫过于海水和天空,都能带给人清新、开阔、凉爽的感觉。今天我们就来讲讲蓝色、蓝紫色系网站的配色方案,高对比度的蓝色会营造出整洁、轻快的印象;低对比度的蓝色会给人一种都市化的现代派印象。蓝色与绿色、白色的搭配在日常生活中也随处可见。它作为冷色系的代表颜色,带给人清冷的安稳感受,同时还能表现出平和、淡雅、可靠等多种感觉。
蓝紫色在色相环中位于蓝色和紫色之间,所以它也含有紫色的神秘感。低亮度的蓝紫色显得很有分量,而高亮度的蓝紫色则昱得非常高雅,在网页中,它通常与蓝色一
是搭配使用。
蓝紫色可以用来创造都市化的成熟美,也可以使心情浮躁的人冷静下来。从明亮的色调到灰亮的色调,都带有一种与众不同的萄秘美感。
黑色与白色表现出两个极端的亮度,而这两种颜色的搭配使用通常可以表现出都市化的感觉。下面我们就来讲讲黑色系网页配色方案,如果能技巧地使用黑、白二色,甚至可以实现比彩色搭配更生动的效果。黑色有很强的感染力,它能够表现出特有的高贵。
黑色与白色表现出两个极端的亮度,而这两种颜色搭配使用通常可以表现出都市化的感觉。下面我们就来讲讲白色系网页配色方案,如果能技巧地使用黑、白二色,甚至可以产生比彩色搭配更生动的效果。白色有很强的感召力,它能够呈现如白雪般的纯净与柔和。
以淡色为主色调的配色显得纯洁无瑕、一尘不染,可以表现出朴素、淡雅、干净的感觉。
灰色位于白色与黑色之问,具有中等明度,属于无彩度及低彩度的色彩,下面我们来讲讲灰色系网页配色方案,它对于眼睛的刺激适中,既不刺眼也不暗淡,是最不容易使人感到视觉疲劳的颜色,因此常带给人平淡、乏味,甚至是沉闷、寂寞、颓废的感觉,具有抑制情绪的作用。
灰色是一种复杂的颜料,漂亮的灰色常需要优质原料精心配制才能生产出来。灰色带给人高雅、精致、耐人寻味的印象,所以常用来作为其中一种配色,衬托其色彩的张扬与大胆。
儿童网站是促进儿童与青少年德、智、体、美、劳全面发展的网络平台,因此,在设计上要根据儿童与青少年的需求,建立与其年龄适当、具有教育意义,使他们健康成长的网络学习空间。
网站建设过程中,设计者应当使用能帮助儿童与青少年健康发展、积极向上的颜色,例如绿色、***或蓝色等鲜艳亮丽的色彩,让人感觉活泼、快乐、有趣并且生气勃勃。
儿童网站可选用蓝色和白色为主色调,再搭配绿色、紫色等颜色,使整个网站的色彩给人自由、天真烂漫的视觉感受。
美妆造型网站主要为化妆品及服饰企业提供网络行销服务,加深企业品牌的宣传力度,帮助企业打造自主品牌。这类网站以“产品+资讯”的立体互动为特点,为***双方搭建结合推广、展示、娱乐为一体的网络平台,而通过网络销售带动企业的经济增长也是建立此类网站的主要目的。
美妆造型类网站以白色为背景色,整体风格柔和、青春,所用的颜色刚好可以突出主题。
目前社会大众对娱乐活动的需求越来越大,尤其是年轻人,对影视娱乐更为痴迷,因此,为了迎合社会需求,众多娱乐网站相继成立。下面我们就来讲解有关配色方案及特点,对网页设计者来说,制作这类网站,如何确定网站的风格、如何选用色彩是很重要的事情。
影音娱乐网站是以休闲娱乐为主的大众网站,相比其他网站而言,有其独特的一面。这一类型的网站也会采用文字、图片、动画等多媒体形式,展现网站的风格与内容,在设计上会以突显本身个性为重点,例如色彩上更加绚丽。
此类型网站目前包含手机铃声下载、在线试听、视频下载等互动式功能,呈现网站本身所拥有的特性。因此,网页设计者在制作时需要把握以下三个特点。
色彩艳丽,个性张扬。
因为此类型网站是集娱乐性、趣味性于一身的休闲网站,以时尚、流行为特色。设计时应依据网站的内容,采用亮丽的色彩为主色。
图片欣赏网站是推广艺术文化、展示艺术作品的独特网络平台。对网页设计者来说,这一类型的网站最能展现设计者的风格和水平,所以也是网页设计者的个人展示平台。
随着计算机技术的发展,艺术设计的手法也产生了革新,新理论、新方法、新技术不断涌现,使设计者在设计作品时有了新的创作方式,展示设计作品时也有新的空间领域。图片欣赏网站为艺术设计者和摄影爱好者提供一个在网络上展示作品的平台,提供与世界同行交流的空间,此类型网站的内容主要是介绍摄影、绘画、平面设计等作品。
图片欣赏网站有很多,通常在配色和设计上都有比较高的水准。网站色彩丰富,对比强烈,但是整个网页并不显得凌乱,反而因为色彩丰富,使网页充满时尚气氛,设计得相当成功。
随着生活水平的提高,娱乐渐渐成为人们日常生活中的重要部分。下面我们就来讲解有关配色方案及特点,为了迎合人们的需求,一些企业将自己的旅游休闲业务和产品展示在无限宽广的网络世界。
休闲网站是指利用网络技术,在网络空间中提供旅游休闲资源的汇集、传播、检索、在线销售、在线订购等一系列服务的网络平台。这一类型的网站为广大群众提供休闲、娱乐的虚拟空间,其内容通常包括游记、旅游景点说明与相片、介绍地方风俗民情、行程规划等。
休闲网站的互动性、及时性、丰富性和便利性等优势促使旅游休闲业迅速进入了网络经济的浪潮,也为它们的发展提供了新的契机。
休闲网站是根据服务目的和休闲功能来进行网页设计,在色彩的选用上有很大的自主性。但是无论如何还要根据具体内容和产品的性质进行设计。
网站色彩丰富,彼此之间搭配和谐,蓝色的条纹给人很强的娱乐感,亮丽的橙色平衡了暗淡的色彩。
综合类网站是集新闻、娱乐、搜索引擎等多元内容于一身的大型网站,例如雅虎、新浪网等都属于综合型的入口网站,接下来我们来讲解有关配色方案解析 ,入口网站的概念最早源于搜索引擎Yah00、InfoSeek等大型入口网站,这些入口网站作为一种渠道,帮助Web用户快速寻找和猎取丰富的网络资源。随着科技的发展,综合网站广泛地应用于政府、中小企业、教育、图书馆等各个领域。
从技术角度而言,综合类的入口网络是一种网络服务,通过检索、资讯提示等技术,从各类散布的资源中猎取所需要的内容,以固定形式呈现给用户。从用户的角度而言,综合类型的入口网络是各项资源的共同访问站,可提供个性化服务功能,用户能同时检索多种资料,浏览、合并检索结果。
综合类的入口网站可视为中间层,根据浏览者角色和访问策略,将各类咨询、交易处理和应用进行整合、汇集,然后加以呈现。综合网站在设计制作上要以内容和功能为主,设计风格倾向于普通大众,具有易识别的配色风格,而且决定之后不要随意改变色彩搭配。
虽然综合网站在色彩搭配上采用大众普遍熟悉的颜色,但如何将这些色彩搭配得富有技巧,使网站更加吸引浏览者,这是设计者必须重视的问题。
网站在色彩选用上比较精细,各个色彩搭配非常和谐,结构也比较清晰,颜色给人舒适的印象,是个配色成功的网站。
以上内容为学无忧原创,详细内容可参考《》
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:1844次
排名:千里之外一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅对于做网页的初学者可能更习惯于使用一些漂亮的图片 作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他们更多运用的是白色、蓝色、***等,使得网页显得典雅,大方和温馨。更重要的是,这样可以 大大加快浏览者打开网页的速度。
& & & 一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。而为了追求醒目的视觉效果,可以为标题使用较深的颜 色。下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可以做标题的底色,再搭配不同的字体,一定 会有不错的效果,希望对大家在制作网页时有用。
Bgcolor&K&P#F1FAFA&P&&&做正文的背景色好,淡雅 Bgcolor&K&P#E8FFE8&P&&&做标题的背景色较好 Bgcolor&K&P#E8E8FF&P&&&做正文的背景色较好,文字颜色配黑色 Bgcolor&K&P#8080C0&P&&&上配***白色文字较好 Bgcolor&K&P#E8D098&P&&&上配浅蓝色或蓝色文字较好 Bgcolor&K&P#EFEFDA&P&&&上配浅蓝色或红色文字较好 Bgcolor&K&P#F2F1D7&P&&&配黑色文字素雅,如果是红色则显得醒目 Bgcolor&K&P#336699&P&&&配白色文字好看些 Bgcolor&K&P#6699CC&P&&&配白色文字好看些,可以做标题 Bgcolor&K&P#66CCCC&P&&&配白色文字好看些,可以做标题 Bgcolor&K&P#B45B3E&P&&&配白色文字好看些,可以做标题 Bgcolor&K&P#479AC7&P&&&配白色文字好看些,可以做标题 Bgcolor&K&P#00B271&P&&&配白色文字好看些,可以做标题 Bgcolor&K&P#FBFBEA&P&&&配黑色文字比较好看,一般作为正文 Bgcolor&K&P#D5F3F4&P&&&配黑色文字比较好看,一般作为正文 Bgcolor&K&P#D7FFF0&P&&&配黑色文字比较好看,一般作为正文 Bgcolor&K&P#F0DAD2&P&&&配黑色文字比较好看,一般作为正文 Bgcolor&K&P#DDF3FF&P&&&配黑色文字比较好看,一般作为正文
浅绿色底配黑色文字,或白色底配蓝色文字都很醒目,但前者突出背景,后者突出文字。红色底配白色文字,比较深的底色配***文字显得非常有效果。此文只是起一个&抛砖引玉&的作用,大家可以发挥想象力,搭配出更有新意、更醒目的颜色,使网页更具有吸引力
如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷,涌现出大量优秀精美的网页。大量网络信息的呈
现,无非就是通过文本、图像、Flash动画等,其中,
文本是网页中最为重要的设计元素。对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见。文字的格式化
字号、字体、行距
& & & 字号大小可以用不同的方式来计算,例如磅#quotel.quoter#或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅,所以,建议采用磅为单位。最
适合于网页正文显示的字体大小为12磅左右,现在很多的综合性站点,由于在一个页面中需要安排的内容较多,通常采用9磅的字号。较大的字体可用于标
题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。网页设计者可以用字
体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者
的需要。例如:粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。在同一页面
中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多彩。关键是如何根据页面内容来掌握这个比例关系。
从加强平台无关性的角度来考虑,正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的
机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到,这给网页设计带来很大的局限。解决问题的办法是:在确
有必要使用特殊字体的地方,可以将文字制成图像,然后插入页面中。
行距的变化也会对文本的可读性产生很大影响。一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点,则行距
12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字失去较好的延续性。
除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现独特的审美意趣。例如,加
宽行距可以体现轻松、舒展的情绪,应用于娱乐性、抒情性的内容恰如其分。另外,通过精心安排,使宽、窄行距并存,可增强版面的空间层次与弹性,表现出独到
& & & 行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位。例如:{line-height:20pt}、{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) 在***中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易于接近。
蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一
个深远、广埔、平静的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、
黑、橙、白等色,均不会对蓝色的性格构成较明显的影响力。
如果在橙色中黄的成份较多,其性格趋于甜美、亮丽、芳香。
在橙色中混入小量的白,可使橙色的知觉趋于焦躁、无力。
四、绿色是具有***和蓝色两种成份的色。在绿色中,将***的扩张感和蓝色的收缩感相中庸,将***的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。
在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。
在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。
紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
在紫色中红的成份较多时,其知觉具有压抑感、威胁感。
在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。
在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。
白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。
在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。
在白色中混入少量的黄,则成为一种乳***,给人一种香腻的印象。
在白色中混入少量的蓝,给人感觉清冷、洁净。
在白色中混入少量的橙,有一种干燥的气氛。
在白色中混入少量的绿,给人一种稚嫩、柔和的感觉。
在白色中混入少量的紫,可诱导人联想到淡淡的芳香。
阅读(...) 评论()

参考资料

 

随机推荐