从设计到交互设计ppt课件.ppt

从设计到交互设计,新浪产品部 陈志 Jared Chan,什么是交互设计谁是交互设计师停止设计“产品”我们该做什么怎么做衡量标准推荐,从设计到交互设计,交互无处不在,什么是交互设计,动态 操作 相互感知 非线性 体验 心理感受接受指令 给予反馈 情感变化,什么是交互设计,关键词：,交互设计(Interaction Design)是指为满足用户顺畅、愉悦地操作并达成预期任务而进行的分析、预测、定义、规划、描述和探索,什么是交互设计,V3版播放器,V4版播放器,哪个更好用？,什么是交互设计,V3版播放器,V4版播放器,大声告诉用户：,你“碰”到我了,谁是交互设计师,审美,创新,同理心,逻辑思维,评判,数据分析,沟通,观察,细节,全局,执行,激情,沉稳,谁是交互设计师,需求分析,项目确立,交互设计,原型设计,视觉设计,研发跟踪与设计维护,交互设计师,项目经理,产品经理,用户调研,数据中心,产品人员,视觉设计师,产品人员,设计师,研发与测试,设计师,停止设计“产品”,为什么你选择彩屏手机？为什么你需要更大尺寸的电视？为什么电脑操作系统会更新换代？,为什么手机某些功能会让你恼火？为什么电视遥控器让人头晕？为什么大家不再使用Dos？,停止设计“产品”,因为用户需要的不是“产品”，也不是“功能”，而是满足需求时的心理感受也可以称为“体验”,体验=战略=竞争力,定性的用户研究：了解用户行为和动机；开放式设计流程：将新创意转化为优秀用户体验；敏捷的技术实现：快速创建原型，并将它们从白板上转移到能提供反馈的人群中。摘自应需而变设计的力量,我们该做什么,交互设计,怎么做,工欲善其事，必先利其器：Axure RP 原型和流程图制作利器Mindmanager 绘制思维导图和产品架构Flash 制作交互Demo的最佳工具纸（白板）和笔 绘制低保真原型，沟通和记录的最高效工具,怎么做,发现问题（旧版网站）：操作不够流畅，缺乏个性，展现方式比较死板；不了解用户的需求，因此产品定位出现了偏差；功能落后于其它同类产品，缺乏竞争优势；与内部产品结合紧密，但也造成开放性不够；,大项目相册幻灯改版,怎么做,整理与规划：前端展现效果和操作体验；改善专辑分类方式；明确用户分类，加强对专业用户的服务；增加新功能，站外分享、在线图片处理等；,大项目相册幻灯改版,怎么做,了解用户：设定问卷，主要目标为了解用户使用习惯和内容偏好；利用Google Docs分发问卷，对调研结果进行分析；对典型用户进行访谈；找出国内外同类型产品，并深入使用；,大项目相册幻灯改版,名词解释,什么是交互文档，和产品文档的区别，为什么需要它？,以详尽的规范来统一交互效果；以文字和线框图的形式描述交互过程；产品文档不关心操作感受；为RIA与后台开发提供数据和形态参考；整理思路，梳理流程。,怎么做,制定规则、构建框架：制定交互规范，保证操作体验的一致性，包括尺寸缩放、运动速率等。对交互方式进行规划，缩短操作流程，加强反馈信息；规划整体架构，使功能布局更为合理；,大项目相册幻灯改版,名词解释,什么是交互Demo，为什么需要它，怎么做？,模拟真实的操作，可通过使用对最终效果做出预判和调整；有人叫它“高保真原型”；工具多样，建议用Flash、Expression Blend、Axure RP、JS，也可以用Powerpoint等；,怎么做,模拟真实状况：用Flash制作Demo，可针对主要操作流程；视觉可以不做高要求，但风格一定要符合产品定位；不断使用，并发现未预料到的可用性问题；让真正的用户进行操作，并提出反馈；反过来修正交互文档；,大项目相册幻灯改版,怎么做,与其他部门的配合：视觉设计部负责美化外观；配合开发人员不断修正效果；在测试中发现问题并修改；发布出去，并收集用户反馈；,大项目相册幻灯改版,怎么做,旧界面传达信息过多，对用户形成干扰；功能布局不合理，输入框放在了左侧；登录后的用户信息结构混乱；视觉风格陈旧，不符合目前的主流审美观；,中小型项目统一登录界面优化,怎么做,怎么做,怎么做,怎么做,怎么做,还要注意什么找出木桶的短板，更要找出乐章的强音；要从竞争产品身上学习精华，但也别忘去其糟粕；敏捷执行。一个简单的Demo比滔滔不绝的讲解和几十页的文档更具说服力，同时也会让我们少走很多弯路。不断地沟通。,衡量标准,什么是好的交互设计成果：高效 清晰 布局合理 引导性强 富有创意 美观用户：心情愉悦 信赖感 充满期待怎么衡量交互设计师的工作成果：完成任务的时长用户：回访率 使用时长 传播口碑,推荐,网站IDEAN http:/and Arrows http:/Path http:/书籍,应需而变设计的力量,About Face 3,情感化设计,Designing Interfaces,