我們?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)切換效果制作完成。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。