GUI用户界面设计ppt课件VIP

.,用户界面设计,阜外心血管病医院信息中心梁方舟,.,Guide/Intro,小例子GUI发展史定义领域状况设计原则和禁忌GUI设计中的具体内容关于PB的界面设计GUI的展望,.,一个设计实例,.,GUI设计上的问题,从材料和加工工艺来看，属于廉价制品。简单但不严格的水温控制。排水口很随意，说明主要不用在池中蓄水。香皂被水淋了之后，需要排残水。排水不干净。水龙头的位置很尴尬，不说洗手不方便，如果想用盆子接点水估计只能斜着接，也只能接到一点，接满了也拿不下来。若水压开的很大，更不用说溅的满身都是。商标在哪？,.,餐巾摆放的设计,？,？,.,二十世纪最伟大的人机界面,扩音器按键式电话方向盘磁卡交通灯,遥控器阴极射线管液晶电视鼠标/图形用户界面条码扫描器,.,GUI的发展史,图形用户界面这一概念是70年代由施乐公司帕洛阿尔托研究中心提出。我们现在据说的普遍意义上的GUI便是由此产生的。1973年施乐公司帕洛阿尔托研究中心施乐研究机构工作小组最先建构了WIMP(也就是视窗，图标，菜单和点选器/下拉菜单)的范例，并率先在施乐一台实验性的计算机上使用。1983年VisiOn，此图形用户界面最开始是一家公司为电子制表软件而设计的，这软件就是具有传奇色彩的VisiCalc.其“视窗”和鼠标的概念，其先于“微软视窗”的出现，但VisiOn并没有成功研制。1984年苹果的Lisa与Macintosh，是首例成功使用GUI并用于商业用途的产品。1985年AmigaIntuition，Amiga计算机公司研究的一款运用GUI的电脑。AmigaGUI在当时独一无二，在那时候GUI还不能提供足够的控制功能，AMIga已经能使用弹出式的命令行界面了。1986年GEM，基于IBM电脑系统发明的一种可选择性视窗系统，可在MS-Dos或者CPM-86上运行。1987年AppleMacintoshII,是第一台有颜色的MAC苹果机.1988年RISCOS，RISCOS是一种彩色GUI操作系统，使用三键鼠标、任务栏及一个文件导航器。1988年GEOS，GEOS是另外一个非常早期的图形桌面系统。1990年MicrosoftWindows3.0。Window1.0是基于MS-DOS操作的GUI，是基于MACOS的GUI设计，Windows2.0是后续版本。后来的一系列GUI视窗版本都类似于windows3.0的界面。1992年起，AmigaWorkbench3WindowsNTQNXrWindows95IBMReleasesOS/2Warp4MacOS8Windows98APPLEMacOSXAPPLEAQUAWindowsXPWindowsServer2003,.,UI,UI的本意是用户界面，是英文User和Interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系.可分为3个方向：用户研究、交互设计、界面设计。,.,GUI的目的和定义,目的：减少用户的认知负担满足不同目标用户的创意需求建立界面与用户的互动交流定义：GUIGraphicalUserInterface一种结合计算机科学、美学、心理学、行为学，及各商业领域需求分析等学科的人机系统工程，强调人机环境三者作为一个系统进行总体设计。人机交互图形化用户界面，经常读做“goo-ee”，准确来说GUI就是屏幕产品的视觉体验和互动操作部分。,.,GUI领域的国际国内现状,纵观国际相关产业在图形化用户界面设计方面的发展现状，许多国际知名公司早己意识到GUI在产品方面产生的强大增值功能，以及带动的巨大市场价值，因此在公司内部设立了相关部门专门从事GUI的研究与设计，同业间也成立了若干机构，以互相交流GUI设计理论与经验为目的。随着中国IT产业，移动通讯产业，家电产业的迅猛发展，在产品的人机交互界面设计水平发展上日显滞后，这对于提高产业综合素质，提升与国际同等业者的竞争能力等等方面无疑起了制约的作用。,.,GUI的应用领域,手机通讯移动产品电脑操作平台软件产品PDA产品数码产品车载系统产品智能家电产品游戏产品产品的在线推广,.,GUI设计原则,用户至上的原则交互界面要友好合理性：配色方案、位置、隐含顺序协调性：初始化大小、控件摆放保证可用性：可理解、可达到、可控制保证一致性：设计目标、外观、行为简单易用就是好,.,GUI设计禁忌,同一页面包含功能重复的控件、将复选框用作单选按钮、在非开/关设置中使用复选框、无初始值的多选一设置、单选按钮之间间隔太大显示对用户无意义的错误提示、不同的类型页面窗口显示相同的标题、窗口的标题和调用的命令不一致、相似的功能却有不一致的用户操作界面、无效的控件不置灰取消按钮无法真正取消操作、返回按钮不能达到预期的目的、不考虑用户可能的人为错误输入功能选项过多过复杂、使用无提示或引导的隐性功能、需要向下滚动才能看到重要信息无意义的虚假进度条、执行长时间的任务时鼠标指针不显示成忙状态认为好的UI就是漂亮的UI盲目的使用页面模块化设计,.,GUI的设计步骤,需求3W1H，对使用者、使用环境、使用原因、使用方式的需求分析。分析设计建立用户定位的“品质-形象”、“美观-逻辑”等坐标。调研验证利用已生成的基本风格模版设计用户调查问卷。方案改进用户验证反馈,.,GUI中的元素,窗口：组织、颜色、布局、形式等。元素：界面上可有的元素，按钮、图片、文字等。排版：界面元素的位置以及元素间位置的关系。样式：元素的大小、颜色等装饰性的特性。文化：多国语言、语言间差异性的处理等。文件模型：将界面通过一个模型来展现，通过文件模型与UI脚本可以动态地定义界面。UI脚本：用来控制文件模型好实现一些动态效果，如动画、限制、隐性帮助等。,.,界面控件的设计,符合Windows界面准则确定控件的位置界面元素的一致性控件的表现风格美化界面和控件布局、色彩、形状、提示、文字、图片、复杂性,.,窗口设计,界面要具有一致性常用操作要有捷径提供简单的错误处理提供信息反馈操作的可逆性设计良好的联机帮助,.,菜单的设计,按照系统的功能来组织菜单广而浅，而不是窄而深根据含义分组，并按一定的规则排序注意为常用选项设置快捷键弹出式菜单(PopupMenuMethod)的应用,.,重视交互设计,系统易用性交互流程简便盲点测试出错、异常提示和处理利用用户环境测试,人机交互设计遵循的认知原则：一致性原则兼容性适应性指导性结构性经济性,.,人机交互的十大法则,减少显示器的视觉密度提供使用者搜寻工具及指引设计合理的文字区规划增加视觉平衡感避免多色彩之应用选用清楚大方的字型使用组织化分类说明使用简明扼要的词句精简图像(Icon)避免界面设计之不一致性,.,PB中的GUI,界面一致性使用向导关于系统响应时间帮助设施出错信息和警告一般交互信息显示数据输入,.,PB中的GUI关于系统响应时间,.,PB中的GUI帮助设施,进行系统交互时，提供部分帮助功能，即：提供主要工作的帮助用户可以通过帮助菜单、F1键和帮助按钮（如果有的话）访问帮助表示帮助时根据需要提供三种方式的选择：另一个窗体、微帮助和指出参考某个文档用户如何回到正常交互方式有两种选择：返回键和功能键帮助信息的构造：采用有逻辑结构的分层式帮助微帮助提供：由状态栏，控件上的提示文本，或悬停提示等组成。,.,PB中的GUI出错信息和警告,以用户可以理解的术语描述；应提供如何从错误中恢复的建设性意见；应指出错误可能导致那些不量后果，以便用户检查，或提供帮助用户改正的支持；信息应伴随着视觉上的提示，如特殊的图像、颜色或闪烁；信息不能带有判断性或指责性。,.,PB中的GUI一般交互,菜单选择、数据显示及功能都应使用一致的格式；提供有意义的反馈；执行有较大破坏性的动作前要求确认；在数据录入上允许取消大多数工作；减少在动作间必须记忆的信息数量；按功能对动作分类，并按此排列屏幕布局；提供语境相关的帮助机制；允许用户非恶意错误，提供一定的容错性。,.,PB中的GUI信息显示,只显示与当前用户语境环境有关的信息；不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息；使用一致的标记、标准缩写和可预测的颜色；显示信息的含义应非常明确，用户不必再作参考；产生有意义的出错信息；使用缩进和文本来辅助理解；使用窗口分隔控件区分不同类型的信息；显示器的显示空间的合理利用。,.,PB中的GUI数据输入,1）尽量减少用户输入动作的数量；2）保持信息显示和数据输入的一致性；3）交互应灵活，对键盘和鼠标输入提供灵活的支持；4）在当前动作的语境中使不合适的命令不起作用；让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序（如果允许的话），以及在不退出系统的情况下从错误状态中恢复；为所有输入的动作提供帮助；消除冗余输入。可能的话提供缺省值、绝不要让用