【Axure教程】分类筛选卡片(订单卡片案例)

简介: 【Axure教程】分类筛选卡片(订单卡片案例)

卡片是系统常用的展示方式,采用卡片式布局能更直观的用户界面。所以作者今天就和大家分享如何在Axure中制作出分类筛选卡片的原型模板,我们已订单卡片为案例,包括以下交互效果:

1、筛选:可以根据卡片不同的类型进行筛选分类;

2、统计:可以统计出对应分类下的项目数;

3、分页:可以设置多页显示;

4、翻页:可以上下翻页或者指定跳转到对应的页数;

5、复用性:我们用中继器来制作卡片,所以再次使用时,只需要在中继器表格中填写数据和导入图片,即可自动生成交互效果。

640.gif

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/ax9/b8494994420eef04/#g=1

【原型下载】

方式2:https://weidian.com/item.html?itemID=4294709768

【制作教程】

一、材料准备

1、筛选按钮组

我们用多个矩形制作:

设置选中样式:填充颜色蔚蓝色,文字颜色为白色

第一个矩形:默认选中,不显示右侧边线

中间的矩形:不显示左右测边线

最后一个矩形:不显示左侧边线

所有矩形设置为同一个单选组

640.png

2、卡片

我们用中继器制作卡片,中继器内部元件包括:

分类标签:这里分类标签和上面筛选按钮组的状态对应,分别为待付款、待发货……已完成,每个标签用矩形制作,设置成不同的样式,分别放置在动态面板里的不同状态,状态名修改为和标签文字一样。

然后还需要图片元件、文字标签、垂直线等元件,如下图所示摆放

640.png

中继器表格:

type:订单状态的分类,对应标签里的分类

pic:商品的图片,对应中继器里的图片元件

biaoti:商品的标题,对应中继器里标题文字的元件

bianhao:商品的标号,对应中继器里的订单编号

riqi:商品订单的日期,对应中继器里的订单日期

jine:商品订单的金额,对应中继器里的订单金额

shouhuoxinxi:商品收货的信息,对应中继器里的收货信息

640.png

填写好表格后,后续我们可以通过交互将内容设置到中继器里对应的元件进行显示

3、底边栏工具

上拉列表:用于选择每页显示的页数,可以用中继器制作而成,填写每页显示的项目数

翻页工具:包括左右箭头、显示对应的页码,输入框、文本标签组成

统计文字:文本标签,后续通过交互来统计页数和项目数

640.png

二、交互制作

1、中继器每项加载时

我们用设置文本的交互,将biaoti列的值设置到标题文字的元件,将bianhao列的值设置到订单编号的元件,将riqi列的值设置到订单日期的元件,将jine列的值设置到订单金额元件,将shouhuoxinxi列的值设置到收货信息元件。

用设置图片的交互,将pic列里面存放的图片值设置到图片元件。

用设置面板状态的交互,将动态面板设置到和type列值一致的状态里。

640.png

2、筛选按钮鼠标单击时

鼠标按钮时,我们用设置选中的交互,选中当前元件。

如果点击的是全部按钮,我们用移除筛选的交互,将中继器的筛选移除;

如果点击的不是全部按钮的话,我们用是筛选事件对中继器进行筛选,筛选条件为中继器里type列的值等于当前元件的文本值。

640.png

 

3、翻页设置

点击上一页时,我们设置中继器当前显示页面为上一项;

点击下一页时,我们设置中继器当前显示页面为下一项;

682a5964faad8993d36fb8f6dca8343c.png

在输入框输入页码后,点击确认按钮,我设置中继器当前显示页面为输入框的文本值

e95d3f3468a528cbd727082f1cc18e02.png

4、分页设置

点击上拉列表的选项时,我们设置每页显示数量为上拉列表中继器里面中继器表格里面的对应值

3f7b70aa3133292e0a3f922ddfbabeb1.png

5、统计

我们新增一个隐藏的文本框,只用于制作统计的交互,鼠标单击时,我们用设置文本的交互,将当前页数、总页数的值设置到对应的元件里。

因为在筛选、翻页或者分页之后,数据有可能发生改变,所以我们还要把底部栏这个组合移动到中继器下方对应的位置,我们用移动的事件来移动,x坐标值是不变的,还是他原来的值。y坐标轴是变化的,就是中继器底部加上他们之间空开的距离。

87df37da719015cb0bb51b2591ee48a0.png

统计事件完成后,我们上面的筛选、移除筛选、分页、翻页的事件后面都触发该交互即可。

这样我们就完成了分类筛选卡片原型模板的制作了,下次使用时,只需要在中继器表格中填写或粘贴对应的文字和图片,即可自动生成交互效果,是不是很方便呢?

那以上就是Axure教程——分类筛选卡片(订单卡片案例)的全部内容了,感谢您的阅读,我们下期见~~~

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载


相关文章
|
2月前
|
UED
在钉钉宜搭中,要实现单选关联选项设置与图文展示的关联
【10月更文挑战第5天】本文通过具体案例介绍如何在钉钉宜搭中实现单选字段与其他字段的联动功能。以旅行社旅游线路报名表单为例,详细说明了创建单选字段、图文展示字段及设置联动逻辑的具体步骤。通过简单的配置,实现了用户选择目的地后自动展示相关信息的效果,提升了用户体验和数据录入准确性。适用于希望通过低代码平台优化工作流程的企业。
146 6
|
3月前
|
移动开发
H5页面及店铺分享带图简介
H5页面及店铺分享带图简介
|
4月前
|
SQL 开发框架 前端开发
在Winform系统开发中,对表格列表中的内容进行分组展示
在Winform系统开发中,对表格列表中的内容进行分组展示
|
6月前
|
JavaScript 数据安全/隐私保护 开发者
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
推荐开源图片编辑器,基于fabric.js和Vue开发,适合海报、Logo等设计场景。拥有4.4K GitHub Stars,特性包括自定义字体、素材、模板,支持插件扩展、右键菜单及快捷键。提供图片滤镜、裁剪、拖拽、PSD导入、水印设置和分类素材管理。适用于非专业设计者,易于二次开发。
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
|
7月前
|
前端开发 数据可视化 数据挖掘
现代布局方案在商品卡片中的应用实践
现代布局方案在商品卡片中的应用实践
131 2
|
小程序 前端开发 JavaScript
小程序的列表页-商品或新闻展示--【浅入深出系列007】
小程序的列表页-商品或新闻展示--【浅入深出系列007】
宜搭报表页面如何绑定对应字段展示图片
宜搭报表页面如何绑定对应字段展示图片
|
小程序
如何通过二维码展示产品信息?
在草料二维码上搭建产品信息介绍系统,在二维码上展示图片、文字、音视频等宣传介绍内容,将二维码印制在产品实物或包装物料上,客户只需要用微信扫描二维码,即可随时随地查看图文并茂的介绍。
157 0
|
JavaScript 数据可视化 搜索推荐
高德地图开发实战案例:使用Loca数据源展示海量点标注(海量点、自定义分类图标、聚合、信息提示、3D控件)
高德地图开发实战案例:使用Loca数据源展示海量点标注(海量点、自定义分类图标、聚合、信息提示、3D控件)
657 0
【每日教程】用中继器后台页面通用模板
本文作者为大家分享了一组Axure中继器常用交互模板,作者从预览原型,到所需原件,再到操作步骤都一一展开了分析,并对过程中需要注意的问题进行了介绍,希望对你有所启发。