本文將介紹如何制作Axure高保真數(shù)據(jù)可視化原型，供大家參考和學(xué)習(xí)。

高保真數(shù)據(jù)可視化原型設(shè)計，稱得上是Axure高階水平。

數(shù)據(jù)可視化在原型設(shè)計中是一個重要的分支，但是對于Axure使用者具有一定要求。清晰的數(shù)據(jù)可視化原型可以減少與需求方和研發(fā)工程師等的溝通成本，且可具象。

Axure本身具有高級交互的能力，結(jié)合數(shù)據(jù)可視化的方式，以低成本的方式，達到預(yù)期的演示的效果，本文介紹如何制作Axure高保真數(shù)據(jù)可視化原型。

第1步：拖入內(nèi)聯(lián)框架（Inline Frame）

在Axure操作界面中，拖入一個Inline Frame（中文：內(nèi)聯(lián)框架）。

第2步：選擇帶有實例圖的HTML頁面

Axure本身可生成HTML頁面，本質(zhì)上而言，只要帶有實例圖的為HTML文件，并可正常訪問即可。至于HTML是以何種方式制作生成，不做限制。

第3步：修改實例圖樣式，編輯HTML頁面代碼

點擊進入圖后，所示頁面如下圖。左側(cè)為折線圖效果對應(yīng)的代碼，右側(cè)是折線圖的效果?？梢栽谧髠?cè)修改代碼，運行后可在右側(cè)查看修改后的效果（此處不做贅述）。

點擊頁面右下角的“Download”按鈕，下載折線圖的HTML頁面。

使用任意一種代碼編輯器（筆者喜歡用komodo），打開html頁面，修改html頁面代碼中自帶的api。如果發(fā)現(xiàn)運行后html報錯api過期時，需要自行創(chuàng)建api，將其進行替換。

第4步：創(chuàng)建一個新的文件夾

創(chuàng)建一個新的文件夾（本文命名其為：axure and excharts），文件夾的位置沒有要求。將下載的HTML頁面，放置在文件夾中。

第5步：使用Axure內(nèi)聯(lián)框架鏈接文件夾中HTML頁面

雙擊拖入Axure操作界面的內(nèi)聯(lián)框架（Inline Frame），選擇“l(fā)ink to an external url or file”（選擇一個外部的urd或文件），輸入HTML頁面所在的位置及名稱（如本文：D:\Desktop\axure and echarts\line-simple.html），如下圖所示：

第6步：Axure界面中操作生成html文件

點擊生成html頁面按鈕：

將生成html文件的目錄，更改為上文創(chuàng)建的文件夾。如下圖：

點擊確認后，“axure and echarts”文件夾中會存在axure生成的html頁面和html頁面。同時，會自動打開一個html頁面，可查看效果，如下圖：

這樣，我們就通過一個簡單的例子，在Axure中實現(xiàn)了數(shù)據(jù)可視化效果。

筆者在本文中分享的是實現(xiàn)的方法，但是實際應(yīng)用過程中，通過一款數(shù)據(jù)可視化產(chǎn)品的視角去實操，會讓你有意想不到的效果，特別是在Axure顏色、布局、交互等能力的加持下。

作者：魚日，公眾號：issnail

本文由 @魚日 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議