效果說明:
通過點擊向前向后的按鈕實現(xiàn)某模塊中的內(nèi)容前后移動。這個設計可以應用在有限的空間內(nèi)顯示眾多內(nèi)容時候,且內(nèi)容并不是非常重要的。它的缺點是由于隱藏了后面的內(nèi)容,點擊率肯定沒有第一屏顯示的內(nèi)容點擊率高,因此重要的信息需要傳達給用戶時不宜采用此方法。
效果圖示:
實現(xiàn)使用到的action:
1、move panel(s) /*根據(jù)絕對坐標或相對坐標來移動動態(tài)面板 */
2、wait time(s) /*等待多少毫秒(ms)后再進行這個動作*/
實現(xiàn)思路:
1、使用到兩個動態(tài)面板,一個動態(tài)面板用來顯示用戶看到的第一屏內(nèi)容,第二個動態(tài)面板用來顯示所有的內(nèi)容。這里第二個動態(tài)面板肯定比第一個動態(tài)面板要長。
2、動作只要在向前和向后按鈕中去設置,想讓用戶單擊時滾動,就在OnClick中添加,想讓用戶鼠標移到按鈕上時滾動,就在OnMouseEnter中添加。本次例子是OnClick.
3、在OnClick中,添加action,首先當單擊的時候要移動第二個面板中的內(nèi)容,使用move panel(s)動作,移動的時候有兩個選項 "to"和“by”,這里使用by,x軸填寫你要移動距離,如果是點擊向后按鈕,這里的距離要加上負號,如果點擊的是向前按鈕,這里填的就是正數(shù)。
4、接著使用wait time(s)動作,為了實現(xiàn)移動中有動感,那么在這里可以使用等待200ms后再向前移動一點。再向前移動一點。(你要讓用戶單擊按鈕后看到的內(nèi)容的最前的那個位置)
5、最后再使用move panel(s)移動到你想讓用戶點擊按鈕時看到內(nèi)容的最前位置。(如我例子中,當用戶點擊向后時讓他看到“以2方塊開始”的內(nèi)容)
要點:
1、為了實現(xiàn)動作流暢,在用戶完成一次點擊的時候,可以先讓界面移動一點,等待一會時間,再移動到最終的位置。
要點截圖:
圖1:使用到的動態(tài)面板
圖2:點擊向右移動
圖3:點擊向右移動
下載原型: