百度360必应搜狗淘宝本站头条
头像打包下载acmecadconverter_8.52绿色版mysql 昨天的日期个人网站源码word文档批量处理大师破解版
当前位置：网站首页 > 技术教程 > 正文

Axure PR 9 穿梭框 设计&交互

csdh11 2025-01-12 12:41 2 浏览

在电商之类的平台产品里，我们常会用到一种穿梭框的设计。不熟悉的同学常把其设计成静态页面，其实，用Axure实现交互效果，也很简单。

这期内容，我们将深入探讨Axure中穿梭筛选宽元件设计与交互技巧。

穿梭筛选框元件

创建穿梭筛选框所需的元件

左穿梭筛选框

1.打开一个新的 RP 文件并在画布上打开 Page 1。

2.现在画布上创建一个背景，在元件库中拖出一个矩形元件，宽值200，高值300，线宽值1，线框颜色（#D9D9D9）圆角半径为6。

3,创建穿梭筛选框头部元件，在元件库中突入一个矩形元件，宽值198，高值48，线宽值0，填充颜色（#F2F2F2）圆角半径为6，选中前面做好的矩形元件，顶部对齐。

4.在头部元件中创建全选按钮，从元件库中拖入复选框元件，文本改成待选列表，左上角对齐。

5.创建穿梭框选项列表，在元件库中拖入一个内联框架，右键转为动态面板，并命名为左穿梭框

6.双击左穿梭框动态面板，在元件库中拖入一个中继器元件，双击中继器元件，删除原始单元格，在元件库中拖入若干个复选框，并输入一些待选项。

创建右穿梭筛选框

1.复制粘贴做好的左穿梭筛选框，将头部待选列表改为已选列表，选中穿梭选项列表左穿梭框改为右穿梭框，并保留一个选项。

创建向左向右穿梭按钮

1.在元件库中拖入一个矩形，宽高值为30，填充色为浅蓝色（#F5F7FA）线宽1，线色为灰色（#CCCCCC），复制一个向右的icon，居中组合。

2.复制向右按钮元件，将向右箭头改为向左。

创建交互

创建“待选列表”按钮的交互状态

1.选中待选列表按钮元件,在交互窗格中新建交互，选中，设置选中 选项为“真”，新建交互，取消选中时，设置选中，选项为“假”。

创建“已选列表”按钮的交互状态

1.同理设置已选列表按钮，也可复制待选按钮的交互粘贴到已选列表按钮中。

创建“左穿梭框”的交互状态

1.双击左穿梭框动态面板，选中中继器选项元件，在交互窗格中新建交互，每项加载，设置文本选项 为“[[Item.Column0]]”

2.双击中继器选项元件，对单个选项新建交互，选中，标记行 （中继器）当前，取消选中时，取消标记，（中继器）当前。

3.新建交互，移动时，启用情形判断。

情形1：如果 选中状态于 当前 ==真，添加行，（中继器）添加1行。

*需要注意的是，添加的行这里引用的 右穿梭框中的中继器

等待 500毫秒，删除行，（中继器）中已标记的行。

4.添加复选框属性，交互样式，元件选中时，字体、线段颜色为蓝色（#0052D9）

创建“左穿梭框”的交互状态

1.同理配置右穿梭框交互。

创建“向左向右”穿梭按钮的交互转态

1.选中向右穿梭按钮，在交互窗格中新建交互，单击时，触发事件，选项 fire 移动时。

2.同理设置向左按钮的交互状态。

预览交互

点击预览，在预览页面 可将选项在左右穿梭框中任意穿梭。

预览地址：https://rnerwc.axshare.com

OK，这期内容到这里就结束了。

本文由 @PM大明同学 原创发布于人人都是产品经理。未经作者许可，禁止转载

题图来自Unsplash，基于CC0协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务

相关推荐

Axure教程:高级搜索

在原型中，搜索是一个常见的交互设计。但不少同学因为技能不熟悉就没有做对应的交互效果。这篇文章，作者分享了设计搜索功能的整个流程，相信看完你也能做一个很牛逼的交互。高级搜索可以通过使用精确的关键词或短语...

Axure PR 9 二级滑动选择器 设计&交互

滑动选择器算是APP原型设计中非常常见的一个功能，但多数人只是做了静态效果，少有做交互动效的。这篇文章，作者就分享了如何设计动效，供大家参考。这期内容，我们来探讨Axure中二级滑动选择器设计与交互技...

最新!Axure RP 10 Beta 开放下载，一大波新功能来袭

当好多产品经理还在纠结是否和团队保持一致的版本，还是尝鲜升级到最新的AxureRP9正式版的时候，Axure又放出了AxureRP10Beta版本的消息。在新的版本中，Axure有不少新的改...

Axure RP 10 进阶指南:从全局变量到JavaScript语法，打造高效原型设计!

在过去的两个月中，我从Axure9转向了Axure10，并且在这段时间里，我利用Axure10制作了许多高保真原型。在这个过程中，我积累了经验，并总结出了一些使用Axure的高级技...

利用推理法解决 Axure9 折叠菜单的空白问题

本文作者分享了利用推理法解决Axure9折叠菜单的空白问题的方法，并对具体步骤进行了详细的说明，希望对有同样困惑的人有所帮助。近日在用Axure9制作单选项折叠菜单时，偶然发现当展开时就会产生空白...

Axure原型设计:移动端验证原型合集

用户验证是一种区分用户是计算机还是人的公共全自动程序，可以防止暴力破解密码、恶意灌水、恶意抢票等行为，所以用户验证是原型设计里面必不可少的元件之一，本文作者通过分享常用的验证方式对各种验证方法的优缺点...

Axure RP 9 学习笔记 - 跨页面全局变量应用

【知识点12】跨页面全局变量应用...

【软件更新】Axure RP 9.0.0.3744更新日志与软件下载 Mac+Windows

更新日志AxureRP9.0.0.37442024-05-14...

「Axure资源」最新Axure RP汉化包-Axure8、9、10多版本免费下载

Axure10汉化包使用方法macOS下载安装最新版的AxureRP10并安装...

Axure PR 9 多级下拉选择器 设计 & 交互

在B端、电商类的产品原型中，多级下拉选择器是一种常见的交互，应用于类别、地址等类型的选择。这篇文章，作者分享了如何在原型中设计的方法，供大家参考。Axure选择器是一种在交互设计中常用的组件，这期内容...

高效办公，你值得拥有之原型工具AXURE篇

简介AxureRP是美国AxureSoftwareSolution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图...

8000字教你画出高颜值原型图

编辑导语：一个高颜值的原型图，能够在一定程度上体现出你的专业度，起到锦上添花的作用。那么，要如何画出高颜值的原型图呢？本文作者对此作出了分析，一起来看一下吧。最近有朋友要转产品，自己在学习画原型，怎么...

Axure PR 9 穿梭框 设计&交互

在电商之类的平台产品里，我们常会用到一种穿梭框的设计。不熟悉的同学常把其设计成静态页面，其实，用Axure实现交互效果，也很简单。这期内容，我们将深入探讨Axure中穿梭筛选宽元件设计与交互技巧。穿梭...

专业级快速产品原型设计工具:Axure RP 9

AxureRP9是一款专业级快速产品原型设计工具，使用它可以让用户快速、高效创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。采用了极简主义的设计，界面布局更加清爽简洁，操作也非常简单...

Axure9 教程:锚点滚动效果

编辑导语：锚点滚动是常见的效果，常与导航结合使用。那么，你知道如何利用Axure9来实现锚点滚动效果吗？本篇文章里，作者以左侧固定导航结合热区为例，讲解了如何使用Axure来实现锚点滚动的方法，一起来...

一周热门
最近发表
标签列表