互联网产品设计方法培训讲义

按一下以編輯母片,第二層,第三層,第四層,第五層,按一下以編輯母片標題樣式,南京欣网视讯信息技术有限公司,2008,年,7,月,互联网产品设计方法,UCD,曾庆瑞,目录,UCD,和,UE/UX,的概念和分析,1,产品设计团队的组建和产品设计流程,2,产品设计方法和原型、工具的使用,3,为什么,UCD,如此重要？,UCD,（,User-centered design,）：以用户为中心的设计,在开发产品的每一个步骤中，都要把用户列入考虑范围,UCD,是一个口号吗？,UCD,对于实际工作有什么指导和意义呢？,UCD,即创建高效的,UE,方法，与其说,UCD,是一种方法还不如说是一种互联网产品的设计思想，那么成功的,UE,（,User Experience,）用户体验又具有什么样的意义？,理解人们所想和所需：,围绕用户需求和心智模型进行产品设计,用户体验价值图,它向我们解释了积极的、良好的用户体验可以增加用户的回访、获得用户的信任，增加购买的意向，实际上是增加了我们获得利润的能力。,即使我们的网站并不是直接靠在线销售获得利润的经营模式，但高效的用户体验可以提高转换率，实际上是帮我们更快、更稳健的达到我们的商业目标。,UE,车轮构成用户体验的,30,种要素,这个模型应该从内部解释，它从中间开始：,价值是我们想要达到的目标。,从顾客到提供商，正向的用户体验是可以实现“双赢”的,我们通过正向的用户体验来实现价值。,用户体验由许多方面组成，我们必须重视可寻性、可接近性、合意性、可用性、可靠性和有用性这些方面。,用户体验的方面又由许多方面组成，这个模型具体呈现了,30,种要素。,用户体验的要素,战略层：用户的需求是什么？网站的目标,/,商业目的是什么？,范围层：什么样的信息和内容满足用户的需求？,结构层：如何组织、导航，并响应用户满足其需求？,框架层：如何将 概念模型细化到具体的界面外观、布局、导航信息设计,视觉层：用户看到的最终表现形式,这不仅仅是用户体验的要素组成结构，也总结了我们的产品设计过程，试想一下我们的工作将处于哪个层面？,目录,UCD,和,UE/UX,的概念和分析,1,产品设计团队的组建和产品设计流程,2,产品设计方法和原型、工具的使用,3,产品设计团队,产品设计团队：,PM,（项目经理,/,产品经理）,BI,（商业情报）,UR,（用户体验分析师）,user researcher,IA,（信息架构师）,(information architect),ID,（交互设计师）,interaction designer,CD,（内容设计师）,Content Designer,VD,（视觉设计师）,visual designer,UID,（界面设计师）,user interface designer,把专业的事交给专业的人去做，然后专心做自己专业的事,我们拍一部有,10,个角色的电影，但我们只有,5,位演员，我们不会去掉,5,个角色，而是,1,个人饰演,2,个角色,产品经理,产品经理负责整个产品的定位、规划、定制发展方向及策略，,并负责团队的激励和管理：,他应该把精力用于产品的“战略层”、“范围层”，他不一,定对每一个领域都精通，但一定具有全局观和把控能力。,产品经理的产品管理能力，体现在具体工作：,负责产品概念设计的把关,撰写市场需求文档（,MRD,）和产品需求文档（,PRD,）,进行竞争状况分析,规划产品路线图,制作产品演示,PPT,分析产品数据等,组织沟通、注重细节、商业嗅觉、整体规划,信息架构师,IA,（信息架构师）,(information architect),网站的信息组织系统、标识系统、导航系统和搜索系统,组织方式,分类体系,顺序排列,导航,结构设计,确定网站的结构类型，层级？矩阵？线性？,让用户在信息空间中很清楚自己的位置和达到目的地的途径,设计信息环境、组织结构,对信息的系统分类，以符合用户的思维模型,对信息进行顺序设计、让用户在合适的时间、合适的位置获取应该得到的信息,一个有效的信息架构可以让人们按照逻辑直观的，毫无阻碍的一步步地接近他们需要的信息,信息构架,节点的结构方式：层级？矩阵？线性？,组织原则：按照网站目标和用户需求分类,控制性词典：控制信息一致性,元数据：信息的属性,导航系统：导航设计,位置和标识,交付物：构架图、线框图,交互设计师,交互设计师以目标为导向的设计，最早属于界面设计的范畴，交互设计的过程主要是“任务分解”的过程，简单来说就是“我们把产品功能按照用户的具体需求组合成典型任务场景，然后对每个任务进行详细的使用流程设计”。决定交互设计有多少工作的并非多少界面，而是有多少任务,。,我们的交互设计师通常只做：,行为设计：,用户点击之后反馈什么样的结果？,可以拖拽操作吗？,用什么样的语言和用户交互？,界面设计：,使用按钮还是图标？,TAB,如何表现？,错误处理,交付物：产品线框图（,Wireframes,）、产品特性清单（,Feature List,）, ,交互设计师需要具备凭空想象复杂行为的能力,观点：,1,、交互设计师不要把全部的精力用于交互设计的表现层面，而要更多的去考虑交互思想、交互理念的设计。,2,、用户,3,步完成一项任务一定比,5,步完成这项任务更加具有可用性吗？,交互设计任务分解举例,从招聘广告看交互设计师,界面交互信息构架？,从招聘广告看用户体验分析师,产品设计流程参考,产品设计流程,通过数据分析研究，定位产品和用户,确定用户群体特征，研究用户目标和行为的关键因素,产品的理念、定位、整体性结构、用户需求核心,通过用户调研，结合定量、定性分析，为不同目标用户制定不同的产品策略,1,、市场研究,2,、用户定位分析,3,、产品概念设计,4,、用户细分,产品设计流程,产品设计流程,设计人物角色，建立档案,针对目标用户，分析功能模块，确定做什么和不做什么,信息空间的结构、组织、导航、标识。通过任务分解（场景设计），设计互动流程,通过用户现场操作、低保真原型操作等方式做产品的可用性测试,5,、人物角色创建,6,、功能需求分析,7,、信息构架、交互设计,8,、可用性测试,产品设计过程中的交付物,概念阶段（,concept,）阶段的交付物：概念文档（,concept document,）或者是概念原型（,concept prototype,）,探索阶段（,discover,） 阶段的交付物：提案文档（,Proposal Document,）,定义阶段（,definition,） 的交付物：需求文档（,Product Requirement Document,），产品概念设计（,Concept Design Meterials,）,细化阶段（,refinement,） 的交付物：产品线框图（,Wireframes,）、产品特性清单（,Feature List,）、最终的原型设计（可以是任何版本的，例如,HTML,、,Flash,或者是专用的原型制作工具）,某工作小组的产品策划流程,各个阶段的交付物形式,举例：,YAHOO,产品设计流程,团队组建,产品经理（,product manager,）,用户体验研究员,(user researcher),信息架构师,(information architect),视觉设计师,(visual designer),、界面设计师（,user interface designer,）,互动设计师,(interaction designer),工程师,(web developer)/ engineer,工作流程,1,、产品经理制定产品整体构架，产品发展方向等，做全局把控,2,、以上人员共同参与产品讨论，制定时间表以及任务分工,3,、用户体验研究员作产品和用户等调查研究,4,、信息架构师设计产品信息架构、内容架构,5,、互动设计师设计互动流程,6,、视觉设计师,(visual designer),和,user interface designer,做视觉设计,7,、,web developer,把设计模型通过编写程序,(html, dhtml, JavaScript),等再 现，最后交给工程师,8,、用户体验研究员需要做用户测试,9,、,QA(Quality assurance),需要测验产品的操作步骤，确认产品的使用质量,产品设计中的棘手问题,我们公司没有,UED,、,IA,、,ID,、,VD,，更别说什么,UR,了，我们如何开展产品设计工作？,网站的行文、界面文字谁来把关、是,PM,还是,ID,，还是谁？,PM,和,UE,的关系如何界定？,谁，何时，需要加入产品设计的概念性阶段？,产品设计规范如何确定和执行？,为什么我们产品设计时间总是不够用？,缺乏高效的沟通、团队成员对于目标的不明确，会导致整体效率的下降，我们要让团队的成员都清楚：,产品目标、工作流程、设计规范、日程安排,目录,UCD,和,UE/UX,的概念和分析,1,产品设计团队的组建和产品设计流程,2,产品设计方法和原型、工具的使用,3,以用户为中心的设计方法举例,卡片分类,(Card Sorting),观察用户是如何理解内容和组织信息，用来帮助你的网站,(,产品,),更合理的组织信息。,情境访谈,(Contextual Interviews),走进用户的现实环境，让你了解你的用户的工作方式，生活环境等等情况。,焦点小组,(Focus Groups),组织一组的用户进行讨论，让你更了解用户的理解、想法、态度和想要什么。,启发式评估,(Heuristic Evaluation),可用性的检查方法，让一些行内专家对网站产品进行指导。,以用户为中心的设计方法举例,单独访谈,(Individual Interviews),一对一的用户讨论,让你了解某个用户是如何工作,使你知道用户的感受,想要什么和他的经历。,平行设计,(Parallel Design),对同一个网站,(,产品,),进行分开的设计，从而比较选择一个最佳方案。,角色模型,(Personas),构建一个虚构的人来代表大部分用户，设计团队围绕这个虚拟人物设计开发产品。,原型,(Prototyping),利用简单网站,(,产品,),原型进行相关的测试，从而节约后期大量的成本。,以用户为中心的设计方法举例,问卷调查,(Surveys),利用网上或纸张的问题,list,对用户进行发放填写，从而收集用户对网站,(,产品,),的反馈意见。,任务分析,(Task Analysis),通过任务分析了解用户使用你网站,(,产品,),时的目标和操作方式，习惯。,可用性测试,(Usability Testing),请用户来试用你的网站,(,产品,),，有任务性的完成测试。从而得到你所想要的东西。,用例,(Use Cases),描述某个用户使用你网站,(,产品,),时的情况，包括目标和行动。,用户研究人物角色创建,人物角色（,Personas,）作为,UCD,方法中最重要的一个工具 ，是通过创建典型用户来代表具有不同目标的用户从而满足具有类似目标和需求的用户群”，介绍了通过角色，产品设计者可以站在用户的角度考虑问题，从而把设计者的注意力集中在用户需求和目标上,用户研究人物角色创建,用户定性研究,细分用户群,为细分群体,创建角色,用户访谈,现场调查,用例测试,用目标细分,用使用周期细分,用行为和观点,介绍一种最简单的人物角色创建方法定性人物角色：,除了定性分析法之外，还有：,经定量验证的定性人物角色,完全的定量人物角色,建立档案,展示人物角色,融入角色,用户研究人物角色创建,不经过分类、逻辑分析的原始用户数据、访谈调查表本身并没有什么意义，往往会让我们陷入细节并得到错误的结论,创建角色：人物角色可以时刻提醒我们，要把时间用在满足我们的目标用户群体上,人物角色可以避免我们基于自己的想法做决策,太夸张,太漂亮,太隐藏,太多干扰,人物角色形象要具有普通代表性，并和人物特性相符合,原型设计：故事板,*,纸板,用于屏幕； * 邮票式张贴,用于菜单、对话框和其他的屏幕元素； * 透明的幻灯片,用于临时项目或用户输入； * 隐藏的带子或者其它用于用户输入的带子； * 笔和标记（可擦写标记用户输入或临时信息）； * 用来擦除输入的水； *, ,原型设计，主要是设计产品的功能、用户流程、信息架构、交互细节、页面元素等 ，它更多的向产品设计团队的每一位成员传递着产品的设计理念、核心功能、网站结构、基本布局等，但经常不包括视觉设计。原型设计主要形式：纸质、交互式卡片、线框图、图形、,html,、,flash,等，主要工具有,word,、,visio,、,DW,、,photoshop,、,Axure RP,等,纸质原型,优势,* 技术壁垒消失* 更少的辩论时间* 传达产品感觉不错* 比,Visual Basic,或者,HTML,原型制作快速* 廉价* 人人都可以参加设计纸质原型,用户可以协同设计原型或参加之后的测试部分,缺点,*有限的交互,不是所有的交互问题可以被充分的测试（例如，某些功能，例如鼠标划过事件给用户一个反馈无法模拟）,*不能评价的响应时间* 不得在实际系统中制造模拟数据* 不能评估视觉* 需要摆弄大量的纸* 超过,3,个人的演示是不合适的,图形原型设计,VISIO,制作的图形原型（,visio,、,photoshop,、,illustrator,）,优点：,效果美观、清晰,适合做电子归档,。,缺点：,制作时间长,不适合现场互动研讨,。,线框图设计,线框图,(Wireframes),是信息架构和交互设计最重要的交付物之一 ，往往模型设计要依据于线框图。,HTML,原型,低保真原型容易制作，用来展示基本交互作用，例如静态的,html,。它可以用来与用户“彩排”。,HTML,的原型比纸原型更适合检查设计的动态过程；这里的”高保真”的,html,样机已经包含视觉设计的元素,线框图,(Wireframes),是信息架构和交互设计最重要的交付物之一,产品设计过程的工具使用举例,产品从设计到发布的六个阶段,概念阶段,concept,discover,definition,refinement,development,launch,探索阶段,定义阶段,细化阶段,开发阶段,发布阶段,交互设计：,Axure rp,Axure,是一款特别好用的产品模型设计软件，可视化操作，,ajxa,能直接生成页面需求，更独特的它可以实现：,div onmouse onclick,等很多交互事件，,UI,和工程师看到页面能直接看到你要设计的效果,思维导图：,Mind manager,mind manager,是一款可视化思维导图软件，它可以智能的建立各个模块，各个主、次、平级目录。同时也当便做调整、做对外的功能结构的报告演示,流程设计：,Visio,谢谢！,