(精品)第8章Web界面设计.ppt

第第8章章 Web界面设计界面设计本章内容简介互联网上Web站点和页面的设计基础Web站点的信息交互模型和结构Web界面设计的基本思想和原则Web界面设计的工具和技术Web界面设计的可用性评估一些典型的Web站点实例2人机交互技术编写组8.1Web基础互联网是近年来对社会影响最大的技术进步,影响到人类生活的很多方面。互联网已经成为全面支持多媒体，能在多种平台上运行的庞大信息服务系统。互联网的应用范围也日趋扩大，被广泛用于商业办公、业务管理、购物娱乐等人类生活的各个方面，业已成为一种全球化社会现象。3人机交互技术编写组8.1.1Web的出现与发展90年代初，瑞士日内瓦的欧洲核能研究中心分布在世界各地的科学家需要高效率的通讯方式来进行彼此交流与分享信息。该中心高能核理学家TimBerners-Lee研究发展了万维网（WorldWideWeb，WWW）的雏形，目的是为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。4人机交互技术编写组WWW-环球信息网络空间简单来说，WWW是建立在客户/服务器模型之上，构成的一个环球信息网络空间，主要使用：n超文本标记语言（HypertextMarkupLanguage，HTML）n超文本传输协议（HypertextTransportProtocols，HTTP）通过Internet把遍布世界各地的服务器连接起来，它能够提供各种Internet服务，具有一致用户界面的信息浏览功能。5人机交互技术编写组Web页面的发展趋势Web的一个发展趋势，是图形Web页面的爆炸性发展。网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。新一代Web信息描述标准XML，能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提供了强有力的支持。6人机交互技术编写组8.1.2超文本与超媒体超文本（Hypertext）n是一种使用于文本、图形或计算机的信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元素之间相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。7人机交互技术编写组8.1.2超文本与超媒体超媒体（Hypermedia）n利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体。8人机交互技术编写组8.1.3Web界面设计问题的提出Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面设计与站点外观直接相关n站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心n如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。9人机交互技术编写组8.2Web信息交互模型用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。对于信息提供者来说包括信息的表达。对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。10人机交互技术编写组Web信息交互模型图8-1Web信息交互模型知识信息提供者信息一致性动态性认 知 结构知识数据复杂信息过程信息网络空间用户认知结构11人机交互技术编写组Web信息交互模型模型涉及到信息的三种类型n数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。n复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。n过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。12人机交互技术编写组Web信息交互模型模型涉及到信息的两种特性n动态性：信息在不断的变化，具有动态性w比如股票价格、机票价格等是不断变化的。n一致性：信息元素的组织方式具有一致性w信息元素总是通过一定的方式结合在一起，如通过讨论、说明，或根据电话号码、名字、数字等方式组织陈列。13人机交互技术编写组8.3Web信息设计模型Web信息设计模型n是解释Web人机界面性质的另一个模型。n是一种研究网页的信息设计模型。设计模型中要考虑到信息的两个方面n第一是应该呈现或略去什么信息。n第二个方面指的是信息该如何被表现。14人机交互技术编写组Web信息设计模型用户工具设计信息设计过程信息内容选取通路结构兴趣结构执行结构图8-2Web信息设计模型提供者工具设计15人机交互技术编写组WEB的三种设计空间结构模式通路结构模式n说明要展示的关键问题，使用户更容易获取有用的信息。w如出版物中的索引、标题、摘要、概述等。wWeb网站地图和各栏目标题等信息都属于通路结构。兴趣结构n兴趣结构的目的在于捕捉用户的注意力，并维持用户浏览网页的注意力。执行结构n指学习和教育材料之间的一系列交互，尤其是基于计算机的交互。n在WEB中指描述学习和网页信息之间的交互。16人机交互技术编写组8.4Web站点的概念设计概念设计涉及的工作：n分析、确定站点的目标和用途。n准确定义所建立Web网站及站点的规范。n事先建立好站点的架构和导航设计。n兼顾不同的浏览器。17人机交互技术编写组8.4.1站点架构和导航设计站点结构站点结构n站点的结构可分为逻辑结构和物理结构:w逻辑结构描述文档间的关系，定义文档间的链接。w物理结构描述文档的实际位置及显示方式。n超文本结构中最常用层次结构w层次型结构按信息的必要性来改变信息的显示方式。w根网页是站点的主页，层次以根网页开始。w用户深入站点时，选择趋向于越来越具体，直到找到目标或叶子网页。w层次结构通过深度和广度来描述。18人机交互技术编写组8.4.1站点架构和导航设计站点的导航设计站点的导航设计n导航系统对访问者来说是路径指示系统。n站点访问者通过导航系统寻找需要的信息。n用户感觉到能以满意的方式找到所需信息时，导航系统才是合适的。n由于用户的差异，不可能实现完美的导航系统。19人机交互技术编写组兼顾不同浏览器的设计原因n站点浏览者可能使用不同类型和版本的浏览器。n以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示或运行。方法n通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数及对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容。n根据用户浏览器分布情况决定设计所面向的浏览器类别和版本。20人机交互技术编写组8.5Web界面设计所涉及的问题Web界面设计中要考虑的基本问题包括：nWeb界面设计基本原则nWeb界面规划21人机交互技术编写组8.5.1Web界面设计基本原则了解浏览者的心理状态内容与形式的统一减少浏览层次特点明确统一整体的形象Web界面设计的3C原则22人机交互技术编写组8.5.1Web界面设计基本原则1了解浏览者的心理状态了解浏览者的心理状态n从心理学的角度分析浏览者的心理状态，有助于网页页面的设计。n在单击“退回”按钮之前有三秒钟而且只有三秒的等待。n必须迅速地把有趣和有吸引力的东西显示出来。23人机交互技术编写组8.5.1Web界面设计基本原则2内容与形式的统一内容与形式的统一n内容指的是Web网站的信息、数据及文字内容等.n形式指的是网页设计的版式、构图、布局、色彩以及它们所呈现出的风格特点等。n网页的形式是为内容服务的，但本身又有自己的独立性和艺术规律。n网页设计的目的就是为了使网页更加形象、直观，更易被观众所接受。n不同内容的网页要求用不同的设计形式。24人机交互技术编写组8.5.1Web界面设计基本原则3减少浏览层次减少浏览层次n应尽量把网页的层次简要化，力求以最少的点击次数链接到具体的内容。n在主页的访问率为100人次的情况下，下一页的访问率降到30到50人次。n网页的层次越复杂，实际内容的访问率也将越低，信息也就越难传达到读者的手里。25人机交互技术编写组8.5.1Web界面设计基本原则4特点明确特点明确n利用相应逻辑结构来有序组织、开发出一个页面设计原型，进行测试，逐步精炼此原型，形成明确的特点n特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动它的浏览者n应清楚地了解Web网站用户的基本情况，从而能有的放矢，挑选关键信息26人机交互技术编写组8.5.1Web界面设计基本原则5统一整体的形象统一整体的形象nWeb网站标识以及网页设计标准确定后，应尽量地应用到每一页页面上，使浏览者可以确定当前所浏览的网站，并且给浏览者留下深刻而统一的印象。27人机交互技术编写组SONY公司的首页特点SONY公司的首页设计充分体现了引领消费电子产品的潮流这一特点，设计者很好地传递了该Web网站的特点：n页面上富有动感的线条和画面n鲜亮的用色nFlash画面和字样n鼠标落在上面就会以彩色显示的多个画面等28人机交互技术编写组SONY公司的首页29人机交互技术编写组8.5.1Web界面设计基本原则6Web网站设计的网站设计的3C原则原则nconcise（简洁）w使用醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。w限制所用的字体和颜色的数目。w页面上所有的元素都应当有明确的含义和用途，不要用无关的图片把页面装点起来。30人机交互技术编写组8.5.1Web界面设计基本原则nConsistent（一致性）w各页面使用相同的页边距；文本、图形间保持相同的间距。w各页面上都放上公司或网站的统一标志。w各页面应当使用相同的导航图标。w页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性。w文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。31人机交互技术编写组8.5.1Web界面设计基本原则ncontrast(对比度)w对比是强调某些内容的最有效的办法之一，好的对比度使内容更易于辨认和接受。w常用的对比方法是使用颜色进行对比。w另一种实现对比的方法是使用字体变化。w可以在文字排版中使用斜体和黑体写出关键内容，但不要滥用，以免不能达到强调效果。32人机交互技术编写组8.5.2Web界面规划确定确定Web界面设计的目标界面设计的目标n企业Web网站：w企业建立这个Web网站的目的w这个网站的作用w该提供哪些吸引访问者的东西w用户访问这个Web网站后，能给他们带来什么？n个人Web网站：w主要是展现自我、演练技术。w建立的Web网站要有个性和特色。33人机交互技术编写组8.5.2Web界面规划n界面布局的规划w制定好目标后，网页布局、元素的设计都要以这个目标为中心，尽量从各方面综合表现Web站点的目标。w在制定建立站点目标的同时，应该将站点作为一种文化、一种艺术来看。34人机交互技术编写组8.5.2Web界面规划Web界面设计中用户的地位界面设计中用户的地位n确定Web站点的用户群体，从用户的角度去思考。n以用户为中心的设计，为用户的共性设计，同时考虑差异。n对目标用户群的构成进行分析：Web网站是以提供的信息内容来分类的。n对目标用户的行为方式来分析：按照人机工程学的观点，行为方式受年龄、性别、地区、种族、职业、生活习俗、受教育程度等因素影响。35人机交互技术编写组8.6Web界面概要设计Web界面概要设计包括nWeb界面框架设计nWeb界面的内容与风格的设计nWeb界面设计的语言与文化36人机交互技术编写组8.6.1Web界面框架设计Web网站规划n对市场进行分析，确定站点的目的和功能，并根据需要对站点建设中的技术、内容、费用、测试、维护等做出规划。建立原型系统n尝试采用不同的方法修改目标、更新形象。n解决Web网站建设中的一些基本问题：wWeb网站的结构w信息的组织与管理w新增文件与原有系统保持一致的措施。w存储信息的物理方法（采用数据库还是文件系统）w文档版本控制w结构的完整性以及维护方法等37人机交互技术编写组8.6.1Web界面框架设计详细设计包括nWeb页面的布局n系统的内部结构n实现方法和维护方法等n确定Web网站的运行模式w制造企业网站w商业企业网站w门户网站w新闻网站w个人网站w通过广告、销售等方式进行运作的网站正式实施38人机交互技术编写组8.6.2Web界面的内容与风格网站内容设计的原则网站内容设计的原则:nHTML文档的效果由其自身的质量和浏览器解释的方法决定。应让所有的浏览器都能够正常浏览。n网站信息的组织的总体结构要层次分明，尽量避免形成复杂的网状结构。n要权衡图像和多媒体信息的数量，在不影响网站效果的前提下，尽量减少图像的数量和所占面积。39人机交互技术编写组8.6.2Web界面的内容与风格网站内容设计的原则网站内容设计的原则n网站的首页要给用户带来好的第一印象，能够吸引用户再次光临这个网站。n网站内容应是动态进行修改和更新；。n网页中应该提供联机帮助功能。n网页的文本内容应简明，通俗易懂。w所有的内容都要针对设计目标而写，不要节外生枝。w文字要正确，不能有语法错误和错别字。40人机交互技术编写组8.6.2Web界面的内容与风格Web界面的风格界面的风格nWeb界面的风格包括站点的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。n一个杰出的网站需要整体的形象包装和设计。n为儿童设计的网站应当使用比较丰富的色彩和图形，并且较多使用动画和声音等多媒体表现工具。n为老年人设计的网站需要考虑采用较大的字体、直截了当的信息显示和简单的浏览方式，以适用老年人可能逐渐减弱的视力和记忆力41人机交互技术编写组体现儿童特点的迪斯尼网站42人机交互技术编写组8.6.3Web界面设计的语言与文化网站应设置多语言选择n网站面向的用户使用不同的语言，则在设计时要考虑包括不同语言的版本，将选择语言版本的功能放在网站的主页，并用不同版本的语言进行标注。在网站设计和建设中进行跨文化研究n应当注意到不同地区的文化特点。n不同的语言表达可以产生不同的效果。n有些内容在一个地区是允许的或适用的，但是在另外一个地区使用却是不合适的。n应当避免显示对用户不适合的内容。43人机交互技术编写组8.7Web界面设计要素Web界面设计要素包括：nWeb界面布局nWeb界面的色彩nWeb界面的字体nWeb界面的动画与多媒体nWeb界面的导航44人机交互技术编写组8.7.1Web界面布局布局设计应做到整体布局合理、有序、整体化。常用Web页面布局的形式：n“同同”字形结构布局字形结构布局n“国国”字形结构布局字形结构布局n左右对称布局左右对称布局n自由式布局自由式布局45人机交互技术编写组8.7.1Web界面布局“同同”字形结构布局字形结构布局n页面顶部为主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体的内容。n优点是页面结构清晰、左右对称、主次分明，因而得到广泛的应用。n缺点是太过于规矩呆板，需要善于运用细节色彩的变化来调剂。46人机交互技术编写组8.7.1Web界面布局2“国国”字形结构布局字形结构布局n“国”字形结构布局在“同”字形结构布局的基础上，在页面下方增加一横条菜单或广告n其优点是充分利用版面、信息量大、切换方便。n有的网站将页面设计成镜框的样式，显示出网站设计师的品味。47人机交互技术编写组8.7.1Web界面布局3左右对称布局左右对称布局n采取左右分割屏幕的方法形成对称布局。n优点是自由活泼，可显示较多文字和图像。n缺点是两者有机结合较为困难。48人机交互技术编写组8.7.1Web界面布局4自由式布局自由式布局w自由式布局打破上述两种布局的框架结构，常用于文字信息量少的时尚类和设计类网站。w其优点是布局随意，外观漂亮，吸引人。w缺点是显示速度慢。49人机交互技术编写组8.7.2Web界面的色彩确定网站的标准色彩n不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。以红、绿、蓝三色称为三基色n其它的色彩都可以用这三种色彩调和而成。底色应应柔和、素雅n柔和的底色配上深色文字，读起来自然，流畅。50人机交互技术编写组8.7.2Web界面的色彩网页色彩搭配的原则：n色彩的鲜明性w网页的色彩要鲜艳，容易引人注目。n色彩的独特性w要有与众不同的色彩，使得大家对网页的印象强烈。n色彩的合适性w色彩和网页要表达的内容气氛相适合。n色彩的联想性w不同色彩会产生不同的联想，选择色彩要和网页的内涵相关联。51人机交互技术编写组8.7.3Web界面的字体字体是每一个网站的必要组件，选择字体和颜色，和其它页面元素一起产生一个视觉效果。52人机交互技术编写组常用的英文字体（1）Serif字体（2）Sans-Serif字体（3）TrueType字体53人机交互技术编写组常用的英文字体Serif字体nSerif是在字母主要笔画的结束处加上的小装饰笔画。TimesNewRoman是一个Serif字体的例子。nSerif引导眼睛随着打字线移动，提高了可读性。Serif字体最适合于正文文本。54人机交互技术编写组常用的英文字体Sans-Serif字体nSans-Serif字体没有小装饰笔画，Arial是一个Sans-Serif的例子。n字符的外观被减少到只含有必要的笔画。nSans-Serif文本必须逐个字母的阅读。n建议在小尺寸文本和非常大的文本中使用。n通常，Serif字体和一个Sans-Serif字体就可以在网页上提供一个较好的文本组合。55人机交互技术编写组常用的英文字体TrueType字体n许多字体都是TrueType，即可以产生任意尺寸而不降低字母质量。nTrueType是苹果公司开发的一项数字技术，现在被Apple和Microsoft操作系统使用。nTimesNewRoman和Arial都是TrueType字体。56人机交互技术编写组运用不同英文字体的网页57人机交互技术编写组常用的中文字体Web界面中常用的中文字体有宋体、仿宋体、楷体和黑体。除这四种基本字体外，还有多种可选用的字体如书宋体、报宋体、隶书体、美黑体、广告体、行草体等。汉字大小定为九个等级，按初、一、二、三、四、五、六、七、八排列，在字号等级之间又增加一些字号，并取名为小几号字，如小四号、小五号等。58人机交互技术编写组常用的中文字体正文中的中文字体n可以采用传统媒体中的各种字体作为Web界面正文中的字体。n根据Web网页中的不同要求，选择相应的字体和字号。n常见正文中文字体用法如表8-1所示。59人机交互技术编写组常用的中文字体标题中的中文字体n网页应该重视标题的处理，把标题排版作为版面修饰的主要手段。n标题的字体变化更为讲究，用于网页排版系统一般要配十几到几十种字体，才能满足标题用字的需要。n网页标题一般无分级要求，字形普遍要比图书标题大，字体的选择多样，字形的变化修饰更为丰富。60人机交互技术编写组常见正文中文字体用法名称正文字体正文字号图书书宋(宋体)五号、小五号工具书书宋(宋体)小五号、六号报纸报宋小五号、六号公文仿宋三号、四号期刊杂志书宋、细等体五号、小五号、六号61人机交互技术编写组使用字体的原则整个网站上的字体应该保持使用的一致n网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。n文字的颜色应该一致，让用户可以容易的确定不同文本和颜色所代表的内容。n为了让字体匹配网站的总体概念，必须要意识到每一个字体变化和可以使用的范围。62人机交互技术编写组使用字体的原则考虑字体如何适应网页，以及字体与整个设计的关系。选择的字体和整个页面及网站应融为一体。设计元素例如页边框，行间距，背景颜色和前景颜色等都可以影响最终的结果。通过字体不同的安排，可以让网站产生丰富变化的外观和感觉。63人机交互技术编写组8.7.4Web界面的动画与多媒体动画、音频和视频这样的多媒体可以补充平淡的文本或者二维图形，也补充网站的视觉设计、音调和消息等。Web设计者可以使用很多当前Web设计中的多媒体处理工具和技术；但是带宽以及浏览器的支持能力限制了多媒体技术的迅速采用。为了充分享受新技术，通常需要大带宽、浏览器插件或第三方应用程序的支持。64人机交互技术编写组WEB中的动画动画是区别Web和其它媒体的一个重要展示形式，动画赋予了用户运动和投入的感受。动画可以分为不同的级别，从简单的动画GIF图像到三维以及虚拟环境。最常用的基本动画类型是GIF、Rollover和MacromediaFlash文件。动画GIF是静止图像的汇集，可以按照指定的序列号和速度重复运动。许多标志广告就是动画GIF。65人机交互技术编写组WEB中的动画JavaApplet是经常被用来制作互联网上动画效果的程序设计语言。MacromediaFlash文件在网站设计中被广泛地接受。Flash引入了一种新的动画形式。它在带宽有限的情况下提供了媒体丰富的内容。nFlash允许设计者创建吸引人的动画网站，为通常的静态站点提供了一种新的选择。66人机交互技术编写组8.7.5Web界面上的导航对于Web站点来说，需要包含导航条，用户利用导航的提示在信息的空间里移动。真实世界的导航观点在Web中常被采用。应该注意，Web不是真实的世界，Web导航应该帮助用户理解他们在哪里、可以去哪里、怎样获得想要的东西。67人机交互技术编写组Web界面上的导航为使用户得到真实的感觉，必须充分考虑可见性、标记和导航元素的布局。Web页上仅有五个基本区域可放置导航元素：n顶部n底部n左侧n右侧n中央68人机交互技术编写组8.8Web界面设计技术与工具要设计好的Web界面，需要有良好的设计工具，随着Internet网络的发展，国际组织和许多互联网软件开发商制订了若干标准，开发了不同的Web界面设计工具。本节对一些常见的技术和工具进行简单介绍。69人机交互技术编写组8.8.1Web界面设计技术基础 超文本标记语言超文本标记语言HTML客户端脚本语言客户端脚本语言JavaScriptJavaApplet服务器端脚本语言服务器端脚本语言70人机交互技术编写组1.超文本标记语言超文本标记语言HTMLHTML已经成为表示Web文档信息的标准方法，是构成Web页面的主要工具。HTML是用来表示网上信息的符号标记语言，是一个跨平台语言。HTML标准定义了构成语言的每一个独立元素，这些元素是说明如何在浏览器中显示HTML文档的指令或标记符。从结构上讲，HTML文件由各种标记元素组成，用于组织文件的内容和指导文件的输出格式。71人机交互技术编写组（1）基本标记元素（部分）标记元素功能含义创建一个HTML文档，通知浏览器该文件含有HTML标记码设置文档标题以及其它不在Web网页上显示的信息网页标题，将显示在浏览器的标题栏中设置文档的可见部分，它包含了文件的内容设置背景颜色，使用颜色名或十六进制值设置背景图片设置文本文字颜色，使用颜色名或十六进制值设置超级链接文字的颜色，使用颜色名或十六进制值设置已访问过的超级链接文字的颜色，使用颜色名或十六进制值设置鼠标悬停于超级链接文字的颜色，使用颜色名或十六进制值创建最大的标题，在HTML中有六种标题72人机交互技术编写组（2）图形标记元素目前能被Web浏览器直接解释的常见图像格式有：GIF格式(.GIF文件，支持256色)；X位图格式(.XBM文件，黑白图像)；JPEG格式(.JPG、.JPEG文件，支持RGB色)。标记元素功能含义添加一个图像。SRC给定图片文件的定位，ALIGN属性定义图与文本行的对齐方式；BORDER属性设置围绕一个图像的边框的大小；WIDTH和HEIGHT分别重新定义图像的宽度和高度。加入一条水平线，SIZE设置水平线的大小，WIDTH设置水平线的宽度，NOSHADE表示创建无阴影的水平线73人机交互技术编写组（3）表格标记元素（部分）标记元素功能含义定义表格，BORDER属性表示表格边框粗细程度，CELLSPACING属性用于设置表格格子之间空间的大小，CELLPADDING用来设置表格格子边框与其内部内容之间空间的大小,WIDTH属性是用来定义表格宽度定义表格标题表示一个新的表格行的开始，属性ALIGN表示横向对齐方式在表格的当前行里产生一个新的表项单元，表示一个表项标题(TableHeader)单元，COLSPAN及ROWSPAN表示进行横向及纵向地扩展表项单元在表格的当前行里产生一个新的表项单元，表示一个表项数据(TableData)单元，其它属性的含义同上74人机交互技术编写组（4）表单标记元素(部分)标记元素功能含义创建所有表单创建一个单行文本输入域，SIZE设置以字符计数的宽度文本创建一个口令输入域，输入的字符全部显示为“*”创建一个文本框区域，列的数目设置宽度，行的数目设置高度创建一个单选按钮，文字在标签后面创建一个复选框，文字在标签后面75人机交互技术编写组【例8-1】Demo.html【例8-1】用任一编辑器建立文本文件Demo.html。网页标题显示于浏览器窗口的标题栏H1设定一级标题黑体字斜体字红色5号字点击这里将超链到山东大学主页点击这里将超链到下面的锚点有意见请告诉我这里是一个文档内部锚点的起始处76人机交互技术编写组Demo.html的运行效果77人机交互技术编写组【例8-2】用HTML实现表单实例HTML表单实例用户名：口令：选学内容：WordExcelInternet课程类别：必修选修你的计算机是哪一种类型：PCUNIXMACOTHER备注：请 在 此 填 写 补 充 内 容 78人机交互技术编写组用HTML实现表单实例效果79人机交互技术编写组2客户端脚本语言客户端脚本语言JavaScriptHTML无法独自完成交互和客户端动态网页的任务,JavaScript，它弥补了HTML语言的缺陷。利用JavaScript，可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互式的表达能力。JavaScript是一种内嵌于HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML、JavaApplet一起实现在一个Web页面中链接多个对象，与Web客户交互作用，可用于开发客户端的应用程序等。80人机交互技术编写组JavaScript的特点（1）一种脚本编写语言（2）基于对象的语言（3）简单性（4）安全性（5）动态性（6）跨平台性81人机交互技术编写组JavaScript与HTML结合实例/JavaScript在此出现alert(这是第一个JavaScript例子!);alert(欢迎你进入JavaScript世界!);alert(今后我们将共同学习JavaScript知识！);/JavaScript在此结束/JavaScript代码由.说明/alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示括号中的字符串82人机交互技术编写组JavaScript与HTML结合实例运行结果83人机交互技术编写组3JavaAppletJavaAapplet是访问Internet服务器，在Internet上传播的，自动安装的，可作为部分Web文档运行的小应用程序。当JavaAapplet到达客户端，它被限制访问资源，以使它能够在不受病毒威胁和破坏数据完整性的情况下生成一个二进制的多媒体用户界面以及完成复杂的计算。它还提供了装载和显示图像的方法，以及装载和播放语音片断的方法。84人机交互技术编写组JavaAapplet是一种基于窗口的程序JavaAapplet是由事件驱动的。一个JavaAapplet类似于系列提供中断服务的子程序的集合。在事件发生之前，JavaAapplet一直处于等待状态中。一旦事件发生，JavaAapplet就会采取相应措施并迅速将控制权交给AWT。针对特定的事件作出相应的动作并把控制交给AWT的运行环境。用户可以与JavaAapplet进行交互，而不是通过其它方式。这些交互被送至JavaAapplet，JavaAapplet必须作出响应的事件。85人机交互技术编写组JavaApplet在网页中实现放大镜的例子AnLens.jar是JavaApplet的源文件。其效果如下图。86人机交互技术编写组87人机交互技术编写组4服务器端脚本语言服务器端脚本语言目前流行的三大服务器端脚本语言是ASP、PHP、JSP。nASP（ActiveServerPages），是一个Web服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的Web服务应用程序。nPHP（HyperTextPreprocess）是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C、Java和Perl语言的语法，并耦合PHP自己的特性，使Web开发者能够快速地写出动态生成页面。nJSP（JavaServerPage）是Sun公司推出的新一代站点开发语言，它完全解决了目前ASP，PHP的一个通病脚本级执行。JSP可以在Servlet和JavaBeans的支持下，编写出功能强大的Web站点程序。88人机交互技术编写组三大服务器端脚本语言三者都提供在HTML代码中混合某种程序代码、由语言引擎解释执行程序代码的能力。在ASP、PHP、JSP环境下，HTML代码主要负责描述信息的显示样式，而程序代码则用来描述处理逻辑。普通的HTML页面只依赖于Web服务器，而ASP、PHP、JSP页面需要附加的语言引擎分析和执行程序代码。程序代码的执行结果被重新嵌入到HTML代码中，然后一起发送给浏览器。89人机交互技术编写组8.8.2常用Web界面设计工具页面编辑器页面编辑器nMicroSoftMicroSoft公司公司的FrontpagenMacromedia公司的DreamweavernDreamweaver对于动态网页的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。nDreamweaver与Flash、Firework并称为Macromedia的网页制作三剑客。辅助工具辅助工具nAceHTMLPro6.0全功能的HTML&JavaScript编辑器。nAntennaWebDesignStudio强大的可视化网页设计软件。nEasyHTML简单的所见即所得的HTML编辑器，有固定、类似浏览器的界面。nEasyWebEditor是一个Web发布工具，允许不了解HTML而在所见即所得环境中编辑Web网页。90人机交互技术编写组8.8.3Web界面设计新技术Web 3D图形技术 语音Web技术91人机交互技术编写组1.Web 3D图形技术（1）Web3D虚拟现实建模语言VRMLnVRML是3D图形和多媒体技术通用交换的文件格式，它描述交互式的3D对象和场景。它不仅应用在互联网上，也可以应用在工程和科学可视化、多媒体、娱乐游戏、互联网3D图形、教育、虚拟社区等领域。由于网上传输的是模型文件，故其传输量大大小于视频图像。92人机交互技术编写组虚拟法国巴黎凯旋门及周围的3D场景效果93人机交互技术编写组1.Web 3D图形技术（2）Web3D图形实时渲染引擎n实时渲染引擎的作用是解释并翻译实施场景模型文件的语法，实时渲染从服务器端传来的场景模型文件，在网页访问者的客户端逐帧、实时地显示3D图形。n实时渲染引擎是实施互联网3D图形的关键技术，它的文件大小、图形渲染质量、渲染速度、以及它能提供的交互性都直接反映其解决方案的优劣。94人机交互技术编写组1.Web 3D图形技术（3）Web3D图形新标准n可扩展3D(Extensible3D,X3D)是一个软件标准，定义了如何在多媒体中整合基于网络传播的交互三维内容。X3D是VRML的继承和改进，提供了以下的新特性：更先进的应用程序界面，新添的数据编码格式，严格的一致性，组件化结构。95人机交互技术编写组1.Web 3D图形技术（4）Web3D图形建模与制作工具n3DSmax可用于建立场景模型，安装相应的输出插件，再直接建立场景模型文件。现在最有名的Web3D图形软件公司，如cult3D和Viwepoint都可以在3DSmax中直接输出它们的专用文件格式的场景模型文件。96人机交互技术编写组1.Web 3D图形技术（5）Java3DnJava3D的本质是一个交互式三维图形应用编程接口（API），是Java2SDK的标准扩展，它可以和普通的Java2D、Swing、AWT等很好地结合，其目标是：1）用户能够在浏览器中观看或操作三维动态图形。2）一次编程，到处运行。3）适应不同的软件平台。4）适应各种显示环境和输入设备。97人机交互技术编写组1.Web 3D图形技术（6）Web3D图形技术应用n互联网上的交互式3D图形技术Wed3D正在取得新的进展，最具魅力的Wed3D图形将在互联网上有广泛应用，如电子商务、联机娱乐休闲与游戏、科技与工程的可视化、教育、医学、地理信息、虚拟社区。98人机交互技术编写组两个Web3D的浏览的例子99人机交互技术编写组2Web中的语音交互技术中的语音交互技术语音浏览技术是正在互连网上的一种新的应用和技术。VoiceXML 语音可扩展标记语言n世界上第一个真正的语音通信标准，它定义了应用开发商向用户提供新型信息访问服务的方式。nVoiceXML的应用与HTML的应用相同，唯一的差别在于前者使用语音浏览器100人机交互技术编写组VoiceXML 语音可扩展标记语言n通过VoiceXML，互联网语音应用运营商能向电话用户发布他们感兴趣的信息nVoiceXML 突破性地实现了互联网与电话网的融合，结合传统的电话语音操作控制、语音识别（ASR）、文语转换（TTS）、XML、Web数据库等技术，完成方便、完善的业务和信息控制操作。n基于VoiceXML标准的语音数据互联将为声讯网、移动网、互联网的统一提供技术保障。101人机交互技术编写组8.9Web界面设计的评估Web界面设计的评估有其独特的特征。为什么要对Web进行可用性测试n如果某个站点不好用，用户就不会再去用它。102人机交互技术编写组8.9.1Web站点的可用性可用性是指对用户来说软件或Web站点是否易用、高效和使人感到满意。衡量可用性的5个方面n易学性：当用户第一次使用设计时完成基本任务的难易。n有效性：一旦用户学习了这个设计，执行任务的快慢。n易记性：当用户一段时间不用此设计后再来使用，再次熟练的难易。n错误：用户会犯多少错误，这些错误有多大的影响，从错误中恢复的难易。n满意程度：使用这个设计让人感到何种程度的愉快。103人机交互技术编写组8.9.2常见Web设计错误目的描述不清楚。存档内容换上新的地址。内容不标注日期。对大图片的缩小不能反映其真实内容。过分详细的ALT文本。不支持“如果-那么”（what-ifs）。无法通过属性过滤的长长的列表。产品只能按照品牌进行排序。过分限制的表单条目。页面上包括指向自己的链接。104人机交互技术编写组8.10Web界面实例分析简要介绍几种典型的网站的实例，以便了解门不同类型的网站的设计风格与特点。1.商业站点商业站点 2.信息站点信息站点 3.娱乐站点娱乐站点 4.门户站点门户站点105人机交互技术编写组1商业站点商业站点一般的，商业站点的主要观众是潜在的和正常的客户组织。第二种观众包括潜在的和正常的投资者，潜在的雇员，令人感兴趣的第三种观众，是新闻媒体或竞争者。任何商业站点的最主要的目的是，以公司直接或间接受益的方式服务于用户。106人机交互技术编写组1商业站点商业站点商业站点的共同特点包括：n基本信息的发布n支持与帮助n投资机会n公共关系n招聘信息n电子商务107人机交互技术编写组商业网站例-沃尔玛中国网站的首页108人机交互技术编写组2信息站点信息站点政府、教育、新闻、无利润的组织、宗教组织，或变化多样的社会站点经常被认为是信息站点。信息站点的访问者，是他们对站点提供的信息有兴趣或需要。信息站点的建立满足某些设计条件，但不需要考虑财政方面的因素。信息站点的目的变化很大。在大学的站点可能尽力以某个题目如某个国家的历史等帮助受教育的访问者。109人机交互技术编写组信息网站例-新浪网的首页110人机交互技术编写组3娱乐站点娱乐站点娱乐站点一般是商业性质的，但还有特殊的考虑。娱乐站点的意图仅仅是使参观者欢乐。在某种程度上，他们是出售娱乐节目。建立娱乐站点时要求打破常规而取得成功。就娱乐站点来说，目的是出售体验本身。111人机交互技术编写组娱乐网站例-联众世界的主页1