这实际上取决于您的工作流程。请记住，如今许多网页设计师放弃使用任何图形软件并直接在浏览器中进行设计。这样，您就可以在浏览器中展示您的设计，它们最终会出现在那里。简洁明了。

如果您确实在工作流程的任何部分使用静态模型，您总是可以在浏览器中创建一个小的动态模型，以显示您正在计划的交互式部分。

我通常采取的选择是在我的网页设计中呈现交互式元素，而不是静态视觉设计。一旦就静态设计达成一致，我就开始编码并使用预览站点来展示设计的交互部分。通过客户的输入，该预览站点迅速发展为实际产品。

您的问题是为什么我建议在浏览器中编码（参考：设计网站的步骤是什么？）。在站点、应用程序或任何东西中显示交互性的最佳方式是使用它的媒介。我并不是说完全开发站点并交付它。我的意思是你可以在设计/开发过程中交付阶段：

• 纸质或 PDF 格式的简单（手绘）草图通常称为头脑风暴。一些严肃的公司和个人将有一个 4' x 8' 的干擦板，上面覆盖着关于如何显示应用程序的草图。

• 用于设备测试的网站的黑白编码模型，如果在投标中，则向客户提供演示。我通常使用培根 Ipsum（不喜欢培根参考“替代 Lorem Ipsum（虚拟文本）用于网站”）作为我的虚拟内容，如果需要图像，我将放置一个显示图像的模型图像。
• 如果设备测试完成，如果项目中特别要求，我将继续讨论交互和效果。
• 为站点添加颜色、渐变和深度。

我会建议在交互设计中不要犯你在许多“主题”中发现的错误，所有的东西都是动画的。对我来说，这变得俗气，并脱离了网站的意义和内容。我建议在需要突出或需要显示多个可交付内容的关键区域使用动画。

如果您对如何托管它感到好奇，我希望如果您正在做网页设计，您有自己的网站，我会做一个没有应用的子域。

如果您的演示文稿是印刷材料，我会亲自绘制线框或最终设计方案，并用评论和解释对其进行注释。我确实展示了所有可能的交互方式——例如。

• 例如，如果您在顶部导航栏中有下拉菜单或大型菜单，我会渲染一个文件，该文件具有导航栏和一个打开的菜单项。
• 如果有打开面板的场景，我只在必要时渲染所有步骤。
• 有时我会使用在线示例 URL 参考来注释我的设计/线框。
• 任何网页元素都以叶子的形式出现在用户面前，我将其呈现给我的设计。

但是，如果您的演示文稿是视觉演示文稿，我会使用动画、过渡、声音、视频等来做任何我喜欢的事情。使用其中一种演示软件来展示概念。这种方法是值得做的。当您以一种有吸引力的方式向客户展示所有可能的交互时，不要担心将您的设计副本放在他的手中 - 如果您知道我的意思；）

最近似乎有创建UI 交互动画 GIF的趋势（在 Dribbble 上快速搜索会发现更多）。我想其中很多都是使用 After Effects 组合在一起的。InVision 最近发布了一篇文章，概述了他们如何在内部进行此操作。

虽然我可以理解这些交付物的吸引力（它们很流行，它们看起来非常令人印象深刻，而且它们很容易携带），但它们在许多方面给我留下了固有的问题：

1. 他们从客户的角度设定了不准确的期望 - AE 让您添加各种视觉效果，这些视觉效果在翻译成 CSS 时可能实际上不可行
2. 它们没有响应 - 无论是在媒体查询意义上还是用户与它们没有交互的事实。客户实际上无法尝试悬停动作，他们只是被动地观察它们。
3. 它们需要更多的工作——在项目的某个阶段，这些动画和交互必须被翻译成 CSS。为什么要花大量时间在一种媒体中为这些元素制作动画，而您只是想把它们放在一边并在 CSS 中完成

我会推荐 - 并使用 - 两种不同的方法：

首先，使用纸质原型进行高级交互和内容关系。这让客户在项目的早期就形成了一个心理模型。我更喜欢纸质原型，而不是任何预先存在的原型框架或工具包（如 Bootstrap）。虽然这些应该是最小的，但我发现它们仍然有太多的视觉影响，并且可以分散客户的注意力，让他们认为这就是最终产品的实际外观。当您使用纸笔草图时，这种情况不太可能发生。

对于更详细的交互（听起来像您感兴趣的那样），我们使用样式图块，这是一个包含许多不同组件的简化单页。关于这些的伟大之处在于：

1. 客户端在浏览器中查看它们，因此可以测试交互，看看它是否响应
2. 然后在最终产品/网站中使用相同的 CSS
3. CSS 可以在整个构建过程中彻底记录，这可以用于开发样式指南。

它对我们很有效，我们能够快速迭代。当然，这取决于拥有一个相当强大的工作流程，我们已经花费了相当长的时间来开发它，但我们认为这是一项持续的投资，因为每个后续项目都会越来越快。