交互设计.ppt

,*,交,互设计,教,Interaction Design,1-,What,/,什么是交互设计？,2-,How,/,交互设计的程序是什么？,3-,Do,/,展开优秀的交互设计？,What,那一个网站的内部结构是什么呢？,交互设计侧重于设计层面中的第二层：行为设计,交互设计与产品设计有着一样的设计流程与方法,普通,青年,文艺,青年,本能水平的设计,(Visceral),外形,行为水平的设计,(Behavioral),使用的乐趣和效率,反思水平的设计,(Reflective),自我形象、个人满意、记忆,这里翻译成,“,层面,”,而不是,“,层次,”,，就是因为这三者是一样的重要,同样的理论映像到界面设计,(1),UCD,设计心理学,(2),产品：,人机工学，造型美学，产品体验，,(3),市场：,V=F/C,1.,用之前：看,想用：界面美观，图标有很好的语义引导；,2.,用之中：用,容易：原型架构逻辑性强；,3.,用完后：想,黏度：习惯；,时间轴的,行为设计,所以,一样的开始：问题导向型解决方案；,一样的过程：交互设计与产品设计的流程是类似的；,一样的终点：实用性,-,易用性,-,愉悦性；,基于理性，成于感性；,几个概念,About Concept,Whats,UI,软件设计分为：编程与,UI,UI,设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。,UI=Users Interface,=,用户界面,/,人机界面,好的,UI,设计？,软件的操作变得舒适、简单、自由、,个性、充分体现软件的定位和特点。,UI,设计从工作内容上分,3,个方向,研究人；,研究人与界面的关系；,研究界面。,原型设计,交互设计,视觉设计,=,狭义的,UI,UI,广义,用户研究,操作逻辑,界面美观,研究人,用户测试,/,用户研究,User experience engineer,我们所开发的软件等产品，最终都是为人而做的，所谓以人为本，这不能是句空话，所以我们,UI,设计，必须研究人，研究我们的用户，要了解我们的用户想要什么，要利用我们的产品解决什么问题，喜欢什么，不喜欢什么等等。,用户研究工程师一般是心理学人文学背景。,用户研究：得出定位与原型,研究人与界面的关系,交互设计师，,interaction designer,即人机交互，研究如何让用户更好的更方便的使用软件，则是我们常说的,“,易用性,”,。,从事该行业的人，我们称之为,“,交互设计师,”,，主要做的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范等。,一个软件产品在编码之前需要作的就是交互设计，并确立交互模型，交互规范。,交互设计：研究 操作逻辑 与 体验,理性,感性,研究界面语义与美感,图形设计师：,Graphic UI designer,国内目前大部分,UI,工作者都是从事这个行业。也有人称之为,“,美工,”,，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。从事该行业的人，我们可以称之为,:,软件图形设计师，其中大部分是有美术设计教育背景，例如视觉传达设计，工业设计，信息多媒体设计等。,界面设计：研究用户审美与习惯,UI,的应用范围,PC,终端的软件界面。,比如操作系统、软件界面、网页、多媒体光盘。,手机的界面。,数字电视的界面。,空调等家电摇控器上的界面。,银行、移动等柜员机上的界面。,UI,设计基本原则,易用性包括三个方面，按重要程度排列如下：,1.,产品执行用户所需的功能（快速使用）,2.,快速安全地执行这些功能（相对无错）,3.,容易掌握使用这些功能。（易于学习）,可用性,易用性,愉悦体验,UI,设计师需要做到什么？,1.,简易性：,界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。,2.,可控性：,这是界面设计的先决条件，用户想要做什么，就一定让他做到，并且必须得到应有的提示。,3.,记忆负担最小化：,人脑比不了电脑，,人类的短期记忆极不稳定、有限。不要轻易打破用户的行为习惯，不要让用户思考。,4.,一致性：,是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与实际内容相一致。同一软件的不同界面，同一界面的不同板块，同一板块的不同位置，都必须保持相当的一致性。,5.,提高用户的熟悉程度：,用户可通过已掌握的知识来使用界面，但不应超出一般常识。如拟物法。,从用户的观点考虑：,想他们所想，做他们所做。大多数用户并没有相当的专业知识，他们往往只是从自身的经验和习惯出发思考和操作。把自己代入用户，设定为最糟糕的用户：无知，易怒，缺乏耐性。,有序排列：,一个有序排列的界面可以让用户轻松，让界面简洁美观。,安全性,：用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。,灵活人性化：,高效率和用户满意度是人性化的直接体现。要尽可能考虑到特殊用户的操作体验，如色盲，残疾人等。,5W2H,设计原则,WHO WHERE WHEN WHAT WHY HOW HOW MUCH,用户身边充斥着专业术语,万能软件,修改前,UI,的分类,2.2.1,传统界面介绍,传统界面是指可视化的实物界面，比如电视机的按钮、电源排插的插孔、键盘、汽车飞机的操控台、食堂的打卡机刷卡界面、相机的按钮界面、门上的把手界面、仪器的拆装提醒界面、交通指示牌、手机键盘界面等。诸如此类的,“,硬件,”,界面就是我们所熟知的传统界面，他们的共同特点是看得见摸得着，不同的是有些界面你可以直接对它进行操作，通过正确的程序或者指令去完成操作过程，实现目的，比如插上插排就可以通电，打开电视机就可以看电视。有些界面则不行，例如拆装提醒界面、交通指示牌，这些是不能对它们进行直接操作的界面，它们的主要功能是提醒使用者去执行某件事情，它是不具有可操作性。,键盘界面,可操作界面,相机界面,电视机、遥控界面,Whats,HCI,1,人机交互（,Human-Computer Interaction,简写,HCI,）：是研究关于设计、评价和实现供人们使用的交互计算系统以及有关这些现象进,2,人机界面（,Human-Computer Interface,简写,HCI,）：是人与计算机之间传递、交换信息的媒介和对话接口，是计算机系统的重要组成部分,HCI&UI,异同点,人机交互与人机界面是两个有着紧密联系而又不同的。,操作系统的人机交互功能是决定计算机系统,“,友善性,”,的一个重要因素。人机交互功能主要靠可输入输出的外部设备和相应的软件来完成。,可供人机交互使用的设备主要有键盘显示、鼠标、各种模式识别设备等。与这些设备相应的软件就是操作系统提供人机交互功能的部分。人机交互部分的主要作用是控制有关设备的运行和理解并执行通过人机交互设备传来的有关的各种命令和要求。,HCI,硬交互（实体产品）,=,人机工学,+,体验设计,软交互（虚体界面）,=UI,交互设计,&,狭义,UI,异同点,交互设计和界面设计的异同点,界面是一个静态的词，当进行界面设计的时候，我们关心的是界面本身，界面的组件，布局，风格，看它们是否能支撑有效的交互,.,但是，交互行为是界面约束的源头，当产品的交互行为清清楚楚地定义出来时，对界面的要求也就更加清楚了，界面上（如果存在可视界面的话）的组件是为交互行为服务的，它可以更美，更抽象，更艺术化，但不可以为了任何理由破坏产品的交互行为。,时间轴的行为设计,:,逻辑,&,体验,视,觉,设,计,Recommended books,/,推荐书籍,Recommended Webs,/,推荐网站,www.ixdc.org/,Experience=,用户体验,它是指用户访问网站或者使用软件产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再次使用。他们能够忍受的问题，疑惑和,BUG,的程度,。,UCD=,以用户为中心的设计,（,User Centered Design,）,是在设计过程中以用户体验为设计决,策的中心，强调用户优先的设计模式。,衡量一个,UCD,优劣的标准？,产品在特定使用环境下为特定用户用于特定用途时所具有的,有效性（,effectiveness,）、,效率（,efficiency,）,用户主观满意度（,satisfaction,）,延伸开来还包括对特定用户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后的整体心理感受等。,UCD,设计流程,1.,需求分析：（业务流程）,目的：根据产品需求和设计要求提供用户使用分析。,方式：访谈、焦点小组、提炼目标用户建立角色模型、场景分析、竞争对手分析、提炼定性和定量的相关数据。,结论报告：根据分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。,合作人员：市场人员、产品需求客户、项目负责人,2.,原型设计（信息架构,+,交互设计）,目的：概念方案设计。制定产品的业务功能和界面规范。,方式：与开发队伍合作设计各种交互原型。同商业方面的专家、市场部沟通，确认设计并得到认可。,作角色模型设计和情景设计，通过情景的再现演示来总结和逐步细化用户使用中的各种交互需求，提出设计解决方案，并完成设计方案的演示，讨论，完善，和最终定稿。,结论报告：制作交互设计原型。为用户界面和交互设计实施提供设计标准规格。,合作人员：项目负责人、开发团队、市场人员,3.视觉管理：,目的：使界面设计更符合产品定位，用户使用习惯及规范布局，对实现功能进行正确有效地引导。,方式：主持用户研究进行界面视觉引导。设计窗口规范，图形化的布局。,结论报告：界面测试报告。,=,输出视觉设计规范,合作人员：视觉设计师,4.,可用性测试：,目的,:,通过观察，来发现过程中出现了什么问题、用户喜欢或不喜欢哪些功能和操作方式，原因是什么。,方式：一对一用户测试,结论报告：用户背景资料文档、用户协议、测试脚本、测试前问卷、测试后问卷、任务卡片、过程记录文档、测试报告,合作人员：测试自愿者、市场相关人员,5.,跟踪调查：,目的：产品使用结果的反馈。,方式：用户访谈，用户反馈,结论报告：根据反馈意见及实际调查并根据预期目的撰写产品反馈结果报告。包括值得肯定的设计及对修改的建议。,合作人员：产品用户、市场相关人员,Whats,Web2.0,Web1.0,的主要特点在于用户通过浏览器获取信息。,Web2.0,则更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。,网站内容的制造者是说互联网上的每一个用户不再仅仅是互联网的读者，同时也成为互联网的作者；不再仅仅是在互联网上冲浪，同时也成为波浪制造者；在模式上由单纯的,“,读,”,向,“,写,”,以及,“,共同建设,”,发展；由被动地接收互联网信息向主动创造互联网信息发展，从而更加人性化！,Web2.0,特点,1.,用户分享。在,Web2.0,模式下，可以不受时间和地域的限制分享各种观点。用户可以得到自己需要的信息也可以发布自己的观点。,2.,信息聚合。信息在网络上不断积累，不会丢失。,3.,以兴趣为聚合点的社群。在,Web2.0,模式下，聚集的是对某个或者某些问题感兴趣的群体，可以说，在无形中已经产生了细分市场。,4,开放的平台，活跃的用户。平台对于用户来说是开放的，而且用户因为兴趣而保持比较高的忠诚度，他们会积极的参与其中。,Whats,GUI,图形用户界面,=Graphical User Interface,指采用图形方式显示的计算机操作用户界面。与早期计算机使用的命令行界面相比，图形界面对于用户来说在视觉上更易于接受。,图形用户界面,图形用户界面,(GUI-Graphics User Interface),是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。比较成熟的商品化系统有,Apple,的,Macintosh,、,IBM,的,PM(Presentation Manager),、,Microsoft,的,Windows,运行于,Unix,环境的,X-Window,、,OpenLook,和,OSF/Motif,。,当前各类图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动,(Event-Driven),技术。图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有强烈的直接操作特点。,制作界面的软件介绍,界面设计软件,PhotoshopIllustratorFlashCoreldraw3DmaxMaya,。,交互设计软件,Auxre Visol,ICON,图标,Icon,：,Icon,即为图标，分为 桌面图标 和 界面图标。,桌面图标是软件标识，所以也可以称为,Logo,。,界面图标是功能标识，表示功能与含义。,图标能够将产品或功能的信息快速传达给用户，并获得更好的视觉体验，在软件界面中具有重要价值。,图标能够强调产品的重要特点，醒目地传达用户须知的操作重点,图标可以减轻认知负担，尤其是对于复杂的产品功能,图标可以使人机界面更加具有吸引力，不显得空洞乏味,统一的图标风格能够加深用户记忆，给予他们信赖感,移动设备,ICON,规范：,由于受到移动设备屏幕尺寸和分辨的大小限制，,icon,的尺寸也不尽相同：,Icon,基本尺寸,:,96*96 64*64 48*48 32*32 16*16 12*12,Icon,平台：,symbian,、,mobile,、,java,、,android,、,iphone,、,mtk,不同平台对,ICON,的设计要求：,Symbian,Size:64*64 32*32 16*16,File layout:svg bmp png,Svg,是一种矢量文件，可由,AI,转化生成，可以对图标文件无虚化无损拉伸和压缩，但是需要分层，容易产生乱码。,Bmp,是最初使用的文件格式，不支持透明背景，现在已经被淘汰。,Png24,支持透明背景 不支持无损自适应缩放,Mobile,Size:32*32 16*16,File layout:ICO Ps:win mobile,不支持,PNG,格式,透明图标效果只能用,ICO,格式实现。,Android,Size:64*64 32*32,File layout:PNG24,透明背景,Iphone,Size:,自适应,File layout:PNG24,透明背景 无需其他效果，系统自动生成,ICON,表现技法：,光感表现：,材质表现：,Interface,：,图形图标设计,含义：图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识，界面中的图标是功能标识。,图标,广义,具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广，软硬件网页社交场所公共场合无所不在，例如：男女厕所标志和各种交通标志等。,狭义,计算机软件方面的应用，包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。,图标的大小：,图标有一套标准的大小和属性格式，且通常是小尺寸的。每个图标都含有多张相同显示内容的图片，每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片，每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性：它含有透明区域，在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。,一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性，导致了图标的大小需要有多种格式。,操作系统在显示一个图标时，会按照一定的标准选择图标中最适合当前显示环境和状态的图像。如果你用的是,Windows98,操作系统，显示环境是,800 x600,分辨率，,32,位色深，你在桌面上看到的每个图标的图像格式就是,256,色,32x32,象素大小。如果在相同的显示环境下，,Windows XP,操作系统中，这些图标的图像格式就是：真彩色（,32,位色深）、,32x32,象素大小。下面就是,Windows,各个操作系统中的标准图标格式：（单位：大小象素,颜色）,Windows 98 SE/ME/2000,48 x 48 256,32 x 32-256,16 x 16 256,48 x 48-16,32 x 32-16,16 x 16 16,Windows XP,48 x 48-32bit,32 x 32-32bit,24 x 24-32bit,16 x 16-32bit,48 x 48 256,32 x 32 256,24 x 24 256,16 x 16 256,48 x 48 16,32 x 32 16,24 x 24 16,16 x 16-16,图标的文件格式：,在,Windows,操作系统中，单个图标的文件名后缀是,.ICO,。这种格式的图标可以在,Windows,操作系统中直接浏览；后缀名是,.ICL,的代表图标库，它是多个图标的集合，一般操作系统不直接支持这种格式的文件需要借助第三方软件才能浏览。,在图形用户界面中，系统中的所有资源分别由三种类型的图标所表示：应用程序图标（指向具体完成某一功能的可执行程序）、文件夹图标（指向用于存放其他应用程序、文当或子文件夹的,“,容器,”,）和文档图标（指向由某个应用程序所创建的信息）。,在,Windows,系统中，左下角带有弧形箭头的图标代表快捷方式。快捷方式是一种特殊的文件类型，它提供了对系统中一些资源对象的快速简便访问，快捷方式图标是原对象的,“,替身,”,图标。,图标是具有指代意义的具有标识性质的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。它不仅历史久远，从上古时代的图腾，到现在具有更多含义和功能的各种图标，而且应用范围极为广泛，可以说它无所不在。一个国家的图标就是国旗；一件商品的图标是注册商标；军队的图标是军旗；学校的图标是校徽；同时它也在各种公共设施中被广泛使用，如公厕标识、交通指示牌等；,一个形象和一个图标之间有什么区别：,计算机图像是一个点阵图（组成像素）或矢量（组成的绘图路径）的图片，可以使用各种不同的格式（,BMP,，,PSD,，,GIF,，,JPEG,，,WMF.).,所有这些格式有几种不同的属性（点阵图，向量，压缩，分层，动画,.,），可以用来存储图片，和决定任何大小。,图标是不同的标准图像。他们是有标准尺寸（通常是小）：,16x16,，,32x32,，,48x48.,图标组成的几个图片。他们各自具有不同的大小和数量，颜色（,a,通道，,16,色，,256,色，,16.8M.).,一个图标最重要的属性是其包含透明区域的能力，这种能力能让图标的方形图案后面的屏幕背景变得可见,.,什么是一个图标的结构：,一个图标是一组图像，各种不同的格式（大小和颜色的）。此外，每幅图像可以包括透明的地区。这就是为什么你会发现一个透明的颜色在绘画调色盘为,16,或,256,色图片和一个变量的不透明参数使用,Alpha,通道，为新的,RGB/A,图像格式（不透明,=0,意味着透明）。,图标设计：,通过对图标的含义、图标的功能、图标的尺寸大小的分析，我们就可以根据图标的这些特点进行设计制作。,首先要设计图标的外型，因为一个图标的含义几乎完全体现在它的外型之上，好的外型让使用者很快就明白该图标有什么样的功能，反之让使用者一头雾水，从而使用户产生厌烦情绪。,然后是图标大小和分辨率的设计，一般来说图标的大小都是有规定的（前文已经提到过了），根据图标的分辨率和大小尺寸进行设计，就能控制图标的设计效果，不会最后设计出来的一套图标有大也有小的。,然后就是整体效果的制作了，这个环节就需要你有充实的美术功底和软件技术了，图标的好与坏就取决于你这个环节的成果。这个环节需要注意的是图标风格的整体把握，不能做一套五花八门图标出来。,最后是添加效果阶段，先整体调整图标色调，给制作好的图标添加高光和投影，有必要的话还可以加点特效，如闪电、发光、水晶等。这样就完成图标的设计了。,扁平化设计,抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更,“,平,”,的界面。扁平风格的优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。,比产品设计更,具有参照性，简而快,比产品设计更,有可能性，成本低,比产品设计更,有规则性，用户习惯,一旦养成，大同小异,比产品设计更,有情感性，懒而美,由此可知,图形 代替代码输入,用户认知共鸣,语义,&,美感,&,直观,Whats,IxD,Interaction Design,Whats,？,交互设计，又称互动设计，（英文,Interaction Design,缩写,IxD,或者,IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。,交互设计在于定义人造物的行为方式,(the,“,interaction,”,即人工制品在特定场景下的反应方式）相关的界面。交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了，它由,IDEO,的一位创始人比尔,摩格理吉,（,Bill Moggridge,）,在,1984,年一次设计会议上提出。,交互设计定义（一）,简单的说，交互设计是人工制品、环境和系统的,行为,，以及传达这种行为的外形元素的设计与定义。不像传统的设计学科主要关注形式，最近则是关注内容和内涵，而交互设计首先旨在,规划和描述事物的行为方式,，然后,描述传达这种行为的最有效形式。,艾兰,.,库珀,(alan cooper),VB,之父,交互设计之父,微软视窗先锋奖软件梦幻奖得主,库伯交互设计公司创始人,交互设计定义（二）,设计支持人们日常工作与生活的,交互式产品,。具体地说，交互设计就是,关于创建新的用户体验的问题,，其目的是增强和扩充人们工作、通信及交互的方式。,Winnogard,（,1997,）把交互设计描述为,“,人类交流和交互空间的设计,”,Helen Sharp,从用户角度来说，交互设计是一种,如何让产品易用，有效而让人愉悦的技术,，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解,“,人,”,本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。,DeDream,交互设计行业的发展,初创期（,1929-1970,）,1959,年，美国学者,B.Shackel,提出了人机界面的第一篇文献,关于计算机控制台设计的人机工程学,1960,年，,Liklider JCK,首次提出,“,人机紧密共栖的概念，被视为人机界面学的启蒙观点,1969,年，召开了第一次人机系统国际大会，同年第一份专业杂志,国际人机研究（,IJMMS,）,创刊。,奠基期（,1970-1979,）,从,1970,年到,1973,年出版了四本与计算机相关的人机工程学专著,1970,年成立了两个,HCI,研究中心：一个是英国的,Loughbocough,大学的,HUSAT,研究中心，另一个是美国,Xerox,公司的,Palo Alto,研究中心,发展期（,1980-1995,）,理论方面，从人机工程学独立出来，更加强调认知心理学以及行为学和社会学等学科的理论指导,实践范畴方面，从人机界面拓延开来，强调计算机对于人的反馈交互作用。,人机界面,一词被,人机交互,所取代。,HCI,中的,I,，也由,Interface(,界面,/,接口,),变成了,Interaction(,交互,),。,提高期（,1996-,）,人机交互的研究重点放在了智能化交互，多模态（多通道）,-,多媒体交互，虚拟交互以及人机协同交互等方面，也就是放在,以人为在中心,的人机交互技术方面。,交互的三个要素,人,界面,机器,/,系统,学科,人类工程学,心理学,认知科学,信息学,工程学,计算机科学,软件工程,社会学,人类学,语言学,美学,设计,图形设计,产品设计,商业美术,电影产业,服务业,交互设计,人机交互,（,HCI,）,交互设计的范畴,UCD,设计理想流程,简单说明：,1.,创造一些用户,2.,找出重要的活动,3.,找出用户模型,-,用户期望如何完成这些活动,4.,草拟出初版的设计,5.,一直反复把设计修改得更容易,直到虚构用户能轻易使用为止,6.,找真人来看着他们试用你的软件,接收需求,调研分析,交互设计,视觉设计,可用性测试,上线,交互设计所做的事情,可识别的,形状,布局,尺寸,色彩,可感知记忆的,语言的含义,色彩的隐喻,相对位置,层级、关系,可物理衡量的,流程,点击次数,移动距离,姿势,转换方式,交互设计的核心要素,精确描述我们的用户以及用户希望达到的目标，定义几个典型角色，并用故事的形式表达出来,目标,用户,产品,角色,筛选,分类,脚本,任务,场景,交互设计时需关注的可用性指标,易学习,容易使用,容错性,有效性,用户满意度,安全性,ISO9241/11,中的定义是：可用性是一个多因素概念，涉及到容易学习、容易使用、系统的有效性、用户满意，以及把这些因素与实际使用环境联系在一起针对特定目标的评价。,常用的交互设计工具,Visio,Axure,illustrator,Fireworks,Word,Photoshop,从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，,它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了,解,“,人,”,本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对,它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的,沟通。,不像传统的设计学科主要关注形式，交互设计则是,关注内容和内涵,，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式,。,色彩,+,形状考虑极端用户,改版后的页面视觉层次得到了很大的提升。白色内容区域、浅蓝,色右边栏和深蓝色的注册区域渐渐递进，深蓝色背景上的强烈反差的黄色按钮,“,Sign Up,”,，引导着这个页面的主要目的，亦是重点。另外，大家可以发现，内,容文字部分比先前的老版本少了一半一半再一半再一半。相应的，使用列点和,大图的方式传递了相同的信息。,“,Sign Up,”,显而易见，而且视觉上有突起的渐变,效果也马上让人知道，那是个按钮。,，原来占据垂直空间的,New items/all items,的切换、,mark all as,read,等功能，全部藏匿在右上角的下拉按钮中。,Refresh,被替换成了一个可以容,易理解的,Refresh,图标，顶端其他产品的链接也祛除了下划线。,it,INTERACTION,DESIGN,交互设计案例,案例,任务：在这个播放器中找出正在播放的曲目,案例,任务：在这个播放器中找出正在播放的曲目,这首？,这首？,这首？,这首？,实际是这首，但是你能快速地找到它在右栏播放列表的位置吗？,对比这个播放器，你不是能一眼就看出它的播放曲目了呢,眯眼测试（,squint test,）,就是一直眼睛闭上，眯着另一只眼睛看屏幕，用于测试平面的布局是否清晰，正确，在模糊中是否能区分出突出元素，次要元素。,三大区域：播放区，列表区，功能视窗区,右边的播放器布局更为区分明显一些,面对被模仿致敬的,Media player,，这个播放器并没有抓住其中关于交互的细节精髓。,当然这个播放器还是有优点的，比如造型独特，有歌曲去重的功能，播放速度快，乐库广泛等等。,讲到这里你或许会问了，难到交互设计就是这些细节性的问题吗？,-,不，不是的，这里讨论的不是细节，而是在人们使用产品的,过程,中因为细小的问题考虑不周到而影响了使用的体验。,细小到就如播放器上某个小图标的设置是否合理,搜狗浏览器中，专门将不常用的菜单放置在浏览器右边，为的是不和浏览器左边常用功能混淆，减低出错性，增加易用度,火狐浏览器中，将添加到收藏夹的按钮放在,url,旁边，位置显眼，而且省下了至少一个步骤,讲到这里你或许会问了，难到交互设计就是这些细节性的问题吗？,-,不，不是的，这里讨论的不是细节，而是在人们使用产品的,过程,中因为细小的问题考虑不周到而影响了使用的体验。,细小到就如播放器上某个小图标的设置是否合理,搜狗浏览器中，专门将不常用的菜单放置在浏览器右边，为的是不和浏览器左边常用功能混淆，减低出错性，增加易用度。,同时，因为宽屏电脑的使用，这样做也可以增大垂直的空间,大到整个流程的设计,会员，跳转页面进入深航页面，选择机票（头等舱和商务舱都无座），,下一步,填写旅客信息和人数，显示机票价格，,上一步 下一步,生成订单，,上一步,财付通支付,Qq,会员登录验证，弹出登录框,非会员，弹出框中提示，,更换,qq,号码,成为会员,（弹出框可以关闭）,Qq,会员登录验证,进入活动首页，点击,预定,或者,查询,腾讯深航合作项目预订机票简单流程图,加粗字体为按钮,上一个太简单，摘录一个比较复杂的,来自,THE END,.,Whats,UI,How,workflow,UI,工作 流程,2025/9/9 周二,176,竞争产品分析,领域调研,产出物,新产品开发任务,产品定位,用户分析,产品概述,功能需求规格整理,产出物,第一次,Check,是,/,否通过？,概念模型分析,功能结构图,使用场景分析,交互流程分析,产出物,第一次,Check,是,/,否通过？,信息架构和界面原型,要点说明,产出物,第一次,Check,是,/,否通过？,详细设计,设计和逻辑说明,产出物,第四次,Check,是,/,否通过？,完成设计维护,进入设计维护,End,BASIC RESEARCH,PRODUCT ANALYSE,INTERACTION DESIGN,PROTOTYPE DESIGN,DETAILED DESIGN,USER,六个阶段，每个阶段又有关键的工作内容和要求。,2025/9/9 周二,177,UE/UI,设计流程,第二阶段：产品分析,产品定位,从软件提供者的角度分析产品推出的意义和重点关注的方面，实际考量、丰满决策层的,idea,，明确列出产品定位，通过讨论修缮取得决策层的认可；,用户分析,结合竞争产品的分析资料，采用定性分析的方法，获得对产品目标用户在概念层面的认识；,产品概述,以软件提供的身份，以最简短的文字，向用户介绍产品，突出产品对用户的价值。避免功能点的简单罗列，而应该在归纳总结的基础上突出重点；,功能需求规格整理,在归纳关键功能的基础上，结合竞争产品规格整理的领域认识，从逻辑上梳理需求规格列表，重在逻辑关系清楚、组织和层级关系清晰。划定项目（设计和研发）范围；,产出物：,用户分析文档和产品概述、功能规格列表,产品定位,用户分析,产品概述,功能需求规格整理,产出物,第一次,Check,是,/,否通过？,2025/9/9 周二,178,UE/UI,设计流程,第三阶段：交互设计（功能结构和交互流程设计）,产品概念模型分析,从产品功能逻辑入手，结合对常见软件的经验积累和竞争产品的认识，加上对用户的理解，为产品设计一个尽量接近用户对产品运行方式理解的概念模型，成为产品设计的基础框架；,功能结构图,在产品概念模型的基础上丰富交互组件，并理顺交互组件之间的结构关系；,使用场景分析,模拟典型用户执行关键功能达到其目标的使用场景；,交互流程分析,模拟在上述概念模型和功能结构决定的产品框架之中，支持使用场景的关键操作过程（即鼠标点击步骤和屏幕引导路径）；,产出物：,产品设计文档的交互设计部分,概念模型分析,功能结构图,使用场景分析,交互流程分析,产出物,第一次,Check,是,/,否通过？,2025/9/9 周二,179,UE/UI,设计流程,第四阶段：原型设计（信息架构和界面原型设计）,信息架构和界面原型设计,设计产品界面中应该包含的控件数量和类型、控件之间的逻辑和组织关系，以支持用户对控件或控件组所代表的功能的理解，对用户操作的明确引导；所有界面设计成为一套完整的可模拟的产品原型；,设计要点说明,对界面设计的重点添加说明，帮助涉众对设计的理解；,产出物：,产品设计文档的原型设计部分,信息架构和界面原型,要点说明,产出物,第一次,Check,是,/,否通过？,2025/9/9 周二,180,UE/UI,设计流程,第五阶段：详细设计（详细设计和伪代码编写）,详细设计,完善设计细节、交互文本和信息设计（,Message box,）；,设计和逻辑说明,对界面控件,/,控件组,/,窗口的属性和行为进行标准化定义，梳理完整的交互逻辑，用状态迁移图或伪代码形式表示；,产出物：产品设计文档的详细设计部分,第六阶段：设计维护（研发跟踪和设计维护）,语言文档整理,设计通过评审之后，把产品中所有的交互文本整理成,excel,文档，预备研发工作；,研发跟踪维护,进入研发阶段后负责为研发工程师解释设计方案、问题修改、文档完善、,Bug,跟踪等；,产出物：,产品语言文档，设计调整维护,详细设计,设计和逻辑说明,产出物,第四次,Check,是,/,否通过？,完成设计维护,进入设计维护,End,2025/9/9 周二,181,UE/UI,设计流程,第一阶段：基础调研,竞争产品分析,寻找市场上的竞争产品，挑选,3-5,款进行解剖分析。整理竞争产品的功能规格；并分析规格代表的需求，需求背后的用户和用户目标；分析竞争产品的功能结构和交互设计，从产品设计的角度解释其优点、缺点及其原因，成为我们产品设计的第一手参考资料。,领域调研,结合上述分析基础和资料，纵观领域竞争格局、市场状况，利用网络论坛、关键字搜索等手段获得更多用户反馈、观点、前瞻性需求。,产出物：相应的对比分析文档和领域调研报告,竞争产品分析,领域调研,产出物,新产品开发任务,2025/9/9 周二,182,UE/UI,设计流程,这是一个著名的模型，把,UCD,过程中的每个工作步骤和内容都完整而流畅的概括进来。很大程度上帮助我理清了,UCD,相关的混乱头绪。以这个模型为基础，我整理了一个比较可行的,UCD,流程。,2025/9/9 周二,183,UE/UI,设计流程,需求,功能定义,交互设计,视觉设计,DEMO,UI,设计（交互,/,视觉,/,编码）,实现,PM OR TEAMLEADER,软件工程师,2025/9/9 周二,184,第于第一步的用户调研问题，当然迫于条件的限制，我们不可能有机会去做用户研究相关的工作，通常是从竞争对手的分析中来获得关于用户的理解和灵感。用,Jesse James Garrett,的话说，在相同领域做相似的事情的研发团队，所服务的用户必定具有某种程度的相似性。按照产品分析和设计套路倒推，解剖优秀产品的设计策略，可能是快速建立用户认识的窍门。,可能有人觉得理解用户是市场的事，显然这是片面的。其实理解用户能够在以用户为中心的设计过程中帮助设计决策，如果没有这个认识，很可能会在后面的设计决策和讨论中陷入个人英雄主义的表演和政治博弈之中。当然，寻找用户还能使我们收获更多的领域知识，整理对手的优缺点，并能在后续的概念设计、交互设计和原型设计中提供极大的参考价值。,2025/9/9 周二,185,UE/UI,设计流程,交互设计,视觉设计,CSS/HTML,编码,生成产品原型（线框图）,生成产品模型（效果图）,生成产品,DEMO,（效果图）,实现产品（最后阶段）,2025/9/9 周二,186,UE/UI,设计流程,一、生成产品原型,Prototype,（线框图）,原型就是用来让人改的。它存在的价值就体现在被修改了几次，被更新了几次，以及它的下一步被少改了几次。,2025/9/9 周二,187,UE/UI,设计流程,二、生成产品模型,Mock-up,（效果图）,在原型被大家接受之后，就该关心产品长得好不好看了。我们以,“,模型,”,这个词来统称该步骤的交付物。和原型相比，它关注于产品的视觉设计，包括色彩、风格、图标、插图等等。,2025/9/9 周二,188,UE/UI,设计流程,三、生成,HTML/CSS,页面,Demo,就是按照原型和模型用,HTML(XHTML)/CSS/Jav