网页设计配色基础知识学习

网页设计配色基础知识学习网页设计配色基础知识学习55/55网页设计配色基础知识学习网页设计配色基础知识学习：RGB及HSB在好用美术中，常有"远看色调近看花，先看颜色后看花，七分颜色三分花"的说法。

这也就说明，在任何设计中，色调对视觉的刺激起到第一信息传达的作用。因此，对色调的基础知识的良好掌控，在网页设计中才能做到游刃有余。为了使下面的网页配色分析更易于理解，我们先来了解色调的RGB模式和HSB模式。

■RGB

RGB是表示红色绿色蓝色又称为三原色光，英文为R(Red),G(Green),B(Blue)，在电脑中，RGB的所谓"多少"就是指亮度，并运用整数来表示。

通常状况下，RGB各有256级亮度，用数字表示为从0,1,2至255。虽然数字最高是255，但0也是数值之一，因此共256级。依据计算，256级的RGB色调总共能组合出约1678万种色调，即256×256×256＝16777216。通常也被简称为1600万色或千万色。也称为24位色(2的24次方)。

对于单独的R或G或B而言，当数值为0时，代表这种颜色不发光；假如为255，则该颜色为最高亮度。因此当RGB三种色光都发到最强的亮度，纯白的RGB值就为255,255,255。屏幕上黑的RGB值是0,0,0。R，意味着只有红色存在，且亮度最强，G和B都不发光。因此最红色的数值是255,0,0。同理，最绿色就是0,255,0；而最蓝色就是0,0,255。黄色较特殊，是由红色加绿色而得就是255，255，0。（具体分析请参考赵鹏所写的《电脑美术设计中的色调模式详解》）纯白色数值为R255,G255,B255纯黑色数值为R0,G0,B0红色数值为R255,G0,B0绿色数值为R0,G255,B0蓝色数值为R0,G0,B255黄色数值为R255,G255,B0

RGB模式是显示器的物理色调模式。这就意味着无论在软件中运用何种色调模式，只要是在显示器上显示的，图像最终就是以RGB方式出现。

■HSB

HSB是指颜色分为色相,饱和度,明度三个因素。英文为H(Hue),S（Saturation）B（Brightness)饱和度高色调较明丽。饱和度低色调就接近灰色。亮度高色调光明，亮度低色调暗淡，亮度最高得到纯白，最低得到纯黑。一般浅色的饱和度较低，亮度较高，而深色的饱和度高而亮度低。网页设计配色基础：色调三属性及实例剖析很多初学者对色调的属性和原色概念模糊，简单混淆，下面我们就先从几个概念入手。今日介绍色调的三个属性。

颜色可以分为非彩色和彩色两大类。非彩色指黑色,白色和各种深浅不一的灰色，而其他全部颜色均属于彩色。从心理学和视觉的角度动身，彩色具有三个属性：色相,明度,纯度（彩度）。基本色相环■色相（Hue）：

也叫色调，指颜色的种类和名称，是指颜色的基本特征，是一种颜色区分于其他颜色的因素。色相和色调的强弱及明暗没有关系，只是纯粹表示色调相貌的差异。如红,黄,绿,蓝,紫等为不同的基本色相。

■明度（Value）：

也叫亮度，指颜色的深浅,明暗程度，没有色相和饱和度的区分。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。非色调的黒,灰,白较能形象的表达这一特质。

明度的递增→明度网页例图：明度分析：

从上图网页所选取的4个主要色块的RGB数值来看，这4块色调组合显示的RGB数值很高，接近于最高值255。RGB相互间的数值相近，由于有RG的高数值及B高数值混合，整个网页给人的感觉特别协调，柔软雅致，心情愉悦。

结论：

RGB同时呈现相近的高数值时，相近等量的色调相互混合，页面呈高超度灰色段，协调的柔软状态，令人遐想，对视觉刺激是缓慢的，适合长时间观看。但由于数值接近，因此色阶平稳，同时存在着不够醒目的状态。■纯度(Chroma）：

也叫饱和度，指色调的明丽程度。原色最纯，颜色的混合越多则纯度渐渐减低。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔软,沉稳。

加入黑色的纯度变化和加入白色的纯度变化→纯度网页例图：纯度分析：

上图网页中选取了主要的两种色系为组合。运用HBS数值模式更易于理解分析该网页的纯度状况。

我们看到蓝色S数值呈现99％具有相当高的饱和度，B明度为79%，玫瑰色S饱和度数值为85%，B明度为97％。当饱和度和明度同时呈最高值时，色调对视觉的刺激强度到达最高状态。由于蓝色的明度稍低，饱和度较高，而玫瑰色的明度较高，该颜色纯度随之加强，因此玫瑰色相对蓝色对人的视觉刺激更剧烈。

结论：

HSB模式中S和B呈现的数值越高，饱和度明度越高，页面色调剧烈明丽，对视觉刺激是快速的，醒目的效果，但不易于长时间的观看。以上两种颜色的S数值接近，是剧烈的状态。H显示的度是代表在色轮表里某个角度所呈现的色相状态，相对于SB来说，意义不大。网页设计配色应用——色调

前面我们介绍了常用的电脑色调模式RGB,HSB，以及色调的三大属性，还有常用配色的基本概念和相关实例剖析。今日开始我们介绍应用部分，本节介绍色调。

网页页面中总是由具有某种内在联系的各种色调，组成一个完整统一的整体，形成画面色调总的趋向，称为色调。也可以理解为色调状态。色调给人的感觉及氛围，是影响配色视觉效果的确定因素。为了使网页的整体画面呈现稳定协调的感觉，以便充分的驾驭其规律来更好的分析学习，我们把视觉角色主次位置分为如下几个概念，以便在网页设计配色时更简单操纵主动权。■主色调

页面色调的主要色调,总趋势，其他配色不能超过该主要色调的视觉面积。（背景白色不肯定依据视觉面积确定，可以依据页面的感觉须要。）

■辅色调

仅次及主色调的视觉面积的协助色，是烘托主色调,支持主色调,起到融合主色调效果的协助色调。

■点睛色

在小范围内点上剧烈的颜色来突出主题效果，使页面更加显明生动。

■背景色

衬托环绕整体的色调，协调,支配整体的作用。

→色调网页例图：本部分小节：

一个页面的色调角色主要是依据其面积多少的来区分主次关系,达到最终目的的。

当不同的颜色运用的面积相当，这个页面简单呈现枯燥单调之感，而没有局部细微环节的变化。当一个页面运用的颜色过多,面积大小用得过于琐碎，这个页面简单呈现花哨,主次不分没有整体的感觉。

为页面设计配色的时候，应依据主题内容主次须要，各颜色有其各自的功能角色--面积运用最多的,最少的,不多不少的，加上冷暖的适度支配，纯度明度的合理变化，遵循这条原则，网页配色定能得心应手。网页设计及配色实例分析第一章:网页设计的原则1.1了解分析客户的需求

网页设计须要设计师综合多方面的知识,把设计的多种元素进行有机的组合,它及网络技术,经济学,心理学以及

美学等领域都有着亲密的联系,明确网页设计的中心是为了更好的表达网站主题.网页设计是一个感性思索及理性分析相结合的过程,它的方向取决于设计的任务,它的实现依靠网页的制作

网页设计的特点是呈现企业的形象,介绍产品及服务,体现企业发展战略途径,

要点:

1):因此必需明确设计站点的目的和用户的需求,以消费者为中心

2):依据市场的状况,企业自身的状况进行综合的分析,从而做出切实可行的设计支配

3):总体设计方案要主题显明,在目标明确的基础上,完成网站的构思创意.对网站的整体风格和特色作出定位,规划网站

的组织结构

4):一件完备,完整的网站设计作品,是设计师及客户不断进行沟通设计出的结果

5):网站开始构思的时候须要充分了解客户的需求,要达到什么目的,效果,因此前期的投入是很有必要的,以便精确,完善

地满意客户预期的要求.

6):产品的种类,特性以及所针对人群的特点于年龄,性别等,这些都是设计师们须要了解的方面,阅历丰富的设计师们

有必要做一些适当的引导.设计师所面对的客户群里,文化背景,性格类型等的差异体现了各种各样的审美情趣.

7):有些客户对于建立站点的目的并不明确,设计师就须要做一些推广建议,设计要静下心来,站在客户的角度上

耐性说明共同的探讨,以达到网站最终想要达到的目的和效果分析:学这一节感受最深的时候,网页设计是网络技术,美学,心理学的结合这一点我很认同

其次我们进行网页设计也是为了更好的表达的我们设计的主题,而什么样的主题,这就要看我们的设计方案

这里我觉得和开发程序写需求分析一样,我们这里不仅要有我们的版本模型,更要我我们设计的设计方案写出来

设计方案包括我们网站的整体色调,排版,要用到的必要的设计元素,整体风格,

设计方案是很重要的:有几个方面我们须要考虑,我们自身的设计水平,我们网站要承载的内容和表达的主题,

我们所面对的客户,所以基于上面的几点,我们肯定要及我们客户进行耐性的沟通,运用我们的设计及客户的需求

达到完备的统一.

1.2网站项目的规划

一个胜利的网页设计作品是艺术及技术的结合及统一,以主题显明,形式及内容保持一样,把握整体风格为设计原则,艺术是

设计手段,而不是设计目的.

规范的网站策划大致具有如下几个方面:

1):网站的目标

2):网站的主题

3):网站的内容

4):网站的风格

5):网站的标准

分析:网的艺术及技术的结合统一,艺术的设计的手段,而不是设计的目的

网站策划的以上五个方面我觉得是我们做网页设计方案设计的很重要的依据

网站的性质不同,设计要求也不同,例如:门户网站,留意页面的分割,信息结构的合理,页面及图片的优化,界面的亲和等问题

企业网站重点在突出企业形象,产品特点,要求设计样式,图片质量相对较高.

网站的主题要求小而精,有针对性,尽量向专业靠近;题材尽量要新颖 ,不要随处可见,这样才你更吸引用户一看再看,网站的名

称要有特色,便利记忆,要考虑到为了以后网站的形象和宣扬做推广.

分析:上面的东西让我总觉得我对不同类型的网站把握的过少,比如韩式网站的风格是什么样的,这些平常有感受确没有

从理论上去好好分析过.同时我觉得有必要自己整体出一个有规范的针对自己的特点的需求方案文档,以后全部的

网页设计都应当先写设计方案,而设计方案就应当以这个为标准.

网站设计规划书要体现出的8条内容:

1):建设网站前的市场分析

2):建设网站的目的以及功能的定位

3):网站的技术解决方案

4):网站的内容规划

5):网页设计

这里要考虑到范围群体的年龄地域,网络速度,阅读习惯等.

6):网站维护

7):网站测试

8):网站的发布及推广

分析:上面是网站开发是写方案时须要考虑到的几个方面的问题,我觉得可以作为我们的重要参考.其实我们在自己开发项目

也作了很多这样的工作.第二章网页设计的框架

网页设计是有规律可寻的,驾驭如下几个框架,并依据网站的信息内容套用,框架搭建起来,剩下的"填充","丰富","精致",

就简单多了.

分析:我很认同这样的观点,框架就相当于是起房子起的框架,画画是画人的人体骨骼,而填充就些就相当及是往房子里填

砖头,在画好人体骨骼后往人体上画肌肉.

我们为什么要用框架:

为了能够让阅读者更清晰,便捷地理解网站所要传达的信息内容

网页的布局以导航拦位置为界,大致可分为:上下结构式

为一种上下框架结构式,通常上方为导航条,或者动态的公司企业形象,广告区域.下方为正文,内容部分,此类结构在内容

较少的企业网站或者个人网站较常出现,有时只在首页运用,二级页面换相应结构.左右结构式

左右结构式又称为二分栏式,清晰的分列两旁框架结构,一般左侧是导航条,有时最上方会有一个小的标题或标记,右侧是

正文内容部分或者公司企业形象展示,不少企业网站较喜爱采纳这类结构

注:由于网站内容较少,因此多数企业网站都运用上下结构和左右结构为框架,展示区域添加大的图片作为公司形象,新产品

的展示,以提升公司的整体形象.

分析:上下结构式左右结构式并不是严格的区分往往我们会这样的认为那就是死板了,同时留意这种特点有利于

展示内容叫少的网站,很大块我们会选择用图片去填充.上左右结构样式

这是大中型企业喜爱用的框架式,通常上方为主要菜单导航条,左侧为点击出现的细分栏目导航条,下方为较主要的栏目

及小广告,右则为内容区域,有不少企业网站喜爱首页运用不同的结构式,上左右结构运用在二级页面.同上左右框架稍有区分

的是中间部分为内容部分,右侧则是该网站较重要的内容导航区域,或是登陆,搜寻区域,小广告等.

分析:随着网站内容的增多,框架结构的渐渐细分,上左右结构式也更多地应用于跨类别的各类网站上左中右结构式

又称三级分栏式,是大型企业,电子企业,电子商务,政府网站,教化机构较喜爱的框架式,也是较常见的结构式.综合结构式

这种类型网站较为困难,特点是功能模块多,信息分类具体,因此依据须要采纳区域结构较为合适.

甚至有可能我统一个页面里柝分出几个不同的框架类型不规则的结构式

不规则的结构式有别于上面的框架结构式例子,相对来说,页面的信息量少,通常一张形象广告图片下来,重在渲染这个网站的

气氛,类似于封面类型,有点击进入下页的入口,无规则的框架风格较为随意自由,凸现网站特性意图,给阅读者带来较强的视

觉冲击,使以产品宣扬目的的企业和个人网站的爱好者,都热忠于此种框架式.少见的结构式

通常运用这类结构样式的网站有两种状况,一是放置更多的信息栏目和内容的网站,二是追求特性的企业,组织或者个人的网站

这类结构可以形容另一种风格特色分析:其实我觉得上面讲了有规律的框架也讲了没有规律的框架,以后去看任何页面的结构式,我们基本上可以用上面这些去

分类.第三章网页设计元素网页布局在多数状况下是在顶部放置必要的信息,如公司名称,标记,广告,以及导航条,或将导航条放置在左侧而右侧是正文,这样的布局结构清晰,易于运用,当然,也可以依据网站的性质的须要,尝试这些布局的变化形式,如左右两拦布局,一半是正文,另一半是形象图片,导航,或者正文不等的两拦布置,通过背景色区分,分别放置图片和文字,在设计中可以多吸取好的网站设计精髓.分析:这里讲到了网页中一些元素的大致放法,比如说顶部放置必要的信息,如公司名称,标记,广告,以及导航条等等这些.

3.1网页设计的布局概念页面尺寸

二种常用的尺寸:一般在800*600的辨别率状况下,页面的尺寸为778*435像素

辨别率在1024*768的状况下,页面的尺寸为1003*600像素

第一屏:指的是在不拖动的状况下,显示的内容,而页面的原则长度是不超过三屏,

第一屏的位置:黄金位置,"寸土寸金"之地,放置最主要的内容.这个地方也是阅读者习惯关注的焦点位置,常常放置重要的内容,图片,广告.

分析:我觉得我们一般是运用1024*768的辨别效率下考虑页面,然后我认为确实第一屏也是很重要的,里面放置的最重要的内容

也应当在焦点位置.

整体造型

造型就创建出来的物体给人的整体形象,网页的整体形象应当是图形及文本的结合,通常网页形态的组合造型有:圆形,矩形,三角形,菱形,"S"形等.

圆形代表圆满柔软,团结平安等,时尚站点较喜爱以圆形页面为整体造型,矩形代表中规中矩,平衡和谐的视觉感受,很多政府网页以及部分企业网页都是以矩形为整体造型,三角形代表力气权威,坚固均衡等,较大型的商业站点常以三角形为页面的整体造型,

企业站点常运用菱形作为页面的整体造型,也有不少的网页设计是结合多种形态,以某个形态的构图为主,辅以其他的形态综合而成.

分析:我觉得这一点很重要,我们往往只知道设计网页时去定义框架,但是我们应当知道怎么样去在这个基础上去死板的套用框架,

那就是须要我们对页面进行造型了.而不同的造型也就代表了不同的风格.页头

在习惯术语中,页头也称之为页眉,页头的作用是定义页面的主题,一般站点的名字多数都是显示在页头里,通常展示的标记以

及其网站的标题,旗帜广告,页头也是整个页面设计的重要组成部分.文本

文本是这个网站信息内容的重要组成部分,在页面中多数以行或者块(段落)出现,通常相较于导航条区域,有自己的文字区域

位置,在整个页面视觉节奏上,形成反差对比感页脚

页脚和页头能运用页面更完整,页头是在页面的顶部位置,放置站点主题,而页脚放置的是副导航菜单标题,制作者或公司信息

,版权日期.图片

所谓图形并茂,相得益彰,文字和图片具有一种相互补充的视觉关系,最志向的效果是文字图片的亲密协作,既能活跃页面,又

能使主页有丰富的内容,图片和文本是丰富网页的两大构成元素,图片为点缀增加文本的可读性,趣味性,文本为阐述信息内容

.

分析:对于这个我体会比较深我觉得在设计页的时候,很多时候假如我们加了图片进去了就效果大不同了,比如看那些韩式

风格的网站很多就是用的这种风格.多煤体

网站要吸引阅读者留意,页面的内容可以是三维动画,Flash等技术来表现,让声音,动画,视频等其他媒体更多的出现在人们的

视野里,丰富网页多层次的视觉视听效果,更贴近于生活,由于网络带宽的客管限制,在运用多煤体的形式表现内容时,应考虑的

客户端的访问速度.

分析:这个也很重要我觉得有了一些多煤体,往往会有意想不到的效果分析:上面这些从页头始终到多煤体我的总体感觉是首先我们要内容认清页面的这些元素,当我们认清以后,我们就要对这些元素

定义他的特点,一般放置那些东西,这样我们在设计的时候我们也就是把框加和造型定义好以后,我们就应当考虑页里应当放

置那些东西了.

3.2网页设计的主要视觉元素导航样式

其实它就是一组超链接,是整个网站的提纲,好处很多,也是特别必要的.导航的样式很多有弹出的,移动的等等很多.

导航的位置结构:可以细分为左文右导航栏,左导航栏右文,左右导航中间栏,举荐运用第一种.

分析:我觉得不管运用那一种,总之目的一个,起导航的作用我们可以使它更加美观更加有特色.

比如说有位置变化的导航,图标修饰的导航,于网站内容相关的流程图表为导航,构思奇妙.

用颜色来区分的导航网站标记

是一站点的特色及内涵,起图形的设计创意来自于网站的名称及内容,一般会出现在站点的每一个页面上,是网站给人的第一印

象,logn的作用很多,最重要的是表达网站的理念.便于人们识别,被广泛用于站点的链接,宣扬等,类似的企业标记

logo一般通过图案,文字的组合,达到被标识的战事说明,沟通沟通,从而提升访问者的阅读爱好,增加网站印象的目的.分析:我很认同多表示起作用这一点,至于怎么设计标记,就是表达网站的理念.便于人们识别,广泛应用.标记的设计应及网站的属性相吻合,不少知名网站logo设计特别简洁,易记.文字的排版

文字和图片是网页中的两大构成要素,文字排列组合的好坏,直接影响到其版面的视觉传达效果.文字设计的胜利及否不仅在于字体本身的书写.同时也在于其运用的排列组合是否得当,为了造成

生动对比的视觉效果,可以以风格,大小,方向,明暗度等方面选择对比的因素,也可以把它们当作

视觉中的点,线,面来加以引用,使文字和内容及页面的其他元素有基的结合起来,成为一个整体.网页的文字一般体现在以下几个方面:网站或网页的标题,网页正文,文字导航栏,版权说明等相关信息,图形中的文字,装饰用的文字等.

通常一套网页结构中最多出现三种字体,一种用作标题,一种用作导航按钮和小图标,另外一种则

用作正文.1):标题设计

标题可以分为网站的标题和栏目标题两类,网站标题是网站或者企业标记和名称等文字,网站的标题文字要符合网站的主题及风格.

标题除了置于段首,还可以居中,横向,坚向等编排处理,制造新的设计效果.

栏目标题是页面视觉的起始点,一般来说以简洁,清晰,易于阅读为宜,标题文字的字体须要要依据内容和主题来选择,最好及内文字体有所区分,粗大一些,以示突出.用图形设计制作标题可以避开一模一样的文字标题所带给人的单调

感和枯燥感.分析:我觉得标题是应当突出醒目,简洁,有特性,符合网站的主题风格.2):文字的层次

网页中的文字须要依据大小,色调,粗细来分出标题,正文和段落,形成一种视觉的节奏感.

结构中规划最主要的部分就是"对齐"和"平衡"

依据内容和版面的要求,在页面主次支配上,可以突出图形,文字则占较小的份量,也可以突出

文字,填入适当的图形,使整个页面看起来均衡有序.3)文字的整体编排

a:文字的叠置

b:文字的图形化图像

是除了文字之外,网页页面上最重要的视觉设计元素莫过于图象了,网页中图像的造型是页面

设计中最重要的视觉要素,从视觉规律上看,人们对及图象的爱好大过及文字,

我们应当形成画面的主要图象,其他图象起,配套作用.图片的格式:网页通常运用的格式为:gif和JPEG除此以外还有两种未被广泛应用的图象格式:

PNG和MNG1:图片的格式(1)GIF格式

优点:支持透亮和交织模式和交织

缺点:最多只能运用256种颜色(2)JPEG格式

优点:支持24真彩,适当于具有丰富的细微环节的高质量图象

缺点:采纳了一种失真的压缩算法.通过去掉图象的部分信息来获得较高的压缩比.(3)PNG格式

优点:在透亮上可以覆盖任何背景上看不到的接缝,改善了gif透亮图象描边不挂的问题.

缺点:首先不支持动画的应用,虽然采纳了无损压缩方式,使其具有相同的图象质量的png

图象文件比JPEC图象文件小,但是JPEG可以通过适当牺牲画面的品质而取得比pNG更小

文件尺寸另外,png不支持CMYK模式(4)MNG格式分析:我觉得上面几种图片的格式各有特点,驾驭他们各自的优缺点,我们就可以很好的利用他们.2:图片的类型

1)摄影类能够直观,真实的再现产品,个人,企业形象,因此在网页中运用范围最广

2)矢量漫画类

3)抽象图形类

4)图标图形类3:图片的排版

一个页面上的视觉中心,一般放上重要的文字和图片4:文字图片的留白量

主要指除字体本身所占用的画面的空间之外的空白,即字间距离以及其四周空白区域,

文字组合的还坏,很大程度取决于空白的运用是否得当,不同类别的文字的空间要适当集中

,并利用空白加以区分.留好的空白和缝隙是有品位,有才智,甚至有实力的表现,留空白可以加内容的独立性,又是版面

增加节奏感的最佳方法.分析:确实我觉得留空白能够体现出作者的设计风格以及很多东西背景

1:底纹背景是指网页或表格的背景图案,往往通过不同肌理效果来表现

对于现在的网络来说运用100K大小的图片已经没有障碍.

底纹背景,通常色调要比较柔软,重要起衬托主页内容,设计的作用,运用阅读者一眼看到它,但

不喧宾夺主,设计的时候要设计好背景中图形及页面其他元素之间的排列关系.做到风格统一

首尾呼应,浑然一体.2:肌理背景

动画1):gif格式的

2):swf格式的广告banner广告文字有一般的尺寸通常banner的文字要尽可能的简洁明白,考虑到文字的搭配,协作的图形不要太困难,为了突出

主题,文字尽量运用黑体粗体等字体,而不相宜用过多种类型的字体,避开造成眼花的感觉,为了使

不增加图片的占用空间,图形尽量选择颜色较少的,适应存储为jpg格式的静态图形.

第四章网页设计的风格4.1网页设计构成要素网页的风格,图形,内容千变万化,构成图形图像的最基本的造型元素是点,线,面,的变化组合构成网页设计的多样化,是及独具匠心独特性相联系.

点线面的变化是网页设计活力的体现,也是创建形式美的根本要求,使网页设计具有不同审美

倾向的特征

假如以不同图形或者单位来划分,点,线,面是相对的点的构成

在网页设计中分割点的属性可以创建出千变万化的点造型点具备剧烈的视觉吸引力,点的数量会有生动感,点的连续会产生节奏,韵律和方向,疏密的点阵会产生空间感,点的形态,方向,大小,位置,

聚焦,层叠,交织能给人带来不同的心理感受.

视觉上的点可以是圆形,也可以是方型,通过交叠,错位,大小,方向的变化,产生欢快,跳动的风格.

线的构成

线是由点的移动或者连续排列构成的,或者说是由两点连接而成,是不占面积的.

用线能表现作品情感和抽象意义,网页的工整感,速度感也是靠钱来表现的.线在空间中具有方向感和运动感.

总的来说,线分为直线和曲线二种,直线分为垂直线,斜线,水平线,曲线分为几何线,自由曲线

长短,形态的变化,坚硬,力气,速度的感觉,等等很多都表现很多东西.可以运用重复,近似,渐变,对比,等手法将不同的线运用的页面中去,以获得不同的效果,但是要

留意对比,协调的效果.

线是分割页面的主要元素之一,是确定页面风格的基本元素,依据各自线形的特征,可以设计出不同风格的

网页.分析:我觉得线就是我们美术里的线表达的意思一样的面的构成点的密集,线的运动就产生了面,面通过大小,位置,形态,角度的变化,形成自己的特性和情感特征.面的组合是敏捷多样的,一个面可能有叠加,重合,穿插的效果.分析:我们通过美术的角度去看面,然后理解通过面面的组合我们能够达到很到不同的效

果混合的构成点,线,面是视觉构成的基本元素,具有不同的情感特征,是最重要的表现手段.

我们单独的用某个点,线,面可能有些单调,但是假如组合起来的话往往就会产生很多意想不到的效果分析:我觉得在网页上设计东西我们运用点线面就和我们在一张白纸上画画一样的.

其实在设计前我可以在纸上画出其草图4.2网页设计的风格类型

网页的设计作品事实上没有好坏之分,只有风格类型上的区分,网页的应用范围很广,几乎

覆盖了全部行业,网页的整体风格要靠图形图象,文字,色调,版式,动画来表现.在不同的领域中,艺术创作的角度方式是有区分的,网页风格大致可以分为:平面风格,

矢量风格,像素风格,三维风格网页的"造相"凡是较闻名,有影响的网站,已经在网页风格方面形成了自己的特点.

"造相"就是要求网页版面总体设计要求能够打动人,吸引人的视觉形象,要有一个强势的区分

于其他网站的独特相貌表情,网站依据各自所要表现的主题,设计出各自不同风格的版面风格.

这个观念可以因设计者的风格,感悟,经验不同,从而达到驾御不同版面的目的.平面风格

平面设计是二维的设计,平面风格始终是基于一个二维视图来工作的,侧重于构图,色调以及表达的思维主旨,往往给人以空灵的意境和透气的爽快的视觉,这种构图形式可以在有限的页面中表现出无限的空间感觉

此种风格在网页设计里最常见分析:我觉得确定某种风格很重要,然后我们可以画一个有特性的平面风格的图然后在进行设计.矢量风格

矢量图运用直线和曲线来描述图形,这些图形的元素大多是一些点,线,矩形,多边型,圆和弧线等基础元素,它们都是通过数学公式计算获得的,矢量图形最大优点是无论放大缩小也会失真,

最大的缺点是难以表现色调层次的丰富的逼真效果矢量图是世界通用的设计语言,由于具有夸张,极具有特性的装饰表现手法,目前在国内互联网上被运动的越来越多.

分析:我觉得必需认清它的优点缺陷,并理解它一般能表达的风格,这样在什么时候该用的

我们就心理有底了.像素风格

像素图属于点阵式图象,它是一种图标风格的图象,更强调清晰的轮廓,明快的色调,几乎不用混叠方法来绘制光滑的线条,由于很多不同颜色的点一个奇妙的组合及排列在一起,构成了一副完整的图像,这些点称为像素,图像称为像素画.目前像素画制作技术以日本,韩国比较成熟,像素风格的网站,为互联网添加了独特,亮丽的风景线.

分析:对于这个我不是很明白我只知道的时候它们应当是是一个个的像素点构成的吧

质三维风格

三维是在定视图,正视图,侧视图以及透视图来创作编辑物体的,以一个具有长,宽,高3种度量的立体物质形态出现,这种形态可以表现在商品的外性上,也可以表现在商品的容器或者其他

地方.在网页设计里,三维风格表现简单得多,三维空间的设计惋惜助于三维的造型手法,通过折叠,凹凸的处理,使画面产生浮雕,立体等三维效果,三维构成以丰富的厚重的内涵,深度以及多层次,全方位的呈现,给人以深厚,剧烈的视觉印象.分析:对于三维的我觉得我平常见的也比较多,一般立体感比较强4.3软件界面简析软件界面作为一种特殊媒体设计,具有平面,立体设计普遍特征的同时,还具有自身的独特性,

从根本上看,它是一种以功能为主的设计

无论是网页设计还是软件界面的设计,它们之间正越来越多地相互借鉴,相互渗透.分析:这里告知的是网页设计及软件界面设计是不同的UI行业常用名词

UI的本意是用户界面,是英文User和Interface的缩写

网站设计及用户界面设计的区分在于设计师必需放弃对界面的完全限制,部分由用户及其客户端,硬件来确定

UI是人机交互设计的图形界面设计部分,交互设计所提倡的是使产品内容被简单的运用

分析:我觉得产品内容被简单的运用这个值得参考GUl是一种可视化界面,它运用图形界面代替正文界面,也是一种结合计算科学,美学,心理学,

行为学,以各商业领域须要分析的人机系统工程,强调人,机,环境三者作为一个系统进行总体设计GUL即人机交互图形化用户界面设计,它可以优化产品的性能,使其更适合用户的操作需求,直接提升产品的市场竞争力.

分析:我觉得GUL设计应当是一种专业针对强的设计软件界面设计

界面设计是为了满意软件专业化,标准化的需求,对软件运用界面进行美化,优化,规范化的设分支具体包括软件启动封面设计,软件框架设计,按钮软件,面版设计,菜单设计等等

界面可分为感觉(视觉,听觉)和情感两个层次,用户界面设计是屏幕产品的重要组成部分

用户界面设计的三大原则是:置界面于用户的限制之下,削减用户的记忆负担,保持界面的一样性.

界面设计是以功能性界面为基础,以环境界面为前提,以为情感界面为重心而构成的,它们之间

形成有机和系统的联系界面设计的运用,核心是设计分析

中国软件开发已很大程度上及西方接轨,UI在中国发展须要一个自上而下的推动性改革

分析:我觉得上面的文字可以细致推敲软件启动封面大小多为主流显示辨别的1/6大,应醒目地标注制作或者支持的公司标记,

产品商标,软件名称,版本号,网址,版权声明,序列号等信息,以树立软件形象,便利运用者或购买者在软件启动的时候得到提示.界面色调的要求:计算机屏幕的发光成像和一般视觉成像有很大的不同,应当留意这种差别并做出

恰当的色调搭配,对用于长时间运用系统的用户应当运用用户在较长时间运用后不至于感觉到视觉疲惫,例如:以纯度较低的淡彩,灰色为主配色,背景深,前景浅等原则,尽量运用同类色,近似色

系,切记色调过多,使人产生纷繁芜杂的感觉,严峻影响用户视觉交互分析:我觉得上面说的很对,应当好好分析借鉴面板

我们习惯称之为皮肤

面板的设计应当具有缩放功能,面板应当对功能划分清晰,应用和对话框,弹出框风格匹配,尽量节约空间,切换便利.

图标用来宣扬商家的商标或者特定的标记,在软件界面中可以视操作系统的重要元素,界面中的图标是功能标识,都具有快捷传递信息,便于记忆的特点.第二部分网页配色彩色网页具有吸引力的特征,有悦目,装饰性强等特点.

在好用美术中,常有"远看色调近看花,先看颜色后看花,七分颜色三分花"的说法,这也说明在任何

设计中,色调对视觉的刺激起到了第一信息传达的作用.

色调是光的一种特性,是光线的一部分经有色物体反射刺激眼睛,在头脑中所产生的一种反应分析:对于色调以前我细致探讨过,色调构成的笔记重点全面分析了5.1色调的感觉

色调是及人的感觉(外界的刺激)和人的知觉(记忆,联想,对比等)联系在一起的,色调的感觉往往存在于色调的知觉中.每个人对及色调的感觉是有差异的,由于国家,宗教等不同不同的人

对色调的感觉是有差异的灰色调给人亲切的感觉:

灰色让人有平稳踏实,稳重亲近的感觉,易于长时间地观看,但较压抑

光明的颜色使人的心情愉悦但不易于长时间的看,简单有焦躁的感觉

男性相关的颜色:通常运用较深厚硬的黑棕咖啡天蓝色

女性相关的颜色:通常运用粉色,绿色,挑红色或者美黄色等

环绕相关主题的颜色:通常是运用同类色,为蓝色,翠绿等干净明快的浅色系分析:我觉得上面这些很重要,因为我们既要到不同方面的颜色一般用什么方面

也应当知道什么样网站用什么颜色.配色方案通常是依据主题而不同的

以上不同主题还有很多,如中国文化风俗,喜爱运用一些红色,纯紫,亮黄色色调有冷,暖的感觉

色调有进退和张缩的感觉

色调有轻重,软硬的感觉

色调有华丽朴实的感觉

色调有主动及消极的感觉色调的醒目性

色调和背景之间的明度差,直接影响着欣赏者的分辨度色调感觉的偏差

在网页设计中,除非是为了追求特殊特性的主题效果,否则色调的感觉及内容不符,无论多么漂亮的配色,都令人感觉不舒适5.2色调的属性

色相

明度

纯度5.3常用的基本概念原色

间色

复色

补色

邻近色

同类色

暖色

冷色5.4网页色调的色调组合

色调

主色调

辅色调

点晴色

背景色

色调的对比

色相对比

明度对比

纯度对比

补色对比

色调的调和

同种色的调和

类似色的调和

对比色的调和

渐变色调和分析:这一章我写的东西比较少,对于这一章的内容在色调构成里其实我写的很具体了,所以完全可以参照那里,这里只点一下了第六章

网页中的色调

最快速也是最长久地给访问者留下网站的印象是因素是色调6.1网页平安色

运用网页平安颜色进行网页配色可以避开原有的颜色失真的问题,

网页平安色可以在下载分析:所谓用网页平安颜色就是它可以避开原有颜色失真的状况,否则就会利用阅读器内置调色版

中及颜色最近的颜色进行替换.我们可以依据平安色谱很好驾驭限制网页中的环境颜色.6.2常用的网页的色调模式RGB色调模式

由于显示器是采纳RGB这种方式表示色调,因此该色调空间法是最常见的表现手法.RGB模式以RGB色调为基础,而RGB以RGB模式为基础,而RGB型刚依靠混合不同的红绿蓝值来建立色谱中的大多颜色

分析:因为显示器是用RGB实现的,所以我们用RGB色调模式整合性应当是最好的.

IndexEnd色调模式

索引颜色模式

该模式限制图象大小,运用次模式可以有效的缩减图象文件的大小,而且可以适度保持图象文件的色调品质,很适合制作放置于网页页面上的图象文件或丝网印刷中运用的图象文件,GIF就是256色的图象格式.分析:对于上面的二种模式,我们究竟在什么运用那种模式通常对图象质量要求较高的网站,要求

真实呈现真彩色的产品摄影图片,依次都运用RGB模式.

对于网页色差较小,粗造的肌理材质,运用Indexed模式比较契合网网本身的要求.

6.3网页设计中色调基本原则整体性

色调的整体性,就是网页面上各部分的色调从色调和比例上都有各自的角色,主色调,协助色,点睛色,背景色一起组合成有节奏的韵律,和谐统一的色调关系

色调的基调是否整体和谐,主要从色相的红,黄,绿等,色性的冷色调,暖色调,明度的亮色阶,暗色阶,纯度的高纯度,低纯度等相互搭配组成来看,通常是依据页面内容以主题进行相应的选择,

比如先确定一种主色,然后协助色,点睛色,留意色调的相互衬托关系和各种对比因素,协调因素.

当感觉页面色调搭配不舒适时,就可以利用白,黑色,灰色在里面起到协助协调的作用.适用性

要依据不同类型的网站选择最适合的色调,不同类型的网站须要运用不同的色调效果去表现,使

形式及内容相统一,符合人们日常固有的认知习惯,例如:医学类较适合雅致,安静的颜色,食品类

多考虑能引发食欲的食物固有色,环境类当然以绿色,蓝色为首选.选择色调的时候应综合考虑多方面的因素,而不能真依据自身喜好的习惯颜色来做主观的处理独特性

对各色相的特性要有充分的了解,在运用的时候要大胆突出其特性的特征,避开及其他同类网站雷同,要符合该网站的主题内容的要求,在不同脱离运用性的状况下多尝试,是颜色的独特性充分发挥魅力,网站便会在及众同类网站脱颖而出.6.4网页设计中色调的作用

视觉区域的划分

依据网站不同主题内容来区分频道或者栏目,使人加深印象色调在栏目间的应用

在各导航拦之间做颜色区分,二级页面的主色和其他协助元素的色调也随着整体色调而变化.

韩国网站较喜爱用色调来区分各二级页面的内容区域色调在页面中的应用

在同级页面里,色调随着产品的属性变化,在黑白剧烈的视觉反差中,产品的形象突出,形成显明的对比

纯净的色调在黑色及白色的衬托下,其悦目动人之处被发挥到极致.引导主次关系有很多因素可以影响色调的主次关系,色调的大小就是其中最重要的一项,色调的大小会令色调的

的主次关系有一种生动的效果,具体可以是位置的变化,也可以是面积的变化.

例:利用纯度的对比利用纯度摆放位置,加强视觉的中心焦点

利用面积以及冷暖的对比主体物风光 积小,利用冷暖对比,令主体产品突出,形成剧烈的反差.利用纯度对比能快速地强化视觉中心效果,无彩色的黑白对也相当剧烈营造活跃的气氛

能营造真实的场景空间,活跃并渲染气氛色调营造的空间感属于橙色和黑色的双色调,把其他杂色都过滤,并增加真实的空间感.

色调所营造的气氛

纯净的蓝色,在这里用老表现产品的高贵,纯正的品质,效果可是淋漓尽致.

第7章运用的网页配色方案色调的心理示意作用特别重要,它所产生的心理效应发生在不同的层次的类型中.7.1色调的象征特征

色调的象征是从心理学角度去探讨色调的情感和表现力的

色调语言具有的象征是由多种因素确定的,色调的联想,既受人们的阅历,记忆,知识等因素确定

也因民族,年龄,性别的差别有所不同,还因性格,教养,职业,生活环境等的差别而存在很多心理上的差异,由此形成的色调象征的多重性.人们对于色调特征也并非不变,它会因民族间的交往而相

互接近,渐渐融合色调的渐层变化里有高,中,低不同的调子,暗色中含高亮的对比,会给人以清晰,激烈的感觉,如暗色的背景下,淡黄色,鲜黄色给人剧烈的视觉刺激;暗色中含有中亮度的对比.会给人镇静,稳定,深厚的感觉,如暗色中间含有纯蓝色,中性色及低亮度的对比,给人以模糊,朦胧,平和的感觉,如浅蓝色及灰色.纯色及暗色的对比,给人以激烈,坚硬的感觉.在网页设计中也常常采纳象征性来表示主题及商品的属性,还会运用色调的象征性来表达冷暖,

轻重,兴奋,沉静,时尚及古典的感觉.下面依据红,橙,黄,绿,蓝,紫的色环依次以及非彩色的黑,白,灰对颜色的象征属性举例分析.红色的热忱

红色的色调暖和,性格刚烈而外向,是一种对让恩刺激性很强的颜色,红色简单引起人的留意,也简单使人兴奋,激烈,惊慌,冲动,还是一种简单造成人的视觉疲惫的颜色.

在众多颜色里,红色最显明生动,最热情的颜色,极简单汲引人们的目光,红色及黑色搭配,在商业设计中被誉为商业胜利色,鲜亮的红色多用及小面积的点缀色.

红色在不同明度,纯度的状态(粉红,鲜红,深红)里所表达的情感是不一样的.

在网页颜色的应用的几率中纯粹运用红色为主色调的网站相对较少,通常都配以其他颜色进行调和中红:

由于红色的特殊属性,通常较多被用语食品,时尚休闲等网站.

浅红:

粉红色传达着柔情,娇美,羞涩,甜蜜,纯真,诱惑的心理感受.

深红:

深红色传达着稳重,消极,成熟,高贵,无畏的心理感受.

橙色的华丽

橙色具有轻快,欢欣,收获,时尚的效果

在整个色谱里,橙色具有极高的兴奋度,最刺眼的色调,给人以华贵而暖和,兴奋而热情的感觉,也是令人激昂的颜色,有健康,富有活动,英勇自由等象征意义.中橙:

亮丽的橙色传达着暖和,华美,收获,辉煌,豪华,兴奋,时尚的心理感受.

浅橙:

传达着喜悦,收获,和谐,闪烁,温顺的心理感受.

深橙:

传达着华丽,古典,信仰,跳动,和谐的心理感受.

黄色的明快

黄色是阳光的色调,含有特别年轻的感觉,具有活泼及轻快的特点,象征光明,盼望,高贵,开心.浅黄色表示柔弱,灰黄色表示病态,它的亮度最高,

和其他颜色协作很活泼,有暖和感觉,具有欢乐,盼望才智和轻快的特性,有盼望及功名等象征意义,黄色也代表着土地,象征着权利,并且还具有

神奇的宗教色调.

黄色的性格冷漠,傲岸,敏感,具有扩张和不安静的视觉印象

的扩张:在主色调的前提下,黄色是最光明的颜色,在几乎搭配任何颜色都能起到很亮丽,悦目的效果中黄色:

崇高,尊贵,辉煌,扩张的心理感受.

浅黄色:

传达着明朗,开心,盼望,发展,雅致,清爽的心理感觉,较适用于女性文化

深黄色:

传达着高贵,温顺,内敛的心理感受.绿色的活力

绿色及人类休戚相关,是永恒的自然之色,代表了生命及盼望,也充溢了青春的活力,绿色象征着和平及平安,发展及朝气,舒适及安静,松弛

及休息,有缓解眼部疲惫的作用

绿色在黄色和蓝色的冷暖之间,属于较中庸的颜色,这种使得绿色的性格最为平和,平稳,大度,宽容,是一种柔顺,满意,优美里，受欢迎的颜色.温顺又有春天朝气盎然的场景气氛,只运用了少许低纯度的橙色,蓝色作为点缀,马上增加了活力.

中绿:

黄绿色传达着清爽,安静,安逸,和平,柔软,春天,青春的心理感受.

浅绿:

浅绿色传达着优雅,休息,平安,和谐,安静,柔软的心理感受.

低纯度,略微有些灰调的浅绿色,能起到视觉的作用,配以小许高纯度同类色,以增加生气.

深绿:

传达着茂密,健康,成熟,稳重,生命,开阔的心理感受.

蓝色的博大

蓝色是色调中比较沉静的颜色,象征着永恒及深邃,高远及博大,壮阔及浩渺,是令人心境畅快的颜色

蓝色朴实,稳重,内向等性格,能够衬托那些活泼的因素,具有较强扩张力的色调,同时也活跃也页面,另一方面蓝色也有消极,冷淡,保守等意味

蓝色及红,黄等颜色运用得当,可以构成和谐对比的调和关系.

蓝色也是网站设计中运用得最多的颜色.中蓝:

传达着深远,永恒,沉静,无限,理智,城实,寒冷的心理感受

浅蓝:

传达着淡雅,清爽,浪漫,高级的心理感受,常常用及扮装品,女性,服装网站.

深蓝:

稳重,冷静,严谨,冷漠,深厚,成熟的心理感受.紫色的高贵

姿色是一种在自然界中比较少见的颜色,象征着女性化,代表着高贵及奢华,优雅及魅力,也具有

庄重,神圣和浪漫的品质,另一方面又有孤独,神奇等意味.姿色的明度在有彩色的色度中是最低的,紫色的明度给人一种沉闷,神奇的感觉,在紫色中红色的

成分较多时,显得华丽,和谐,在紫色中加入少量的黑,并具有沉稳,庄重的感觉,在紫色中加入白色

,则变得优雅,娇气,并充溢女性的魅力.中紫:传达着高贵,优雅,幻想,神奇,庄重的心理感受.

浅紫:传达着妖媚,优雅,娇气,清秀,梦幻的心理感觉,并充溢女性的魅力.

深紫:传达着华贵,深远,神奇,孤独,宝贵的心理感受.

黑色的神奇

黑色是暗色,是纯度,色相,明度最低的非色调,象征着力气,有时感觉沉寞,虚空,有时感觉庄重,

肃穆,有时有意味着不祥和罪恶,自古以来,世界各族都公认黑色代表死亡及悲伤,黑色还具有能

汲取光线的特征,有一种变化无常的感觉.

黑色能和很多的色调构成良好的对比调和关系,运用范围很广,也常用来表示英俊的男人.只要黑色为背景,前景都是主角,任何色调在它的衬托之下都一览无遗.

黑色在服装,音乐,个人网页等颇具有特性色调的网站有很多的应用.

黑色传达着肃穆,刚健,坚实,粗莽,黑暗,深厚,神奇,安静,悲伤,压抑的心理感受.

灰色的内涵

两种或两种以上的色调混合,是中性色,具有中等明度,无色调特点,如搭配不好,页面简单显得

灰暗,肮脏,任何色调加入灰色都显得蓄而柔软,灰色给人的高品位,含蓄,精致,雅致,耐人寻味

等感觉,同时也简单产生颓废,苍凉,消极,沉闷的意味.灰色能够汲取其他色调的活力,减弱色调的

对立面,起到融合的作用

灰色也被称为高级灰色,是经久不衰,最经看的颜色.

灰色传达着中庸,平凡,温顺,谦让,中立,高雅的心理感受.

灰色传达着虚心,平凡,中庸,孤独,愁闷,消极的心理感受.白色的纯净

白色是亮色,是明度组高的非色调,色感光明,也是最惹眼的颜色之一,白色性格朴实,纯净,欢乐,

象征纯粹,朴实,高雅等.

作为非色调,白色及黑色一样,能及各种颜色相配和,构成明快的对比调和关系,及明丽的色调搭配

时,显得更清爽,更具有活力

通常在网页配色时,若感觉页面沉闷,也可考虑加入白色试试,往往就是点睛之比.白色传达着雪白,明快,神圣,纯真,朴实,高雅的心理感受.分析:留意上面讲是依据色相环的依次来讲的,既讲了每中颜色代表的意思也赶纯度分为高,中,低来讲了各种颜色按其纯度来分代表的意思,这个很重要,可以作为我们网页配色的很重要的

依据,同时候我们也可以知道这里配色基本上是:按主色调,辅色调,点睛色,背景来搭配的.