Fireworks創(chuàng)建網(wǎng)站設(shè)計的原型。

申請免費試用、咨詢電話：400-8352-114

雖然屏幕上，包括網(wǎng)絡(luò)的設(shè)計，移動和豐富的互動應(yīng)用程序（RIA）的，你經(jīng)常需要創(chuàng)建一個原型應(yīng)用程序是否正常工作，在發(fā)展階段上的移動。

在Web項目中的原型也是必不可少的。例如，當(dāng)你打算網(wǎng)上訂購過程，你必須要確保每一步都是正確的，沒有關(guān)鍵要素缺少。通常情況下，您將創(chuàng)建一個網(wǎng)站的所有網(wǎng)頁不同的屏幕，訂貨過程或應(yīng)用程序的工作流程，并描述它們之間的連接。這樣你就可以看到互動的工作是否如預(yù)期，您可以測試不同用戶的產(chǎn)品，和你的客戶可以檢討。

然而，一個靜態(tài)的原型是更難審查和測試，通常它只是一堆的圖像（在這里和那里的一些解釋性說明），并掌握它們之間的連接可能很難。為什么不使事情變得更加動態(tài)，為客戶更容易，幫助Adobe煙花？

原型是什么，我為什么要使用一個？

“原型是一個早期的樣品或者模型的建立測試概念或過程，或作為一個要復(fù)制或?qū)W到的東西。” - 維基百科

使用交互原型，帶來了許多好處。主要的好處是，你能夠很容易地找到錯誤在交互流或用戶界面（UI），在一個非常早期的階段，甚至已經(jīng)開始開發(fā)前。你的客戶也可以提供詳細(xì)的反饋，在設(shè)計過程的早期。客戶端將得到一個正常運作的演示，與許多交互顯示在屏幕上的權(quán)利，而不是一個圖像采集，沒有互動。

要了解更多有關(guān)原型的優(yōu)勢，在“外觀與快速原型設(shè)計更好的更快 “碎雜志。幾個有趣的文章也已出版的方框和箭頭：“ 融入您的設(shè)計過程原型 “和” 通過原型定義的功能集?！?/p>

什么是點擊通過原型嗎？

通過點擊原型是一個網(wǎng)站或應(yīng)用程序，允許你通過點擊不同的頁面和狀態(tài)，并與關(guān)鍵作用包裝的交互原型。

HTML原型

建立這樣一個在Adobe煙花原型是很容易的。所有您需要做的是準(zhǔn)備出口作為一個互動的原型設(shè)計：創(chuàng)建片，屏幕上的所有互動區(qū)域，并為所有應(yīng)用程序的不同狀態(tài)頁。片也可以懸停狀態(tài)，并鏈接到各個頁面。在年底，你將創(chuàng)建一個點擊選擇在Fireworks中的“導(dǎo)出為HTML和圖像”（也稱為點擊通過一個互動的原型或虛擬）通過原型。導(dǎo)出的HTML文件可以在瀏覽器中查看本地或上傳到Web服務(wù)器的審查和測試。

網(wǎng)頁原型從Adobe煙花出口。

（互動）PDF文件

另一種選擇是“的Adobe PDF導(dǎo)出為?！苯换ナ絇DF有所減少的功能集，這里的區(qū)別是：翻車是行不通的，只有矩形熱點將與他們的聯(lián)系出口。它的優(yōu)點是可以通過電子郵件發(fā)送到客戶端，可以輕松地給予反饋，使用注釋工具在Acrobat或Adobe Reader的PDF。請記住，雖然，該煙花不生成注釋功能的PDF文件，你必須在Acrobat Pro中打開PDF文件，使評論，然后保存，然后把它發(fā)送到客戶端的PDF格式。（啟用在Acrobat Pro的評論，使任何人都可以免費的Acrobat Reader添加評論，它可能），當(dāng)然，如果Acrobat Pro是不是一種選擇，然后反饋可以提供通常的方式，如電子郵件，任何。

在我看來，HTML原型是一個更好的選擇。在這篇文章中，我們將展示如何有效的這種工作流是在Fireworks。但在潛水之前，讓我們快速回顧“活”的原型階段，一個項目帶來的主要好處。

原型的優(yōu)點

• 在一個非常早期的階段，得到反饋。
• 提高你的溝通的有效性。獲得更詳細(xì)的客戶反饋。
• 原型可以用于可用性和A / B測試。
• 早期發(fā)現(xiàn)錯誤。后來在發(fā)展過程中少犯錯誤。
• 尋找錯誤的交互流程或UI開發(fā)前已經(jīng)開始。
• 從原型中導(dǎo)出的圖形，可用于發(fā)展。
• 開發(fā)人員或團隊會明白什么需要做，而無需詳細(xì)解釋。
• 整體開發(fā)時間將減少。
• 最小化的發(fā)展變化的需要
• 您的客戶將留下深刻的印象。

如何打動你的客戶

如果客戶端與Web設(shè)計師或團隊首次合作，他可能不會如此深刻的印象，訪問點擊通過原型早在設(shè)計過程中，因為他不知道有什么不同。但如果他們通過了在過去的過程，那么他們將可能是網(wǎng)站實時預(yù)覽在屏幕上看到了非常深刻的印象，用了很多的互動，而不是一個簡單的靜態(tài)預(yù)覽或圖像文件的集合，。

就我個人而言，我已經(jīng)使用，通過點擊從Adobe煙花原型為10年以上，具有很大的成功，從我的客戶的積極性。

有網(wǎng)頁設(shè)計經(jīng)驗，每一個客戶留下了深刻的印象，看到的網(wǎng)站在瀏覽器中的工作原型。我的客戶始終明白這一點，一旦你的客戶使用，他們會更喜歡的工作方式，太。

一個字的警告，但。很清楚，這只是一個原型，它尚未被開發(fā)成一個真正的應(yīng)用程序，這將發(fā)生一次的原型被批準(zhǔn)。否則，客戶可能期望一個正常運作的網(wǎng)站，只是你的原型復(fù)制到其域的根文件夾出現(xiàn)。

如何創(chuàng)建點擊通過在Fireworks中的原型

Fireworks中創(chuàng)建的原型，通過點擊由簡單的HTML文件（即HTML表和圖像）。但是，這并不重要，因為在設(shè)計過程的早期階段，只使用原型。一旦已批準(zhǔn)的原型和測試客戶端，你可以繼續(xù)到該網(wǎng)站的發(fā)展階段，具有語義的HTML和CSS。煙花是有用的設(shè)計轉(zhuǎn)移到發(fā)展階段。

交互式原型的關(guān)鍵要素是什么？基本上，一個原型由頁（可選母版頁），州，切片和熱點。讓我們回顧一下更詳細(xì)的每個。

頁和母版頁

要創(chuàng)建一個點擊，通過原型，你首先需要建立多個頁面，在您的文檔。每一個應(yīng)用程序或網(wǎng)站的每一頁的狀態(tài)將需要一個單獨的頁面在Fireworks。要創(chuàng)建一個單獨的頁面，你可以使用“頁面”面板。當(dāng)所有的網(wǎng)頁，在設(shè)計份額常見的元素，如頭，標(biāo)識和主要的導(dǎo)航，你可以使用母版頁。

在我們的例子網(wǎng)站，我們將需要六頁（家，產(chǎn)品，店鋪，店鋪的細(xì)節(jié)，支持和聯(lián)系方式）。他們都將有相同的標(biāo)題區(qū)，一個標(biāo)志，圖像和導(dǎo)航，所以創(chuàng)建一個母版頁是有道理的。這樣做，只有那些元素上創(chuàng)建一個頁面，然后（就像在InDesign），右鍵點擊頁面上的“頁面”面板中，選擇“設(shè)置為母版頁”，或者，你可以使用的選項菜單上的“頁面”面板的右側(cè)?，F(xiàn)在，放在母版頁上的每一個元素會自動出現(xiàn)在所有網(wǎng)頁上，這將節(jié)省大量的開發(fā)時間。

在Fireworks中設(shè)置母版頁。

基于母版頁上，我們現(xiàn)在可以構(gòu)建所有的頁面。轉(zhuǎn)到“頁面”面板，并點擊新頁面圖標(biāo)幾次，直到你有六頁（加上母版頁）。然后給每一個有意義的名字。主頁被命名為“頁面”面板指數(shù)，和“店詳細(xì)信息”可以shop_detail。

在Fireworks中的“頁面”面板。

當(dāng)談到出口，煙花將自動命名這兩個頁的index.html和shop_detail.html?，F(xiàn)在，我們可以填寫各以其獨特的設(shè)計元素（即不常見的元素，這將在母版頁）六頁。

以后可以在“頁面”面板中創(chuàng)建的所有網(wǎng)頁彼此相連，通過熱點和切片（稍后）。

請注意：母版頁上的所有元素將出現(xiàn)在同一地點所有個人網(wǎng)頁，不能上頁逐頁的基礎(chǔ)上移動。所以，如果一個頁面需要不同的母版頁，你將有覆蓋母版頁的元素的新元素，或使用其他Fireworks文件。

美國

給客戶提供更多的互動反饋，您可能還需要創(chuàng)建懸停狀態(tài)的導(dǎo)航元素。這樣做，打開“狀態(tài)”面板，添加一個新的狀態(tài)，通過點擊“新/重復(fù)的國家?！比绻阏谑褂媚赴骓?，你可以創(chuàng)建母版頁上的第二個國家的權(quán)利（從而節(jié)省點幾下） ，然后它將被用來對個別網(wǎng)頁?，F(xiàn)在，在新的狀態(tài)，你只需要放置應(yīng)該改變懸停的元素，如導(dǎo)航，鏈接，下拉菜單，提示等。

國家在Fireworks面板

導(dǎo)航元素，以顯示一個懸停效果，您只需將懸停效果，在這第二個狀態(tài)的圖形。您可以更改導(dǎo)航背景的顏色或一個下拉陰影應(yīng)用于文本對象。所有這些都將改變懸停在第二個國家在美國的面板（懸停狀態(tài)）。

請注意：煙花不使用CSS ：懸停偽類。相反，它使用JavaScript來交換在原型的圖像（一個傳統(tǒng)的基于JavaScript的翻轉(zhuǎn)或mouseover）。這個JavaScript的行為是相當(dāng)老，只應(yīng)使用在快速原型階段。在開發(fā)階段，它應(yīng)該做的與CSS偽類。

“添加”選項在美國“面板

懸停狀態(tài)后，所有已創(chuàng)建的，可以重復(fù)使用的所有網(wǎng)頁。如果你有一個母版頁，你只需要創(chuàng)建的所有網(wǎng)頁上的國家“面板中右鍵單擊第二個狀態(tài)，或通過點擊”添加“選項”菜單中的面板的右側(cè)。

新的狀態(tài)會自動從母版頁的第二個國家，包括所有懸停元素。如果你沒有一個母版頁，你必須復(fù)制和粘貼所有懸停元素的所有個人頁面上的第二個國家。

與片，你是能夠確定的地區(qū)，應(yīng)改變懸停。

請注意：當(dāng)多個國家翻轉(zhuǎn)和圖像互換使用母版頁上，您需要手動添加更多的國家，所有其他網(wǎng)頁。

切片和熱點

切片中的Adobe煙花

片可以用來定義地區(qū)，是互動的，將被鏈接到同一網(wǎng)站或外部URL，即使點上的不同頁面。熱點只能用于生成超鏈接（內(nèi)部或外部）的領(lǐng)域。

創(chuàng)建切片在Fireworks

做一個懸停狀態(tài)，選擇“切片”工具（在上圖中的第1步），然后勾勒出整個地區(qū)懸停元素（步驟2）。

你還可以通過切片，在畫布上選擇一個對象，右擊并選擇“插入矩形切片?！边@是往往更容易，更快，更比使用切片工具的準(zhǔn)確。如果選擇多個對象，單擊右鍵，然后插入一個分片，煙花將顯示一個對話框，選擇插入多片（一）每個對象或一大截，涵蓋所有選定的對象。

你已經(jīng)定義了所有的領(lǐng)域后，可以使用在每個片的中間目標(biāo)，以創(chuàng)建懸停效果（步驟3）。這樣做，單擊并拖動在同片成片背面的中間目標(biāo)。在大多數(shù)情況下，這將是相同的位置，所以它必須指出，同片（步驟4）。如果你想顯示另一幅圖像上懸停，則目標(biāo)必須指向切片圖像，但在大多數(shù)情況下，它本身將指出。然后煙花會問你選擇哪個國家的圖像交換（步驟5）。在這里你會選擇與懸停圖像（例如，“狀態(tài)2”）的狀態(tài)。

預(yù)覽在Adobe煙花的設(shè)計

重復(fù)這一步的所有懸停地區(qū)后，你可以看一下結(jié)果，點擊“預(yù)覽”按鈕，在左上角的Fireworks PNG文件。

懸停元素，每一個頁面上出現(xiàn)的，如主導(dǎo)航，你可以節(jié)省時間創(chuàng)建母版頁片。

為了幫助你，煙花提供一些視覺協(xié)會片（綠色）和熱點（藍(lán)色）;和“屬性”檢查器“面板（或?qū)傩悦姘澹┮矊@示切片或熱點類型。標(biāo)準(zhǔn)的切片和熱點是半透明的，但HTML切片是不透明的。您也可以指定自定義顏色片熱點有用的，如果你要區(qū)分代碼已被放置在他們（的HTML，JavaScript，嵌入式Flash對象等）的類型。

請注意：當(dāng)使用的翻轉(zhuǎn)狀態(tài)，復(fù)制或分享其他國家的背景元素有時是必要的，否則空白區(qū)域可能會出現(xiàn)翻轉(zhuǎn)。例如，如果一個切片大于對象，將改變過渡，然后在對象后面的背景也將出現(xiàn)在翻轉(zhuǎn)狀態(tài)（狀態(tài)2）。我建議使用“，以國家”的元素，這將是在所有國家一樣，在翻車保持一致的外觀（或懸停）?！百弴笔窃凇皥D層”面板（右鍵單擊需要共享MouseOver狀態(tài)上一層）進(jìn)行訪問。

鏈接頁

現(xiàn)在，所有的互動元素片，頁面可以鏈接到對方。要生成超鏈接，你通常會點擊切片（或熱點，如果沒有需要懸停效果），在屬性面板中的“鏈接”字段輸入一個網(wǎng)址。對于外部URL，你會進(jìn)入，例如，http://www.google.com ;內(nèi)部鏈接，您必須輸入從“頁面”面板中的頁面的名稱。從“頁面”面板中的所有頁面名稱也可在下拉菜單中，從而防止錯別字。

在Fireworks中的鏈接頁面

在“頁面”面板中的頁面的名稱應(yīng)該是Web友好的（即沒有空格或特殊字符）。您可以檢查出你剛才創(chuàng)建的演示樣機，所有的超鏈接和互動區(qū)域，通過點擊文件→在瀏覽器中預(yù)覽“→”預(yù)覽所有頁面。

加入實時交互原型。

很多的焰火用戶不知道的HTML切片。對于每一個切片，在屬性面板（前景圖像，背景圖像和HTML）有三種不同的選擇。前景和背景圖片，你可以指定圖像的出口模式，如果出口煙花爆竹的HTML和CSS。

在Fireworks中的片類型

對于“通過原型，這是基于HTML和圖像，默認(rèn)的”前景圖像“選項效果最好。如果你想放置不同類型原型的互動，HTML切片是一個不錯的選擇。你可以放置在任何HTML代碼的HTML切片，這是非常有效的，如果某些元素已經(jīng)存在，如互動。HTML切片，你可以很容易地插入在原型谷歌地圖，視頻，動畫等，以顯示客戶端的元素將如何運作右。

嵌入谷歌地圖

如果我們想有一個嵌入的Google地圖“聯(lián)系”頁面？您不需要采取截圖的地圖區(qū)域，表明谷歌地圖的存在。在Fireworks中，您可以放置在原型的實際地圖本身。

在Fireworks中使用HTML切片

這樣做，選擇切片工具（上面的步驟1），并繪制過的地方，你要顯示的地圖（步驟2）切片。下一步，更改類型的“HTML”，在屬性面板中（步驟3）?，F(xiàn)在是一個“編輯”按鈕，將（步驟4），打開了一個對話框，在那里你可以將其粘貼到HTML代碼片（步驟5）。

接下來，去谷歌地圖，在地圖上找到客戶的辦公室，復(fù)制的iframe嵌入HTML代碼，然后將其粘貼到HTML切片。

在Fireworks的HTML切片

iframe的寬度和高度，應(yīng)該有相同的像素尺寸片。審查要在原型的嵌入式地圖文件→→預(yù)覽在瀏覽器中預(yù)覽...

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

看到嵌入在用Fireworks做了一個網(wǎng)站的原型，例如谷歌地圖。

嵌入視頻

可以很容易地嵌入視頻中的原型，類似地圖。去你要嵌入的視頻（無論是YouTube上，VIMEO等），并復(fù)制視頻的嵌入代碼?？吹揭粋€視頻實時預(yù)覽，再去文件→瀏覽器→預(yù)覽預(yù)覽...

請注意：嵌入代碼將設(shè)置視頻的寬度和高度。在Fireworks的HTML切片應(yīng)該有確切的尺寸相同，以保持正確的比例。

嵌入FLASH動畫和更多

有了一個iframe，你可以嵌入在現(xiàn)場原型的一切。只需將要嵌入一個iframe元素，并將其粘貼在HTML切片的代碼。因此，甚至Flash動畫，視頻和其他元素存儲在自己的Web服務(wù)器，可以方便地嵌入。

當(dāng)然，HTML切片不局限于谷歌地圖和Flash視頻。HTML切片，包括JavaScript和AJAX元素，JavaScript動畫，HTML5和CSS3的動畫更可以放在任何可以被包裹在一個iframe。;邊緣，例如，你可以創(chuàng)建基于HTML5，CSS3和JavaScript的動畫和互動。甚至邊緣;動畫和互動可以包括在煙花原型。另外，你可以使自己的HTML5和CSS3的動畫，代碼直接粘貼在HTML切片。這么多的可能性！

點擊通過回顧出口的HTML原型

這個過程的最后一步是出口審查的原型。在此之前，你可以做一個在瀏覽器快速預(yù)覽，以確保一切工作按預(yù)期; 瀏覽器中的文件→預(yù)覽→預(yù)覽在瀏覽器中的所有頁。記得選擇“預(yù)覽所有網(wǎng)頁......”;如果您選擇“...預(yù)覽”，你將只能看到實際頁面的預(yù)覽，并鏈接到其他網(wǎng)頁將無法正常工作。如果您選擇了“預(yù)覽所有頁面...”，你將能看到的所有網(wǎng)頁，所有的交互和工作的內(nèi)部鏈接。

煙花在瀏覽器預(yù)覽

盡一切之前出口的活原型。如果一切正常，你可以再出口要通過原型的點擊文件→導(dǎo)出...。在對話方塊中，選擇“HTML和圖像”“導(dǎo)出切片”，“所有網(wǎng)頁，”“包括無切片區(qū)域”和“中的子文件夾的圖片?！?/p>

出口煙花原型的選項

的現(xiàn)場演示，

看到一個原型的一個例子很基本相互作用，如懸停狀態(tài)，鏈接的網(wǎng)頁和嵌入式谷歌地圖出口馬上從Fireworks PNG文件。（感覺自由探索的頁面和可交互性。）

另一種方法是要導(dǎo)出一個交互式的PDF 文件→導(dǎo)出和出口的格式選擇“Adobe PDF格式”。的PDF可以被發(fā)送到客戶端，誰就能審查網(wǎng)站和離線交互，然后為您提供與反饋。還看到一個交互式PDF的例子（一個HTML現(xiàn)場的原型是一個更優(yōu)雅的解決方案，但知道有其他的選擇，這是很好的）。

對新的移動網(wǎng)絡(luò)和煙花爆竹的話

而準(zhǔn)備使用Adobe Fireworks交互式原型，可快速和容易的，他們是沒有反應(yīng)，或?qū)ｉT適應(yīng)現(xiàn)代移動環(huán)境。幸運的是，出口響應(yīng)使用Adobe Fireworks原型Adobe煙花馬特·斯托和觸摸應(yīng)用程序原型（TAP）的擴展，這里是為了幫助！這兩個擴展是免費的，將幫助您更容易建立煙花響應(yīng)性的Web原型或iOS原型。

代理客戶反饋

最后，當(dāng)你做什么客戶提供原型的反饋和互動？

在Fireworks中，對客戶的反饋是很容易的。所有您需要做的是設(shè)計（根據(jù)客戶的注釋和評論）做一些調(diào)整，再出口審查的原型的新版本，并把它上傳到測試服務(wù)器。整個過程可在幾分鐘內(nèi)完成，你可以使許多設(shè)計變更和迭代需要。

煙花非常適合在Web或移動應(yīng)用程序設(shè)計師的工作流程。在Fireworks中，你可以做整體設(shè)計，或者你可以導(dǎo)入Photoshop或Illustrator的作品，并繼續(xù)在Fireworks中。網(wǎng)站的所有網(wǎng)頁的布局，可以很容易地創(chuàng)建“頁面”面板中，在與母版頁功能相結(jié)合。為了增加互動性，你可以設(shè)置所有的網(wǎng)站不同的狀態(tài)，與美國“面板中的幫助下。這整個過程是快的，因為煙花是這種類型的工作流程進(jìn)行了優(yōu)化。切片和熱點，使您可以輕松鏈接到對方所有網(wǎng)頁。

設(shè)計師和客戶端從一個交互式原型的利益。同時準(zhǔn)備一個互動的原型肯定需要一些時間，這將超過還清在開發(fā)過程中。