第一章习题 参考答案

 

1.1 什么是人机交互技术?

所谓人机交互(Human-Computer InteractionHCI),是指关于设计、评价和实现供人们使用的交互式计算机系统,并围绕相关的主要现象进行研究的学。狭义的讲,人机交互技术主要是研究人与计算机之间的信息交换,它主要包括人到计算机和计算机到人的信息交换两部分。

 

1.2 简单介绍人机交互技术的研究内容。

人机交互的研究内容十分广泛,涵盖了建模、设计、评估等理论和方法,以及在Web、移动计算、虚拟现实等方面的应用研究,主要包括以下内容:

1).人机交互界面表示模型与设计方法

一个交互界面的优劣,直接影响到软件开发的成败。友好的人机交互界面的开发离不开好的交互模型与设计方法。因此,研究人机交互界面的表示模型与设计方法是人机交互的重要研究内容之一。

2).可用性分析与评估

可用性是人机交互系统的重要内容,它关系到人机交互能否达到用户期待的目标,以及实现这一目标的效率与便捷性。对人机交互系统的可用性分析与评估的研究主要涉及到支持可用性的设计原则和可用性的评估方法等。

3).多通道交互技术

研究视觉、听觉、触觉和力觉等多通道信息的融合理论和方法,使用户可以使用语音、手势、眼神、表情等自然的交互方式与计算机系统进行通信。多通道交互主要研究多通道交互界面的表示模型、多通道交互界面的评估方法以及多通道信息的融合等。其中,多通道融合是多通道用户界面研究的重点和难点。

4).认知与智能用户界面

智能用户界面(Intelligent User InterfaceIUI)的最终目标是使人机交互和人-人交互一样自然、方便。上下文感知、三维输入、语音识别、手写识别、自然语言理解等都是认知与智能用户界面解决的重要问题。

5).群件

群件是指为群组协同工作提供计算机支持的协作环境,主要涉及个人或群组间的信息传递、群组内的信息共享、业务过程自动化与协调以及人和过程之间的交互活动等。目前,与人机交互技术相关的研究内容主要包括群件系统的体系结构、计算机支持的交流与共享信息的方式、交流中的决策支持工具、应用程序共享以及同步实现方法等内容。

6).Web设计

重点研究Web界面的信息交互模型和结构,Web界面设计的基本思想和原则,Web界面设计的工具和技术,以及Web界面设计的可用性分析与评估方法等内容。

7).移动界面设计

移动计算(Mobile Computing)、普适计算(Ubiquitous Computing)等技术对人机交互技术提出了更高的要求,面向移动应用的界面设计已成为人机交互技术研究的一个重要内容。由于移动设备的便携性、位置不固定性、计算能力有限性以及无线网络的低带宽高延迟等诸多的限制,移动界面的设计方法、移动界面可用性与评估原则、移动界面导航技术以及移动界面的实现技术和开发工具,都是当前人机交互技术研究的热点之一。

 

1.3 简单介绍人机交互技术的发展历史。

作为计算机系统的一个重要组成部分,人机交互技术一直伴随着计算机的发展而发展。人机交互技术的发展过程,也是从人适应计算机到计算机不断适应人的发展过程。它经历了如下几个阶段:

1).命令行界面交互阶段

计算机语言经历了由最初的机器语言、汇编语言,直至高级语言的发展过程。这个过程也可以看作是人机交互的早期发展过程。

命令行界面可以看作第一代人机界面。

2).图形用户界面(GUI)交互阶段

图形用户界面的出现使人机交互方式发生了巨大变化。GUI的主要特点是桌面隐喻、WIMP技术、直接操纵和“所见即所得”。与命令行界面相比,图形用户界面的自然性和交互效率都有较大的提高。

3).自然和谐的人机交互阶段

当前,自然和谐的人机交互方式得到了一定的发展。基于语音、手写体、姿势、视线、表情等输入手段的多通道交互是其主要特点,目的是使人能以声音、动作、表情等自然方式进行交互操作。

近年来,强大的社会需求产生了各式各样的应用场景。要想实现自然和谐的人机交互关系,需要在进行交互设计时考虑物理、社会等不同的计算环境,理解人机交互的复杂本质,探索与之相关的社会的、自然的和认知的环境以及人们使用计算机的原因,将领域知识应用到系统设计中,并在此过程中逐步形成人机交互新方法,发现更新、更好的计算范式。这也是人机交互技术研究发展的趋势。

 

1.4 列举几个生活中常见的人机交互技术应用的例子。

学生可列举自己了解的例子。

 


第二章习题 参考答案

 

2.1 人机交互过程中人们经常利用的感知有哪几种?每种感知有什么特点?

1)视觉

   视觉是人与周围世界发生联系的最重要的感觉通道。视觉感知可以分为两个阶段:受到外部刺激接收信息阶段和解释信息阶段。一方面,眼睛和视觉系统的物理特性决定了人类无法看到某些事物;另一方面,视觉系统进行解释处理信息时可对不完全信息发挥一定的想象力。进行人机交互设计需要清楚这两个阶段及其影响,了解人类真正能够看到的信息。

2)听觉

   听觉感知传递的信息仅次于视觉,其感知过程亦为接受刺激,把它的特性转化为神经兴奋,并对信息进行加工,然后传递到大脑。声音的解释是与语言的理解联系在一起的,它们都是在大脑的听觉皮层中完成的。听觉系统就像视觉系统一样,可以利用以前的经验来解释输入。另外,由于口语充满着发错音的单词、不完整的句子,而且一般说的很快,所以听觉系统的解释机制必须跟得上输入。

3)触觉

   触觉的感知机理与视觉和听觉的最大不同在于它的非局部性,人们通过皮肤感知触觉的刺激,人的全身布满了各种触觉感受器,用来感受冷热,疼痛和压力。触觉感知的另一个方面是动觉(kinaesthesia),即对人的躯干和四肢的位置的感觉。

 

2.2 颜色模型有哪几种?试说明RGB、CMYK以及HSV颜色模型各适于在什么情况下应用?

RGB CMYKHSV以及CIE等颜色模型。

1RGB颜色模型通常用于彩色阴极射线管等彩色光栅图形显示设备中,它采用三维直角坐标系,红、绿、蓝为原色,各个原色混合在一起可以产生复合色。

2)以红、绿、蓝的补色青(Cyan)、品红(Magenta)、黄(Yellow)为原色构成的CMYK颜色模型,常用于从白光中滤去某种颜色,又被称为减性原色系统。常用于印刷行业中某些印刷硬拷贝设备的颜色处理。

3RGBCMYK颜色模型都是面向设备的,相比较而言,HSV(Hue,Saturation, Value)颜色模型是面向用户的。

2.3 人的认知过程分为哪几类?

1)感知和识别

   人们可以使用感官从环境中获取信息,并把它转变为对物品、事件、声音和味觉的体验。对有视力的个体来说,视觉是最重要的感觉,其次是听觉和触觉。在交互设计时,应采用适当的形式来表示信息,以便用户更好地理解和识别它的含义。

2)注意

   注意作为认知过程的一部分,通常是指选择性注意,即注意是有选择的加工某些刺激而忽视其他刺激的倾向。它是人的感觉(视觉、听觉、味觉等)和知觉(意识、思维等)同时对一定对象的选择指向和集中(对其他因素的的排除)。

3)记忆

   记忆作为一种基本的心理过程,是和其他心理活动密切联系着的。在知觉中,人的经验有重要的作用,没有记忆的参与,人就不能分辨和确认周围的事物。在解决复杂问题时,由记忆提供的知识经验,起着重大作用。

4)问题解决

   问题解决是由一定的情景引起的,按照一定的目标,应用各种认知活动、技能等,经过一系列的思维操作,使问题得以解决的过程。问题解决的过程一般包括理解问题、制订计划、实施计划、检验结果四个步骤。这个认知过程是要考虑做什么、有那些选择、执行某个活动会有什么结果等。它们都属于“思维认知”过程,通常涉及有意识的处理(知道自己在思考什么),与他人(或自己)讨论以及使用各种制品(如地图、书本、笔和纸)。在实际决策中,往往包含多种可能的行动方案,需要分析比较,择优选用。

5)语言处理

   从方便用户阅读、说话和聆听的角度,进行人机界面设计。

2.4 什么是概念模型和分布式认知模型?举例说明分布式认知在计算机应用系统设计过程中的指导作用。

概念模型:指的是一种用户能够理解的系统描述,它使用一组集成的构思和概念,描述系统做什么、如何运作、外观如何等。

分布式认知法描述的是认知系统中发生了什么,它通常描述人员之间的交互,人们使用的物品及工作环境。分布式认知的主要目的是要从信息传播媒介的角度来描述交互。也就是说,它考虑的是信息如何表示,信息在流经不同个人以及使用不同物体时是如何重新表示的。这类信息的转变也称为表示状态的转变

分布式认知被认为是连接计算机支持的协同工作和人机交互的桥梁中的重要组件。分布式认知为协同工作中共享信息是如何表象以及如何使用的提供了一个理论框架。运用分布式认知的理论框架,研究移动性对协同工作中合作的影响也是人机交互的研究热点之一。

 


第三章习题 参考答案

 

3.1 对虚拟现实交互设备进行分类归纳总结,并进行优缺点比较。

 

一、三维空间定位设备

1、 空间跟踪定位器(三维空间传感器):

定位于身体或虚拟现实交互道具上,感知空间6自由度及其变化,跟踪运动。低频磁场式和超声式传感器等不同类型的定位设备取决于应用要求精度、价格等因素。

2 数据手套(Data Glove

可以精确的捕捉手指和手腕的相对运动,获取各种手势信号;可以配合一个六自由度的跟踪器,跟踪手的实际位置和方向。

3 触觉和力反馈器

包括:力学反馈手套、力学反馈操纵杆、力学反馈笔、力学反馈表面等装置。由于精度、真实感、安全性等问题,目前尚缺乏成熟产品。

二、三维显示设备

1 头盔式显示器:

优点:由于两个显示屏幕处于用户佩戴的头盔中,分别覆盖用户双眼的视野,使得用户只能够感知来自计算机所生成的图像,沉浸感极强。

缺点:单用户的局限性、显示屏幕分辨率不高、头部跟踪延迟、头盔过重、以及屏幕距离眼睛过近等

2.  基于投影的沉浸式虚拟现实环境

包括workbenchPowerWallCAVECave Automatic Virtual Environment)等,实现了大视角、全景、沉浸式立体显示,且支持多用户共享。

缺点:需要借助立体眼镜等特殊的交互设备。

3.  裸眼立体显示器

通过显示技术替代了之前通过眼镜偏振片实现的偏振滤光成像环节,其将画面分割成给左、右眼观看的两个不同角度的影像,再利用视觉暂留原理,在人脑形成立体画面。

优点:不需要佩戴立体眼镜

缺点:如果用户观看液晶的角度不同,则可能无法看到三维效果,而且多焦点影像极易造成眼睛疲劳。

4.  真三维显示

实现360度视角观察的三维显示技术,是现实景物的最真实再现。

技术不够成熟,没有标准化和产品化。

 

目前,虚拟现实技术应用领域广泛,涉及技术领域众多,发展变化迅速,缺乏统一的技术标准,因而,需要了解不同类型的交互设备,根据应用需求,设计整体集成方案。

 

3.2 设计一个手写板绘图程序,获取用户在手写板上的输入位置和压力信息,获取基本笔划。

来自Msdn提供的实例(Windows Touch Scratchpad using the Real-Time Stylus in C# Sample


1 创建RTS对象(Real-Time Stylus

 

        private void OnLoadHandler(Object sender, EventArgs e)

        {

            // Create RealTimeStylus object and enable it for multi-touch

            realTimeStylus = new RealTimeStylus(this);

            realTimeStylus.MultiTouchEnabled = true;

 

            // Create DynamicRenderer and event handler, and add them to the RTS object as synchronous plugins

            dynamicRenderer = new DynamicRenderer(this);

            eventHandler = new EventHandlerPlugIn(this.CreateGraphics(), dynamicRenderer);

            realTimeStylus.SyncPluginCollection.Add(eventHandler);

            realTimeStylus.SyncPluginCollection.Add(dynamicRenderer);

 

            // Enable RTS and DynamicRenderer object, and enable auto-redraw of the DynamicRenderer

            realTimeStylus.Enabled = true;

            dynamicRenderer.Enabled = true;

            dynamicRenderer.EnableDataCache = true;

        }

 

2 绘图

        private void OnPaintHandler(object sender, PaintEventArgs e)

        {

            // Erase the background

            Brush brush = new SolidBrush(SystemColors.Window);

            e.Graphics.FillRectangle(brush, ClientRectangle);

 

            // Ask DynamicRenderer to redraw itself

            dynamicRenderer.Refresh();

        }

3 处理 stylus消息

 

        public void StylusDown(RealTimeStylus sender, StylusDownData data)

        {

            // Set new stroke color to the DrawingAttributes of the DynamicRenderer

            // If there are no fingers down, this is a primary contact

            dynamicRenderer.DrawingAttributes.Color = touchColor.GetColor(cntContacts == 0);

 

            ++cntContacts;  // Increment finger-down counter

        }

 

        public void StylusUp(RealTimeStylus sender, StylusUpData data)

        {

            --cntContacts;  // Decrement finger-down counter

        }

 

 

3.3 利用WIA,设计一个图像采集与管理程序,支持从摄像头、扫描仪和数码相机获取图像。

 

参考 MSDN WIA tutorial(http://msdn.microsoft.com/en-us/library/ms629859),按照以下流程描述基于Wia的图像采集过程。

Creating a WIA Device Manager

Enumerating System Devices

Reading Device Properties

Creating a Device

Enumerating Items

Transferring Image Data

Registering for Events

Capturing a Still Image from Streaming Video

 

3.4 设计网络聊天模拟器,支持键盘、鼠标、耳麦和摄像头等设备,模拟信息输入、发送功能,以及语音、视频聊天功能等。

 

附件提供了语音的聊天功能

 

3.5 给出一个实际应用中交互设备整合应用的实例。

 

目前,包括WiiXboxPS3等实现的基于触摸或体感的游戏通过综合应用视频、音频、空间定位等技术,给出了良好的娱乐体验。

各类主题公园,科技馆等的一些展示项目也给出交互设备整合应用的成功案例。


第四章习题 参考答案

 

4.1 请列出你所熟悉的软件系统(例如Microsoft Office)中涉及到的交互技术,若有本章中没有提及的交互技术,则对其进行进一步分析。

    答:目标几乎所有的应用软件都用到了图形用户界面,因此基本上都有WIMP界面用于交互,即窗口(Windows)、图标(Icons)、菜单(Menus)、指点设备(Pointing Device)四位一体,形成桌面(Desktop)

    Microsoft Office中的许多系列软件都用到了交互技术,比如Word中就用到了定位、定值、选择、拖动等功能。

一些画图软件,比如Photoshop等,主要有定位、定值、选择、笔划等基本功能,除此之外还有一些辅助交互功能,比如几何约束、引力场、拖动、橡皮筋等功能。

    Apple系列的一些产品,比如iPhone等,主要有多点触摸等交互技术。通过屏幕的多点触摸功能获得人手指的位置,然后转化为其他交互技术,如选择、拖动等功能。

4.2 修改例4-2的代码,使之能识别中文。

4.3 测试一下Windows XP自带的语音识别程序,看其识别率能达到多少。

答:经过十五分钟的语音训练后,在word中进行语音测试,测试结果:清晰大声的朗读三个句子,共32字,word能够识别21个字;如果发音不标准或者朗读不清楚,则word能够识别的字数更少,甚至少于十个字。

4.4 Windows XP操作系统下,使用Microsoft Word,可以通过移动鼠标使用手写体输入文字。测试一下识别率。

答:如果书写规范,识别率几乎得到100%。如果书写不规范,特别是笔画连在一起,往往识别率为0

4.5 修改例4-3中的代码,可以打开以前保存的.ink文件,继续创作。

答:界面代码中增加一个Loaded事件。见代码红色部分,

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="数字墨水" Height="370" Width="550" SizeToC Closing="Window_Closing" Initialized="Window_Initialized" Loaded="Window_Loaded">

后台程序中加入以下代码即可:

private void Window_Loaded(object sender, RoutedEventArgs e)

        {

            var f = new System.IO.FileStream("pic.ink", System.IO.FileMode.OpenOrCreate);

            ink.Strokes = new System.Windows.Ink.StrokeCollection(f);

            f.Close();

        }

 

 


第五章习题 参考答案

 

5.1请简要论述界面设计的一般原则。

1)界面要具有一致性。一致性原则在界面设计中最容易被违反,同时也最容易实现和修改。风格一致的人机界面会给人一种简洁、和谐的美感。

2)常用操作要有快捷方式。常用操作的使用频度大,应该减少操作序列的长度。为常用操作设计快捷方式,不仅会提高用户的工作效率,还使界面在功能实现上简洁而高效。定义的快捷键最好要与流行软件的快捷键一致。

3)提供必要的错误处理功能。在出现错误时,系统应该能检测出错误,并且提供简单和容易理解的错误处理功能。错误出现后系统的状态不发生变化,或者系统要提供纠正错误的指导。对所有可能造成损害的动作,坚持要求用户确认。

4)提供信息反馈。对操作人员的重要操作要有信息反馈。对常用操作和简单操作的反馈可以不作要求,但是对不常用操作和至关重要的操作,系统应该提供详细的信息反馈。用户界面应能对用户的决定做出及时的响应,提高对话的效率,尽量减少击键次数,缩短鼠标移动距离,避免使用户产生无所适从的感觉。

5)允许操作可逆,。操作应该可逆,这对于不具备专业知识的操作人员相当有用。可逆的动作可以是单个的操作,也可以是一个相对独立的操作序列。对大多数动作应允许恢复(UNDO),对用户出错采取比较宽容的态度。

6)设计良好的联机帮助。虽然对于熟练用户来说,联机帮助并非必需;但是对于不熟练用户,特别是新用户来说,联机帮助具有非常重要的作用。人机界面应该提供上下文敏感的求助系统,让用户及时获得帮助,尽量用简短的动词和动词短语提示命令。

7)合理划分并高效地使用显示屏幕。只显示与上下文有关的信息,允许用户对可视环境进行维护,如放大、缩小窗口;用窗口分隔不同种类的信息,只显示有意义的出错信息,避免因数据过多而使用户厌烦;隐藏当前状态下不可用的命令。

上述7个原则都是进行图形用户界面设计应遵循的最基本的原则。除此之外,针对图形用户界面的不同组成元素,还有许多具体的设计原则。

 

5.2请描述任务分析主要包括哪些内容?

任务分析是交互设计至关重要的环节,在以用户为中心的设计中,关心的是如何从用户那里理解和获取用户的思维模式,进行充分、直观的表达,并用于交互设计;任务分析包括使用行为分析、顺序分析、协作关系分析、工序约束陈述等内容,当所有任务分析完毕,就可以用一览表的形式描述系统中的所有用户及其可能需要完成的所有任务。

 

5.3 利用本章介绍的人机交互界面设计方法,完成网上银行系统的交互界面分析和设计,包括账户查询、存款、取款、转账等业务流程。该系统要能够同时支持浏览器方式和电话银行方式(可参考互联网上实际网上银行的设计)。

提示:目前国内主要的商业银行都开发了网上银行系统,读者可以参考这些实际的网上银行系统,了解网上银行系统的主要功能,并参考其交互界面,按照对象建模分析、视图抽象设计、概要设计、视图的关联设计和视图的全面设计的顺序完成设计。

一般而言,网上银行系统需要有安全的用户登录界面,包括账户查询、转账、信用卡还款等业务处理功能。在交互界面分析中,应重点考虑银行业务对安全、准确等方面的要求,界面设计中提供必要的错误处理和充分信息反馈,并给用户便捷、足够的提示和帮助信息。


第六章习题 参考答案

6.1 Java语言实现事件处理中心管理程序。

在事件适配器中注册了一系列的事件,当需要事件触发时,在XML中为触发事件的组件添加进行监听。processEvent方法获取配置的事件类型,组合成相应的processActionEventprocessListSelection等方法,开发者继承handler中定义的processActionEvent等方法用于处理交互和业务的方法,用于完成自己的业务。由于组件可能是嵌套的,系统要通过sendActionEvnetToParent("typeQuery")将组件事件传给它所属的组件,参数是组件名,这样在外部使用时只需监听该组件的父组件就可以处理相关细节,由于嵌套的组件内部可能有不同的触发命令,通过方法中的cmd参数进行区别。

public void processActionEvent(Object o, String cmd){

        UComponentI com = (UComponentI)((ActionEvent)o).getSource();

        if(com.getComponentName().equals("queryPanel")){

               String cmd1 =  ((ActionEvent)o).getActionCommand();

               StudentQueryForm form = (StudentQueryForm) com.getHandler().getForm();

               if(cmd1.equals("typeQuery")){

                      StudentQueryHandler handler=(StudentQueryHandler) com.getHandler();

                      StudentQueryConditionForm f = handler.getStudentQueryConditionForm(form);

                      List list=getStudentListAddedDatas(f);

                      UComponentI com_stuList=this.component.getSubComponent("studentList");

com_stuList.getFilter().setAddedData(getStudentListAddedDatas(f));

                      com_stuList.updateAddedDatas();

               }

        }

}

 

6.2 Java语言实现面板输入界面的UIMS系统管理程序。

根据XML配置获取界面对应的handler,通过使用initAddedData()方法对面板中用于选择或列表的辅助数据数据进行初始化,初始化时根据XML中配置的组件名获取该组件,再取得组件对应的filter,进行初始化filter.setAddedData(a)sub.updateAddedDatas(),代码如下:

public void initAddedData() {

        stuTypeObj = getStudentTypeAddedDatas();

        collegeInfo = getCollegeAddedDatas();

        initAddedData("college", collegeInfo);

        initAddedData("studentType0", ((List) stuTypeObj[0]).toArray());

        initAddedData("studentType1", ((List) stuTypeObj[1]).toArray());

        initAddedData("studentType2", ((List) stuTypeObj[2]).toArray());

        ListOptionInfo[] infos = new ListOptionInfo[1];

        ListOptionInfo info = new ListOptionInfo();

        info.setLabel("全部");

        info.setValue("-1");

        infos[0] = info;

        initAddedData("major", infos);

}

public void initAddedData(String name, Object[] a) {

        UComponentI sub = component.getSubComponent(name);

        if (sub != null) {

               FilterI filter = sub.getFilter();

               filter.setAddedData(a);

               sub.updateAddedDatas();

        }

}

 

6.3请用GOMS模型给出一个拼图游戏的任务描述,要求用户能从给定的几种图形随机产生的需要拼接的图案

 

Task: jigsaw

GOAL: jigsaw

GOAL: Select-graph-Task repeat until jigsaw task is finished

     GOAL: SELECT-GRAPH

             select:USE-click-METHED

Select a graph from the graphs

     GOAL: CHECK-JIGSAW

              Check if the selected graph is fit

              If the graph is not fit, SELECT-NEXT-GRAPH

     GOAL: JIGSAW

              Patch up the selected graph

              SELECT-NEXT-GRAPH

                           

 

6.4请用状态转换图描述一个绘制折线的对话过程,并按照状态设计模式给出具体实现过程。

 line”选项是画直线(polyline),也就是说,用户可以选择任意点,然后系统将其连接成直线。双击鼠标确定最后一个点,在连续的鼠标点之间由“橡皮圈”相连。“curve”选项是绘制多点曲线,用户可以选择多点,用这些点做控制点绘制多点的折线。 

第七章习题 参考答案

 

7.1简述Web设计的原则。

一般的Web界面设计应该遵循如下基本原则:

1)以用户为中心:以用户为中心是Web界面设计必须遵循的一个主要原则。它要求把用户放在第一位。设计时既要考虑用户的共性,同时也要考虑他们之间的差异性。

2)一致性:Web界面设计还必须考虑内容和形式的一致性。

3)简洁与明确:Web界面设计属于设计的一种,要求简练、明确。保持简洁的常用做法是使用一个醒目的标题,这个标题常常采用图形来表示,但图形同样要求简洁。另一种保持简洁的做法是限制所用的字体和颜色的数目。

4)体现特色:只有丰富特色、内容翔实的网页才能使浏览者驻足阅读。

5)兼顾不同的浏览器:随着Internet的发展,浏览器也在不断更新。不同公司不断推出自己的浏览器,同一种浏览器在不同阶段也有不同的版本。

6)明确的导航设计:由于网站越来越复杂,导航系统变得十分必要。

 

7.2 Web界面一般包括那些主要元素以及所产生的作用。

【参考答案】

Web界面一般包括的主要元素有

(1)  内容。Web界面的内容主要包括

a.文字 :主要作为WEB界面上的描述性文字,传达相关含义;

b.框架:是页面规划的一个结构性描述,用于对页面的各种元素进行划分

c.表格:完成相应的数据展示的一种页面元素

d.图像:提供二维图片,对页面的整体美观起到一定作用

e.动画:增强和丰富页面的动态效果

f.视频:页面上嵌入的视频链接区域,用于链接到相关的视频播放地址

g.导航:实现Web网站各页面之间的连接浏览导航,主要分布翻页,跳转

h.超文本、超媒体链接:实现在不同网站之间的链接,是Web的真正魅力所在

(2)  风格: Web界面的风格是指网站的整体形象给浏览者的综合感受;

(3)  布局:Web界面布局就是指如何合理地在界面上进行内容的分布和安排,使Web页面能更符合人们的审美及表现相应的主题;

(4)  色彩 : 是指使Web界面给人以视觉冲击的色彩运用的方法和技巧;

 

7.3HTML实现交互界面。

【参考答案】

HTML</span><span style="font-size: 12pt; line-height: 150%;">登陆界面实例<span lang="EN-US">

用户登录界面

用户名:

密 码 :

确定"> ">

7.4JavaScriptJavaApplet写程序并嵌入HTML网页。

【参考答案】编写一个交互界面如下:

 

    </span></i><i><span style="font-size: 12pt; line-height: 150%;">交互表单<span lang="EN-US">

   

   

       

           

           

       

       

           

           

       

       

           

       

       

           

       

       

           

       

   

姓名:

                姓名" />

           

密码:

               " />

          

男:

                " checked="checked" />

               女:

                " />

学历:   

           

            

                读书" />读书 

                郊游" />郊游 

                跳舞" />跳舞 

                唱歌" />唱歌 

                看新闻" />看新闻 

                聚会" />聚会 

           

                  您最喜欢的格言:

               

           

                提交" value=" 提 交" /> 

                重置" value=" 重 置" />

           

 

7.5利用VRML构造一个模型,并通过浏览器能够从各个角度观察此模型,能使之简单地运动。

【参考答案】

 

左边圆球一直旋转,右侧是人物,点击黄色圆球,球可以上下跳跃。

控制面板选择study时,可以利用鼠标对整个模型的旋转。类似于自转。

选择TURNn时,进行的是在外面找个中心的类似于公转的旋转。

安装插件 CORTVRML.EXE

使用浏览器   IE

安装插件后直接集成在IE中了,如果是完整版本的IE就不用插件了,IE自己就能打开wrl格式的文件。

 

#VRML V2.0 utf8

Background { skyColor 0 1 0 }

Viewpoint { position 0 0 20 }

DEF MOVEME Transform { 

translation 2 0 0

 children [   

  DEF TOUCH TouchSensor {}    

 Shape {  

 appearance Appearance

{ material DEF MAT Material

{ diffuseColor 1 1 0 }

}

     geometry Sphere {}

     }

 

]}

DEF Cylinder Transform {

 

translation 8 0 0

children [

Shape {

appearance Appearance {

material Material { diffuseColor 1 0 0}

}

geometry Cylinder {

 radius    2.0  

  height    4.0  

  side      TRUE 

  top       TRUE 

  bottom    TRUE 

}}]}

 

DEF Cylinder2 Transform {

 

translation 7.25 -3.5 0

children [

Shape {

appearance Appearance {

material Material { diffuseColor 0 0 1 }

 

}

 

geometry Cylinder {

 radius    0.5  

  height    3.0  

  side      TRUE 

  top       TRUE 

  bottom    TRUE 

 

}

}

]

 

}

DEF Cylinder3 Transform {

 

translation 9 -3.5 0

children [

Shape {

appearance Appearance {

material Material { diffuseColor 0 0 1 }

 

}

 

geometry Cylinder {

 radius    0.5  

  height    3.0  

  side      TRUE 

  top       TRUE 

  bottom    TRUE 

 

}

}

]

 

}

DEF Sphere2 Transform {

translation 8 3 0

children [

Shape {

appearance Appearance {

 

material Material { diffuseColor 0.5 0.25 0.25}

}

geometry Sphere {}

}

]

}

DEF Cylinder4 Transform {

 

translation 5.5 1.5 0

rotation 0 0 1 1.57

children [

Shape {

appearance Appearance {

material Material { diffuseColor 0 0 1 }#颜色

 

}

 

geometry Cylinder {

 radius    0.5  

  height    8.0  

  side      TRUE 

  top       TRUE 

  bottom    TRUE 

 

}

}

]

 

}

DEF Cylinder5 Transform {

 

translation 10.5 0 0

children [

Shape {

appearance Appearance {

material Material { diffuseColor 0 0 1 }

 

}

 

geometry Cylinder {

 radius    0.5  

  height    4.0  

  side      TRUE 

  top       TRUE 

  bottom    TRUE 

 

}

}

]

 

}

Group{

children[

DEF Planet1 Transform{

translation -5 4 -10

center -1 4 -10

children Shape{

appearance DEF Red Appearance{

material Material{diffuseColor 1.0 0 0.0}

}

geometry Sphere{radius 0.2}

}

},

DEF Planet2 Transform{

translation -4.5 4 -10

center -1.5 4 -10

children Shape{

appearance DEF Green Appearance{

material Material{diffuseColor 1.0 1.0 0.0}

}

geometry Sphere{radius 0.3}

}

},

DEF Planet3 Transform{

translation -4 4 -10

center -2 4 -10

children Shape{

appearance DEF Blue Appearance{

material Material{diffuseColor 0.0 0.0 1.0}

}

geometry Sphere{radius 0.5}

}

},

DEF Planet4 Transform{

translation -3.5 4 -10

center -2.5 4 -10

children Shape{

appearance DEF Agenta Appearance{

material Material{diffuseColor 0.0 1.0 1.0}

}

geometry Sphere{radius 0.4}

}

},

DEF Clock1 TimeSensor{

cycleInterval 2.0

loop TRUE

},

DEF Clock2 TimeSensor{

cycleInterval 3.5

loop TRUE

},

DEF Clock3 TimeSensor{

cycleInterval 5.0

loop TRUE

},

DEF Clock4 TimeSensor{

cycleInterval 6.5

loop TRUE

},

DEF PlanetPath1 OrientationInterpolator{

key [0.0 0.50 1.0]

keyValue[

0.0 0.0 1.0 0.0

0.0 0.0 1.0 3.14

0.0 0.0 1.0 6.28

]

},

DEF PlanetPath2 OrientationInterpolator{

key [0.0 0.50 1.0]

keyValue[

-2 0.0 1.0 0.0

0.0 0.0 1.0 3.14

0.0 0.0 1.0 6.28

]

},

DEF PlanetPath3 OrientationInterpolator{

key [0.0 0.50 1.0]

keyValue[

0.0 0.0 1.0 0.0

0.0 0.0 1.0 3.14

0.0 0.0 1.0 6.28

]

},

DEF PlanetPath4 OrientationInterpolator{

key [0.0 0.50 1.0]

keyValue[

0.0 0.0 1.0 0.0

0.0 0.0 1.0 3.14

0.0 0.0 1.0 6.28

]

}

]

}

DEF TIMER TimeSensor

 { cycleTime 4, loop TRUE, startTime -1 }

DEF MOVER PositionInterpolator

{   key [ 0 0.5 1]  

keyValue [ 2 0 0, 2 -5 0, 2 0 0]}

DEF SCRIPT Script

{   eventIn SFBool clicked 

 eventOut SFTime startTime  

eventOut SFTime stopTime 

 field SFBool running FALSE 

 url "vrmlscript:function clicked(val,ts)

 {   if(val) {      if(running) {

 stopTime = ts;  

running = FALSE;  

   }    

 else {     

startTime = ts;  

 running = TRUE;    

 }   }}"}

ROUTE TOUCH.isActive TO SCRIPT.clicked

ROUTE SCRIPT.startTime TO TIMER.startTime

ROUTE SCRIPT.stopTime TO TIMER.stopTime

ROUTE TIMER.fraction_changed TO MOVER.set_fraction

ROUTE MOVER.value_changed TO MOVEME.translation

ROUTE Clock1.fraction_changed TO PlanetPath1.set_fraction

ROUTE Clock2.fraction_changed TO PlanetPath2.set_fraction

ROUTE Clock3.fraction_changed TO PlanetPath3.set_fraction

ROUTE Clock4.fraction_changed TO PlanetPath4.set_fraction

ROUTE PlanetPath1.value_changed TO Planet1.set_rotation

ROUTE PlanetPath2.value_changed TO Planet2.set_rotation

ROUTE PlanetPath3.value_changed TO Planet3.set_rotation

ROUTE PlanetPath4.value_changed TO Planet4.set_rotation

 

7.6利用Java3D设计简单三维迷宫场景。

【参考答案】

  给出一三维空间的地牢,要求求出由字符'S'到字符'E'的最短路径(注意只能走字符为'.'的点),移动方向可以是上,下,左,右,前,后,六个方向!每移动一次就耗费一分钟,要求输出最快的走出时间。

[输入]:

第一行是三个整数,代表地牢的层数及每层的长与宽,以下各行是各层的地图

[样例]

3 4 5

S....

.###.

.##..

###.#

 

#####

#####

##.##

##...

 

#####

#####

#.###

####E

 

1 3 3

S##

#E#

###

 

0 0 0

 

Sample Output

 

Escaped in 11 minute(s).  Trapped!  [解题分析]:一个点到另外一个点的最小步数,直接用广搜,第一次搜到另外一个点时的步数即为最小步数!

 

[代码]

 

import java.util.*;

 

class  point {//三层地牢中点的坐标

    int x;

    int y;

    int z;

    int step;//从入口到这点的时间

 

  public point(int x,int y,int z,int step){

    this.x=x;

    this.y=y;

    this.z=z;

    this.step=step;

  }

 

 

 public int  getX(){

   return this.x;

 }

 

 public int getY(){

   return this.y;

 }

 

public int getZ(){

  return this.z;

 }

 

 public int getStep(){

   return this.step;

}

      

}

 

public class Main {

  //移动方向可以是上,下,左,右,前,后,六个方向

 static int dir[][] = {{1, 0, 0}, {0, 1, 0}, {0, 0, 1}, {-1, 0, 0}, {0, -1, 0}, {0, 0, -1}};

 char map[][][];//三维地图,有三层

 int R, L, C;

 

 public Main(char map[][][],int L,int R,int C){

    this.map=map;

    this.L=L;

    this.R=R;

    this.C=C;

}

 

int bfs(int x, int y, int z) {//广度优先搜索

   

    ArrayList< point> queue=new ArrayList< point>();//ArrayList当作队列用

 

    queue.add(new point(x,y,z,0));

  

    while(queue.size()!=0) {

      

        for(int i = 0; i < 6; i++) {//从六个方向搜索

            //队头元素出队;

             point head=queue.get(0);

            int a = head.x + dir[i][0];

            int b = head.y + dir[i][1];

            int c = head.z + dir[i][2];

          

            if(a >= 0 && a < L && b >= 0 && b < R && c >= 0 && c < C && map[a][b][c] == 'E')

                return head.step + 1;//找到出口

            if(a >= 0 && a < L && b >= 0 && b < R && c >= 0 && c < C && map[a][b][c] != '#') {

                  //元素入队;

                queue.add(new point(a,b,c,head.step+1));//该位置可走

               

                map[a][b][c] = '#';//标记该处已经走过

             

            }

        }

       queue.remove(0);

    }

    return -1;

}

 

 

 public static void main(String[] args){

  Scanner in = new Scanner(System.in);

    int a, b, c;

    int L1,R1,C1;

    while(in.hasNext()) {

       L1=in.nextInt();

       R1=in.nextInt();

       C1=in.nextInt();

       if(L1==0&&R1==0&&C1==0) break;

        a = b = c = 0;

 

        char map1[][][]=new char[L1][R1][C1];

  

        for(int i = 0; i < L1; i++)

          for(int j = 0; j < R1; j++){

           map1[i][j]=in.next().toCharArray();

           for(int k=0;k< C1;k++){

                if(map1[i][j][k] == 'S') {//找到入口位置;

                    a = i;

                    b = j;

                    c = k;

                }

            }

         }

 

      

        Main m=new Main(map1,L1,R1,C1);

       

        int sum = m.bfs(a, b, c);

        if(sum != -1)

            System.out.printf("Escaped in %d minute(s).\n", sum);

        else

            System.out.printf("Trapped!\n");

    }

   }

}

 


第八章习题 参考答案

 

8.1 XHTML MP改写第8.4节的实例程序,并进一步分析WMLXHTML MP进行移动界面设计的优劣。

答:本习题需要学生了解掌握XHTML MP的基本语法及其与WML的主要区别。尽管WMLXHTML MP有很多功能是相同的,但是并非一一对应,所以转换前后的显示效果可能会有区别。对比分析着重分析用于移动界面设计的兼容性、灵活性与美化效果。

 

8.2 测试同一WAP应用在不同模拟器环境中的运行结果,并进一步测试在实际的手机上的运行效果。

答:学生需要安装多种模拟器,实验同一WAP应用的运行效果并进行比较。

    配置WEB服务器,使其支持WAP应用,并使用实际手机的WAP浏览器访问测试运行效果

 

8.3 将图8-13中的流程图补充完善,并基于这个流程,参考本章的设计方法,使用J2ME实现一个手机游戏,并总结游戏设计中可能涉及到的可用性问题。

答:补充主要体现在“选项”和“积分榜”等条目的下一级菜单导航。

    实现的游戏可以在该流程的基础自由选题,根据自己的体会总结手机游戏界面设计中的可用性问题。


第九章习题 参考答案

 

9.1请举出你在学习和生活中遇到的成功与失败的可用性案例。

提示:可以从软件设计和日用产品设计中寻找类似的例子。

 

9.2请简述支持可用性的设计原则。

在设计交互系统时有一些可以提高可用性的基本原则,这些原则分为三大类:

1)可学习性:新用户能否很容易地学会交互和达到最佳交互性能。

2)灵活性:用户和系统之间信息交流的方式是否灵活多样。

3)鲁棒性:体现为用户能不能成功达到交互目标和能不能对达到的目标进行评估。

 

9.3请举例说明两种以上的可用性评估方法。

1)用户测试就是让用户真正去使用软件系统,由试验人员对实验过程进行观察、记录和测量。这种方法可以准确地反馈用户的使用表现,反映用户的需求,是一种非常有效的方法。用户测试可分为实验室测试和现场测试。目前,许多软件系统开发完成后,会在小范围内试用,并派出专人收集用户的使用反馈信息;又如,众多网络游戏公司在推出新版游戏时,往往会提供公测版本,请用户试玩和反馈。

2)在软件推出后,还可以使用问卷调查的方式来收集用户的实际使用情况,了解用户的满意程度和遇到的问题;利用收集到的信息,不断的改进和提高软件的质量和可用性。调查问卷需要认真的设计,可以是开放式的问题,也可以是封闭的问题,但必须措辞明确,避免有可能误导的问题,以确保收集的数据有较高的可信度。目前,有一些网站在改版时,会就网站的布局、色彩和字体等设计问卷,先行征询用户意见,并根据用户反馈,在正式推出时体现多数用户的喜好。

 

9.4利用本章介绍的可用性评估方法,分析自己在习题5.3中设计完成的系统的可用性。可以请同学担当用户进行测试,或设计一个用户调查问卷进行评估。

本题需要读者结合习题5.3的结果,并根据9.3.5节的QUIS问卷模型设计用户调查问卷。

提示:由于并没有实际系统,还需要读者讲解系统的界面设计思想,请同学充分理解后,再完成用户调查问卷。