用讲故事的方式来做

手机产品交互设计交互设计体验日

目录1. 互相认识一下2. 手机产品交互设计3. 找到真正的目标用户4. 还原真实的使用场景5. 讲好一个生动的故事6. 用故事串起设计循环

MUX：百度无线用户体验部，来自木星…

坚持以用户体验为中心来进行设计

遵循跨平台统一化化的设计原则

MUX.baidu.com

@亚蕾克希儿

@elya妞

了解情况在座有多少交互设计师？

有多少有过手机产品设计经验的？有多少视觉设计师？

有多少产品经理/产品设计师？

有多少开发？

其他人是？

有多少学生？

给你们5分钟的时间，认识一下周围的朋友

目录1. 互相认识一下2. 手机产品交互设计3. 找到真正的目标用户4. 还原真实的使用场景5. 讲好一个生动的故事6. 用故事串起设计循环

Nokia 3100我的第一台手机

Nokia 3310老爸的第一台手机

iPhone4我现在的手机

2. 手机产品交互设计10年能改变些什么？

2. 手机产品交互设计10年能改变太多了…

2. 手机产品交互设计充满扩展可能的智能终端

25万个应用

65亿次下载

2. 手机产品交互设计移动应用生态系统

28万个应用

60亿次下载

2. 手机产品交互设计移动应用生态系统

移动设备的独特优势有哪些呢？

注：来源：Tomi Ahonen著《Mobile as 7th of the Mass Media》

Strength

2. 手机产品交互设计

这个优势正在削弱…砸核桃？

真正的个媒体时代“ ”

永远在线的大众媒体“ ”

永远随身的媒体设备“ ”@DJ课长

内置收费模块的工具“ ”

无限想象力的引爆点“ ”

移动设备交互设计有哪些挑战呢？

Challenge

2. 手机产品交互设计

设备碎片化

平台多样性

适配多种分辨率

考虑多个方向

为拇指而设计

考虑多种环境

人们使用移动互联网方式有哪些不同？

Different

2. 手机产品交互设计

我们是这样用Web的

专注的

双手

环境舒适的网络环境好

大键盘

充足的电源

精准点击

单手

室外

简单的

注意力分散

晃动的

我们是这样使用移动互联网的

私密的

阴晴不定

奇怪的角度苦劳一件

别扭的双手

当然，也有这样的…

悠闲地虚拟全键盘

偶尔也有这样的…

用这货打电话

实在是太变态

了…

http://www.flickr.com/photos/oimax/3800475934

单手

人们使用移动互联网的方式？

室外

私密的

注意力分散

简单的

最新潮的用法是——

皇马主教练穆里尼奥用iPad指挥欧冠比赛

移动交互新规则Rule

2. 手机产品交互设计

规则1：保持简单

你设计出来的 他们真正需要的

规则2：重视交互方式的差异

规则3：了解平台但不要受限于平台

规则4：了解目标用户

规则5：重视环境的影响

规则6：学会讲故事

为什么要用讲故事的方式？Why Story-telling？

2. 手机产品交互设计

做设计就是在讲故事

设计的不是交互，而是情感

故事有起承转合，设计也有轻重缓急

还要经常跟一群人讲故事

Story-telling2. 手机产品交互设计

Story-telling深入到问题本身去解决问题，有利于激发新的ideas

Problems Ideas Products

Persona Scenarios Story

2. 手机产品交互设计

Story-telling可以让设计师产生跟用户接近的情景体验，产生同理心

2. 手机产品交互设计

Story-telling可以帮助设计师更好的讲述设计，传达设计需求

2. 手机产品交互设计

目录1. 互相认识一下2. 手机产品交互设计3. 找到真正的目标用户4. 还原真实的使用场景5. 讲好一个生动的故事6. 用故事串起设计循环

百度新首页视频

http://v.youku.com/v_show/id_XMzAyMjIwNjgw.html

下面来玩一个角色扮演游戏

你的名字叫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实践时间

3. 找到真正的目标用户

目录1. 互相认识一下2. 手机产品交互设计3. 找到真正的目标用户4. 还原真实的使用场景5. 讲好一个生动的故事6. 用故事串起设计循环

拿到一个陌生人交友的需求4. 还原真实的使用场景

ID 什么人？ 什么场景？ 什么目的？ 怎么做？

1.1 空虚寂寞男 独自在家 找人闲聊 打开应用，搜索附近的妞

1.2 　 出门在外 找人XX 1.提前搜索某地的妞2.到了目的地后搜索附近的妞

2.1 派对动物 独自在家 约人派对 打开应用，创建派对活动，设定地点和参加条件，愿者上钩

2.2 　 参加别人的派对 认识新朋友1.打开手机，搜索同一个派对的参加者2.打开手机，搜索附近的人3.打开手机，碰一碰加好友4.扫描人脸，辨识新朋友社区评价

2.3 　 自己组织的派对 打发时间，娱乐 1.来我手机这里签到，近场扫描

3 组织成员一个班级的、一个公司的、一个部门的、一个培训营的人

想快速建立起来关系圈1.基于位置和已有关系快速生成新的关系圈，关系圈动态放缩2.基于地点创建关系圈，近场用户主动加入3.基于属性创建关系圈，用户主动申请加入

4.1 等待搭讪女 独自在家 被搭讪，派遣寂寞 1.被打招呼、送礼物后，回应，聊天2.约出来见面，共享手机号、地理位置

4.1 　 出门在外 找人导游 1.主动搜索目的地男性用户，搭讪

5 自恋爱秀女 各种场景 秀 1.拍照上传2.改状态、改心情

4. 还原真实的使用场景设计工具2：使用场景

Scenario描述用户实现目标的过程

用户的场景应包含一下几个关键要素：

目的、期望、动机、行为、回应 用户、场景、目标、任务

用户是谁？

你对用户了解多少？

你能预言出用户的哪些行为？

什么人？4. 还原真实的使用场景

用户身在何处？是公共场所，还是私人领域？是室内还是室外？白天还是夜晚？

用户何时使用？是在拥有充裕时间的家里，还是只能忙中偷闲的工作中？等车的空暇时间？

用户怎样使用移动设备？拿在手里还是放在口袋？打开还是折叠？竖着还是横着？

什么场景？4. 还原真实的使用场景

用户为什么使用你的应用程序？

用户在当前条件下，能够从内容或服务中获得什么价值？

什么目的？4. 还原真实的使用场景

达到目的可能采取的手段有哪些？

可能需要的行动步骤有哪些？

可能遭遇的特殊情况有哪些？

可能产生的同步/异步交互有哪些？

怎么做？4. 还原真实的使用场景

场景是一种设计工具

场景是一种评价手段

场景是一种沟通手段

场景有什么用？4. 还原真实的使用场景

Persona明确了目标用户和用户目标

Scenario是描述用户实现目标的过程

人物角色和场景的差异？4. 还原真实的使用场景

1. 根据已有人物角色还原使用场景2. 还原在不同场景下的用户目标及任务3. 15分钟后，showtime

Calendar场景：还原用户的使用场景

4. 还原真实的使用场景实战演习

目录1. 互相认识一下2. 手机产品交互设计3. 找到真正的目标用户4. 还原真实的使用场景5. 讲好一个生动的故事6. 用故事串起设计循环

5. 讲好一个生动的故事

是一个草图交互系统

谁将是网站的目标用户

他们会完成哪些类型的动作

Sitepath diagramming设计工具3：网站路径图

5. 讲好一个生动的故事如何建立网站路径图？

可以在上面绘图的东西，越大越好

大量不同颜色的记号笔和小贴纸

一些Persona，如果有照片就更好了

5. 讲好一个生动的故事如何建立网站路径图？

组织男

再画一些角色，这就是与系统交互的所用用户

寂寞男派对女

老板娘

先画一个大圆，这就是交互系统

原则上最重要的用户放在左上角，采用完全不同的方式使用应用的用户放在右边

5. 讲好一个生动的故事如何建立网站路径图？

参考场景文档，选择一个主流场景，从最主要的用户开始走流程

从主页开始，考虑所有可能发生的事情，每件事情画个圈

考虑其他用户，可能跟已有事件产生的交叉点

1. 网站路径图的绘制2. 包括可能发生的事情和交叉点3. 15分钟后，showtime

Calendar网站路径图：把角色放在交互系统里，讲一个故事

5. 讲好一个生动的故事实战演习

5. 讲好一个生动的故事

用图文结合的形式

来描述一个完整任务

或是交互动作的可视化剧本

Storyboard设计工具4：故事版

1. 体验问题情景

2. 寻找解决方案

3. 发现新的问题

4. 多方沟通工具

5. 讲好一个生动的故事故事版有什么用？

角色 Human功能 Objects环境 Environment事件 Action

5. 讲好一个生动的故事故事版的四个要素？

用户 User场景 Scenario目标 Goal任务 Task

姓名 Gary Rebecca 李大忠 Ben

使用环境 办公室 住家工作室 书房 办公室性别 男 女 男 男年龄 32 23 17 42教育 研究生 大专 高中 大专工作职位 SOHO 平面设计师 高中生 主管硬件环境 扫描仪、无线鼠标、PC 扫描仪、鼠标、PC、e

CAMe CAM、MS鼠标 鼠标、PC

人格 细心工整 俐落、简洁、幽默 积极好奇 略保守专长 影像编辑 平面设计 玩计算机游戏 多媒体分析收入 50,000 45,000 5,000 70,000理由 编辑工具、影像修正因

非专业、Welcome 太贵手绘输入、影像修正初入门、不会买太贵的专业产品

多媒体、网页制作学生、不买昂贵的专业产品

手写输入、一般中文输入法不太会用

嗜好 球类运动 歌唱、 卡拉OK 登山旅游 看书

角色：目标用户、人物角色

Alice 在google做软件工程师

她喜欢音乐和电影

详细的角色定义 简略的角色定义

5. 讲好一个生动的故事故事版的四个要素？

功能：对于故事板来说，可以是确定的内容，也可以是不确定的功能

书签:

自动分类

分享

功能特色

5. 讲好一个生动的故事故事版的四个要素？

环境：环境的概念包括物理环境和社会环境具体到故事板中，环境的概念就成为了一种情景。情景包括时间、地点、周围的情况等一系列的内容。。

工作时间9:00-18:00

办公室、办公位

单一环境 多重环境

5. 讲好一个生动的故事故事版的四个要素？

事件：是具体的人和系统的交互行为，它将人、物和环境结合起来，构成了整个故事的内容。

5. 讲好一个生动的故事故事版的四个要素？

1. 角色的简单介绍2. 包括对问题的研究和自己的想法3. 15分钟后，showtime

Calendar故事版：把角色放在某个场景里，讲一个故事

5. 讲好一个生动的故事实战演习

shot1 shot2 shot3

shot6shot5shot4

故事版模板

目录1. 互相认识一下2. 手机产品交互设计3. 找到真正的目标用户4. 还原真实的使用场景5. 讲好一个生动的故事6. 用故事串起设计循环

6. 用故事串起设计循环

Persona Scenario StoryboardTask

analysisInteractive prototypes

prototypestesting

Re-storytelling

Sitepath diagramming

Product testing

1. 包含关键页面线框图2. 包含主要任务流程3. 25分钟后，showtime

Calendar交互流程：结合主要角色、主要场景、主要目标、主要任务，绘制交互流程线框图

6. 用故事串起设计循环实战演习

推荐几本书

移动设备交互设计 Mobiel Interaction Design

移动应用的设计与开发Mobile Design and Development Tapworthy App Savvy

就这些mux.baidu.com

@elya妞