第课Web艺术设计.ppt

第4章 Web艺术设计 内容简介 本章主要介绍Web设计所需的美学原理和设计法则，具体涉及到影响网页观感的色彩、文字、图像、导航元件以及版面设计等方面的知识。 学习目标 1．掌握：技术和艺术之间的限制关系；网页色彩设计的一般原则；网页设计流程、网页元素的基本知识及基本制作方法；网页创意设计的原则以及设计要点；导航设计的原则；版式设计的基础知识。 2．理解：网页设计中应用到的网络技术与传播特点、与传统媒体设计的区别；版式设计和平面设计的基本法则；色彩、文字、图像、版面设计中的一些概念。 3．了解：不同的制作软件、视听语言基础和网页设计的未来趋势。 4.1 Web设计环境 在进行网页设计和制作的过程中，了解网络的相关技术以及访问者的外在条件（如访问者的访问速度、计算机平台、使用何种浏览器等）是十分重要的。这些因素将影响你设计的Web文件大小和设计复杂程度。 了解技术和媒体因素是网页艺术设计的前提，技术和艺术的结合是网页设计的最高境界。 4.1.1 Web的技术环境（1） 从技术为人服务的观念出发，应尽可能地从用户的角度来进行Web设计。要想有更多的人能很好地访问你所设计的站点，就应使Web站点适应不同的浏览器、操作系统和计算机平台访问的技术环境。 4.1.1 Web的技术环境（2） 1、关于浏览器的技术 网页设计者首先面临的问题是如何使网页在不同浏览器中都能正常显示。由于每种浏览器对HTML文件标签的解释都不同，导致对HTML文件的显示方式的解释存在差异。因此设计者应尽量在多种浏览器环境中测试自己的工作，以便对用户使用的浏览器提出要求或说明。 4.1.1 Web的技术环境（3） 为适合不同浏览器，可以采用以下几种方式： （1）采用可兼容的技术 尽量使设计的网页可以在各种浏览器中使用。不使用最新版本的HTML规范编码，便于与各种版本的浏览器兼容。 （2）采用最新的技术设计 这就要求用户采用最新的浏览器，还要有能够显示特殊媒体类型的增强插件，这样才能跟上设计者的步伐。 （3）采用对用户指定特定浏览器的方式 4.1.1 Web的技术环境（4） 总之，在对浏览器的选择上，可以采用一种能促进渐进开发的策略。 例如：在创建站点时使用前一个旧版本的HTML来编码，然后慢慢向其中加入一些增强特性，不断向最新版本靠近，使用户使用新旧版本的浏览器都可访问。若要加入一些需要插件支持的动画或特殊效果，则要使用大多数浏览器都支持的开发工具。 4.1.1 Web的技术环境（5） 2、关于屏幕分辨率的技术 显示器的屏幕分辨率：是指显示器屏幕所能显示的象素总数，这一指标是由显示器和显示卡的性能决定的。通常用水平和垂直方向的象素数目的乘积表示。如：800?600。 随着计算机显示器和显示卡性能的提高，在网页设计中，很多人已经将800?600作为基本的分辨率。 4.1.1 Web的技术环境（6） 3、关于宽带的技术 网站设计者要考虑用户的低带宽连接。如果由于页面包含庞大的、详细的图形或复杂的动画而导致下载速度缓慢，用户就会在页面内容显示之前改去访问别的站点。因此网站设计者应在不同的连接速度下进行浏览测试，以获得在不同的连接速度下浏览网页的真实情况。 在设计时应尽量简化页面，少使用图形或将图形大小限制在10－15KB范围之内。 4.1.2 Web的媒体环境（1） 考虑到计算机屏幕是网页的最终目的地，与传统的基于纸张的媒体完全不同，故在规划Web站点时应考虑以下几点： 1、计算机屏幕的形状 2、要有足够的对比度以利于用户阅读 3、屏幕分辨率比印刷品低得多 由于信息显示的载体是计算机屏幕，因此必须针对屏幕进行设计，即应考虑布局、字体和颜色，以及它们如何显示。还应考虑超文本的非线性特点，把合适的链接与相关内容有机地结合起来。 4.1.2 Web的媒体环境（2） 4、Web站点的观感 观感：指用户必须接触到的Web站点界面。 由于用户访问站点的过程，就是观看并感觉站点的过程，他们可以根据站点允许的自由度，自主选择信息的访问路径。因此站点的观感就是站点的运行方式以及传达站点给用户的个性化设计。 4.1.3 Web的设计流程（1） 1、Web设计的两个阶段 Web的设计流程通常包含两个阶段： 第一阶段：了解客户需求，然后根据不同的网站类型进行创意，同时与技术人员沟通，了解设计所需的技术难度，确定方案。 第二阶段：制作出页面样例，与客户交流征求意见，然后修改，直到确认，由制作人员协助完成设计。 应该注意：制作前进行完整详尽的规划是十分必要的。 4.1.3 Web的设计流程（2