中国传媒大学-用户体验与UI交互设计-课件-知识点6.8 Axure中如何应用动态面板与内联框架的综合应用.pdfVIP

西安邮电大学 数字艺术学院 目录 CONTENTS 01 02 PART 01 PART 02 引言 案例分析 01 引言 为什么内联框架和动态面板 要联合使用？ 这样使用可以达到什么交互效果？ 如果只用一个不行吗？ 动态面板的特点是显示的内容在固定区域内，超出该区域的部 动态面板 分将不显示，如果要显示则就会出现滚动条。 特点 固定区域 显示区域 A 内联框架 特点 内联框架的特点是可以加载别的页面内容，内容超出显示区 域将在横向和竖向显示有滚动条。 B 当我们要显示超出区域的内容，又不想显示滚动条，该怎么做呢？ 通过分析以上两个元件的特点，我们不难想到，如果将内联框架置于动 态面板内部，但是保持横向和竖向的滚动条在动态面板外部，这样我们就可 以实现任意长度大小的内容，自动实现滚动效果而不显示滚动条了。 联合使用 最终显示没有滚动条 动态面板属性设置 内部框架属性设置 发布后滚动条在动态面板中是不可见的 02 案例分析 点击不同标签显示不同长图 • 本案例的事件是点击按钮，用例不需要条件判断 （即只有一个用例），动作 是在内联框架中加载页面。 事件 用例 动作 • 需要用到的元件是图片元件、热区元件、内联框架元件、动态面板元件。 • 在动态面板内部放置一个内联框架部件，动态面板属性设置为“从不显示横向 和纵向滚动条”，内部框架属性设置为“显示横向和纵向滚动条”。 动态面板 设定内部框架的显示范围 内联框架 滚动或滑动显示长图的内容 • 一共要设计四个页面，分别为主框架页面和三个长图子页面，通过点击主页面 上的“首页”“用户交流”“我的”按钮分别链接显示三个不同长图的页面 页面 关系 子页面 显示区域 子页面3 子页面1 子页面2