人机交互界面设计与实现

界面交互设计段静迪学时安排第一章界面的定义4第二章UI界面设计4第三章界面交互设计与制作8第一章界面的定义4第二章UI界面设计4第三章界面交互设计与制作8讲授实验界面交互设计？交互界面设计基本定义交互设计，又称互动设计，(英文InteractionDesign,缩写IxD或者IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(theinteraction,即人工制品在特定场景下的反应方式)相关的界面。——Wikipedia.org“启发式交互-让创新的界面具有教学功能。”什么是交互设计：什么样的人更适合做交互设计师？交互设计师需要具备凭空想象复杂行为的能力，交互设计应当在任何代码编写之前做。交互设计师必须能够在代码被写出来之前，想象它是做什么的。——AlanCooper交互界面设计基本定义如果说设计=解决问题的话，那么界面视觉设计，就是用视觉语言去解决逻辑问题。色彩选择，决定了人们在第一眼看到网站时的感觉。因此，色彩是Web设计者手中最普遍，也是最强大的工具。“让色彩更具有可读性-用最少的颜色表达最准确的内容。”什么是界面视觉设计：为什么当人们开始喜欢某些界面的时候，它们事实上会变得更可用？积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最少；积极的情感让人们更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。——DonaldNormanUI设计UI设计UI如何设计UI设计UI的应用范围•电脑的软件界面。–比如操作系统、软件界面、网页、多媒体光盘。•手机的界面。•数字电视的界面。•空调等家电摇控器上的界面。•银行、移动等柜员机上的界面。•……UI设计UI设计在中国的现状目前在国内UI还是一个相对陌生的词，即便是一些设计人员也对这个词不太了解。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，只是做一些图标，配下颜色等工作，缺乏对用户交互的重要性的理解，事实上UI设计的工作包括更广泛的内容。另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，忽视了良好的UI设计是提升用户体验的主要途径，是提升产品竞争力的重要法宝。UI的范畴（工作内容）–研究用户。•我们所开发的软件等产品，最终都是为人而做的，所谓以人为本，这不能是句空话，所以我们UI设计，必须研究人，研究我们的用户，要了解我们的用户想要什么，要利用我们的产品解决什么问题，喜欢什么，不喜欢什么等等。–研究用户与界面的关系。•即人机交互，研究如何让用户更好的更方便的使用软件，则是我们常说的“易用性”。•从事该行业的人，我们称之为“交互设计师”，主要做的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范等。•一个软件产品在编码之前需要作的就是交互设计，并确立交互模型，交互规范。–研究界面的视觉效果。•国内目前大部分UI工作者都是从事这个行业。也有人称之为“美工”，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。从事该行业的人，我们可以称之为“软件图形设计师”。UI设计本章节主要学哪些？•UI设计的基本原则与禁忌。•UI的视觉效果设计。–手机图标设计练习–手机完整界面制作练习•交互设计的基本原则与禁忌。–使用FLASH或AXURE完成整个手机操作系统•UI设计团队管理原则与禁忌。•根据进度，如果还有时间，我们再继续讲网站设计。UI设计UI设计的基本原则可以说，UI设计的所有基本原则，都是建立在“易用性”的基础上。那什么是“易用性”？包括三个方面，按重要程度排列如下：1.产品执行用户所需的功能。（快速使用）2.快速安全地执行这些功能。（相对无错）3.容易掌握使用这些功能。（易于学习）UI设计易用性不佳的例子UI设计易用性不佳的例子UI设计UI设计用户身边充斥着专业术语UI设计万能软件UI设计不良的交互实例取款机上查询工资余额，但是排队的人太多了，不过还有电话银行嘛，一边拿出手机，拨通了电话银行的号码：UI设计一个温柔礼貌的语音提示：“您好，欢迎使用建设银行电话银行系统，1，自动语音服务，2人工服务；”vivi把手机从耳边拿下来，找到1号键，按了一下；“1个人银行服务，2公司银行服务，3银证通功能，4个人外汇买卖服务，5基金服务，0退出；”UI设计一个温柔礼貌的语音提示：“您好，欢迎使用招商银行电话银行系统，1，自动语音服务，2人工服务；”vivi把手机从耳边拿下来，找到1号键，按了一下；“1个人银行服务，2公司银行服务，3银证通功能，4个人外汇买卖服务，5基金服务，0退出；”UI设计又按了1；“1存折户，2一卡通户，3个人信用卡户，4新旧卡号查询0退出；”vivi按下了1旁边的2号键；“请输入一卡通卡号，以#号结束；”“108080699”，vivi连忙输入了卡号，按#号键；“请输入查询密码，以#号结束；”UI设计“1帐务查询，2转账，3修改密码，4电话挂失，5通讯业务，6自助贷款，7自助缴费及一卡通上网，8神州行充值服务，9凭证式国债，0退出”汗……这都是些什么呀？UI设计好的交互实例•名片上印相片•招商银行电话语音•多功能汽车方向盘UI设计UI从构思到修正的例子修改前UI设计修改后UI设计修改后UI设计课堂小练习1.拿出自己的手机，分析下自己手机上的UI，列出好的地方与不好的地方，越多越好，越全面越好。2.与同学交换手机，按同样的方法分析。•我们可以考虑的方面（仅供参考）：–欠缺的功能–经常出错或不好用的功能–不方便的操作–图标或界面问题–除了打电话和发短信外，最常用的功能–最想要的功能。–理想的操作方式–等等……UI的分类UI的分类•传统界面介绍•传统界面是指可视化的实物界面，比如电视机的按钮、电源排插的插孔、键盘、汽车飞机的操控台、食堂的打卡机刷卡界面、相机的按钮界面、门上的把手界面、仪器的拆装提醒界面、交通指示牌、手机键盘界面等。•诸如此类的“硬件”界面就是我们所熟知的传统界面，他们的共同特点是看得见摸得着，不同的是有些界面你可以直接对它进行操作，通过正确的程序或者指令去完成操作过程，实现目的，比如插上插排就可以通电，打开电视机就可以看电视。有些界面则不行，例如拆装提醒界面、交通指示牌，这些是不能对它们进行直接操作的界面，它们的主要功能是提醒使用者去执行某件事情，它是不具有可操作性。UI的分类图形用户界面•图形用户界面(GUI-GraphicsUserInterface)是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。比较成熟的商品化系统有•Apple的Macintosh、IOS•IBM的PM(PresentationManager)、•Microsoft的Windows•当前各类图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有强烈的直接操作特点。UI的分类图形用户界面•图形用户界面当前最流行的为触屏系统•APPLE的IOS系统•谷歌的ANDROID系统•微软的win8系统•摆脱传统的键盘以及鼠标，从而执行更•精简的操作，直观的交互。UI的分类UI设计决定了交互的方式界面交互UI用户体验UE？用户体验UE设计UE体验设计基本概念用户体验是一个测试产品满意度与使用度的词语。在大多数情况下，产品软体测试或是商业行销测试时，会用到用户体验这个词。有时在探讨设计价值时，也会用到此新设计是否导出更差的用户体验，来评估其好坏。除了用户能完成必须的任务之外，应该还提供积极的体验，而应用设计和交互流程也应令用户感到愉悦。“以用户为中心设计-设计必须是满足用户需求的、可行的，其次才是可产生商业价值的。”什么是用户体验：为什么电子商务网站用户体验设计师有时也把用户体验称作顾客体验？这里特指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再来/使用。他们能够忍受的问题，疑惑和BUG的程度。——Uigarden.net用户体验在交互设计中的重要性从一个倒霉的一天开始：当你醒来时阳光已经照进你的窗户，而你的闹钟并没有响。匆忙起床后打开咖啡机，却发现壶里没有咖啡。出门开车发现车没有了，匆忙加油却发现油卡没用，去排队付现满满都是人。加油后又因为路上一起事故而堵车了，千辛万苦到单位后发现最终还是迟到。“当产品满足人们的需要时，产品才是真正的称之为产品”什么是用户体验：用户体验在交互设计中的重要性交通事故：事故是一个司机为了调收音机音量而视线离开了前方。收银机：收银排队是因为收银系统过于复杂加油机：插卡插反了，加油机没有提示咖啡机：匆忙中没有把开关按到底，自动开启功能始终没学会。闹钟：因为你的猫半夜踩了闹钟一脚。“当产品满足人们的需要时，产品才是真正的称之为产品”什么是用户体验：分析是不是可以避免这些UE体验设计基本流程•腾讯ISD组织架构UE体验设计基本流程•腾讯ISD网站组-网站设计流程UE体验设计基本流程•阿里巴巴用户体验部项目流程UE体验设计基本流程•阿里巴巴用户体验部项目流程UE体验设计交付物标准与原则为什么要对各阶段输出物的名称进行修正？更加形象化的表达，体现专业性，减少歧义prototypemockupdemo交互原型视觉稿前端demoUE体验设计交付物标准与原则分析用户类型和用户目标以及我们能提供的功能为各类型用户目标设计完整的宏观通路分别详细进行每种用户的各个目标的流程交互设计师+决策人员（商业价值提议）+策划（功能性提议）交互设计师（流程图+说明文档）交互设计师+决策人员（商业价值提议）+策划（功能性提议）+技术（是否能实现判断）UE体验设计交付物标准与原则设计每个流程中的细节流程进行视觉UI设计，页面排版设计部分结束交互设计师+决策人员（商业价值提议）+策划（功能性提议）+技术（是否能实现判断）美术设计师（图标设计，排版、配色、说明设计及思路）+交互设计师（是否符合用户习惯提议，不参与美观讨论）美术设计师+交互设计师+决策+策划UE体验设计交付物标准与原则进行技术实现产品完成上线检测技术支持（开发）+交互设计师（技术与设计有冲突的地方随时讨论）交互设计师+技术人员（调整修改）其余人员+用户（参与测试）UE体验设计交付物标准与原则用以表达交互设计内容是产品原型设计过程中的阶段性成果、过渡型交付通过可视化产出使各方对设计范围和内容有形象化的、统一的认知“输出物是用以表述观点和描述设计方案，本身不是设计的目的。”交互输出物（Prototype）：什么时候提交输出物？在向视觉设计或前端开发提交需求时，应附带上传完整的输出物文档，并在变更时保持附件更新UE体验设计交付物标准与原则帮助交互设计师明确方案需要提供的内容及范围，减少遗漏减少沟通和衔接成本、提高工作效率标准化是为了：怎样做好体验设计UE•同理心、目标明确、高效、优雅同理心：从合乎常理的角度观察问题；目标明确：带着明确的设计目的；高效：主导注重实效的项目设计讨论；优雅：设计出优雅统一的用户界面交互。用户体验在交互设计中的重要性设计者UI用户UE关注体验注重细节界面交互设计与实例界面交互设计与实例界面交互设计与实例按照软件运行的方式，软件可以分为两种类型：桌面软件和网页软件。本次课程主要以网页软件为研究的对象。界面交互设计与实例界面交互设计与实例福特MyfordTouch车内控制系统界面交互设计与实例界面交互设计与实例界面交互设计与实例图形用户界面GUI1983年，苹果推出的Macintosh(128K）型电脑获得成功，很大程度上归功于其配备了GUI操作系统：System1.