多媒体软件设计技术4应用软件中的人机界面

多媒体软件设计技术

第三版第四章：多媒体应用软件中的人机界面设计陈启安(c)西安电子科技大学出版社出版,2007-2008..可以修改或复制本幻灯片为非商业用途，但作者名及本版权标识不可更改。该幻灯片由作者提供修订日期:2011年11月04日本章学习目标了解多媒体图形用户界面的特点理解VisualBasic开发用户界面的方法及原则学会使用VisualBasic开发图形用户界面多媒体图形用户界面图形用户界面（GUI-GraphicsUserInterface）是当前用户界面的主流，广泛应用于各种台式机和图形工作站。比较成熟的商品化系统有Apple的Macintosh、IBM的PM（PresentationManager）、Microsoft的Windows和运行于Unix环境的X-Window、OpenLook和OSF/Motif等。当前各类图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。多媒体图形用户界面的特点多媒体软件中图标的应用多媒体软件中图形的应用多媒体图形用户界面的特点（1）广泛使用窗口、图标、菜单、按钮、对话框等基本界面部件来表示应用目标使用图形部件形象地表示感兴趣的目标，使系统完成的操作或命令能用逼真的模拟、比喻来表示如，在WindowsXP中，把文件夹里的文件拖到表示回收站的废纸框中，则隐喻完成对该文件的删除操作，如移到表示打印机的目标中则隐喻完成对该文件的打印。有高度的交互性每一输入动作被直接解析，动作的结果可以是文字、声音、图像、视频或动画等多媒体表现形式，并可以立即反馈给用户。支持鼠标类定位设备完成光标的移动和目标的选取多媒体图形用户界面的特点（2）提供了快速的、增量式的、可逆转的操纵，并且所有操纵过程及效果是可观察到的以一致方式完成对所有目标的显示和操纵提供系统预验证功能，使得只有有效的交互才能发生效果提供了对用户出错的保护机制和强有力的帮助机制多媒体软件中图标的应用图标的基本概念和工作原理图标的设计图标的编辑工具图标的基本概念和工作原理图标（icon）是以可视的表示实体信息的简洁、抽象的符号。例如用经过良好设计的逼真形象来代表动作或命令实体，它是能提供迅速、直观理解信息的有力工具。（a）表示唱歌，（b）表示合作，（c）表示邮件，（d）表示电话，（e）表示帮助，（f）表示三角形，（g）表示预算表，（h）表示不许复制的行为。其中（a）、（b）、（c）、（d）、（f）是直观具体的图标，它们很容易理解。而（e）、（g）、（h）是抽象地表示对象。图标的设计原则图标应逼真于目标形状，只要可能，应该尽量避免抽象，使人们可以快速、准确地识别图标。不同的目标必须使用不同的图标表示，以避免引起混淆。如果不能清楚、明确表达目标的含义，可以在图标中附加上简要的文本说明，以明确图标的含义。设计图标应尽可能简单，尽量符合常规的表达习惯，不同的图标之间应该有一定程度的区别。适当设置图标的尺寸，在能够表示实体对象的情况下，图标宜小一些为好，以减少图标所占用的内存空间及显示空间。但是如果要表示复杂对象，可以使用较大尺寸的图标，但是在同一系统中使用的图标应有一致的图像尺寸。鉴于用户的学习和记忆能力所限，为了避免引起混淆，一个系统的图标类型不宜过多（一般不超过20种）。图标的编辑工具（1）HagenWieshofer的IconEdit2图标的编辑工具（2）AxialisSA的AxialisIconWorkshop5.0多媒体软件中图形的应用图形的设计与制作图形中颜色的使用图形的设计原则图形的含义应与应用系统环境相关。图形的大小比例应合适，符合人的视觉习惯。背景的纹路、花纹不能太规则，变化要自然，色调要单纯，不可太复杂。正确使用颜色及颜色搭配，以构成一个良好的色彩环境。应注意调整图形的亮度、对比度、色彩的饱和度等。**图形的制作工具可采用Adobe公司的Photoshop8.0。图形中颜色的使用（1）正确使用颜色，改善人的视觉信息获取能力并减少疲劳效应图形中颜色的使用（2）正确配置图形的前、背景色。颜色的组合、配置同样会对人的视觉能力和疲劳方面产生影响图形中颜色的使用（3）每次显示使用颜色不宜过多，屏幕颜色过多反而不利于区分颜色及颜色的含义。在非必要情况下，显示使用的颜色宁少勿多。在同一屏幕上使用多种颜色时，选择使用合适对比度的颜色组合。在使用多种颜色显示时，对比度大的颜色可以一起使用而不易引起混淆，而如果使用过于相近的颜色则会影响辨别。用低饱和度、低亮度来显示不需强调的信息，例如使用柔和、平淡的颜色。使用一致性的颜色显示。例如，所有出错信息都显示在红底白字的弹出式窗口中，那么就不要在弹出式菜单中或对话框中使用红底白字，以避免用户的误解。图形中颜色的使用（4）不要使用红／绿、红／兰、绿／兰、兰／黄这样组合的颜色对，它们会使相邻边界产生振荡和余像。利用VisualBasic开发图形用户界面菜单设计的原则和编程技术窗口设计技术鼠标编程技术键盘编程技术Windows图形用户界面设计原则界面要具有一致性。一致性原则在界面设计中最容易被违反，同时也最容易修改和忽视。例如，在菜单和联机帮助中必须使用相同的术语；对话框必须具有相同的风格。常用操作要有捷径。常用操作的使用频度大，应该减少操作序列的长度。例如，为文件的常用操作如打开、存盘、另存等设置快捷键。提供简单的错误处理。系统要有错误处理的功能。在出现错误时，系统应该能检测出错误，并且提供简单和容易理解的错误处理的功能。错误出现后系统的状态不发生变化，或者系统要提供错误恢复的指导。提供信息反馈。对操作人员的重要操作要有信息反馈。对常用操作和简单操作的反馈可以不作要求，但是对不常用操作和至关重要的操作，系统应该提供信息的反馈。操作可逆。操作应该可逆（Undo功能），这对于不具备专门的知识的操作人员相当有用。可逆的动作可以是单个的操作，或是者一个相对独立的操作序列。设计良好的联机帮助。虽然对于熟练用户来说，联机帮助并非必不可少，但是对于大多数不熟练用户来说，联机帮助具有非常重要的作用。菜单设计的原则和编程技术（1）菜单设计的一般性原则1.按照系统的功能来组织菜单。分配菜单界面的宽度和深度，使菜单层次结构和系统功能层次结构相一致。把那些逻辑上相似，有联系的选择项安排在一组。2.要选用广而浅的菜单树，而不是窄而深的菜单树。一般菜单嵌套层次不宜超过四层，每级菜单项不宜超过7～9项。如果菜单项数超过8个，而显示菜单的屏幕区又大小，可以使用滚动式菜单技术。3.根据菜单选项的含义进行分组，并且按一定的规则排序。菜单选项的标题要力求简短、含义明确，并且最好以关键词开始。菜单标题大致上解释了该菜单的作用，菜单项名应能体现该选择项所完成的功能，使用语气亲切、含义明确、易于理解、简短明了的单词、语句或动宾短语作菜单项名。例如，名词：文件、字体、颜色、风格；动词：保存、打开、关闭、拷贝、编辑；副词，数字也可以作为菜单项的名称，但最好是使用言简意赅的动宾结构，如保存文件、删除记录等作为菜单项名。4.菜单项的安排应有利于提高菜单选取速度。可以根据使用频度、数字顺序、字母顺序、功能逻辑顺序等原则来组织安排菜单项顺序。5.常用选项要设置快捷键。例如，Windows菜单系统中，使用F1作为帮助功能的快捷键，Ctrl_O作为打开文件的快捷键，Ctrl_S作为保存文件的快捷键，Alt＋X作为退出系统的快捷键等。菜单设计的原则和编程技术（2）VB菜单编程的技术1.菜单选项的分组2.常用选项快捷键的设置3.菜单选项的允许与禁止、可见与隐藏4.菜单项的动态装入5.弹出式菜单的实现（PopupMenuMethod）6.菜单项的其他属性7.位图菜单8.主菜单中的弹出式菜单具体实现详见教材及多媒体光盘菜单设计的原则和编程技术（3）菜单设计的原则和编程技术（4）窗口设计技术浮动窗口的设计制作颜色渐变的窗口背景窗口背景拼图技术浮动窗口的设计（1）在软件设计时，为了保证含有重要信息的窗口不被其他窗口覆盖，就要用到浮动窗口技术，建立一个“总在最前面”（TopMost）的窗口。浮动窗口的设计（2）首先，建立FORM1、FORM2。在FORM1中放置一个PictureBox控件Picture1及二个命令按钮Command1、Command2。效果如图所示。在FORM2中放置三个Shape，形状自定。制作颜色渐变的窗口背景在许多Windows软件的安装程序中，常常可以看到窗口的背景颜色由浅至深的渐变效果。例子：通过调用API函数FillRect，来绘制渐变的窗口背景色。窗口背景拼图技术（1）可以通过设置窗体的PICTURE属性，调用位图文件，来显示窗口背景的纹理图案。但使用这种方法有许多缺点,其一是窗体大小受位图大小的限制，调整起来相当麻烦，不具有通用性和灵活性；其二是浪费资源，因为花纹图案基本上是重复图案，采用与窗体同样大小的位图是一种浪费。使用背景拼图技术，可以容易地显示出窗口背景的纹理图案。

窗口背景拼图技术（2）在窗体上建立一个网格控件，设定网格行不可见，去掉固定行和固定列，用程序实现网格控件与窗体具有同样大小，并随窗体大小的改变而改变。然后设计一个花纹图案，形成BMP位图文件，将其调入PictureBox控件。设定网格的每个单元与该图案大小相同，使单元的数量正好覆盖整个窗体背景，再将该图案赋予所有单元去显示。通过子程序unitepic()实现以上过程。不论图案大小、窗体大小，该程序都能自动调整网格控件大小和网格单元大小及单元数量。鼠标编程技术鼠标指针的自动移动对象的拖动鼠标移出（MouseLeave）事件的实现其它鼠标操作技术鼠标指针的自动移动（1）在开发多媒体应用软件的过程中，当一个窗口中出现较多的控件时，如果能向导式的将鼠标指针自动地移动到指定控件上（即建议用户下一步该做什么），会使用户觉得软件具有智能性并减少了用户出错的机会。

鼠标指针的自动移动（2）使用API函数SetCursorPos，将鼠标指针自动地移动到指定控件上。SubMoveMouseCursor（sourceAsControl）DimPPAsPOINTAPI'鼠标要移动到的地方的坐标DimhparentAsLongDimtempAsIntegerPP.x=（source.Left+source.Width/2）/Screen.TwipsPerPixelX'算出坐标的x值PP.y=（source.Top+source.Height/2）/Screen.TwipsPerPixelY'算出坐标的y值hparent=GetParent（source.hwnd）'获取控件所在的窗体的句柄temp=ClientToScreen（hparent,PP）temp=SetCursorPos（PP.x,PP.y）'移动鼠标的位置EndSub对象的拖动在没有标题条的情况下如何用鼠标拖动窗体或其它的控件？BorderStyle属性值=0为无边框鼠标移出（MouseLeave）事件的实现（1）下面的程序段中，当鼠标移动到Command1按钮上时，在标签label1中会显示“鼠标已移动到Command1”；当鼠标离开Command1按钮时，则在标签label1中会显示“鼠标不在Command1上”。PrivateSubCommand1_MouseMove（ButtonAsInteger,ShiftAsInteger,XAsSingle,YAsSingle）Label1.Caption="鼠标已移动到Command1"EndSubPrivateSubForm_MouseMove（ButtonAsInteger,ShiftAsInteger,XAsSingle,YAsSingle）Label1.Caption="鼠标不在Command1上"EndSub在大部分情况下程序的运行结果符合我们的要求。但是，当将鼠标从Command1下面迅速移动到窗体外面时，标签label1仍然没有发生变化。鼠标移出（MouseLeave）事件的实现（2）这个问题，必需要捕捉MouseLeave事件。利用API函数SetCapture和ReleaseCapture，来完成MouseLeave事件。其它鼠标操作技术显示和隐藏鼠标声明：DeclareFunctionShowCursorLib"user32"（ByValbShowAsLong）AsLong说明：bShow为1时，显示鼠标；bShow为0时，隐藏鼠标取得双击间隔时间：DeclareFunctionGetDoubleClickTimeLib"user32"Alias"GetDoubleClickTime"()AsLong说明：返回千分之一秒的时间间隔数。设置双击间隔时间：DeclareFunctionSetDoubleClickTimeLib"user32"Alias"SetDoubleClickTime"（ByValwCountAsLong）AsLong说明：wCount为千分之一秒的时间间隔数。交换鼠标按钮声明：DeclareFunctionSwapMouseButtonLib"user32"Alias"SwapMouseButton"（ByValbSwapAsLong）AsLong说明：bSwsp值为True，为交换状态，即左手习惯。bSwsp值为False，为正常状态，即右手习惯。得到鼠标位置DeclareFunctionGetCursorPosLib"user32"（lpPointAsPOINTAPI）AsLong例子：DimpAsPOINTAPICallGetCursorPos（p）‘（p.x,p.y）为鼠标位置设定鼠标位置DeclareFunctionSetCursorPosLib"user32"（ByValxAsLong,ByValyAsLong）AsLong例子：ret=SetCursorPos（X,Y）'（X,Y）为坐标，单位为Pixel（像素）键盘编程技术利用“Alt+PrintScr”组合键实现屏幕的捕获拒绝接受键盘和鼠标事件禁止或允许使用Alt-Tab和Ctrl-Alt-Del利用“Alt+PrintScr”组合键实现屏幕的捕获声明：PrivateDeclareSubkeybd_eventLib"user32"（ByValbVkAsByte,ByValbScanAsByte,ByValdwFlagsAsLong,ByValdwExtraInfoAsLong）ConstVK_SNAPSHOTAsByte=&H2C例子：'把应用窗口图像放到剪贴板Callkeybd_event（VK_SNAPSHOT,0,0,0）'把整个屏幕抓到剪贴板Callkeybd_event（VK_SNAPSHOT,1,0,0）拒绝接受键盘和鼠标事件声明：PrivateDeclareFunctionEnableWindowLib"user32"（ByValhwndAsLong,ByValfEnableAsLong）AsLong例子：'Form拒绝接受键盘和鼠标事件CallEnableWindow（Form.hwnd,0）'Form允许接受键盘和鼠标事件CallEnableWindow（Form.hwnd,1）禁止或允许使用Alt-Tab和Ctrl-Alt-Del（1）声明：PrivateDeclareFunctionEnableWindowLib"user32"（ByValhWndAsInteger,ByValaBOOLAsInteger）AsIntegerPrivateDeclareFunctionIsWindowEnabledLib"user32"（ByValhWndAsInteger）AsIntegerPrivateDeclareFunctionGetMenuLib"user32"（ByValhWndAsInteger）AsIntegerPrivateDeclareFunctionFindWindowLib"user32"Alias"FindWindowA"（ByVallpClassNameAsString,ByVallpWindowNameAsString）AsLongPrivateDeclareFunctionSystemParametersInfoLib"user32"Alias"SystemParametersInfoA"（ByValuActionAsLong,ByValuParamAsLong,ByVallpvParamAsAny,ByValfuWinIniAsLong）AsLongPrivateTaskBarhWndAsLongPrivateIsTaskBarEnabledAsIntegerPrivateTaskBarMenuHwndAsInteger禁止或允许使用Alt-Tab和Ctrl-Alt-Del（2）例子：'禁止或允许使用Alt-TabSubFastTaskSwitching（bEnabledAsBoolean）DimXAsLong,bDisabledAsLongbDisabled=NotbEnabledX=SystemParametersInfo（97,bDisabled,