第4章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) 2、Web设计的一般步骤 Web站点的设计一般有如下步骤,但为了达到 用户所希望的观感,实践