Axure設計：百詞斬單詞翻轉(zhuǎn)還原效果實現(xiàn)

21 評論 9225 瀏覽 50 收藏 3 分鐘

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

百詞斬官網(wǎng)效果如下：

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

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

工具：Axure

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

2、對動態(tài)面板進行正反2面設置。

3、點擊動態(tài)面板中正模塊進入正模塊，并對模塊動態(tài)框內(nèi)進行crawl文字或圖片插入。

4、點擊動態(tài)面板中反模塊進入反模塊，并對模塊動態(tài)框內(nèi)進行視頻或圖片插入。

5、設置反面交互事件。

設計交互，選擇當鼠標移入時，設置面板狀態(tài)-選擇Crawl動態(tài)面板-進入和退出狀態(tài)分別為向右翻轉(zhuǎn)-推動拉動元件。

具體請看下圖：

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

歡迎指正。

 

本文由 @productm66 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
Hussey
1篇作品 9240總閱讀量
01-064142 瀏覽
消費正在進入新一輪「低價周期」
02-064258 瀏覽
復盤了10+個情人節(jié)營銷翻車案例，我們發(fā)現(xiàn)了這4大雷區(qū)
02-272875 瀏覽
為什么互聯(lián)網(wǎng)“免費模式”橫行世界
03-105003 瀏覽
產(chǎn)業(yè)互聯(lián)網(wǎng)落地過程中的組織變革
07-306774 瀏覽
企業(yè)架構(gòu)7——應用架構(gòu)
評論
評論請登錄

  1. 真好，但是我做的效果只是左右移動，實現(xiàn)不了翻轉(zhuǎn)效果?？梢越o我發(fā)一份嗎？郵箱：ycm@jjc12320.cn

    來自北京 回復

  2. 你這種簡單得多

    來自四川 回復

  3. 感謝分享！ ??

    來自廣東 回復

  4. 大神 求原文件823676499@qq.com

    來自北京 回復

  5. 請問在這個案例中，設置“推動拉動元件”的目的是什么呢？ 我嘗試刪掉，對結(jié)果好像也沒影響。

    來自北京 回復

  6. 做了兩遍不成功 能發(fā)我一份原型嗎

    來自北京 回復

    1. “選擇狀態(tài)”那邊要反過來，即設置正面的交互要選擇反面，反之亦然，不然實現(xiàn)不了

      來自福建 回復

  7. 可以發(fā)一份原文件到我郵箱嗎，謝謝。Huang_Tianbao94@163.com

    來自廣東 回復

    1. 發(fā)了

      來自湖南 回復

    2. 謝謝大佬。

      來自廣東 回復

  8. 可以發(fā)一份原文件到我郵箱嗎，謝謝。2356941362@qq.com

    來自湖北 回復

    1. 發(fā)了

      來自湖南 回復

    2. 這個僅僅是動態(tài)面板的翻轉(zhuǎn)效果

      來自上海 回復

  9. 可以發(fā)一份原文件到我郵箱嗎？謝謝啦248344957@qq.com

    回復

    1. 發(fā)了

      來自湖南 回復

    2. 感謝！

      來自江蘇 回復

  10. 可以發(fā)一份原文件到我郵箱嗎，謝謝。2548549833@qq.com

    來自江蘇 回復

    1. 發(fā)了

      來自湖南 回復

    2. 感謝！

      來自江蘇 回復

  11. 可以發(fā)一份原文件到我郵箱嗎，謝謝。2805674945@qq.com

    來自四川 回復

    1. 已經(jīng)發(fā)了

      來自湖南 回復