我們在產(chǎn)品原型設(shè)計(jì)時(shí)，經(jīng)常需要制作高保真原型，在視覺效果及交互體驗(yàn)上盡量與最終產(chǎn)品相近，以便向別人展示或者供用戶調(diào)研時(shí)使用。
移動平臺的交互方式非常豐富，下面就像大家介紹幾種iPhone上常用的交互動作在Axure中的實(shí)現(xiàn)方式。
我們首先在Axure中建立一個(gè)iPhone的外殼模型作為主模擬界面。白色區(qū)域?yàn)槠聊伙@示區(qū)域，大小為320px*480px（iPhone屏幕的1/4大小，方便瀏覽）
推動切換
推動切換經(jīng)常用于層級轉(zhuǎn)換時(shí)，當(dāng)點(diǎn)擊操作完成后需要切換至下一層級界面時(shí)，當(dāng)前界面向左推出，新界面從右側(cè)推入。此操作多用于有層級關(guān)系的界面之間的切換。
實(shí)現(xiàn)步驟：
1.建立一個(gè)動態(tài)面板，尺寸320*480，命名為“屏幕”，放置在iPhone框架中的白色區(qū)域。此動態(tài)面板的作用是將可見內(nèi)容限制在屏幕顯示范圍內(nèi)。
2.進(jìn)入動態(tài)面板“屏幕”中，再建立一個(gè)動態(tài)面板，位置（0,0），尺寸640*480，命名為“推動切換”。此動態(tài)面板的作用是控制界面切換的動作。
3.進(jìn)入動態(tài)面板“推動切換”，在有效區(qū)域繪制兩個(gè)320*480的色塊（給色塊設(shè)置不同顏色以方便區(qū)分）及按鈕。
4.選中“點(diǎn)擊切換”按鈕，為其添加單擊時(shí)的交互動作：當(dāng)單擊該按鈕時(shí)，動態(tài)面板“推動切換”向左移動320px，即顯示屏幕由左側(cè)白色屏幕切換至右側(cè)灰色屏幕。
移動位置有兩種方式：（絕對 左：-320 上：0）或者（相對 左：-320 上：0）可以達(dá)到同樣的效果。
絕對移動是將動態(tài)面板移動到一個(gè)固定的坐標(biāo)，相對移動是將動態(tài)面板沿左/上移動相應(yīng)距離。若動態(tài)面板移動到一個(gè)固定的位置或者可以獲取準(zhǔn)確的位置數(shù)據(jù)，推薦使用絕對移動，因?yàn)橄鄬σ苿虞^容易出現(xiàn)多次點(diǎn)擊會連續(xù)移動的bug。二者區(qū)別及適用情況需要在交互動作制作過程中多多體會。
動畫中有“揮動”“線性”“緩慢結(jié)束”“彈跳”等多種動作方式可供選擇，可根據(jù)實(shí)際需要進(jìn)行設(shè)置。
5.同理，為“點(diǎn)擊返回”按鈕添加交互動作，點(diǎn)擊該按鈕后切換回之前的狀態(tài)
至此，推動切換效果制作完成。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。