善用Axure寫PRD:如何在手機上完美體驗APP原型的功能和交互
上篇文章《善用Axure寫PRD,把原型放到手機里查看》講了《如何把原型放到網絡上》,這篇講解如何在手機上完美的體驗APP原型的功能和交互。主要講iOS系統的手機如何查看,Android手機的操作方法類似。我提供了非常完整的演示步驟,請根據自身情況有所取舍的去使用。建議結合前幾篇文章閱讀。
獲取APP原型的網址
比如我把閃電約APP的原型上傳到51prd.com服務器下面的demo目錄下,那么網址為http://51prd.com/demo/#g=1&p=首頁。
使用Safari打開網址
將該網址發送到手機上并使用Safari打開。你會看到APP原型的部分內容,但是有額外的元素干擾。
去掉多余的網頁內容
點擊左下角的close按鈕,可以關閉Axure工具欄。現在有點像APP頁面了。
需要注意的是這里其實是跳轉到了另外一個網址:http://51prd.com/demo/首頁.html
原型網址的生成規則
事實上是Axure生成的原型默認是加載了工具欄的網址。生成之后網址的前面部分是一樣的,比如http://51prd.com/demo/,主要是后面有區別。
- 開啟頁面列表,后綴為/start.html#g=1
- 關閉頁面列表,后綴為/start.html#g=0
- 最小化工具欄,后綴為/start.html#c=1
- 不加載工具欄,后綴為/頁面名稱.html
生成桌面快捷方式
體驗一下原型感覺還可以,但是頂部網址欄和底部工具欄貌似擋住了部分內容,需要隱藏掉。
添加到主屏幕
點擊底部工具欄中間的”發送到”圖標,然后選擇“添加到主屏幕”。
設置APP名稱
設置一下名稱,然后選擇添加。
創建APP成功
然后便會創建到桌面。
查看APP原型
點擊桌面上的該圖標,然后進入APP原型。你會發現它和你設計的APP一模一樣。
體驗APP的功能和交互
操作一遍,你會發現它能夠完美的表現下導航和上導航的功能,包含了所有的頁面,所有的跳轉都可以正常點擊,可以完整的體驗APP的所有功能模塊。
這也是我定義的真正的原型,點擊查看我對產品概念的定義。
總結
如果你覺得圖標不好看,還可以在生成原型的時候進行設置。
給你們查看我最后設置后的效果,從表到里都和一個APP超級像,最符合原型的定義。
相關閱讀
專欄作家
浪子,業務型PM,浪子PRD系列51prd.com,公眾號langzisay。
本文由 @浪子 原創發布于人人都是產品經理。未經許可,禁止轉載。
您發 小白一個 請教一下在ios下添加到主屏幕的時候,app的圖標顯示不對,怎么解決呢?
重新根據我的方法來操作一遍即可,有時候可能是因為軟件反應比較慢。
您好。我想請問下:axure寫app的prd我還能理解。寫web端是否能實現?實現上是否會太復雜?
Axure當然可以寫Web,最開始Axure就是為web產品而設計的。
實現上并不會因此而復雜。
學習!
男神~~ ??
寫的很好~~繼續學習~~~~~ ??
安卓怎么還沒有?你的案例都是蘋果的
方法是相通的
都不用AXURE SHARE的嗎,很好用,也是這個效果,功能多一點
請問AXURE SHARE 可以添加桌面圖標嗎?還有我在手機上運行很卡是什么問題?
訪問太慢是硬傷。
貌似很重
Axure上不好在手機甚至電腦上做屏幕滾動效果,這點體驗比較差了.
如果你說的是很長的頁面是否可以上下滾動,以及上下導航是否固定。那么是可以的。