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

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

學(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í)”用例，選擇“顯示”動作。

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

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

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

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

四、 播放頁“評論查看”交互

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

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

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

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

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

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

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

相關(guān)閱讀

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

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

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

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

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