百词斩官网效果如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
用Axure做的百词斩原型录屏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
以下是我制作该原型的步骤:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
工具:Axure文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
1、选取组件:动态面板,动态面板的大小为300*260。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
2、对动态面板进行正反2面设置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
3、点击动态面板中正模块进入正模块,并对模块动态框内进行crawl文字或图片插入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
4、点击动态面板中反模块进入反模块,并对模块动态框内进行视频或图片插入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
5、设置反面交互事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
设计交互,选择当鼠标移入时,设置面板状态-选择Crawl动态面板-进入和退出状态分别为向右翻转-推动拉动元件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
具体请看下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html
6、设置正面面交互事件,方式和设置反面一样。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4660.html