Axure原型:超漂亮的系统首页
今天和大家分享如何在axure里,用中继器做一个漂亮的系统首页。
大家也可以把这边文章当作中继器的初级教程,本教程中就讲到设置文本、图片、筛选这几个常用的交互事件;希望通过这个案例,能让大家学会用中继器。
原型预览及下载地址:https://axhub.im/ax9/fa8110bbefb4583b/#g=1
一、中继器的原型
1. 中继器是什么
简单来说,中继器就是一张表,也可以说是一个数据集;可以用于储存数据以下,为了简单理解,我们把他比作excel表格,只不过他除了储存文字外,还可以存储图片、页面等内容。
2. 中继器的好处
那中继器到底有啥好处,为什么我们要用中继器,不直接把原型话出来呢?
我以下图为例子,例如你要做一个美食介绍的原型,里面有成千上百款菜式,先不说交互,你把他画出来都要很久的时间。
其实我们观察之后可以发现,其实每一部分的内容都是相像的,就是text+picture元件,所以我们用中继器来制作的话,就只需要画一遍;然后再表格中导入图片和写粘贴文字即可,大大的缩短了我们制作原型的时间,提高了效率。
其次,如果设计交互,比如说点击某个菜,打开这个菜的详细介绍页面,如果不用中继器做的话,我们有几个菜就要设置多少次交互,非常复杂;但是如果用中继器做的话只需要写一个交互即可,省时省力。
3. 中继器的特有高保真交互
除了上述的好处之后,中继器还有自身的高保真交互。
分类筛选:
模糊搜索:
这这两个交互效果是用中继器筛选事件完成的,所以可以说是中继器特有交互,所以想做一个高保真交互的原型,中继器是必不可少的。
二、制作教程
1. 材料准备
中继器内材料:文本标签x1、图片x1;
中继器外材料:文本标签9个(分别填写文字:全部菜品、川菜、卤菜、粤菜、苏菜、浙菜、闽菜、湘菜、徽菜)、输入框x1、搜索图x1;
2. 中继器内材料摆放
如下图所示拜访,图片大小可以根据素材设置:
3. 中继器表格设置
中继器需要设置3列,如下图所示:
type:菜品分类,需要和上边标签文字(川菜、卤菜、粤菜、苏菜、浙菜、闽菜、湘菜、徽菜)一致,如不一致,后续的分类会出现问题;
picture:这里是演示时展示的图片,右键导入图片或者直接复制粘贴即可;
biaoti:对应演示时候的标题文字。
4. 中继器内交互
中继器内有两个交互。
设置文字,每项加载时,须有设置标题文字=item.biaoti。
设置图像,每项加载时,设置展示图片=item.picture。
5. 中继器表格外材料摆放
如下图所示,摆放整齐美观即可,你们可以用顶端对齐和水平分布快速对齐。
6. 分类筛选交互设置
首先,我们要把9个文本标签(分别填写文字:全部菜品、川菜、卤菜、粤菜、苏菜、浙菜、闽菜、湘菜、徽菜)设置为选项组组,鼠标单击时选中该文本,并且选择中时字体变成蓝色,显示蓝色的下框线。
然后川菜、卤菜、粤菜、苏菜、浙菜、闽菜、湘菜、徽菜这8个文本标签鼠标单击时,设置筛选事件;对中继器内type列进行筛选,只显示type列和选中的文本文字相同的内容。
点击全部菜品时,我们就不是筛选了,我们是要取消全部筛选即可。
7. 模糊搜索交互设置
模糊搜索也是用中继器筛选的事件完成,不过这里要配合indexof函数使用。
这里简单介绍一下indexof函数,例如1234文本,我在里面找1,indexof函数会告诉我们1在第0位,如果找2,indexof会告诉我们他在第一位;如果我们找9的话,因为1234里面没有9,所以就找不到,一般我们就用indexof>-1如果成立,即所搜索的存在,否则则不存在。
所以我们这里需要设置变量LVAR1就是输入框的文字内容,然后在标题列里面搜索是否含有对应内容,只显示含有对应内容的行。
那到这里就制作完成了,完成之后我们只需要在excel整理好数据,然后复制粘贴到中继器表格,就马上实现了。
以后每次使用基本上两分钟就完成自定义的表格,工作效率极高,而且还是高保真的。
最后如果你喜欢我的原型教程的话,记得关注一下哈,谢谢大家。
Axure原型:超漂亮的系统首页相关推荐
- axure变成一个小手了_Axure原型:超漂亮的系统首页
今天和大家分享如何在axure里,用中继器做一个漂亮的系统首页. 大家也可以把这边文章当作中继器的初级教程,本教程中就讲到设置文本.图片.筛选这几个常用的交互事件:希望通过这个案例,能让大家学会用中继 ...
- axure 素材_Axure原型:超漂亮的系统首页
今天和大家分享如何在axure里,用中继器做一个漂亮的系统首页. 大家也可以把这边文章当作中继器的初级教程,本教程中就讲到设置文本.图片.筛选这几个常用的交互事件:希望通过这个案例,能让大家学会用中继 ...
- 智慧楼宇、消防系统、门禁管理、暖通空调、给排水、变配电、设备管理、停车管理、能源管理、故障检测、客流统计、运行控制、权限分配、物联网、Axure原型、rp原型、产品原型
智慧楼宇.消防系统.门禁管理.暖通空调.给排水.变配电.设备管理.停车管理.能源管理.故障检测.客流统计.运行控制.权限分配.物联网.Axure原型.rp原型.产品原型 备注:此文章只是Axure原型 ...
- 企业管理系统原型、HRM、工作报告统计、0A、商机、合同、客户管理、产品管理、企业oa、行政办公系统、数据报表、销售分析、客户分析、产品管理、人力资源管理系统、crm、axure原型、rp源文件
企业管理系统原型.HRM.CRM.工作报告统计.0A.商机.合同.客户管理.产品管理.企业oa.行政办公系统.数据报表.销售分析.客户分析.产品管理.人力资源管理系统.crm客户管理.axure原型. ...
- 在线教育、直播教育、课程直播、订单系统、老师介绍、收入提现、在线学习、业绩统计、课程统计、选老师、选课程、作业管理、课程管理、报名统计、在线教育管理系统、axure原型、rp源文件
在线教育.直播教育.课程直播.订单系统.老师介绍.收入提现.在线学习.业绩统计.课程统计.选老师.选课程.作业管理.课程管理.报名统计.在线教育管理系统.axure原型.rp源文件 Axure原型演示 ...
- web端项目管理/工程项目劳务资源管理系统/考勤审批/人员招聘/企业管理系统/工资管理/入职管理/组织结构/财务管理/大数据指挥中心/劳务系统/岗位工种/智慧工程监管/劳务app原型/axure原型
web端项目管理/工程项目劳务资源管理系统/考勤审批/人员招聘/企业管理系统/大数据智慧中心/工资管理/入职管理/组织结构/财务管理/大数据指挥中心/劳务系统/岗位工种/axure原型/rp原型 Ax ...
- 【实战高保真】电商saas全套原型、店铺管理、店铺装修、商品管理、会员管理、维权管理、会员管理、营销管理、财务管理、渠道管理、saas系统、Axure高保真后台管理原型、rp源文件、axure原型
[实战高保真]电商saas全套原型.店铺管理.店铺装修.商品管理.会员管理.维权管理.会员管理.营销管理.财务管理.渠道管理.saas系统.Axure高保真后台管理原型.rp源文件.axure原型 A ...
- 医药/医疗/互联网医疗服务平台/问诊/挂号/开药/处方/医生/医院/问诊订单管理/移动端问诊医疗系统/医生端处方开药系统/web端医药服务平台管理/axure原型/rp源文件/健康咨询/视频问诊/统计
医药/医疗/互联网医疗服务平台/问诊/挂号/开药/处方/医生/医院/问诊订单管理/移动端问诊医疗系统/医生端处方开药系统/web端医药服务平台管理/处方管理/axure原型/rp源文件/健康咨询/视频 ...
- 垃圾回收分类系统、垃圾回收高保真原型设计 、垃圾分类后台管理系统、垃圾回收分类平台、垃圾回收分类、智慧管理系统、订单管理、财务管理、系统管理、库存管理、设备管理、Axure原型、rp原型
Axure高保真web端后台管理系统.垃圾回收分类系统.垃圾回收高保真原型设计 .垃圾分类后台管理系统.垃圾回收分类平台.垃圾回收分类.智慧管理系统.订单管理.财务管理.系统管理.库存管理.设备管理 ...
最新文章
- SNMP introduction
- 如何用C语言编写wav读取函数,C++读取WAV音频文件的头部数据的实现方法
- asp.net mvc5 分析器错误消息: 未能加载类型“XXX.MvcApplication”
- 通过 url 参数 parameters 和 script tag 属性来配置 SAP UI5 运行时
- Activiti中的关于子流程中的并发节点标记处理
- FBEC2021暨第六届金陀螺奖颁奖典礼盛大开幕
- android判断usb已连接,android 判断是否有网络连接(usb连接电脑问题)
- 算法总结之 生成窗口的最大值数组
- spring boot log4j2与三方依赖库log4j冲突无法初始化问题解决方法
- 王道机试指南读后总结-1
- Android 使用RxJava实现一个发布/订阅事件总线
- windows GDI开发
- linux lua 编译 开发,Linux CentOS 编译LUA。。搞半天终于对了= =
- linux java sdk_java linux sdk1.8
- 需求分析报告和需求规格说明书有什么区别?
- ubuntu下mingw32交叉编译环境搭建
- 常见查找算法--(快速查找或二分查找)
- C#中未将对象引用设置到对象的实例
- 小米手机android版本怎么更新,基于Android 10的MIUI稳定版正式推送,你的小米手机更新了吗?...
- 对比度调整的各种方法(二)
热门文章
- 关于maya导出obj到SP里无法识别组信息的解决方案
- 树莓派裸板linux,树莓派裸板开发操作系统 一
- go语言web开发入门之使用http2
- 360手机刷机救砖:QGDP360手机全支持;360手机N5、N5S、N6、N6Lite、N6PRO、N7、N7Lite、N7PRO
- 一加3t运行linux,一加3T手机A3010系统运行速度变慢变卡顿了_怎么进行刷机教程解决...
- java c3p0 配置文件_C3P0默认配置文件
- PW2330原厂规格书12V转5V,3.3V稳压电源芯片,1A-3安
- redist 3 常用命令
- React Native - 使用Vibration API实现设备振动
- 联想微型计算机620S,小巧机身强劲性能 试用联想ideacentre 620s