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

Axure PR 9 穿梭框 设计&交互

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

在电商之类的平台产品里，我们常会用到一种穿梭框的设计。不熟悉的同学常把其设计成静态页面，其实，用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协议

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

相关推荐

完美解决华硕主板机箱前置面板连接音箱无声音问题

#精品长文创作季#最近新组装了一台电脑主机，听歌时发现，音箱音频输入线插入主板自带的音频输出端口LINEOUT声音正常。但当将音箱音频输入线插入机箱自带的音频输出端口却没有声音。...

Java 监控直播流rtsp协议转rtmp、hls、httpflv协议返回浏览器

Java监控直播流rtsp协议转rtmp、hls、httpflv协议返回浏览器...

编译安装OpenCV全攻略，附本地源码包

本文以Ubuntu（适用于18，20，22版本，其他的未进行测试）为例，介绍了编译安装OpenCV的最佳实践。其他平台比如windows，只需要参考本文的思路做稍微调整即可。一、为什么需要编译安装Op...

音视频录制+RTMP直播推拉流

音视频录制：1，录音通过条件编译识别pc或者mac://条件编译技术识别pc或者mac#ifdefQ_OS_WIN#defineFMT_NAME"dshow"...

Python Socket.IO 简介

Socket.IO是一种传输协议，支持客户端与服务器之间基于事件的实时双向通信。客户端通常但不总是web浏览器，一般情况下，客户端是采用js编写的，当然，也可以用python、Java等。...

MyCat系列二--配置文件之server.xml

MyCat系列二--配置文件之server.xml从【安装与基本使用】一文中，可以看到MyCat运行，需要进行一些配置文件的相关配置，本文将重点介绍配置文件server.xml的基本元素信息，尽量了解...

3分钟搞懂Socket.IO:接口调试技巧

在数字化协作需求井喷的今天，即时通讯、协同文档、MMO游戏等场景对实时交互提出了严苛要求。传统HTTP协议"请求-响应"的离散式通信机制已难以满足需求，这正是Socket.IO这类实时...

「云原生」Containerd ctr，crictl 和 nerdctl 命令介绍与实战操作

一、概述作为接替Docker运行时的Containerd在早在Kubernetes1.7时就能直接与Kubelet集成使用，只是大部分时候我们因熟悉Docker，在部署集群时采用了默认的dockers...

搜狗开源srpc:自研高性能通用RPC框架

今年7月底，搜狗公司开源了内部的工业级C++服务器引擎Workflow，一路收获业内许多认可和关注。9月15日，作为Workflow最重要的生态项目——srpc，一个基于其打造的轻量级RPC框架，也在...

socket.io 权限认证

socket.io是一款流行的WebSocket库，提供了实时双向通信的能力。它支持多种身份验证方式，可用于保护某些敏感信息。接下来，我们将介绍如何使用socket.io权限认证1.安装依...

Linux高性能服务器设计

C10K和C10M计算机领域的很多技术都是需求推动的，上世纪90年代，由于互联网的飞速发展，网络服务器无法支撑快速增长的用户规模。1999年，DanKegel提出了著名的C10问题：一台服务器上同时...

19K 标星!开源局域网文件传输神器，AirDrop 跨平台替代品!

传统文件传输方式（如USB、蓝牙、邮件）要么速度慢，要么操作繁琐，而AirDrop仅限苹果生态。如果你还在为手机和电脑之间传文件来回折腾？还在装各种臃肿的客户端、扫码连Wi-Fi、用数据线拖来...

WebRTC 入门教程:搭建WebRTC信令服务器

前言我们在学习WebRTC时，首先要把实验环境搭建好，这样我们就可以在上面做各种实验了。对于WebRTC来说，它有一整套规范，如怎样使用它的接口、使用SDP进行媒体协商、通过ICE收集地址并进...

在 Go 中使用 Websockets 和 Socket.IO - 教程

注意-本教程是使用Go1.9版和googollee/go-socket.io编写的Websockets是我觉得有趣的东西，因为它们为我们提供了应用程序之间通信的替代选项，而不是标准的R...

2021 年 Node.js 开发人员学习路线图

Node.js自发布以来，已成为业界重要破局者之一。Uber、Medium、PayPal和沃尔玛等大型企业，纷纷将技术栈转向Node.js。Node.js支持开发功能强大的应用，例如实时追踪...

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