如何创建故事板

大多数人通常将故事板与动画或视频制作联系起来。它是一个粗略的草图或漫画，详细说明了关键场景并绘制了镜头序列、场景之间的摄像机移动以及视频创建之前的整体流程。

然而，用户体验设计艺术家可以从故事板中受益匪浅。但什么是网页设计中的故事板，以及如何改进它呢？

花 20-40 分钟写下或勾勒出客户在使用您的产品时将采取或经历的步骤。

例如，我可能希望我的网站访问者首先看到我的公司徽标，以开始了解我的品牌。在书籍写作中，这可能是阐述：介绍背景和人物，但这在设计学科中通常被称为产品的“流程”或客户旅程。

考虑您的客户看到什么以及订购什么。

使用这个免费的故事板模板开始

获取此模板

如果您要按顺序完成这些设计练习，请使用上一部分中的设计概要，并将您的想法和信息组织到您希望客户体验的故事中。

使用文本、形状、简笔画、箭头和图像，使用此文件中的框架创建一个故事。将此视为设计用户体验设计的草图阶段。

您关注的是客户如何与您的产品互动，而不是视觉效果。不要专注于颜色和字体的选择或设计元素的布局。相反，尝试仅使用基本的形状和文本。

如果您正在设计手机应用程序，您的第一个故事板框架可能是应用程序的主屏幕，第二个故事板框架是您希望他们接下来采取的所需操作。考虑您希望客户首先看到的内容，然后使用形状和文本框在此处创建它。

如果您打算为手机进行设计，您可能需要更改这些框架的尺寸以匹配。选择框架时，右上角会出现一个框架下拉菜单。您可以使用它来更改这些框架的形状。

完成后，按右上角的“演示”按钮即可按顺序查看故事板的每个框架。

figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">有关故事板的更多信息

故事板是对所提议体验的想法和结构的视觉组织，以插图、图像或屏幕的形式按顺序呈现，以进行预可视化和排序。

它们是解释客户将如何在他们的产品旅程中取得进展的绝佳工具，而且对于与您的团队或客户分享您的愿景也非常有用。

故事板也常用于电视、电影、动画和视频创作行业。皮克斯的动画师创建了一门关于构建用于讲故事的传统故事板的课程，可在可汗学院上获取。

figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">网页和应用程序设计中的故事板

网站和应用程序也通常是用故事板和线框图来设计或规划的。差异很微妙，但通常故事板可以更好地捕捉客户的体验——体验的总结。线框图展示了更实际的故事或交互和用户流程，主要显示信息的结构。