Axure PR 9 标签 设计&交互


大家好,我是大明同学。

这期内容,我们将深入探讨Axure中可编辑标签元件设计与交互技巧。

可移除标签元件

创建可移除标签所需的元件

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

2.在元件库中拖出一个文本框元件。

3.选中文本框元件,在样式窗格中将按钮元件的宽设置为60,高设置为25,填充色为任意颜色,这里用的是蓝色(#0052D9)输入文本"标签"文本字体颜色白色,居中,线宽为0,圆角半径3。

4.在https://www.iconfont.cn/这个网站上找一个关闭icon图标,复制图标SVG代码,粘贴到画布上,将icon宽高设置为15,选中图片右键变换图片,转换SCG图片为形状。

5.选中做好的矩形和关闭icon图标打一个组,右键,组合。

创建交互

创建"关闭icon图标"的交互状态

1.选中组合中的"关闭icon",在交互窗格点击新建交互,单击时,显示/隐藏,隐藏组合元件。

预览交互

点击预览,在预览页面点击关闭按钮可以隐藏图标。

动态编辑标签元件

创建添加标签所需的元件

1.复制一个前面做好的可移除标签元件,将填充颜色改为白色,线框为1,线框颜色为浅灰色(#D9D9D9),输入文本"+添加标签"字体颜色为灰色。

2.在元件库中拖入一个文本框,宽设为75,高设为25,线段为0,命名为输入框,置于添加标签元件底层。

3.选中添加标签、输入框,右键转为动态面板。

创建动态标签所需的元件

1.在元件库中拖入一个中继器元件,复制可移除标签元件,粘贴到中继器容器中,命名为标签名称。

2.选中中继器容器,将行间距设为10,列间距设为15,布局为水平分布。

创建清楚按钮所需元件

1 双击中继器容器,选中清除icon,右键创建为动态面板。

创建交互

创建"+添加标签"元件的交互状态

输入框

1.双击"+添加标签"动态面板,选中输入框元件,在交互窗格中新建按键按下时交互,启用情形判断。

情形1:如果 文字于 当前!= ""并且 按下的键 ==Return、设置选中+添加标签为"假"、置于顶层/底层 到底层。

添加行,动态标签中继器添加 1行。

添加函数变量值。

添加局部变量,LVAR1=元件文字输入框,插入变量 LVAR1

情形2:否则 如果 文字于 当前!= ""并且 按下的键 ==Return、设置选中+添加标签为"假"、置于顶层/底层 到底层,添加行 动态标签添加1行。

2.新建交互,获取焦点时,设置选中,+添加标签为"真",设置文本当前为""

3.新建交互,失去焦点时,启用情形判断。

情形1:如果文字于 当前!=""

设置选中+T添加标签为"假",置于顶层/底层 到 底层,添加行 动态标签 添加1行

情形2:如果文字于 当前!=""设置选中+T添加标签为"假",置于顶层/底层 到 底层。

4.文本框属性 最大长度设置为10

+添加标签

1.选中"+添加标签"按钮,在交互窗格中新建交互,单击时,置于顶层/底层 输入框 到顶层,获取焦点 输入框 选中文本。

2.文本框属性 交互样式 鼠标悬停的样式 填充色为蓝色(#0052D9)字体颜色为白色。

3.元件选中的样式 线段颜色为蓝色(#0052D9)。

创建"动态标签"元件的交互状态

创建动态标签容器交互

1.选中动态标签容器,在交互窗格中新建交互,每项加载时,设置文本,标签为"[[Item.Column0]]"

2.设置尺寸 标签宽为[[LVAR1.length*15+15]] 高度不变

创建标签元件交互

1.双击动态标签容器,选中标签动态面板,在交互窗格中新建交互,载入时,移动,当前元件到达 X;[[LVAR1.x+LVAR1.width-This.width-5]] y;[[LVAR1.y+This.height-2]]

2.双击icon动态标签容,选中关闭icon,在交互窗格中新建交互,单击时,删除当前行。

预览交互

点击预览,在预览页面点击关闭按钮可以删除标签,点击添加标签可以新增标签。

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

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

我是大明同学

下期见

相关推荐
涛哥码咖24 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
AxureMost10 小时前
Axure常用交互功能案例-免费
交互·axure·photoshop
AxureMost10 小时前
Axure版ArcoDesign 组件库-免费版
产品经理·axure
大美B端工场-B端系统美颜师1 天前
多模态数据融合预警:从IoT传感器到卫星监测的可视化方案升级
物联网·交互·数据预警
小彭努力中1 天前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
reddingtons1 天前
Adobe高阶技巧与设计师创意思维的进阶指南
人工智能·adobe·illustrator·设计师·photoshop·创意设计·aftereffects
梓贤Vigo1 天前
【Axure高保真原型】动态打字输入效果
交互·产品经理·axure·原型
梓贤Vigo1 天前
【Axure视频教程】大小图轮播
交互·产品经理·axure·原型·中继器
hi星尘1 天前
深度解析:Java内部类与外部类的交互机制
java·开发语言·交互
哈市雪花1 天前
相机:Camera原理讲解(使用OpenGL+QT开发三维CAD)
qt·3d·交互·相机·图形学·opengl·视角