在原型设计时，我们经常会用到卡片，例如人物信息卡片、商品信息卡片、视频信息卡片；对比传统的表格，使用卡片会更加的灵活，而且样式更加美观。当卡片内容较多时，我们往往会用伸缩卡片，突出重点内容，吸引关注，如果用户感兴趣时就可以展开查看详细内容。
所以今天作者就教大家如何制作高保真的伸缩卡片原型。该原型主要使用中继器制作，从而挺高卡片的复用性，制作完成后，只需填写中继器表格内容，自动实现交互效果，完成后如下如所示效果：
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/b8494994420eef04/#g=1&id=qf5qq1&p=%E4%BC%B8%E7%BC%A9%E5%8D%A1%E7%89%87
【原型下载】
方式2：https://weidian.com/item.html?itemID=4294709768
【原型效果】
【制作教程】
一、材料准备
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~~
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
