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

news2024/12/25 12:31:29


大家好,我是大明同学。

Axure选择器是一种在交互设计中常用的组件,这期内容,我们来探讨Axure中多级下拉选择器设计与交互技巧。

下拉列表选择输入框元件

创建选择输入框所需的元件

1.在元件库中拖出一个矩形元件。

2.选中矩形元件,在样式窗格中将按钮元件的宽设置为200,高设置为32,文本左侧对齐,线段填充颜色灰色(#D9D9D9)线宽为1,圆角半径5,边距左右侧10。

3.在iconfont搜索向下和向上icon,复制SVG代码,粘贴到画布上。

4.拖入一个动态面板,在样式窗格中将动态面板的宽高设置为32,并将向下icon剪切粘贴到动态面板内State1中,将向上剪切粘贴到动态面板内State2中。

5.选中动态面板基于矩形框右对齐,选中矩形和动态面板右键组合。

创建下拉选择列表所需的元件

1.在元件库中拖入一个矩形,将宽设为120,高设置为160,线段设为0,阴影设为灰色 (#7F7F7F) 透明度35%,模糊设为7。

2.在元件库中拖入一个中继器元件。

3.双击中继器元件,选中中继器内部矩形元件,在样式窗格将矩形宽设为120,高设为32,线宽设为0,边距左侧10。

4.在iconfont搜索向右icon,复制SVG代码 粘贴到画布上,基于中继器矩形向右对齐 右键转为动态面板,双击动态面板 选中向右icon 右键变换图片 转换SVG图片为图形 居中对齐,复制State1状态到State2,选中State2向右icon 将填充颜色设为蓝色 (#0052D9)。

选中中继间矩形,在样式窗格将数据窗格Column0 修改为type1,并在type1列输入文本。

5.选中中继器和矩形 右键 组合 。

选中中继器元件,在交互窗格中,将隔离列表之间的选项组取消勾选。

选中中继器矩形,在样式窗格中将文本内容设为左对齐。

6.复制两个组合列表元件。

选中第二个中继间矩形,在样式窗格将数据窗格type1修改为type2,并在type1、2列输入文本,type1、type2文本必须有关联性,不然筛选时可能会出错。

7.第三个中继器同步以上操作,将icon动态面板删除,替换为勾选icon 。

8.选中中继器组合元件,在样式窗格元件名称分别命名 一级分类、二级分类、三级分类。

创建交互

创建“选择输入框”的交互状态

1.选中选中输入框元件,在交互窗格点击新建交互,添加单击时显示/隐藏 显示 一级分类,设置选中 当前 为“真” ,设置icon动态面板 到 State2 。

创建icon动态面板 的交互状态

1.选中icon动态面板,在交互窗格中创建单击时交互,启用情形判断。

情形1: 元件可见 一级分类 等于 假

设置显示/隐藏 显示 一级分类, 设置选中 矩形 (选择输入框)为 “真”,设置面板状态 当前 到 State2。

情形2:元件可见 一级分类 等于 “真”,设置显示/隐藏 隐藏 一级分类, 设置选中 矩形 (选择输入框)为 “假”,设置面板状态 当前 到 State1。

创建“下拉选择列表”的交互状态

1.选中一级分类元件,双击中继器,到中继器内部矩形,在交互窗格 创建 单击时交互,显示/隐藏 显示 二级分类 设置选中 当前 为 真。

添加筛选 二级分类 中继器 规则 插入变量函数 [[TargetItem.type1 ==Item.type1]]

再看一遍完整规则 

添加动作 显示/隐藏 隐藏 三级分类

2. 添加全局变量,单击项目选项,全局变量,新增 type1、type2、type3 变量。

3.设置变量值 type1 值 插入变量或函数 [[Item.type1]]

好的,来看一下完整交互 。

4.设置文本 矩形 ((选择输入框)) 文本 插入变量或函数 [[type1]]

看一下完整交互。

5.新建交互 选中 设置icon动态面板 到 State 2,新建交互 取消选中时 设置icon动态面板 到State 1。

6.设置形状属性 点击显示全部 交互样式 鼠标悬停的样式 填充颜色 灰色 (#F2F2F2),元件选中的样式 字色 蓝色(#0052D9),选项组 1

同步设置 二级分类

7.选中三级分类元件,双击中继器,到中继器内部矩形,在交互窗格 创建单击时交互,设置选中 当前 为 “真”,设置变量值 type3 为 [[Item.type3]],设置文本 矩形 (筛选输入框) 为 [[type1 + '-' + type2 + '-' + type3]]。

新建交互,选中 显示 / 隐藏 显示 形状 (勾选),新建交互,选中 显示 / 隐藏 隐藏 形状 (勾选)

选中 勾选 icon 设为隐藏

8.设置形状属性 点击显示全部 交互样式 鼠标悬停的样式 填充颜色 灰色 (#F2F2F2),元件选中的样式 字色 蓝色(#0052D9),选项组 3

9.在元件库中拖入一个内联框架,选中内联框架,在样式窗格中勾选隐藏边框,右键转为动态面板,选中动态面板,将框设为 148 高设为160 ,右键 滚动条 设为垂直滚动,剪切三级分类元件 粘贴到动态面板内。

在元件库中拖入一个动态面板,遮住三级分类下拉选项滚动条,复制背景,粘贴到动态面板内。

剪切三级分类下拉选项元件,粘贴到动态面板内。

10.因为叠加了动态面板,所以,一级分类中继器内矩形元件的显示/隐藏 隐藏 中继器的交互需要重新设置,二级分类中继器内矩形元件单击时 显示/隐藏 显示中继器的交互也需要重新配置。

选中三级分类下拉元件,设置为隐藏。

再用同样的方式,设置二级分类,调整一级分类单击时,显示/隐藏 交互。

选中一级分类元件,右键 转为动态面板,将二级分类,三级分类粘贴到一级分类动态面板内。

选中整个动态面板,设为隐藏,并修改 矩形(下拉输入框)单击时 显示/隐藏 一级分类改为整个动态面板和向下icon动态面板,情形条件中元件可见于 一级分类、显示/隐藏 一级分类。

预览交互

点击预览,在预览页面鼠标下拉列表选择输入框可以选择对应的选项。

预览地址:https://yfeynz.axshare.com

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

我是大明同学

下期见

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2239506.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基础网络安全知识

1.ctfhub技能树 1.1 Web-SQL注入 Web-SQL注入-整数型 && 字符型 && MySQL结构 参考:5.9.6MySql注入 Web-SQL注入-报错注入 step1: 查库名 ?id1 and extractvalue(1,concat(0x7e,database(),0x7e))-- step2: 查看表名 ?id1 and extractvalue(1…

斯坦福泡茶机器人DexCap源码解析:涵盖收集数据、处理数据、模型训练三大阶段

前言 因为我司「七月在线」关于dexcap的复现/优化接近尾声了(每月逐步提高复现的效果),故准备把dexcap的源码也分析下,11月​下旬则分析下iDP3的源码——为队伍「iDP3人形的复现/优化」助力 最开始,dexcap的源码分析属于此文《DexCap——斯…

【软件工程】ATAM架构权衡评估方法

ATAM架构权衡评估方法 概述质量属性有哪些?质量属性的效用树怎么构建?如何确定质量属性的优先级? 概述 ATAM(Architecture Tradeoff Analysis Method)是一种系统架构评估方法,由卡梅隆大学软件工程协会提出…

BPMNJS设计器开发核心功能分析

系统功能 在开发一个前端工作流设计器,尤其是基于BPMN(业务流程建模与标注)或类似于钉钉的设计器时,主要需求可以总结为以下几个关键点: 1. 流程节点与边的设计 节点类型多样化:支持基础节点&#xff08…

快递100 物流查询API全面解析

一.基础准备 1.物流查询痛点 如何通过物流单号实时查询物流信息?如何实时查看物流地图轨迹? 使用快递 100,用户可以通过简单地输入快递单号来获取快递的详细物流状态,不仅能看到包裹目前的位置信息,还可以了解它的运输进展。 快递 100API…

多角度审视推荐系统

参考自《深度学习推荐系统》——王喆,用于学习和记录 介绍 推荐工程师需要从不同的维度审视推荐系统,不仅抓住问题的核心,更要从整体上思考推荐问题。 具体包括以下内容: (1)推荐系统如何选取和处理特征…

网络自动化04:python实现ACL匹配信息(主机与主机信息)

目录 背景分析代码代码解读代码总体结构1. load_pattern_from_excel 函数2. match_and_append_pattern 函数3. main 函数总结 最终的效果: 今天不分享netmiko,今天分享一个用python提升工作效率的小案例:acl梳理时的信息匹配。 背景 最近同事…

如何查看电脑关机时间

要查看电脑的关机时间,可以按照以下步骤进行操作: 1. 打开事件查看器:按下键盘上的Windows键R键,然后在弹出的运行对话框中输入"eventvwr.msc",并按下Enter键。 2. 在事件查看器窗口中,单击左侧窗…

3DTiles之i3dm介绍

3DTiles之i3dm介绍 3D Tiles 是一种用于高效存储和传输三维城市、建筑、地形、点云等空间数据的开放标准格式。i3dm(Intel 3D Model)是 3D Tiles 中用于表示三维模型(如建筑物或其他对象)的一个子格式。i3dm 格式的出现&#xff…

Java | Leetcode Java题解之第559题N叉树的最大深度

题目&#xff1a; 题解&#xff1a; class Solution {public int maxDepth(Node root) {if (root null) {return 0;}Queue<Node> queue new LinkedList<Node>();queue.offer(root);int ans 0;while (!queue.isEmpty()) {int size queue.size();while (size &g…

【机器学习入门】(1) 线性回归算法

学习目标&#xff1a; 线性回归是一种基本的统计学习方法&#xff0c;主要用于分析一个或多个自变量与因变量之间的线性关系。以下是关于线性回归的一些关键点&#xff1a;线性回归的四要素&#xff1a; &#xff08;1&#xff09;假设(hypothesis)&#xff1b;&#xff08;2&…

视频会议接入GB28181视频指挥调度,语音对讲方案

传统的视频会议指挥调度系统目前主流的互联网会议大部分都是私有协议&#xff0c;功能都很独立。目前主流的视频监控国标都最GB平台&#xff0c;新的需求要求融合平台要接入监控等设备&#xff0c;并能实现观看监控接入会议&#xff0c;实时语音设备指挥现场工作人员办公实施。…

一文1800字使用Jmeter进行http接口性能测试!

接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系等。 为什么要做接口测试&#xff1f; 越底层发现b…

搭建监控系统Prometheus + Grafana

公司有个技术分享会&#xff0c;但是业务忙&#xff0c;没时间精心准备&#xff0c;所以就匆匆忙忙准备分享一下搭建&#xff08;捂脸哭&#xff09;。技术含量确实不多&#xff0c;但是分享的知识确实没问题。 以下是搭建过程&#xff1a; 一、讲解 Prometheus Prometheus 最…

ArkTS中的自定义构建函数、Tab栏和组件状态共享

一、自定义构建函数 1.构建函数 Builder 1.1 介绍 文档地址&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builder-V5?catalogVersionV5 概念&#xff1a;ArkUI提供了一种轻量的UI元素复用机制Builder&#xff0c;可以将重复使用的U…

二维、三维情况下的锚点优选方法

多锚点定位时&#xff0c;锚点的选择对定位精度有重要影响。下面介绍基于误差最小化的锚点选择的相应公式和MATLAB代码示例&#xff0c;并进行详细分析 文章目录 方法描述代码MATLAB代码示例代码运行结果 总结 方法描述 选择能够最小化定位误差的锚点组合。通过计算锚点位置与…

CCF ChinaOSC |「开源科学计算与系统建模openSCS专题分论坛」11月9日与您相约深圳

2024年11月9日至10日&#xff0c;以“湾区聚力 开源启智”为主题的2024年中国计算机学会中国开源大会&#xff08;CCF ChinaOSC&#xff09;将在深圳召开。大会将汇聚国内外学术界、顶尖科技企业、科研机构及开源社区的精英力量&#xff0c;共同探索人工智能技术和人类智慧的无…

力扣102:二叉树的层次遍历

给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20],[15,7]]示例 2&#xff1a; 输入&a…

数学建模模型算法-Python实现

一、评价决策类 1、层次分析法&#xff08;AHP&#xff09; 层次分析法用来评价或选择一个更好更优的决策或方案 通过找到可以衡量其好坏的指标&#xff0c;进而衡量指标&#xff0c;再形成评价体系 归一化处理 让指标在同一数量级&#xff0c;且保证在同一指标下其差距保持…

linux-vlan(1)

# VLAN # 1.topo # 2.创建命名空间 ip netns add ns1 ip netns add ns2 ip netns add ns3 # 3.创建veth设备 ip link add ns1-veth0 type veth peer name ns21-veth0 ip link add ns3-veth0 type veth peer name ns23-veth0 # 4.veth设备放入命名空间,启动接口 ip link set n…