【Axure教程】中继器伸缩卡片

0 评论 2574 浏览 4 收藏 6 分钟

编辑导语:在做原型设计时,我们经常会使用到卡片。当卡片内容比较多时,为了页面美观与重点突出,会采用伸缩卡片。那么,如何利用中继器做伸缩卡片呢?本文对该步骤进行了梳理,分享给你,希望对你有所帮助。

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

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

原型地址:https://e7z1fd.axshare.com/#g=1

一、材料准备

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~~

 

本文由 @做产品但不是经理 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自pexels,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!