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

一、以產(chǎn)品的主平臺為基礎(chǔ)來設(shè)計原型

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

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

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

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

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

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

當(dāng)設(shè)計好主平臺的原型之后，此時我們需要配置一下自定義視圖的規(guī)則。

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

三、配置自適應(yīng)視圖

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

按照下圖設(shè)置一下即可。

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

四、先完成主平臺原型

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

五、后完成副平臺原型

5.1 啟用自定義視圖

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

5.2 修改副平臺原型

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

然后，你根據(jù)此要求，調(diào)整該原型下面的內(nèi)容大小以適應(yīng)此要求即可，

我們按照知乎在手機(jī)網(wǎng)頁上的呈現(xiàn)調(diào)整一下原型。效果如下圖。或者直接訪問上方原型網(wǎng)址查看知乎原型。

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

檢查主副平臺的視覺和交互，是否和知乎web和知乎h5保持一致。

比如知乎web有側(cè)邊欄，知乎h5是沒有的。

比如知乎web的導(dǎo)航欄是4個，知乎h5是5個。

七、生成原型效果

生成原型，將地址發(fā)給技術(shù)。推薦發(fā)布到服務(wù)器，這樣只需把網(wǎng)址發(fā)給UI設(shè)計師、前端工程師，后端工程師。具體的方法不講解了，請查看我之前的2篇文章《如何把原型放到網(wǎng)絡(luò)上》《Axure共享原型的常用方案》。

給你們看下我生成的原型網(wǎng)址（點擊查看），一個網(wǎng)址兼容了知乎web原型和知乎h5原型，顯示哪種效果取決于你用web瀏覽器還是手機(jī)瀏覽器打開。

八、把原型網(wǎng)址發(fā)給技術(shù)

如果不是為了查看原型效果，而是需要查看完整的邏輯，那么請打開網(wǎng)址（點擊查看）即可顯示左邊的側(cè)邊欄，以及備注邏輯。

8.1 查看web原型和邏輯

負(fù)責(zé)Web版本的UI設(shè)計師和前端工程師查看這里的原型和邏輯。

不選其實也可以，因為知乎web是默認(rèn)視圖。

8.2 查看h5原型和邏輯

目前沒有特別完美的查看方法。

請使用上面的方法查看這里的原型和邏輯，尤其是注意知乎web有，而知乎h5沒有的元素。以及兩者的交互差異。

另外，推薦一種web瀏覽器瀏覽方法，詳見Axure如何生成適配手機(jī)屏幕的APP原型文章中的通過chrome查看原型的章節(jié)。

九、總結(jié)

重申一下，適配多個平臺的原型本質(zhì)上是給每一個平臺定義分辨率然后分別設(shè)計原型。

H5版本請使用手機(jī)瀏覽器或者通過其他APP中的webview來查看知乎原型。

相關(guān)閱讀

Axure如何生成適配手機(jī)屏幕的APP原型

如何把原型放到網(wǎng)絡(luò)上

PM應(yīng)該如何適配不同平臺

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

#專欄作家#

浪子，人人都是產(chǎn)品經(jīng)理專欄作家，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號langzisay。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。