UI与交互设计(整理).ppt

《UI与交互设计(整理).ppt》由会员分享，可在线阅读，更多相关《UI与交互设计(整理).ppt（61页珍藏版）》请在三一办公上搜索。

1、UI与交互设计,UI相关概念,UI 即User Interface(用户界面)的简称。GUI 即Graphical User Interface（图形用户界面）的简称。UI设计 则是指对软件的人机交互、操作逻辑、界面美观的整体设计。UE即User Experience，用户体验，它是指用户访问网站或者使用软件产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再次使用。他们能够忍受的问题，疑惑和BUG的程度。,交互设计，英文叫做Interaction Design交互设计是指设计人和产品或服务互动的一种机制。以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过

2、程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。HCI即人机交互，英文是human computer interaction,UI的应用范围,电脑的软件界面。比如操作系统、软件界面、网页、多媒体光盘。手机的界面。数字电视的界面。空调等家电摇控器上的界面。银行、移动等柜员机上的界面。,优秀UI作品,点击查看优秀UI作品,UI设计在中国的现状,目前在国内UI还是一个相对陌生的词，即便是一些设计人员也对这个词不太了解。我们经常看到一些招聘广告写着

3、：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，只是做一些图标，配下颜色等工作，缺乏对用户交互的重要性的理解，事实上UI设计的工作包括更广泛的内容。另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，忽视了良好的UI设计是提升用户体验的主要途径，是提升产品竞争力的重要法宝。,UI的范畴（工作内容）,研究用户。我们所开发的软件等产品，最终都是为人而做的，所谓以人为本，这不能是句空话，所以我们UI设计，必须研究人，研究我们的用户，要了解我们的用户想要什么，要利用我们的产品解决什

4、么问题，喜欢什么，不喜欢什么等等。研究用户与界面的关系。即人机交互，研究如何让用户更好的更方便的使用软件，则是我们常说的“易用性”。从事该行业的人，我们称之为“交互设计师”，主要做的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计，并确立交互模型，交互规范。研究界面的视觉效果。国内目前大部分UI工作者都是从事这个行业。也有人称之为“美工”，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。从事该行业的人，我们可以称之为“软件图形设计师”。,本课程主要学哪些？,UI设计的基本原则与禁忌。UI的视觉效果设计。手机图标设计练习

5、手机完整界面制作练习交互设计的基本原则与禁忌。使用FLASH完成整个手机操作系统UI设计团队管理原则与禁忌。根据进度，如果还有时间，我们再继续讲网站设计。,推荐书籍和网站,书籍：机械工业出版社的GUI设计禁忌2.0中国电力出版社的Photoshop CSUI设计完全攻略网站：http:/http:/http:/,UI设计的基本原则,可以说，UI设计的所有基本原则，都是建立在“易用性”的基础上。那什么是“易用性”？包括三个方面，按重要程度排列如下：1.产品执行用户所需的功能。（快速使用）2.快速安全地执行这些功能。（相对无错）3.容易掌握使用这些功能。（易于学习）,易用性不佳的例子,用户身边充斥

6、着专业术语,万能软件,不良的交互实例,vivi（薇 薇，26岁，一位优雅迷人的OL）打开钱包，从卡夹层里拿出那张有着金黄葵花的银行卡，又了到发工资的时候，不知道今天到帐了没有，还约好了明天和死党一 起Shopping呢！刚才路过银行想查一下余额，但是排队的人太多了，不过还有电话银行嘛，vivi一边想，一边拿出手机，拨通了电话银行的号码：,一个温柔礼貌的MM语音提示：“您好，欢迎使用招商银行电话银行系统，1，自动语音服务，2人工服务；”vivi把手机从耳边拿下来，找到1号键，按了一下；“1个人银行服务，2公司银行服务，3银证通功能，4个人外汇买卖服务，5基金服务，0退出；”,vivi又按了1；“

7、1存折户，2一卡通户，3个人信用卡户，4新旧卡号查询 0 退出；”vivi按下了1旁边的2号键；“请输入一卡通卡号，以#号结束；”“1080 80699”，vivi连忙输入了卡号，按#号键；“请输入查询密码，以#号结束；”因为开户不久，刚设的密码，vivi稍微想了一下，才把密码输进去，输完又看了一眼，按了#号键；,“1帐务查询，2转账，3修改密码，4电话挂失，5通讯业务，6自助贷款，7自助缴费及一卡通上网，8神州行充值服务，9凭证式国债，0退出”汗这都是些什么呀？vivi皱了皱眉，再次按了一下1；,“10人民币，21港币，32美元；35欧元，65日元，43英镑，29澳大利亚元，87瑞士法郎39

8、加拿大元，69新加坡元，00退出；”“10，拜托，我可只有人民币”电话里仍然是温柔礼貌而不折不扣的录音提示：“1活期，2 整存整取，3零存整取，4整存零取，5存本取息，6定活两便，7大额定期，8通知存款，9教育储蓄，0退出。”,“1”vivi一边按键一边看着手机屏幕上已经输入的一大堆数字。“1余额，2当天交易，3历史交易，0退出”“1”“您当前的余额是陆仟九佰五拾陆元伍角玖分”。谢天谢地，工资到帐了。vivi长舒一口气，查个余额，真不容易啊！,好的交互实例,名片上印相片,UI从构思到修正的例子,修改前,修改后,课堂小练习,1.拿出自己的手机，分析下自己手机上的UI，列出好的地方与不好的地方，越

9、多越好，越全面越好。2.与同学交换手机，按同样的方法分析。我们可以考虑的方面（仅供参考）：欠缺的功能经常出错或不好用的功能不方便的操作图标或界面问题除了打电话和发短信外，最常用的功能最想要的功能。理想的操作方式等等,第二章 UI的分类,2.1 命令语言用户界面 真正意义上的人机交互开始于联机终端的出现，此时计算机用户与计算机之间可借助一种双方都能理解的语言进行交互式对话。根据语言的特点可分为：,第二章 UI的分类,2.1.1形式语言 形式语言。这是一种人工语言，特点是简洁、严密、高效，如应用于数学、化学、音乐、舞蹈等各领域的特殊语言，计算机语言则不仅是操纵计算机的语言，而且是处理语言的语言；2

10、.1.2自然语言 自然语言。特点是具有多义性、微妙、丰富2.1.3类自然语言 类自然语言。这是计算机语言的一种特例。,第二章 UI的分类,命令语言的典型形式是动词后面接一个名词宾语，即“动词+宾语”，二者都可带有限定词或量词。命令语言可以具有非常简单的形式，也可以有非常复杂的语法。命令语言要求惊人的记忆和大量的训练，并且容易出错，使入门者望而生畏，但比较灵活和高效，适合于专业人员使用。,第二章 UI的分类,2.2.1传统界面介绍 传统界面是指可视化的实物界面，比如电视机的按钮、电源排插的插孔、键盘、汽车飞机的操控台、食堂的打卡机刷卡界面、相机的按钮界面、门上的把手界面、仪器的拆装提醒界面、交通

11、指示牌、手机键盘界面等。诸如此类的“硬件”界面就是我们所熟知的传统界面，他们的共同特点是看得见摸得着，不同的是有些界面你可以直接对它进行操作，通过正确的程序或者指令去完成操作过程，实现目的，比如插上插排就可以通电，打开电视机就可以看电视。有些界面则不行，例如拆装提醒界面、交通指示牌，这些是不能对它们进行直接操作的界面，它们的主要功能是提醒使用者去执行某件事情，它是不具有可操作性。,键盘界面可操作界面,相机界面,电视机、遥控界面,2.2.2 图形用户界面 图形用户界面(GUI-Graphics User Interface)是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。比较成熟的商品

12、化系统有Apple的Macintosh、IBM的PM(Presentation Manager)、Microsoft的Windows运行于Unix环境的X-Window、OpenLook和OSF/Motif。当前各类图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(Event-Driven)技术。图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有强烈的直接操作特点。,2.2.2.(1)制作界面的软件介绍,对于设计类的软件相信大家都不会很陌生了，我们大家所熟知的有以下软件Phot

13、oshopIllustratorFlashCoreldraw3DmaxMaya。,Photoshop是款功能强大的绘图和制图软件，它是平面设计者的绝佳选择，它有强大的画笔功能和滤镜效果，它可以把界面做得非常的华丽，色彩丰富质感逼真。用它适合做写实类的界面设计，比如科幻、魔兽类游戏的界面。但它也有自己的缺陷，Photoshop是款像素图图像编辑软件。它不能制作矢量类的界面，所以用它制作的界面是不可以拉伸和放大的。一旦拉伸了就会出现马赛克现象，这会严重损坏界面的美观效果。Photoshop的孪生兄弟Illustrator 作为全球最著名的图形软件Illustrator，以其强大的功能和体贴用户的界

14、面已经占据了全球矢量编辑软件中的大部分份额。具不完全统计全球有67%的设计师在使用Illustrator进行艺术设计！尤其基于Adobe公司专利的PostScript技术的运用，Illustrator已经完全占领专业的印刷出版领域。无论你是线稿的设计者和专业插画家、生产多媒体图像的艺术家、还是互联网页或在线内容的制作者，使用过Illustrator后都会发现，其强大的功能和简洁的界面设计风格都是其他同类软件所无法比拟的！,CorelDraw 是一个绘图与排版的软件，它广泛地应用于商标设计、标志制作、模型绘制、插图描画、排版及分色输出等诸多领域。作为一个强大的绘图软件，它被喜爱的程度可用下面的事

15、实说明：用作商业设计和美术设计的PC机几乎都安装了CorelDraw！另外还有一个矢量界面的生产者就是FLASH，Flash是结合动画、编程和矢量绘图的软件，它的主要功能有矢量绘图、制作二维动画、多媒体交互、网页网站、矢量界面设计、编程语言开发。Flash的强大之处是多媒体交互、网站网页、还有FLASH动画这块，界面设计只是是其中之一而已。,2.2.2.（2）图形图标设计,首先来介绍图标的含义，图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识，界面中的图标是功能标识。,图标分为广义和狭义两种：,广义具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广，软硬

16、件网页社交场所公共场合无所不在，例如：男女厕所标志和各种交通标志等。狭义计算机软件方面的应用，包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。,图标的大小：,图标有一套标准的大小和属性格式，且通常是小尺寸的。每个图标都含有多张相同显示内容的图片，每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片，每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性：它含有透明区域，在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。,第二章 UI的分类,2.1 命令语言用户界面 真正意义上的人机交互开始于联机终端的出现，此时计算机用户

17、与计算机之间可借助一种双方都能理解的语言进行交互式对话。根据语言的特点可分为：,一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性，导致了图标的大小需要有多种格式。操作系统在显示一个图标时，会按照一定的标准选择图标中最适合当前显示环境和状态的图像。如果你用的是Windows98操作系统，显示环境是 800 x600分辨率，32位色深，你在桌面上看到的每个图标的图像格式就是256色32x32象素大小。如果在相同的显示环境下，Windows XP操作系统中，这些图标的图像格式就是：真彩色（32位色深）、32x32象素大小。下面就是Windo

18、ws各个操作系统中的标准图标格式：（单位：大小象素颜色）,Windows 98 SE/ME/200048 x 48 25632 x 32-256 16 x 16 25648 x 48-16 32 x 32-16 16 x 16 16,Windows XP48 x 48-32bit 32 x 32-32bit 24 x 24-32bit16 x 16-32bit48 x 48 25632 x 32 25624 x 24 25616 x 16 25648 x 48 1632 x 32 1624 x 24 1616 x 16-16,图标的文件格式：,在Windows操作系统中，单个图标的文件名后缀是

19、.ICO。这种格式的图标可以在Windows操作系统中直接浏览；后缀名是.ICL的代表图标库，它是多个图标的集合，一般操作系统不直接支持这种格式的文件需要借助第三方软件才能浏览。在图形用户界面中，系统中的所有资源分别由三种类型的图标所表示：应用程序图标（指向具体完成某一功能的可执行程序）、文件夹图标（指向用于存放其他应用程序、文当或子文件夹的“容器”）和文档图标（指向由某个应用程序所创建的信息）。在Windows系统中，左下角带有弧形箭头的图标代表快捷方式。快捷方式是一种特殊的文件类型，它提供了对系统中一些资源对象的快速简便访问，快捷方式图标是原对象的“替身”图标。,图标是具有指代意义的具有标

20、识性质的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。它不仅历史久远，从上古时代的图腾，到现在具有更多含义和功能的各种图标，而且应用范围极为广泛，可以说它无所不在。一个国家的图标就是国旗；一件商品的图标是注册商标；军队的图标是军旗；学校的图标是校徽；同时它也在各种公共设施中被广泛使用，如公厕标识、交通指示牌等；,一个形象和一个图标之间有什么区别：,计算机图像是一个点阵图（组成像素）或矢量（组成的绘图路径）的图片，可以使用各种不同的格式（BMP，PSD，GIF，JPEG，WMF.).所有这些格式有几种不同的属性（点阵图，向量，压缩，分层，动画.），可以用来存

21、储图片，和决定任何大小。图标是不同的标准图像。他们是有标准尺寸（通常是小）：16x16，32x32，48x48.图标组成的几个图片。他们各自具有不同的大小和数量，颜色（a通道，16色，256色，16.8M.).一个图标最重要的属性是其包含透明区域的能力，这种能力能让图标的方形图案后面的屏幕背景变得可见,什么是一个图标的结构：,一个图标是一组图像，各种不同的格式（大小和颜色的）。此外，每幅图像可以包括透明的地区。这就是为什么你会发现一个透明的颜色在绘画调色盘为16或256色图片和一个变量的不透明参数使用Alpha通道，为新的RGB/A图像格式（不透明=0意味着透明）。,图标设计：,通过对图标的含

22、义、图标的功能、图标的尺寸大小的分析，我们就可以根据图标的这些特点进行设计制作。首先要设计图标的外型，因为一个图标的含义几乎完全体现在它的外型之上，好的外型让使用者很快就明白该图标有什么样的功能，反之让使用者一头雾水，从而使用户产生厌烦情绪。然后是图标大小和分辨率的设计，一般来说图标的大小都是有规定的（前文已经提到过了），根据图标的分辨率和大小尺寸进行设计，就能控制图标的设计效果，不会最后设计出来的一套图标有大也有小的。然后就是整体效果的制作了，这个环节就需要你有充实的美术功底和软件技术了，图标的好与坏就取决于你这个环节的成果。这个环节需要注意的是图标风格的整体把握，不能做一套五花八门图标出来

23、。最后是添加效果阶段，先整体调整图标色调，给制作好的图标添加高光和投影，有必要的话还可以加点特效，如闪电、发光、水晶等。这样就完成图标的设计了。,第三章 交互设计,3.1 什么是交互设计1 人机交互（Human-Computer Interaction,简写HCI）：是研究关于设计、评价和实现供人们使用的交互计算系统以及有关这些现象进 2 人机界面（Human-Computer Interface,简写HCI）：是人与计算机之间传递、交换信息的媒介和对话接口，是计算机系统的重要组成部分,第三章 交互设计,人机交互与人机界面是两个有着紧密联系而又不尽相同的概念。操作系统的人机交互功能是决定计算机

24、系统“友善性”的一个重要因素。人机交互功能主要靠可输入输出的外部设备和相应的软件来完成。可供人机交互使用的设备主要有键盘显示、鼠标、各种模式识别设备等。与这些设备相应的软件就是操作系统提供人机交互功能的部分。人机交互部分的主要作用是控制有关设备的运行和理解并执行通过人机交互设备传来的有关的各种命令和要求。,生活中的交互设计,请同学们讨论生活中的交互,什么是交互设计(Interaction Design),在使用网站，软件，消费产品，各种服务的时候（实际上是在同它们交互），使用过程中的感觉就是一种交互体验。随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。当大型

25、计算机刚刚研制出来的时候，可能为当初的使用者本身就是该行业的专家，没有人去关注使用者的感觉；相反，一切都围绕机器的需要来组织，程序员通过打孔卡片来输入机器语言，输出结果也是机器语言，那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候，对交互体验的关注也越来越迫切了。,交互设计（Interaction Design）,因此交互设计（Interaction Design）作为一门关注交互体验的新学科在二十世纪八十年代产生了，它由IDEO的一位创始人比尔莫格里奇在1984年一次设计会议上提出，他一开始给它命名为“软面（Soft Face）”，由于这个名字容易让人想起和

26、当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更名为“Interaction Design”交互设计。,从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。目的通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的。,交互设计和界面设计,界面是一个静态的词，当进行

27、界面设计的时候，我们关心的是界面本身，界面的组件，布局，风格，看它们是否能支撑有效的交互，但是，交互行为是界面约束的源头，当产品的交互行为清清楚楚地定义出来时，对界面的要求也就更加清楚了，界面上（如果存在可视界面的话）的组件是为交互行为服务的，它可以更美，更抽象，更艺术化，但不可以为了任何理由破坏产品的交互行为。,交互设计和界面设计,从广义上来说，也可以认为界面设计包含交互设计，在这样的情况下，它同时还包含另外的部分例如外观设计或平面设计，这些都是可以单独进行研究的更细的分支。,工作流程,Research(调查研究)Context studies(背景研究)Focus groups 关注群体

28、Competitor comparisons(竞争对手对比)Depth interviews 深度面试 Questionnaires 问答 User personas and scenarios 用户角色与场景了解 User goals 用户目标 Usability goals 可用性目标 Concept(概念定义)Concept models 概念模型 Usage scenarios 使用场景 Paper prototyping 简易原型 Usability testing 可用性测试 Expert evaluation 专家评估 Design(界面设计)Product structure

29、diagram 产品结构示意图 Process flows 程序流程 Wireframes 框架 Interactive prototypes 交互原型,Card sorting 卡片分类排序 就是把关键流程用卡片形式定义下来，然后不断组织，了解和挖掘最佳的排序模式 Usability testing 可用性测试Accessibility evaluation 易用性评估 Expert evaluation 专家评估 Functional specifications 功能型详述 Implementation(执行测试)Usability testing 可用性测试 Expert evalua

30、tion 专家评估 Accessibility evaluation 易用性评估 Launch(发布)Usability testing 可用性测试 Expert evaluation 专家评估 Accessibility evaluation 易用性评估 Focus groups 关注群体 Competitor comparisons(竞争对手对比)Metrics 测量,Research(调查研究)Context studies(背景研究)Focus groups 关注群体 Competitor comparisons(竞争对手对比)Depth interviews 深度面试 Questio

31、nnaires 问答 User personas and scenarios 用户角色与场景了解 User goals 用户目标 Usability goals 可用性目标 Concept(概念定义)Concept models 概念模型 Usage scenarios 使用场景 Paper prototyping 简易原型 Usability testing 可用性测试 Expert evaluation 专家评估 Design(界面设计)Product structure diagram 产品结构示意图 Process flows 程序流程 Wireframes 框架 Interactiv

32、e prototypes 交互原型,Card sorting 卡片分类排序 就是把关键流程用卡片形式定义下来，然后不断组织，了解和挖掘最佳的排序模式 Usability testing 可用性测试Accessibility evaluation 易用性评估 Expert evaluation 专家评估 Functional specifications 功能型详述 Implementation(执行测试)Usability testing 可用性测试 Expert evaluation 专家评估 Accessibility evaluation 易用性评估 Launch(发布)Usability testing 可用性测试 Expert evaluation 专家评估 Accessibility evaluation 易用性评估 Focus groups 关注群体 Competitor comparisons(竞争对手对比)Metrics 测量,