从设计到交互设计.pptVIP

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