Axure RP 8中自带了图片元件，导入图片后可以调整样式显示。添加按钮，控制图片显示和隐藏。点击“显示”按钮，将隐藏的图片显示出来；点击“隐藏”按钮，将显示的图片隐藏起来。下面利用一个实例说明按钮控制图片显示和隐藏的用法，操作如下：

工具/原料

  • Axure RP 8
  • 截图工具
  • 浏览器
  • 图片
  • 图片工具
  • 浏览器

方法/步骤

  1. 1

    第一步，打开Axure RP 8设计软件，在元件库中找到图片元件，拖曳到编辑区域，设置图片元件宽度为400，高度为200，并将图片元件放置在画布中心位置，如下图所示：

  2. 2

    第二步，选中图片元件，导入图片，并设置图片宽度为400、高度为200，让图片刚好充满图片元件，如下图所示：

  3. 3

    第三步，在图片下方添加两个按钮，分别为显示、隐藏，用于控制图片显示和隐藏，两个按钮分别对齐图片左右两边，如下图所示：

  4. 4

    第四步，选中“显示”按钮，添加鼠标单击时用例，设置动画效果，

    可见性：显示

    动画：逐渐

    时间：2000毫秒

    置于顶层

    更多选项：弹出效果

    如下图所示：

  5. 5

    第五步，选中“隐藏”按钮，添加鼠标单击时用例，

    可见性：隐藏

    动画：逐渐

    时间：2000毫秒

    拉动元件

    方向：下方

    动画：摇摆

    时间：2000毫秒

    如下图所示：

  6. 6

    第六步，设置显示和隐藏按钮鼠标单击事件，两个按钮出现了数字1和2，这代表按钮绑定了用例，如下图所示：

  7. 7

    第七步，预览该原型页面，单击“隐藏”按钮，图片隐藏消失；单击“显示”按钮，隐藏的图片显示出来，如下图所示：

    END

注意事项

  • 注意添加显示和隐藏图片用例
  • 注意合理导入图片和设置图片样式
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。