《UFDesignRichInteractiveApp.ppt》由会员分享，可在线阅读，更多相关《UFDesignRichInteractiveApp.ppt（87页珍藏版）》请在三一办公上搜索。
1、,设计具有丰富交互的应用系统,DESIGN R ICH I NTERACTIVEAPPLICATIONS,陆宏正(Cindy),Ph.D.,CHFPAlbridge Solutions,Inc.,An Affiliate of Pershing,a BNYM Company,1,2.,3.,4.,认识邻座,1.,名字工作单位和负责领域希望从本工作坊学到什么每组选择1-2个实际工作中的项目供小组作为讨论丰富交互设计的实例2,1.,2.,3.,工作坊学习目标,认识丰富交互,学会丰富交互的设计原理学习如何设计丰富交互,3,1.,2.,3.,课程安排 一AGENDA P ART I什么是具有丰富交互的
2、应用？(10)为什么它能增强用户体验?(5)丰富交互的基本设计原理(40),4.5.,讨论(20）小结(5),休息（30分钟）4,1.,2.,3.,4.,5.,课程安排二A GENDA PART II高层次的交互设计原理（20）其他考虑的因素(10)设计过程（10）练习（30）小组展示(25）,6.,总结（10）,5,什么是具有丰富交互的应用系统？WHAT IS RICH I NTERACTION?,1.2.,新浪网CNN,6,什么是具有丰富交互的应用系统？,WHAT IS RICH I NTERACTION?,7,丰富交互-定义,RICH I NTERACTIONS,丰富交互,1.简单直接的
3、交互方法2.多种交互形式,3.具有桌面应用系统的特性,丰富网络应用,Rich Internet Applications(RIAs),8,为什么丰富交互增强了户体验？WHY U SER S EXPERIENCE IS ENHANCED,丰富,富有,9,讨论,桌面应用程序 网页应用程序,移动装置：智能手机，平板电脑,10,为什么丰富交互增强了用户体验？WHY U SER S EXPERIENCE IS ENHANCED,1.2.3.4.,直接的体验简单快捷连续参与愉快的体验直接+简单+快捷+参与+愉快,11,1.,2.,3.,4.,5.,6.,丰富交互设计原理,直接交互简单轻便保持同页提供邀请显
4、示过渡立即反应,Make it directKeep light-weightedStay on the same pageProvide an invitationUse transitionsReact immediately,参考：“Designing Web Interfaces”by Bill Scott&Theresa Neil12,直接交互,13,直接交互,14,直接交互,15,直接交互,16,简单轻便,百度,“一号直达，用一个账号，不需要切换，即可直达所有互联网,服务”,17,参考：百度推出全新首页及移动操作系统,http:/,简单轻便,18,19,简单轻便,20,保持同页,2
5、1,保持同页,设计模式:,Master/Detail,22,提供邀请,23,提供邀请,24,提供邀请,25,http:/,提供邀请,26,显示过程,27,显示过渡,28,显示过程,29,显示过渡,30,显示过渡,31,立即反应,32,立即反应,33,立即反应,34,立即反应,35,3.,5.,丰富交互设计原理,1.2.4.6.,直接简单轻便在同页完成功能提示显示中间过程立即反应36参考:“Designing Web Interfaces”by Bill Scott&Theresa Neil,37,38,39,40,41,3.,4.,5.,6.,讨论 运用小组的实际例子讨论互动设计原理,1.2.
6、,直接交互简单轻便,保持同页提供邀请显示过程立即反应,直接的体验简单快捷连续参与愉快的体验,42,B REAK,43,交互设计原理的层次,用户目标,用户动机,用户能力,使用环境,设计价值概念设计原理行为设计原理界面设计原理44参考：About Face 3(Alan Cooper,Robert Reimann,and Dave Cronin),设计价值 对使用者有帮助，有价值 不能对使用者有害 有目的,优雅,简单，和谐,45,46,47,48,概念设计原理 是否适合所设计的产品 使用者 使用场合,办公室,大厅,机场安检,商店,在运动中,公路收费,支持流程技术平台49,50,51,参考：iOS
7、Human Interface Guidelines http:/,52,参考：iOS Human Interface Guidelines http:/,3.,5.,行为和界面设计原理 目的是减少使用者的工作量,思维记忆与发现视觉,体力学习,1.2.,直接简单轻便,在同页完成功能,4.6.,提示显示中间过程 53立即反馈,54,55,Page 56,62,界面设计原理,可实现,组件可重复使用 浏览器的兼容性,无障碍(accessibility),63,浏览器的兼容性,64,丰富互动的技术和平台,R ICH I NTERACTION T ECHNOLOGIES AND P LATFORM,Ad
8、obe Flash,Java,Microsoft Silverlight,HTML5,65,66,http:/,从哪入手？瀑布开发过程,需求分析,概要设计,详细设计,编码,测试,交付准备,客户验收,敏捷开发过程,产品定义,Sprint 0SharedVision,计划1,Sprint1,回顾计划2,Sprint2,67,目标导向设计G OAL-D IRECTED D ESIGN,问题与目标,解决方案,实施,研究范围现有产品利益相关者用户,建模人物设计人与环境关系场景设计,需求理想体验产品需求,框架元素：信息功能,详细设计行为视觉语言品牌,支持考虑约束限制条件CSS支持,流程结构：布局,导航模式
9、,68,关键场景参考：About Face 3(Allan Cooper,Robert Reimann,and David Cronin),1.,2.,要点理解需要解决的问题与目标建立互动框架,3.4.,设计互动评估和测试,69,人物，场景，需求,交互设计,设计原理,70,交互设计,建立互动框架,详细设计,71,建立互动框架,72,详细设计,73,选择多项,74,75,76,77,搜索信息 设计模式分析,自动完成 实时建议 实时搜索 完善搜索,78,搜索信息 问题分析,问题：找到需要的信息搜索范围：已知或未知已知的信息：部分信息希望的结果：花最小的力气以最快的速度找到准确的信息,提供多项选择供参考,79,自动完成,80,自动完成,81,82,构建原型 目的沟通设计概念 评价 测试 作为开发的基础 形式,静态,交互83,84,用户测试,目的使用者是否能理解我们的设计？使用者能顺利完成想要做的事吗？有什么设计漏洞？能找到需要的功能吗？设计的流程是否与用户的理解的流程一致？呈现的信息是否清楚？是否是使用者所需的？,85,设计练习,运用所选的项目实例，运用小组的实际,例子设计出至少 2-3 个比原来更好的丰,富互动,86,总结丰富的交互（Rich Interactions）多种形式及简单直接的交互方法,邀请,行动,过渡,反馈,直接的体验简单快捷连续参与愉快的体验87,
