上篇文章《PM應該如何適配不同平臺》講解方法論，這篇文章講解工具操作。以AxureRP8為例，講解如何繪畫兼顧不同平臺的原型。

一、以產品的主平臺為基礎來設計原型

當你主營Web網站，想移植核心功能到h5環境中。那么你應該以Web原型為主，然后創建h5的自適應視圖。同理其他場景也是如此。詳見上篇文章的“哪些情況下需要適配”章節。

接下來我們以“知乎web版本，然后增加手機網頁訪問h5版本”來作為案例講解如何操作Axure。

注意：適配多個平臺的原型本質上是給每一個平臺定義分辨率然后分別設計原型。

二、定義2種平臺的原型分辨率

拿知乎來說，知乎Web版建議用當今主流的瀏覽器分辨率1200px作為Web平臺的分辨率，高度自適應。

知乎h5版建議用375px作為h5版本的原型分辨率來設計，以方便用戶在各種手機網頁查看h5版本的知乎，最后技術實現的時候利用網頁前端JS來適配不同分辨率。至于為什么使用375px來設計請參照這篇文章《為什么375×667是移動端原型的最佳分辨率》。

當設計好主平臺的原型之后，此時我們需要配置一下自定義視圖的規則。

注意：Axure默認是沒有自定義視圖，只有默認視圖，并且沒限定原型的分辨率。雖然這方便了PM可以無限制無拘束的在畫布上設計頁面。但是也增加了UI和技術理解原型的成本。

三、配置自適應視圖

點擊Axure菜單欄“項目-自定義視圖”，彈出設置框。

按照下圖設置一下即可。

由于我之前在其他頁面中啟用了iPhone7plus的414×736視圖，所以上面的截圖中有3個視圖。你們在設計的時候無需如此。

四、先完成主平臺原型

這個和設計其他Web網站原型一樣操作，我就不贅述了。我做了一下知乎首頁的原型，包含知乎首頁、話題頁、發現頁、消息頁、我的頁面、搜索頁。效果如下圖?；蛘唿c擊查看知乎原型。

五、后完成副平臺原型

5.1 啟用自定義視圖

默認每一個頁面都是只使用默認視圖，如果你需要讓這個頁面擁有多個平臺的原型。請在頁面屬性中啟用自適應視圖。

5.2 修改副平臺原型

點擊畫布左上角的自定義視圖切換按鈕到第二個視圖414，此時你會在該視圖下看到主平臺的內容被繼承到這里。但是這里有一根紅色豎線，位于x坐標414。代表該視圖下的內容不應該超出該寬度。

然后，你根據此要求，調整該原型下面的內容大小以適應此要求即可，

我們按照知乎在手機網頁上的呈現調整一下原型。效果如下圖?；蛘咧苯釉L問上方原型網址查看知乎原型。

六、檢查主副平臺的視覺和交互

檢查主副平臺的視覺和交互，是否和知乎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來查看知乎原型。

相關閱讀

Axure如何生成適配手機屏幕的APP原型

如何把原型放到網絡上

PM應該如何適配不同平臺

為什么375×667是移動端原型的最佳分辨率

#專欄作家#

浪子，人人都是產品經理專欄作家，業務型PM，浪子PRD系列51prd.com，公眾號langzisay。

本文由 @浪子 原創發布于人人都是產品經理。未經許可，禁止轉載。