基于场景的设计
一、小课堂目标
[if !supportLists]1. [endif]了解什么是基于场景的设计方法
[if !supportLists]2. [endif]学会如何基于场景去做产品设计
二、什么是基于场景的设计？
1.定义：基于用户达到某个目标的一系列场景的判断与分析，理解用户每一场景的痛点及需求，结合上文场景，预期用户下一步的目标及意图，通过设计来帮助用户提高或让用户引起情感上的感动/共鸣等目标。
2.要点：基于场景，理解需求，预期意图，进行设计。
3.案例：以看电影为例，在整个看电影的过程中，涉及到的主要场景有以下六个：线上买票－去电影院－线下取票－检票入座－观影－评论吐槽。
格瓦拉app设计了一个基于场景的功能：当用户在格瓦拉购票成功后，首页会出现一个人偶小浮标，在不同场景下点击该浮标，会出现不同的内容，例如在去电影院的场景下显示影院地理位置以及滴滴打车入口；线下取票场景显示取票二维码可以快捷取票；线下取票后再点击小浮标显示电影开始时间以及座位号；观影后显示别人的评论以及吐槽入口引导用户去评论。
[if !supportLists]三、 [endif]为什么要基于场景做设计
1.移动端的崛起使得用户的场景千变万化，通过分析用户在不同使用场景中产品的使用情况，能够更好的了解用户的需求和痛点，给出更好的设计方案。
2.中小型互联网公司根本没有那么多时间和金钱去进行大规模的用户调研，且只关注几种典型用户会限制产品的发展。
[if !supportLists]四、 [endif]怎样基于场景做设计？
[if !vml]
[endif]
场景设计四步曲：场景列举、机会点挖、设计策略、衡量标准
[if !supportLists]1. [endif]列举场景
a.定义：谁（who），在什么时候(when)，在什么地方(where)，做了什么事情(do)，周围环境怎么样(how)。
例子：用户(who)夜间(when)在陌生的路上(where)开车(do)对路线不熟悉且路况不好(how)
b.线上场景和线下场景：“where”不同
线下场景的“where”：现实中的位置，可通过GPS，蓝牙，Wi-Fi钥匙等来检测；
线上场景的“where”：app中的某个页面，例如首页，支付页面，商品详情页等。
c.关键场景获取：通过操作流程图来依次提取其中的关键场景
案例：看电影的流程为：买电影票－去电影院－取票－检票找座位－观影－出影院－评论吐槽
[if !vml]
[endif]
根据流程可以抽取列举出看电影涉及到的关键场景为：
[if !supportLists]1. [endif]美团电影页面(where)购票(do)；
[if !supportLists]2. [endif] 电影开始前(when)乘车(do)前往电影院的路上(where)；
[if !supportLists]3. [endif] 观影前(when)在电影院(where)通过自助取票机取票（do）；
[if !supportLists]4. [endif]观众(who)拿着爆米花可乐等零食手忙脚乱(how)地掏出电影票(do)在入口(where)排队检票(do)；检票工作人员(who)在入口处(where)等到放映前5分钟(when)开始检查每位观众的电影票(do)并撕掉联(do)；
[if !supportLists]5. [endif]观众(who)拿着爆米花可乐3D眼镜等手忙脚乱地(how)查看电影票上的座位号(do)并在昏暗的灯光下越过同排其他顾客(how)找到自己的座位(do)；
[if !supportLists]6. [endif] 坐在座位上(where)将手中的爆米花，可乐，背包等放置好(how)，戴上眼镜开始观影(do)
[if !supportLists]7. [endif]观影结束后(where)拿好自己的东西走出影厅(where)将眼镜还给工作人员(do)，扔掉手里的垃圾(do)，排队上厕所(do)；
[if !supportLists]8. [endif] 回家的路上(where)和朋友吐槽剧透(do)；在朋友圈(where)晒观影照片(do)；在购票app上(where)评价吐槽(do)。
2.机会点挖掘
[if !vml]
[endif]
方法：
a. 通过分析当前场景用户需求挖掘机会点；
案例：举一个微信语音聊天的例子，当手机处于音量静音的状态(how)在聊天页面(where)点击语音信息(do)，用户的需求是清晰听到对方发送的语音信息，但由于手机处于音量静音状态听不到语音且用户无法快速判断为什么没有声音，微信基于该场景的痛点及需求设计了这样的方案：当用户处于该场景下，会有弹框提示用户调高音量后播放
[if !vml]
[endif]
b.通过对用户下一步目标的预期来寻找机会点。
首先需要对上文场景进行判断，结合对当前场景的描述与分析，预期用户接下来的行为，从而寻求当前场景的设计机会点。
如何对下一步进行预期：
一、通过成组的动作进行预期，例如，复制－粘贴、吃饭→付款；
二、通过用户的认知流程进行预期，例如，拍照时摆好姿势不动→准备完毕可以拍照；
三、通过产品的使用流程进行预期，例如截图→分享、买票→取票。
案例：谷歌的hangouts
[if !vml]
[endif]
场景描述：用户在聊天页面(where)聊天的时候(do)收到对方发送的信息“where are you”(how)，根据对当前场景的判断，预期到用户下一步的行为是回复对方自己所在的位置。
“怎样帮助用户在接下来更加方便快捷地回复所处位置”，是当前场景的设计机会点，hangouts将该机会点转化为如下设计点：当检测到对方发送的文字中包含“where
are you”的时候就会在原有页面中插入定位按钮，点击定位按钮后发送自己的位置给对方
3. 设计策略
以贴心为目标的设计策略，以高效为目标的设计策略，以情感化为目标的设计策略
[if !vml]
[endif]
1.高效。
以高效为目标的设计策略共有五点，根据行动点明确程度依次为：行动点前置插入，行动点替换，行动相关推送，突出行动点，自动执行。这五个设计策略都能够不同程度地提高用户操作效率，接下来通过案例依次介绍一下每个设计策略。
行动点前置插入
指将预期到的用户下一步的行为点前置到当前场景，使得用户在需要的时候就能直接操作，达到缩短关键流程，提高操作效率的作用。形式多数为直接插入。
上面提到的谷歌hangouts就属于行动点前置插入的典型案例
行动点替换
一般是指当前场景下某个行动点的功能不再适合当前场景，因而将其替换为另外的需求较强的行动点，位置不发生变化，而功能变化，为用户提供当前场景需要的或与下一步意图相关的行动点能够帮助用户提高操作效率。以Mono首页为例，当用户在首页上滑向下浏览时，导航栏的“推荐”按钮替换为“返回顶部”，在不改变布局的情况下实现了高效操作的目的
[if !vml]
[endif]
行动点相关推送提示
指根据用户当前或下一步的行为提供相关推送或提示，以辅助用户进行决策行动，提高用户操作效率。
上面提到的微信聊天页面音量静音状态下听取语音消息的案例，就是通过预测用户下一步的行为，而提供了相关的提示，以使用户减少思考成本，快速达到下一步目标
突出行动点，
预期到用户下一步的行为后通过颜色或提示等方式对行动点进行突出，吸引并提醒用户点击，减少思考成本，提高操作效率。
[if !vml]
[endif]
直接执行，
适用于一些需求较为明确的行动点，做用户之所想，提高操作流畅性及效率。
[if !vml]
[endif] [if !vml]
[endif]
表情包编辑
贴心：
通过机会点挖掘阶段对用户当前场景需求分析以及对下一步目标的预期，设计阶段需要通过在细节上的设计一定程度上满足用户当前场景下的情感需求，或辅助用户达到下一步的目标，让用户感到贴心与感动。
案例：导航app的HUD模式
[if !vml]
[endif]
用户在行车过程中需要集中精力注视前方，尤其是夜间行车的时候更需要集中注意力，而现有手机导航需要不时低头查看且显示屏幕小，导航app的HUD模式能够很好地满足该场景下的痛点与需求，可以在夜间将导航信息投影在前车窗上，使用户无需低头就可以查看
情感化：
与上文以贴心为目标的设计策略类似，以情感化为目标的设计策略同样需要具体场景具体分析，主要从细节出发满足用户在当前场景下的情感需求，让用户感动，给用户惊喜。
案例：豆瓣的上午好／下午好／晚上好”
豆瓣首页轮播图下面会根据时间显示“上午好／下午好／晚上好”的情感化打招呼内容，并且当用户向下浏览内容时，认为用户当前场景下不再需要搜索而是依次浏览内容，因此情感化的打招呼内容吸顶替换搜索框。通过对当前场景需求的判断，采用情感化细节带给用户感动与惊喜。
[if !vml]
[endif]
4. 衡量标准
[if !vml]
[endif]
效率：该方案是否能够缩短关键流畅，减少思考成本，从而实现提高操作效率的目的？
惊喜、感动：方案能否想用户之所想，通过情感化及贴心的细节给用户惊喜，让用户感动？
期待：当用户下次再处于该场景中，是否会对你的方案产生期待？
总结：
1.基于场景的设计是指基于对当前场景的判断与分析，理解用户痛点与需求，结合前后文预期用户的目标及意图，通过设计提高操作效率，给用户惊喜与感动，使用户期待。 2.怎样基于场景做设计呢，第一步通过流程图列举场景，第二步通过分析当前场景需求或结上下文预期用户下一步行为来挖掘机会点，第三步将机会点通过设计策略转化为设计点，第四步通过衡量标准对设计点进行衡量判断以及优化。 3.场景挖掘工具可通过线下打印作为脑暴机会点的工具，填写完中间对场景描述部分后，通过竖向分析当前场景需求，通过横向结合上文场景预期下一步行为。
五、参考文献
如何基于场景设计产品 http://blog.csdn.net/zoeyyeoz/article/details/51182501
以场景为中心的产品设计方法
http://www.woshipm.com/pd/103420.html
基于场景的设计方法
http://www.sj33.cn/digital/ued/201608/46100.html
六、更多讨论
