北京网站模板下载,wordpress打字不显示图片,网络营销与电子商务的区别,贵州省建设厅网站首页 大家好#xff0c;我是大明同学。
Axure选择器是一种在交互设计中常用的组件#xff0c;这期内容#xff0c;我们来探讨Axure中多级下拉选择器设计与交互技巧。 下拉列表选择输入框元件
创建选择输入框所需的元件
1.在元件库中拖出一个矩形元件。
2.选中矩形元件我是大明同学。
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这期内容到这里就结束了。
我是大明同学
下期见
