网页设计课程3

1、网页设计基础教程 3 我们现在来讨论下网页设计相关的原则。只要在脑海中牢牢记住了这4项原则，你就一定可以设计出更加整洁漂亮的网页。网页设计原则 好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点，注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。 图片反差 当需要在很多小元素后面展示一个大尺寸的插图时，这种方法很有效。比如： 1.反差效果 这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。 当你眼睛看到这个页面的时候，首先你

2、会注意到什么？最有可能的就是盒子上面的那个星星了。跟 前面那张页面图片一样，它们都是通过用一张大图片和很少的颜色来制造一个视觉焦点。颜色反差 恰到好处地使用少量颜色，是网页中另一种制造视觉反差的有效方法。可以在网页的头部和文本拷贝中使用不同的颜色，也可以在一张图片或插图的颜色里面应用。 这个网站是极出色的一个所有设计原则的应用实例。关于颜色反差我们来看看它大大的黄色头部和小小的淡灰文字。排列、图片反差、重复和分类这几个原则做得都很彻底。字体反差 如果你想通过字体来产生反差效果，就应该避免使用2个很相像的字体外观和大小。很相像的字体会造成混淆，并让设计变得模糊。不过把字体大小弄得很不一样就会非常

3、有效果，或者是把字体最细和最粗的版本拼合到一起也同样有效。同样的，如果你将两种外形差别明显的两种字体排在一块，就会对它们带来的视觉冲击效果感到惊奇。注意看他们标语的大小和笔画 重复的设计元素可以使页面显得很连贯，还能提升品牌。在页面设计中，可以很好地达到这个目的的一个方式是在网页的头部和脚部重复放元素。看看下面这些例子吧。2.重复原则 这个页面在头部和底部都使用了很有创意的插画。使用了重复原则前后呼应。 界面风格和品牌部分都很明显地应用了这个原则。仔细看它用香蕉来当做列表前面的图标，还有头部、底部的森林插画。这个站也很好地运用了“反差原则”。 你的网站外观设计得很业余还是很专业，排列原则在其中

4、扮演了一个很复杂的角色。在设计网页时使用格栏。这么做可以让你的设计很干净，也可以提供一个很好的设计框架。3.排列原则 这个网站的版面排列很连贯也很引人注目。它将主要内容整齐地排在左边的做法很美观，尽管有些大级别的头部破坏了这个规则并排到了左侧边栏里面。对留空的大量使用和字体反差大小的使用都非常不错。 这个页面中使用的可视格栏非常有特色。里面的栏目设计良好，把所有包含内容都变得易于阅读。研究表明过宽的栏目会造成严重的阅读困难。在跟随那么宽的栏目中的文字时，你的眼睛会变得很累。最后一个原则是分类。只有在将相关元素分组，将无关元素分开的时候才会用到这个原则。假如你将所有东西都分到同一块文本块中，绝对

5、会摧毁用户的体验。这就是为什么使用头部标签和适当的留空是那么的重要。4.分类原则这个网站漂亮地将内容规整地组织到三个主要分类下，这些内容的定义既清晰又规整。这个网站结构良好。头部既整洁又简单明了。空白留的很好，内容分开放得很有逻辑。最终思想 当你脑中时刻惦记着这四项基本原则时，你会发现你的设计有了不可思议的改进。当然肯定还有许许多多别的东西也需要考虑，但是以反差、重复、排列和分类作为基础你的设计会取得长足进步。网页配色有八种基本的配色设计，分别叫做：无色设计 、类比设计、冲突设计、单色设计、分裂补色设计、原色设计、二次色设计、以及三次色三色设计.无色设计不用彩色，只用黑、白、灰色。类比设计在色相环上任选三个连续的色彩或其任一明色和暗色。冲突设计把一个颜色和它补色左边或右边的色彩配合起来。单色设计把一个颜色和任一个 或它所有的明、暗色配合起来。分裂补色设计把一个颜色和它补色任一边的颜色组合起来。原色设计把纯原色红、黄、蓝三种色结合起来二次色设计把二次色绿、紫、橙色结合起来。三次色三色设计 三次色三色设计是下面二个组合中的一个：红橙、黄绿、蓝紫色或是蓝绿，