首頁(yè)?>?知識(shí)?資訊?>?Fireworks創(chuàng)建網(wǎng)站設(shè)計(jì)的原型。?>?正文

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

2012/7/2 0:00:00 · 稿源:傳誠(chéng)信

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

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

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

(非凡的一面注意:你已經(jīng)買了全新的非凡書#3本書介紹了新的實(shí)用技術(shù)和整個(gè)漸進(jìn)式網(wǎng)頁(yè)設(shè)計(jì)的新思維。取得今天你的書?。?

原型是什么,我為什么要使用一個(gè)?

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

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

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

什么是點(diǎn)擊通過(guò)原型嗎?

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

HTML原型

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

Fireworks網(wǎng)頁(yè)樣機(jī)
網(wǎng)頁(yè)原型從Adobe煙花出口。

(互動(dòng))PDF文件

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

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

原型的優(yōu)點(diǎn)

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

如何打動(dòng)你的客戶

如果客戶端與Web設(shè)計(jì)師或團(tuán)隊(duì)首次合作,他可能不會(huì)如此深刻的印象,訪問(wèn)點(diǎn)擊通過(guò)原型早在設(shè)計(jì)過(guò)程中,因?yàn)樗恢烙惺裁床煌5绻麄兺ㄟ^(guò)了在過(guò)去的過(guò)程,那么他們將可能是網(wǎng)站實(shí)時(shí)預(yù)覽在屏幕上看到了非常深刻的印象,用了很多的互動(dòng),而不是一個(gè)簡(jiǎn)單的靜態(tài)預(yù)覽或圖像文件的集合,。

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

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

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

如何創(chuàng)建點(diǎn)擊通過(guò)在Fireworks中的原型

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

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

頁(yè)和母版頁(yè)

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

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

作為一個(gè)母版頁(yè)設(shè)置的煙花
在Fireworks中設(shè)置母版頁(yè)。

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

煙花頁(yè)面板
在Fireworks中的“頁(yè)面”面板。

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

以后可以在“頁(yè)面”面板中創(chuàng)建的所有網(wǎng)頁(yè)彼此相連,通過(guò)熱點(diǎn)和切片(稍后)。

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

美國(guó)

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

國(guó)家 Fireworks創(chuàng)建網(wǎng)站設(shè)計(jì)的原型。
國(guó)家在Fireworks面板

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

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

煙花地址
“添加”選項(xiàng)在美國(guó)“面板

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

新的狀態(tài)會(huì)自動(dòng)從母版頁(yè)的第二個(gè)國(guó)家,包括所有懸停元素。如果你沒(méi)有一個(gè)母版頁(yè),你必須復(fù)制和粘貼所有懸停元素的所有個(gè)人頁(yè)面上的第二個(gè)國(guó)家。

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

請(qǐng)注意:當(dāng)多個(gè)國(guó)家翻轉(zhuǎn)和圖像互換使用母版頁(yè)上,您需要手動(dòng)添加更多的國(guó)家,所有其他網(wǎng)頁(yè)。

切片和熱點(diǎn)

切片中的Adobe煙花
切片中的Adobe煙花

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

創(chuàng)建切片在Fireworks
創(chuàng)建切片在Fireworks

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

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

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

預(yù)覽 Fireworks創(chuàng)建網(wǎng)站設(shè)計(jì)的原型。
預(yù)覽在Adobe煙花的設(shè)計(jì)

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

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

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

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

鏈接頁(yè)

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

鏈接 Fireworks創(chuàng)建網(wǎng)站設(shè)計(jì)的原型。
在Fireworks中的鏈接頁(yè)面

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

加入實(shí)時(shí)交互原型。

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

煙花切片類型
在Fireworks中的片類型

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

嵌入谷歌地圖

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

地圖 Fireworks創(chuàng)建網(wǎng)站設(shè)計(jì)的原型。
在Fireworks中使用HTML切片

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

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

地圖 Fireworks創(chuàng)建網(wǎng)站設(shè)計(jì)的原型。
在Fireworks的HTML切片

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

地圖視圖 Fireworks創(chuàng)建網(wǎng)站設(shè)計(jì)的原型。
在Fireworks原型的嵌入式谷歌地圖

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

嵌入視頻

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

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

嵌入FLASH動(dòng)畫和更多

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

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

點(diǎn)擊通過(guò)回顧出口的HTML原型

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

預(yù)覽 Fireworks創(chuàng)建網(wǎng)站設(shè)計(jì)的原型。
煙花在瀏覽器預(yù)覽

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

煙花出口
出口煙花原型的選項(xiàng)

的現(xiàn)場(chǎng)演示,

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

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

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

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

代理客戶反饋

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

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

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

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

  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時(shí)咨詢熱線

139-1050-5354