Storyboard故事板是交互设计常用的设计手法，但是很多同学在实际创作的过程中却对它一知半解。故事板起源于电影制作行业，在UX设计中，故事板可以帮助我们展示产品的使用情境，包括用户交互的流程，都可以借由这样连续的插画和分镜，把一个人和产品或服务之间的交互体验呈现出来。今天UXD就通过一篇文章，全面地向同学们介绍一下，什么是交互设计中故事板的正确打开方法。故事板的想法是在20世纪30年代早期由沃尔特·迪斯尼工作室提出的。迪斯尼动画师韦布·史密斯创造了在不同的纸上的场景，然后把它们钉在公告板上按顺序讲述故事的想法，从而创造了第一个故事板(克里斯托弗·芬奇，沃尔特·迪斯尼的艺术，艾布拉姆斯，1973)。第一个完整的故事板是1933年的迪斯尼短片《三只小猪》(沃尔特·迪斯尼的故事，亨利·霍尔特，1956)而创作的。这是电影故事板。像这样的电影故事板的目的是传达相机角度和场景的感觉。您会注意到单个镜头(面板)的尺寸对应于标准的电影屏幕尺寸。但是UX故事板却和电影故事板有很大的不同。交互设计的设计对象是用户的行为，UX故事板的目的即是考虑和传达一系列的状态与行为，而不是提供特定的视觉方向。UX故事板展示了某人如何与未来的产品或服务互动，重要的是所涉及的行为和情绪。显示的屏幕被绘制在纸上或使用其他专用软件，以说明用户体验的重要步骤。用户准确地理解软件与硬件将如何工作，比抽象描述好得多。认知心理学家杰罗姆·布鲁纳（ Jerome Bruner ）认为，当一个事实被包裹在一个故事中时，我们记住它的可能性要高22倍。为什么？因为故事令人难忘。故事帮助我们快速抓住一个想法的要点。它们引发我们的情感。通过图画与文字结合的方式，故事版的情节代入感强，是设计师以用户为中心进行设计的关键步骤之一，与此同时，观者在了解设计师的设计时，有很大的可能开始就被故事版的展示形式与内容吸引。故事版不仅可以叙事软硬件产品的使用流程，还可以添加一些趣味性与幽默感，是的广泛的传播与讨论变得可能。在阅读故事版时，观者的参与感更强，观者与设计作品的互动性更好。故事板三要素1.用户：在设计前期进行问卷调查、用户访谈和实地观察等用户研究过后，需要确立典型的用户画像。绘制同理心地图（empathy map）。在故事版的叙述过程中，需要将这个典型用户（persona）视觉化展示出来，并且把同理心地图中所看、所听、所想、所说、所做的一些重要内容以叙述性故事的形式展示出来。2.场景：在故事版中需要展示出故事发生前、发生时和发生后的场景3.情节：在UX故事版中，由于设计产品的出现，导致故事中的情节发生变化甚至反转。设计产品的出现也会对典型用户的情绪产生变化：在故事版的创作过程中，需要表现出典型用户在使用产品前后的情感变化，即表情变化。如何讲好故事？19世纪德国剧作家和小说家古斯塔夫·弗赖塔格（Gustav Freytag）画了一个简单的三角形来表示戏剧结构，并强调了他认为讲故事所必需的七个部分 : 阐述(exposition)、煽动事件(inciting action)、上升的动作(rising action)、高潮(climax)、下降的动作(falling action)、决议(resolution)和结尾(ending)。1.解说(exposition) : 讲故事的人设置场景和人物的背景。2.煽动事件( inciting action ) : 角色对已经发生的事情做出反应，并引发一连串的事件。3.行动起来( rising action ) : 故事开始了。通常会有复杂的情况，这意味着角色试图解决的问题会变得更加复杂。4.高潮( climax ) : 故事达到了主角和对手之间最大的紧张点(或者如果只有一个主要角色，那个角色的黑暗或光明似乎控制了局面)。5.下降动作( falling action ) : 故事转移到作为高潮的结果而发生的动作，这也可以包含一个逆转(当角色展示他们如何被高潮的事件所改变)。6.解决方案( resolution ) : 角色解决问题或冲突。7.结局( ending ) : 结局通常是快乐的如何为自己的设计创建故事板？ 第一步：从纯文本和箭头开始。最主要的是将故事分解成各个时刻(背景、触发因素、一个角色在这个过程中所做的决定，以及最终的好处或问题)。第二步：给你的故事增添情感。在每一步都添加表情符号，以帮助其他人了解角色头脑中的想法。记得举例说明一路上对成功/痛苦点的任何反应(角色期望发生什么，结果如何影响他/她？试着把每个情绪状态都画成一个简单的表达。第三步：将每个步骤翻译成故事板框架。强调每一刻，想想你的角色对此有何感受。在绘制的过程中，可以手动进行绘制，也可以使用专门的故事版软件，如storyboarder等。也可以使用photoshop手绘板或者ipad-procreate等设计工具进行绘制。第四步：在绘制手机界面的时候，绘制出主要的故事版中使用的功能即可。细节，如措辞，布局和风格应该在以后的过程中考虑。第五步：故事叙述者的评论—有时出现在框架顶部或底部以推进叙事；语言和思想活动泡泡—把它们放在任何评论下面，并考虑你的观众将如何阅读它们；人物与场景—展示足以表明对你的故事有意义的东西。上图故事内容：今年假期，小美打算去海滩度假。但是她不知道去哪里更好，不知道如何开始。她在脸书上问朋友，没有得到满意的回复。她在谷歌上搜索，发现信息太多不知从何开始。第二天，她在公司隔壁的旅游代理处咨询，却发现等了好久好久… 她很无奈的说：“我还是家里宅吧”第六步：设计清晰的结果。确保你的故事板让你的观众对故事的结局没有任何疑问:如果你在描述一个不利的情况——以问题的解决结束，如果你提出一个解决方案——以该解决方案对你的角色的好处结束。注意事项 1.让它不言自明。人们不应该需要现场解说来了解发生了什么。删掉任何不必要的多余部分。不管一个句子、图片或页面有多好，如果它不能增加整体信息的价值，你应该删除它。2.不显示用户界面细节。这个故事应该突出过程中的主要步骤。细节，如措辞，布局和风格应该在以后的过程中考虑。3.可读性强。你希望房间里的每个人都能够在会议环境中阅读你的漫画。带有大文本的横向布局有助于确保每个人都能欣赏你的作品。4.真实性。最重要的是让角色、他们的目标以及他们的经历尽可能清晰。如果你写的东西与你的产品没有共鸣，你的用户就能看出来。因此，在真实的环境中关注真实的人，你的观众会同情他们。5.你不需要擅长画画。好消息是，在你开始画场景故事板之前，你不需要擅长画画。尽管绘画经验有所帮助，但最重要的是尽可能清楚地描述人物、他们的目标以及他们的经历。你如何渲染这取决于你和你的技能和品味，但是在故事板的情况下，越少越好。6.故事板保真度。把你的故事板风格和技术想象成一个保真度谱上的点，或者抽象层次。斯科特·麦克劳（Scott McCloud）德解释说，漫画是一个相似/意义连续体，从完全真实的图像到标志性的图像，抽象程度越来越高。低保真度意味着示意性的方框、圆圈和简笔画，高保真度意味着摄影的真实性。▎优秀学生经验谈
|
