项目
2022年2月6日
使用变量构建导航组件
导航在任何数字界面中都是关键。智能组件使我们能够创建定制的互动式导航组件,这些组件与其余部分完美配合。
导航在任何数字界面中都非常关键。智能组件使我们能够创建自定义的交互式导航组件,这些组件与您的原型的其余部分完美配合。在本指南中,我们将介绍嵌套组件的概念,使用事件变量为组件中的元素添加事件,并将这些事件传递给您的组件。使用嵌套组件的主要好处之一是它可以完全控制其状态,例如另一个组件中元素的唯一悬停状态。
从原子级别开始
Framer允许您创建完全交互式和动画组件,甚至允许您在其他组件中嵌套组件。我们正在为包含两种不同类型嵌套组件的网站创建导航栏组件,这些组件具有各自独特的交互。我们的项目将包含一个包含各种嵌套组件的导航栏,即五个导航项和一个购物车组件。我们嵌套组件的设计,导航列表项和购物车,将影响我们如何设计导航栏。因此,最佳工作流程包括从“最深层”的嵌套组件开始并从那里开始构建。
嵌套组件
一旦我们的两个组件准备就绪,我们可以开始创建我们将嵌套这些组件的组件。绘制您的导航栏,在画布上选择它,然后在工具栏中点击组件工具。要在我们的新组件中嵌套另一个组件,只需将任何其他组件拖动到组件画布并将其放置在您设计的导航栏内。
从导航栏触发交互
回到主画布上,我们希望能够点击“服装”并导航到一个全新的屏幕。如果您使用原型连接器将组件连接到新屏幕,我们可以设置一个交互。但是,这将在我们点击组件的任何地方时触发。这不是我们想做的,因为我们只想从特定元素触发此转换。这就是事件变量的用武之地,它们是一种特殊类型的变量,不附加到属性(如不透明度或填充)而是附加到事件。
最新博客文章
实现您的业务目标
与亚历山大咨询!
探索一个融合了财务管理、投资和以盈利为导向战略的动态用户体验设计项目。深入了解我们精心打造的旨在让用户在人工智能帮助下进行智能投资的网站。
87%
招聘成本降低
诺兰·瓦卡罗
董事长,大陆
91%
保留率
贾斯汀·瑞尔·马德森
设计总监,3Lateral