Axure騷操作系列:“生成”手機APP

Axure 瀏覽器 HTML 程序員 跳槽那些事兒 Google 人人都是產品經理 2019-06-05

很多產品朋友想在手機上預覽自己的原型,這樣給到甲方和程序時能更直觀的展現產品全貌,大幅度降低溝通成本,筆者嘗試了以下方法(老司機可以直接看方法三)。

Axure騷操作系列:“生成”手機APP

一、使用官方Axure Share

  • 優點:簡單部署,註冊Axure賬號,直接發佈到Axure Share,手機端使用官方App登錄即可查看原型。
  • 缺點:由於某些原因,官方服務器訪問及其緩慢,這種方法聊勝於無吧。

二、使用國內第三方原型託管

這裡推薦 產品大牛 和 Axhub,大家還可以找到更多,其實原理就是國內服務器部署了代理服務器,大家把html原型文件上傳後就可以查看到。

  • 優點:訪問速度快,可以設置密碼權限。
  • 缺點:每次更新Axure文件需要打包html文件。

三、“生成”手機APP(老司機直接看這裡)

我們基於方法二就可以用鏈接生成一個APP了,實現過程如下:

(1)準備工具

AxureRP9 第三方原型託管平臺(以產品大牛為例) Fusion App。

(2)繪製手機端原型

筆者推薦使用AxureRP9,因為使用AxureRP9的自適應視圖對手機端有更好的適配體驗(AxureRP8也可以用自適應視圖)。

我們在繪製原型時,設置自適應視圖:

Axure騷操作系列:“生成”手機APP

設置自適應視圖

這樣,在PC瀏覽器上,方便程序員美術可以看到我們的功能點需求說明,在移動端可以直接自適應(隱藏說明,只顯示原型功能內容)。

Axure騷操作系列:“生成”手機APP

PC版視圖內容

Axure騷操作系列:“生成”手機APP

PC版視圖效果-可向程序美術展示

Axure騷操作系列:“生成”手機APP

手機版視圖內容

Axure騷操作系列:“生成”手機APP

手機版視圖效果-可向老闆甲方展示

(3)生成html後上傳至第三方託管平臺(以產品大牛為例)

上傳至產品大牛:

Axure騷操作系列:“生成”手機APP

上傳至產品大牛

獲得原型演示鏈接:

Axure騷操作系列:“生成”手機APP

原型演示鏈接

(4)“生成”手機APP

有了演示鏈接後,我們就可以通過PC瀏覽器預覽PC版視圖,也可以使用手機瀏覽器(推薦谷歌)查看我們的原型了,但是手機端瀏覽器體驗還是不爽,使用Fusion App快速生成一個套殼APP,瞬間將原型提升至原生體驗(斜眼233)。

下載安裝Fusion App(文末有鏈接,或者酷安市場可以下載); 右下角新建一個工程。

Axure騷操作系列:“生成”手機APP

新建工程

選擇空白模板:

Axure騷操作系列:“生成”手機APP

選擇空白模板

輸入應用名稱,自動生成包名(注意包名必須是三段式不能有特殊字符)。

Axure騷操作系列:“生成”手機APP

輸入應用名

輸入我們之前的演示鏈接,打開顯示狀態欄,其它選擇默認。

Axure騷操作系列:“生成”手機APP

輸入原型演示鏈接

右上角選擇應用打包,安裝應用

Axure騷操作系列:“生成”手機APP

安裝應用

安裝完我們就獲得了一個套殼APP,可以將這個安裝包扔給老闆,甲方客戶,體驗so cool。

Axure騷操作系列:“生成”手機APP

安裝完成

打開APP 甚至還有導航欄配色自適應!

Axure騷操作系列:“生成”手機APP

打開APP

進階操作:我們發現好像內容沒有自適應呢?這裡有一個隱藏操作,連續三擊屏幕會彈出Axure的一個設置菜單。

Axure騷操作系列:“生成”手機APP

設置適應寬度

右側兩個卡片可以查看原型頁面目錄和頁面說明,不再贅述。

再看我們的原型內容:

Axure騷操作系列:“生成”手機APP

完美適配

筆者體驗下來,因為原型託管在國內服務器,加上各項交互操作下來,有著不亞於小程序、PWA應用的體驗,AxureRP9也重構了它的內核,所以速度確實有所提升。

作者:鹽粒,一隻幼年產品流浪狗

本文由 @鹽粒 原創發佈於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

相關推薦

推薦中...