如何用Axure畫出適配不同平台的原型

上篇文章《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的414x736視圖，所以上面的截圖中有3個視圖。你們在設計的時候無需如此。

四、先完成主平台原型

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

五、後完成副平台原型

5.1、啟用自定義視圖

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

5.2、修改副平台原型

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

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

我們按照知乎在手機網頁上的呈現調整一下原型。效果如下圖。或者直接訪問上方原型網址查看知乎原型。

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

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

比如知乎web有側邊欄，知乎h5是沒有的。

比如知乎web的導航欄是4個，知乎h5是5個。

七、生成原型效果

生成原型，將地址發給技術。推薦發布到伺服器，這樣只需把網址發給UI設計師、前端工程師，後端工程師。具體的方法不講解了，請查看我之前的2篇文章《如何把原型放到網路上》《Axure共享原型的常用方案》。註：第二篇文章人人都是產品經理不允許發布，所以提供知乎專欄地址了。

給你們看下我生成的原型網址知乎原型by浪子，一個網址兼容了知乎web原型和知乎h5原型，顯示哪種效果取決於你用web瀏覽器還是手機瀏覽器打開。

八、把原型網址發給技術

如果不是為了查看原型效果，而是需要查看完整的邏輯，那麼請打開網址http://51prd.com/case/zhihu/start.html即可顯示左邊的側邊欄，以及備註邏輯。

8.1、查看web原型和邏輯

負責Web版本的UI設計師和前端工程師查看這裡的原型和邏輯。

不選其實也可以，因為知乎web是默認視圖。

8.2、查看h5原型和邏輯

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

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

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

九、總結

重申一下，適配多個平台的原型本質上是給每一個平台定義解析度然後分別設計原型。

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

#相關閱讀#

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

如何把原型放到網路上

PM應該如何適配不同平台

為什麼375×667是移動端原型的最佳解析度

作者：浪子，關注公眾號langzisay查看全部文章，浪子PRD系列http://51prd.com/。