第9章交互结构的设计 91交互结构概述一人机的互动 9.1.1交互图标与交互结构 交互结构可以借助交互图标③来实现。 当程序运行中遇到一个交互图标时，系统将先显示这个图标中包含的文字、图像等提示 用户动作的信息，然后就会静待用户的参与动作，这称为交互的响应。当用户以某种方式响 应后，系统立刻将响应的类型与交互图标挂接的各分支的响应条件一一比较，找到与之相匹 配的条件，对用户的动作自动作出反馈，然后根据情况决定程序流向。 交互结构的执行过程一般可分为三个阶段： 1,显示信息并等待用户执行动作的阶段。 2,产生响应匹配的阶段。 3.交互响应结束阶段。 [实例9.1]NBA队徽测试-1 回祸91西队意测试.a7印 回区 Level 1 南队章胭 西限选…日回冈 南尚面回 限选择2改 Level 2 面黎碎队微 right 评说 南得分 评说 评说 南奇语 南 答案 西 蓝球小千 图9.1例9-1-NBA队徽测试程序
1 第 9 章 交互结构的设计 9.1 交互结构概述——人机的互动 9.1.1 交互图标与交互结构 交互结构可以借助交互图标 来实现。 当程序运行中遇到一个交互图标时，系统将先显示这个图标中包含的文字、图像等提示 用户动作的信息，然后就会静待用户的参与动作，这称为交互的响应。当用户以某种方式响 应后，系统立刻将响应的类型与交互图标挂接的各分支的响应条件一一比较，找到与之相匹 配的条件，对用户的动作自动作出反馈，然后根据情况决定程序流向。 交互结构的执行过程一般可分为三个阶段： １．显示信息并等待用户执行动作的阶段。 ２．产生响应匹配的阶段。 ３．交互响应结束阶段。 [实例 9.1] NBA 队徽测试-1 图 9.1 例 9-1-NBA 队徽测试程序
请选出东方小巨人的NBA队徽 A 这是明尼苏达森林狼队！ 这是火箭队的旧队管， 答案 这才是火箭风的新风藏4 你已经用完两次机会啦上 图9.2例9-1-NBA队徽-1测试运行效果 9.1.2.创建交互结构的基本操作 把一个交互图标安排到流程图上，然后将供选择的各分支路径图标一一挂到交互图标的 右下方，即形成了一个交互结构。 回典型的交互结构.a7和 回回☒ Level！ 交互响应类型符号 「回回南 交互响陈分支名 分支德转方式符号 正误响应状志跟踪标志 图9.3典型的交互结构 创建一个交互结构的基本操作步骤如下： 1.拖曳一个交互图标至程序流程线的指定位置。 2.拖曳一个或几个交互响应图标到交互图标的右下方以建立交互分支，并在弹出的对话 框中为它们选择所需的交互类型。 3.单击各分支交互响应图标上方的交互响应方式符号，在屏幕下方的对话框中进行该交 互响应的属性设置。 4.双击各分支上的交互响应图标，对其作进一步的编辑，以设计针对用户的不同动作系 统给出的各种回应信息。 [实例9.2]轻风车影
2 图 9.2 例 9-1-NBA 队徽-1 测试运行效果 9.1.2.创建交互结构的基本操作 把一个交互图标安排到流程图上，然后将供选择的各分支路径图标一一挂到交互图标的 右下方，即形成了一个交互结构。 图 9.3 典型的交互结构 创建一个交互结构的基本操作步骤如下： 1．拖曳一个交互图标至程序流程线的指定位置。 2．拖曳一个或几个交互响应图标到交互图标的右下方以建立交互分支，并在弹出的对话 框中为它们选择所需的交互类型。 3．单击各分支交互响应图标上方的交互响应方式符号，在屏幕下方的对话框中进行该交 互响应的属性设置。 4．双击各分支上的交互响应图标，对其作进一步的编辑，以设计针对用户的不同动作系 统给出的各种回应信息。 [实例 9.2]轻风车影
8 轻风车影南京菲亚特利奥 清选择您心仪的轿车. 图9.4例9-2-轻风车影运行效果 程序设计的步骤如下： 四轻风车影.7D 回☒ Level 1 招越者-小p 威乐-小.p8 回单击 回x ☒派利奥-小.pg Level2 面模拟按钮-退出 单击 选车 单} ③ 2 画画回回画 南相越者.jp 白结束 图9.5例9-2-轻风车影程序 1.设置程序的基本参数。 2.从配套光盘原文件夹中分别选取三个汽车小图一一输入。 3.拖曳一个交互图标®至显示图标下方。 4.先后拖曳两个群组图标到交互图标的右下方建立两条交互分支，然后分别为它命名为 “提示1”、“单击1”，交互类型为“Hot Object”。 5。单击“提示1”分支图标上方的交互响应方式符号米，进行该交互响应的属性设置。 然后复制“提示1”图标并在它右边粘贴另外两个继承了它所有属性的图标，分别命名为“提 示2”、“提示3”。 6.单击“单击1”分支图标上方的交互响应方式符号※，在屏幕下方的对话框中进行 该交互响应的属性设置。 9.1.3.交互图标的各项属性设置 单击选中流程线上的交互图标，在设计窗口下方将自动打开交互图标的属性设置对话框
3 图 9.4 例 9-2-轻风车影运行效果 程序设计的步骤如下： 图 9.5 例 9-2-轻风车影程序 1．设置程序的基本参数。 2．从配套光盘原文件夹中分别选取三个汽车小图一一输入。 3．拖曳一个交互图标 至显示图标下方。 4．先后拖曳两个群组图标到交互图标的右下方建立两条交互分支，然后分别为它命名为 “提示１”、“单击１”，交互类型为“Hot Object”。 5．单击“提示１”分支图标上方的交互响应方式符号 ，进行该交互响应的属性设置。 然后复制“提示１”图标并在它右边粘贴另外两个继承了它所有属性的图标，分别命名为“提 示 2”、“提示 3”。 6．单击“单击１”分支图标上方的交互响应方式符号 ，在屏幕下方的对话框中进行 该交互响应的属性设置。 9.1.3.交互图标的各项属性设置 单击选中流程线上的交互图标，在设计窗口下方将自动打开交互图标的属性设置对话框
里面包含四个选项卡，其中Display、Layout、CM、Interaction。 ,Properties:Interaction Icon交互结约] D:65543 校互结构 Size:64 Mod:2004-3-2 (Interaction) Display Layout CHI Ref.byNo Erase:Upon Exit ® Erase None Options:Pause Before Exiti ■Show Bntt Text field Open 图9.6交互图标的属性设置对话框 Interaction选项卡中的选项如下： l.Erase此选项提供了擦除交互图标中显示内容的不同方式，共有以下三种： ·Upon Exit: ·After Next Entry: ·Don't Erase: 2.Erase: 3.Options: ·Pause Before Exit: ·Show Button: 9.1.4.各分支响应类型和参数设置 设置了交互图标，还需要为交互图标挂接各分支，以构成一个完整的交互结构。 1.拖曳一个图标到流程线上交互图标的右下方，建立交互的一个响应分支，在交互响应 类型选择对话框中选择一种响应类型。 Response Type Sutton CText Entry OK CHot Spot C Tries Linit Cancel CHot Object CTarget hrea C Tine Linit CPull-dovn Menu ECEvent Conditional Help 图9.7交互响应类型选择对话框 2.单击这个响应图标上方的响应类型标记，设置有关参数。 Properties:Response[按组A灯 按钮A Type:Button 、@ 按钮A Button Response Scope:■Perpetue1 Status:Not Judged Buttons... Active If: 百 Erase:After Next Entry Score: Open Branch:Try Again 图9.8交互响应属性对话框 在不同响应类型的交互响应属性对话框中，位于中间的主体部分都是两个选项卡，其中 一个是本响应类型所特有的属性：另外一个则是各种响应类型所共有的属性，即关于响应本 身的属性设置，名为“Response”。 Response选项卡中的各个选项。 1.Scope:
4 里面包含四个选项卡，其中 Display、Layout、CMI、Interaction。 图 9.6 交互图标的属性设置对话框 Interaction 选项卡中的选项如下： 1. Erase 此选项提供了擦除交互图标中显示内容的不同方式，共有以下三种： ·Upon Exit： ·After Next Entry： ·Don't Erase： 2. Erase : 3. Options： ·Pause Before Exit： ·Show Button： 9.1.4.各分支响应类型和参数设置 设置了交互图标，还需要为交互图标挂接各分支，以构成一个完整的交互结构。 1.拖曳一个图标到流程线上交互图标的右下方，建立交互的一个响应分支，在交互响应 类型选择对话框中选择一种响应类型。 图 9.7 交互响应类型选择对话框 2.单击这个响应图标上方的响应类型标记，设置有关参数。 图 9.8 交互响应属性对话框 在不同响应类型的交互响应属性对话框中，位于中间的主体部分都是两个选项卡，其中 一个是本响应类型所特有的属性；另外一个则是各种响应类型所共有的属性，即关于响应本 身的属性设置，名为“Response”。 Response 选项卡中的各个选项。 1. Scope：
Properties:esponse[校钮A 按钮A Type:Button -③ 按钮A Button Response (Scope:Perpetual Active If: Status:Not Judged Buttons... 臣 Erase: After Next Entry Score: Open Branch:Try Again 9 图9.9交互响应的作用范围设置 2.Active If: 乡，Properties:直e5pun5eL按钮A们 按钮A Type:Button 按钮A Button Response Scope:厂Perpetual Active If:Within0“交互结构1“ Status: Not Judged Buttons.. Erase:After Next Entry Score: Open Branch:Try Again 图9.10交互响应的激活条件设置 3.Erase: Properties:&esponse[按钮A】 按钮A Type:Button ② 按钮A Button Scope Before Next Entry Active If On Exit Status: Not Judged Buttons... 百 Don't Erase Erase:After Next Entry Score: Open Br anch: Try Again 图9.11分支擦除方式设置 在Erase的下拉菜单中，有关选项如下： After Next Entry ·Before Next Entry ·On Exit ·Don't Erase 4.Branch:分支跳转类型的选择 Properties:Besponse [A] 按团A Type:Button -⊙ 按钮A Button Response Scope: Active If Status: Not Judged Buttons... 再 Erase Egit Interaction Return Score Open Branch:Try Again 图9.12分支跳转类型设置 在Branch的下拉菜单中，有关选项如下： ·Try again ·Continue ·Exit Interaction ·Return 5.Status: 5
5 图 9.9 交互响应的作用范围设置 2. Active If： 图 9.10 交互响应的激活条件设置 3. Erase： 图 9.11 分支擦除方式设置 在 Erase 的下拉菜单中，有关选项如下： ·After Next Entry ·Before Next Entry ·On Exit ·Don't Erase 4. Branch：分支跳转类型的选择 图 9.12 分支跳转类型设置 在 Branch 的下拉菜单中，有关选项如下： ·Try again ·Continue ·Exit Interaction ·Return 5. Status:
Properties: &esponse[按纽A 按钮A Type:Button 按钮A Button Response Scope:Perpetual Active If: Buttons... 臣 Status:Not Judged Erase: After Next Entry Score: Not Judged Correct Response Open Branch:Try Again Wrong Response 图9.13响应正误状态设置 在Status的下拉菜单中，有关选项如下： ·Not Judged 此选项为缺省选择，如不进行自动统计则一般不需自动判断正误。 ·Correct Response ·Wrong Response 6.Score:用户响应动作得分（图9.14响应得分设置） 多~Properties:Bes争onse[按钮A灯 按团A Type:Button ③ 按钮A Button Response Scope:厂Perpetual Active If: Status: Correct Response Buttons... 百 Erase After Next Entry Score: Open Branch:Try Again 图9.14响应得分设置 9.1.5.各分支的反馈信息设置 程序设计的步骤如下： 1.设置程序的基本参数。 2.从配套光盘原文件夹中分别选取背景图、队徽图一一输入。双击它们打开预演窗口调 整好显示位置。 3 3.拖曳一个交互图标 至显示图标下方，然后为它命名，输入提示用户选择答案的 信息。 4.拖曳一个群组图标到交互图标的右下方建立一条交互分支，然后为它命名为“A”, 交互类型“Button”; 5.单击“A”分支图标上方的交互响应方式符号口 ,在屏幕下方的对话框中进行该交 互响应的属性设置。然后复制“A”图标并在它右边粘贴另外两个继承了它所有属性的图标， 分别命名为“B”、“C”。 6.建立限次分支。交互响应方式符号改变为 7.为各分支设置执行后的程序执行流向。 8.为三个按钮类型分支设置用户响应动作的正误状态和得分。 9.为各分支设计系统在接受了用户的某一选择后提供给用户的反馈信息。 10.在流程线交互结构下面加入擦除图标，擦除屏幕上的队徽。加入显示图标，在其中 输入系统提供给用户的得分情况。 6
6 图 9.13 响应正误状态设置 在 Status 的下拉菜单中，有关选项如下： ·Not Judged 此选项为缺省选择，如不进行自动统计则一般不需自动判断正误。 ·Correct Response ·Wrong Response 6. Score：用户响应动作得分（图 9.14 响应得分设置） 图 9.14 响应得分设置 9.1.5.各分支的反馈信息设置 程序设计的步骤如下： 1．设置程序的基本参数。 2．从配套光盘原文件夹中分别选取背景图、队徽图一一输入。双击它们打开预演窗口调 整好显示位置。 3．拖曳一个交互图标 至显示图标下方，然后为它命名，输入提示用户选择答案的 信息。 4．拖曳一个群组图标到交互图标的右下方建立一条交互分支，然后为它命名为“A”， 交互类型“Button”； 5．单击“A ”分支图标上方的交互响应方式符号 ，在屏幕下方的对话框中进行该交 互响应的属性设置。然后复制“A” 图标并在它右边粘贴另外两个继承了它所有属性的图标， 分别命名为“B”、“C”。 6．建立限次分支。交互响应方式符号改变为 ； 7．为各分支设置执行后的程序执行流向。 8．为三个按钮类型分支设置用户响应动作的正误状态和得分。 9．为各分支设计系统在接受了用户的某一选择后提供给用户的反馈信息。 10．在流程线交互结构下面加入擦除图标，擦除屏幕上的队徽。加入显示图标，在其中 输入系统提供给用户的得分情况
9.1.6.交互响应的类型 9.2按钮响应类型—一形形色色的按钮 9.2.1按钮响应类型(Button)的属性设置 [实例9.3]多彩按钮 缺省 0 独使国 按钮样式举例列 求门● 行束 第一章编译程序极困 图9.15例9-3-多彩按钮运行效果 回按钮样式举例.a7n 口回☒ 面标题 Level 1 行大按钮选择 早弹头 甸甸甸甸甸 照片索3引 -4-1-L 图9.16例9-3-多彩按钮程序 在按钮响应方式的属性设置对话框中，Button选项卡的选项如下： Properties:Besponse [A] Type:Button ② A Button Response Size:33 23 Kev(s): Buttons... 画 Location:481 231 Option:Make Default Cursor:NA 厂Hide When Inact Open Label: 图9.17按钮响应方式的属性设置 1.Size 2.Location >
7 9.1.6. 交互响应的类型 9.2 按钮响应类型——形形色色的按钮 9.2.1 按钮响应类型（Button）的属性设置 [实例 9.3] 多彩按钮 图 9.15 例 9-3-多彩按钮运行效果 图 9.16 例 9-3-多彩按钮程序 在按钮响应方式的属性设置对话框中，Button 选项卡的选项如下： 图 9.17 按钮响应方式的属性设置 1. Size 2. Location
3.label 4.Key(s) 5.Options包括两项。 ·Make Default: ·Hide When Inact:. 6.Cursor Standard Cursor + Standard Cursor SetCurzor(2) Standard Curaor SetCursor(4) Standard Curso Standard Curaor 5etCe自r6) M4.00YG 图9.18鼠标样式列表 此外，属性对话框中还有其他几项： ·Title ·Type ·Open ·Buttons..·· Bncrittion B 回 dooa1n A a gnatat D8 44 图9.19按钮选择对话框 在按钮选择对话框中单击Add按钮，打开一个按钮编辑对话框。 国屋 Qywr 回圆 41年54 ktastiedly edk 图9.20按钮编辑对话框 从对话框中我们看到，在常规情况下（左边Normal下的一列）每个按钮都可以设置四
8 3. label 4. Key(s) 5. Options 包括两项。 ·Make Default： ·Hide When Inact： 6. Cursor 图 9.18 鼠标样式列表 此外，属性对话框中还有其他几项： ·Title ·Type ·Open ·Buttons... 图 9.19 按钮选择对话框 在按钮选择对话框中单击 Add 按钮，打开一个按钮编辑对话框。 图 9.20 按钮编辑对话框 从对话框中我们看到，在常规情况下（左边 Normal 下的一列）每个按钮都可以设置四
种状态，这些固有状态正是按钮的基本特征。 9.2.2按钮的改进 [实例9.4]NBA队徽测试-2 回 图9.21为NBA队徽制作按钮 打开按钮编辑对话框。 分别导入up、down、over状态的图片，并位置加入声音。同样可将准备好的其他图片和 一个比较沉闷的声音文件“Chord.wav”赋予另外两个按钮。 请选出东方小巨人的NBA队徽， 这是明尼苏达森林狼队！ 这是火箭队的旧刷鑽！ 答案 这才是火箭队的新队藏 你已经用完两次机会啦k 图9.22例9-4-NBA队徽测试-2运行效果 9.2.3按钮状态的灵活切换 [实例9.5]视频播放暂停切换 9
9 种状态，这些固有状态正是按钮的基本特征。 9.2.2 按钮的改进 [实例 9.4] NBA 队徽测试-2 图 9.21 为 NBA 队徽制作按钮 打开按钮编辑对话框。 分别导入 up、down、over 状态的图片，并位置加入声音。同样可将准备好的其他图片和 一个比较沉闷的声音文件“Chord.wav” 赋予另外两个按钮。 图 9.22 例 9-4-NBA 队徽测试-2 运行效果 9.2.3 按钮状态的灵活切换 [实例 9.5] 视频播放暂停切换
图9.23例9-5-视频播放暂停切换运行效果 程序设计的主要步骤如下： 回销9一5-视频措放暂停切换，卫 回X☒ 昌aR时 Level 1 鹵tw 电视剧 回播放/暂停 日▣☒ ·口X昼掉 ediaPause(B"电视"，Checked0"韬ǔ/皙停r】 开关 播放/暂停 2:1 Insert 图9.24例9-5-视频播放暂停切换程序 1.设置程序的基本参数，在其后的显示图标“TV”中输入一幅电视机图片。 2.建立一个数字电影图标，为它输入一个视频图像文件“电视剧频道.mg”,参数设置 如图所示。 ID:65547 电视刷 ⊙ 乳 Size:276 Mod:2004-4- Timing Layout Ref.byYe Coneurrency: Perpetual Rate: EDS 厂Flay Every Framo ■ 画 Repeatedly Start 1 Frane 445 of1000 Inport... End Frane: 图9.25数字电影播放设置 3.建立一个交互图标，设置一条交互分支，按钮类型。 4.为按钮设置状态。 Butten Iditer Import Which File? ▣]回 开 n 回⑧ aad口☒] 文件名的：开净： Graphdei Use Eaported 取 L桶2：sr5p1ia o
10 图 9.23 例 9-5-视频播放暂停切换运行效果 程序设计的主要步骤如下： 图 9.24 例 9-5-视频播放暂停切换程序 1．设置程序的基本参数，在其后的显示图标“TV”中输入一幅电视机图片。 2．建立一个数字电影图标，为它输入一个视频图像文件“电视剧频道.mpg”,参数设置 如图所示。 图 9.25 数字电影播放设置 ３．建立一个交互图标，设置一条交互分支，按钮类型。 4．为按钮设置状态