上篇文章《善用Axure寫PRD，把原型放到手機(jī)里查看》講了《如何把原型放到網(wǎng)絡(luò)上》，這篇講解如何在手機(jī)上完美的體驗(yàn)APP原型的功能和交互。主要講iOS系統(tǒng)的手機(jī)如何查看，Android手機(jī)的操作方法類似。我提供了非常完整的演示步驟，請(qǐng)根據(jù)自身情況有所取舍的去使用。建議結(jié)合前幾篇文章閱讀。

獲取APP原型的網(wǎng)址

比如我把閃電約APP的原型上傳到51prd.com服務(wù)器下面的demo目錄下，那么網(wǎng)址為http://51prd.com/demo/#g=1&p=首頁(yè)。

使用Safari打開(kāi)網(wǎng)址

將該網(wǎng)址發(fā)送到手機(jī)上并使用Safari打開(kāi)。你會(huì)看到APP原型的部分內(nèi)容，但是有額外的元素干擾。

去掉多余的網(wǎng)頁(yè)內(nèi)容

點(diǎn)擊左下角的close按鈕，可以關(guān)閉Axure工具欄。現(xiàn)在有點(diǎn)像APP頁(yè)面了。

需要注意的是這里其實(shí)是跳轉(zhuǎn)到了另外一個(gè)網(wǎng)址：http://51prd.com/demo/首頁(yè).html

原型網(wǎng)址的生成規(guī)則

事實(shí)上是Axure生成的原型默認(rèn)是加載了工具欄的網(wǎng)址。生成之后網(wǎng)址的前面部分是一樣的，比如http://51prd.com/demo/，主要是后面有區(qū)別。

• 開(kāi)啟頁(yè)面列表，后綴為/start.html#g=1
• 關(guān)閉頁(yè)面列表，后綴為/start.html#g=0
• 最小化工具欄，后綴為/start.html#c=1
• 不加載工具欄，后綴為/頁(yè)面名稱.html

生成桌面快捷方式

體驗(yàn)一下原型感覺(jué)還可以，但是頂部網(wǎng)址欄和底部工具欄貌似擋住了部分內(nèi)容，需要隱藏掉。

添加到主屏幕

點(diǎn)擊底部工具欄中間的”發(fā)送到”圖標(biāo)，然后選擇“添加到主屏幕”。

設(shè)置APP名稱

設(shè)置一下名稱，然后選擇添加。

創(chuàng)建APP成功

然后便會(huì)創(chuàng)建到桌面。

查看APP原型

點(diǎn)擊桌面上的該圖標(biāo)，然后進(jìn)入APP原型。你會(huì)發(fā)現(xiàn)它和你設(shè)計(jì)的APP一模一樣。

體驗(yàn)APP的功能和交互

操作一遍，你會(huì)發(fā)現(xiàn)它能夠完美的表現(xiàn)下導(dǎo)航和上導(dǎo)航的功能，包含了所有的頁(yè)面，所有的跳轉(zhuǎn)都可以正常點(diǎn)擊，可以完整的體驗(yàn)APP的所有功能模塊。

這也是我定義的真正的原型，點(diǎn)擊查看我對(duì)產(chǎn)品概念的定義。

總結(jié)

如果你覺(jué)得圖標(biāo)不好看，還可以在生成原型的時(shí)候進(jìn)行設(shè)置。

給你們查看我最后設(shè)置后的效果，從表到里都和一個(gè)APP超級(jí)像，最符合原型的定義。

相關(guān)閱讀

為什么375×667是移動(dòng)端原型設(shè)計(jì)的最佳分辨率

善用Axure寫PRD，如何設(shè)置手機(jī)APP原型尺寸

善用Axure寫PRD，如何生成適配手機(jī)的原型

善用Axure寫PRD，把原型放到手機(jī)里

專欄作家

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)langzisay。

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