《网页设计原则》PPT课件.ppt

网站设计原则电子商务网站开发基础,电子商务教研室 王玉玉,一网站的设计步骤,确定网站主题收集素材：图片、音频、文字、视频、动画等规划站点结构：网站的结构、栏目的设置、网站的风格、网站导航、颜色搭配、版面布局、文字图片应用等网页设计及开发网站上传及推广网站的更新维护,二网站结构规划,善于建立目录结构 一般利用文件夹来管理文档。首先为站点创建一个根文件夹（根目录），用于存放网站的所有内容，再在根文件夹内建立几个文件夹，再将文档分门别类地存储到相应的文件夹下。若站点较大，可创建多级子文件夹，先按栏目分类，在栏目里再分类。目录层次不宜太深，一般不要超过三层。（链接关系清晰直观“三次点击”，通过三次点击找到相关信息）维护文件目录，最好在Dreamweaver中进行，如文件的改名等，保证相关的链接正常。,二网站结构规划,使用合理的文件名称 不要使用特殊符号命名，最好用字母和数字。因有些服务器不认识这些特殊符号，会导致文件链接出错。不要用汉字作为文件名。因为很多web服务器或浏览网页的用户使用英文的操作系统，对中文支持不好，称为乱码，中文的文件名会导致浏览错误或访问失败。所有文件名建议用小写。因为Internet上大多数服务器的操作系统为UNIX类，对大小写是敏感的，同样会出现文件调用出错或链接不正常。文件名最好有一定的意义。容易理解，便于日后的修改和维护。,二网站结构规划,网页的适应性 即在不同系统、不同浏览器和不同分辨率的适应能力。网页的尺寸通常以像素为单位，显示器的分辨率通常为1024*768或800*600，网页宽度最好在760770像素之间，这样在两种分辨率下都能达到较佳的视觉效果，一般不要超过780，一定不要让用户横向拖页面。向下拖动页面是唯一给网页增加更多内容的方法。一般不要让访问者拖动页面超过三屏。如果内容多，最好通过链接的形式方便浏览。避免滥用动态技术。动态技术和图片、音乐文件相似，即体积大、浏览慢，所以不要用的太过多样和复杂。,二网站结构规划,规划站点的浏览机制 网站导航要清晰防止空链接、死链接创建返回主页链接显示网站简明目录结构（应该在主页或任何一个页面上，提供站点的简明目录结构，引导用户从一个页面快速进入到其他的页面）反馈（网站发布后，多少会存在问题，从用户那里获得建议非常重要，应该提供联系途径，如公布管理员等版权信息，创建电子邮件链接等）,网页设计原则电子商务网站开发基础,电子商务教研室 王玉玉,一网页设计的基本原则,主题内容明确主题选材要小而精最好选择自己擅长或感兴趣的内容选题不要太滥（到处可见），目标定位不宜太高页面下载速度快操作使用方便链接无错误网页特效宁少勿滥保证页面兼容,二网站风格设计,确信风格是建立在有价值的内容之上需要彻底弄清网站要给人的印象是什么在明确印象后开始努力建立和加强这种印象,风格就是与众不同,二网站风格设计,将网站标志logo，尽可能的放在每个页面上最突出的位置。突出网站标准色彩。文字的链接色彩，图片的主色彩、背景色、边框等色彩尽量使用与标准色彩一致的色彩。突出网站的标准字体。在关键的标题、菜单和图片里使用统一的标准字体。设计一条朗朗上口的宣传标语，把它放在网站的横幅里，或放在醒目的位置上以体现本网站的特色。相同类型的图像采用相同效果，比如阴影效果的方向、厚度、模糊度都一样。版面设计要一致导航条的风格要一致使用自己设计的花边、线条或点。展示网站的荣誉或成功作品告诉网友关于个人真实的故事或想法使用CSS可以更好地提高网页创作效率，同时可以方便地保持网页风格的统一。,红色是一种容易给人造成视觉疲劳的颜色，给人以热情、活力的感觉。在很多网站中，红色担任的角色都是情调色。橙色也是一种激奋的颜色，常用于某些时尚、新潮的网站中，在商业网站中也常用橙色，既能表现出青春的活力，也有沉稳老练的效果。黄色给人以明快、快活的感觉，也是站点配色中常用的颜色。绿色是具有黄色和蓝色两种成分的颜色。在绿色中，将黄色的膨胀感与蓝色的收缩感相融合，将黄色的温暖感与蓝色的寒冷感相抵消，这样绿色是一种柔顺、恬静、优美的颜色，总能给人宁静和希望的感觉。蓝色的色感冷清，性格朴实而内向，是一种有助于人头脑冷静的颜色。蓝色作为页面的主色，会给人凉爽、清新、专业的感觉，因此多用于商业网站。,三网页色彩设计,1、色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。2、色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。3、色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。4、色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。,三网页色彩设计,色环实质上就是在彩色光谱中所见的长条形的色彩序列，只是将首尾连接在一起，使红色连接到另一端的紫色。色环通常包括 12 种不同的颜色。这12 种不同的颜色被称为基本色。,“三原色”从定义上讲，三原色是能够按照一些数量规定合成其他任何一种颜 色的基色。在上小学时，你可能就知道了三原色：红、黄、蓝。但是如果你有喷墨打 印机的话，花点时间把它的盖子打开，看看它的墨盒。你能看到红、黄、蓝吗？不能！你可能看到的是四种墨色：蓝绿（青）色、红紫（洋红）色、黄色和黑色。,光的三原色 RGB(红绿蓝)美术三原色 RYB（红黄蓝）印刷三原色 CMY(青洋红黄)在光学系统中，所有颜色由红、绿、蓝三种颜色按不同的灰度（亮度）混合而成。于是在描述位图时有“8位色”“16位色”“32为色”，2的8次方亮度；2的16次方亮度；2的32次方亮度。印刷中，油墨是反色光的，所以组成的基础颜色和色光刚好相反（如同底片同相片的颜色对比）。而红黄蓝是美术三原色，是调不出来的。而其它的颜色是可以用三原色调出来。这样就理解了。RGB，光的三原色是设备显示的基础；CMY，油墨三原色是印刷中图像再现的色彩基础；而红、黄、蓝是在美术中调色的基本颜色，是人类色彩系统的理论三原色。,Photoshop软件等软件主要是用于制作网页、电脑作品（面向显示器）以及印刷作品（面向纸张），所以色彩系统采用的色谱环（红对青 黄对蓝）。在coreldraw中，基础调色系统也是一样的，而coreldraw的混合器是面向美术的调色方式，所以其色环中的红色对绿色，这才是真正的“对比色”（互补色)。,美术三原色 RYB（红黄蓝）,光的三原色 RGB(红绿蓝),常见的网页配色方案有近似色、补充色、分离补色等。近似色是色环上已给定的颜色临近的任何的一种颜色，如果您以橙色开始并想得到它的两个相似色，就选定红色和黄色。使用相似色的配色方案可以提供颜色的协调和交融，类似于在自然界中所见到的那样。互补色也称为对比色（反差最大）。互补色在色环上相互正对。如果想使网站中的色彩强烈突出、富有冲击力的话，可以选择对比色。比如你正在组合一幅柠檬图片，用蓝色背景将使柠檬更加突出。分离补色可由两种或三种颜色构成。选择一种颜色，在色环的另一边找到它的互补色，然后使用该互补色两边的一种或两种颜色。分离补色的搭配可以起到类似补充色的强烈对比作用，但有近似色的缓冲，可以使页面效果更加柔和。,三网页色彩设计,组色组色是色环上距离相等的任意三种颜色。当组色被用作一个色彩主题时，会对浏览者造成紧张的情绪。因为三种颜色形成对比。暖色暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋 予温暖、舒适和活力，它们也产生了一种色彩向浏览者显示或移动，并 从页面中突出出来的可视化效果。冷色 冷色来自于蓝色色调。譬如蓝色、青色和绿色。这些颜色将对色彩 主题起到冷静的作用，它们看起来有一种从浏览者身上收回来的效果，于是它们用作页面的背景比较好。,色相指色彩的相貌的统称 明度指色彩的明暗程度或深浅程度 纯度指色彩的鲜浊程度，又称饱和度。,三网页色彩设计,色彩对比,两种以上的色彩，以空间或时间关系相比较，能比较出明显的差别，并产生比较作用，被称为色彩对比。、色相对比 因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。将相同的橙色，放在红色或黄色上，我们将会发现，在红色上的橙色会有偏黄的感觉，因为橙色是由红色和黄色调成的，当他和红色并列时，相同的成份被调和而相异部份被增强，所以看起来比单独时偏黄，以其他色彩比较也会有这种现象，我们称为色名对比。除了色感偏移之外，对比的两色，有时会发生互相色渗的现象，而影响相隔界线的视觉效果，当对比的两色，具有相同的彩度和明度时，对比的效果越明显，两色越接近补色，对比效果越强烈。、明度对比 因明度之间的差别形成的对比。（柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度）。明度对比 将相同的色彩，放在黑色和白色上，比较色彩的感觉，会发现黑色上的色彩感觉比较亮，放在白色上的色彩感觉比较暗，明暗的对比效果非常强烈明显，对配色结果产生的影响，明度差异很大的对比，会让人有不安的感觉。、纯度(饱和度)对比 一种颜色与另一种更鲜艳的颜色相比时，会感觉不太鲜明，但与不鲜艳的颜色相比时，则显得鲜明，这种色彩的对比便称为纯度对比。,、补色对比 将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比。（视觉的残像现象明显）。、冷暖对比 由于色彩感觉的冷暖差别而形成的色彩对比，称为冷暖对比。（红、橙、黄使人感觉温暖；蓝、蓝绿、蓝紫使人感觉寒冷；绿与紫介与其间），另外，色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。,色彩的运用先谈谈黑白灰色彩的应用，因为黑白灰色彩是万能色，可以跟任意一种色彩搭配。当你为某种色彩的搭配苦恼的时候，不防试试用黑白灰。当你觉得两种色彩的搭配不协调，试试加入黑色，或者灰色，或许会有意想不到的效果哦。对一些明度较高的网站，配以黑色，可以适当地降低其明度。白色是网站用的最普遍的一种颜色。很多网站甚至留出大块的白色空间，作为网站的一个组成部分。这就是留白艺术。很多设计性网站较多运用留白艺术。留白，给人一个遐想的空间，让人感觉心情舒适，畅快。恰当的留白对于协调页面的均衡起到相当大的作用。确定网站的主题色一个网站不可能单一的运用一种颜色，让人感觉单调，乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮，花俏。一个网站必须有一种或两种主题色，不至于让客户迷失方向，也不到于单调，乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。一个页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。另外哪种因素占主要地位，是明度，纯度还是色相。,色彩的搭配1、网页标题网页标题是网站的指路灯，浏览者要在网页间跳转，要了解网站的结构，网站的内容，都必须通过导航或者页面中的一些小标题。所以我们可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰明了，层次分明。想往哪里走都不会迷失方向。2、网页链接一个网站不可能只是单一的一页，所以文字与图片的链接是网站中不可缺少的一部分。这里特别指出文字的链接，因为链接区别于文字，所以链接的颜色不能跟文字的颜色一样。现代人的生活节奏相当快，不可能浪费太多的时间在寻找你网站的链接上。设置了独特的链接颜色，让人感觉他的独特性，自然而然好奇心必然趋使他移动鼠标，点击鼠标。3、网页文字如果一个网站用了背景颜色，必须要考虑到背景颜色的用色，与前景文字的搭配等问题。一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色。让人一目了然。当然，有些网站为了让浏览者对网站留有深刻的印象，他在背景上作文章。比如一个空白页的某一个部分用了很亮的一个大色块，是不是让你豁然开朗呢！此时他为了吸引浏览者的视线，突出的是背景，所以文字就要显得暗一些，这样文字才能跟背景分离开来，便于浏览者阅读文字。关于文字的颜色：三种颜色以内；在背景图象上添加文本，一种较好的方法是使用相近色作为背景，补色作为文本色。4、网页标志网页标志是宣传网站最重要的部分之一，所以这两个部分一定要在页面上突迎而出。我们将LOGO和BANNER做的鲜亮一些，也就是色彩方面跟网页的主题色分离开来。有时候为了更突出，也可以使用与主题色相反的颜色。重要信息可以运用不同颜色区块强调；运用小色球或色块能造成集群化的效果，以协助视觉搜寻。,1、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。2、用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。如用蓝色和黄色，整个页面色彩丰富但不花稍。3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择自定义，然后在色库中选就可以了。4、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。在网页配色中，注意的是：1.不要将所有颜色都用到，尽量控制在三种色彩以内。2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容,网页色彩搭配的技巧,网页配色之黄金分割法,制作网页时网页背景与前景的字体配色比较麻烦的。如果背景颜色与字体颜色的搭配不合理，就会使网页效果大打折扣。如果背景色与字体色的对比度太大，就会显得太刺眼；如果对比度太小，就会使网页风格变得过于沉闷。使用“网页配色之黄金分割法”之后，可以大大节省的时间。黄金分割法的基本原理是这样的：把颜色的对比度（背景与前景）调节在0.618比例附近的位置上。在PS里亮度是以百分比来划分的，在HSB模式里的B表示的就是亮度值。,根据它的原理，就可以推算出采用百分数值来看，100%*0.618=62%。当背景颜色的亮度值为038%时，字体颜色就加上62%，当背景颜色为62100%时，字体颜色就减去62%。例如：,HSB色彩模式把颜色分为色相、饱和度(S)、明度(B)三个因素。所谓饱和度相当于家庭电视机的色彩浓度，饱和度高色彩较艳丽。饱和度低色彩就接近灰色。明度也称为亮度，等同于彩色电视机的亮度，亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。如果我们需要一个浅绿色，那么先将H拉到绿色，再调整S和B到合适的位置。一般浅色的饱和度较低，亮度较高。如果需要一个深蓝色，就将H拉到蓝色，再调整S和B到合适的位置。一般深色的饱和度高而亮度低。如下左图和中图。这种方式选取的颜色修改方便，比如要将深蓝色加亮，只需要移动B就可以了，既方便又直观。如果要选择灰度，只需要将S放在0%，然后拉动B滑杆就可以如同灰度模式那样选择了。如下右图。注意，HSB方式得到的灰度，与灰度滑块K的数值是不同的。我们在Photoshop中选择灰度时候，应以灰度滑块为准。再看一下Photoshop的拾色器，拾色器的显示方式其实就是HSB取色方式。色谱就是色相，而大框就包含了饱和度和明度(横方向是饱和度，竖方向是明度)。,网页色彩案例分析,黄色主色调（导航栏）蓝（多）红（极少）黑（中）,蓝色主色调（大面积底色、多数文字）黄红（重点色）黑,蓝、绿主色调（大面积底色）黄橙红紫,紫红主色调（导航栏、边框）黄绿黑色,玫瑰红黑色白色,运用单一色（系）,色块的集群化,重要信息可以运用不同颜色区块加以强调。,运用小色球或色块能造成集群化的效果，以协助视觉搜寻。,网页色彩反例分析,1、无主色调。2、色彩过多、过杂。3、色彩搭配不合理。,网页版式的基本类型,四 网页版面布局设计,自由型版式打破规规矩矩，尽情挥洒设计。自由型的页面活泼、轻快、美观漂亮。一般都是以图片为视觉中心制作的类似宣传海报，运用大量精美图像。,布局的安排,点的布局 艺术设计中的点，是感觉上的点，当它可见时就具备了 一定的面积。（一个单独而细小的形象/文字，相比较而言）页面中的点，由于大小、形态、位置的不同，产生的视觉 效果、心理作用也不同。点的排列所引起的视觉流动，引入了时间的因素，利用点的 大小、形状与排列距离的变化，可以使页面富于节奏韵律。,四 网页版面布局设计,线的布局 作为视觉元素的线，不仅有长度和方向上的变化，还有粗与细、虚与实、粗糙和光滑等变化，这些变化给人的视觉和心理以不同的感受。线的布局安排主要体现为线的空间分割，分割是版式设计的主要手段之一。,以消极的直线分割页面，使得画面清晰、有条理,随意的弧线增加了画面的活泼、明快感,布局的安排,面的布局 面的布局主要体现为面的空间分割，经分割所产生的比例关系，是决定页面均衡、协调的重要因素。面的形状有以下几种：方、圆、三角、多边形等。,布局的安排,线条和形状 直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓。曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果。一般应用于青春、活泼的主页题材。把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力。,巧妙地利用曲线作为导航栏，创意活泼又生动,布局的安排,为了兼容性，最好选用通用字体。常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等。常用的英文字体有Arial、Times New Roman、Impact等。艺术字能为网页添色不少，但也不能随便地套用各种艺术字体，可做成图形文字。,最适合于网页正文显示的字体大小为12磅左右 内容比较多的网站，如许多新闻性网站，由于一个页面中要安排的的内容较多，通常采用9磅的字号。,通过文字大小疏密的调整，突出重点，层次分明,四网页文字设计,常见的文字编排形式有两端对齐、居中对齐、左对齐或右对齐和绕图排列。,四网页文字设计,五网页图形设计,图形的主体要清晰可见图形的意义要简单明了，与网页主题紧密关联图形内的文字要清楚容易辨认图形内文字的装饰不要过分花哨，以免文字不易辨识,五网页图形设计,在制作图片时，单张图片不要超过20KB，每个页面的图片总量不超过60KB(一般情况下)。所有图片都必须减肥为小图片（10040）,一般可以控制在6KB以内，动画控制在15KB以下。图像大小属性，可以在IMG标签中保存这个属性。这可以使网页显得很流畅，因为浏览器可以在图像被下载之前在屏幕上显示整个网页。尽可能经常更换网站上的图片，人们更愿意点击的是图片而不是文本。,