一个产品设计师必须会讲的故事——用户体验设计中的故事板

作为一名设计师,情绪板的运用想必你已轻车熟路了,然而情绪板其实还有个小姐妹不常被人们提及,她就是故事板。【情绪板】常用于品牌与形象设计领域,用来发掘用户对视觉体验的需求,而【故事板】则常用在用户研究和交互设计领域,通过还原用户使用场景来深度挖掘用户对产品整体体验的需求,是提升用户使用体验的有效研究方法。很多希望从视觉设计师过渡到体验设计师的新手设计师,心里很清楚要关注和挖掘用户除视觉以外的其他体验,但是却不知如何下手。各种用户研究方法虽...

一个产品设计师必须会讲的故事——用户体验设计中的故事板

作为一名设计师,情绪板的运用想必你已轻车熟路了,然而情绪板其实还有个小姐妹不常被人们提及,她就是故事板。【情绪板】常用于品牌与形象设计领域,用来发掘用户对视觉体验的需求,而【故事板】则常用在用户研究和交互设计领域,通过还原用户使用场景来深度挖掘用户对产品整体体验的需求,是提升用户使用体验的有效研究方法。


很多希望从视觉设计师过渡到体验设计师的新手设计师,心里很清楚要关注和挖掘用户除视觉以外的其他体验,但是却不知如何下手。各种用户研究方法虽然好但是耗时耗力,和同事朋友分析讨论又各执己见难以服众,实在是“臣妾做不到”,这种时候也许故事板可以帮你走出这种尴尬窘境。


接下来我会从故事板的由来、作用、制作步骤以及常见问答几个方面进行介绍,相信看完之后你会有所收获。



一、故事板的由来

故事板,顾名思义就是一个讲故事的板子,看上去与我们常看的漫画非常相似,它长这个样子:

一个产品设计师必须会讲的故事——用户体验设计中的故事板

迪斯尼中的狮子王故事板

看到我拿迪士尼举例,你应该可以联想到一个东西,动画分镜脚本,对的,其实故事板的最初原型就是脱胎于动画行业以及影视制作行业的分镜头手稿,用来安排剧情中的重要镜头,展示镜头关系和故事脉络快速表达作者的创作理念。

一个产品设计师必须会讲的故事——用户体验设计中的故事板

迪士尼故事总监乔·兰弗特从蒂姆·伯顿的“圣诞节前的恶梦”中投射故事板。(通过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

一个产品设计师必须会讲的故事——用户体验设计中的故事板

热门文章:

排版干货!版面中的跳跃率

【教程】快速实现2.5D等距插画风

什么样的标题设计才最有点击欲

周末看点儿好的【第三十三期】

你想成为年薪30w的设计师吗?

一个产品设计师必须会讲的故事——用户体验设计中的故事板

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/37036/

(0)
交互精选交互精选
上一篇 2018-05-07
下一篇 2018-05-08

相关推荐

  • 线框仔,你知道交互设计在未来会多火?

    对你而言,它可能还是未知数。这是康石石撰写本文的首要初衷,我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计师是给APP动效的3.交互设计师都月薪上万,且薪资上涨空间高,酬劳丰厚。其它就不清楚了。。。以下康石石引用《女神进化论》创始人--寺主人在知乎关于交互设计师目前生存现状的一段描述,供大家了解行业目前基本情况:月薪<10k俗称“线框仔”,出没于小...

    2018-04-17
  • UED内功心法口诀篇

    本文约5000字,阅读需15分钟本篇思想可能给你带来的价值何为UED?在产品定义阶段,它是一种关乎如何解决问题的思维模式,在产品迭代期,它又是一种关乎如何思辨方案真实体验水平的科学验证。更具体一点,到底是什么样的思维模式和科学验证,近一年的时间我们通过大量案例逐渐将其解构出来,并将导图成“UED内功心法”,期望能够帮助交互设计师在具体实操过程中有的放矢,更有针对性地发挥设计的价值。心法口诀第一式:目标用户锁定招式1:找出契合业务的目标族...

    2018-02-02
  • 交互设计 ▏如何在作品集中展现自己的设计风格和思考过程?

    交互设计是对于用户产品使用行为的优化设计。它关注的是“用户场景”和“用户心理”,设计的对象是“用户行为”,达成的目标是“能用、易用、想用”。作品集其实是一个人设计风格和思考过程的折射,一个好的交互设计作品集需要在作品中展示你解决了什么问题,如何解决的,以及最终成果。今天小编给大家带来了一位学姐的交互设计研究生作品集,希望可以给大家带来一些启发啦!!!学姐的作品集中一共有3个项目,分别是项目1:Wish项目2:RT: BAGS项目3:FI...

    2018-04-22
  • 百度UED:运营设计那些事儿

    数十万互联网从业者的共同关注!作者:百度搜索用户体验中心 授权早读课发表,转载请注明出处。在现如今的社会中,每天都在进行着一场场没有硝烟的商战。运营设计则是至关重要的一部分。那么怎么才能做出一个好的运营设计或者一个相对比较成功的运营设计呢?我们要知道设计的目的。设计的目的是什么?设计核心在于能够让用户在有限的时间内Get最有价值的信息,找到所得,从而实现转化。知道设计的目的了,在项目中自然形成了一些思路流程。1、需求分析需求分析分为:产...

    2018-01-31
  • 2018年交互设计和用户体验设计趋势合集

    来源:沪江用户体验中心&Nick Babich,翻译丨优设陈子木设计和体验从未像现在这么重要。在过去的10年当中,设计不断适应着用户的新需求,发生了翻天覆地的变化。虽然我们不大可能预测太远的未来,但是我们仍然可以对明年的设计趋势有一个基本的猜测。今天的文章,我们将会探讨2018年影响用户体验设计领域走向的10个关键性的设计趋势,这些趋势甚至可能会持续几年。1、专注内容的体验设计近年来,设计师越来越倾向于采用极简和扁平化的设计,这种设计策...

    2018-02-06
  • Axure实践第二讲

    Axure实践第二讲---如何有效的在工作中引入原型·页面枝干·添枝加叶·画龙点睛在近期的产品需求开发过程中,我们产品小组正式且大量的将原型开发工作投入常规的需求分析工作中,原型的开发对于我们在产品初期的调研、构建都提供了很好的指导。接下来就让本文带你领略:产品与原型的一节课。一、功能结构图(页面枝干)1.切入点是功能结构图(自顶向下)从大的方向上去划分几个大的模块类型,适用于业务功能较为单一且业务逻辑处理流程较为简单,如在做市商系统构...

    2018-03-16
  • 输出专业交互设计文档清单

    原文转自:http://www.uisdc.com/export-professional-interactive-documents在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工作沟通, 还是方案评审的设计讲解,专业的交互设计师应该具备优秀的表达能力,不仅是语言方面的表达,交互文档的表达也尤其重要。交互文档是对接上下游岗位,利于协同团队工作的重要输出件。(本文会以 ...

    2018-03-25
  • Axure 原型 | 用Axure画流程图

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放吻得太逼真张敬轩 - Urban Emotions作者:陈张良来源:简书用Axure绘制流程图好处是可以随时预览,比较灵活。不过就是没有Visio那么多模板和强大的功能。Axure默认的流程图控件:其实我们最常用的是:矩形、菱形、箭头。因为这些基本图形其实并没有形象的表明它们是什么,更多的还是需要使用者根据自身的流程实际情况多加注释,所以大部分流程图只需使用这两个控件即可。Axu...

    2018-03-04
  • Sketch导入图片丢色、变白解决方案

    周五晚上回家作图遇到点状况,折腾了半天才好。整理一下发出来,估计有人用得上。以下内容为磨磨叽叽的瞎逼逼顺序,着急解决问题的同志可以快速下滑,会有提示周五到家日常打开电脑作图,做的做的发现不对劲,之前导入进来的图片好像不正常了。如下图一开始还以为是不小心降低了透明度,cmd+左键,发现没降。再想可能是加了纯色,看了一眼属性,也没有叠加颜色。醉了,这什么鬼。我一看既然不成那就算了。重新再导入一张图片,这张后入的是好的。没当回事,接着做图。过...

    2018-04-25
  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28