華文網

善用Axure寫PRD:如何在手機上完美體驗APP原型的功能和交互

上篇文章《》講了《如何把原型放到網路上》,這篇講解如何在手機上完美的體驗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超級像,最符合原型的定義。

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