全栈工程师?
嗯.....目前并不是!

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也重構了它的內核,所以速度確實有所提升。

 

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

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Axure騷操作系列:“生成”手機APP》
文章链接:https://www.pmbear.com/axure%e9%a8%b7%e6%93%8d%e4%bd%9c%e7%b3%bb%e5%88%97%ef%bc%9a%e7%94%9f%e6%88%90%e6%89%8b%e6%a9%9fapp/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们