#推荐
【基础教程】隐藏与显示

2024-07-02 0 601

 

在Axure中,隐藏与显示是基础且常用的交互设计功能,它通过控制元件的可见性来实现动态效果,增强用户体验。以下是详细的操作方法和应用场景:

使用操作方法

  1. 选择元件:首先,在画布上选中你想要控制显示或隐藏的元件,这可以是文本、按钮、动态面板等。
  2. 添加交互
    • 右键点击选中的元件,选择“添加交互” > “单击时”(或其他触发事件,如鼠标悬停、双击等)。
    • 在交互对话框中,点击“+”添加新情形(Scenario)。
  3. 设置动作
    • 对于“显示”操作,选择“显示选定的元件”或“显示动态面板状态”。
    • 对于“隐藏”操作,选择“隐藏选定的元件”或“隐藏动态面板状态”。
  4. 条件判断(可选):在高级使用中,可以通过条件判断来决定是否执行显示或隐藏动作,增加交互的逻辑性。
  5. 复制并修改情形:为了实现切换效果,如从显示切换到隐藏,可以复制现有情形并修改动作,例如将显示改为隐藏,反之亦然。

应用场景

  • 导航菜单:点击菜单按钮时显示下拉菜单,再次点击则隐藏。
  • 弹出窗口:用户触发某个操作(如点击按钮)时,弹出信息窗口,再次点击关闭。
  • 动态内容:根据用户的选择,动态显示或隐藏页面上的部分内容。
  • 交互式教程:首次使用应用时,逐步引导用户,通过隐藏提示图标来减少干扰。
  • 状态切换:比如在表单验证中,错误信息在输入错误时显示,正确时隐藏。

实现技巧

  • 利用动态面板:动态面板是实现隐藏和显示效果的强大工具,因为它可以包含多个状态,每个状态代表不同的显示内容。
  • 交互连贯性:确保交互逻辑清晰,避免用户混淆,例如通过动画效果平滑过渡,提高用户体验。
  • 测试与调试:在设计过程中频繁预览,确保隐藏与显示的交互按预期工作,特别是在复杂的交互流程中。
通过这些方法和技巧,Axure的隐藏与显示功能能够帮助设计师创建丰富、响应式的交互原型。

元件的隐藏/显示设置,可以将元件设置为不可见/可见,在预览状态下隐藏的元件是看不见的,只有在显示状态才能看见,元件默认都是显示的

【基础教程】隐藏与显示
元件隐藏后,会变成淡黄色的色块
【基础教程】隐藏与显示

如何设置

有两种方式可以设置隐藏与显示,一种是鼠标右键点击设为隐藏/设为显示,另一种是在顶部工具栏中,点击眼睛图标进行隐藏与显示状态的切换

使用场景

比较常见的场景是,元件或模块默认隐藏,在一定的条件下触发后再显示,比如弹出框、文字提示、确认提示框等效果
弹出框
【基础教程】隐藏与显示
文字提示
【基础教程】隐藏与显示
确认提示
【基础教程】隐藏与显示

 

收藏 打赏

感谢您的支持,我会继续努力的!

扫码打赏,加速更新更多文章。
常见问题
  • 本站资源版权属 AxureMost.cn 所有。任何非官网途径下载均属于盗版,后台有检测机制一经发现传播,共享,出售会起诉追会本站损失。
查看详情
  • 请比对下载完压缩包的与网盘上的容量。
查看详情
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务