整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
何通過圖標(biāo)前端插件完成高級可視化圖表？筆者在此給出了詳細(xì)教程，與大家分享~~
后臺開發(fā)中避免不了實(shí)現(xiàn)一些可視化的圖表，主要制作的方法有四種：Excel表格截圖、Axure圖形繪制、Axure網(wǎng)頁框架和Axure第三方圖表元件。
第三個“Axure網(wǎng)頁框架”需要結(jié)合antv、echarts、HighCharts等前端可視化插件代碼。
第四個“Axure第三方圖表元件”，是由技術(shù)大佬開發(fā)的Axhub Charts圖表元件。但是圖表的元件數(shù)有限，適合快速搭建簡單的圖表，但是無法滿足我們更復(fù)雜的圖表設(shè)計(jì)。
因此，想要更高級的可視化圖表還是需要通過第三種方法實(shí)現(xiàn)。接下來，給大家詳細(xì)講解具體方法（此教程以echarts為例）：
ECharts是一款由百度前端技術(shù)部開發(fā)的，基于Javascript的數(shù)據(jù)可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。
從左側(cè)【元件庫】拉入一個【內(nèi)聯(lián)框架】作為可視化圖表的載體。如下所示：
1. 瀏覽器打開echarts的可視化圖表官網(wǎng)鏈接地址：https://www.echartsjs.com/examples/zh/index.html
2. 選擇符合你要求的可視化圖表，點(diǎn)擊進(jìn)入編輯運(yùn)行頁面：此教程以這個復(fù)雜的可視化案例講解，鏈接如下：https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest
圖形如下所示：
點(diǎn)擊右下角的【Download】將圖表的前端代碼下載下來，文件為pie-nest.html。再將此文件放在Axure源文件之前發(fā)布生成文件夾里面，如下所示：
你可以在代碼編輯器中修改成自己想要的數(shù)據(jù)指標(biāo)以及數(shù)據(jù)項(xiàng)；
3. 雙擊【內(nèi)聯(lián)框架】，選擇下面的【鏈接到url或文件】的選項(xiàng)，并將pie-nest.html鏈接輸入進(jìn)去。如下所示：
雙擊文件夾中的index代碼文件，即可查看到剛才鏈接的可視化圖表效果。如下所示：
只能打開生成的文件夾中的對應(yīng)頁面html文件，才能看到圖表。
如果從Axure源文件直接點(diǎn)擊右上角的【預(yù)覽】按鈕，是無法看到的。出現(xiàn)如下的情況：
百度云教程源文件：https://pan.baidu.com/s/1RRbsnVCp-CstfNL7iG5ILw
提取碼: ei5r
作者：火星人～艾斯，公眾號：艾斯的Axure峽谷
本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
1 模擬丁香園的高保真原型
在一般的開發(fā)工作之前，我們通常會設(shè)計(jì)產(chǎn)品原型，大部分為axure繪制的線框圖作為產(chǎn)品的PRD文檔，供UI和開發(fā)進(jìn)行前期工作，但是有的時候客戶、領(lǐng)導(dǎo)想在開發(fā)之前，看到產(chǎn)品的概貌，就必須做產(chǎn)品的高保真原型進(jìn)行模擬，這時如果做出來的原型能運(yùn)行在手機(jī)端，那再好不過，如圖1(注：上圖是仿照丁香園的家庭用藥，做的一個高保真原型，算是免費(fèi)給丁香園打廣告，是不是考慮給我點(diǎn)廣告費(fèi)?哈哈)。
原型制作軟件有挺多，不過個人使用之后，最后還是依然堅(jiān)持使用Axure,優(yōu)點(diǎn)頗多，也可能是先入為主，這個教程Axure也是必須軟件之一，適配為iphone5s。
1、 首選是制作高保真原型，如圖2：
圖2 高保真的原型圖
(注：高保真原型最好不要用太多內(nèi)部框架嵌套，加載速度有點(diǎn)慢，還是用動態(tài)面板慢慢做，層級多了要有耐心)
iOS的屏幕尺寸目前是有限的幾種，原型尺寸要和其一致。比如iphone5s視網(wǎng)膜下像素為640*1136(The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是說320*568已經(jīng)可以鋪滿全屏，不過，由于Axure導(dǎo)出的原型在iOS上處理status bar時有問題，需要在高度上減去status bar的高度20，就為320*548，所以保證原型的高寬為320和548,如圖3整體高度為548px：
圖3 高寬為320*548
2、 F8進(jìn)行生成設(shè)置，設(shè)置如下圖4：
圖4 配置設(shè)置
按照上圖，設(shè)置參數(shù)(注：不過閃屏頁面一直無法出現(xiàn)，這個問題我也沒得到解決，有解決的可以回復(fù)我)
3、生成原型文件，上傳到axureshare或者放置在EasyWebSevr的根目錄下，用本機(jī)IP替代電腦名稱，獲得完整路徑。(不清楚的點(diǎn)擊上期內(nèi)容如何用EasyWebSvr搭建axure本地環(huán)境)
4、復(fù)制生成的html中原型鏈接，選擇without Sitemap,如圖5：
圖5 復(fù)制鏈接
5、在safari中粘貼鏈接，并打開，已經(jīng)可以看到和屏幕寬度的界面，并添加到主屏幕，如圖6：。
圖6 添加到主屏幕
6、可以通過桌面的快捷icon，進(jìn)入原型，這個時候已經(jīng)適配了手機(jī)，躺著桌面的icon,絲毫不會讓人看得出是原型，下圖7：
圖7 test桌面icon快捷啟動
end!
我拿公司的產(chǎn)品原型按步驟做了下，可以實(shí)現(xiàn)的喲！還把公司程序員給忽悠了一下。小編給大家把細(xì)節(jié)補(bǔ)充一下：
1. 使用axureshare比EasyWebSevr要方便
2. 在得到鏈接后，需要使用iphone手機(jī)上的safari瀏覽器
3. 一定要記住你設(shè)置的文件密碼喲！訪問鏈接時需要輸入的。
文章來源：Axure中文網(wǎng)
小編微信：chizhenwei
章作者分享了一種基于設(shè)備模板的移動端原型設(shè)計(jì)方法，相信能夠?qū)δ愕脑驮O(shè)計(jì)工作帶來幫助，值得馬克。
在使用Axure設(shè)計(jì)移動端原型的應(yīng)用方面，我總結(jié)出了兩種常用的方法。第一種是更適合在移動端進(jìn)行演示的設(shè)計(jì)方法，大家可以參考我之前已經(jīng)分享過的一篇教程：使用Axure打造最佳的移動端交互原型教程，使用這種方法輸出的原型在手機(jī)設(shè)備上進(jìn)行演示時可以達(dá)到跟真實(shí)APP幾乎一致的展示效果及交互體驗(yàn)。在今天我將分享另外一種基于設(shè)備模板的移動端原型設(shè)計(jì)方法。
什么是基于設(shè)備模板的移動端原型設(shè)計(jì)方法？簡而言之就是在Axure的編輯界面中放置對應(yīng)的機(jī)型模板，使輸出的原型達(dá)到更規(guī)范和真實(shí)的演示效果。其實(shí)這是一種很常見的移動端原型的設(shè)計(jì)方法，很多同行在設(shè)計(jì)原型的時候也都用過。這篇分享教程將對個設(shè)計(jì)方法進(jìn)行了總結(jié)和梳理，并基于這個方法制作了一套可快速復(fù)用的模板。這套模板具有幾個方面的特點(diǎn)：
● 結(jié)構(gòu)化，根據(jù)APP界面結(jié)構(gòu)進(jìn)行搭建；
● 標(biāo)準(zhǔn)化，非常方便進(jìn)行編輯和維護(hù)；
● 高保真，可高度還原移動端交互效果；
在本篇分享的結(jié)尾我會提供模板的Axure源文件下載，其中包含了最新的IPhoneX和IPhone8等多套IOS設(shè)備機(jī)型，以及一些常見的界面元素和交互效果。在開始正式的介紹之前，大家可以查看使用這套模板還原IOS中兩款官方應(yīng)用的設(shè)計(jì)演示。
由于這套模板是基于IOS系統(tǒng)進(jìn)行設(shè)計(jì)的，所以相關(guān)界面元素和交互方式均以IOS為標(biāo)準(zhǔn)。目前主流的移動端系統(tǒng)除了IOS還有Android，這兩種系統(tǒng)設(shè)計(jì)標(biāo)準(zhǔn)和交互方式其實(shí)是存在一些差異的，不過目前市面上大部分APP在設(shè)計(jì)時并沒有爭對兩種系統(tǒng)做單獨(dú)的處理。
所以如果沒有特珠需求的話，我們一般也只需要輸出一套原型方案就可以了，不過設(shè)計(jì)過程中需要盡量兼顧這兩個主流的系統(tǒng)。當(dāng)然，如果你的產(chǎn)品明確需要按照Android的系統(tǒng)規(guī)范來設(shè)計(jì)，你也可以參照本教程設(shè)計(jì)一套Android的原型模板，相關(guān)交互方式可以參照Android版的交互指南規(guī)范。
在開始介紹模板的搭建和使用方法之前，需要先對APP的界面結(jié)構(gòu)做一個簡單的介紹，熟悉了界面結(jié)構(gòu)可以方便我們后續(xù)的設(shè)計(jì)。常見APP的界面主要由以下元素或組件組成：
狀態(tài)欄顯示設(shè)備的關(guān)鍵信息，包含設(shè)備模型或網(wǎng)絡(luò)提供商、網(wǎng)絡(luò)信號強(qiáng)度、電池使用量、時間等。在特殊界面中可以對狀態(tài)欄做隱藏處理，或根據(jù)需要自定義狀態(tài)欄背景。
導(dǎo)航欄位于app內(nèi)容區(qū)的上方，系統(tǒng)狀態(tài)欄的下方，并且提供在一系列頁面中的導(dǎo)航能力。可在導(dǎo)航欄中顯示當(dāng)前視圖的標(biāo)題，如果標(biāo)題非常冗長且無法精簡，可以空缺，避免用過多的元素填滿導(dǎo)航欄。導(dǎo)航欄中可以添加文字和圖標(biāo)控件，相關(guān)控件的可點(diǎn)擊區(qū)域需要大于控件的可視大小。
內(nèi)容區(qū)域根據(jù)需要進(jìn)行自定義設(shè)計(jì)，常見的設(shè)計(jì)形式有菜單列表、圖標(biāo)列表、卡片列表、圖文組合等。
標(biāo)簽欄位于APP底部，方便用戶在不同功能模塊之間進(jìn)行快速切換。標(biāo)簽欄一般用作APP的一級分類，數(shù)量控制在3-5個之間。建議使用Badge進(jìn)行提示，讓用戶知道有內(nèi)容更新。
工具欄一般會出現(xiàn)在視圖的的底部，提供給用戶相關(guān)可操作的功能按紐。如，郵件應(yīng)用程序里的收件箱欄中有刪除、分享、答復(fù)等等。
移動端的彈出層根據(jù)彈出方式不同，共分為模態(tài)窗口、動作面板、彈出面板等幾種不同的類型。在實(shí)際使用中，可根據(jù)界面的交互方式選擇對應(yīng)的類型。
一種輕量級反饋提示，可以用來顯示不會打斷用戶操作的內(nèi)容，適合用于頁面轉(zhuǎn)場、數(shù)據(jù)交互的等場景中。一次只顯示一個輕提示，有圖標(biāo)的提示字?jǐn)?shù)為4-6個，沒有圖標(biāo)的輕提示字?jǐn)?shù)不宜超過14個。
列表視圖是移動端APP中一種通用的界面元素。很多應(yīng)用程序在一定程度上，都有使用表視圖來顯示數(shù)據(jù)列表。常見的例如IOS的聯(lián)系人應(yīng)用中聯(lián)系人信息列表，另外還有Mail中使用列表視圖顯示郵箱和郵件。列表視圖不僅可以用來顯示文本數(shù)據(jù)，也可以用來呈現(xiàn)圖像數(shù)據(jù)。
以上是豆瓣APP的一個界面截圖示例，界面的結(jié)構(gòu)用顏色進(jìn)行了區(qū)分，從上至下分別為：狀態(tài)欄、導(dǎo)航欄、內(nèi)容區(qū)、標(biāo)簽欄。
在介紹完APP的界面結(jié)構(gòu)之后，接下來說明一下模板的搭建方法。在本篇教程的結(jié)尾會提供了已經(jīng)制作好的模板的文件，大家可以下載并參考本部分介紹進(jìn)行使用，也可以參照介紹制作自己的原型模板。
在制作模板時需要用到對應(yīng)的機(jī)型設(shè)備的圖片素材，可以通過Dribbble等設(shè)計(jì)分享平臺找到對應(yīng)的素材文件，然后對素材做一些簡單的處理。處理的過程首先是去掉多余的元素，只保留機(jī)型設(shè)備的框架圖片。另外還需要對圖片的尺寸進(jìn)行調(diào)整，例如在制作手機(jī)等移動端模板時我們將內(nèi)容區(qū)域定為375px，需要根據(jù)所定的內(nèi)容區(qū)域?qū)D片的尺寸進(jìn)行相應(yīng)的調(diào)整。
為什么模板的內(nèi)容區(qū)域是375px？這個問題我在上篇教程中進(jìn)行過介紹，所以不再進(jìn)行展開說明。但是需要記住的這個尺寸是一個重要的標(biāo)準(zhǔn)，后續(xù)在設(shè)計(jì)過程中相關(guān)元件的寬度尺寸都需要參照這個標(biāo)準(zhǔn)。機(jī)型設(shè)備的圖片素材準(zhǔn)備好之后，我們在Axure中創(chuàng)建一個對應(yīng)的母版，然后將機(jī)型設(shè)備圖片拖入到母版中。母版的名稱可以按該機(jī)型設(shè)備的名稱命名，后面在使用時在新建的頁面中拖入該母版即可。
下一步需要創(chuàng)建前面介紹過的APP界面中常見元素或組件，首先大家可以看一下這張圖片中已經(jīng)創(chuàng)建好的模板，其中包含了機(jī)型母版、輕提示、彈層、導(dǎo)航欄、標(biāo)簽欄、內(nèi)容框架等元素。
在這個模板頁面的概要視圖中可以看到相關(guān)的對象，所有對象我都創(chuàng)建了一個對應(yīng)的動態(tài)面板。這樣的處理主要出于兩個方面的考慮，一是方便對相關(guān)元素進(jìn)行編輯維護(hù)，二是相關(guān)對象的顯示是有順序的，這樣可以方便在概要視圖中進(jìn)行排序處理。
界面的主要內(nèi)容在內(nèi)容框架動態(tài)面板中進(jìn)行編輯和維護(hù)，由于該動態(tài)面板設(shè)置了自動顯示滾動條，如果你的界面內(nèi)容超出了一屏，在演示時可以通過在內(nèi)容框架區(qū)域滾動鼠標(biāo)滾輪查看更多內(nèi)容。
模板中的界面元素的尺寸并沒有非常嚴(yán)格的標(biāo)準(zhǔn)，以下尺寸是我根據(jù)比例進(jìn)行設(shè)置的，僅供參考。IphoneX狀態(tài)欄：44px、IphoneX標(biāo)簽欄：80px、Iphone8狀態(tài)欄：28px、IphoneX標(biāo)簽欄：60px、導(dǎo)航欄：40px。另外，內(nèi)容區(qū)域的高度因?yàn)闄C(jī)型設(shè)備的素材圖片不統(tǒng)一可能略有差異，基本上可以忽略。
在設(shè)計(jì)原型時建議每一個界面創(chuàng)建一個對應(yīng)的頁面，通過添加頁面鏈接進(jìn)行界面跳轉(zhuǎn)，這樣方便對原型進(jìn)行編輯和維護(hù)。不建議將多個界面用動態(tài)面板堆砌在一起頁面內(nèi)，這樣會使輸出的原型在演示時出現(xiàn)卡頓現(xiàn)象。
在概要視圖中可以看到相關(guān)元素對應(yīng)動態(tài)面板的層級順序，在使用該模板的時候請盡量參照此順序，否則可能在演示時出現(xiàn)顯示錯誤的情況。
為了方便維護(hù)可以將標(biāo)簽欄創(chuàng)建為母版，然后添加到需要顯示標(biāo)簽欄的頁面中。另外，在對應(yīng)的頁面中需要顯示對應(yīng)的標(biāo)簽選中效果，只需要在該頁面中的標(biāo)簽欄動態(tài)面板中添加一個選中效果的標(biāo)簽元件。
如果頁面中添加了標(biāo)簽欄或工具欄，由于標(biāo)簽頁的動態(tài)面板在內(nèi)容框架的動態(tài)面板之上，在演示時會出現(xiàn)內(nèi)容有一部分被擋住的情況。可以創(chuàng)建一個高度為100px的熱區(qū)元件為母版，將母版拖入對應(yīng)的頁面底部，用來解決內(nèi)容區(qū)域被擋住的問題。
經(jīng)常有朋友向我咨詢?nèi)绾卧O(shè)計(jì)出更漂亮美觀的原型，雖然原則上原型能完整的體現(xiàn)出需求細(xì)節(jié)即可，好看并不是我們在原型輸出時應(yīng)該關(guān)注的重點(diǎn)，但是如果能滿足說明需求的同時能把原型做得更漂亮一些更好，這也算是體現(xiàn)專業(yè)程度和工作態(tài)度的一個方面，而且很多人對自己的輸出物也是有強(qiáng)烈的美感追求的。
其實(shí)原型設(shè)計(jì)不需要了解太復(fù)雜的設(shè)計(jì)方法，只要掌握一點(diǎn)簡單的技巧就能達(dá)到美觀的效果，同時能讓整體更統(tǒng)一和標(biāo)準(zhǔn)。在分享的這套模板中包含了一些基本的設(shè)計(jì)元素，我下面對其中的一些規(guī)范細(xì)節(jié)進(jìn)行說明，供大家進(jìn)行參考。
Axure中的配色板提供了一些常用的顏色色值，可用作一些常用元素的顏色配色。例如截圖中標(biāo)注1中的縱向的灰色色值可用于相關(guān)字體元素的顏色，標(biāo)注2中橫向的灰色色值可用于相關(guān)元素的背景和線條的顏色。另外，點(diǎn)擊標(biāo)注3中的更多按紐，可以將其它的常用色值加入到自定義顏色中，方便快速的使用。
在以前的教程中已經(jīng)介紹過輔助線的使用方法，合理的使用輔助線可以幫助我們提升設(shè)計(jì)效率，同時能讓輸出的原型效果更標(biāo)準(zhǔn)，所以強(qiáng)烈建議大家在設(shè)計(jì)過程中使用。以下是模板中內(nèi)容框架編輯區(qū)域的截圖，是我常用使用輔助線用來排版的方式。截圖中的輔助線均為橫向x軸輔助線，可以看到其中共有4條，分別介紹一下它們的作用和位置：
這些輔助線的用法只是作為參考，可以根據(jù)自己的需要新建對應(yīng)的輔助線。鼠標(biāo)光標(biāo)移動到編輯區(qū)域的左側(cè)和頂部的標(biāo)尺區(qū)域，按住鼠標(biāo)左鍵并往編輯區(qū)域拖動時，就可以生成橫向x軸或縱向y軸的輔助線，然后將輔助線拖動到對應(yīng)的位置即可。輔助線還有一個特性就是當(dāng)拖動元件靠近它時，元件會自動吸附到輔助線的邊緣達(dá)到快速對齊的效果。
移動端原型中最常用的交互效果就是彈出層和輕提示兩種，模板中已經(jīng)包含了這種兩交互效果的相關(guān)元件和事件，這里再單獨(dú)簡單的介紹一下。
在模板頁面的概要視圖中可以看到名為“提示”的動態(tài)面板，需要顯示的提示信息在這個動態(tài)面板中編輯就可以了。當(dāng)前的動態(tài)面板中有一個“操作成功”的提示狀態(tài)，如果在一個頁面中顯示多個提示，可以新增對應(yīng)的狀態(tài)然后修改相關(guān)的提示內(nèi)容。
選中提示的動態(tài)面板的狀態(tài)右擊選擇復(fù)制狀態(tài)可以快速創(chuàng)建新的提示。建議對每個對應(yīng)的提示狀態(tài)進(jìn)行命名，這樣方便后續(xù)進(jìn)行管理。關(guān)于輕提示的基本使用規(guī)范請參照前面的介紹內(nèi)容。
Toast提示的顯示方式設(shè)置很簡單，只需要在對應(yīng)的元件事件上加入以上的交互動作。首先設(shè)置提示動態(tài)面板中對應(yīng)的狀態(tài)，然后設(shè)置顯示動態(tài)面板，顯示時有一個逐漸的動畫效果。
Toast提示顯示以后會在3秒后自動逐漸隱藏，模板中的這個交互動作已經(jīng)加在提示動態(tài)面板的顯示時事件中了，不需要再單獨(dú)的進(jìn)行設(shè)置。
移動端的彈層共分為模態(tài)窗口、動作面板、彈出面板等幾種不同的類型。在模板頁面的概要視圖中可以看到名為“彈層”的動態(tài)面板，可以根據(jù)需要創(chuàng)建更多其它的彈層狀態(tài)，還能在對應(yīng)的面板狀態(tài)屬性中設(shè)置透明背景的遮罩效果。
上面截圖中的為比較常見的模態(tài)窗口彈層效果，設(shè)置方式是在對應(yīng)的元件事件上加入以上的交互動作。另外，根據(jù)模態(tài)窗口、動作面板、彈出面板這幾種彈層類型的彈出方式不同，需要設(shè)置顯示時為向上滑動和逐步等動畫效果。
最后介紹一下如何實(shí)現(xiàn)內(nèi)容區(qū)域滾動時，導(dǎo)航欄自動切換的交互效果。首先需要在導(dǎo)航欄的動態(tài)面板中創(chuàng)建對應(yīng)的狀態(tài)，然后選中內(nèi)容框架動態(tài)面板，在它的滾動時事件中按照上面的格式加入對應(yīng)的條件判斷即可。
在這個設(shè)置用到了條件判斷和函數(shù)，條件的詳細(xì)設(shè)置見上方的截圖。它的原理是當(dāng)內(nèi)容框架垂直滾動高度大于70時設(shè)置導(dǎo)航欄動態(tài)面板的顯示狀態(tài)為2，當(dāng)內(nèi)容框架垂直滾動高度大小于70設(shè)置導(dǎo)航欄動態(tài)面板的顯示狀態(tài)為1。其中用到的This.scrollY函數(shù)是獲取當(dāng)前元件的直滾動高度，70的值可以根據(jù)需要自己設(shè)置。
好了，到此這篇基于設(shè)備模板的移動端原型設(shè)計(jì)方法的分享基本介紹完了。最后提供的是iPhoneX And iPhone8 Mockup 原型模板的源文件下載，大家可以結(jié)合本文中的相關(guān)介紹進(jìn)行使用。
最后再給大家分享一套本人整理設(shè)計(jì)的移動端元件庫，這套元件庫中的相關(guān)元件是可以在這個模板中復(fù)用的，后續(xù)也會不斷的進(jìn)行優(yōu)化和完善，有需要的朋友可以關(guān)注一下。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
