學習筆記:axure 高級教程 5Axure產品原型在手機上如何運行

  圖1 模擬家庭用藥的高保真原型

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

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

  1、首選是製作高保真原型,如圖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 高寬爲320*548

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

  圖4 配置設置

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

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

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

  圖5 複製鏈接

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

  圖6 添加到主屏幕

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章