體驗和分享你的使用了互動原型的設計。在本章節,學習如何自定義,生成和分享互動原型。
Interactive Prototypes Overview
互動原型是一種簡單化文檔,擷取使用者回報,識别和确定需求的有力方法。在你設計,注釋和添加互動到你的wireframe之後,可以在浏覽器基礎原型中産生互動——不需要寫一行代碼。
Axure RP原型由HTML,Javascript,CSS和圖檔組成。你可以在目前最流行的浏覽器中觀看原型。譬如Firefox,IE,Safari或者Chrome。你不需要安裝一個解析器,播放器或者Axure RP才能觀看原型。這樣讓原型可以更容易進行分享。你的用戶端隻需要Axure RP就可以編輯設計原型。
Configure and Generate Prototypes
有幾種方法可以定制原型。像選擇包含的頁面和添加logo或标題。一旦你配置好了你的原型,隻需要單擊一個按鈕就可以生成HTML和Javascript。
*Configure Prototypes
在主菜單中點選“Generate->Prototypes”或者在編輯工具欄中點選“Prototypes”按鈕可以打開“Generate Prototype”對話框。
General:選擇原型生成的目标檔案夾和預設打開的浏覽器。原型有很多檔案,是以最好建立一個檔案夾用于原型儲存。在預設情況下,原型會生成在“~/My Documents/My Axure RP Prototypes"(PC上面)或者”~/Documents/My Axure RP Prototypes“(Mac上面)檔案夾中。
單擊”Use Default“按鈕可以重新設定預設目的儲存路徑。
Pages:選擇你生成原型包含的頁面。預設情況下會包含所有頁面。
Notes:選擇和排序頁面在原型中顯示備注的順序。
Annotation:選擇和排序annotation在原型顯示的區域。當然也有替代帶widget标簽的筆記圖示的選項。
Interactions:選擇總是顯示的case描述,或者當多個cse存在的時候顯示的case描述。
Logo:導入一個圖檔作為原型的标志說明。
Mobile/Device:選擇插入的移動視圖視窗标簽。視口标簽說明了裝置可用于原型顯示的大小和比例選項。
Distribution (for PC only):生成用于原型的一種簡單檔案描述的CHM版本的選項設定。
Advanced:設定圖像顯示的文本,字型大小和是否使用素描效果。
Discuss(Beta):設定是否可以在AxShare(share.axure.com)上授權讨論。這個特性還隻是測試版中的。
*Generate Prototypes
當你完成了配置,點選“Generate”按鈕在目标路徑中建立原型檔案并在一個特地的浏覽器中打開原型。
為了任何時候可以啟動原型,找到你生成原型檔案所在的檔案夾打開“start.html”檔案。(譬如,“My Documents/My Axire RP Prototypes/{File Name}”)
Tip:在第一次生成原型之後,你可以在主菜單中選擇“Generate->Regenerate Current Page”重新生成單一的頁面。重新整理浏覽器就會更新原型頁面。這個功能在你大檔案中編輯頁面個别也非常節省時間。
Using Prototypes
原型有以下兩部分組成:
Sitemap, Page Notes, Discuss(左邊部分):在左邊的面闆中有三個頁籤。Sitemap(網站地圖)可以通過點選頁面名稱可以在main frame(右邊的主架構)中直接打開頁面。在Page Notes 頁籤中可以檢視給頁面添加的備注說明。而Discuss tab可以增加和評論話題。
你可以點選右上角的灰色框隐藏左邊的面闆。當然你也可以在左上角的灰色圖示重新喚出面闆。你也可以直接導航到一個頁面的html檔案,這樣就不用讓所有的檔案都顯示出來。
Main Frame(右邊部分):互動的線框圖(wireframe)。線框圖中的互動行為會按照你在Axure RP中定義的行為互動。帶注釋的widget會在附近出現一個備注圖示(note icon)。點選備注圖示會出現一個顯示注釋的對話框。
Tip:如果你使用的是IE浏覽器,你會看見一個是否允許顯示AxtiveX内容的彈出警告。在主菜單中打開“Tools(工具)->Internet Options(Internet設定)”,在“Advanced(進階)”頁籤中,向下滾動到“Security(安全)”部分,點選選中”Allow active content to run files on My Computer(允許在我的計算機中允許Active内容)“可以關閉警告。
Share and Distribute Prototypes
有幾種方法途徑可以分享和釋出原型...而且不需要你的讀者安裝Axure RP和閱讀軟體。
*Send a Zip
右鍵包含原型的檔案夾,從菜單中選擇"Send to -> Compressed (zipped) Folder(發送到 -> 壓縮(zipped)檔案)"(對于PC),"Compress [folder name]"(對于Mac),将檔案壓縮為zip檔案。建立了zip檔案後就可以email給其他人。
當其他人接受到你的檔案後,就可以解壓檔案将原型釋放到他的計算機中。右鍵zip檔案選擇"Extrct All Files"或者直接将原型檔案從zip中拖拽到桌面就可以将原型解壓出來。
打開"start.html",檔案會從網頁浏覽器中打開,就可以檢視原型。請記住,你不能直接在zip檔案中打開原型,你必須先解壓。
*Publish to a Shared Server or Web Server
先在本地生成原型,然後将檔案移動到伺服器。當然你也可以直接在伺服器生成原型。轉換檔案為服務,可以使用FTP軟體,譬如Flash FXP 将原型檔案夾上傳到伺服器。 如果你不确定你的伺服器是否被設定好,你的IT朋友也許可以幫你。
上傳完成後,你可以釋出你的位址或者連接配接到你的原型。如果其他人擁有伺服器的權限,他們就可以通過浏覽器通路原型。
*Publish to AxShare
AxShare是我們原型分享的一個網站,并且它允許你在上面管理10個動态原型。需要更多服務就需要支付費用了。你可以上傳一個RP檔案,AxShare就會提供一個可以通路原型的連接配接給你。你就可以和别人分享你的原型作品了。你也可以對你送出的原型作品設定一個秘密來防止别人通路。這些都是免費的。
你也發現了在你的原型中,網站地圖sitemap附近有一個Discuss頁籤(你可以關閉顯示)。你可以檢視AxShare使用者在上面的讨論。
在http://share.axure.com/ 你可能會發現更多内容。
*Send a CHM File (PC Only)
CHM是微軟提供的一種HTML格式的幫助檔案。大不了windows平台機器都安裝了CHM的播放器。像Zipe檔案,CHM可以讓你釋出一個單獨檔案而且接收者不需要安裝任何軟體就可以檢視檔案。對于接收者不需要解壓軟體來解壓檔案這還是有點好處的吧。
在生成原型檔案的時候(F5),“Generate Prototype”對話框有一個“Distribution”選項,可以選擇是否生成CHM檔案。
如果你沒有微軟安裝好的HTML幫助平台,但是你又必須需要它來生産你的CHM檔案,你可以免費下載下傳它(點選“htmlhelp.exe”按鈕)。當你安裝完成後,有一個“hhc.exe”檔案需要你安裝。在“Distribute”中點選“Locate hhc.exe"打開你的hhc.exe檔案。
你終于看完了。你可以生成和分享你的互動原型了。
版權由原位址提供公司所有。
本文轉自 Ron Ngai 部落格園部落格,原文連結:http://www.cnblogs.com/rond/archive/2012/12/07/2807794.html ,如需轉載請自行聯系原作者