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

59 評論 18931 瀏覽 75 收藏 7 分鐘

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

原型基于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)面板名稱。

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

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

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

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

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

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

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

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

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

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

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)”頁面的Tap交互設(shè)置。

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

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

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

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

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

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

4 右側(cè)配置動(dòng)作區(qū)域，選中“側(cè)導(dǎo)航”組合，同時(shí)設(shè)置動(dòng)畫為“向右旋轉(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)畫為“向左旋轉(zhuǎn)”500毫秒。

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

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

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

 

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

題圖來自PEXELS，基于CC0協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
楊福偉
海外社區(qū)高級產(chǎn)品經(jīng)理
8篇作品 177056總閱讀量
07-274266 瀏覽
我在傳統(tǒng)企業(yè)推動(dòng)創(chuàng)新，要專業(yè)能力、懂利益關(guān)系、但不要顛覆
09-271083 瀏覽
鮮花電商失去的8年
11-011552 瀏覽
會(huì)讀：這款A(yù)I閱讀助理，能否升職為閱讀總監(jiān)？
03-287925 瀏覽
ChatGPT能夠如何改變教育直播場景？
03-014195 瀏覽
手把手教你做客服產(chǎn)品——（二）核心數(shù)據(jù)說明
評論
評論請登錄

  1. 楊老師您好，可以發(fā)我一份原型學(xué)習(xí)一下嗎？感謝！

    來自廣東 回復(fù)

  2. 您好，能分享原型嗎　liwy_li@126.com

    來自北京 回復(fù)

  3. 楊老師，能麻煩發(fā)我一份嗎？謝謝！1054169333@qq.com

    來自浙江 回復(fù)

  4. 楊老師，您好！您的rp文件百度網(wǎng)盤已經(jīng)不能下載，可否請您郵箱發(fā)我一份？1306819756@qq.com 萬分感謝

    來自遼寧 回復(fù)

  5. 楊老師，望發(fā)下快手rp文件到我郵箱嗎，側(cè)導(dǎo)航操作出現(xiàn)疑問，還需參考學(xué)習(xí)，感謝！本人郵箱：3049460494@qq.com

    來自湖南 回復(fù)

  6. 楊老師，你可以原文件發(fā)給我嘛，我想看下詳細(xì)的框架，我做了幾遍有問題。3565213648@qq.com，謝謝

    回復(fù)

  7. 楊老師，您好，我是初學(xué)者希望能分享一份~謝謝517341660@qq.com

    來自浙江 回復(fù)

  8. 楊老師，您好，我是初學(xué)者希望能分享一份~謝謝562490818@qq.com

    來自北京 回復(fù)

  9. 楊老師，您好！您的rp文件百度網(wǎng)盤已經(jīng)不能下載，可否請您郵箱發(fā)我一份？780584571@qq.com 萬分感謝

    來自上海 回復(fù)

  10. 楊老師 麻煩分享給我一份 謝謝 632507980@qq.com

    來自北京 回復(fù)

  11. 老師，那個(gè)網(wǎng)址失效了，想詳細(xì)看一下側(cè)邊欄的部分，能否發(fā)一份到我郵箱啊，我的郵箱：15151815142@163.com，非常感謝！

    來自江蘇 回復(fù)

    1. 已回復(fù)，謝謝！

      來自英國 回復(fù)

    2. 704668185@qq.com 老師分享的能否發(fā)我一份

      來自浙江 回復(fù)

  12. 已郵件回復(fù)，謝謝！

    來自河南 回復(fù)

  13. 楊老師，您的百度云里面沒有文件了，能否發(fā)一份到我的郵箱，我動(dòng)手實(shí)踐一下。我的郵箱295145237@qq.com，可以發(fā)我嗎 謝謝啦

    來自北京 回復(fù)

    1. 已郵件回復(fù)！

      來自河南 回復(fù)

  14. 楊老師，您好！您的rp文件百度網(wǎng)盤已經(jīng)不能下載，可否請您郵箱發(fā)我一份？lavender_0114@126.com 萬分感謝！

    來自浙江 回復(fù)

    1. 已回復(fù)，謝謝！

      來自河南 回復(fù)

  15. 楊老師，可以發(fā)下原型文件嘛？想看下細(xì)節(jié)部分。arsuna@foxmail.com，辛苦了，非常感謝~
    ??

    來自廣東 回復(fù)

    1. 已回復(fù)，謝謝！

      來自河南 回復(fù)

    2. 太感謝啦 ！?。。。。?！

      來自北京 回復(fù)

    3. 客氣，希望對你有幫助。

      來自英國 回復(fù)

    4. xdclyu@163.com 希望能給發(fā)一份rp

      來自北京 回復(fù)

    5. 已郵件回復(fù)！

      來自河南 回復(fù)

  16. 樓主，側(cè)導(dǎo)航部分有點(diǎn)迷惑 ，您的百度云里面沒有文件了，我的郵箱13693162698@163.com，可以發(fā)我嗎 謝謝啦

    來自北京 回復(fù)

    1. 已回復(fù)，謝謝！

      來自河南 回復(fù)

  17. 楊老師，可以發(fā)一下原型文件不，想在詳細(xì)看一下側(cè)邊欄的部分。我的郵箱2857140503@qq.com嗎？萬分謝謝~！

    來自廣東 回復(fù)

    1. 已回復(fù)，謝謝

      來自河南 回復(fù)

    2. 需要

      來自北京 回復(fù)

  18. 樓主可以發(fā)一下原型文件不，想在詳細(xì)看一下側(cè)邊欄的部分。非常感謝！316850794@qq.com

    來自江蘇 回復(fù)

    1. 已回復(fù)，謝謝！

      來自河南 回復(fù)

    2. 需要a

      來自北京 回復(fù)

    3. 麻煩提供郵箱。

      來自河南 回復(fù)

  19. 楊老師，您好！您的rp文件百度網(wǎng)盤已經(jīng)不能下載，可否請您郵箱發(fā)我一份？我的郵箱地址：512792765@qq.com,萬分感謝！

    來自廣東 回復(fù)

    1. 已回復(fù)，謝謝！

      來自河南 回復(fù)

  20. 楊老師，您好！您的rp文件百度網(wǎng)盤已經(jīng)不能下載，可否請您郵箱發(fā)我一份？萬分感謝！

    來自廣東 回復(fù)

  21. 20收藏1贊

    來自四川 回復(fù)

  22. 樓主，你好，我想請問一下，頂部的導(dǎo)航按鈕，是三個(gè)面板里面都要做是嗎？我本來想利用選項(xiàng)組+下面的動(dòng)態(tài)面板實(shí)現(xiàn)嘗試下的，但是這樣做側(cè)邊導(dǎo)航欄好像要出問題~
    PS：RP文件可以發(fā)一下到我郵箱710550588@qq.com嗎？非常謝謝~！

    來自湖南 回復(fù)

    1. 已郵件回復(fù)，謝謝！

      來自河南 回復(fù)

  23. 樓主我已收到rp文件，但是我和快手app對比一下，側(cè)邊欄的部分還是有差異的，真正快手上的效果可以實(shí)現(xiàn)嗎？個(gè)人感覺那個(gè)效果更好點(diǎn) ??

    來自北京 回復(fù)

    1. 可以的，目前給出的只是非常基礎(chǔ)的交互，分享給初學(xué)的同學(xué)作為入門。

      來自河南 回復(fù)

  24. 老鐵, 你的百度網(wǎng)盤掛了咯~~可否轉(zhuǎn)發(fā)一份給我學(xué)習(xí)學(xué)習(xí)? zhebushimengfei@qq.com

    來自廣東 回復(fù)

    1. 已回復(fù)，謝謝！

      來自英國 回復(fù)

  25. 樓主可以發(fā)一下原型文件不，想在詳細(xì)看一下側(cè)邊欄的部分。非常感謝！1562456918@qq.com

    來自北京 回復(fù)

    1. 已回復(fù)，謝謝！

      來自美國 回復(fù)

  26. 您好，網(wǎng)盤地址無法訪問，麻煩發(fā)一下郵箱學(xué)習(xí)一下，376822775@qq.com，感謝！

    來自北京 回復(fù)

    1. 已回復(fù)，謝謝！

      來自美國 回復(fù)

  27. 這是最基礎(chǔ)的交互吧

    來自安徽 回復(fù)

    1. 是的，非?；A(chǔ)的交互。
      基礎(chǔ)交互附以注釋說明，跟開發(fā)表達(dá)出最終的原型思路就達(dá)到了原型的目的。

      來自河南 回復(fù)

  28. 樓主，RP文件可以發(fā)一下到我郵箱lujunwei821@163.com嗎？百度網(wǎng)盤那個(gè)鏈接無法訪問了，萬分感謝！

    來自山東 回復(fù)

    1. 已回復(fù)，謝謝！

      來自美國 回復(fù)

  29. 請問一下，您在公司是做什么的？

    來自北京 回復(fù)

    1. 產(chǎn)品經(jīng)理，負(fù)責(zé)PC、移動(dòng)端需求方案及開發(fā)跟進(jìn)

      來自美國 回復(fù)

  30. 親，我正在學(xué)習(xí)產(chǎn)品，能不能發(fā)一下rp文件？百度網(wǎng)盤那個(gè)無法訪問了，謝謝，我郵箱是942465055@qq.com

    來自山西 回復(fù)

    1. 已回復(fù)，謝謝！

      來自河南 回復(fù)

    2. 樓主可以發(fā)一下原型文件不，想在詳細(xì)看一下側(cè)邊欄的部分。非常感謝！1075435617@qq.com

      來自山東 回復(fù)

    3. 已回復(fù)，謝謝！

      來自美國 回復(fù)