网页界面设计与制作 作者 邓文达 贠亚男 27999-第6章 网页界面中版式的构成与设计.pptVIP

第6章 网页界面中版式的 构成与设计 课堂学习目标： ? 了解版式在网页界面设计中的作用 ? 掌握版式设计的造型元素和形式原理 ? 了解版式设计的视觉因素 ? 掌握版式构成的类型分析 6.1 版式在网页界面设计中的作用 · 网页界面的版式设计，是将文字、图形图像、色彩、动画、视频图像等网页界面的传达要素，根据特定的内容和主题，在网页所限定的范围中，运用造型元素和形式原理进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。 · 这一过程实际上是创造性、艺术性地传达信息的过程。 · 版式在网页界面设计中的作用可以概括为实用功能和审美功能。 1．实用功能 · 版式设计的实用功能，主要是为了满足人们的生活和工作需求，让人机交流能顺利进行。 · 我们知道，人们上网的目的，不外乎获取信息、交友、娱乐、购物这几种，具有很强的自主性、选择性。 · 一旦遇到外部环境中带有负面作用的刺激，就会中止浏览，转向其他页面或退出。 · 而版式设计从人机界面的角度将这种负面作用降到最低，提供尽可能多的正面影响，它让人机对话变得轻松，促使人们迅速达到自已的目的。 · 这种正面作用可以归纳为以下几点： （1）主次分明，重点突出 （2）导航清晰，浏览便利 （3）布局合理，逻辑性强 2．审美功能 · 与实用功能相对应，版式设计的审美功能是为了满足人们的心理需求。 · 人们在内心深处总是存在对美的渴望和追求，他们在接受网页信息的同时，由版式设计产生了美的遐想、美的激情，获得了快乐和艺术性感染，这就是发自内心的审美体验。 · 版式设计利用心理攻势撞击着人们的心灵情感，在设计师和观众之间架起了一座桥梁，达到近距离的沟通。 · 版式设计的审美性体现在以下两方面。 （1）增强整体感 （2）增加表现性 6.2 版式设计的版面空间与第一屏 6.2.1 版面空间 · 网页界面中的“版面空间”不同于传统意义上的视觉传达媒体，它不像报纸、杂志、平面广告等具有固定的版面尺寸，它的版面是变化的。 · 首先，在水平方向上，由于目前一般大众所使用的屏幕分辨率多设定为800×600 像素，或者 1024×768 像素。 · 因此，网页设计者在安排网页版型时，也大多针对这两种分辨率来设计，以呈现出最佳化的网页版面。 · 其次，在垂直方向上，由于页面是可以滚动的，版面的长度不做限制。 · 因而这样一个动态的、变化的“版面空间”，给版式设计增加了难度。 · 为避免“版面空间”的不固定给网页设计带来的负面影响，取得较好的版面视觉效果，很多网页在设计时采取了相应的措施： ◆ 将背景作适当设计，以适应不同分辨率的版面效果。 ◆ 应用自动适合宽度的技术。 ◆ 将版式限定在固定的尺寸中，不随活动窗口中内容的滚动而滚动。 6.2.2 第一屏 · 所谓第一屏，是指我们打开一个网站页面，在不拖动滚动条（浏览器窗口）的情况下，能够看到的部分。 · 以此衡量，第一屏到底有多大呢？答案同样是不确定的。 · 虽然说分辨率800×600 像素，或者 1024×768 像素是大家经常针对的两大版面，但实际上，浏览器在呈现网页时，因同时也要呈现出本身的操作界面（标题栏、菜单栏、链接地址、功能按钮、状态栏等），因此真正可供发挥的第一屏面积只有760x420 像素，或者 1002×600 像素。 6.3 版式设计的造型元素 6.3.1 版式设计的基本造型元素 · 在网页界面中，构成版面空间的基本造型元素，除了第4章提到的点、线、面以外，还有空白。 · 版式设计的过程就是在版面空间中经营和组织好这些点、线、面、空白，使其传达出特定的美感。 · 如果不考虑网页“版面空间”的不确定性，网页的版式设计在造型上还是有一定规律可循的，其造型元素除了第4章提到的特征，就版式设计而言，还有其他一些特点。 1．点、线、面的位置 · 当点、线、面这些实体形处于版面的不同位置时，产生的视觉效果和心理作用是不同的。 · 一般来说，居于版面几何中心时，有庄重感或平衡感，但容易呆板，而偏离中心位置，则打破了平衡，产生动势，越偏离动势越强，这容易造成版面的不稳定，需要在视觉上加以平衡。 2．点的强调作用 · 利用点对视线的集中属性，可以将需要局部强调的部分以“点”表示，使之在版面中引起注意。 · 这些局部强调的“点”不破坏版面的整体平衡，同时带来了变化和轻松感。