起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識Axure RP 教程：跑馬燈+購物車
本篇文章將會教大家利用AxureRP8，實現(xiàn)跑馬燈+購物車的效果，enjoy~
前言
本案例是目前筆者唯一一個使用AxureRP8制作的教程，說來奇怪，可能是因為AxureRP9處于測試版，還存在一定的bug，跑馬燈的效果怎么都做不出來，于是本案例就是用AxureRP8制作啦。
實現(xiàn)效果
- 實現(xiàn)跑馬燈，跑馬燈一般在游戲軟件或者PC端網(wǎng)站上常見，用于顯示提醒通知用戶查看熱點消息。
- 購物車是實現(xiàn)自動計算所選商品價格。
- （無法上傳動圖，請下載原型自行瀏覽）
實現(xiàn)原理
- 跑馬燈：跑馬燈是設定顯示區(qū)域，設定滾動文字，當文字內(nèi)容移動到一定位置的時候自動歸位，重新移動，實現(xiàn)跑馬燈的循環(huán)效果。
- 購物車：利設定簡單的計算公式即可實現(xiàn)購物車價格自動計算。
操作步驟—跑馬燈
步驟一：準備元件
準備一個動態(tài)面板，作為元件顯示框，在動態(tài)面板內(nèi)加入一個文本框，輸入跑馬燈內(nèi)容，將跑馬燈內(nèi)容轉(zhuǎn)化為動態(tài)面板，放在第一個動態(tài)面板顯示范圍的右側(cè)。如下圖所示：
元件
第一個動態(tài)面板
擺放位置如圖
步驟二：設置交互
選中內(nèi)部跑馬燈內(nèi)容轉(zhuǎn)換的動態(tài)面板，設置交互，顯示時，動態(tài)面板向左移動（移動距離和移動時間取決于跑馬燈內(nèi)容的長度），當移動結(jié)束后，將跑馬燈內(nèi)容歸為，并設置為隱藏。繼續(xù)對當前元件設置交互，當跑馬燈內(nèi)容的動態(tài)面板隱藏時，讓其顯示。這樣一來就能實現(xiàn)跑馬燈內(nèi)容的循環(huán)。
此時注意，跑馬燈內(nèi)容實現(xiàn)了循環(huán)，但是沒有開始，這時候我們依然選擇跑馬燈內(nèi)容的動態(tài)面板設置載入時，移動動態(tài)面板，移動結(jié)束后歸為并隱藏。此時就串聯(lián)起來了，用簡單的流程圖表達就是這樣的：
載入時→移動→移動結(jié)束歸為并隱藏→當隱藏時顯示→當顯示時重新移動→移動結(jié)束后歸為→再次隱藏…實現(xiàn)跑馬燈內(nèi)容的循環(huán)。
交互設置如下圖：
這樣，跑馬燈交互就設置完成啦。
操作步驟—購物車
步驟一：準備元件
準備如圖所示的元件：
步驟二：設置商品減一交互
選中減號，單擊時讓商品數(shù)量減一，需要注意需要用局部變量實現(xiàn)減法，局部變量在之前的教程中已經(jīng)多次提到，這里不做過多解釋，如有疑問，可以在公眾號留言：
步驟三：設置商品加一交互
加一交互同減一交互，不同在于一個是加一個是減，直接上圖：
這樣，在每次點擊加或者減的時候就可以實現(xiàn)自動計算處總價的交互啦。
結(jié)語
本案例使用AxureRP8制作，附上原型下載鏈接：
https://pan.baidu.com/s/1KEiaFqg3M2gY9IIvUHhKqQ
提取碼：stox
友情提示：如果預覽是看不到跑馬燈效果，請刷新重試。
作者：王得宇AIPM，公眾號：他們已經(jīng)在路上了
本文由 @王得宇AIPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
親，預覽跑馬燈顯示網(wǎng)頁崩潰呀？怎么回事呢
本來我是只寫Axure 9的教程的，但是Axure 9 這樣做完無法預覽，所以才用了Axure 8做的，如果你在預覽其他原型的時候沒問題的話，那么可能就是軟件bug之類的吧