在一般的開發(fā)工作之前，我們通常會設(shè)計產(chǎn)品原型，大部分為axure繪制的線框圖作為產(chǎn)品的PRD文檔，供UI和開發(fā)進(jìn)行前期工作，但是有的時候客戶、領(lǐng)導(dǎo)想在開發(fā)之前，看到產(chǎn)品的概貌，就必須做產(chǎn)品的高保真原型進(jìn)行模擬，這時如果做出來的原型能運(yùn)行在手機(jī)端，那再好不過
1、首選是制作高保真原型，如圖2：
圖2 高保真的原型圖
(注：高保真原型最好不要用太多內(nèi)部框架嵌套，加載速度有點(diǎn)慢，還是用動態(tài)面板慢慢做，層級多了要有耐心)
iOS的屏幕尺寸目前是有限的幾種，原型尺寸要和其一致。比如iphone5s視網(wǎng)膜下像素為640*1136(The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是說320*568已經(jīng)可以鋪滿全屏，不過，由于Axure導(dǎo)出的原型在iOS上處理status bar時有問題，需要在高度上減去status bar的高度20，就為320*548，所以保證原型的高寬為320和548,如圖3整體高度為548px：
圖3 高寬為320*548
2、F8進(jìn)行生成設(shè)置，設(shè)置如下圖4：
4、復(fù)制生成的html中原型鏈接，選擇without Sitemap,如圖5：
圖5 復(fù)制鏈接
5、在safari中粘貼鏈接，并打開，已經(jīng)可以看到和屏幕寬度的界面，并添加到主屏幕，如圖6：。
圖6 添加到主屏幕
6、可以通過桌面的快捷icon，進(jìn)入原型，這個時候已經(jīng)適配了手機(jī)，躺著桌面的icon,絲毫不會讓人看得出是原型，下圖7：
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。