作为一名设计师，情绪板的运用想必你已轻车熟路了，然而情绪板其实还有个小姐妹不常被人们提及，她就是故事板。【情绪板】常用于品牌与形象设计领域，用来发掘用户对视觉体验的需求，而【故事板】则常用在用户研究和交互设计领域，通过还原用户使用场景来深度挖掘用户对产品整体体验的需求，是提升用户使用体验的有效研究方法。
很多希望从视觉设计师过渡到体验设计师的新手设计师，心里很清楚要关注和挖掘用户除视觉以外的其他体验，但是却不知如何下手。各种用户研究方法虽然好但是耗时耗力，和同事朋友分析讨论又各执己见难以服众，实在是“臣妾做不到”，这种时候也许故事板可以帮你走出这种尴尬窘境。
接下来我会从故事板的由来、作用、制作步骤以及常见问答几个方面进行介绍，相信看完之后你会有所收获。
一、故事板的由来
故事板，顾名思义就是一个讲故事的板子，看上去与我们常看的漫画非常相似，它长这个样子：
迪斯尼中的狮子王故事板
看到我拿迪士尼举例，你应该可以联想到一个东西，动画分镜脚本，对的，其实故事板的最初原型就是脱胎于动画行业以及影视制作行业的分镜头手稿，用来安排剧情中的重要镜头，展示镜头关系和故事脉络快速表达作者的创作理念。
迪士尼故事总监乔·兰弗特从蒂姆·伯顿的“圣诞节前的恶梦”中投射故事板。（通过Jim Hill Media，版权所有Disney Enterprises，Inc.保留所有权利）
所以，举一反三，当故事版被运用到产品设计中时，故事板就像是一个用户如何使用你的产品的电影脚本，表达的就是用户在使用产品时的关键环节，重要操作，以及操作流程，以便于我们可以用旁观者的视角审视这中间可以被挖掘和提升的地方。
二、故事板的作用
故事板在以下特定情况下非常有用：
01
帮助产品设计师思考
故事板可以帮助我们将角色，场景和情节串联起来，把抽象的体验过程具象成图文结合的形式，让所有的人都能够通过一个角色来观察场景，并看到发生的触发事件，使用的渠道，遵循的流程以及必须做出的决策，让产品设计师能够对用户体验进行更直观更深刻的挖掘和思考。
更重要的是，勾画出角色扮演的行为来测试我们的概念，让我们以很小的成本进行实验，允许流畅的基于团队的头脑风暴，揭示更多的想法，并审查它们的真实性。
图片来自于Ben Crothers
02
便于团队内部协同设计
如果只是一个人来做设计决策，而且想象力很好，那么故事板不是必须的，因为整个故事就在他的脑子里面；而如果是2个人或更多人参与探讨，这个时候每个人的想象力有差异，对角色的理解有不同，对产品的关注点也不一样，就需要故事板来把大家脑海里的东西进行整合了。这种“纸上谈兵”可以让团队成员的抽象思维表达具象化，细节明确化，有效提升团队合作效率。
03
易于对外讲解设计理念
阅读图片故事是人类从幼儿时期就掌握的本领，在整个年龄段里，人们对图片故事的理解程度也远远高于其他形式的故事。所以当你需要把你的产品设计概念向不了解产品的人讲述的时候，比如投资人、客户、用户等，故事板可以让你的概念更容易被接受。特别是面向理解与认知能力较弱的用户群体，如儿童、老年人等。
德国海森堡市政府设计了新的福利机制，通过故事板与市民进行访谈调研
三、故事板的制作步骤
当我们前面提到故事板像是一个分镜头脚本时，再看到狮子王栩栩如生的画面，你可能会担心：
我不会画画啊，是不是就做不了故事板了？
你大可放心，故事板真的可以很亲民，像这样：
Martin Scorsese电影'Goodfellas'的故事板框架
姜文《阳光灿烂的日子》的分镜头手稿
所以，你大可不必担心美观不美观的问题，故事板不是用来让人欣赏的，而是清楚明白地告诉别人你想讲的故事。
“设计师的主要技能不是PS或Sketch，而是建造和描述场景的能力。”
——Nick Babich 《交互设计中的故事板》
故事板具体怎么做呢？
01
确定三要素：角色、场景和情节
角色：
确定一个故事的主人公，主人公的形象最好是你之前就整理好的用户画像，必须是基于真实的用户建模而非臆想。他的行为、习惯、偏好、期望等因素都将决定着他们如何在使用产品时进行决策，因而人物的行为越是接近真实的用户画像，就越是能帮助你挖掘产品中的体验问题。
场景：
角色不能是孤立存在的，需要一个承载角色形象，侧面烘托人物性格的背景和环境，包括线上环境（网络、应用程序等）和线下环境（地点，周围的人物）。场景信息是故事板的背后承载信息，通常在故事板之前进行交代，而在故事板中则不需要详细描述。
情节：
确定故事的主线剧情，通常会包含起因，经过和结果，即用户目标、触发事件、行为流程、行为结果等。在故事板中的剧情描述要简单、清晰、易懂，并且要重点围绕角色和角色主要目标展开。跟主要目标无关的情节都是耍流氓。
在行为流程中，明显的起承转合能让一个故事生动有趣，你可以借鉴一些讲故事的套路，例如美国的超级英雄套路：主角是个普通人—大Boss发难要毁灭地球—主角被大Boss虐得体无完肤希望渺茫—忽然偶遇某些契机小宇宙爆发——打败大Boss维护世界和平
Freytag的金字塔（Freytag’s Pyramid）叙事结构
本·克罗斯特斯（Ben Crothers）在一个关于一个男人和他的电话的金字塔上写下了一个不起作用的快速故事。
02
绘制简单的情节
可以用纯文本和箭头开始梳理故事，抓取故事的关键连接点并予以重点呈现。
图片来自Ben Crothers
03
给情节添加情感
在每个步骤中添加表情符号，帮助别人了解角色情绪与思想的变化。记住要描述成功/疼痛点的反应（角色期待发生什么？结果如何影响他/她？）尝试在每个情感状态中绘制一个简单的表达。
图片来自Ben Crothers
04
基础线稿
将每个步骤转化成画面，在画面出体现出每一刻发生了什么，以及人物当下的想法
图片来自Ben Crothers
05
优化细节
添加：
添加一些可以增强故事板表现力和可读性的元素，例如人物的表情、屏幕上的GUI、建筑物的标志等。但是要确保这些元素是有的放矢，而不是为了添加而添加
删减：
删掉故事板中不必要的情节或元素，避免故事板因为元素太多而导致的画面凌乱、重点不明确，要确保故事板中的重要信息都在一个简单、完整、可理解的故事情节里。
06
测试与反馈
向一些对故事不熟悉的人询问反馈，根据反馈添加简短的文本解释，确保故事的每一个步骤对读者来说都是非常明确清晰的。
07
最后润色
润色是锦上添花的一步，可以让故事板的表现力更强。
四、关于故事板的一些QA
01
故事板和原型图有什么区别？
故事板：内容会包括线下场景和界面，关注的是线上线下任务的结合
线框图和原型：只聚焦在屏幕任务
02
手绘好麻烦，有没有简单的制作方法？
现在有很多制作故事板的软件，可以帮助你快速完成制作，具体可参考知乎回答：“有哪些好用的故事板（storyboard）app？” - 动画学术趴的回答 - 知乎
https://www.zhihu.com/question/43506177/answer/181307189
03
故事板只能是漫画的形式么？
不是的，故事板是一种思考方式，呈现的图文样式只是一种载体，只要能够清晰准确完整地讲述一个故事，都可以是故事板。例如这里就要有一种做成立体卡片样式的故事板
柏林服务体验营的参加者介绍他们的故事板
总结
故事板通过讲故事的形式把抽象的体验过程具象成图文结合的形式，可以真实有效地还原用户的使用场景、行为流程和操作体验，简单地说，就是把用户使用产品的画面像拍电影一样进行播放，设计师可以选择不同的视角对电影进行观察，例如作为作为第三方的观众旁观者清，或者带入场景中感受故事人物的真实感受，以此对用户体验进行更直观更深刻的挖掘和思考。
在团队协作中，故事板可以避免因为认知能力不同而导致的沟通分歧，提升团队协同设计的工作效率；
在对外阐述设计概念时，特别是对不熟悉产品的受众来说，图文结合的方式传递效率更高，便于理解和记忆。与其跟人撕得难舍难分，讲得口干舌燥，不如掏出一个故事板艳惊四座吧。
参考链接
标题：Storyboarding & UX 故事板与用户体验
作者：Ben Crothers
链接：http://johnnyholland.org/author/ben-crothers/
标题：用户体验设计中的故事板
作者：Nick Babich
链接：https://uxplanet.org/storyboarding-in-ux-design-b9d2e18e5fab
标题：有哪些好用的故事板（storyboard）app？
作者：动画学术趴
链接：https://www.zhihu.com/question/43506177
标题：场景：创建故事板的新方法和工具
作者：Karen Detken
链接：https://experience.sap.com/skillup/scenes-new-method-tool-create-storyboards/
标题：Storyboarding in UX and tips and Hacks
作者：muditha batagoda
链接：https://uxplanet.org/storyboarding-in-ux-and-trips-and-hacks-e6eb7a9f052a
标题：交互设计中怎么画故事板
作者：康石石
链接：https://www.zhihu.com/question/265343421/answer/293043725
标题：可视化场景描述：故事板
作者：Acetx
链接：https://www.jianshu.com/p/ed42bd2282c7
标题：PM必看：用户场景神器——故事板
作者：易卿
链接：http://www.woshipm.com/discuss/98166.html
• end •
点击阅读原文进入新官网看免费视频、咨询、交流！
我不是机器人，也可以和我聊天或者在文章下方留言，我会很认真看的。
也可以添加我的微信：13031047472
回复【素材】，获取超500G设计素材。
回复【网站】，获取各类素材图片网站。
回复【AE1】，获取课堂案例AE动效PSD源文件。
回复【小黄人】，获取AI矢量小黄人插画源文件。
回复【软件】，获取Adobe各类软件下载及破解。
回复【ios11】，获取价值几百美元iOS11 Kits
热门文章：
