Axure教程三:快手APP 視頻播放頁交互說明

11 評(píng)論 15530 瀏覽 57 收藏 7 分鐘

本文是系列Axure教程的完結(jié)篇,主要分享快手APP視頻播放頁的相關(guān)交互,包括收藏、關(guān)注、分享及評(píng)論內(nèi)容查看。

寫到這里,要和初入產(chǎn)品坑的同學(xué)特別說明一點(diǎn),Axure歸根到底只是一個(gè)工具,它的作用就是幫助產(chǎn)品經(jīng)理和開發(fā)人員一起,共同說明產(chǎn)品需求,它作為工具本身,也有自身的優(yōu)勢(shì)和劣勢(shì)。

學(xué)習(xí)交互最主要的目的是鍛煉自己的邏輯思考能力,不要為了學(xué)習(xí)而學(xué)習(xí)。

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

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

以下是第三期分享內(nèi)容,首先查看完整交互效果:

一、 設(shè)置進(jìn)入播放頁頁與退出播放頁

這一部分的交互操作和第二篇中進(jìn)入拍攝頁的交互操作邏輯相同,這里就當(dāng)一個(gè)作業(yè)了,小伙伴們自己課下完成。如果有不清楚地方,可以點(diǎn)擊參考。

二、 播放頁“喜歡”交互

1.完成“播放頁”低保真原型,并做好原件命名。

2. “喜歡”按鈕,設(shè)置為兩種狀態(tài):喜歡前與喜歡后,并將喜歡后設(shè)為“隱藏狀態(tài)”。

3. 選中“未喜歡”按鈕,右側(cè)事件選擇鼠標(biāo)單擊時(shí),顯示“已喜歡”按鈕。

4. 選中“已喜歡”按鈕,右側(cè)事件選擇鼠標(biāo)單擊時(shí),隱藏“已喜歡”按鈕。

5. “關(guān)注交互”邏輯同“喜歡邏輯”,這一交互大家可以自己完成。

6. ?設(shè)置完成后,則本次喜歡與關(guān)注交互設(shè)計(jì)完成,趕快F5預(yù)覽一下自己的成果。

三、 播放頁“分享”及“舉報(bào)”交互

1.完成“分享頁”低保真原型,并做好原件命名。

2. ?將側(cè)分享頁面進(jìn)行組合,命名為“分享頁”,并設(shè)為隱藏狀態(tài)。

3. “播放頁”頁,選擇“分享”按鈕并雙擊 “鼠標(biāo)單擊時(shí)”用例,選擇“顯示”動(dòng)作。

4. 右側(cè)配置動(dòng)作區(qū)域,選中“分享頁”組合,同時(shí)設(shè)置動(dòng)畫為“向上滑動(dòng)”500毫秒。

5. “分享頁”,選中“取消分享” 使用“鼠標(biāo)單擊時(shí)”用例,選擇“隱藏”動(dòng)作。

6. 右側(cè)配置動(dòng)作區(qū)域,選中“分享頁”組合,同時(shí)設(shè)置動(dòng)畫為“向下滑動(dòng)”500毫秒。

7. 設(shè)置完成后,則本次分享交互設(shè)計(jì)完成,趕快F5預(yù)覽一下自己的成果。

四、 播放頁“評(píng)論查看”交互

1.拖入動(dòng)態(tài)面板,命名為“評(píng)論模塊”,并設(shè)置W393、H180。

2. 動(dòng)態(tài)面板中完成“評(píng)論模塊”低保真原型,并做好原件命名(評(píng)論模塊低保真原型的寬度不能超過動(dòng)態(tài)面板)。

3. 設(shè)置動(dòng)態(tài)面板滾動(dòng)條,選擇為“自動(dòng)顯示垂直滾動(dòng)條”。

4. F5預(yù)覽會(huì)發(fā)現(xiàn)有滾動(dòng)條影響美觀,可以拖入一個(gè)灰色舉行進(jìn)行遮擋即可。

5. 設(shè)置完成后,則本次評(píng)論模塊查看交互設(shè)計(jì)完成,趕快F5預(yù)覽一下自己的成果。

本次分享到這里完成,期待與大家做更多的分享。如果大家有任何疑問或建議,歡迎跟帖留言。

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

相關(guān)閱讀

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

Axure教程二:快手APP 拍攝頁交互說明

 

作者:海外社區(qū)高級(jí)產(chǎn)品經(jīng)理,7年互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn),主要負(fù)責(zé)知名海外社區(qū)的產(chǎn)品設(shè)計(jì)。初次開始分享文章,后期將會(huì)陸續(xù)分享自己在海外社區(qū)產(chǎn)品設(shè)計(jì)中的經(jīng)驗(yàn)。

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 希望能分享一份~謝謝WXC227788@163.com

    來自北京 回復(fù)
  2. 產(chǎn)品小白沒看懂復(fù)雜的交互設(shè)計(jì),想從基礎(chǔ)開始學(xué),卻無從下手?

    ?? 可以找Axure實(shí)戰(zhàn)班的助教小可愛@CC-起點(diǎn)學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:大禮包

    領(lǐng)取原型設(shè)計(jì)大禮包,還有不定期的Axure免費(fèi)視頻課程分享,老師在線答疑,多學(xué)多看多思考,你也能成為Axure原型設(shè)計(jì)大牛哦~

    來自廣東 回復(fù)
  3. 網(wǎng)盤文件已損壞,求發(fā)郵箱841482580@qq.com 謝謝您

    來自福建 回復(fù)
  4. 老師,可否把關(guān)于快手的這三個(gè)原型發(fā)給我,產(chǎn)品小白一枚。萬分感謝1162857282@qq.com

    回復(fù)
  5. 楊老師,您好,我是初學(xué)者希望能分享一份~謝謝517341660@qq.com

    來自浙江 回復(fù)
  6. 鏈接失效了, ?? ,麻煩楊老師發(fā)一份,574701259@qq.com,感謝~

    來自浙江 回復(fù)
  7. 好人,分享一下吧,跪謝?。?darcyjj@163.con

    來自北京 回復(fù)
  8. 做的太好了 可以發(fā)郵箱學(xué)習(xí)一下嗎 2273480937@qq.com

    來自陜西 回復(fù)
    1. 已回復(fù)

      來自河南 回復(fù)
  9. 網(wǎng)盤文件已損壞,發(fā)個(gè)郵箱吧 1048924272@qq.com ,LZ好人一生平安

    來自廣東 回復(fù)
    1. 已回復(fù),謝謝!

      來自河南 回復(fù)