网页设计与配色实例分析Word文件下载.docx

网页设计与配色实例分析Word文件下载.docx

《网页设计与配色实例分析Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页设计与配色实例分析Word文件下载.docx（21页珍藏版）》请在冰豆网上搜索。

1.2网站项目的规划

一个成功的网页设计作品是艺术与技术的结合与统一,以主题鲜明,形式与内容保持一致,把握整体风格为设计原则,艺术是

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

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

1）:

网站的目标

2）:

网站的主题

3）:

网站的内容

4）:

网站的风格

5）:

网站的标准

分析:

网的艺术与技术的结合统一,艺术的设计的手段,而不是设计的目的

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

网站的性质不同,设计要求也不同,例如:

门户网站,注意页面的分割,信息结构的合理,页面与图片的优化,界面的亲和等问题

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

网站的主题要求小而精,有针对性,尽量向专业靠近;

题材尽量要新颖,不要随处可见,这样才你更吸引用户一看再看,网站的名称要有特色,方便记忆,要考虑到为了以后网站的形象和宣传做推广.

上面的东西让我总觉得我对不同类型的网站把握的过少,比如韩式网站的风格是什么样的,这些平时有感受确没有从理论上去好好分析过.同时我觉得有必要自己整体出一个有规范的针对自己的特点的需求方案文档,以后所有的

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

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

建设网站前的市场分析

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

网站的技术解决方案

网站的内容规划

网页设计

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

6）:

网站维护

7）:

网站测试

8）:

网站的发布与推广

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

也作了许多这样的工作.

第二章网页设计的框架

网页设计是有规律可寻的,掌握如下几个框架,并根据网站的信息内容套用,框架搭建起来,剩下的"

填充"

"

丰富"

精致"

....就容易多了.

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

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

我们为什么要用框架:

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

网页的布局以导航拦位置为界,大致可分为:

2.1.1上下结构式

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

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

2.1.2左右结构式

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

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

注:

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

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

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

展示内容叫少的网站,很大块我们会选择用图片去填充.

2.1.3上左右结构样式

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

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

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

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

2.1.4上左中右结构式

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

2.1.5综合结构式

这种类型网站较为复杂,特点是功能模块多,信息分类详细,因此根据需要采用区域结构较为合适.

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

2.1.6不规则的结构式

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

气氛,类似于封面类型,有点击进入下页的入口,无规则的框架风格较为随意自由,凸现网站个性意图,给浏览者带来较强的视觉冲击,使以产品宣传目的的企业和个人网站的爱好者,都热忠于此种框架式.

2.1.7少见的结构式

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

这类结构可以形容另一种风格特色

其实我觉得上面讲了有规律的框架也讲了没有规律的框架,以后去看任何页面的结构式,我们基本上可以用上面这些去

分类.

第三章网页设计元素

网页布局在多数情况下是在顶部放置必要的信息,如公司名称,标志,广告,以及导航条,或将导航条放置在左侧而右侧是正文,这样的布局结构清晰,易于使用,当然,也可以根据网站的性质的需要,尝试这些布局的变化形式,如左右两拦布局,一半是正文,另一半是形象图片,导航,或者正文不等的两拦布置,通过背景色区分,分别放置图片和文字,在设计中可以多吸取好的网站设计精髓.

这里讲到了网页中一些元素的大致放法,比如说顶部放置必要的信息,如公司名称,标志,广告,以及导航条等等这些.

3.1网页设计的布局概念

3.1.1页面尺寸

二种常用的尺寸:

一般在800*600的分辨率情况下,页面的尺寸为778*435像素

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

第一屏:

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

第一屏的位置:

黄金位置,"

寸土寸金"

之地,放置最主要的内容.这个地方也是浏览者习惯关注的焦点位置,常常放置重要的内容,图片,广告.

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

也应该在焦点位置.

3.1.2整体造型

造型就创造出来的物体给人的整体形象,网页的整体形象应该是图形与文本的结合,通常网页形状的组合造型有:

圆形,矩形,三角形,菱形,"

S"

形等.

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

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

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

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

3.1.3页头

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

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

3.1.4文本

文本是这个网站信息内容的重要组成部分,在页面中多数以行或者块（段落）出现,通常相较于导航条区域,有自己的文字区域位置,在整个页面视觉节奏上,形成反差对比感

3.1.5页脚

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

3.1.6图片

所谓图形并茂,相得益彰,文字和图片具有一种相互补充的视觉关系,最理想的效果是文字图片的密切配合,既能活跃页面,又能使主页有丰富的内容,图片和文本是丰富网页的两大构成元素,图片为点缀增加文本的可读性,趣味性,文本为阐述信息内容

.

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

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

3.1.7多煤体

网站要吸引浏览者注意,页面的内容可以是三维动画,Flash等技术来表现,让声音,动画,视频等其他媒体更多的出现在人们的视野里,丰富网页多层次的视觉视听效果,更贴近于生活,由于网络带宽的客管限制,在使用多煤体的形式表现内容时,应考虑的客户端的访问速度.

这个也很重要我觉得有了一些多煤体,往往会有意想不到的效果

上面这些从页头一直到多煤体我的总体感觉是首先我们要内容认清页面的这些元素,当我们认清以后,我们就要对这些元素

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

3.2网页设计的主要视觉元素

3.2.1导航样式

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

导航的位置结构:

可以细分为左文右导航栏,左导航栏右文,左右导航中间栏,推荐使用第一种.

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

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

用颜色来区分的导航

3.2.2网站标志

是一站点的特色与内涵,起图形的设计创意来自于网站的名称与内容,一般会出现在站点的每一个页面上,是网站给人的第一印象,logn的作用很多,最重要的是表达网站的理念.便于人们识别,被广泛用于站点的链接,宣传等,类似的企业标志

logo一般通过图案,文字的组合,达到被标识的战事说明,沟通交流,从而提升访问者的浏览兴趣,增强网站印象的目的.

我很认同多表示起作用这一点,至于怎么设计标志,就是表达网站的理念.便于人们识别,广泛应用.标志的设计应与网站的属性相吻合,不少知名网站logo设计非常简洁,易记.

3.2.3文字的排版

文字和图片是网页中的两大构成要素,文字排列组合的好坏,直接影响到其版面的视觉传达效果.

文字设计的成功与否不仅在于字体本身的书写.同时也在于其运用的排列组合是否得当,为了造成

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

视觉中的点,线,面来加以引用,使文字和内容与页面的其他元素有基的结合起来,成为一个整体.

网页的文字一般体现在以下几个方面:

网站或网页的标题,网页正文,文字导航栏,版权说明等相关信息,图形中的文字,装饰用的文字等.

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

用作正文.

标题设计

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

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

栏目标题是页面视觉的起始点,一般来说以简洁,清晰,易于阅读为宜,标题文字的字体需要要根据内容和主题来选择,最好与内文字体有所区别,粗壮一些,以示突出.

用图形设计制作标题可以避免千篇一律的文字标题所带给人的单调

感和枯燥感.

我觉得标题是应该突出醒目,简洁,有个性,符合网站的主题风格.

文字的层次

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

结构中规划最主要的部分就是"

对齐"

和"

平衡"

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

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

3）文字的整体编排

a:

文字的叠置

b:

文字的图形化

3.2.4图像

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

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

我们应该形成画面的主要图象,其他图象起,配套作用.

图片的格式:

网页通常使用的格式为:

gif和JPEG除此以外还有两种未被广泛应用的图象格式:

PNG和MNG

1:

图片的格式

（1）GIF格式

优点:

支持透明和交错模式和交错

缺点:

最多只能使用256种颜色

（2）JPEG格式

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

采用了一种失真的压缩算法.通过去掉图象的部分信息来获得较高的压缩比.

（3）PNG格式

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

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

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

文件尺寸另外,png不支持CMYK模式

（4）MNG格式

我觉得上面几种图片的格式各有特点,掌握他们各自的优缺点,我们就可以很好的利用他们.

2:

图片的类型

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

2）矢量漫画类

3）抽象图形类

4）图标图形类

3:

图片的排版

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

4:

文字图片的留白量

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

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

并利用空白加以区分.

留好的空白和缝隙是有品位,有智慧,甚至有实力的表现,留空白可以加内容的独立性,又是版面

增强节奏感的最佳方法.

确实我觉得留空白能够体现出作者的设计风格以及很多东西

3.2.5背景

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

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

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

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

首尾呼应,浑然一体.

肌理背景

3.2.6动画

gif格式的

swf格式的

3.2.7广告banner

广告文字有一般的尺寸

通常banner的文字要尽可能的简洁明了,考虑到文字的搭配,配合的图形不要太复杂,为了突出

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

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

第四章网页设计的风格

4.1网页设计构成要素

网页的风格,图形,内容千变万化,构成图形图像的最基本的造型元素是点,线,面,的变化组合构成网页设计的多样化,是与别具一格独特性相联系.

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

倾向的特征

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

4.1.1点的构成

在网页设计中分割点的属性可以创造出千变万化的点造型

点具备强烈的视觉吸引力,点的数量会有生动感,点的连续会产生节奏,韵律和方向,疏密的点阵会产生空间感,点的形状,方向,大小,位置,

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

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

4.1.2线的构成

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

用线能表现作品情感和抽象意义,网页的工整感,速度感也是靠钱来表现的.

线在空间中具有方向感和运动感.

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

长短,形状的变化,坚硬,力量,速度的感觉,等等很多都表现很多东西.

可以运用重复,近似,渐变,对比,等手法将不同的线运用的页面中去,以获得不同的效果,但是要

注意对比,协调的效果.

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

网页.

我觉得线就是我们美术里的线表达的意思一样的

4.1.3面的构成

点的密集,线的运动就产生了面,面通过大小,位置,形状,角度的变化,形成自己的个性和情感特征.面的组合是灵活多样的,一个面可能有叠加,重合,穿插的效果.

我们通过美术的角度去看面,然后理解通过面面的组合我们能够达到很到不同的效

果

4.1.4混合的构成

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

我们单独的用某个点,线,面可能有些单调,但是如果组合起来的话往往就会产生许多意想不到的效果

我觉得在网页上设计东西我们运用点线面就和我们在一张白纸上画画一样的.

其实在设计前我可以在纸上画出其草图

4.2网页设计的风格类型

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

覆盖了所有行业,网页的整体风格要靠图形图象,文字,色彩,版式,动画来表现.

在不同的领域中,艺术创作的角度方式是有区别的,网页风格大致可以分为:

平面风格,

矢量风格,像素风格,三维风格

网页的"

造相"

凡是较著名,有影响的网站,已经在网页风格方面形成了自己的特点.

"

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

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

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

4.2.1平面风格

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

此种风格在网页设计里最常见

我觉得确定某种风格很重要,然后我们可以画一个有个性的平面风格的图然后在进行设计.

4.2.2矢量风格

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

最大的缺点是难以表现色彩层次的丰富的逼真效果

矢量图是世界通用的设计语言,由于具有夸张,极具有个性的装饰表现手法,目前在国内互联网上被运动的越来越多.

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

我们就心理有底了.

4.2.3像素风格

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

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

质

4.2.4三维风格

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

地方.在网页设计里,三维风格表现简单得多,三维空间的设计可惜助于三维的造型手法,通过折叠,凹凸的处理,使画面产生浮雕,立体等三维效果,三维构成以丰富的厚重的内涵,深度以及多层次,全方位的展现,给人以深厚,强烈的视觉印象.

对于三维的我觉得我平时见的也比较多,一般立体感比较强

4.3软件界面简析

软件界面作为一种特殊媒体设计,具有平面,立体设计普遍特征的同时,还具有自身的独特性,

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

无论是网页设计还是软件界面的设计,它们之间正越来越多地相互借鉴,相互渗透.

这里告诉的是网页设计与软件界面设计是不同的

4.3.1UI行业常用名词

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

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

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

我觉得产品内容被简单的使用这个值得参考

GUl是一种可视化界面,它使用图形界面代替正文界面,也是一种结合计算科学,美学,心理学,

行为学,以各商业领域需要分析的人机系统工程,强调人,机,环境三者作为一个系统进行总体设计

GUL即人机交互图形化用户界面设计,它可以优化产品的性能,使其更适合用户的操作需求,直接提升产品的市场竞争力.

我觉得GUL设计应该是一种专业针对强的设计

4.3.2软件界面设计

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