友好用户界面开发.ppt
《友好用户界面开发.ppt》由会员分享,可在线阅读,更多相关《友好用户界面开发.ppt(50页珍藏版)》请在三一办公上搜索。
1、友好用户界面开发,设计者:朱 弘 日 07计教 1 班,Friendly User Interface Development,2023/7/28,http:/,2,“友好用户界面”释义,界面:界面是在用户面前,显示器屏幕上显示的基本状态。界面是一个静态的词,进行界面设计时,要看界面的组件、布局、风格能否支持有效地交互。“交互行为”是界面的源头,界面上(这里指可视界面)组件是为交互行为服务的。界面形式:1.图形(Graphics)2.浏览器(Browser)a.Web浏览器 b.文件浏览器(两种同样实现用户与计算机的交互作用),2023/7/28,http:/,3,“友好用户界面”释义(续1)
2、,友好(Friendly):所谓友好即指能够很好的实现人机交互。主要指(1)完全性:充分发挥系统的功能(2)简易性:操作简单,易学、记忆方便(3)安全性:对系统的内部数据有保护功能,不易轻易破坏内部数据,2023/7/28,http:/,4,“友好用户界面”释义(续2),友好用户界面的八个特征:(1)清楚(Clear)(2)简明(Cloncise)(3)熟悉(Familiar)(4)易响应(Responsive)(5)一致(Consistent)(6)吸引力(Attractive)(7)高效(Efficient)(8)宽容(Forgiving),2023/7/28,http:/,5,友好用户界
3、面的八个特征,1.Clear清楚的:清晰度是用户界面设计最重要的元素。事实上,用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里,他们会困惑和沮丧。这是什么呢?鼠标移到WordPress的按钮时工具提示会弹出解释其职能。,2023/7/28,http:/,6,友好用户界面的八个特征,2.Concise 简明清晰的用户界面是很好的,但是,您应该谨慎,不要陷入过度明晰。定义和解释很容易被添加,但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释,您的用户将不得不花费过多的时间去读它们。不仅要保持清晰,而且
4、还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项,就不要用两个。保持简洁可以节省你的用户的宝贵的时间。同时保持清晰和简明并不容易,需要足够的时间和努力来实现,但其回报是值得的。在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。,2023/7/28,http:/,7,友好用户界面的八个特征,3.Familiar熟悉许多设计师努力使自己的界面,直观。但到底直观的真正意思是什么?直观也就是就是说可以自然地,本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。熟悉就是,跟你以前遇到过的东西相似。当你熟悉的东西,你就知道怎样它怎么做
5、-你知道会发生什么事情。弄清你的用户熟悉的并把它们融合到你的用户界面中。GoPlan的标签页式界面。标签很熟悉,因为他们模仿文件夹上的标签。你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。,2023/7/28,http:/,8,友好用户界面的八个特征,4.Responsive易响应易响应意味着两件事。首先,易响应意味着快速。如果没有软件在后台,界面应该响应很快。等待加载和缓慢的界面是令人沮丧。看起来加载的很快,反正就是界面快速载入(即使内容尚未赶上)改善了用户体验。易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户,告知他们现在怎么了。你成功地按下那个按钮吗?你将
6、如何知道?按钮应显示一个被按了的状态反馈,或许可以把按钮上的文字改成“正在加载.”并且禁用按钮。是软件挂了还是内容载入中?用转动的轮子或显示进度栏的方式来保持用户在进程中。浏览器会显示一个进度栏当您第一次进入我的博客。而不是逐步载入网页时,一旦一切准备就绪整个页面即时显示。,2023/7/28,http:/,9,友好用户界面的八个特征,5.Consistent一致之前我谈过关于上下文的重要性,以及它应如何指导你的设计决定。我认为,适应任何给定的上下文是很聪明,但是,一个界面仍然应保持一定程度的一致性。一致的界面,使用户能够开发惯用模式-他们会了解不同的按钮,标签,图示和其他界面元素的外观,并识
7、别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作,能够从过去的经验中更快的总结知道如何操作新功能。在Microsoft Office的用户界面是一致的是有原因的。,2023/7/28,http:/,10,友好用户界面的八个特征,6.Attractive吸引力这可能有一点争议,但我相信一个良好的界面应该有吸引力。吸引力在某种意义上,是与界面交互变得是愉快。是的,你可以让你的用户界面简单,易于使用,有效率和易反应,它将尽其出色-但如果你可以做额外的一步,使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的,你的客户或工作人员将不仅是简单地使用它-他
8、们会期待着使用它。当然有许多不同类型的软件和网站,所有的创作针对的不同的市场和用户。什么样看来好对任何一个特定的观众都会有所不同。这就是说,你应该为了你的用户来包装你的界面的的外观和风格。此外,美感设计应适度使用,并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。谷歌是众所周知的极简洁的界面,他们关注功能重于形式,但他们显然的花费时间美化了 Chrome用户界面元素,如按钮和图标,使它们看起来正好体现了微妙的梯度和像素超薄突出。,2023/7/28,http:/,11,友好用户界面的八个特征,7.Efficient高效率用户界面像是车辆,带你去你要到的地方。这些地方是软件应用程序或网
9、站的不同的功能。一个良好的界面可让您在执行这些功能更快。现在,有效听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上,当然界面到头来还是需要高效?差不多,但不完全。你真正需要做的是使界面能高效的找出用户努力想要实现的,然后让他们可以有条不紊的做到。您必须确定您的应用程序应该如何工作-什么功能它需要有,什么样的目标是你努力努力争取实现?实现一个界面,可以让人们轻松地完成他们想要做的,而不只是简单的实现对各个功能的访问。苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情,并在照片控制中提供按钮来分别完成他们。,2023/7/28,http:/,12,友好用户界面的八个特
10、征,8.Forgiving宽容没有人是完美的,当使用你的软件或网站必定有人会犯错误。如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面,纠正问题。一个宽容的界面可以使你的用户远离代价高昂的错误。例如,如果有人删除了重要的信息,他们可以轻松地重新检索或撤消这一行动?当有人浏览到损坏或不存在的网页,他们会看到什么?他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地?错误的删除了电子邮件?Gmail可让您迅速取消上一次的操作。,2023/7/28,http:/,13,“友好用户界面”释义(续4),图形:指由外部轮廓线条构成的矢量图,即由计算机绘制的直线、圆、矩
11、形、曲线、图标等。用一组指令集来描叙图形的内容,如描叙构成各种图元位置维数、形状等。主要参数是描叙图元的位置、维数和形状的指令和参数。图形界面:屏幕上的信息以图形的方式存在,而操作者能够通过鼠标或键盘自由自在的在屏幕上任何范围(包括显示窗口、图标、按钮等图形,这里的图形表示不同目的地的动作)选择自己感兴趣的内容,实现无纸化的办公。,2023/7/28,http:/,14,“友好用户界面”释义(续4),界面设计:包括交互设计、外观设计和平面设计。(注:这里指体现其“友好性”)1.交互设计:能很好实现“人机互动”2.外观设计:界面美观,用户视觉感受好 3.平面设计:人性化,易用简便,有必要的导航条
12、,2023/7/28,http:/,15,图形界面,1.Windows图形界面,2.Linux图形界面,3.Mysql图形界面,4.VC图形界面,5.日程项目,5.C图形界面,6.Ubuntu图形界面,7.Java图形界面,2023/7/28,http:/,16,开发友好用户界面的意义,开发友好用户界面的意义:降低计算机应用的门槛,方便用户操作,给与用户好的体验感受。譬如在Browser/Server模式的Web浏览器中,并不是只有失效的链接和意外的出错才会使用户感到烦恼,即便是一次完整的操作,也可能因为操作的繁复性过高或使用上的不方便给用户带来不愉快的体验。而友好用户界面指在完成同一操作要求
13、下,使用户感到轻松简单、舒适的Web交互设计,这就能使用户很好体验其方便高效、人性化的感受。,2023/7/28,http:/,17,图形用户界面应用,|-采用图形用户界面的操作系统/应用程序:,Smalltalk、Mac OS、NEXTSTEP、Mac OS X、Microsoft windows、X Window System(类UnixOS、Linux)BTRON、TownsOS、MSX-View、SX-Window、BeOS、Newton OS、Zaurus OS、Palm OS,|-采用图形用户界面的设备:键盘在图形用户界面仍是一个重要的设备。键盘不仅可以输入数据的内容,而且可以通过
14、各种预先设置的”快捷键“等键盘组合进行命令操作达到和菜单操作一样的效果,并极大提高工作效率。手写板等操作,特别是在图像数据操作中也扮演重要的角色。现在还有很多一些用户界面,直接用手指、或者特殊的笔端触摸触摸屏上显示的按钮、图标进行各种操作,已经非常普及,如自动取款机ATM,汽车导航、媒体播放器、游戏机等等,一般操作简捷,直观。苹果公司的iPhone手机还有装有多手指操作系统。,2023/7/28,http:/,18,图形用户界面应用(续),GUI 应用领域:手机通讯移动产品、电脑操作平台、软件产品、PDA产品、数码产品、车载系统产品、智能家电产品、游戏产品、产品的在线推广GUI操作系统:包括V
15、isiCorp公司的VisiOn、微软的Windows 1.0和2.0、Tandy公司的DeskMate、Digital Research的GEM、IBM OS/2、NeXT公司的NeXTStep、为UNIX开发的X Window等等,但除了Windows、NeXTStep和X Window最终修成正果外,其他的所有GUI后来都没有得到持续发展。,2023/7/28,http:/,19,图形用好界面的发展历史,1980年 Three Rivers公司推出Perq图形工作站 1981年 施乐公司推出了Alto的继承者Star,Alto曾首次使用了窗口设计 1984年 苹果公司推出Macintos
16、h 1986年 首款用于Unix的窗口系统X Window System发布 1988年 IBM发布OS/2 1.10标准版演示管理器(Presentation Manager),这是第一种支持Intel计算机的稳定的图形界面 1992年 微软公司发布Windows 3.1,增加了多媒体支持 1995年 微软的Windows 95发布,其视窗操作系统的外观基本定型 1996年 微软发布Bob,此软件具有动画助手和有趣的图片。,2023/7/28,http:/,20,图形用好界面的发展历史(续),1996年 IBM发布OS/2 Warp 4,它的交互界面得到显著改善,至今仍有不少ATM机运行这样
17、的系统 1997年 KDE和GNOME两大开源桌面项目启动 1997年 苹果公司发布MAC OS 8,这个系统具有三维外观并提供了SpringLoaded Folder功能 2000年 苹果公司漂亮的Aqua,也就是Mac OS X系统的默认外观,可以让用户更轻松地使用计算机 2001年 微软发布Windows XP,实现桌面功能的整合 2003年 Mac OS X v10.3提供了一键单击访问任何已打开窗口的功能 2003年 Sun公司的Java桌面系统为GNOME桌面添加了和Mac类似的效果 2006年 微软发布Windows Vista,对此前其视窗操作系统的外观作了较大的修改,2023
18、/7/28,http:/,21,界面设计,界面设计是人与机器之间传递和交换信息的媒介,包括硬件界面和软件界面,是计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域。近年来,随着信息技术与计算机技术的迅速发展,网络技术的突飞猛进,人机界面设计和开发已成为国际计算机界和设计界最为活跃的研究方向。,2023/7/28,http:/,22,图形用户界面的现状,图形界面也不满足以简陋的设计,朝向注重视觉体验的方向发展,苹果Mac OS X与微软Windows XP堪称是两大支柱。而在这之后,图形界面走向完美和个性化时代,终端用户都可以参与其中,为自己设计一套个人化的界面外观,而业界则将目
19、光放到更遥远的将来,希望能在未来操作系统中采用3D化的全新视觉界面。基于图标显示的方案:所有的文件、文件夹和应用程序都使用图标来表示,同时它还拥有下拉菜单条,而菜单栏则被放置在屏幕的最上部。一些操作频繁的菜单命令可借助快捷键实现,以滚动条代替原本固定高度的窗格;垃圾箱支持拖曳功能,那些不需要的文件可以通过鼠标拖曳的方式直接删除。另外,引入了菜单的前景、背景概念,那些暂时没有被选中的菜单处于较浅的“泛灰色”,这样用户操作时可一目了然。苹果发明了双击操作,后来成为所有GUI操作系统的标准,即便现在的鼠标已经拥有大量的按键。图标文件以地址路径的方式加以组织,开启每个路径时都会弹出一个独立的显示窗口。
20、允许用户为每个文件指定执行的程序,只要双击该文件便会被相应的程序自动开启。,2023/7/28,http:/,23,界面设计(续),研究包括:人机界面的定义、起源、发展、研究内容及发展趋势;人机界面设计中认知心理学、人机工程学、人机界面的艺术设计、色彩设计等;人机界面设计,硬件人机界面的设计风格、人文关怀等;软件人机界面的形式与标准、软件人机界面设计、Internet网页界面设计、图标设计等;人机界面设计评价与可用性测试;新交互技术及展望,介绍了多通道用户界面、下一代人机界面展望及附录。界面设计:1用户导向(User oriented)原则2KISS(Keep It Simple And St
21、upid)原则3布局控制 4视觉平衡 5色彩的搭配和 文字的可阅读性 6和谐与一致性 7个性化 1)符合网络文化 2)塑造软件个性,2023/7/28,http:/,24,友好用户界面(FUI)设计流程图,视觉设计(Visual Design),交互设计(Interactive Design),结构设计(Structure Design),(1)整体布局(2)框架功能划分(3)模块代码结构化(4)整体外观划分,阶段 2,阶段 3,(1)界面清晰明了(2)提供视觉线索(3)提供默认(Default)、撤销(Undo)、恢复(Redo)功能(4)提供界面快捷方式(5)界面的协调一致(6)同样功能同
22、样图形,阶段 1,(1)有清楚的错误提示(2)让用户控制界面(3)允许用鼠标和键盘(4)允许工作中断(5)使用用户的语言,而非技术专业语言(6)提供快速反馈(7)方便退出(8)有简明的导航功能,2023/7/28,http:/,25,友好用户界面(FUI)设计,结构设计(Structure Design)结构设计也成概念设计(Conceptual Design),是界面设计的骨架。通过对用户研究和任务分析,制定出产品的整体架构。基于纸质的的低保真原型(Paper Prototype)可提供用户测试并进行完善。在结构设计中,目录体系的逻辑分类和语词定义是用户易于理解和操作的重要前提。如西门子手机
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 友好 用户界面 开发
链接地址:https://www.31ppt.com/p-5567082.html