Fireworks创建网站设计的原型。

申请免费试用、咨询电话：400-8352-114

虽然屏幕上，包括网络的设计，移动和丰富的互动应用程序（RIA）的，你经常需要创建一个原型应用程序是否正常工作，在发展阶段上的移动。

在Web项目中的原型也是必不可少的。例如，当你打算网上订购过程，你必须要确保每一步都是正确的，没有关键要素缺少。通常情况下，您将创建一个网站的所有网页不同的屏幕，订货过程或应用程序的工作流程，并描述它们之间的连接。这样你就可以看到互动的工作是否如预期，您可以测试不同用户的产品，和你的客户可以检讨。

然而，一个静态的原型是更难审查和测试，通常它只是一堆的图像（在这里和那里的一些解释性说明），并掌握它们之间的连接可能很难。为什么不使事情变得更加动态，为客户更容易，帮助Adobe烟花？

原型是什么，我为什么要使用一个？

“原型是一个早期的样品或者模型的建立测试概念或过程，或作为一个要复制或学到的东西。” - 维基百科

使用交互原型，带来了许多好处。主要的好处是，你能够很容易地找到错误在交互流或用户界面（UI），在一个非常早期的阶段，甚至已经开始开发前。你的客户也可以提供详细的反馈，在设计过程的早期。客户端将得到一个正常运作的演示，与许多交互显示在屏幕上的权利，而不是一个图像采集，没有互动。

要了解更多有关原型的优势，在“外观与快速原型设计更好的更快 “碎杂志。几个有趣的文章也已出版的方框和箭头：“ 融入您的设计过程原型 “和” 通过原型定义的功能集。“

什么是点击通过原型吗？

通过点击原型是一个网站或应用程序，允许你通过点击不同的页面和状态，并与关键作用包装的交互原型。

HTML原型

建立这样一个在Adobe烟花原型是很容易的。所有您需要做的是准备出口作为一个互动的原型设计：创建片，屏幕上的所有互动区域，并为所有应用程序的不同状态页。片也可以悬停状态，并链接到各个页面。在年底，你将创建一个点击选择在Fireworks中的“导出为HTML和图像”（也称为点击通过一个互动的原型或虚拟）通过原型。导出的HTML文件可以在浏览器中查看本地或上传到Web服务器的审查和测试。

网页原型从Adobe烟花出口。

（互动）PDF文件

另一种选择是“的Adobe PDF导出为。”交互式PDF有所减少的功能集，这里的区别是：翻车是行不通的，只有矩形热点将与他们的联系出口。它的优点是可以通过电子邮件发送到客户端，可以轻松地给予反馈，使用注释工具在Acrobat或Adobe Reader的PDF。请记住，虽然，该烟花不生成注释功能的PDF文件，你必须在Acrobat Pro中打开PDF文件，使评论，然后保存，然后把它发送到客户端的PDF格式。（启用在Acrobat Pro的评论，使任何人都可以免费的Acrobat Reader添加评论，它可能），当然，如果Acrobat Pro是不是一种选择，然后反馈可以提供通常的方式，如电子邮件，任何。

在我看来，HTML原型是一个更好的选择。在这篇文章中，我们将展示如何有效的这种工作流是在Fireworks。但在潜水之前，让我们快速回顾“活”的原型阶段，一个项目带来的主要好处。

原型的优点

• 在一个非常早期的阶段，得到反馈。
• 提高你的沟通的有效性。获得更详细的客户反馈。
• 原型可以用于可用性和A / B测试。
• 早期发现错误。后来在发展过程中少犯错误。
• 寻找错误的交互流程或UI开发前已经开始。
• 从原型中导出的图形，可用于发展。
• 开发人员或团队会明白什么需要做，而无需详细解释。
• 整体开发时间将减少。
• 最小化的发展变化的需要
• 您的客户将留下深刻的印象。

如何打动你的客户

如果客户端与Web设计师或团队首次合作，他可能不会如此深刻的印象，访问点击通过原型早在设计过程中，因为他不知道有什么不同。但如果他们通过了在过去的过程，那么他们将可能是网站实时预览在屏幕上看到了非常深刻的印象，用了很多的互动，而不是一个简单的静态预览或图像文件的集合，。

就我个人而言，我已经使用，通过点击从Adobe烟花原型为10年以上，具有很大的成功，从我的客户的积极性。

有网页设计经验，每一个客户留下了深刻的印象，看到的网站在浏览器中的工作原型。我的客户始终明白这一点，一旦你的客户使用，他们会更喜欢的工作方式，太。

一个字的警告，但。很清楚，这只是一个原型，它尚未被开发成一个真正的应用程序，这将发生一次的原型被批准。否则，客户可能期望一个正常运作的网站，只是你的原型复制到其域的根文件夹出现。

如何创建点击通过在Fireworks中的原型

Fireworks中创建的原型，通过点击由简单的HTML文件（即HTML表和图像）。但是，这并不重要，因为在设计过程的早期阶段，只使用原型。一旦已批准的原型和测试客户端，你可以继续到该网站的发展阶段，具有语义的HTML和CSS。烟花是有用的设计转移到发展阶段。

交互式原型的关键要素是什么？基本上，一个原型由页（可选母版页），州，切片和热点。让我们回顾一下更详细的每个。

页和母版页

要创建一个点击，通过原型，你首先需要建立多个页面，在您的文档。每一个应用程序或网站的每一页的状态将需要一个单独的页面在Fireworks。要创建一个单独的页面，你可以使用“页面”面板。当所有的网页，在设计份额常见的元素，如头，标识和主要的导航，你可以使用母版页。

在我们的例子网站，我们将需要六页（家，产品，店铺，店铺的细节，支持和联系方式）。他们都将有相同的标题区，一个标志，图像和导航，所以创建一个母版页是有道理的。这样做，只有那些元素上创建一个页面，然后（就像在InDesign），右键点击页面上的“页面”面板中，选择“设置为母版页”，或者，你可以使用的选项菜单上的“页面”面板的右侧。现在，放在母版页上的每一个元素会自动出现在所有网页上，这将节省大量的开发时间。

在Fireworks中设置母版页。

基于母版页上，我们现在可以构建所有的页面。转到“页面”面板，并点击新页面图标几次，直到你有六页（加上母版页）。然后给每一个有意义的名字。主页被命名为“页面”面板指数，和“店详细信息”可以shop_detail。

在Fireworks中的“页面”面板。

当谈到出口，烟花将自动命名这两个页的index.html和shop_detail.html。现在，我们可以填写各以其独特的设计元素（即不常见的元素，这将在母版页）六页。

以后可以在“页面”面板中创建的所有网页彼此相连，通过热点和切片（稍后）。

请注意：母版页上的所有元素将出现在同一地点所有个人网页，不能上页逐页的基础上移动。所以，如果一个页面需要不同的母版页，你将有覆盖母版页的元素的新元素，或使用其他Fireworks文件。

美国

给客户提供更多的互动反馈，您可能还需要创建悬停状态的导航元素。这样做，打开“状态”面板，添加一个新的状态，通过点击“新/重复的国家。”如果你正在使用母版页，你可以创建母版页上的第二个国家的权利（从而节省点几下） ，然后它将被用来对个别网页。现在，在新的状态，你只需要放置应该改变悬停的元素，如导航，链接，下拉菜单，提示等。

国家在Fireworks面板

导航元素，以显示一个悬停效果，您只需将悬停效果，在这第二个状态的图形。您可以更改导航背景的颜色或一个下拉阴影应用于文本对象。所有这些都将改变悬停在第二个国家在美国的面板（悬停状态）。

请注意：烟花不使用CSS ：悬停伪类。相反，它使用JavaScript来交换在原型的图像（一个传统的基于JavaScript的翻转或mouseover）。这个JavaScript的行为是相当老，只应使用在快速原型阶段。在开发阶段，它应该做的与CSS伪类。

“添加”选项在美国“面板

悬停状态后，所有已创建的，可以重复使用的所有网页。如果你有一个母版页，你只需要创建的所有网页上的国家“面板中右键单击第二个状态，或通过点击”添加“选项”菜单中的面板的右侧。

新的状态会自动从母版页的第二个国家，包括所有悬停元素。如果你没有一个母版页，你必须复制和粘贴所有悬停元素的所有个人页面上的第二个国家。

与片，你是能够确定的地区，应改变悬停。

请注意：当多个国家翻转和图像互换使用母版页上，您需要手动添加更多的国家，所有其他网页。

切片和热点

切片中的Adobe烟花

片可以用来定义地区，是互动的，将被链接到同一网站或外部URL，即使点上的不同页面。热点只能用于生成超链接（内部或外部）的领域。

创建切片在Fireworks

做一个悬停状态，选择“切片”工具（在上图中的第1步），然后勾勒出整个地区悬停元素（步骤2）。

你还可以通过切片，在画布上选择一个对象，右击并选择“插入矩形切片。”这是往往更容易，更快，更比使用切片工具的准确。如果选择多个对象，单击右键，然后插入一个分片，烟花将显示一个对话框，选择插入多片（一）每个对象或一大截，涵盖所有选定的对象。

你已经定义了所有的领域后，可以使用在每个片的中间目标，以创建悬停效果（步骤3）。这样做，单击并拖动在同片成片背面的中间目标。在大多数情况下，这将是相同的位置，所以它必须指出，同片（步骤4）。如果你想显示另一幅图像上悬停，则目标必须指向切片图像，但在大多数情况下，它本身将指出。然后烟花会问你选择哪个国家的图像交换（步骤5）。在这里你会选择与悬停图像（例如，“状态2”）的状态。

预览在Adobe烟花的设计

重复这一步的所有悬停地区后，你可以看一下结果，点击“预览”按钮，在左上角的Fireworks PNG文件。

悬停元素，每一个页面上出现的，如主导航，你可以节省时间创建母版页片。

为了帮助你，烟花提供一些视觉协会片（绿色）和热点（蓝色）;和“属性”检查器“面板（或属性面板）也将显示切片或热点类型。标准的切片和热点是半透明的，但HTML切片是不透明的。您也可以指定自定义颜色片热点有用的，如果你要区分代码已被放置在他们（的HTML，JavaScript，嵌入式Flash对象等）的类型。

请注意：当使用的翻转状态，复制或分享其他国家的背景元素有时是必要的，否则空白区域可能会出现翻转。例如，如果一个切片大于对象，将改变过渡，然后在对象后面的背景也将出现在翻转状态（状态2）。我建议使用“，以国家”的元素，这将是在所有国家一样，在翻车保持一致的外观（或悬停）。“购国”是在“图层”面板（右键单击需要共享MouseOver状态上一层）进行访问。

链接页

现在，所有的互动元素片，页面可以链接到对方。要生成超链接，你通常会点击切片（或热点，如果没有需要悬停效果），在属性面板中的“链接”字段输入一个网址。对于外部URL，你会进入，例如，http://www.google.com ;内部链接，您必须输入从“页面”面板中的页面的名称。从“页面”面板中的所有页面名称也可在下拉菜单中，从而防止错别字。

在Fireworks中的链接页面

在“页面”面板中的页面的名称应该是Web友好的（即没有空格或特殊字符）。您可以检查出你刚才创建的演示样机，所有的超链接和互动区域，通过点击文件→在浏览器中预览“→”预览所有页面。

加入实时交互原型。

很多的焰火用户不知道的HTML切片。对于每一个切片，在属性面板（前景图像，背景图像和HTML）有三种不同的选择。前景和背景图片，你可以指定图像的出口模式，如果出口烟花爆竹的HTML和CSS。

在Fireworks中的片类型

对于“通过原型，这是基于HTML和图像，默认的”前景图像“选项效果最好。如果你想放置不同类型原型的互动，HTML切片是一个不错的选择。你可以放置在任何HTML代码的HTML切片，这是非常有效的，如果某些元素已经存在，如互动。HTML切片，你可以很容易地插入在原型谷歌地图，视频，动画等，以显示客户端的元素将如何运作右。

嵌入谷歌地图

如果我们想有一个嵌入的Google地图“联系”页面？您不需要采取截图的地图区域，表明谷歌地图的存在。在Fireworks中，您可以放置在原型的实际地图本身。

在Fireworks中使用HTML切片

这样做，选择切片工具（上面的步骤1），并绘制过的地方，你要显示的地图（步骤2）切片。下一步，更改类型的“HTML”，在属性面板中（步骤3）。现在是一个“编辑”按钮，将（步骤4），打开了一个对话框，在那里你可以将其粘贴到HTML代码片（步骤5）。

接下来，去谷歌地图，在地图上找到客户的办公室，复制的iframe嵌入HTML代码，然后将其粘贴到HTML切片。

在Fireworks的HTML切片

iframe的宽度和高度，应该有相同的像素尺寸片。审查要在原型的嵌入式地图文件→→预览在浏览器中预览...

在Fireworks原型的嵌入式谷歌地图

看到嵌入在用Fireworks做了一个网站的原型，例如谷歌地图。

嵌入视频

可以很容易地嵌入视频中的原型，类似地图。去你要嵌入的视频（无论是YouTube上，VIMEO等），并复制视频的嵌入代码。看到一个视频实时预览，再去文件→浏览器→预览预览...

请注意：嵌入代码将设置视频的宽度和高度。在Fireworks的HTML切片应该有确切的尺寸相同，以保持正确的比例。

嵌入FLASH动画和更多

有了一个iframe，你可以嵌入在现场原型的一切。只需将要嵌入一个iframe元素，并将其粘贴在HTML切片的代码。因此，甚至Flash动画，视频和其他元素存储在自己的Web服务器，可以方便地嵌入。

当然，HTML切片不局限于谷歌地图和Flash视频。HTML切片，包括JavaScript和AJAX元素，JavaScript动画，HTML5和CSS3的动画更可以放在任何可以被包裹在一个iframe。;边缘，例如，你可以创建基于HTML5，CSS3和JavaScript的动画和互动。甚至边缘;动画和互动可以包括在烟花原型。另外，你可以使自己的HTML5和CSS3的动画，代码直接粘贴在HTML切片。这么多的可能性！

点击通过回顾出口的HTML原型

这个过程的最后一步是出口审查的原型。在此之前，你可以做一个在浏览器快速预览，以确保一切工作按预期; 浏览器中的文件→预览→预览在浏览器中的所有页。记得选择“预览所有网页......”;如果您选择“...预览”，你将只能看到实际页面的预览，并链接到其他网页将无法正常工作。如果您选择了“预览所有页面...”，你将能看到的所有网页，所有的交互和工作的内部链接。

烟花在浏览器预览

尽一切之前出口的活原型。如果一切正常，你可以再出口要通过原型的点击文件→导出...。在对话方块中，选择“HTML和图像”“导出切片”，“所有网页，”“包括无切片区域”和“中的子文件夹的图片。”

出口烟花原型的选项

的现场演示，

看到一个原型的一个例子很基本相互作用，如悬停状态，链接的网页和嵌入式谷歌地图出口马上从Fireworks PNG文件。（感觉自由探索的页面和可交互性。）

另一种方法是要导出一个交互式的PDF 文件→导出和出口的格式选择“Adobe PDF格式”。的PDF可以被发送到客户端，谁就能审查网站和离线交互，然后为您提供与反馈。还看到一个交互式PDF的例子（一个HTML现场的原型是一个更优雅的解决方案，但知道有其他的选择，这是很好的）。

对新的移动网络和烟花爆竹的话

而准备使用Adobe Fireworks交互式原型，可快速和容易的，他们是没有反应，或专门适应现代移动环境。幸运的是，出口响应使用Adobe Fireworks原型Adobe烟花马特·斯托和触摸应用程序原型（TAP）的扩展，这里是为了帮助！这两个扩展是免费的，将帮助您更容易建立烟花响应性的Web原型或iOS原型。

代理客户反馈

最后，当你做什么客户提供原型的反馈和互动？

在Fireworks中，对客户的反馈是很容易的。所有您需要做的是设计（根据客户的注释和评论）做一些调整，再出口审查的原型的新版本，并把它上传到测试服务器。整个过程可在几分钟内完成，你可以使许多设计变更和迭代需要。

烟花非常适合在Web或移动应用程序设计师的工作流程。在Fireworks中，你可以做整体设计，或者你可以导入Photoshop或Illustrator的作品，并继续在Fireworks中。网站的所有网页的布局，可以很容易地创建“页面”面板中，在与母版页功能相结合。为了增加互动性，你可以设置所有的网站不同的状态，与美国“面板中的帮助下。这整个过程是快的，因为烟花是这种类型的工作流程进行了优化。切片和热点，使您可以轻松链接到对方所有网页。

设计师和客户端从一个交互式原型的利益。同时准备一个互动的原型肯定需要一些时间，这将超过还清在开发过程中。