第四章 人机交互技术 山东大学计算机学院.

Presentation on theme: "第四章 人机交互技术 山东大学计算机学院."— Presentation transcript:

1 第四章 人机交互技术 山东大学计算机学院

2 内容提要 命令行和文本菜单 图形用户界面 多通道用户界面 汉字信息处理 Lecture 4

3 4.1人机交互技术概述 人机交互技术发生的历史及发展趋势 根据用户界面的具体形式 分为批处理； 联机终端(命令接口)； 文本菜单；
WIMP界面； 多媒体用户界面； 多通道用户界面和虚拟现实用户界面。 Lecture 4

4 4.1人机交互技术概述 人机交互技术发生的历史及发展趋势 根据根据用户界面中信息载体的类型 文本为主的字符用户界面(CUI)
二维图形为主的图形用户界面(GUI) 多媒体用户界面 Lecture 4

5 4.1人机交互技术概述 人机交互技术发生的历史及发展趋势 根据计算机输出信息的形式 以符号为主的字符界面 以视觉感知为主的图形用户界面
兼顾听觉感知的多媒体用户界面 综合运用多种感观(包括触觉等)的虚拟现实技术 Lecture 4

6 4.1人机交互技术概述 人机交互技术发生的历史及发展趋势 根据人机界面中的信息维度
人机交互技术可以分为一维信息(主要指文本流，如早期电传式终端); 二维信息(主要是二维图形技术，利用了色彩、形状、纹理等信息); 三维信息(主要是三维图形技术，但显示技术仍利用二维平面为主); 多维信息(多通道的多维信息)空间。 Lecture 4

7 4.1人机交互技术概述 人机交互技术发生的历史及发展趋势 根据人机交互中采用的语言 形式语言： 类自然语言： 自然语言：
形式语言是一种人工语言，特点是简洁、严密、高效 类自然语言： 类自然语言则是介于计算机语言和自然语言之间 自然语言： 自然语言的语法成分有更多的规则，具有多义性、微妙、丰富、灵活的特点 Lecture 4

8 4.2命令行和文本菜单技术 4.2.1 命令行 在计算机硬件技术发展的早期阶段，图形显示器、鼠标等设备还没有出现，人机交互方式只能是命令和询问方式。 用户输入文本命令，系统也以文本的形式表示对命令的响应。这种人机界面称为命令行界面，是第一代人机界面。 Lecture 4

9 命令行界面概念模型 人： 操作员 机器：被动反应 界面输出：静态文本字符 使用手对键盘输入数据或者命令信息，通过视觉通道获取信息
Lecture 4

10 命令行界面优缺点 缺点： 优点： 界面和应用没有分开； 用户需要记忆很多命令，且输入命令需严格遵守语法规则；
界面不友好，难于学习，错误处理能力弱，交互自然性差 优点： 适合熟练专业用户使用，工作效率高。目前大多数OS依然保留了命令行方式。

11 命令行交互界面 操作系统MS-DOS是文本命令行交互界面。
例如，需要将所有扩展名为“.AAA”的文件替换为扩展名为“.BBB”，如果在“我的电脑”或“WINDOWS资源管理器”中，需要一个一个地去查找、改名，操作的局限性是显而易见的。利用命令rename [drive:][path] filename1 filename2或ren [drive:][path] filename1 filename2，使用通配符“*”或“？”，就可以方便地更改一组文件名或扩展名。 Lecture 4

12 命令行交互界面 不同的操作系统要用不同的命令进入命令行界面。 批处理文件（也称为批处理程序或脚本）。
在Win9x/Me的开始菜单中的运行程序中键入“command”命令，可进入命令行界面。 在Win2000/NT的开始菜单中的运行程序中键入“cmd”命令，可进入命令行界面。 批处理文件（也称为批处理程序或脚本）。 批处理文件是无格式的文本文件，包含一条或多条命令，文件扩展名为 “bat”或“cmd”。 命令行 键入批处理文件名，cmd.exe执行 批处理文件中可使用for, goto, if命令，可调用其他批处理文件 Lecture 4

13 批处理命令实现FTP文件自动传输 本机：Windows OS, 需文件传输目录C:\localdata
对方计算机：Unix OS， IP ，文件接收目录 C:\data，登录用户名Zhangsan，口令123456 本机从对方计算机接收文件操作方法： test.ftp test.bat Open User Zhangsan 123456 cd data bin //二进制码格式传输文件 prompt mget //如本机向对方发送文件，用mput bye quit exit cd localdata ftp –n –s:”c:\test.ftp” //-n表示在建立初始连接后禁止自动登录功能 将bat文件放在“任务计划”中，并设定自动运行，指定执行周期

14 4.2.2文本菜单 字符界面下的菜单方式：在菜单方式下用户必须在有限的一组选项中进行识别和选择，更多的是响应而不是发出命令。
在这种界面中，人还是被看成操作员，机器做出被动的反应，人只能使用手这一交互通道用键盘输入选择信息，通过视觉通道获取信息，界面输出只能为静态的文本字符。 Lecture 4

15 文本菜单优缺点 优点： 缺点： 用户不必记忆功能命令，缩短了用户的培训时间，减少用户的击键次数，错误处理能力也有了显著提高。
菜单层次过多，选项过于复杂，用户须逐级选择，不能一步到位，交互过程太慢。

16 文本菜单的设计 设计基于文本菜单的系统主要包括两方面的工作： 【例4-2】图书管理程序的主菜单的Java语言代码 菜单的生成和显示
内部流程的控制及错误处理。 【例4-2】图书管理程序的主菜单的Java语言代码 Lecture 4

17 public class MenuDemo{ static void display_mainmenu() {
import java.io.*; public class MenuDemo{ static void display_mainmenu() { System.out.print(“\n\n\t\t<<维护子菜单>>\n\n”); System.out.println (“\t1--注册借书者”); System.out.println (“\t2--注册图书”); ……. System.out.println (“\t0--返回主菜单”); } public static void main(String args[]) throws Exception{ boolean quit=false; char ch; do { display_mainmenu(); ch = (char)System.in.read(); switch (ch) { …….//调用相应的处理函数 }while(!quit); Sytem.in.read(); Lecture 4

18 4.3图形用户界面（GUI） 图形用户界面又称为WIMP界面，由窗口(Windows)、图标(Icons)、菜单(Menus)、指点设备(Pointing Device)四位一体，形成桌面(Desktop)。 WIMP界面概念模型 Lecture 4

19 4.3图形用户界面特点 图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。
窗口管理系统除了基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(Event-Driven)技术。 能同时输出不同种类的信息，用户也可以在几个工作环境中切换而不丢失它们之间的联系，通过菜单可以执行控制型和对话型任务。 由于引入了图标、按钮和滚动条技术，大大减少键盘输入，提高了交互效率。 Lecture 4

20 4.3图形用户界面特点 WIMP界面可看作是第二代人机界面，是基于图形方式的人机界面。
用户只能使用手这一种交互通道输入信息，通过视觉通道获取信息。 在WIMP界面中，界面的输出可以为静态或动态的二维图形或图像等信息。 Lecture 4

21 4.3.1图形用户界面的主要思想 图形用户界面的三个重要思想 桌面隐喻(desktop metaphor)
所见即所得（What You See Is What You Get，WYSIWYG） 直接操纵(Direct manipulation) Lecture 4

22 1.桌面隐喻(desktop metaphor)
桌面隐喻是指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。 图形具有一定的文化和语言独立性，可以提高搜索目标的效率。 图形用户界面中的图例可以代表对象、动作、属性或其他概念。 表达方式：图例和文字 文字适用于表达某些抽象概念 图例更易于识别，占用较少屏幕空间，可独立于语言 Lecture 4

23 隐喻的表现方法 静态图标 动画 视频

24 隐喻的分类 直接隐喻：隐喻本身就带有操纵的对象 工具隐喻：代表所使用的工具 过程隐喻：通过描述操作的过程来暗示该操作
如Word中的表格、图表等图标，图标分别代表了操纵对象。 工具隐喻：代表所使用的工具 如用磁盘图标隐喻存盘操作、用打印机图标隐喻打印操作等，这种隐喻设计简单、形象直观，应用也最为普遍。 过程隐喻：通过描述操作的过程来暗示该操作 如Word中的撤销和恢复图标。 Lecture 4

25 晦涩的隐喻不仅不能增加可用性，反而会弄巧成拙。
隐喻的主要缺点 需要占用屏幕空间 难以表达和支持比较抽象的信息。 Lecture 4

26 桌面隐喻示例 1993面世的Windows 3.11的界面 桌面 — 还有更好的方法表示实体的桌面吗?在我看来，其中细微到眼镜的反射都是很精致的。 声音 — 在图标中使用眼睛作为元素很常见，但是加上耳朵则很少见 游戏 — 黑桃上的眼睛虽然才几个像素，但却是点睛之笔

27 1996年发布的OS/2 Warp 4中，3D的图标出现，只有16色。
桌面 — 那个绿色的复古台灯让人颇有感触。 程序 —一个布满了盒子、书本和纸牌的书架。 回收站 — 错误的图标设计？

28 2000年的BeOS R5，划时代的多媒体操作系统 桌面 —绿色的台灯，桌子更真实，而且整个图标也更加3D了。
浏览器 — 很好地演绎了“上网冲浪”的概念，但可能在不同的文化地域中理解会有偏差 文件管理器 — 他们用这个图标告诉你“让我来帮你找文件吧!”

29 2005年Mac OS X Automator Automator是用来帮助用户创建脚本以自动完成某些任务。比起其他用鼠标指针、按钮之类来表示的同类软件图标，这个机器人小助手能更好地帮你理解软件的实际用途。

30 VLC Media Player 因为软件的开发者，来自École Centrale Paris的学生们有收集交通路障的癖好，于是他们就用软件图标来纪念自己的爱好。

31 Mac OS X Front Row是Mac OS X中的原生播放器
舒服地坐着，然后好好地接受视听享受吧!但是一般来讲，多媒体播放器比较难用单一的隐喻来表示，所以这个图标未必是未来的趋势。

32 Roxio Toast是Mac刻录软件标准
这可以算得上图标历史上最杰出的隐喻之一了。烤面包机远比同类软件使用的激光符号来的容易理解并且更恰当。

33 Transmit — Mac OS X上的FTP客户端软件。
一部卡车载着5吨的DVD光盘从A地运到B地，他的数据传输速率是多少字节呢? 当你把文件拖进去之后，他会在一条虚拟的路上载着文件开出去。

34 Twitterrific — 微博网站Twitter的客户端软件
这个隐喻的出发点是英语中的tweet是小鸟唱歌的意思，这个叽叽喳喳的小鸟图标很有原创性，但也非常的简洁。

35 Mac OS X中代表PC的图标 这是Apple的设计师们开的一个不大不小的玩笑，有一点点粗俗，但却比较形象

36 2.所见即所得（WYSIWYG） 在WYSIWYG交互界面中显示的用户交互行为与应用程序最终产生的结果是一致的。
非WYSIWYG的编辑器，用户只能看到文本的控制代码，对于最后的输出结果缺乏直观的认识。（latex编辑器） Lecture 4

37 WYSIWYG的弊端 如果屏幕的空间或颜色的配置方案与硬件设备所提供的配置不一样，在两者之间就很难产生正确的匹配。
文本处理器都提供了定义章、节、小节等的标记，这些标记显式地标明了对象的属性，但并不是用户最终输出结果的一部分。

38 3.直接操纵(Direct manipulation)
直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。 直接操纵的对象是命令、数据或是对数据的某种操作。 Lecture 4

39 直接操纵的特性 直接操纵的对象是动作或数据的形象隐喻 形象隐喻应该与其实际内容相近，使用户能通过屏幕上的隐喻直接想象或感知其内容。
用指点和选择代替键盘输入 优点：操作简便，速度快捷。 操作结果立即可见 操作结果立即可见，用户可以及时修正操作，逐步往正确的方向前进。 支持逆向操作 用户在使用系统的过程中，不可避免地会出现一些操作错误，通过逆向操作，用户可以很方便地恢复到出现错误之前的状态。 Lecture 4

40 直接操纵的优缺点 优点： 借助物理的、空间的或形象的表示，而不是单纯的文字或数字的表示。依赖于视觉和手动控制的参与，可以直接操作，有利于解决问题和进行学习。 缺点： 不具备命令语言界面的某些优点。 例如从用户界面设计者角度看，设计图形比较繁琐，需进行大量的测试和实验。 表示复杂语义、抽象语义比较困难。 Lecture 4

41 4.3.2设计图形用户界面的原则 1.一般性原则 2.窗口的设计 3.颜色的使用 4.图标的设计 5.按钮的设计 6.屏幕布局的设计
7.菜单界面的设计 8.填表输入界面的设计

42 1. 一般性原则 界面要具有一致性: 常用操作要有快捷方式: 提供简单的错误处理 : 对操作人员的重要操作要有信息反馈:
在同一用户界面中，所有的菜单选择、命令输入、数据显示和其他功能应保持风格的一致性。 常用操作要有快捷方式: 不仅会提高用户的工作效率，还使界面在功能实现上简洁而高效。 提供简单的错误处理 : 在出现错误时，系统应该能检测出错误，并且提供简单和容易理解的错误处理功能 对操作人员的重要操作要有信息反馈: 尤其是对不常用操作、至关重要操作要有信息反馈。 Lecture 4

43 1. 一般性原则 操作可逆: 设计良好的联机帮助: 合理划分并高效地使用显示屏:
对大多数动作应允许恢复(UNDO)，对用户出错采取比较宽容的态度。 设计良好的联机帮助: 人机界面应该提供上下文敏感的求助系统，让用户及时获得帮助，尽量用简短的动词和动词短语提示命令。 合理划分并高效地使用显示屏: 只显示与上下文有关的信息，允许用户对可视环境进行维护，如放大、缩小窗口；用窗口分隔不同种类的信息，只显示有意义的出错信息。 保证信息显示方式与数据输入方式的协调一致，尽量减少用户输入的动作，隐藏当前状态下不可用的命令，允许用户自选输入方式，能够删除错误的输入，允许用户控制交互过程。 Lecture 4

44 Badboythemer设计的Nokia Vista手机主题界面。

45 2.窗口（Windows）的设计 GUIs are windowing interfaces:
they use rectangular boxes called windows to present the components of an application or the contents of a folder Windowing was first demonstrated by the Xerox Alto and later incorporated into the Apple operating system and Microsoft Windows This interface component is a way to display a metaphor, like folders. A window is a way to represent a folder containing other folders or files. We’ve all dealt with windows before, so we know how much of a pain it can be to organize a lot of open windows. GUI是窗口界面：使用矩形框展示应用组件，或者文件的信息

46 Windows – Window States
There are two types of window managers: The operating system software The user who must minimize, maximize, resize, access, and organize windows Window States – once an instance of an Window is created Maximized—The window occupies the whole screen Minimized—The window is reduced to a button or icon Restored – The window returns to its previous dimensions. Examples of manipulation requirements are: (pop up a bunch of windows and show how difficult it could be to use) (moving files, scrolling through a lot of files, etc.) 两种类型的窗口管理： 操作系统软件 用户管理（最大、最小、resize等）

47 Windows – Window States
Restored—The window returns to the previous dimensions. The window also becomes resizable and can overlap other windows Cascading windows Tiled Windows (demonstrate cascading and interrupted w/ win explorer windows) The Microsoft Windows window manager has the capability to organize windows by default in a cascading fashion. 平铺 广播 重叠 中断级 Overlapping windows Interrupted cascade

48 Windows – Window States
Tiled Windows Collectively occupy the entire screen Resized windows allow all program visible Window manager position themselves Each window retains its title and tool bars 完全占据整个屏幕空间 所有的窗口都可见 窗口管理器负责位置定位 每个窗口都保持题目和工具栏 窗口变小，视觉内容受限制 允许在不同的窗口间拖拽对象 Windows become small, restricting visual content Allows drag and drop objects between windows

49 Windows – Window States
Overlapping windows Positioned and sized by the user Each window maintains its size until altered by the user Active window overlaps all other windows A window becomes active when it is clicked 用户确定窗口位置和大小 每个窗口保持其大小直到被用户改动 活动窗口遮挡其他窗口 单击某窗口后变为活动 其他窗口部分可见 Can see other windows partially

50 Windows – Window States
Cascading windows A special type of overlapping presentation style Windows are placed by the system manager Efficient use of screen real estate Takes away positioning and sizing option from the user 广播窗口： 一种特殊的重叠模式 通过系统管理器对窗口进行排序 有效使用屏幕的真实资源 用户不需要对窗口进行定位和大小设置 窗口被点击后变为活动， 被置顶 A window becomes active when it is clicked, and bringing it to the top

51 Windows – Window States
Tiled windows afford drag-and-drop methods. Overlapping windows use screen real estate efficiently, but they can become overwhelming Cascading windows use screen real estate efficiently and can be used to create visual organization Maximized windows are visually less complex, but they require easy navigation methods to get from window to window (read first one) This is true if you don’t know about window functionality (windows+tab). (read last one) these easy navigation properties are available. Note the tabbed view of windows in the taskbar. 平铺的窗口支持拖拽方法 重叠的窗口很好的使用屏幕资源，但是存在遮挡 广播窗口很好的使用屏幕资源，能够用来建立视觉组织 最大化窗口更简单，但是需要不同窗口之间的简易导航方法

52 Windows - Components Window Components
Most windowing systems use standardized windows that look similar and behave consistently 窗口要素

53 Windows - Components Windows XP Window Components
Most windowing systems use standardized windows that look similar and behave consistently

54 Windows - Components Mac OS X Window Components

55 Windows – Window Interfaces
Most windowing systems are standardized windows that look similar and behave consistently Multiple Document Interface Single Document Interface Controlled Single Document Interface Tabbed Interface Detachable Tabbed Interface

56 Window Interfaces – MDI
Multiple Document Interface The multiple document interface (MDI) is application-centric. An MDI application launches a primary window that serves as the work space for all open documents Visual Studio 2010 development environment: a typical modern MDI Examples are: photoshop, gimp, paint.net, etc. Overall, it seems MDI’s are preferred for image-editing software. 多文件界面以应用为核心。具有一个主窗口作为所有文件的工作空间。 Adobe Photoshop: MDI under MS Windows. 

57 Window Interfaces – MDI
This interface has one primary window (PW) PW can have multiple instances of application documents each in a separate child window (CW) CW resides within the confines of PW CW is visually constrained Dialogue boxes are free floating – not constrained by PW Menus and toolbar are located on the PW (open paint.net and show there as well) 界面有一个主窗口 主窗口有多个应用文件用例，每个文件在一个子窗口里面 子窗口被限制在主窗口中 子窗口存在视觉限制 对话框可浮动，不受主窗口限制 菜单和工具栏在主窗口上 窗口管理器在任务栏上有一个按钮 不同文件之间的变换只能在主窗口中通过工具栏完成 Window manager puts a button on the task bar Switching between documents can only be done in the PW using the toolbar Multiple document interface—Adobe PhotoShop® application.

58 Window Interfaces – MDI
Advantages of MDIs: They conserve system resources – only one instance of an application They create minimal visual clutter – only one menu and toolbar for all documents They provide a coordinated work space – all documents maximize, minimize and resize and close simultaneously They allow multiple documents to be simultaneously visible – documents within the PW can be minimize, maximized, tiled, cascaded or overlapped Here’s another ‘advantage-disadvantage’ combination we might have to know for the next exam! 保存系统资源—一个应用只有一个用例 最小的视觉混乱---对所有的文档只有一个菜单和工具栏 提供了一个坐标工作空间---所有的文件一起最大、最小化、resize、关闭 允许多个文件同时可见---在主窗口中按照某种方式排列

59 Window Interfaces – MDI
Disadvantages associated with MDIs: Menus change according to the state of the active document Document windows must remain within the MDI primary window Child windows can be minimized within the parent window—This increases the visual complexity of the screen, which may have other open parent windows I don’t see why one would want to use multiple parent windows in the first place…must be a “feature” 菜单会一句活动文件的状态而改变 文件窗口必须限制在父窗口中 子窗口最小化在父窗口中—增加了视觉复杂度

60 Window Interfaces – SDI
Single Document Interface Single document interfaces (SDIs) are document-centric; they open new primary windows for each instance of an application document Internet Explorer 6: a typical SDI application (read first) As we saw before, MDI’s are application-centric. SDI’s are document-centric… Here are some examples. SDI’s are not very common anymore, but one example I can think of is MS Word. These examples are valid if using an out-of-date edition of Internet Explorer. Sadly, those are still around. 一个应用文件的每个用例都打开一个新的主窗口

61 Window Interfaces – SDI
SDI is a method of organizing graphical user interface applications into individual windows Each window contains its own menu or tool bar, and does not have a "background" window or "parent" window Applications which allow the editing of more than one document at a time, e.g. word processors, may therefore give the user the impression that more than one instance of an application is open. SDI是一种将图形用户界面组织成单个窗口的形式 每个窗口包含自己的菜单和工具栏，没有背景窗口或者父窗口的概念 应用允许多个文件同时编辑，例如：文字处理，给用户一种感觉：多以一个用例是打开的

62 Window Interfaces – SDI
Advantages of SDIs: They are document-centric—The menus and toolbars refer only to the one child document window; this reflects the user’s point of view They are less visually complex Works well with how our mind works with tasks. There aren’t a lot of advantages…they are big advantages, (switch mid-sentence) 以文件为中心---菜单和工具栏作用于一个子窗口，可以很好的反映用户的视点 用户视觉简单

63 Window Interfaces – SDI
Disadvantages of SDIs: They do not provide a way to group diverse but related document windows Related documents cannot be separated from other documents of the same file type The task bar can become full when too many documents are open Cycling between windows can become difficult 不能提供不同但是相关的文件窗口组合的方法 同样类型文件中相关的文件不能分离出来 任务栏可能满（如果多个文件打开） 窗口之间轮循困难 Improvement since Windows Vista, task bar management but not very big compared to the disadvantages. Some of these disadvantages aren’t really problems anymore, either. The first disadvantage was considered in the Windows 7 interface. (show example with folders) The third disadvantage is less likely to happen because of how Windows 7 condenses active windows. The last disadvantage isn’t a problem at all because of how Windows 7 allows window switching (show taskbar display and windows tab). Don’t think you don’t have to study all of them just because I showed 3 disadvantages aren’t really there anymore.

64 Window Interfaces – TDI
Tabbed Document Interface A version of the MDI also called workbook Incorporates the use of tabs to switch between documents Some TDIs fix all document windows in a maximized state, and, therefore, no tiling or overlapping is possible Others allow documents to be resized and minimized, which removes the tabs (becomes MDI) We use tabbed-interfaces all the time now, especially because of Firefox and Chrome. 标签文件界面： MDI的一个版本（又叫工作手册） 通过合并的Tab完成不同文件之间的转换 一些标签文件界面固定所有的文件窗口在最大化的状态，不会重叠或者平铺 其他TDI允许文档resized或最小化，去掉tab，变成mdi Firefox: TDI by default, can be SDI

65 Window Interfaces – TDI

66 3. 颜色的使用 颜色是一种有效的强化手段，同时具有美学价值。使用颜色时应注意如下几点：
限制同时显示的颜色数 （同一画面颜色不超过4或5种） 画面中活动对象的颜色应鲜明，而非活动对象应暗淡。 尽量避免不相容的颜色放在一起，如黄与蓝，红与绿等，除非作对比时用。 若用颜色表示某种信息或对象属性，要使用户理解这种表示，并尽量采用通用的表示规则。 Lecture 4

67 4.图标的设计 图标是可视地表示实体信息的简洁、抽象的符号。 图标设计是方寸艺术，需要在很小的范围内表现出图标的内涵
设计图标时应该着重考虑视觉冲击力，要使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出精彩图标 。

68 设计图标时须遵守的原则和方法： 图标的图形应该和目标的外形相似。尽量避免过于抽象。 可在图标中附加上简要的文本标注，使用户明确图标的含义。
设计图标应尽可能简单，符合常规的表达习惯，适应地域特征，保持图标含义的前后连贯。同一含义的图标在系统的不同位置应保持一致，并尽可能与系统风格保持一致。 Lecture 4

69

70 MSN图标示例

71

72 5. 按钮的设计 设计按钮应该具有交互性，应该有3到6种状态效果：
点击时的状态； 鼠标放在上面但未点击的状态； 点击前鼠标未放在上面时的状态； 点击后鼠标未放在上面时的状态； 不能点击时的状态； 独立自动变化的状态。 按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别。 Lecture 4

73 6.屏幕布局设计 设计屏幕布局(Layout)时应该使各功能区重点突出，应遵循如下几条原则： 平衡原则 预期原则 经济原则 顺序原则 规则化
注意屏幕上下左右平衡，不要堆挤数据。 预期原则 对屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的操作结果可以预期。 经济原则 在提供足够信息量的同时要注意简明、清晰。 顺序原则 对象显示的顺序应按需要排列。一般先出现对话，通过对话将系统分段实现。 规则化 画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。 Lecture 4

74 7.菜单界面的设计 菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。
菜单中的选项在功能上与按钮相当，一般具有下列一种或几种类型的选项：命令项、菜单项和窗口项。 命令项用来执行一条命令。 菜单项将以一个子菜单的形式出现。 窗口项弹出一个相关联的弹出式窗口。 Lecture 4

75 菜单的结构 菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等，其中树状结构菜单是最常见的结构。 单一菜单 线状序列菜单
单一菜单是在几个选项中做出选择，可以有两个或多个选项，用户可以选中其中一个或确定多个选择 。如：Word视图 线状序列菜单 把一组相关联的菜单组合在一起，用户清楚地知道如何向前选择和目前在菜单中所处的位置，并且可以重返以前所作的选择。 如：Word字体选择 树状结构菜单 树状菜单是把选项划分为若干类，类似的选项组成一组，最后形成一个树状结构 。如：Word“开始““插入”等 网状结构菜单 网状结构菜单允许用户在父辈菜单与子菜单之间切换，而不必重新回到父辈菜单然后再转到子菜单。 如：超文本 Lecture 4

76 菜单设计原则 设计菜单界面时应注意的一般性原则： 按功能组织菜单，合理分类，并力求简短，前后一致
合理组织菜单界面的结构与层次，广而浅的菜单效果好 按一定的规则对菜单项进行排序 ，常选菜单放前面 菜单选项的标题要力求文字简短、含义明确，并且最好以关键词开始 常用选项要设置快捷键，并在菜单选项后加上快捷键文字表示 充分利用菜单选项的使能与禁止、可见与隐藏属性 使用弹出式菜单，弹出菜单一般不再包含下级菜单 Lecture 4

77 8.填表输入界面的设计 在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据输入界面。 填表输入界面设计要点
表格设计 表格在屏幕上的显示及编辑功能设计 Lecture 4

78 填表输入界面特点 有明确的提示，使用户可以不需要学习、训练，也不必记忆有关的语义、语法规则
填表输入界面充分地利用了屏幕空间，所有的输入字段同时显示在一个窗口中，用户可同时进行多字段输入 在填表输入方式中，可以充分利用上下文信息，帮助用户完成输入

79 设计填表输入界面的原则 一致性 有含义的表格标题 使用易于理解的指导性说明文字 栏目按逻辑分组排序 保证前后用词、语法一致；
采用有含义的表格标题，栏目标题要为用户所熟悉； 使用易于理解的指导性说明文字 采用易于理解的说明性文字，并力求简短。如果确实需要较多的信息，应为初学者提供一组求助信息； 栏目按逻辑分组排序 表格布局要直观，栏目按操作逻辑分组排序； Lecture 4

80 表格的组织结构和用户任务相一致 光标移动方便 出错提示 提供帮助 表格显示应美观、清楚，避免过分拥挤
把相关的输入字段组织安排在一起，并按照使用频率、重要性、功能关系或使用顺序来进行表格的排序和分组。 光标移动方便 需要一种简单直观的机制来移动光标，如使用Tab键或箭头键。 出错提示 系统应提示输入数据的允许范围和输入方法，对不可接受的值给出出错信息。 提供帮助 界面应该在响应处提供帮助信息，以解决新用户在不熟悉的情况下的输入。 表格显示应美观、清楚，避免过分拥挤 Lecture 4

81 作业 依据实验“清明上河图”内容，描述交互图形用户界面中的基本元素，说明符合图形用户界面设计中的哪些原则。