【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高保真原型 授权发布,未经许可,禁止转载

目录
打赏
0
0
1
0
6
分享
相关文章
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
284 3
Axure原型模板与元件库APP交互设计素材(附资料)
Axure是一款强大的原型设计工具,广泛应用于APP和小程序的设计与开发。本文详细介绍Axure的常用界面组件元件库、交互设计素材,涵盖电商、社区服务、娱乐休闲、农业农村、教育等领域的多套交互案例。通过手机模型、矢量图标、通用组件等资源,设计师可高效构建原型并模拟用户操作,评估界面效果。Axure支持导出和分享,助力团队协作,推动更多优秀应用的诞生。
141 6
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
62 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
阿里云APP备案流程分为六步,确保应用合法上架。首先登录阿里云账号填写APP信息,提交后等待阿里云初审。初审通过后进行工信部短信核验,随后由管局审核。审核通过后,APP即可获得备案号并正式上架分发平台。整个过程需仔细填写主办者及APP详细信息,确保所有资料准确无误。阿小云详细分享了这一流程,帮助开发者顺利完成备案。
|
3月前
|
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
150 11
|
4月前
【Azure App Service】PowerShell脚本批量添加IP地址到Web App允许访问IP列表中
Web App取消公网访问后,只允许特定IP能访问Web App。需要写一下段PowerShell脚本,批量添加IP到Web App的允许访问IP列表里!
【专栏】从网页轻松转换为应用越来越便捷
【4月更文挑战第27天】本文介绍了将网页转换为移动应用的在线生成App过程,包括原理(封装网页内容,添加移动特性)、优势(便捷高效,节省成本,快速上线)以及具体步骤(选择工具,准备内容,配置选项,生成测试,发布推广)。同时,注意版权、兼容性和用户体验问题。通过案例分析和实践经验分享,帮助读者深入了解如何通过在线工具实现App梦想,强调了网页优化、用户界面设计和个性化定制的重要性。
304 3
App Inventor 2 MQTT拓展入门(保姆级教程)
本文演示的是App和一个测试客户端进行消息交互的案例,实际应用中,我们的测试客户端可以看着是任意的、支持MQTT协议的硬件,通过订阅及发布消息,联网硬件与我们的App进行双向数据通信,以实现万物互联的智能控制效果。
380 2
|
7月前
Axure App 垂直滚动
Axure App 垂直滚动
356 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等