网页设计原则.ppt

1、网站设计原则电子商务网站开发基础,电子商务教研室 王玉玉,一网站的设计步骤,确定网站主题 收集素材：图片、音频、文字、视频、动画等 规划站点结构：网站的结构、栏目的设置、网站的风格、网站导航、颜色搭配、版面布局、文字图片应用等 网页设计及开发 网站上传及推广 网站的更新维护,二网站结构规划,善于建立目录结构 一般利用文件夹来管理文档。首先为站点创建一个根文件夹（根目录），用于存放网站的所有内容，再在根文件夹内建立几个文件夹，再将文档分门别类地存储到相应的文件夹下。若站点较大，可创建多级子文件夹，先按栏目分类，在栏目里再分类。 目录层次不宜太深，一般不要超过三层。（链接关系清晰直观“三次点击”

2、，通过三次点击找到相关信息） 维护文件目录，最好在Dreamweaver中进行，如文件的改名等，保证相关的链接正常。,二网站结构规划,使用合理的文件名称 不要使用特殊符号命名，最好用字母和数字。因有些服务器不认识这些特殊符号，会导致文件链接出错。 不要用汉字作为文件名。因为很多web服务器或浏览网页的用户使用英文的操作系统，对中文支持不好，称为乱码，中文的文件名会导致浏览错误或访问失败。 所有文件名建议用小写。因为Internet上大多数服务器的操作系统为UNIX类，对大小写是敏感的，同样会出现文件调用出错或链接不正常。 文件名最好有一定的意义。容易理解，便于日后的修改和维护。,二网站结构规划

3、,网页的适应性 即在不同系统、不同浏览器和不同分辨率的适应能力。 网页的尺寸通常以像素为单位，显示器的分辨率通常为1024*768或800*600，网页宽度最好在760770像素之间，这样在两种分辨率下都能达到较佳的视觉效果，一般不要超过780，一定不要让用户横向拖页面。 向下拖动页面是唯一给网页增加更多内容的方法。一般不要让访问者拖动页面超过三屏。如果内容多，最好通过链接的形式方便浏览。 避免滥用动态技术。动态技术和图片、音乐文件相似，即体积大、浏览慢，所以不要用的太过多样和复杂。,二网站结构规划,规划站点的浏览机制 网站导航要清晰 防止空链接、死链接 创建返回主页链接 显示网站简明目录结构

4、（应该在主页或任何一个页面上，提供站点的简明目录结构，引导用户从一个页面快速进入到其他的页面） 反馈（网站发布后，多少会存在问题，从用户那里获得建议非常重要，应该提供联系途径，如公布管理员等版权信息，创建电子邮件链接等）,网页设计原则电子商务网站开发基础,电子商务教研室 王玉玉,一网页设计的基本原则,主题内容明确 主题选材要小而精 最好选择自己擅长或感兴趣的内容 选题不要太滥（到处可见），目标定位不宜太高 页面下载速度快 操作使用方便 链接无错误 网页特效宁少勿滥 保证页面兼容,二网站风格设计,确信风格是建立在有价值的内容之上 需要彻底弄清网站要给人的印象是什么 在明确印象后开始努力建立和加强

5、这种印象,风格就是与众不同,二网站风格设计,将网站标志logo，尽可能的放在每个页面上最突出的位置。 突出网站标准色彩。文字的链接色彩，图片的主色彩、背景色、边框等色彩尽量使用与标准色彩一致的色彩。 突出网站的标准字体。在关键的标题、菜单和图片里使用统一的标准字体。 设计一条朗朗上口的宣传标语，把它放在网站的横幅里，或放在醒目的位置上以体现本网站的特色。 相同类型的图像采用相同效果，比如阴影效果的方向、厚度、模糊度都一样。 版面设计要一致 导航条的风格要一致 使用自己设计的花边、线条或点。 展示网站的荣誉或成功作品 告诉网友关于个人真实的故事或想法 使用CSS可以更好地提高网页创作效率，同时可

6、以方便地保持网页风格的统一。,红色是一种容易给人造成视觉疲劳的颜色，给人以热情、活力的感觉。在很多网站中，红色担任的角色都是情调色。 橙色也是一种激奋的颜色，常用于某些时尚、新潮的网站中，在商业网站中也常用橙色，既能表现出青春的活力，也有沉稳老练的效果。 黄色给人以明快、快活的感觉，也是站点配色中常用的颜色。 绿色是具有黄色和蓝色两种成分的颜色。在绿色中，将黄色的膨胀感与蓝色的收缩感相融合，将黄色的温暖感与蓝色的寒冷感相抵消，这样绿色是一种柔顺、恬静、优美的颜色，总能给人宁静和希望的感觉。 蓝色的色感冷清，性格朴实而内向，是一种有助于人头脑冷静的颜色。蓝色作为页面的主色，会给人凉爽、清新、专业

7、的感觉，因此多用于商业网站。,三网页色彩设计,1、色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。 2、色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。 3、色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 4、色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。,三网页色彩设计,色环实质上就是在彩色光谱中所见的长条形的色彩序列，只是将首尾连接在一起，使红色连接到另一端的紫色。色环通常包括 12 种不同的颜色。 这12 种不同的颜色被称为基本色。,“三原色”从定义上讲，三原色是能够按照一些数量

8、规定合成其他任何一种颜 色的基色。 在上小学时，你可能就知道了三原色：红、黄、蓝。 但是如果你有喷墨打 印机的话，花点时间把它的盖子打开，看看它的墨盒。你能看到红、黄、 蓝吗？不能！你可能看到的是四种墨色：蓝绿（青）色、红紫（洋红） 色、黄色和黑色。,光的三原色 RGB(红绿蓝) 美术三原色 RYB（红黄蓝） 印刷三原色 CMY(青洋红黄) 在光学系统中，所有颜色由红、绿、蓝三种颜色按不同的灰度（亮度）混合而成。于是在描述位图时有“8位色” “16位色” “32为色”，2的8次方亮度；2的16次方亮度；2的32次方亮度。 印刷中，油墨是反色光的，所以组成的基础颜色和色光刚好相反（如同底片同相片

9、的颜色对比）。 而红黄蓝是美术三原色，是调不出来的。而其它的颜色是可以用三原色调出来。 这样就理解了。RGB，光的三原色是设备显示的基础；CMY，油墨三原色是印刷中图像再现的色彩基础；而红、黄、蓝是在美术中调色的基本颜色，是人类色彩系统的理论三原色。,Photoshop软件等软件主要是用于制作网页、电脑作品（面向显示器）以及印刷作品（面向纸张），所以色彩系统采用的色谱环（红对青 黄对蓝）。在coreldraw中，基础调色系统也是一样的，而coreldraw的混合器是面向美术的调色方式，所以其色环中的红色对绿色，这才是真正的“对比色”（互补色)。,美术三原色 RYB（红黄蓝）,光的三原色 RGB

10、(红绿蓝),常见的网页配色方案有近似色、补充色、分离补色等。 近似色是色环上已给定的颜色临近的任何的一种颜色，如果您以橙色开始并想得到它的两个相似色，就选定红色和黄色。使用相似色的配色方案可以提供颜色的协调和交融，类似于在自然界中所见到的那样。 互补色也称为对比色（反差最大）。互补色在色环上相互正对。如果想使网站中的色彩强烈突出、富有冲击力的话，可以选择对比色。比如你正在组合一幅柠檬图片，用蓝色背景将使柠檬更加突出。 分离补色可由两种或三种颜色构成。选择一种颜色，在色环的另一边找到它的互补色，然后使用该互补色两边的一种或两种颜色。分离补色的搭配可以起到类似补充色的强烈对比作用，但有近似色的缓冲

11、，可以使页面效果更加柔和。,三网页色彩设计,组色组色是色环上距离相等的任意三种颜色。当组色被用作一个色彩主题时，会对浏览者造成紧张的情绪。因为三种颜色形成对比。 暖色暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋 予温暖、舒适和活力，它们也产生了一种色彩向浏览者显示或移动，并 从页面中突出出来的可视化效果。 冷色 冷色来自于蓝色色调。譬如蓝色、青色和绿色。这些颜色将对色彩 主题起到冷静的作用，它们看起来有一种从浏览者身上收回来的效果， 于是它们用作页面的背景比较好。, 色相指色彩的相貌的统称 明度指色彩的明暗程度或深浅程度 纯度指色彩的鲜浊程度，又称饱和度。,三网页色彩设计,色彩对

12、比,两种以上的色彩，以空间或时间关系相比较，能比较出明显的差别，并产生比较作用，被称为色彩对比。 、色相对比 因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。将相同的橙色，放在红色或黄色上，我们将会发现，在红色上的橙色会有偏黄的感觉，因为橙色是由红色和黄色调成的，当他和红色并列时，相同的成份被调和而相异部份被增强，所以看起来比单独时偏黄，以其他色彩比较也会有这种现象，我们称为色名对比。 除了色感偏移之外， 对比的两色， 有时会发生互相色渗的现象， 而影响相隔界线的视觉效果， 当对比的两色， 具有相同的彩度和明度时，

13、对比的效果越明显， 两色越接近补色， 对比效果越强烈。 、明度对比 因明度之间的差别形成的对比。（柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度）。明度对比 将相同的色彩，放在黑色和白色上，比较色彩的感觉，会发现黑色上的色彩感觉比较亮，放在白色上的色彩感觉比较暗，明暗的对比效果非常强烈明显，对配色结果产生的影响，明度差异很大的对比， 会让人有不安的感觉。 、纯度(饱和度)对比 一种颜色与另一种更鲜艳的颜色相比时，会感觉不太鲜明，但与不鲜艳的颜色相比时，则显得鲜明，这种色彩的对比便称为纯度对比。,、补色对比 将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉

14、更为鲜明，纯度增加，称为补色对比。（视觉的残像现象明显）。 、冷暖对比 由于色彩感觉的冷暖差别而形成的色彩对比，称为冷暖对比。（红、橙、黄使人感觉温暖；蓝、蓝绿、蓝紫使人感觉寒冷；绿与紫介与其间），另外，色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。,色彩的运用 先谈谈黑白灰色彩的应用，因为黑白灰色彩是万能色，可以跟任意一种色彩搭配。当你为某种色彩的搭配苦恼的时候，不防试试用黑白灰。当你觉得两种色彩的搭配不协调，试试加入黑色，或者灰色，或许会有意想不到的效果哦。 对一些明度较高的网站，配以黑色，可以适当地降低其明度。白色是网站用的最普遍的一种颜色。很多网站甚至留

15、出大块的白色空间，作为网站的一个组成部分。这就是留白艺术。很多设计性网站较多运用留白艺术。留白，给人一个遐想的空间，让人感觉心情舒适，畅快。恰当的留白对于协调页面的均衡起到相当大的作用。 确定网站的主题色一个网站不可能单一的运用一种颜色，让人感觉单调，乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮，花俏。一个网站必须有一种或两种主题色，不至于让客户迷失方向，也不到于单调，乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。一个页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。另

16、外哪种因素占主要地位，是明度，纯度还是色相。,色彩的搭配 1、网页标题网页标题是网站的指路灯，浏览者要在网页间跳转，要了解网站的结构，网站的内容，都必须通过导航或者页面中的一些小标题。所以我们可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰明了，层次分明。想往哪里走都不会迷失方向。 2、网页链接一个网站不可能只是单一的一页，所以文字与图片的链接是网站中不可缺少的一部分。这里特别指出文字的链接，因为链接区别于文字，所以链接的颜色不能跟文字的颜色一样。现代人的生活节奏相当快，不可能浪费太多的时间在寻找你网站的链接上。设置了独特的链接颜色，让人感觉他的独特性，自然而然好奇心必然趋使

17、他移动鼠标，点击鼠标。 3、网页文字如果一个网站用了背景颜色，必须要考虑到背景颜色的用色，与前景文字的搭配等问题。一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色。让人一目了然。当然，有些网站为了让浏览者对网站留有深刻的印象，他在背景上作文章。比如一个空白页的某一个部分用了很亮的一个大色块，是不是让你豁然开朗呢！此时他为了吸引浏览者的视线，突出的是背景，所以文字就要显得暗一些，这样文字才能跟背景分离开来，便于浏览者阅读文字。 关于文字的颜色：三种颜色以内；在背景图象上添加文本，一种较好的方法是使用相近色作为背景，补色作为文本色。 4、网页标志网页标志是宣传网

18、站最重要的部分之一，所以这两个部分一定要在页面上突迎而出。我们将LOGO和BANNER做的鲜亮一些，也就是色彩方面跟网页的主题色分离开来。有时候为了更突出，也可以使用与主题色相反的颜色。 重要信息可以运用不同颜色区块强调； 运用小色球或色块能造成集群化的效果，以协助视觉搜寻。,1、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。 2、用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。如用蓝色和黄色，整个页面色彩丰富但不花稍。 3、用

19、一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择自定义，然后在色库中选就可以了。 4、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。 在网页配色中，注意的是： 1.不要将所有颜色都用到，尽量控制在三种色彩以内。 2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容,网页色彩搭配的技巧,网页配色之黄金分割法,制作网页时网页背景与前景的字体配色比较麻烦的。如果背景颜色与字体颜色的搭配不合理，就会使网页效果大打折扣。如果背景色与字体色

20、的对比度太大，就会显得太刺眼；如果对比度太小，就会使网页风格变得过于沉闷。 使用“网页配色之黄金分割法”之后，可以大大节省的时间。 黄金分割法的基本原理是这样的：把颜色的对比度（背景与前景）调节在0.618比例附近的位置上。 在PS里亮度是以百分比来划分的，在HSB模式里的B表示的就是亮度值。,根据它的原理，就可以推算出采用百分数值来看，100%*0.618=62%。当背景颜色的亮度值为038%时，字体颜色就加上62%，当背景颜色为62100%时，字体颜色就减去62%。例如：,HSB色彩模式把颜色分为色相、饱和度(S) 、明度(B)三个因素。所谓饱和度相当于家庭电视机的色彩浓度，饱和度高色彩较

21、艳丽。饱和度低色彩就接近灰色。明度也称为亮度，等同于彩色电视机的亮度，亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。 如果我们需要一个浅绿色，那么先将H拉到绿色，再调整S和B到合适的位置。一般浅色的饱和度较低，亮度较高。如果需要一个深蓝色，就将H拉到蓝色，再调整S和B到合适的位置。一般深色的饱和度高而亮度低。如下左图和中图。这种方式选取的颜色修改方便，比如要将深蓝色加亮，只需要移动B就可以了，既方便又直观。 如果要选择灰度，只需要将S放在0%，然后拉动B滑杆就可以如同灰度模式那样选择了。如下右图。注意，HSB方式得到的灰度，与灰度滑块K的数值是不同的。我们在Photoshop

22、中选择灰度时候，应以灰度滑块为准。 再看一下Photoshop的拾色器，拾色器的显示方式其实就是HSB取色方式。色谱就是色相，而大框就包含了饱和度和明度(横方向是饱和度，竖方向是明度)。,网页色彩案例分析,黄色主色调（导航栏） 蓝（多） 红（极少） 黑（中）,蓝色主色调（大面积底色、多数文字） 黄 红（重点色） 黑,蓝、绿主色调（大面积底色） 黄 橙 红 紫,紫红主色调（导航栏、边框） 黄绿 黑色,玫瑰红 黑色 白色,运用单一色（系）,色块的集群化,重要信息可以运用不同颜色区块加以强调。,运用小色球或色块能造成集群化的效果，以协助视觉搜寻。,网页色彩反例分析,1、无主色调。 2、色彩过多、过杂

23、。 3、色彩搭配不合理。,网页版式的基本类型,四 网页版面布局设计, 自由型版式打破规规矩矩，尽情挥洒设计。自由型的页面活 泼、轻快、美观漂亮。 一般都是以图片为视觉中心制作的类似宣传海报，运用大量 精美图像。,布局的安排,点的布局 艺术设计中的点，是感觉上的点，当它可见时就具备了 一定的面积。（一个单独而细小的形象 /文字，相比较而言） 页面中的点，由于大小、形态、位置的不同，产生的视觉 效果、心理作用也不同。 点的排列所引起的视觉流动，引入了时间的因素，利用点的 大小、形状与排列距离的变化，可以使页面富于节奏韵律。,四 网页版面布局设计,线的布局 作为视觉元素的线，不仅有长度和方向上的变化，还有粗与细、虚与实、粗糙和光滑等变化，这些变化给人的视觉和心理以不同的感受。 线的布局安排主要体现为线的空间分割，分割是版式设计的主要手段之一。,以消极的直线分割页面，使得画面清晰、有条理,随意的弧