Axure教程三:快手APP 視頻播放頁交互說明
本文是系列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)航展示交互
作者:海外社區(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é)議
希望能分享一份~謝謝WXC227788@163.com
產(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ì)大牛哦~
網(wǎng)盤文件已損壞,求發(fā)郵箱841482580@qq.com 謝謝您
老師,可否把關(guān)于快手的這三個(gè)原型發(fā)給我,產(chǎn)品小白一枚。萬分感謝1162857282@qq.com
楊老師,您好,我是初學(xué)者希望能分享一份~謝謝517341660@qq.com
鏈接失效了, ?? ,麻煩楊老師發(fā)一份,574701259@qq.com,感謝~
好人,分享一下吧,跪謝?。?darcyjj@163.con
做的太好了 可以發(fā)郵箱學(xué)習(xí)一下嗎 2273480937@qq.com
已回復(fù)
網(wǎng)盤文件已損壞,發(fā)個(gè)郵箱吧 1048924272@qq.com ,LZ好人一生平安
已回復(fù),謝謝!