Axure產品原型在手機上如何運行

18 評論 39153 瀏覽 224 收藏 5 分鐘

增哥導讀:在一般的開發工作之前,我們通常會設計產品原型,大部分為axure繪制的線框圖作為產品的PRD文檔,供UI和開發進行前期工作,但是有的時候客戶、領導想在開發之前,看到產品的概貌,就必須做產品的高保真原型進行模擬,這時如果做出來的原型能運行在手機端,那再好不過。下面看看方法吧。

點擊圖片看大圖
圖1 模擬丁香園的高保真原型

在一般的開發工作之前,我們通常會設計產品原型,大部分為axure繪制的線框圖作為產品的PRD文檔,供UI和開發進行前期工作,但是有的時候客戶、領導想在開發之前,看到產品的概貌,就必須做產品的高保真原型進行模擬,這時如果做出來的原型能運行在手機端,那再好不過,如圖1(注:上圖是仿照丁香園的家庭用藥,做的一個高保真原型,算是免費給丁香園打廣告,是不是考慮給我點廣告費?哈哈)。

原型制作軟件有挺多,不過個人使用之后,最后還是依然堅持使用Axure,優點頗多,也可能是先入為主,這個教程Axure也是必須軟件之一,適配為iphone5s

1、首選是制作高保真原型,如圖2:

2

點擊圖片看大圖
圖2 高保真的原型圖
(注:高保真原型最好不要用太多內部框架嵌套,加載速度有點慢,還是用動態面板慢慢做,層級多了要有耐心)

iOS的屏幕尺寸目前是有限的幾種,原型尺寸要和其一致。比如iphone5s視網膜下像素為640*1136(The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是說320*568已經可以鋪滿全屏,不過,由于Axure導出的原型在iOS上處理status bar時有問題,需要在高度上減去status bar的高度20,就為320*548,所以保證原型的高寬為320和548,如圖3整體高度為548px:

3
點擊圖片看大圖
圖3 高寬為320*548

2、F8進行生成設置,設置如下圖4:

4
點擊圖片看大圖
圖4 配置設置
按照上圖,設置參數(注:不過閃屏頁面一直無法出現,這個問題我也沒得到解決,有解決的可以回復我)

3、生成原型文件,上傳到axureshare或者放置在EasyWebSevr的根目錄下,用本機IP替代電腦名稱,獲得完整路徑。(不清楚的點擊上期內容如何用EasyWebSvr搭建axure本地環境)

4、復制生成的html中原型鏈接,選擇without Sitemap,如圖5:
5

點擊圖片看大圖

圖5 復制鏈接

5、在safari中粘貼鏈接,并打開,已經可以看到和屏幕寬度的界面,并添加到主屏幕,如圖6:。

6
點擊圖片看大圖
圖6 添加到主屏幕

6、可以通過桌面的快捷icon,進入原型,這個時候已經適配了手機,躺著桌面的icon,絲毫不會讓人看得出是原型,下圖7:

7
點擊圖片看大圖
圖7 test桌面icon快捷啟動

本文作者:某人某年; 轉載自:簡書

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 你好 請問做出來的在手機里運行不適配怎么解決?

    回復
  2. 只能預覽不能下載啊~求教大神

    來自湖北 回復
  3. 為什么生成彈出框里只有對iOS移動設備的設置,沒有針對安卓設備的設置呢?謝謝

    來自北京 回復
  4. 時不時秀一下~

    來自廣東 回復
  5. 歐派【;

    來自浙江 回復
  6. 手機鏈接一直刷不出來。

    來自浙江 回復
  7. 為什么添加到主屏后打開什么鏈接交互全沒了,失效了?

    來自重慶 回復
  8. 用iis部署也是一樣的

    來自浙江 回復
  9. 收藏了,作者的實際案例分析和實用技巧真有用,對于新手比全理論無法落地的強多了,希望有機會多多交流[ali哇]

    來自四川 回復
  10. 這幫大忙了,以后給客戶看東西,[太開心]可以用這招了。但前提還是要符合上架規則,建議再搞個上架規則配合起來使用。

    來自四川 回復
  11. 建議重新上傳圖片

    來自上海 回復