浅谈网页设计美学

浅谈网页设计美学了解网页设计，共同提高产品质量浅谈网页设计美学全文共27页，当前为第1页。提纲引言网页设计概念工具软件网页设计原则网页设计理念网页的构成要素视觉流程色彩色彩联想网页设计中的标准尺寸网页的结构网页布局类型TC108分类信息网—视觉说明浅谈网页设计美学全文共27页，当前为第2页。网页设计概念（UI设计，人机界面设计）网页设计是近年来伴随WEB新兴发展起来的行业。实际上是一个基于屏幕显示的视觉系统整合设计。除了美学知识，它还包括其他领域：心理学、人机工程学、哲学、历史文化、科技发展等方面知识，设计合理的人与机器进行对话的界面——人机界面。网页设计的目的是满足使用者对信息的需求的同时，创造一种人性化的视觉环境，让使用者达到美好的视觉体验。浅谈网页设计美学全文共27页，当前为第3页。工具PhotoshopIllustratorFlashFireworks浅谈网页设计美学全文共27页，当前为第4页。网页设计原则1.考虑带宽;2.考虑适应不同浏览器.不同分辨率的情况，不同色域支持;3.注重色彩的搭配;4.让浏览者轻松找到需要的信息,网页内容便于阅读(清晰的视觉流程);6.提供良好交互性；7.简洁即为美。浅谈网页设计美学全文共27页，当前为第5页。网页设计理念内容和功能决定表现形式和界面设计。界面弱化，突出功能。模块化和可修改性强。浅谈网页设计美学全文共27页，当前为第6页。网页的构成要素网页的构成要素主要包括文字、图形、图像、标志、色彩等造型要素。浅谈网页设计美学全文共27页，当前为第7页。视觉流程是指界面设计对于用户的视觉引导，第一眼看哪，第二眼看哪，哪里视觉停留多一些，哪里少一些，这些都可以通过视觉流程的规划来实现。我们将视觉运动用于设计，从选取最佳视域、捕捉注意焦点开始，到视觉流向的诱导，流程秩序的规划，再到最后印象的留存为止，构成合理的空间定位，我们称之为设计的视觉流程。视觉流程简单的说是“从上到下”“从左至右”，一般上方和左方易受重视，我们欣赏画面的时候通常是首先通观全画，然后视线停留在某一感兴趣的点上（视觉焦点：例人，墙等等）。视觉中心的规律，画面中部容易成为视觉中心，大的图形容易成为视觉中心，对比较强的地方容易成为视觉中心（有对比才会有视觉中心，大小，虚实，远近，等等）。检测工具：眼动仪检测，数据说话。浅谈网页设计美学全文共27页，当前为第8页。浅谈网页设计美学全文共27页，当前为第9页。浅谈网页设计美学全文共27页，当前为第10页。色彩自然界中色彩有无数钟，但最基本的只有三种（红、黄、蓝），所有色彩都可由这三种色彩调和而成。专业上称“三原色或三基色”。（光也是由这三种构成）任何一种彩色具备三个特征：色相、明度和纯度。色相，指的是色彩的名称。色彩最基本的特征，是一种色彩区别另一种色彩的主要的因素。比如说紫色、绿色、黄色等等都代表了不同的色相。明度，指的是色彩的明暗程度。明度越大，色彩越亮，比如一些购物、儿童类网站，用的是一些鲜亮的颜色，让人感觉绚丽多姿，生机勃勃；明度越低，颜色越暗，主要用于一些游戏、探险类网站，充满神秘感。纯度，指色彩的鲜艳程度，纯度高的色彩纯、鲜亮。纯度底的色彩暗淡，含灰色。相近色：色环中三原色左右构成的相邻颜色，如绿与黄、绿与蓝。相近色的搭配给人的视觉效果很舒适，很自然。互补色：色环中相对的两种色彩，如红与绿、蓝与橙、紫与黄等。对于互补色，调整补色的亮度，一方加强、一方减弱，应用的好是很好搭配。比较醒目，鲜艳暖色系：红紫,红,红橙,橙,黄橙;暖色跟黑色搭配可以达到活泼、温馨的效果。暖色一般应用于购物类网站，电子商务网站，儿童类网站等等。冷色系：黄绿,绿,蓝绿,蓝,蓝紫;冷色一般跟白色搭配可以达到严肃、稳重、神秘的效果。冷色一般应用于一些高科技，游戏类网站。绿色，蓝色，蓝紫色等都属于冷色系列。中色系：黑白灰色彩均衡：意为每种色彩所占的比例、面积、位置要合理。网站要让人看上去舒适，协调，除了文字，图片等内容的合理排版，色彩的均衡也是相当重要的一个部分。浅谈网页设计美学全文共27页，当前为第11页。浅谈网页设计美学全文共27页，当前为第12页。浅谈网页设计美学全文共27页，当前为第13页。色彩联想红色：热情、吉祥、危险、活力……橙色：温暖、欢喜、热情、嫉妒……黄色：光明、希望、快活、发展、……绿色：和平、安全、生长、新鲜……蓝色：平静、悠久、理智、深远……紫色：优雅、高贵、庄重、神秘……黑色：严肃、刚健、恐怖、死亡……白色：纯洁、神圣、清净、光明……灰色：平凡、失意、谦逊……浅谈网页设计美学全文共27页，当前为第14页。浅谈网页设计美学全文共27页，当前为第15页。春

夏秋

冬浅谈网页设计美学全文共27页，当前为第16页。网页设计中的相关标准媒介就是显示屏幕。宽度：1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右

页面标准按800*600分辨率制作，实际尺寸为778*434px

页面长度原则上不超过3屏，宽度不超过1屏

广告尺寸：全尺寸为468*60px，半尺寸为234*60px，小为88*31px

另外120*90，120*60也是小图标的标准尺寸。每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K。浅谈网页设计美学全文共27页，当前为第17页。网页的结构页脚页眉导航内容浅谈网页设计美学全文共27页，当前为第18页。网页布局类型

1、“国”字型：

大型网站常用的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。2、拐角型：

这种结构与上一种其实只是形式上的区别，，一种很常见的类型是最上面是标题及广告，左侧是导航链接。三级页面。3、标题正文型：

这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

浅谈网页设计美学全文共27页，当前为第19页。“国”字型浅谈网页设计美学全文共27页，当前为第20页。拐角型

浅谈网页设计美学全文共27页，当前为第21页。标题正文型

浅谈网页设计美学全文共27页，当前为第22页。网页布局类型4、左右框架型：

左右为分别两页的框架结构，一般左面是导航链接，这种类型结构清晰，一目了然。论坛5、上下框架型：

与上面类似，区别仅仅在于是一种上下分为两页的框架。技术论坛，6、综合框架型：

上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。后台管理7、封面型：

这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接。常用在企业网站和个人主页，处理的好