如何在手機上完美體驗APP原型

上次講了如何把原型放到網路上，這篇講解如何在手機上完美的體驗APP原型的功能和交互。

主要講iOS系統的手機如何查看，Android手機的操作方法類似。

我提供了非常完整的演示步驟，請根據自身情況有所取捨的去使用。建議結合前幾篇文章一起閱讀理解。

一、獲取APP原型的網址

比如我把閃電約APP的原型上傳到http://51prd.com伺服器下面的demo目錄下，那麼網址為http://51prd.com/demo/#g=1&p=首頁

二、使用Safari打開網址

將該網址發送到手機上並使用Safari打開。你會看到APP原型的部分內容，但是有額外的元素干擾。

三、去掉多餘的元素

點擊左下角的close按鈕，可以關閉Axure工具欄。現在有點像APP頁面了。

需要注意的是這裡其實是跳轉到了另外一個網址http://51prd.com/demo/首頁.html。

3.1、原型網址的生成規則

事實上是Axure生成的原型默認是載入了工具欄的網址。

生成之後網址的前面部分是一樣的，比如Untitled Document，主要是後面有區別。

• 開啟頁面列表，後綴為/start.html#g=1
• 關閉頁面列表，後綴為/start.html#g=0
• 最小化工具欄，後綴為/start.html#c=1
• 不載入工具欄，後綴為/頁面名稱.html

四、生成桌面快捷方式

體驗一下原型感覺還可以，但是頂部網址欄和底部工具欄貌似擋住了部分內容，需要隱藏掉。

4.1、添加到主屏幕

點擊底部工具欄中間的」發送到」圖標，然後選擇「添加到主屏幕」。

4.2、設置APP名稱

設置一下名稱，然後選擇添加。

4.3、創建APP成功

然後便會創建到桌面。

五、查看APP原型

點擊桌面上的該圖標，然後進入APP原型。你會發現它和你設計的APP一模一樣。

六、體驗APP的功能和交互

操作一遍，你會發現它能夠完美的表現下導航和上導航的功能，包含了所有的頁面，所有的跳轉都可以正常點擊，可以完整的體驗APP的所有功能模塊。

這也是我定義的真正的原型，點擊查看我對產品概念的定義。

七、總結

如果你覺得圖標不好看，還可以在生成原型的時候進行設置。

給你們查看我最後設置後的效果，從表到里都和一個APP超級像，最符合原型的定義。

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