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

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

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

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

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

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

第2步：選擇帶有實(shí)例圖的HTML頁(yè)面

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

第3步：修改實(shí)例圖樣式，編輯HTML頁(yè)面代碼

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

點(diǎn)擊頁(yè)面右下角的“Download”按鈕，下載折線圖的HTML頁(yè)面。

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

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

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

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

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

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

點(diǎn)擊生成html頁(yè)面按鈕：

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

點(diǎn)擊確認(rèn)后，“axure and echarts”文件夾中會(huì)存在axure生成的html頁(yè)面和html頁(yè)面。同時(shí)，會(huì)自動(dòng)打開(kāi)一個(gè)html頁(yè)面，可查看效果，如下圖：

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

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

作者：魚(yú)日，公眾號(hào)：issnail

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

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