前一篇《AxureRP實戰（二）Banner輪播圖交互（基礎篇）》用淘寶的首頁banner案例講解了如何運用動态面闆實現banner輪播圖的切換，有了基本交互功能。但是，交互效果還有些欠缺，在用戶體驗上不是很好，交互切換比較生硬。

本次講解緊接實戰（二）的内容，繼續講解banner輪播圖，利用變量優化輪播圖的用戶體驗。

共分三部分進行用戶體驗優化，下面對優化内容進行詳細講解：

底部按鈕轉換圖片時要有向左或向右的移動過程，體驗會更順暢，利用給底部圓形按鈕添加“onLoadVariable”變量來實現。

圖片切換思路是：

當前一個banner圖為banner01時，點擊第二個圓點按鈕，圖片向左移動；當前一個banner圖為banner02時，點擊第一個圓點按鈕，圖片向右移動。

根據圖片切換思路，我們把每一個圓點按鈕都編上“OnLoadVariable” 變量值：

點選第一個圓形按鈕，點擊“添加動作” --> 選擇“設置變量值” --> 選擇“OnLoadVariable” --> 值設置為“1” -->

選擇設置好的變量交互，将變量交互複制粘貼到另外三個圓形按鈕上，分别将值改為2、3、4 -->

下面給四個圓形按鈕添加判斷條件，當點擊圓形按鈕時，需要判斷“OnLoadVariable” 值是大是小，從而能知道圖片向哪邊滑動。

點選第一個圓形按鈕，點擊“啟用情形”，打開“情形編輯”彈窗 --> 點擊“添加條件” --> 依次選擇“變量值”、“OnLoadVariable”、“>”、“值”、輸入“1” --> “确定” -->

點開“設置面闆狀态”一欄 --> 進入和退出動畫都選擇“向右滑動”，時間為200毫秒 -->

第二和第三個圓形按鈕需要添加大于和小于兩種情形來判斷。

例如點選第二個圓形按鈕 --> 點擊“啟用情形”，打開“情形編輯”彈窗 --> 點擊“添加條件” --> 依次選擇“變量值”、“OnLoadVariable”、“>”、“值”、輸入“2” --> “确定” -->

點開“設置面闆狀态”一欄 --> 進入和退出動畫都選擇“向右滑動”，時間為200毫秒 -->

複制單擊交互，再次點擊“啟用情形”，打開“情形編輯”彈窗 --> 點擊“添加條件” --> 依次選擇“變量值”、“OnLoadVariable”、“<”、“值”、輸入“2” --> “确定” -->

點開“設置面闆狀态”一欄 --> 進入和退出動畫都選擇“向左滑動”，時間為200毫秒 -->

第三個按鈕同理第二個按鈕 -->

第四個按鈕隻有小于的情形 -->

到這裡，底部圓形按鈕的切換基本完成。但是，當我們點擊某一個按鈕後，還是希望圖片接着自動輪播，如何實現呢？

需要增加面闆狀态，設置自動輪播：

點選第一個圓形按鈕點擊“添加動作” --> 元件動作選擇“設置面闆狀态” --> 目标選擇“banner”動态面闆 --> 選擇“下一項”，勾選“向後循環” --> 進入、退出動畫選擇“向左循環”，時間200毫秒 --> 點開“更多選項”，勾選“循環間隔”，為4000毫秒 --> “确定” -->

第一個圓形按鈕整體交互如下：

複制向左循環的面闆狀态，粘貼到其他圓形按鈕上 -->

到此，底部圓形按鈕的交互就優化完成了。

點擊側邊按鈕切換圖片時，底部按鈕需要聯動對應設置選中狀态，并且在鼠标至于圖片上時，側邊按鈕才顯示出來。

應用鼠标移入和移出的交互來達到顯示、隐藏的目的，這裡可能會走彎路（不想看彎路可快速找到下面“正确的做法”）：

選擇兩個側邊按鈕，鼠标右鍵選擇“設為隐藏” -->

選擇“banner”動态面闆，點擊“新建交互” --> 選擇“鼠标移入時” --> 選擇“顯示/隐藏” --> 選擇“right”組合按鈕 --> 選擇“顯示” --> “确定” -->

鼠标移入時交互點擊“添加目标” --> 選擇“left”組合按鈕 --> 選擇“顯示” --> “确定” -->

同理，添加“鼠标移出時”的交互：

預覽查看交互，确實是鼠标至于圖片之上顯示按鈕，但是無法點擊按鈕，要如何做才能正常點擊按鈕呢？

要轉變思路：不用顯示隐藏，當按鈕一直顯示的情況下，通過改變不透明度的方式達到顯示隐藏的效果。

下面是“正确的做法”：

先将左右兩邊側邊按鈕組合内部的兩個元件樣式都設置為100% -->

接下來需要在三個位置設置按鈕的不透明度：

鼠标移入、移出banner圖片；鼠标移入、移出側邊按鈕；頁面載入時。

（1）設置鼠标移入banner圖片的側邊按鈕的不透明度：

選中banner動态面闆，點擊“新建交互” --> 選擇“鼠标移入時” --> 元件動作找到“設置不透明度” --> 找到右側按鈕組合的向右箭頭 --> 不透明度為100% --> “确定” -->

點擊“添加目标” --> 找到右側按鈕的半圓形 --> 設置不透明度為“32” --> “确定” -->

複制設置好的不透明度，粘貼一份 --> 将目标元件改為左側按鈕，設置不透明度 -->

鼠标移出時的不透明度同理鼠标移入時，移出的時候側邊按鈕元件不透明度都為0，banner動态面闆的交互如下：

（2）鼠标移入、移出側邊按鈕時的不透明度

側邊按鈕在banner圖片上，還需要加入鼠标移入、移出側邊按鈕的不透明度，和鼠标移入、移出圖片思路一樣，隻是作為産品，淘寶産品想到了更細微的用戶體驗，移入側邊按鈕時，半圓形的元件顔色會略深一些，不透明度改為48 ：

側邊按鈕整體交互如下：

（3）頁面載入時和鼠标移出圖片一樣，側邊按鈕不顯示

添加頁面載入時的側邊按鈕不透明度，且不透明度都為0 -->

以上就是側邊按鈕顯示隐藏效果的正确交互做法。

到此，還不能實現聯動，當我們點擊側邊導航時，底部的原型按鈕會跟着變，需要聯動。

還需要一個環節：添加banner圖片的“狀态改變時”的交互，與對應的四個圓形按鈕相連，即：

當顯示banner01時：第一個圓形按鈕被選中；

當顯示banner02時：第二個圓形按鈕被選中；

當顯示banner03時：第三個圓形按鈕被選中；

當顯示banner04時：第四個圓形按鈕被選中；

為方便找，圓形按鈕依次命名為“circle01”、“circle02”、“circle03”、“circle04” 。

點選“banner”動态面闆，點擊“新建交互” --> 找到“狀态改變時” --> 元件動作選擇“設置選中” --> 選擇“circle01” --> 值為“真” --> “确定” -->

點擊“啟用情形” ，打開編輯情形彈窗 --> 點擊“添加條件” --> 依次選擇“面闆狀态”、“當前”、“==”、“狀态”、“banner01” -->

複制粘貼情形1 --> 依次修改情形條件和選中的圓形按鈕，兩者一一對應 -->

到此，側邊按鈕的交互就完成了。

找到“頁面載入時”的交互，點擊“添加動作” --> 元件動作選擇“設置面闆狀态” --> 目标選擇“banner”動态面闆 --> 選擇“下一項”，勾選“向後循環” --> 進入、推出動畫選擇“向左滑動”，時間為200毫秒 --> 點開“更多選項”，時間間隔改為4000毫秒 --> “完成” -->

以上，淘寶首頁banner輪播圖案例的講解就先告一段落了。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!