08章网页界面设计.ppt

第八章 网页界面设计 8.1网页特点及其设计原则 8.1.1 网页设计特点 8.1.2 网页设计基本原则 8.1.3 网页界面的内容与风格 8.1.4 网页界面设计的语言与文化  8.2 网页界面设计要素  8.2.1 网页视听元素 8.2.2 网页界面布局  8.2.3 网页界面的色彩设计 8.2.4 网页界面的字体  8.2.5 网页界面的动画与多媒体  8.2.6 网页界面上的导航  8.3 网页界面设计技术与工具  8.3.1 网页界面设计技术基础  4．服务器端脚本语言 8.3.2常用网页界面设计工具  8.3.3 Dreamweaver网页编辑器简介 8.4 网站设计 8.4.2 网站的可用性  8.4.3 常见网站设计错误  8.4.4 网站设计经验 8.4.5 网站帮助信息的设计 8.4.6 网站实例分析  8.5 个人网站设计实例 8.5.1个人网站设计概述 8.5.2 建立站点 小结 习题八 易学性：当用户第一次使用设计时完成基本任务的难易。 有效性：一旦用户学习了这个设计，执行任务的快慢。 易记性：当用户一段时间不用此设计后再来使用，再次熟练的难易。 错误：用户会犯多少错误，这些错误有多大的影响，从错误中恢复的难易。 满意程度：使用这个设计让人感到何种程度的愉快。 如果某个站点不好用，用户就不会再去用它。网站设计首先要考虑可用性。网站是用户与网站所有者沟通的桥梁。人们在访问网站时，通常并未将它当作艺术品来赞赏，而是为了获取有关信息，或者咨询一些问题。所以网站的设计应该尽量清楚、有条理，以便人们能够容易找到所需信息。可用性是指对用户来说软件或网站站点是否易用、高效和使人感到满意。衡量可用性的5个方面： 在网站设计中，形式应该服从功能，这种观点应该应用于站点的整个设计过程中。经常发现一些站点未将重点放在功能上。从这个角度看，常见的功能方面的错误有： 目的描述不清楚。目的不清使用户难以了解网站的信息和服务。 存档内容换上新的地址。许多网站将旧的内容存档后地址可能发生变化，从而造成连接错误。 内容不标注日期。如果信息不注明日期，用户就不知道信息是当前的还是过时的。 对大图片的缩小不能反映其真实内容。网站需要使用较小的图片，对于较大的图片通常只是简单地缩小，因此会丢失细节，但有时用户可能会要求看原始的大图片那么就应该提供缩小的图片到原始图片的链接。 不支持“如果-那么”（what-ifs）。 在不同的选项间进行比较和选择对于大部分重要的Web任务来说是基本的要求，但是很多网站并不支持用户考虑其他的选择。 无法通过属性过滤的长长的列表。网站有时提供的信息很多，应该让用户能够根据兴趣对项目进行过滤。 产品只能按照品牌进行排序。有些网站提供了过滤和排序的功能，但一般只能按照品牌进行排序。 过分限制的表单条目。这可能是过分限制的表单条目或过分的格式限制。如姓名的输入，可能要求严格的区分姓和名。还有电话号码，可能要求严格地分别输入区号。 页面上包括指向自己的链接。如果希望提供回到页面顶端或底部的功能，应该使用按钮，而不是链接。 具体到页面设计上，要注意下列常见的设计错误： 用户界面元素不一致：一个控件在不同的页面上功能不同；或者同一个功能对应几个用户界面控件。 导航栏位置不一致。决定站点的那些页面和功能需要在站点的任何页上都可被访问到。应该保持一致性的“全局导航栏”。 不注意图形设计原则：排版、色彩和版面的设计； 相关元素和功能的随意分组：注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断这个链接的功能。 网页过于庞大；并不是说不应该使用图形，但是要对它们精挑细选，然后用适当的压缩和颜色索引来优化它们。好的站点倾向于简化和快速，同时在功能上有所提高，这也是网站的设计目标。 设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改也许不会有什么影响。但是，在其他情况下，它可能对页面功能有所影响，小的改动会使页面的运行方式有很大的不同。 以下列出在网站设计过程中得出的经验，掌握这些经验，对设计优秀的网站将会有所帮助。但要注意，这些经验并不是一成不变的万灵丹，应根据实际情况加以应用。 使用清楚的消息：确保用户了解此页面的上下文，并且知道需要他们做些什么。如果在注册过程中需要用户输入姓名，就直截了当地说明。不要让访问者自己猜测要做什么，他们会感到沮丧，于是转到其他更简单的站点。 保持一致性：虽然更改不同页面的外观并不难，但这并不意味着应该这么做。将主要功能放在每页的相同位置。例如在WWW.M上，黑色全局导航栏的位置在40多万网页上都是一样的。 使站点可用：在完成站点的设计任务后，必须测试站点的可用性。确保用户可容易地执行