使用Axure實(shí)現(xiàn)iPhone推動(dòng)切換效果
發(fā)布時(shí)間:2022-03-21 10:08 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2349

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

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

我們首先在A(yíng)xure中建立一個(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)面板的作用是將可見(jiàn)內(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)作制作過(guò)程中多多體會(huì)。

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

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

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

UI交互app及axure設(shè)計(jì)教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買(mǎi)
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類(lèi)選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC