轉(zhuǎn)載自：老二牛車教育???【axure手機(jī)原型】Axure實(shí)現(xiàn)iPhone推動(dòng)切換效果

我們?cè)诋a(chǎn)品原型設(shè)計(jì)時(shí)，經(jīng)常需要制作高保真原型，在視覺效果及交互體驗(yàn)上盡量與最終產(chǎn)品相近，以便向別人展示或者供用戶調(diào)研時(shí)使用。

移動(dòng)平臺(tái)的交互方式非常豐富，下面就像大家介紹幾種iPhone上常用的交互動(dòng)作在Axure中的實(shí)現(xiàn)方式。

我們首先在Axure中建立一個(gè)iPhone的外殼模型作為主模擬界面。白色區(qū)域?yàn)槠聊伙@示區(qū)域，大小為320px*480px（iPhone屏幕的1/4大小，方便瀏覽）

推動(dòng)切換

推動(dòng)切換經(jīng)常用于層級(jí)轉(zhuǎn)換時(shí)，當(dāng)點(diǎn)擊操作完成后需要切換至下一層級(jí)界面時(shí)，當(dāng)前界面向左推出，新界面從右側(cè)推入。此操作多用于有層級(jí)關(guān)系的界面之間的切換。

實(shí)現(xiàn)步驟：

1.建立一個(gè)動(dòng)態(tài)面板，尺寸320*480，命名為“屏幕”，放置在iPhone框架中的白色區(qū)域。此動(dòng)態(tài)面板的作用是將可見內(nèi)容限制在屏幕顯示范圍內(nèi)。

2.進(jìn)入動(dòng)態(tài)面板“屏幕”中，再建立一個(gè)動(dòng)態(tài)面板，位置（0,0），尺寸640*480，命名為“推動(dòng)切換”。此動(dòng)態(tài)面板的作用是控制界面切換的動(dòng)作。

3.進(jìn)入動(dòng)態(tài)面板“推動(dòng)切換”，在有效區(qū)域繪制兩個(gè)320*480的色塊（給色塊設(shè)置不同顏色以方便區(qū)分）及按鈕。

4.選中“點(diǎn)擊切換”按鈕，為其添加單擊時(shí)的交互動(dòng)作：當(dāng)單擊該按鈕時(shí)，動(dòng)態(tài)面板“推動(dòng)切換”向左移動(dòng)320px，即顯示屏幕由左側(cè)白色屏幕切換至右側(cè)灰色屏幕。

移動(dòng)位置有兩種方式：（絕對(duì) 左：-320 上：0）或者（相對(duì) 左：-320 上：0）可以達(dá)到同樣的效果。

絕對(duì)移動(dòng)是將動(dòng)態(tài)面板移動(dòng)到一個(gè)固定的坐標(biāo)，相對(duì)移動(dòng)是將動(dòng)態(tài)面板沿左/上移動(dòng)相應(yīng)距離。若動(dòng)態(tài)面板移動(dòng)到一個(gè)固定的位置或者可以獲取準(zhǔn)確的位置數(shù)據(jù)，推薦使用絕對(duì)移動(dòng)，因?yàn)橄鄬?duì)移動(dòng)較容易出現(xiàn)多次點(diǎn)擊會(huì)連續(xù)移動(dòng)的bug。二者區(qū)別及適用情況需要在交互動(dòng)作制作過程中多多體會(huì)。

動(dòng)畫中有“揮動(dòng)”“線性”“緩慢結(jié)束”“彈跳”等多種動(dòng)作方式可供選擇，可根據(jù)實(shí)際需要進(jìn)行設(shè)置。

5.同理，為“點(diǎn)擊返回”按鈕添加交互動(dòng)作，點(diǎn)擊該按鈕后切換回之前的狀態(tài)

至此，推動(dòng)切換效果制作完成.

轉(zhuǎn)載請(qǐng)注明：老二牛車教育???【axure手機(jī)原型】Axure實(shí)現(xiàn)iPhone推動(dòng)切換效果

總結(jié)

以上是生活随笔為你收集整理的【axure手机原型】Axure实现iPhone推动切换效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。