国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

二、定義2種平臺(tái)的原型分辨率

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

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

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

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

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

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

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

由于我之前在其他頁(yè)面中啟用了iPhone7plus的414×736視圖，所以上面的截圖中有3個(gè)視圖。你們?cè)谠O(shè)計(jì)的時(shí)候無(wú)需如此。

四、先完成主平臺(tái)原型

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

五、后完成副平臺(tái)原型

5.1 啟用自定義視圖

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

5.2 修改副平臺(tái)原型

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

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

我們按照知乎在手機(jī)網(wǎng)頁(yè)上的呈現(xiàn)調(diào)整一下原型。效果如下圖?；蛘咧苯釉L問(wèn)上方原型網(wǎng)址查看知乎原型。

六、檢查主副平臺(tái)的視覺和交互

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

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

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

七、生成原型效果

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

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

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

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

8.1 查看web原型和邏輯

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

不選其實(shí)也可以，因?yàn)橹鮳eb是默認(rèn)視圖。

8.2 查看h5原型和邏輯

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

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

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

九、總結(jié)

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

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

相關(guān)閱讀

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

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

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

為什么375×667是移動(dòng)端原型的最佳分辨率

#專欄作家#

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

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