Axure設計：百詞斬單詞翻轉還原效果實現

原標題：Axure設計：百詞斬單詞翻轉還原效果實現

前幾天突然看到人人都是產品經理推送文章，原型設計：百詞斬單詞翻轉還原效果實現，作者xuruiuiui，仔細看了下文章，發現作者是用墨刀這個軟體做的，且是點擊效果和百詞斬首頁還是有點差別的，然後一時手癢，自己重新用Axure做了下這個原型。

百詞斬官網效果如下：

用Axure做的百詞斬原型錄屏。

以下是我製作該原型的步驟：

工具：Axure

1、選取組件：動態面板，動態面板的大小為300*260。

2、對動態面板進行正反2面設置。

3、點擊動態面板中正模塊進入正模塊，並對模塊動態框內進行crawl文字或圖片插入。

4、點擊動態面板中反模塊進入反模塊，並對模塊動態框內進行視頻或圖片插入。

5、設置反面交互事件。

設計交互，選擇當滑鼠移入時，設置面板狀態-選擇Crawl動態面板-進入和退出狀態分別為向右翻轉-推動拉動元件。

具體請看下圖：

6、設置正面面交互事件，方式和設置反面一樣。

歡迎指正。

本文由 @productm66 原創發佈於人人都是產品經理。未經許可，禁止轉載

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！