把Axure原型圖模擬到手機(jī)上，你也可以做”APP”

Axure不僅能制作靜態(tài)的視覺稿、頁(yè)面，還能添加交互動(dòng)作，是進(jìn)行原型設(shè)計(jì)的最佳軟件之一，更是產(chǎn)品經(jīng)理和交互設(shè)計(jì)師必備的軟件之一。對(duì)于產(chǎn)品經(jīng)理來說，畫完線框圖，再加上交互就成了更加形象的原型圖。一份生動(dòng)形象且充滿邏輯性的原型圖，交到設(shè)計(jì)師或者程序員手中能令后續(xù)的工作進(jìn)展的更加順暢。

Axure不但支持在PC端生成html網(wǎng)頁(yè)形式的預(yù)覽，同樣也支持在移動(dòng)端的預(yù)覽（包括交互!）相比于PC端網(wǎng)頁(yè)形式的預(yù)覽，移動(dòng)端的展示效果更加逼真，能近乎真實(shí)的模擬一個(gè)APP。

那么如何把加了動(dòng)效的原型圖在手機(jī)上展示出來呢？這里介紹兩個(gè)方法

方法一：

1. 按照將要展示的手機(jī)分辨率尺寸制作原型圖，比如我想要在iphnoe5s上看那就是640＊ 1096 (除去state bar的40 所以注意并不是喔640＊1136)
2. 注冊(cè)一個(gè)axure share賬號(hào)，用來在服務(wù)器上發(fā)布自己的作品

   (注冊(cè)界面)

3. 發(fā)布設(shè)置：publish>previews options>點(diǎn)擊configure

(選擇preview options)

(選擇configure)

• 在左側(cè)欄中選擇：Mobile/Device
• 右側(cè)輸入尺寸 (根據(jù)所想展示的手機(jī)而定)
• 勾選上[防止垂直方向移動(dòng)] 和[自動(dòng)關(guān)聯(lián)號(hào)碼]
• 用114*114的尺寸做一個(gè)模擬app的icon直接import
• 勾選隱藏邊框

(設(shè)置)

發(fā)布到axure服務(wù)器后，會(huì)自動(dòng)生成一個(gè)Link (記得勾選without sitemap)

發(fā)布成功后生成Link

剩下的就是手機(jī)上的操作了：

用手機(jī)上的safari瀏覽器打開剛剛生成的Link，網(wǎng)頁(yè)加載完畢后點(diǎn)擊[添加到主屏幕]

(添加到主屏幕)

輸入你想給它的取“名字”，比如:Earon，點(diǎn)擊添加

(給你的應(yīng)用取個(gè)名字)

你就可以在桌面看到你的“app”啦

(在桌面)

雖然不是一個(gè)真正的app，但是幾乎所有的交互都可以實(shí)現(xiàn)，還是蠻逼真的：)

方法二：

類似PS有Psplay，Sketch有mirror一樣。

Axure同樣有一款叫Axure share的app，無需以上的設(shè)置，只需要按照屏幕尺寸設(shè)計(jì)，之后直接上傳，就可以從手機(jī)端的Axure share 中看到上傳的文件。直接打開即可：

(隨手做的丑圖)

#專欄作家#

Earon，微信公眾號(hào)：earonpm，人人都是產(chǎn)品經(jīng)理專欄作家。愛碼字、喜歡嘗試新事物、產(chǎn)品路上剛起步的新人，關(guān)注移動(dòng)產(chǎn)品。懷謙卑之心，渴望交流之中共同成長(zhǎng)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。