【Axure教程】伸缩卡片

在原型设计时，我们经常会用到卡片，例如人物信息卡片、商品信息卡片、视频信息卡片；对比传统的表格，使用卡片会更加的灵活，而且样式更加美观。当卡片内容较多时，我们往往会用伸缩卡片，突出重点内容，吸引关注，如果用户感兴趣时就可以展开查看详细内容。

所以今天作者就教大家如何制作高保真的伸缩卡片原型。该原型主要使用中继器制作，从而挺高卡片的复用性，制作完成后，只需填写中继器表格内容，自动实现交互效果，完成后如下如所示效果：

【原型预览】

https://axhub.im/ax9/b8494994420eef04/#g=1&id=qf5qq1&p=%E4%BC%B8%E7%BC%A9%E5%8D%A1%E7%89%87

【原型下载】

方式1：加入原型分享群后，可免费分享该原型，请咨询微信522073109

方式2：商品详情

【原型效果】

【制作教程】

一、材料准备

1. 默认显示区域材料（重要内容区域）

图片*1、文本标签*n（中文名称、英文名称、手机号码、微信号码、星座）、更多按钮*1、白色矩形背景*1

如下图上半部分所示，文本标签的内容可以根据实际情况设置

2. 默认隐藏区域材料（更多内容区域）

文本标签*n（用户ID、qq号码、生日日期、性别、工作年龄、工作行业、工作单位、工作职位、工作城市、工作地址、工作邮箱……）、白色矩形背景*1

如下图下半部分所示，文本标签的内容可以根据实际情况设置，改区域内的背景和文本标签组合，命名为隐藏内容

3. 中继器设置

将上述1和2所有元件复制粘贴到中继器内部，中继器每行间距设置为20，填写中继器表格内容，具体如下图所示：

pic——对应上面的人物图片、右键导入图片即可；username——用户名（中文名称）；name——英文名；tele——电话号码；wechat——微信号；constellation——星座；ID——用户号；QQ——qq号码；bir——出生日期；sex——性别；working_age——工作年龄；pro——工作行业；cor——工作单位；job——工作职位；workcity——工作城市；workadress——工作地址；workemail——工作邮箱

表格内容大家根据实际需求设置，能够和文本标签一一对应即可。

二、交互制作

1. 中继器每项载入时交互

在中继器每项加入时，我们只需要将将表格内图片和文字设置到对应的内容即可

设置文本——将每列的内容设置到对应的文本标签内，例如设置中文名称的文本标签=item.usrename
设置图片——设置头像图片的值为item.pic

2.更多按钮点击时

当鼠标单击更多按钮时，我们首先要显示隐藏区域的内容，这里用显示事件将隐藏内容的组合显示即可；显示完成后，考虑到已经没有更多内容了，所以我们要将改按钮的文本设置为收起。

当鼠标收起按钮时，我们就要用隐藏事件，将隐藏内容的组合隐藏，然后再将该按钮的文本改为更多。

因为是同一个按钮，所以在鼠标单击时我们就需要添加条件，分情况设置交互

情况1：如果当前按钮文字为更多，我们显示隐藏内容，并且设置当前文本为收起，这里我们可以用设置富文本的事件，将收起的文本设置为红色

情况2：如果当前按钮的文字不是更多（即收起），这是我们用隐藏时间将隐藏内容隐藏，在设置当前文本为更多，同样，我们也是用设置富文本的时间，将更多的文本设为蓝色

这样，我们就完成了整个伸缩卡片的原型模板了，以后使用的话，我们可以直接在excel表格中填写好数据，再复制到中继器表格即可，是不是很方便快捷呢？

那以上就是本期的全部内容了，感谢您的阅读，我们下期见，88~~

【Axure教程】伸缩卡片相关推荐

【Axure教程】分类筛选卡片（订单卡片案例）
卡片是系统常用的展示方式,采用卡片式布局能更直观的用户界面.所以作者今天就和大家分享如何在Axure中制作出分类筛选卡片的原型模板,我们已订单卡片为案例,包括以下交互效果: 1.筛选:可以根据卡片不同 ...
Axure教程:如何使用动态面板？动态面板功能详解
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板动态面板是a ...
纯css+html实现发光伸缩卡片
目录效果展示代码展示效果展示相信很多人都自学过css3,基础知识都知道但是没有很深刻的理解.我一直认为想要深刻理解,没有比在项目中应用更有效的方法了. 因为我本身是学后端的,前端css3这块也 ...
xbanner 动画特效设置android,Axure教程：如何实现爱彼迎App首页Banner的切换效果
原标题:Axure教程:如何实现爱彼迎App首页Banner的切换效果本文分享一个用Axure实现爱彼迎App首页Banner切换效果的方法,供大家参考,欢迎一起交流. 作者最近闲暇时间试着将爱彼迎 ...
axure读取服务器文件,Axure教程｜云盘案例原型：文件管理
今天和大家分享一个后台文件管理demo,包括图片管理.视频管理.音乐管理.文档管理和其它文件管理.这个demo也可以看做云盘.网盘的demo. 该原型交互效果齐全,使用也简单,只需要填写中继器表格即可 ...
【Axure教程】能增删数据的柱状图
柱状图是可视化视图里一个非常重要的工具,在画原型图时,我们也经常用到柱状图.今天作者就教大家如何在Axure里制作一个能增删输入的柱状图模板,效果包括: 查看具体数据--鼠标移入柱状图时,改柱状图的背 ...
AXURE教程：散点图
上一期教会大家如何用axure做堆叠柱状图,本文将教大家如何用AXURE做散点图效果如下: 原型预览及下载地址: https://axhub.im/pro/1882d0a30c3301c9 一.功能 ...
Axure教程：一个通用的app注册/登录页
今天给大家分享一套APP注册/登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博.微信.QQ.支付宝登录页面,注册页面,用户协议和隐私条款.该原型使用简单,交互完善 ...
Axure教程-Banner图片轮播（二）-热区与条件判断
在<Axure教程 Banner图片轮播(一)>基础上增加图片切换按钮. 效果: 轮播2 元件:动态面板和热区步骤: 1,继续添加动态面反,设置如下: 2,在state1中添加添加三个& ...

【Axure教程】伸缩卡片

【Axure教程】伸缩卡片相关推荐

最新文章

热门文章