Axure高保真：如何在原型图上实现「知乎」问答卡片交互效果

当我们在使用别人产品时，遇到一些觉得比较好的设计或是一些交互体验上比较舒适的设计时，我们想要将其借鉴过来，但又苦于低保真原型无法将交互效果完全复刻。可能在大公司因为配备了交互设计师，产品同学们只需将想法以说明文本形式呈现在原型上即可。

但公司缺乏交互设计师这一角色时，产品同学可能不得不制作一些高保真的原型图，一方面是减少与开发同事之间的沟通成本，一方面是可以让老板直接知晓某个功能的最终效果，特别是某些很难用文字表述的交互效果；

比如，笔者最近注意到的「知乎」上的问答卡片交互效果（下图所示），如若我们直接用文字表述予同事或老板：多张卡片叠加在一块，左右滑动时最上方卡片左右滑出，下一张卡片放大至第一张卡片大小并展示，再次滑动继续切换…

显然，面对如此繁琐的文字，如果能直接在原型上呈现效果是更加合适的。那这个问答卡片的切换，我们如何去实现呢？

我们先来分析这个交互事件可大致分为几个：

左右滑动
隐藏滑动的卡片
放大下一张卡片
移动展示出下一张卡片

明确交互事件之后，我们便可以开始制作。

第一步：素材准备

我们先将整体卡片素材准备好，仔细观察我们可知，卡片设计的素材控件有：文本、矩形、编辑icon、不可见icon、2个button。我们在「左侧功能栏-元件」中找到对应的元件拖拽到画布区，按照对应位置调整，并调整相关字体大小与颜色：

调整完毕之后，我们会发现卡片除了颜色与大小有出入以外，还需调整其他样式。我们选中矩形，打开「右侧功能栏-样式」继续调整边框、圆角与阴影