您的浏览器Javascript被禁用,需开启后体验完整功能, 请单击此处查询如何开启
  • 百度首页
  • 登录
  • 加入VIP
  • 享专业文档下载特权
  • 赠共享文档下载特权
  • 100w优质文档免费下载
  • 赠百度阅读VIP精品版
  • 立即开通
  • 意见反馈
  • 下载客户端
  • 网页 资讯 视频 图片 知道 贴吧 采购 地图 文库 |

    A5-交互设计体验日-用讲故事的方式来做手机产品交互设计_IT/计算机_专业资料

    2067人阅读|1216次下载

    A5-交互设计体验日-用讲故事的方式来做手机产品交互设计_IT/计算机_专业资料。2011中国交互设计体验日在北京举行,elya和Alex代表百度MUX出席并主持了“用讲故事的方式来做手机产品交互设计”的工作坊。 随着移动互联网浪潮滚滚来袭,移动设备交互设计师是时代的弄潮儿。你需要知道怎样为真正的目标用户做设计;需要知道真实用户的使用场景;需要知道怎样让你的产品变得用血有肉;需要知道怎样用讲故事的方式来做产品.....


    用讲故事的方式来做 手机产品交互设计 交互设计体验日 目录 1. 2. 3. 4. 5. 6. 互相认识一下 手机产品交互设计 找到真正的目标用户 还原真实的使用场景 讲好一个生动的故事 用故事串起设计循环 MUX:百度无线用户体验部,来自木星… 坚持以用户体验为中心来进行设计 遵循跨平台统一化化的设计原则 MUX.baidu.com @亚蕾克希儿 @elya妞 了解情况 在座有多少交互设计师? 有多少有过手机产品设计经验的? 有多少视觉设计师? 有多少产品经理/产品设计师? 有多少开发? 有多少学生? 给你们5分钟的时间,认识一下周围的朋友 其他人是? 目录 1. 2. 3. 4. 5. 6. 互相认识一下 手机产品交互设计 找到真正的目标用户 还原真实的使用场景 讲好一个生动的故事 用故事串起设计循环 2. 手机产品交互设计 10年能改变些什么? Nokia 3310 老爸的第一台手机 Nokia 3100 我的第一台手机 iPhone4 我现在的手机 2. 手机产品交互设计 10年能改变太多了… 2. 手机产品交互设计 充满扩展可能的智能终端 25 65 万个应用 亿次下载 移动应用生态系统 2. 手机产品交互设计 2. 手机产品交互设计 移动应用生态系统 28 60 万个应用 亿次下载 2. 手机产品交互设计 移动设备的独特优势有哪些呢? Strength 注:来源:Tomi Ahonen著《Mobile as 7th of the Mass Media》 砸核桃? 这个优势正在削弱… “ 真正的个媒体时代 ” “ 永远在线的大众媒体 ” “ @DJ课长 永远随身的媒体设备 ” “ 内置收费模块的工具 ” “ 无限想象力的引爆点 ” 2. 手机产品交互设计 移动设备交互设计有哪些挑战呢? Challenge 设备碎片化 平台多样性 适配多种分辨率 考虑多个方向 为拇指而设计 考虑多种环境 2. 手机产品交互设计 人们使用移动互联网方式有哪些不同? Different 我们是这样用Web的 环境舒适的 专注的 网络环境好 双手 大键盘 充足的电源 精准点击 阴晴不定 我们是这样使用移动互联网的 室外 注意力分散 晃动的 单手 私密的 简单的 当然,也有这样的… 苦劳一件 奇怪的角度 悠闲地 虚拟全键盘 别扭的双手 偶尔也有这样的… 用这 电 打 货 在 实 话 变 太 是 … 了 态 室外 最新潮的用法是—— 注意力分散 人们使用移动互联网的方式? 单手 皇马主 教练穆 简单的 里尼 奥用i Pad 指 挥欧冠 比赛 私密的 http://www.?ickr.com/photos/oimax/3800475934 2. 手机产品交互设计 Rule 移动交互新规则 规则1:保持简单 你设计出来的 他们真正需要的 规则2:重视交互方式的差异 规则3:了解平台但不要受限于平台 规则4:了解目标用户 规则5:重视环境的影响 规则6:学会讲故事 2. 手机产品交互设计 为什么要用讲故事的方式? Why Story-telling? 2. 手机产品交互设计 Story-telling 做设计就是在讲故事 设计的不是交互,而是情感 故事有起承转合,设计也有轻重缓急 还要经常跟一群人讲故事 2. 手机产品交互设计 Problems Ideas Products Persona Scenarios Story Story-telling深入到问题本身去解决问题,有利于激发新的ideas 2. 手机产品交互设计 Story-telling可以让设计师产生跟用户接近的情景体验,产生同理心 2. 手机产品交互设计 Story-telling可以帮助设计师更好的讲述设计,传达设计需求 目录 1. 2. 3. 4. 5. 6. 互相认识一下 手机产品交互设计 找到真正的目标用户 还原真实的使用场景 讲好一个生动的故事 用故事串起设计循环 百度新首页视频 http://v.youku.com/v_show/id_XMzAyMjIwNjgw.html 3. 找到真正的目标用户 下面来玩一个角色扮演游戏 你的名字叫Jack,男,是一个23岁的大学生,为了给你的女朋 友庆祝生日,你会用你的手机做些什么事情呢? 你的名字叫Rose,女,是一个21岁的大学生,收到了男朋友 Jack的祝福,你会怎样回应呢? 3. 找到真正的目标用户 用户的转化 先导型用户 目标用户 核心用户 真实用户 潜在用户 尝鲜型用户 主流用户 3. 找到真正的目标用户 为目标用户而设计 目标用户 ? =/= 人物角色 真实用户 ? 用户画像 3. 找到真正的目标用户 Persona 在用户调研的基础上 通过真实有效的用户数据 抽象出的虚拟角色 设计工具1:人物角色 3. 找到真正的目标用户 怎样创建人物角色? 找到一群目标用户 了解用户的特点 至少30名用户 3. 找到真正的目标用户 怎样创建人物角色? 把自己想象成一名组装师 将理解的用户组合成一个或者 多个新的“人” 给予他(她)名字和性格,爱 好,生活习惯等…… 3. 找到真正的目标用户 人物角色需要的信息? 名字 性别,性格,爱好, 教育背景 技术能力,使用频率,使用习惯 3. 找到真正的目标用户 一个例子 为陌生人交友应用创建的一个Persona 周一到周五努力工作,周末喜欢出去聚会 喜欢豆瓣同城,喜欢参团,不喜欢团人 喜欢旅游,地理白痴,但梦想是游遍世界 不太懂时尚,但因工作原因,需打扮自己 电脑程度中等,能执行简单的操作 杨柳,28岁,白领, 经理助理,做事严谨, 性格开朗,朝9晚5 有两部手机(工作&私人), 其中一部是智能触屏手机,使用常用软件 3. 找到真正的目标用户 为什么要使用人物角色? 更精准的定位用户群体 更生动的提炼用户需求 更立体的进行多方沟通 更有目的性的验证设计 3. 找到真正的目标用户 从“用户”到“我”的转变 目标用户是谁? 我是谁? 我要做什么? 我的目的是? 我该怎么做? 潜在的核心需求是什么? 产品的核心卖点是什么? 满足这些功能的交互策略? 产品 3. 找到真正的目标用户 单数组为男性设计一款日历应用 双数组为女性设计一款日历应用 1. 从你熟悉的人中寻找目标用户 2. 按照模板绘制你的产品的人物角色 3. 15分钟后,showtime Calendar 实践时间 目录 1. 2. 3. 4. 5. 6. 互相认识一下 手机产品交互设计 找到真正的目标用户 还原真实的使用场景 讲好一个生动的故事 用故事串起设计循环 4. 还原真实的使用场景 ID 1.1 1.2 2.1 2.2 什么人? 空虚寂寞男   派对动物 什么场景? 独自在家 出门在外 独自在家 什么目的? 找人闲聊 找人XX 约人派对 拿到一个陌生人交友的需求 怎么做? 打开应用,搜索附近的妞 1.提前搜索某地的妞 2.到了目的地后搜索附近的妞 打开应用,创建派对活动,设定地点和参加条件,愿者上钩 1.打开手机,搜索同一个派对的参加者 2.打开手机,搜索附近的人 3.打开手机,碰一碰加好友 4.扫描人脸,辨识新朋友社区评价 1.来我手机这里签到,近场扫描   参加别人的派对 认识新朋友 2.3   自己组织的派对 打发时间,娱乐 3 组织成员 一个班级的、一个公 司的、一个部门的、 想快速建立起来关系圈 一个培训营的人 1.基于位置和已有关系快速生成新的关系圈,关系圈动态放缩 2.基于地点创建关系圈,近场用户主动加入 3.基于属性创建关系圈,用户主动申请加入 1.被打招呼、送礼物后,回应,聊天 2.约出来见面,共享手机号、地理位置 1.主动搜索目的地男性用户,搭讪 1.拍照上传 2.改状态、改心情 4.1 4.1 5 等待搭讪女   自恋爱秀女 独自在家 出门在外 各种场景 被搭讪,派遣寂寞 找人导游 秀 4. 还原真实的使用场景 Scenario 描述用户实现目标的过程 用户的场景应包含一下几个关键要素: 目的、期望、动机、行为、回应 ? 用户、场景、目标、任务 设计工具2:使用场景 4. 还原真实的使用场景 什么人? 用户是谁? 你对用户了解多少? 你能预言出用户的哪些行为? 4. 还原真实的使用场景 什么场景? 用户身在何处?是公共场所,还是私人领域?是室 内还是室外?白天还是夜晚? 用户何时使用?是在拥有充裕时间的家里,还是只 能忙中偷闲的工作中?等车的空暇时间? 用户怎样使用移动设备?拿在手里还是放在口袋? 打开还是折叠?竖着还是横着? 4. 还原真实的使用场景 什么目的? 用户为什么使用你的应用程序? 用户在当前条件下,能够从内容或服务中获得什么 价值? 4. 还原真实的使用场景 怎么做? 达到目的可能采取的手段有哪些? 可能需要的行动步骤有哪些? 可能遭遇的特殊情况有哪些? 可能产生的同步/异步交互有哪些? 4. 还原真实的使用场景 场景有什么用? 场景是一种设计工具 场景是一种评价手段 场景是一种沟通手段 4. 还原真实的使用场景 人物角色和场景的差异? Persona明确了目标用户和用户目标 Scenario是描述用户实现目标的过程 4. 还原真实的使用场景 Calendar 场景:还原用户的使用场景 1. 根据已有人物角色还原使用场景 2. 还原在不同场景下的用户目标及任务 3. 15分钟后,showtime 实战演习 目录 1. 2. 3. 4. 5. 6. 互相认识一下 手机产品交互设计 找到真正的目标用户 还原真实的使用场景 讲好一个生动的故事 用故事串起设计循环 5. 讲好一个生动的故事 Sitepath diagramming 是一个草图交互系统 谁将是网站的目标用户 他们会完成哪些类型的动作 设计工具3:网站路径图 5. 讲好一个生动的故事 如何建立网站路径图? 可以在上面绘图的东西,越大越好 大量不同颜色的记号笔和小贴纸 一些Persona,如果有照片就更好了 5. 讲好一个生动的故事 如何建立网站路径图? 先画一个大圆,这就是交互系统 寂寞男 派对女 再画一些角色,这就是与系统交互 的所用用户 原则上最重要的用户放在左上角, 采用完全不同的方式使用应用的用 户放在右边 老板娘 组织男 5. 讲好一个生动的故事 如何建立网站路径图? 参考场景文档,选择一个主流场 景,从最主要的用户开始走流程 从主页开始,考虑所有可能发生的 事情,每件事情画个圈 考虑其他用户,可能跟已有事件产 生的交叉点 5. 讲好一个生动的故事 Calendar 网站路径图:把角色放在交互系 统里,讲一个故事 1. 网站路径图的绘制 2. 包括可能发生的事情和交叉点 3. 15分钟后,showtime 实战演习 5. 讲好一个生动的故事 Storyboard 用图文结合的形式 来描述一个完整任务 或是交互动作的可视化剧本 设计工具4:故事版 5. 讲好一个生动的故事 故事版有什么用? 1. 体验问题情景 2. 寻找解决方案 3. 发现新的问题 4. 多方沟通工具 5. 讲好一个生动的故事 故事版的四个要素? 角色 Human 功能 Objects 环境 Environment 事件 Action ? 用户 User 场景 Scenario 目标 Goal 任务 Task 5. 讲好一个生动的故事 故事版的四个要素? 详细的角色定义 姓名 使用环境 性别 年龄 教育 工作职位 硬件环境 人格 专长 收入 理由 Gary 办公室 男 32 研究生 SOHO 扫描仪、无线鼠标、PC 细心工整 影像编辑 50,000 编辑工具、影像修正因 非专业、Welcome 太贵 球类运动 Rebecca 住家工作室 女 23 大专 平面设计师 扫描仪、鼠标、PC、e CAM 俐落、简洁、幽默 平面设计 45,000 手绘输入、影像修正初 入门、不会买太贵的专 业产品 歌唱、 卡拉OK 李大忠 书房 男 17 高中 高中生 e CAM、MS鼠标 积极好奇 玩计算机游戏 5,000 多媒体、网页制作 学生、不买昂贵的 专业产品 登山旅游 Ben 办公室 男 42 大专 主管 鼠标、PC 略保守 多媒体分析 70,000 手写输入、一 般中文输入法 不太会用 看书 角色:目标用户、人物角色 简略的角色定义 Alice 在google做软件工 程师 她喜欢音乐和电影 嗜好 5. 讲好一个生动的故事 故事版的四个要素? 功能:对于故事板来说,可以是确定的内容,也可以是不确定的功能 功能特色 书签: 自动分类 分享 5. 讲好一个生动的故事 故事版的四个要素? 环境:环境的概念包括物理环境和社会环境 具体到故事板中,环境的概念就成为了一种情景。 情景包括时间、地点、周围的情况等一系列的内容。。 单一环境 工作时间9:00-18:00 办公室、办公位 多重环境 5. 讲好一个生动的故事 故事版的四个要素? 事件:是具体的人和系统的交互行为, 它将人、物和环境结合起来,构成了整个故事的内容。 5. 讲好一个生动的故事 Calendar 故事版:把角色放在某个场景 里,讲一个故事 1. 角色的简单介绍 2. 包括对问题的研究和自己的想法 3. 15分钟后,showtime 实战演习 故事版模板 shot1 shot2 shot3 shot4 shot5 shot6 目录 1. 2. 3. 4. 5. 6. 互相认识一下 手机产品交互设计 找到真正的目标用户 还原真实的使用场景 讲好一个生动的故事 用故事串起设计循环 6. 用故事串起设计循环 Persona Scenario Sitepath diagramming Storyboard Task analysis Interactive prototypes prototypes testing Product testing Re-storytelling 6. 用故事串起设计循环 Calendar 交互流程:结合主要角色、主要场 景、主要目标、主要任务,绘制交 互流程线框图 1. 包含关键页面线框图 2. 包含主要任务流程 3. 25分钟后,showtime 实战演习 推荐几本书 移动设备交互设计 Mobiel Interaction Design 移动应用的设计与开发 Mobile Design and Development Tapworthy App Savvy 就这些 mux.baidu.com @elya妞

    您的评论

    发布评论

    用户评价

  • 2018-06-23 00:04:54
  • +申请认证

    文档贡献者

    陈莹-elya妞

    用户体验布道师

    469911
    4.2
    浏览总量
    总评分

    喜欢此文档的还喜欢

  • 界面交互设计

     174页
      5下载券

    IPD基本概念介绍v10

     65页
      5下载券