Axure教程一:快手APP頂部Tap切換及側(cè)導(dǎo)航展示交互

59 評(píng)論 18931 瀏覽 75 收藏 7 分鐘

本系列xure學(xué)習(xí)系列共分三期,期望通過(guò)本次分享讓初學(xué)者能夠掌握Axure的交互設(shè)計(jì)。本次分享主要內(nèi)容包括:快手頂部Tab切換交互;側(cè)導(dǎo)航展開(kāi)交互;視頻播放頁(yè)交互以及視頻拍攝頁(yè)交互。

原型基于Axure8制作,以下是相關(guān)交互架構(gòu)圖。

首先查看完整原型預(yù)覽:http://bdh2ot.axshare.com/

以下是第一期分享內(nèi)容。

一、 頂部Tap切換

1 設(shè)置動(dòng)態(tài)面板

1.1 拖入動(dòng)態(tài)面板,600*900。

1.2 雙擊動(dòng)態(tài)面板,設(shè)置動(dòng)態(tài)面板名稱(chēng)。

1.3 點(diǎn)擊“+”號(hào),設(shè)置動(dòng)態(tài)面板狀態(tài)(快手APP頂部共3個(gè)Tap,所以本次也需要對(duì)應(yīng)添加三個(gè))。

1.4 點(diǎn)擊確定,添加完成。

2 完成Tap頁(yè)低保真原型原型(以發(fā)現(xiàn)頁(yè)為例)

2.1 雙擊“發(fā)現(xiàn)”,進(jìn)入動(dòng)態(tài)面板-發(fā)現(xiàn)狀態(tài)頁(yè)面。

2.2 在“發(fā)現(xiàn)頁(yè)面”-利用元件庫(kù),參考快手APP制作低保真原型。

2.3 每一個(gè)原件做好命名,方便做交互時(shí)進(jìn)行區(qū)別辨認(rèn)。

2.4 按照以上三點(diǎn)規(guī)則,分別制作“關(guān)注”頁(yè)及“同城”頁(yè)低保真原型。

2.5 至此,首頁(yè)Tap交互設(shè)計(jì)前工作準(zhǔn)備完成,開(kāi)始交互設(shè)計(jì)。

3 Tap交互設(shè)計(jì)

3.1 雙擊“發(fā)現(xiàn)”,進(jìn)入動(dòng)態(tài)面板-發(fā)現(xiàn)狀態(tài)頁(yè)面。

3.2 首先,點(diǎn)擊選中“關(guān)注”Tap,并雙擊 “鼠標(biāo)單擊時(shí)”用例,選擇“設(shè)置面板狀態(tài)”動(dòng)作,并將狀態(tài)選擇為“發(fā)現(xiàn)”。

3.3 其次,點(diǎn)擊選中“關(guān)注”Tap,并雙擊 “鼠標(biāo)單擊時(shí)”用例,選擇“設(shè)置面板狀態(tài)”動(dòng)作,并將狀態(tài)選擇為“關(guān)注”。

3.4 第三,點(diǎn)擊選中“同城”Tap,并雙擊 “鼠標(biāo)單擊時(shí)”用例,選擇“設(shè)置面板狀態(tài)”動(dòng)作,并將狀態(tài)選擇為“同城”。

3.5 按照以上4點(diǎn),即可完成“發(fā)現(xiàn)”頁(yè)面的Tap交互設(shè)置。

3.6 同樣分別進(jìn)入“關(guān)注”及“同城”頁(yè)面,依照同樣的方法設(shè)置Tap交互。

3.7 設(shè)置完成后,則本次Tap交互設(shè)計(jì)完成,趕快F5預(yù)覽一下自己的成功吧。

二、 側(cè)導(dǎo)航展開(kāi)交互

1 完成“側(cè)導(dǎo)航頁(yè)”低保真原型,并做好原件命名。

2 將側(cè)導(dǎo)航頁(yè)面進(jìn)行組合,命名為“側(cè)導(dǎo)航”,并設(shè)為隱藏狀態(tài)。

3 “關(guān)注”頁(yè),點(diǎn)擊“側(cè)導(dǎo)航”按鈕并雙擊 “鼠標(biāo)單擊時(shí)”用例,選擇“顯示”動(dòng)作。

4 右側(cè)配置動(dòng)作區(qū)域,選中“側(cè)導(dǎo)航”組合,同時(shí)設(shè)置動(dòng)畫(huà)為“向右旋轉(zhuǎn)”500毫秒。

5 選中側(cè)導(dǎo)航遮罩區(qū),并雙擊 “鼠標(biāo)單擊時(shí)”用例,選擇“隱藏”動(dòng)作。

6 右側(cè)配置動(dòng)作區(qū)域,選中“側(cè)導(dǎo)航”組合,同時(shí)設(shè)置動(dòng)畫(huà)為“向左旋轉(zhuǎn)”500毫秒。

7 設(shè)置完成后,則本次側(cè)導(dǎo)航交互設(shè)計(jì)完成,趕快F5預(yù)覽一下自己的成功。

本次分享到這里完成,下一期繼續(xù)分享視頻播放頁(yè)的動(dòng)作交互。

RP文件下載地址:鏈接: https://pan.baidu.com/s/1skKsvOp 密碼: ddrg

 

本文由 @楊福偉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 老師可以發(fā)一下原型圖嗎?我的郵箱是yeyw_888@sina.com,非常感謝老師的講解

    來(lái)自北京 回復(fù)
  2. 楊老師您好,可以發(fā)我一份原型學(xué)習(xí)一下嗎?感謝!418483582@qq.com

    來(lái)自北京 回復(fù)