整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：如何使用Axure去獲取頁面尺寸，并且使內聯框架自適應大小呢？本文作者通過實際操作，進行了記錄總結，希望看后對你有所幫助。
今天要演示的東西其實很簡單，一兩分鐘就能做完，主要是用來彌補Axure IDE提供的交互功能中的不足，導致一些想法沒辦法很好地實現。
其實國外有大神(De Jongh)做了一個能在Axure發布框架內跑起來的Javascript拓展，這是地址：http://dejongh.dk/wiki/doku.php?id=interaction:axure_api&do=index。
一部分是Axure基于jQuery的函數，還有一部分是他補充的擴展函數，擴展函數看起來很不錯，解決了很多問題；但是安裝實在是麻煩，特別是如果面向不熟悉代碼的設計師（流程設計師、視覺設計師等）簡直是天書。
為此，結合我們常用的一些功能或函數，我梳理了一些不需要拓展庫就能實現的，做成例子分享給大家。
今天，我們做一個iframe內聯框架根據加載頁面的尺寸自適應變化大小。Axure自帶的頁面屬性是很簡單的，只有一個pageName，完全不夠用！如圖：
通常我們做頁面的時候，還會用到頁面的尺寸。比如自定義視覺的滾動條、通過iframe（內聯框架）做的頁面切換等等，如果沒有頁面尺寸，會導致無法實現自適應等操作，所以今天來解決它。
這是演示地址，可能因為網絡的原因，導致頁面載入時間過長，高度值讀取失敗，請刷新一下：https://fa35br.axshare.com/#id=5cgvid&p=home。
我們先準備3個頁面1個全局變量：1個是帶菜單的主頁面，2個演示用內容頁，還有1個全局的變量。
交互流程與原理：
按鈕點擊觸發，被加載的子頁面在載入的時候，獲取自己的頁面高度，然后寫入到全局變量，按鈕動作延時改變iframe的尺寸。
主頁面內我放置了2個按鈕，1個iframe：2個按鈕（矩形），沒有命名要求；1個iframe，iframe的元件ID命名為“loadPageFrame”，設置為隱藏邊框、從不滾動。
這兩個頁面隨便找些文字，或者畫一些測試的圖形，盡可能把頁面高度拉長，以便等會測試的時候體現出區別。
主頁面當中按鈕主要是觸發iframe載入目標頁面，然后延遲500ms（可根據需求調整，150ms基本也ok），根據全局變量“size”改變iframe的尺寸。
給菜單按鈕添加交互，交互的次序不要錯：要先把iframe縮小到10高度，然后打開鏈接，延遲后再設定尺寸。
內容頁可任意制作，只需要在頁面中添加頁面的交互，作為載入時獲取本頁面的高度：
代碼如下：javascript：void($axure.setGlobalVariable”size”, document.documentElement.scrollHeight));
采用延時觸發，是因為跨頁面的元件是無法直接交互的（IDE當中獲取不到目標指針），所以只能通過跨頁面的全局變量來實現。基本上延遲200ms左右是不被察覺的，當然考慮到終端的運行能力，可以適當延長。
示例代碼中的626w是隨意設置的iframe寬度，也可根據變量修改。[[size]]就是全局變量size，可以在IDE當中直接引用。
為了方便大家以后搜索，我用到的函數列舉一下：
當能獲取頁面尺寸，并通過全局變量修改iframe尺寸以做到自適應以后，我們就可以不再依賴“Axure母版”這個有限的玩法了，菜單框架頁面做好，其他的內容頁面可以隨意做，并且多人協作時不再出現已放置在頁面中的母版同步時效的問題。
并且使用瀏覽器本身的頁面滾動條，要比iframe的滾動條要美觀很多。
今天的文章比較干，或者說比較枯燥，本來還有一個很長的文章想要寫的，雖然例子已經做好，主要是解決了Axure的IDE里面怎么通過JS代碼準確定位到元件，以獲得更多的自由度去封裝應用。
考慮到內容更干所以還在醞釀怎么措辭，會盡快發布。
回到做這個系列的初衷，還是為了讓懂代碼的同事能預先用JS與原生IDE組合的方式，把一些組件預先根據團隊的視覺交互規范封裝好，以便不懂代碼的同事可以方便并快速的使用來搭建交互原型。
關注我，下周會放出包括之前文章相關的源文件。
作者：ELement；公眾號：ElementChen
本文由 @ELement 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
文將介紹如何制作Axure高保真數據可視化原型，供大家參考和學習。
高保真數據可視化原型設計，稱得上是Axure高階水平。
數據可視化在原型設計中是一個重要的分支，但是對于Axure使用者具有一定要求。清晰的數據可視化原型可以減少與需求方和研發工程師等的溝通成本，且可具象。
Axure本身具有高級交互的能力，結合數據可視化的方式，以低成本的方式，達到預期的演示的效果，本文介紹如何制作Axure高保真數據可視化原型。
在Axure操作界面中，拖入一個Inline Frame（中文：內聯框架）。
Axure本身可生成HTML頁面，本質上而言，只要帶有實例圖的為HTML文件，并可正常訪問即可。至于HTML是以何種方式制作生成，不做限制。
點擊進入圖后，所示頁面如下圖。左側為折線圖效果對應的代碼，右側是折線圖的效果。可以在左側修改代碼，運行后可在右側查看修改后的效果（此處不做贅述）。
點擊頁面右下角的“Download”按鈕，下載折線圖的HTML頁面。
使用任意一種代碼編輯器（筆者喜歡用komodo），打開html頁面，修改html頁面代碼中自帶的api。如果發現運行后html報錯api過期時，需要自行創建api，將其進行替換。
創建一個新的文件夾（本文命名其為：axure and excharts），文件夾的位置沒有要求。將下載的HTML頁面，放置在文件夾中。
雙擊拖入Axure操作界面的內聯框架（Inline Frame），選擇“link to an external url or file”（選擇一個外部的urd或文件），輸入HTML頁面所在的位置及名稱（如本文：D:\Desktop\axure and echarts\line-simple.html），如下圖所示：
點擊生成html頁面按鈕：
將生成html文件的目錄，更改為上文創建的文件夾。如下圖：
點擊確認后，“axure and echarts”文件夾中會存在axure生成的html頁面和html頁面。同時，會自動打開一個html頁面，可查看效果，如下圖：
這樣，我們就通過一個簡單的例子，在Axure中實現了數據可視化效果。
筆者在本文中分享的是實現的方法，但是實際應用過程中，通過一款數據可視化產品的視角去實操，會讓你有意想不到的效果，特別是在Axure顏色、布局、交互等能力的加持下。
作者：魚日，公眾號：issnail
本文由 @魚日 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
前2篇文章講了《為什么375×667是移動端原型設計的最佳分辨率如何設置手機APP原型尺寸
所謂的APP原型適配手機，是指用手機瀏打開原型頁面的時候，橫豎都剛好撐滿屏幕。當然如果頁面比較長，高度超過一屏是沒問題的。
比如你的原型是375×667，手機是iPhone6/6s/7，那在手機上查看的時候無需縮放，默認撐滿屏幕。
如果你的原型是360×640，而手機是Android的小米4、小米note、華為p7、p8榮耀6、7這些主流機型，也是一樣的。
比如你的原型是375×667,而你的手機是華為p8，1080×1920。理論上來說無法完美適配APP中所有的頁面。但是除了有下導航的頁面一般都沒問題。
你需要在Axure生成HTML的時候設置一下手機上如何展示原型。
請勾選包含視口標簽。瀏覽器顯示網頁，默認是按照網頁自身分辨率來展示的。勾選了此項之后，里面的區域按照下方規則來處理展示。
寬，使用默認的device-width即可。
高，一般不需要填，因為是根據寬度來決定的。
最小縮放倍數和最大縮放倍數，一般不需要填。
允許用戶縮放，一般填寫no。
具體規則是原型頁面的橫向分辨率x初始縮放倍數xDPR參數=手機屏幕的橫向分辨率。得出這個值填到上圖中的對應位置。
而這里的DPR參數(devicePixelRatio)，代表的是設備像素和CSS像素的比例，下方的chrome網頁調試中也揭示了這一點。
所以上面的華為p8應該設置為0.96，你可以根據機型去百度搜索對應的DPR參數是多少。
通過chrome-視圖-開發者-開發者工具，切換到你想看的手機尺寸。同時也可以用這個工具去了解在其他機型上面的效果，以方面了解是不是需要單獨適配。
當然safari的菜單欄-開發-響應者模式也可以。
請用手機瀏覽器打開該網頁，請用手機瀏覽器打開該網頁，最好生成到桌面查看效果。比如我設計的原型。
建議豎向減掉20px，因為Axure默認不顯示頂部狀態欄。
建議你們下次設計APP原型的時候按照通用分辨率375×667來設置，次選方法是按照自己手機的邏輯分辨率來定尺寸。。
如果想明白為什么要這樣設置，可以去搜索viewport和邏輯分辨率等概念。當然就使用而言，PM無需了解這些知識。
至于如何把原型放到手機上面查看，我們下次再講。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
