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