Axure生成的原型html如何使用和備份

PM完成Axure原型評審后，一定不能忘記備份這些原型html，后續可能需要查詢以及技術撕逼。

希望通過Axure原型的幾種使用場景，讓初級PM對它的來龍去脈有個清晰的了解。而不是停留在“我知道”“大概會用”的水平。

版本

PM會經常修改AxureRP源文件，然后生成不同的原型。

但是對外評審的原型應該是唯一的。

并且該版本的產品需求文檔PRD就是這個原型。

請注意兩者不能混為一談。

打開

一般來說我們是在Axure生成原型Html的時候，自動在瀏覽器中打開了原型并查看。

但是如何打開已備份在電腦中的原型呢，很多初級PM摸不著頭腦了。其實也不復雜，如果你學會一點html網頁的知識。

請進入該原型對應的目錄，比如APP名稱V2.0版，我們會發現存在data、file、images、plugins、resources等文件夾，以及很多html網頁。請找到start.html，然后雙擊打開就是你熟悉的原型啦。

展示

當原型評審后，PM需要將原型放到網上供所有團隊成員進行設計和編程。

不管是放到內網展示，還是外網展示。其本質都是將Axure原型的所有文件都上傳到服務器，包括所有的html文件，圖片文件，js文件，css文件。不能缺少任何文件，否則就無法正常顯示。

如果你只是修改了某個頁面，也切記生成并將所有文件上傳一遍，而不僅僅是該頁面對應的html文件。因為其對應的js，css文件，圖片文件也可能被修改

上傳之后然后把對應的原型網址發給其他團隊成員即可查看。

備份

由于Axure原型是由html+js+cs組成的文件，我們在生成的時候將他們放置在指定目錄。

嘉定我們將該產品的所有原型存放于D://PM/APP名稱，那么建議以“APP名稱V1.0版”的格式命名，并生成原型。

當然你也可以繼續壓縮之后存起來，不過就不太方便后續的查詢。

回退

有時候我們需要回退版本的時候，需要把舊版本的原型也拿出來。那么請用舊版本的原型html去替換當下的原型目錄。

不過不太建議這樣，還不如新增一個版本來處理。

查詢

由于Axure生成的原型，是以Html文件進行索引內容的。而Html是以你在Axure中新建的頁面來作為基礎的。如果你畫Axure原型的時候是以你產品中的頁面來進行命名和創建的。那么我們可以通過搜索“頁面名稱”關鍵詞去查詢你想要查詢的頁面。

如果你使用的搜索工具支持搜索文件內內容，比如Windows下面的everthing，Mac自帶的spotlight。那么可以通過搜索“頁面內文字”關鍵詞去查詢你想要查詢的相關頁面。

不過我更建議你進入到具體版本的原型html文件夾里面進行搜索，而不是進行全局搜索。

總結

以上就是Axure原型的使用場景。請一定要理解Axure原型的本質是html+js+css，每次生成原型的時候會在本地生成目錄并寫入這些文件。

#專欄作家#

浪子，業務型PM，浪子PRD系列51prd.com，公眾號langzisay，個人微信nuanai88。

本文由 @浪子原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 unsplash，基于 CC0 協議

人都是產品經理旗下【起點學院】推出產品經理“365天”成長計劃，BAT大牛帶你學產品！

一、Axure交互

Axure交互是指把靜態線框圖變成可點擊的交互式HTML原型的功能。

每個Axure交互有三個基本的信息單元組成，即When、Where和What。

When：什么時候發生交互動作？在Axure術語中，用事件（Events）來表示When。例如：瀏覽器中加載頁面時，用戶點擊一個控件后。
Where：交互在哪里發生？ 任何一個控件都可以建立交互動作，如矩形框、單選按鈕或下拉列表，或者一個頁面或模板線框圖。
What：將發生什么 在Axure中，把這是要發生的稱為動作（Actions）。動作定義了交互的結果。例如，在頁面加載時，將一個動態面板編程一種指定狀態。

二、示例

本示例在靜態線框圖的基礎上進行構建。

使用簡單詞語定義交互

用戶點擊 全局導航欄 上某個Tab時，會鏈接到對應的頁面。新打開的頁面將取代當前頁面。使用W3C拆解上述過程。

When：用戶單擊時
Where：全局導航欄上的一個Tab矩形控件
What：鏈接到相應的頁面
Condition: 沒有條件

Axure交互界面

Axure事件

Axure交互由兩類Axure事件觸發。

頁面或頁面中的模板加載時：自動交互，在頁面加載時觸發。
用戶直接與控件進行交互時：手動交互，由用戶觸發。

頁面加載事件

OnPageLoad(頁面加載)事件可廣泛應用于頁面和模板，很可能成為常用方法。

示例：更改默認的著陸頁

打開生成的HTML原型時，總會顯示站點地圖區的第一個頁面。然而，為了便于原型演示，可能首先打開OverView頁。

交互的目標：原型加載時，讓站點地圖區的第一個頁面重新定向到所指定的頁面。使用W3C方法拆解這個交互的結構。

When：原型加載時
Where：站點地圖中的第一個頁面
What：重新定向到另一頁
Condition：沒有條件

交互設置過程：

打開Use Cases頁面(A)進行編輯，在Page Properties(頁面屬性)區中，切換到Page Interactions(頁面交互)選項(B)。
雙擊交互選項中OnPageLoad事件(C)，打開Case Editor(情景編輯器)窗口。
Add actions這一欄中列出了所有的Axure動作。Links這組中的交互動作用于處理導航，其中最常用的是Open Link ->Current Window動作(D)，表示在當前窗口打開鏈接。單擊它。
在Configure actions這一欄中列出了站點地圖區中的所有頁面。單擊OverView頁面(E)，將OverView頁面設置為重定向目標頁面。該動作會出現在Organize actions這一欄中(F)。
這樣就完成了交互設置。點擊“確定”關閉Case Edition窗口。

全局導航Tab的OnClick事件

打開編輯M Global Nav(全局導航模板)頁面(A)。全局導航欄有7個Tab，他們都有相應的交互動作。這里以“指標比較”(B)為例介紹。
在Widget Interactions and Notes區，單擊Interactions(C)選項，可看到矩形控件包含三個事件。
雙擊OnClick事件(D)或者單擊Add Case鏈接，可以打開Case Editors（E）窗口。
然后參照OnPageLoad事件設置。

模擬上下文導航

一種常規的用戶體驗需求是，通過全局導航欄，清晰告知用戶當前處于哪個頁面。頁面加載時，全局導航欄會變成當前選擇的對應頁面。使用W3C方法拆解這個交互的結構。

When： 頁面加載時
Where： 全局導航模板
What： 顯示當前所選擇的頁面
Condition： 沒有條件
很多種方法可以實現這個What：當前激活的導航欄Tab可以變大尺寸、變化頁簽背景顏色、加粗字體、變化字體顏色等。

設置Tab選中后(Selected)的樣式的步驟：

打開M Global Navigation(A)編輯頁面，選擇構成全局導航欄的7個Tab(B)
在Widget Properties and Style(組件屬性和樣式)區中(C),選擇Properties(D)。可以看到四中交互樣式。
選擇Selected(E)選項，彈出Set Interaction Style對話框(F)，選擇Selected選項(G).
4.選擇需要改變的樣式，勾選Preview(預覽)即可。

三、相關資源

作者：binarystar

來源：http://www.jianshu.com/p/0d874e1e040f

xure小白的福利又來了，本教程主要講述查看原型的一系列基礎操作以及相關設置。

希望大家邊學邊操作，學習效果更佳哦。

Axure RP 8 教程 – 查看原型

1.快速預覽查看原型

快速原型的快捷鍵為“F5”。或者，單擊快捷鍵功能中的預覽圖標進行預覽。導航菜單“發布”-“預覽選項”中進行預覽設置。

2.生成HTML查看原型。

生成原型的快捷鍵為“F8”。或者，單擊快捷鍵功能中生成圖標。還可以通過導航菜單“發布”-“生成原型文件”中進行生成。

3.生成部分原型界面

發布原型時，如果不需要將所有頁面生成或者發布，可以在生成HTML的設置中打開“頁面”的設置，取消“生成所有頁面”的勾選，則可以設置生成指定的頁面。注意，子級頁面無法單獨發布，勾選子級頁面時會自動勾選父級頁面。如果需要單獨發布子級頁面，需要在頁面管理面板將子級頁面的級別調整到一級頁面。

4.為原型添加標志

在生成HTML的設置中有“標志”的設置，可以為原型添加圖片標識或者文字標題。原型發布后會顯示在工具欄的頁面面板中。

5.發布原型到AxShare

發布原型到AxShare是將做好的原型發布到Axure官方提供的空間中，通過自動生成的網址進行訪問。發布到AxShare的快捷鍵為“F6”。發布到AxShare需要注冊相關賬號，網址為：http：//share.axure.com/

6.移動設備設置

制作移動設備原型需要遵循規范將原型制作成標準尺寸。移動設備原型尺寸計算工具：http：//www.iaxure.com/share/yxcc/ （個別移動設備可能會有出入）。

除了制作標準原型尺寸，還需要在生成的HTML文件配置中，進行“移動設備”的設置，讓生成的HTMl文件“包含視圖接口標記”才可以正常顯示。

7.web字體設置

當原型使用一些特殊字體時，在沒有安裝該字體的設備上將無法正常顯示。web字體可以較好的解決這個問題。

方法一

需要網絡以及在線CSS文件支持，以FontAwesome字體為例。在web字體設置中，單擊“+”添加新的配置，勾選“鏈接到CSS文件”，將該字體官方網站提供的“.CSS”文件地址填入到超鏈接中即可。這樣只要瀏覽原型時有網絡支持，即可正常顯示字體。

方法二

支持在線字體和本地字體，以FontAwesome字體為例，圖中的src是在線字體代碼。

如果是本地字體代碼應該為： font-family：FontAwesome

src：url（’fontawesome-webfont.ttf’）format(‘true-type’)

注：使用本地字體需要將字體文件“.ttf”復制到生成的HTML文件中。

本文由 @Arthur 原創發布于人人都是產品經理。未經許可，禁止轉載。

在線咨詢

上一篇：JavaScript代碼怎樣引入到HTML中？
下一篇：精美時間線時間軸模板素材，圖文實例詳解時間線繪制

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商