何通過圖標前端插件完成高級可視化圖表？筆者在此給出了詳細教程，與大家分享~~

后臺開發中避免不了實現一些可視化的圖表，主要制作的方法有四種：Excel表格截圖、Axure圖形繪制、Axure網頁框架和Axure第三方圖表元件。

第三個“Axure網頁框架”需要結合antv、echarts、HighCharts等前端可視化插件代碼。

第四個“Axure第三方圖表元件”，是由技術大佬開發的Axhub Charts圖表元件。但是圖表的元件數有限，適合快速搭建簡單的圖表，但是無法滿足我們更復雜的圖表設計。

因此，想要更高級的可視化圖表還是需要通過第三種方法實現。接下來，給大家詳細講解具體方法（此教程以echarts為例）：

ECharts是一款由百度前端技術部開發的，基于Javascript的數據可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。

具體實現方法

第一步

從左側【元件庫】拉入一個【內聯框架】作為可視化圖表的載體。如下所示：

第二步

1. 瀏覽器打開echarts的可視化圖表官網鏈接地址：https://www.echartsjs.com/examples/zh/index.html

2. 選擇符合你要求的可視化圖表，點擊進入編輯運行頁面：此教程以這個復雜的可視化案例講解，鏈接如下：https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest

圖形如下所示：

點擊右下角的【Download】將圖表的前端代碼下載下來，文件為pie-nest.html。再將此文件放在Axure源文件之前發布生成文件夾里面，如下所示：

你可以在代碼編輯器中修改成自己想要的數據指標以及數據項；

3. 雙擊【內聯框架】，選擇下面的【鏈接到url或文件】的選項，并將pie-nest.html鏈接輸入進去。如下所示：

第三步

雙擊文件夾中的index代碼文件，即可查看到剛才鏈接的可視化圖表效果。如下所示：

只能打開生成的文件夾中的對應頁面html文件，才能看到圖表。

如果從Axure源文件直接點擊右上角的【預覽】按鈕，是無法看到的。出現如下的情況：

教程源文件

百度云教程源文件：https://pan.baidu.com/s/1RRbsnVCp-CstfNL7iG5ILw

提取碼: ei5r

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

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

題圖來自Unsplash，基于CC0協議

1 模擬丁香園的高保真原型

在一般的開發工作之前，我們通常會設計產品原型，大部分為axure繪制的線框圖作為產品的PRD文檔，供UI和開發進行前期工作，但是有的時候客戶、領導想在開發之前，看到產品的概貌，就必須做產品的高保真原型進行模擬，這時如果做出來的原型能運行在手機端，那再好不過，如圖1(注：上圖是仿照丁香園的家庭用藥，做的一個高保真原型，算是免費給丁香園打廣告，是不是考慮給我點廣告費?哈哈)。

原型制作軟件有挺多，不過個人使用之后，最后還是依然堅持使用Axure,優點頗多，也可能是先入為主，這個教程Axure也是必須軟件之一，適配為iphone5s。

1、 首選是制作高保真原型，如圖2：

圖2 高保真的原型圖

(注：高保真原型最好不要用太多內部框架嵌套，加載速度有點慢，還是用動態面板慢慢做，層級多了要有耐心)

iOS的屏幕尺寸目前是有限的幾種，原型尺寸要和其一致。比如iphone5s視網膜下像素為640*1136(The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是說320*568已經可以鋪滿全屏，不過，由于Axure導出的原型在iOS上處理status bar時有問題，需要在高度上減去status bar的高度20，就為320*548，所以保證原型的高寬為320和548,如圖3整體高度為548px：

圖3 高寬為320*548

2、 F8進行生成設置，設置如下圖4：

圖4 配置設置

按照上圖，設置參數(注：不過閃屏頁面一直無法出現，這個問題我也沒得到解決，有解決的可以回復我)

3、生成原型文件，上傳到axureshare或者放置在EasyWebSevr的根目錄下，用本機IP替代電腦名稱，獲得完整路徑。(不清楚的點擊上期內容如何用EasyWebSvr搭建axure本地環境)

4、復制生成的html中原型鏈接，選擇without Sitemap,如圖5：

圖5 復制鏈接

5、在safari中粘貼鏈接，并打開，已經可以看到和屏幕寬度的界面，并添加到主屏幕，如圖6：。

圖6 添加到主屏幕

6、可以通過桌面的快捷icon，進入原型，這個時候已經適配了手機，躺著桌面的icon,絲毫不會讓人看得出是原型，下圖7：

圖7 test桌面icon快捷啟動

end!

我拿公司的產品原型按步驟做了下，可以實現的喲！還把公司程序員給忽悠了一下。小編給大家把細節補充一下：

1. 使用axureshare比EasyWebSevr要方便

2. 在得到鏈接后，需要使用iphone手機上的safari瀏覽器

3. 一定要記住你設置的文件密碼喲！訪問鏈接時需要輸入的。

文章來源：Axure中文網

小編微信：chizhenwei

章作者分享了一種基于設備模板的移動端原型設計方法，相信能夠對你的原型設計工作帶來幫助，值得馬克。

在使用Axure設計移動端原型的應用方面，我總結出了兩種常用的方法。第一種是更適合在移動端進行演示的設計方法，大家可以參考我之前已經分享過的一篇教程：使用Axure打造最佳的移動端交互原型教程，使用這種方法輸出的原型在手機設備上進行演示時可以達到跟真實APP幾乎一致的展示效果及交互體驗。在今天我將分享另外一種基于設備模板的移動端原型設計方法。

什么是基于設備模板的移動端原型設計方法？簡而言之就是在Axure的編輯界面中放置對應的機型模板，使輸出的原型達到更規范和真實的演示效果。其實這是一種很常見的移動端原型的設計方法，很多同行在設計原型的時候也都用過。這篇分享教程將對個設計方法進行了總結和梳理，并基于這個方法制作了一套可快速復用的模板。這套模板具有幾個方面的特點：

● 結構化，根據APP界面結構進行搭建；

● 標準化，非常方便進行編輯和維護；

● 高保真，可高度還原移動端交互效果；

在本篇分享的結尾我會提供模板的Axure源文件下載，其中包含了最新的IPhoneX和IPhone8等多套IOS設備機型，以及一些常見的界面元素和交互效果。在開始正式的介紹之前，大家可以查看使用這套模板還原IOS中兩款官方應用的設計演示。

IOS11 AppStroe For iPhoneX 原型演示

IOS11 Contacts For iPhone8 原型演示

1.界面元素和結構介紹

由于這套模板是基于IOS系統進行設計的，所以相關界面元素和交互方式均以IOS為標準。目前主流的移動端系統除了IOS還有Android，這兩種系統設計標準和交互方式其實是存在一些差異的，不過目前市面上大部分APP在設計時并沒有爭對兩種系統做單獨的處理。

所以如果沒有特珠需求的話，我們一般也只需要輸出一套原型方案就可以了，不過設計過程中需要盡量兼顧這兩個主流的系統。當然，如果你的產品明確需要按照Android的系統規范來設計，你也可以參照本教程設計一套Android的原型模板，相關交互方式可以參照Android版的交互指南規范。

在開始介紹模板的搭建和使用方法之前，需要先對APP的界面結構做一個簡單的介紹，熟悉了界面結構可以方便我們后續的設計。常見APP的界面主要由以下元素或組件組成：

StatusBar / 狀態欄

狀態欄顯示設備的關鍵信息，包含設備模型或網絡提供商、網絡信號強度、電池使用量、時間等。在特殊界面中可以對狀態欄做隱藏處理，或根據需要自定義狀態欄背景。

NavBar / 導航欄

導航欄位于app內容區的上方，系統狀態欄的下方，并且提供在一系列頁面中的導航能力?？稍趯Ш綑谥酗@示當前視圖的標題，如果標題非常冗長且無法精簡，可以空缺，避免用過多的元素填滿導航欄。導航欄中可以添加文字和圖標控件，相關控件的可點擊區域需要大于控件的可視大小。

Body / 內容區

內容區域根據需要進行自定義設計，常見的設計形式有菜單列表、圖標列表、卡片列表、圖文組合等。

TabBar / 標簽欄

標簽欄位于APP底部，方便用戶在不同功能模塊之間進行快速切換。標簽欄一般用作APP的一級分類，數量控制在3-5個之間。建議使用Badge進行提示，讓用戶知道有內容更新。

Toolbar / 工具欄

工具欄一般會出現在視圖的的底部，提供給用戶相關可操作的功能按紐。如，郵件應用程序里的收件箱欄中有刪除、分享、答復等等。

Modal / 彈出層

移動端的彈出層根據彈出方式不同，共分為模態窗口、動作面板、彈出面板等幾種不同的類型。在實際使用中，可根據界面的交互方式選擇對應的類型。

Toast / 輕提示

一種輕量級反饋提示，可以用來顯示不會打斷用戶操作的內容，適合用于頁面轉場、數據交互的等場景中。一次只顯示一個輕提示，有圖標的提示字數為4-6個，沒有圖標的輕提示字數不宜超過14個。

TableView / 列表視圖

列表視圖是移動端APP中一種通用的界面元素。很多應用程序在一定程度上，都有使用表視圖來顯示數據列表。常見的例如IOS的聯系人應用中聯系人信息列表，另外還有Mail中使用列表視圖顯示郵箱和郵件。列表視圖不僅可以用來顯示文本數據，也可以用來呈現圖像數據。

以上是豆瓣APP的一個界面截圖示例，界面的結構用顏色進行了區分，從上至下分別為：狀態欄、導航欄、內容區、標簽欄。

2.結構化的模板搭建

在介紹完APP的界面結構之后，接下來說明一下模板的搭建方法。在本篇教程的結尾會提供了已經制作好的模板的文件，大家可以下載并參考本部分介紹進行使用，也可以參照介紹制作自己的原型模板。

在制作模板時需要用到對應的機型設備的圖片素材，可以通過Dribbble等設計分享平臺找到對應的素材文件，然后對素材做一些簡單的處理。處理的過程首先是去掉多余的元素，只保留機型設備的框架圖片。另外還需要對圖片的尺寸進行調整，例如在制作手機等移動端模板時我們將內容區域定為375px，需要根據所定的內容區域對圖片的尺寸進行相應的調整。

為什么模板的內容區域是375px？這個問題我在上篇教程中進行過介紹，所以不再進行展開說明。但是需要記住的這個尺寸是一個重要的標準，后續在設計過程中相關元件的寬度尺寸都需要參照這個標準。機型設備的圖片素材準備好之后，我們在Axure中創建一個對應的母版，然后將機型設備圖片拖入到母版中。母版的名稱可以按該機型設備的名稱命名，后面在使用時在新建的頁面中拖入該母版即可。

下一步需要創建前面介紹過的APP界面中常見元素或組件，首先大家可以看一下這張圖片中已經創建好的模板，其中包含了機型母版、輕提示、彈層、導航欄、標簽欄、內容框架等元素。

在這個模板頁面的概要視圖中可以看到相關的對象，所有對象我都創建了一個對應的動態面板。這樣的處理主要出于兩個方面的考慮，一是方便對相關元素進行編輯維護，二是相關對象的顯示是有順序的，這樣可以方便在概要視圖中進行排序處理。

3.模板使用細節說明；

在內容框架中編輯界面內容；

界面的主要內容在內容框架動態面板中進行編輯和維護，由于該動態面板設置了自動顯示滾動條，如果你的界面內容超出了一屏，在演示時可以通過在內容框架區域滾動鼠標滾輪查看更多內容。

關于模板界面元素的尺寸說明：

模板中的界面元素的尺寸并沒有非常嚴格的標準，以下尺寸是我根據比例進行設置的，僅供參考。IphoneX狀態欄：44px、IphoneX標簽欄：80px、Iphone8狀態欄：28px、IphoneX標簽欄：60px、導航欄：40px。另外，內容區域的高度因為機型設備的素材圖片不統一可能略有差異，基本上可以忽略。

每個界面對應一個頁面；

在設計原型時建議每一個界面創建一個對應的頁面，通過添加頁面鏈接進行界面跳轉，這樣方便對原型進行編輯和維護。不建議將多個界面用動態面板堆砌在一起頁面內，這樣會使輸出的原型在演示時出現卡頓現象。

關于元素的層級順序；

在概要視圖中可以看到相關元素對應動態面板的層級順序，在使用該模板的時候請盡量參照此順序，否則可能在演示時出現顯示錯誤的情況。

關于底部標簽欄的設置；

為了方便維護可以將標簽欄創建為母版，然后添加到需要顯示標簽欄的頁面中。另外，在對應的頁面中需要顯示對應的標簽選中效果，只需要在該頁面中的標簽欄動態面板中添加一個選中效果的標簽元件。

熱區占位符的使用；

如果頁面中添加了標簽欄或工具欄，由于標簽頁的動態面板在內容框架的動態面板之上，在演示時會出現內容有一部分被擋住的情況?？梢詣摻ㄒ粋€高度為100px的熱區元件為母版，將母版拖入對應的頁面底部，用來解決內容區域被擋住的問題。

4.常用設計元素及規范

經常有朋友向我咨詢如何設計出更漂亮美觀的原型，雖然原則上原型能完整的體現出需求細節即可，好看并不是我們在原型輸出時應該關注的重點，但是如果能滿足說明需求的同時能把原型做得更漂亮一些更好，這也算是體現專業程度和工作態度的一個方面，而且很多人對自己的輸出物也是有強烈的美感追求的。

其實原型設計不需要了解太復雜的設計方法，只要掌握一點簡單的技巧就能達到美觀的效果，同時能讓整體更統一和標準。在分享的這套模板中包含了一些基本的設計元素，我下面對其中的一些規范細節進行說明，供大家進行參考。

配色方案

• ◆ 一般采用黑白灰的配色方案就能夠滿足基本設計要求了，但是如果能稍微得加上一些亮色的配色效果，可以使原型更好的體現出視覺層級，這對UI是有一定的參考價值的。不要感覺得配色效果能夠影響UI的設計，如果UI會被原型中的配色影響，只能說明UI的設計能力有待提升；
• 整套原型中亮色主色調不要超過兩個，對于主要按紐和重點提示可以加上主色調色值，次要元素統一使用#000000、#333333、#999999等灰色輔助色；
• ◆ 模板中的這套模板方案中的主色調是從IOS11的UI設計規范中提取的，你可以根據自己的需要整理一套自己的配色方案，建議盡量使用扁平化設計色值；

配色板使用

Axure中的配色板提供了一些常用的顏色色值，可用作一些常用元素的顏色配色。例如截圖中標注1中的縱向的灰色色值可用于相關字體元素的顏色，標注2中橫向的灰色色值可用于相關元素的背景和線條的顏色。另外，點擊標注3中的更多按紐，可以將其它的常用色值加入到自定義顏色中，方便快速的使用。

字體元素

• ◆ 原型設計時的字體字號建議統一使用偶數，常用的標題字號為16px、18px、20px，常用的正文字號為12px、14px；
• 針對不同字體大小的多行文本單獨設置對應的行間距，例如12px的多行文本行間距建議設置為20，14px的多行文本行間距建議設置為28；
• 推薦中文字體統一使用微軟雅黑，由于Axure的默認字體為Arial，可以通過生成HTML設置中的字體映射，將Arial映射為微軟雅黑，這樣就不需要在設計時去單獨設置每個元件的字體了。

其它元素

• ◆ 原型設計時元件的寬度建議統一保持為5和10的倍數，元件的間距建議為10px或20px；
• ◆ 使用鍵盤方向鍵移動選中的元件時每次移動距離為1px ，使用ctrl+鍵盤方向鍵每次移動距離為10px；
• ◆ 按住Ctrl+鼠標拖動可以快速的復制元件，按住Shift+鼠標拖動可以垂直或水平的移動元件；

對齊及分布工具使用

• 有對齊強迫癥的朋友可以使用頂部工具欄中的對齊及分布工具對元件進行處理，右擊頂部的工具欄區◆ 域可以自定義顯示或隱藏相關的工具圖標；
• 選中多個元件時可以使用對齊工具快速的對多個元件進行各種對齊處理，還可以使用分布工具快速的對多個元件進行垂直或水平分布處理；

5.使用輔助線進行排版；

在以前的教程中已經介紹過輔助線的使用方法，合理的使用輔助線可以幫助我們提升設計效率，同時能讓輸出的原型效果更標準，所以強烈建議大家在設計過程中使用。以下是模板中內容框架編輯區域的截圖，是我常用使用輔助線用來排版的方式。截圖中的輔助線均為橫向x軸輔助線，可以看到其中共有4條，分別介紹一下它們的作用和位置：

• 第1條輔助線是用來劃分左邊的內容留白區域，例如我一般習慣將左邊留白為20px，這條輔助線位于x軸的20px位置。
• 第2條輔助線是內容居中輔助線，之前已經介紹過模板的設計寬度標準為375px，這條輔助線位于x軸的188px位置；（375px/2=187.5px）
• 第3條輔助線用來劃分右邊的內容留白區域，例如右邊跟左邊留白一樣為20px，這條輔助線位于x軸的355px位置；(375px-20px=355px)
• 第4條輔助線是用來劃分內容設計區域，例如模板的設計寬度標準為375px，這條輔助線位于位于x軸的375px位置；

這些輔助線的用法只是作為參考，可以根據自己的需要新建對應的輔助線。鼠標光標移動到編輯區域的左側和頂部的標尺區域，按住鼠標左鍵并往編輯區域拖動時，就可以生成橫向x軸或縱向y軸的輔助線，然后將輔助線拖動到對應的位置即可。輔助線還有一個特性就是當拖動元件靠近它時，元件會自動吸附到輔助線的邊緣達到快速對齊的效果。

幾點輔助線的使用小技巧：

• 右擊輔助線可以將其鎖定，以防止拖動元件時會將輔助線會跟著一起移動；
• 可以通過按住Ctrl拖動創建全局輔助線，全局輔助線就是在所有頁面中產生一條相同的輔助線；
• 在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態且無法刪除；
• 在“布局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線；
• 在“布局—柵格和輔助線—輔助線設置”中可以修改輔助線的顏色或進行更多設置；

6.Toast提示交互設置；

移動端原型中最常用的交互效果就是彈出層和輕提示兩種，模板中已經包含了這種兩交互效果的相關元件和事件，這里再單獨簡單的介紹一下。

Toast提示顯示效果

在模板頁面的概要視圖中可以看到名為“提示”的動態面板，需要顯示的提示信息在這個動態面板中編輯就可以了。當前的動態面板中有一個“操作成功”的提示狀態，如果在一個頁面中顯示多個提示，可以新增對應的狀態然后修改相關的提示內容。

選中提示的動態面板的狀態右擊選擇復制狀態可以快速創建新的提示。建議對每個對應的提示狀態進行命名，這樣方便后續進行管理。關于輕提示的基本使用規范請參照前面的介紹內容。

Toast提示的顯示方式設置很簡單，只需要在對應的元件事件上加入以上的交互動作。首先設置提示動態面板中對應的狀態，然后設置顯示動態面板，顯示時有一個逐漸的動畫效果。

Toast提示顯示以后會在3秒后自動逐漸隱藏，模板中的這個交互動作已經加在提示動態面板的顯示時事件中了，不需要再單獨的進行設置。

7.常用彈層交互設置

模態窗口交互效果

移動端的彈層共分為模態窗口、動作面板、彈出面板等幾種不同的類型。在模板頁面的概要視圖中可以看到名為“彈層”的動態面板，可以根據需要創建更多其它的彈層狀態，還能在對應的面板狀態屬性中設置透明背景的遮罩效果。

上面截圖中的為比較常見的模態窗口彈層效果，設置方式是在對應的元件事件上加入以上的交互動作。另外，根據模態窗口、動作面板、彈出面板這幾種彈層類型的彈出方式不同，需要設置顯示時為向上滑動和逐步等動畫效果。

8.導航欄切換交互設置

最后介紹一下如何實現內容區域滾動時，導航欄自動切換的交互效果。首先需要在導航欄的動態面板中創建對應的狀態，然后選中內容框架動態面板，在它的滾動時事件中按照上面的格式加入對應的條件判斷即可。

在這個設置用到了條件判斷和函數，條件的詳細設置見上方的截圖。它的原理是當內容框架垂直滾動高度大于70時設置導航欄動態面板的顯示狀態為2，當內容框架垂直滾動高度大小于70設置導航欄動態面板的顯示狀態為1。其中用到的This.scrollY函數是獲取當前元件的直滾動高度，70的值可以根據需要自己設置。

好了，到此這篇基于設備模板的移動端原型設計方法的分享基本介紹完了。最后提供的是iPhoneX And iPhone8 Mockup 原型模板的源文件下載，大家可以結合本文中的相關介紹進行使用。

最后再給大家分享一套本人整理設計的移動端元件庫，這套元件庫中的相關元件是可以在這個模板中復用的，后續也會不斷的進行優化和完善，有需要的朋友可以關注一下。