【Axure教程】app内容列表

简介: 【Axure教程】app内容列表

中继器可以说是axure里面非常重要的一个元件,那么中继器到底有什么作用呢?我们为什么要使用中继器来制作原型呢?下面作者会以移动中继器内容列表的应用案例,和大家分享中继器的作用,以及如何使用中继器。

【原型预览】

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

https://axhub.im/ax9/02531f7ebaf622bf/#g=1

【原型下载】

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

1、中继器内容列表的应用案例

其实,在我们常用的app里,有很多内容都是中继器制作的,只是大家未能及时发现,其中包括投资产品、文章、视频、应用、商品、好友、音乐、游戏、图书、账单等列表,大家可以在下面的地址预览效果。

1.1投资产品类中继器列表


640.jpg


1.2文章类列表


640.jpg


1.3视频类列表


640.jpg


640.jpg



1.4服务应用类列表


640.jpg


1.5商品商品类列表


640.jpg


640.jpg



1.6消息好友类列表


640.jpg


1.7音乐类列表


640.jpg


1.8其他列表


640.jpg


2、中继器的作用

有的同学可能会问,不适用中继器制作不行吗?答案是可以的,但是如果不使用中继器的话就需要很多重复性的工作,例如有十个游戏资料,那你就要话10个图,而且当中的交互也要设置10次。如果使用中继器制作就不一样了,我只需要设置好一次,就制作完成中继器了。而且中继器维护简单,只需要像填写excel表格那样,填写中继器表格导入图片即可。交互自动实现,复用性高,维护成本低,以后项目也可以用到。

所以简单来说,中继器的是用来快捷的处理重复性工作的,减少我们绘制原型的时间。那么接下来我会以游戏列表为案例进行制作教学。


640.jpg


3、中继器制作的材料

图片原件1个(游戏logo图片),按钮原件一个,文本原件两个(分别命名为游戏名称和游戏介绍),如下图所示摆放。

640.jpg

4、中继器表格的设置

我们需要制作3列,并填入对应的游戏名称、游戏介绍以及导入游戏logo

picture:游戏图片,你们可以右键导入游戏图片或者ctrl+v复制图片即可

name:游戏名称

introduce:游戏介绍


640.jpg


5、中继器内的交互事件

我们在中继器内最常用到的交互分为是设置文本和设置图片

设置文本:

每项加载时,设置‘’游戏名称‘’文本值=item.name;‘’游戏介绍‘’文本值=item.introduce


640.jpg


设置图片:

每项加载时,设置游戏logo图片的值=item.picture


640.jpg


这样,我们就制作完成了,以后我们需要添加新游戏的时候,只需要在中继器内导入图片、填写游戏名称和介绍即可,省去了排版和写交互的时间,是不是非常方便呢?

以上就是本期关于移动端中继器内容列表原型设计的全部内容了,主要是基于我个人在实际工作中需要用到的原型,而设计出来的Axure组件。大家在设计原型的时候,可以根据实际情况需要选择使用。


作者:梓贤vigo;


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


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

相关文章
|
9月前
|
人工智能 文件存储 数据中心
Ollama部署本地大模型并通过Infortress APP远程访问保姆级教程
本文介绍如何快速上手本地大模型部署工具Ollama及AI远程访问工具Infortress。通过Ollama,开发者可轻松部署如Llama、Deepseek等主流开源模型,仅需几行命令即可完成安装与运行。结合Infortress,用户能实现对本地大模型的远程访问,支持多设备无缝对接,同时提供便捷的模型切换与知识库管理功能。Infortress更兼具NAS软件特性,成为个人AI数据中心的理想选择。
|
8月前
|
JSON 数据格式
《仿盒马》app开发技术分享-- 分类右侧商品列表(18)
上一节我们实现了分类页左侧二级分类列表功能,并实现了顶部列表&弹窗跟左侧列表的联动,这一节我们需要在它们联动的基础上继续添加右侧列表的联动效果
123 4
|
8月前
|
JSON 数据挖掘 数据格式
《仿盒马》app开发技术分享-- 分类左侧列表(17)
上一节我们实现了分类页面的顶部导航栏全选弹窗列表,并实现了跟顶部列表的点击选中联动效果,这一节我们要实现的功能是,分类模块的左侧列表,它同样也需要跟弹窗列表的点击,顶部列表的点击有联动的效果
136 4
|
8月前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗(16)
上一节我们实现了分类页面的顶部导航栏列表,并且实现了首页金刚区跟首页导航栏的联动,这一节我们实现导航栏列表的弹窗功能,需要学习的知识点有自定义弹窗,同时我们的数据源需要跟分类页保持一一致。
156 1
|
8月前
|
JSON 前端开发 数据挖掘
《仿盒马》app开发技术分享-- 分类模块顶部导航列表(15)
上一节我们实现了购物车商品列表的大部分功能,实现了商品的添加、删除、增减、价格计算等业务,并且都跟云端进行通信。现在我们继续对项目进行改造,这一节我们要改造的内容是分类页,这个页面我们在之前的非端云一体化项目中实现过。现在要改造成端云一体的模式,并且我们的金刚区也要实现分类页的点击联动
127 0
|
8月前
|
JSON 前端开发 数据格式
《仿盒马》app开发技术分享-- 加入购物车&加购列表展示(12)
上一节我们实现了商品详情页面的规格选择弹窗,这在任何购物类应用中都是最常用的功能之一。当然了,作为一个购物类的应用,我们仅仅展示是用处不大的,我们还需要有添加的动作。这一节我们就来实现添加到购车里并且在购物车内简单展示的功能
131 0
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
399 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
11月前
|
小程序 搜索推荐 Android开发
Axure原型模板与元件库APP交互设计素材(附资料)
Axure是一款强大的原型设计工具,广泛应用于APP和小程序的设计与开发。本文详细介绍Axure的常用界面组件元件库、交互设计素材,涵盖电商、社区服务、娱乐休闲、农业农村、教育等领域的多套交互案例。通过手机模型、矢量图标、通用组件等资源,设计师可高效构建原型并模拟用户操作,评估界面效果。Axure支持导出和分享,助力团队协作,推动更多优秀应用的诞生。
1402 6
|
10月前
|
存储 数据库 UED
【Axure原型案例】悦购APP产品原型设计
本文介绍了悦购APP的产品原型设计,专注于潮流服装市场。设计包括登录、过渡、首页、商品分享、个人中心、购物车、消息及修改信息等页面。通过Axure实现交互功能,如页面跳转、动态效果和数据模拟,优化内容、交互与兼容性,确保用户体验流畅。最终,原型为开发和推广提供了坚实基础,助力悦购APP成为高效的潮流购物平台。
381 0
|
弹性计算 开发工具 Android开发
阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
阿里云APP备案流程分为六步,确保应用合法上架。首先登录阿里云账号填写APP信息,提交后等待阿里云初审。初审通过后进行工信部短信核验,随后由管局审核。审核通过后,APP即可获得备案号并正式上架分发平台。整个过程需仔细填写主办者及APP详细信息,确保所有资料准确无误。阿小云详细分享了这一流程,帮助开发者顺利完成备案。

热门文章

最新文章