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

访客4年前关于黑客接单1271

如何在原型图上实现「知乎」问答卡片交互效果呢?来文中看看~

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

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

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

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

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

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

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

左右滑动

隐藏滑动的卡片

放大下一张卡片

移动展示出下一张卡片

明确交互事件之后,我们便可以开始 *** 。

之一步:素材准备

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

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

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

调整完毕之后,我们会发现卡片除了颜色与大小有出入以外,还需调整其他样式。我们选中矩形,打开「右侧功能栏-样式」继续调整边框、圆角与阴影,完毕之后我们将其组合并命名为卡片1(个人建议大家在 *** 相关控件与素材时,保持命名这个习惯,方便在素材较多的页面搜索相关素材),最终素材效果如下:

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

第二步:左右滑动交互效果

熟悉Axure的朋友都知道,如果涉及左右滑动动作交互,我们一般都会用到动态面板,如果是用面板状态切换这一动画效果进行设计,显然是达不到我们想要的效果的,所以我们需要多个面板进行交互。

我们先将素材卡片1转化为动态面板,取名面板卡片1,之后我们在「右侧功能栏-交互」中点击「新建交互」,找到「手势-向左滑动」,并添加相应元件工作「显示/隐藏」,将元件进行隐藏,并加入向左滑动动画,即可得到向左滑动的效果:

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

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

同理,我们对面板卡片1新建交互,复制粘贴之前的滑动交互,将向左统一改成向右,即可得到一个可以左右滑动的素材面板卡片1:

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

我们再讲面板卡片1复制粘贴,得到面板卡片2与面板卡片3,效果如下:

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

第三步:卡片放大效果

我们已经简单实现了左右滑动切换的效果,不过这个效果和我们需要的还是有所差距。我们进一步实现——切换时下一张卡片进行放大并移动展示出来的效果

首先,我们需要将卡片2,3(注意是卡片23而非面板卡片23)进行等比例缩放。这里要注意,如果我们是手动将两者缩放,后续的放大移动上像素与坐标调整会比较麻烦,故我们可以保持三张卡片大小不变,而是在面板卡片2,3新增交互「载入」交互事件并插入动作「设置尺寸」

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

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

相关文章

微信的设计奥秘:“好看”和“看一看”背后的信息分发机制

微信的设计奥秘:“好看”和“看一看”背后的信息分发机制

微信内最通例最常见的社交渠道是伴侣圈和私聊。日常糊口中私聊不限于语音,图文,和视频等多种形态。伴侣圈里互动知晓挚友动态,“看一看”阅览伴侣推荐文章。看一看补充了除私聊和伴侣圈之外的一部门社交需求,同时...

决定离职后,我用3天拿到了产品offer!

决定离职后,我用3天拿到了产品offer!

我是一位6岁的互联网人,4岁的产物司理。我的职业生涯,也并没有那么顺利,包罗最近的去职,其实也并不在我的打算之内。 此次去职的整个进程大抵如下:周一与部分司理相同,周二整理简历,周三投简历,周四上午...

对B端产品经理来说,懂点企业架构很重要!

对B端产品经理来说,懂点企业架构很重要!

“设计一件东西时,应当把它放在下一个更大的背景中考虑⸺房间里的椅子,房子里 的房间,环境里的房子,城市规划里的环境。” ——埃利尔·沙里宁 B端产品的客户对象是企业用户。B端产品要符合商业组织战略...

文字列表的信息设计

文字列表的信息设计

文字列表是很好的信息揭示形式,不单能吸引留意力,便于快速欣赏,缩随笔本的同时也能展示项目之间的干系。本文作者从7个方面,来跟各人分享一下文字列表设计一些发起。enjoy~ 文字列表是很好的信息揭示形...

3个角度,分享医疗行业认知

3个角度,分享医疗行业认知

健康是促进人的全面发展的必然要求。提高人民健康水平,实现病有所医的理想,是人类社会的共同追求。 在中国这个有着13亿多人口的发展中大国,医疗卫生关系亿万人民健康,是一个重大民生问题。 医疗卫生事业是...

再造短视频电商?

再造短视频电商?

一、电商泛内容化改变从何而起 这个话题源自于好久之前与伴侣的一次谈天。 其时接头完以为决定和购置场景照旧应该分隔,信息流推荐的效率也不可以或许包围购物场景,抖音版淘宝应该是难以作为主要电商形式呈现,...