上篇文章《PM應該如何適配不同平臺》講解方法論， 這篇文章講解工具操作。 以AxureRP8為例， 講解如何繪畫兼顧不同平臺的原型。
一、以產品的主平臺為基礎來設計原型
當你主營Web網站，
接下來我們以“知乎web版本， 然後增加手機網頁訪問h5版本”來作為案例講解如何操作Axure。
注意：適配多個平臺的原型本質上是給每一個平臺定義解析度然後分別設計原型。
二、定義2種平臺的原型解析度
拿知乎來說， 知乎Web版建議用當今主流的流覽器解析度1200px作為Web平臺的解析度， 高度自我調整。
知乎h5版建議用375px作為h5版本的原型解析度來設計， 以方便用戶在各種手機網頁查看h5版本的知乎， 最後技術實現的時候利用網頁前端JS來適配不同解析度。
當設計好主平臺的原型之後， 此時我們需要配置一下自訂視圖的規則。
注意：Axure默認是沒有自訂視圖， 只有默認視圖， 並且沒限定原型的解析度。 雖然這方便了PM可以無限制無拘束的在畫布上設計頁面。 但是也增加了UI和技術理解原型的成本。
三、配置自我調整視圖
點擊Axure功能表列“專案-自訂視圖”， 彈出設置框。
按照下圖設置一下即可。
由於我之前在其他頁面中啟用了iPhone7plus的414×736視圖， 所以上面的截圖中有3個視圖。 你們在設計的時候無需如此。
四、先完成主平臺原型
這個和設計其他Web網站原型一樣操作， 我就不贅述了。 我做了一下知乎首頁的原型， 包含知乎首頁、話題頁、發現頁、消息頁、我的頁面、搜尋網頁。 效果如下圖。 或者點擊。
五、後完成副平臺原型5.1 啟用自訂視圖
預設每一個頁面都是只使用預設視圖，
5.2 修改副平臺原型
點擊畫布左上角的自訂視圖切換按鈕到第二個視圖414， 此時你會在該視圖下看到主平臺的內容被繼承到這裡。 但是這裡有一根紅色分隔號，位於x座標414。代表該視圖下的內容不應該超出該寬度。
然後，你根據此要求，調整該原型下面的內容大小以適應此要求即可，
我們按照知乎在手機網頁上的呈現調整一下原型。效果如下圖。或者直接訪問上方原型網址。
六、檢查主副平臺的視覺和交互
檢查主副平臺的視覺和交互，是否和知乎web和知乎h5保持一致。
比如知乎web有側邊欄，知乎h5是沒有的。
比如知乎web的巡覽列是4個，知乎h5是5個。
七、生成原型效果
生成原型，將位址發給技術。推薦發佈到伺服器，這樣只需把網址發給UI設計師、前端工程師，後端工程師。具體的方法不講解了，請查看我之前的2篇文章《如何把原型放到網路上》《Axure共用原型的常用方案》。
給你們看下我生成的原型網址，一個網址相容了知乎web原型和知乎h5原型，顯示哪種效果取決於你用web流覽器還是手機流覽器打開。
八、把原型網址發給技術
如果不是為了查看原型效果，而是需要查看完整的邏輯，那麼請打開網址即可顯示左邊的側邊欄，以及備註邏輯。
8.1 查看web原型和邏輯
負責Web版本的UI設計師和前端工程師查看這裡的原型和邏輯。
不選其實也可以，因為知乎web是默認視圖。
8.2 查看h5原型和邏輯
目前沒有特別完美的查看方法。
請使用上面的方法查看這裡的原型和邏輯，尤其是注意知乎web有，而知乎h5沒有的元素。以及兩者的交互差異。
另外，推薦一種web流覽器流覽方法，詳見Axure如何生成適配手機螢幕的APP原型文章中的通過chrome查看原型的章節。
九、總結
重申一下，適配多個平臺的原型本質上是給每一個平臺定義解析度然後分別設計原型。
H5版本請使用手機流覽器或者通過其他APP中的webview來查看知乎原型。
但是這裡有一根紅色分隔號，位於x座標414。代表該視圖下的內容不應該超出該寬度。然後，你根據此要求，調整該原型下面的內容大小以適應此要求即可，
我們按照知乎在手機網頁上的呈現調整一下原型。效果如下圖。或者直接訪問上方原型網址。
六、檢查主副平臺的視覺和交互
檢查主副平臺的視覺和交互，是否和知乎web和知乎h5保持一致。
比如知乎web有側邊欄，知乎h5是沒有的。
比如知乎web的巡覽列是4個，知乎h5是5個。
七、生成原型效果
生成原型，將位址發給技術。推薦發佈到伺服器，這樣只需把網址發給UI設計師、前端工程師，後端工程師。具體的方法不講解了，請查看我之前的2篇文章《如何把原型放到網路上》《Axure共用原型的常用方案》。
給你們看下我生成的原型網址，一個網址相容了知乎web原型和知乎h5原型，顯示哪種效果取決於你用web流覽器還是手機流覽器打開。
八、把原型網址發給技術
如果不是為了查看原型效果，而是需要查看完整的邏輯，那麼請打開網址即可顯示左邊的側邊欄，以及備註邏輯。
8.1 查看web原型和邏輯
負責Web版本的UI設計師和前端工程師查看這裡的原型和邏輯。
不選其實也可以，因為知乎web是默認視圖。
8.2 查看h5原型和邏輯
目前沒有特別完美的查看方法。
請使用上面的方法查看這裡的原型和邏輯，尤其是注意知乎web有，而知乎h5沒有的元素。以及兩者的交互差異。
另外，推薦一種web流覽器流覽方法，詳見Axure如何生成適配手機螢幕的APP原型文章中的通過chrome查看原型的章節。
九、總結
重申一下，適配多個平臺的原型本質上是給每一個平臺定義解析度然後分別設計原型。
H5版本請使用手機流覽器或者通過其他APP中的webview來查看知乎原型。