tft每日頭條

 > 圖文

 > 編程的實例

編程的實例

圖文 更新时间:2024-12-31 05:15:19

人人都是産品經理社區推出産品經理培訓課程,讓BAT産品總監手把手帶你學産品吧!

前段時間做一個開放平台的原型。

大家讨論完需求就希望,快點出原型(第二天)。而且要求“高保真”。

于是在“快速”“高保真”的要求下,自己對于所有的頁面交互都要求是,對需要使用原型的用戶(産品、研發、測試)而言,達到對應的效果,而自己在實現時采用最簡單的方法。

正巧今天看到網站上有教程教如何做一個輪播banner 。

點開略看了一下,教程做的很複雜。其實使用axure做交互一般都比較簡單,但由于其各種小窗口太多了,各種截圖放一起,看上去很容易亂。之前小樓老師發布的一個教程居然也被人吐槽講的這麼亂怎麼做産品(扶額)。

【正題】

1、首先看下輪播banner的組成。

編程的實例(最簡單的實現方法)1

上圖中,左邊是頁面 展現的 banner輪播的圖,右側則是對應的兩個動态面闆。

可以看到右側動态面闆命名非常簡單(根本起不到提示作用,但這說明此處面闆命名不太重要,自己能區分就可以)

2、接下來看一下兩個面闆的交互效果。

編程的實例(最簡單的實現方法)2

如上是對于 輪播圖片banner的 動态面闆設置。

設置面闆在 【載入時】有交互,基本就是兩個動作:

  1. 面闆不是在一加載就開始切換的,我設置的先等待1000毫秒。
  2. 設置面闆狀态 為【NEXT】(即按照1、2、3的順序進行切換);

勾選從最後一個到第一個自動跳轉;勾選圖像輪播間隔。具體時間間隔可自己設置。

為了讓banner輪播看上去更逼真,可以加個 進入和退出的動畫。此處選擇的時向左滑動。用時500毫秒。

以上是banner 面闆的全部交互。

做完這個切換之後其實基本算是banner做完了。但是總覺得缺點什麼。——缺我們常見的banner切換時的頁面指示導航按鈕。

依然是采用很簡單的方式 很暴力的加上的。

首先面闆中的1、2、3狀态内容如下圖:

編程的實例(最簡單的實現方法)3

其對應的交互面闆,基本和banner面闆的設置是一樣的。唯一的不同是,在面闆切換間的效果,這裡不再是向左滑動,而是淡入淡出(畢竟三個指示按鈕滑來滑去,是很滑稽的)

具體交互頁面如下:

編程的實例(最簡單的實現方法)4

額,說到這裡,其實就沒了。

謝謝。

本文由科大訊飛 @小八 原創投稿,并經人人都是産品經理編輯。未經許可,禁止轉載。

,

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

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved