网页设计原则.pptVIP

网页色彩案例分析 黄色主色调（导航栏） 蓝（多） 红（极少） 黑（中） 基色 基色 基色 蓝色主色调（大面积底色、多数文字） 黄 红（重点色） 黑 基色 基色 基色 蓝、绿主色调（大面积底色） 黄 橙 红 紫 基色 基色 基色 紫红主色调（导航栏、边框） 黄绿 黑色 基色 基色 基色 玫瑰红 黑色 白色 运用单一色（系） 基色 基色 基色 色块的集群化 重要信息可以运用不同颜色区块加以强调。 运用小色球或色块能造成集群化的效果，以协助视觉搜寻。 在背景图象上添加文本，一种较好的方法是使用相近色作为背景，补色作为文本色。 ●色彩的对比 基色 基色 基色 网页色彩反例分析 1、无主色调。 2、色彩过多、过杂。 3、色彩搭配不合理。 基色 基色 基色 网页版式的基本类型 ● 骨骼形 页首通栏，下面综合运用多种分栏方式 横向分栏版式 四 网页版面布局设计 ● 分割型 以图片吸引浏览者的注意力，右下角的文字也得以强调 页面右侧使用斜线再次分割，打破了呆板的感觉 ● 对称型 ●中轴型 中轴版式，给人以轻快、简洁之感 一般采用相对对称的手法，以避免呆板，左右对称的版式也较常见。 ● 曲线型 运用弧线在平稳中寻求动感 ● 焦点型 利用大面积的留白，使视觉中心的图形成为焦点 ● 将对比强烈的图片或文字置于页面的 视觉中心。 ● 利用视觉元素引导浏览者视线向中心 聚拢，形成向心的版式。 ● 视觉元素向外辐射，形成离心的版式。 ● 自由型版式打破规规矩矩，尽情挥洒设计。自由型的页面活 泼、轻快、美观漂亮。 ● 一般都是以图片为视觉中心制作的类似宣传海报，运用大量 精美图像。 ● 自由型 导航栏则作为次要的设计元素，自由摆布，起到点缀、修饰、均衡的作用。 布局的安排 点的布局 ● 艺术设计中的点，是感觉上的点，当它可见时就具备了 一定的面积。（一个单独而细小的形象 /文字，相比较而言） ● 页面中的点，由于大小、形态、位置的不同，产生的视觉 效果、心理作用也不同。 ● 点的排列所引起的视觉流动，引入了时间的因素，利用点的 大小、形状与排列距离的变化，可以使页面富于节奏韵律。 通过点的大小、主次引起浏览者的视觉流动。 四 网页版面布局设计 线的布局 ● 作为视觉元素的线，不仅有长度和方向上的变化，还有粗与细、虚与实、粗糙和光滑等变化，这些变化给人的视觉和心理以不同的感受。 ● 线的布局安排主要体现为线的空间分割，分割是版式设计的主要手段之一。 以消极的直线分割页面，使得画面清晰、有条理 随意的弧线增加了画面的活泼、明快感 布局的安排 面的布局 ● 面的布局主要体现为面的空间分割，经分割所产生的比例关系，是决定页面均衡、协调的重要因素。 ●面的形状有以下几种：方、圆、三角、多边形等。 利用积极或消极的线将页面分割成大小不一的面，产生空间的对比和节奏感。 ● 黄金分割 ●等间距分割 ●数学级数分割 ●判断分割 将不同画面的方形图以相同大小组织排列，求得秩序美感 布局的安排 ●线条和形状 ● 直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓。 ● 曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果。一般应用于青春、活泼的主页题材。 ● 把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力。 巧妙地利用曲线作为导航栏，创意活泼又生动 布局的安排 ● 为了兼容性，最好选用通用字体。 ●常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等。 ● 常用的英文字体有Arial、Times New Roman、Impact等。 ● 艺术字能为网页添色不少，但也不能随便地套用各种艺术字体，可做成图形文字。 ● 最适合于网页正文显示的字体大小为12磅左右 ● 内容比较多的网站，如许多新闻性网站，由于一个页面中要安排的的内容较多，通常采用9磅的字号。 通过文字大小疏密的调整，突出重点，层次分明 四网页文字设计 常见的文字编排形式有两端对齐、居中对齐、左对齐或右对齐和绕图排列。 右侧文字采用左对齐，参与页面分割，产生虚实相生的效果 文字与图片穿插排列，密集的文字形成块面，丰富了页面层次 四网页文字设计 五网页图形设计 图形的主体要清晰可见 图形的意义要简单明了，与网页主题紧密关联 图形内的文字要清楚容易辨认 图形内文字的装饰不要过分花哨，以免文字不易辨识 五网页图形设计 在制作图片时，单张图片不要超过20KB，每个页面的图片总量不超过60KB(一般情况下)。所有图片都必须减肥为小图片（100＊40）,一般可以控制在6KB以内，动画控制在15KB以下。 图像大小属性，可以在IMG标签中保存这个属性。这可以使网页显得很流畅，因为浏览器