交互原型在向非设计师解释设计理念时起着非常重要的作用，可以帮助他们快速建立认知，创造沉浸感，对最终产品的效果有更清晰的理解。今天，即时设计设计师以下图中的交互原型制作为例，告诉您如何使用即时设计快速创建页面跳转的交互原型。
此外，用开关案例简要介绍如何在交互原型中使用即时设计的实用功能变体组件。通过本文的研究，即时设计设计师希望帮助您掌握即时设计交互原型的基本制作方法，提高工作效率。
用即时设计制作交互原型，只需4步
第一步：登录即时设计
进入即时设计网站，登录即时设计账号，新建即时设计文件。
https://js.design/?source=csdn&plan=btt4121
第二步：导入材料
即时设计可以用来绘制UI界面图。即时设计在精细矢量设计、自动布局等UI所需的核心功能上已经成熟，使用方便。此外，还可以使用即时设计资源广场的材料。即时设计资源广场提供大量的设计模板和材料，本地化的字体资源大大提高了设计师的工作效率。同时，设计师可以选择每天花时间浏览即时设计社区，学习基础知识，了解最新的设计趋势，探索各种设计风格，为自己的项目收集大量的视觉灵感和创意。
在这种情况下，即时设计设计师使用即时设计官方资源库的材料进行原型制作。
第三步：制作交互原型
选择即时设计右属性面板中的“原型”进行原型制作，如下图所示
设置步骤如下：
鼠标选择“Recom“文本，选择右属性面板点击交互事件右侧的“+”图标，点击弹出弹出窗口触发下拉框，下拉框显示触发事件包括单击、双击、悬停、按下、鼠标移动、鼠标移出、按下、松开，即时设计设计师选择“单击”作为触发条件。操作下拉框包括无（默认）、跳转到，变体切换，打开弹出窗口，返回，关闭弹出窗口，这里选择“跳转到”Home“页面。选择动画下拉框，可选择即时、溶解、移入、移出、推、滑、滑出多种动画，这里选择即时。
选择底部导航“选择底部导航”order灰色图标，根据上述操作，设置触发为“单击”，操作为“跳转到”，跳转目标页面为“order动画效果为“即时”。
选择底部导航“选择底部导航”Home“灰色图标”Community“灰色图标”Me灰色图标，设置参数同上。
第四步：预览交互原型
如下图所示，通过上述步骤设置参数后，点击顶部导航栏的演示三角形图标进行原型演示。
可交互原型的制作总结
通过以上步骤，我相信您可以快速创建一个简单的交互原型。通过交互原型演示，设计师可以在团队合作和分享中更直观、更有效地表达自己的想法。
即时设计是一种在线UI/UX设计工具，在UI设计和交互制作方面也非常方便，可以通过团队合作查看相关反馈，对我们的设计师非常有用。除了上述基本的交互操作外，即时设计还具有实时在线合作、一键交付、多功能文件导入、全球风格自动布局、团队合作等诸多非常实用的功能。通过低代码交付，所有图形信息都可以转换为代码，开发人员可以直接在代码面板上查看和复制代码。通过这些即时设计设计工具，可以有效解决以往设计中团队沟通困难、设计效率低、资源管理混乱等痛点。因此，即时设计设计师强烈推荐您尝试，相信您会有很多收获。
6354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
