相信大家對看視頻時候的彈幕都不陌生，很多時候甚至?xí)X得彈幕比視頻本身還有趣，因此，現(xiàn)在大多數(shù)視頻網(wǎng)站或者視頻app都有這個彈幕功能。既然這個功能這么重要，那么在axure原型設(shè)計中又是怎么實現(xiàn)的呢？這篇文章就是教大家如何設(shè)計逼真的彈幕原型圖~~

第一步：放置相關(guān)控件

首先，擺好背景圖，其實就是一個手機外形圖和一張視頻截圖，《三生三世》最近這么火，那這里就截一張冪姐的照片當(dāng)背景圖的。

然后，拖拉一個動態(tài)面板至視頻截圖的上方，并命名為“彈幕”。

最后，在“彈幕”動態(tài)面板的State1面板狀態(tài)中分兩行放置若干個文本標簽，文本標簽的字隨意，反正大家敲彈幕的時候也挺隨意的，文本標簽的字體顏色為白色和橙色隨機混雜。這里需要強調(diào)的是，所有的文本標簽的總體長度應(yīng)該是動態(tài)面板長度的兩倍，其中前面一半組合成整體，并命名為“彈幕文字1”，后面一半組合成整體，并命名為“彈幕文字2”。

第二步：設(shè)置“彈幕”動態(tài)面板的載入時用例

首先，設(shè)置變量值OnLoadVariable為0；然后，設(shè)置顯示“彈幕”動態(tài)面板。

第三步：設(shè)置“彈幕”動態(tài)面板的顯示時用例

首先，添加一個顯示時用例，條件設(shè)置為OnLoadVariable等于0，為該用例添加如下6步動作：

1. “彈幕文字1”和“彈幕文字2”都在x軸方向向左相對移動“彈幕”動態(tài)面板寬度的距離，移動過程是線性的，用時10000毫秒；
2. 等待0毫秒（一定不能缺了這步，要不然循環(huán)不起來）；
3. 隱藏“彈幕”動態(tài)面板；
4. “彈幕文字1”在x軸方向向右相對移動2個“彈幕”動態(tài)面板寬度的距離；
5. 設(shè)置變量值OnLoadVariable為1；
6. 顯示“彈幕”動態(tài)面板；

然后，再添加一個顯示時用例，條件設(shè)置為OnLoadVariable等于1，為該用例添加如下6步動作：

1. “彈幕文字1”和“彈幕文字2”都在x軸方向向左相對移動“彈幕”動態(tài)面板寬度的距離，移動過程是線性的，用時10000毫秒；
2. 等待0毫秒（一定不能缺了這步，要不然循環(huán)不起來）；
3. 隱藏“彈幕”動態(tài)面板；
4. “彈幕文字2”在x軸方向向右相對移動2個“彈幕”動態(tài)面板寬度的距離；
5. 設(shè)置變量值OnLoadVariable為0；
6. 顯示“彈幕”動態(tài)面板；

搞定，點擊預(yù)覽就可以看到彈幕不斷地循環(huán)地飄過。

其實一開始我是打算用動態(tài)面板像輪播圖那樣實現(xiàn)的，但后來發(fā)現(xiàn)效果非常不理想，因為輪播圖在進入和退出的過程都有一個緩沖的過程，以導(dǎo)致循環(huán)不順暢，所以后來使用了如上方法來實現(xiàn)。

堅持分享axure原型設(shè)計小技巧，希望對大家有幫助。

效果圖：http://2x2mmk.axshare.com

作者：維度，個人博客：http://weidublog.com

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