Axure騷操作系列:“生成”手機APP
很多產品朋友想在手機上預覽自己的原型,這樣給到甲方和程序時能更直觀的展現產品全貌,大幅度降低溝通成本,筆者嘗試了以下方法(老司機可以直接看方法三)。
一、使用官方Axure Share
- 優點:簡單部署,注冊Axure賬號,直接發布到Axure Share,手機端使用官方App登錄即可查看原型。
- 缺點:由于某些原因,官方服務器訪問及其緩慢,這種方法聊勝于無吧。
二、使用國內第三方原型托管
這里推薦 產品大牛 和 Axhub,大家還可以找到更多,其實原理就是國內服務器部署了代理服務器,大家把html原型文件上傳后就可以查看到。
- 優點:訪問速度快,可以設置密碼權限。
- 缺點:每次更新Axure文件需要打包html文件。
三、“生成”手機APP(老司機直接看這里)
我們基于方法二就可以用鏈接生成一個APP了,實現過程如下:
(1)準備工具
AxureRP9 第三方原型托管平臺(以產品大牛為例) Fusion App。
(2)繪制手機端原型
筆者推薦使用AxureRP9,因為使用AxureRP9的自適應視圖對手機端有更好的適配體驗(AxureRP8也可以用自適應視圖)。
我們在繪制原型時,設置自適應視圖:
設置自適應視圖
這樣,在PC瀏覽器上,方便程序員美術可以看到我們的功能點需求說明,在移動端可以直接自適應(隱藏說明,只顯示原型功能內容)。
PC版視圖內容
PC版視圖效果-可向程序美術展示
手機版視圖內容
手機版視圖效果-可向老板甲方展示
(3)生成html后上傳至第三方托管平臺(以產品大牛為例)
上傳至產品大牛:
上傳至產品大牛
獲得原型演示鏈接:
原型演示鏈接
(4)“生成”手機APP
有了演示鏈接后,我們就可以通過PC瀏覽器預覽PC版視圖,也可以使用手機瀏覽器(推薦谷歌)查看我們的原型了,但是手機端瀏覽器體驗還是不爽,使用Fusion App快速生成一個套殼APP,瞬間將原型提升至原生體驗(斜眼233)。
- 下載安裝Fusion App(文末有鏈接,或者酷安市場可以下載);
- 右下角新建一個工程。
新建工程
選擇空白模板:
選擇空白模板
輸入應用名稱,自動生成包名(注意包名必須是三段式不能有特殊字符)。
輸入應用名
輸入我們之前的演示鏈接,打開顯示狀態欄,其它選擇默認。
輸入原型演示鏈接
右上角選擇應用打包,安裝應用
安裝應用
安裝完我們就獲得了一個套殼APP,可以將這個安裝包扔給老板,甲方客戶,體驗so cool。
安裝完成
打開APP 甚至還有導航欄配色自適應!
打開APP
進階操作:我們發現好像內容沒有自適應呢?這里有一個隱藏操作,連續三擊屏幕會彈出Axure的一個設置菜單。
設置適應寬度
右側兩個卡片可以查看原型頁面目錄和頁面說明,不再贅述。
再看我們的原型內容:
完美適配
筆者體驗下來,因為原型托管在國內服務器,加上各項交互操作下來,有著不亞于小程序、PWA應用的體驗,AxureRP9也重構了它的內核,所以速度確實有所提升。
作者:鹽粒,一只幼年產品流浪狗
本文由 @鹽粒 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
不好使,最后一個