组件简介

组件是由图层与交互构成的可复用集合。任意图层和交互构成的集合都可转换为组件,并通过创建子版组件将组件复用于各场景的任意位置。该功能可以避免不必要的重复性工作、提升每一场景的易读性,从根本上提高原型设计工作流效率。

使用组件

从场景中创建组件

你可以从场景中创建组件。选择一个或多个需要转换为组件的图层,然后点击工具栏上的“组件”图标,或右键点击已选择的图层并在弹出菜单中选择“转换为组件”,即可自动创建一个包含了相应图层与交互的组件。同时,该组件的一个子版组件将替换掉原有图层。

从场景中创建组件

直接创建组件

此外,还可以从空内容开始创建组件。打开左侧的组件面板并点击加号图标,一个空组件就会被创建,在这里可以对该组件进行自定义操作。

直接创建组件

添加子版组件

从组件面板中将一个组件拖拽到场景内的画布上,即可创建相应的子版组件。

添加子版组件

编辑组件

母版组件

当需要编辑母版组件时,需先进入组件编辑状态,方法为:在组件面板中点击组件或右键点击子版组件并在弹出菜单中选择“编辑母版组件”。

编辑母版组件的操作方法与编辑场景相似。在组件中创建、修改或删除图层、变量、触发、反应等。相关改动会被应用到该组件的所有子版中。

点击右上角的“返回场景编辑”按钮或在场景面板中点击任意场景即可回到场景编辑界面。

母版组件

子版组件

编辑子版组件中的图层时,只表示该子版组件中的属性被修改,并不会影响到母版组件。 此时即便更改了相应的母版组件,子版中被修改的属性值依然得以保留。通过这一方式可以实现对来自于同一个母版组件的不同子版进行不同的自定义操作。

如果希望让某个被修改的子版恢复成和母版统一的属性,只需右键点击该子版组件并在弹出菜单中选择“恢复为母版属性”,那么所有已被修改的属性值将会被清除从而使子版回到与母版一致的状态。

子版组件

同步到母版组件

你可以将子版组件与其所属的母版组件进行关联同步。通过这一选项,不必进入组件编辑模式,直接在场景中编辑子版组件就可以将编辑结果同步到相应的母版组件上。

同步到母版组件

修改子版组件中的变量

子版组件中的变量的初始值可以被修改。要修改变量的初始值,需在母版组件中为相应变量开启“可在子版组件中修改”选项。开启后,即可在子版组件的属性面板中修改变量初始值。

修改子版组件中的变量

作用于组件外部的交互

一般而言,组件与场景是相互独立的,也就是说组件内的触发动作和反应动作不能作用于组件外的图层和变量。同理,场景内的触发动作和动作也不能控制组件内的图层和变量。

为了使组件可以同场景中的其他素材相互影响,从而制作更精致的交互,可以使用“发送”反应和“接收”触发来解决这一问题。在组件内使用“发送”反应来发出讯号并在组件外(场景中)使用“接收”触发来接收这一讯号,反之亦然。

在组件中进行设置时应选择“组件外部”作为渠道,而在组件外进行设置时应选择“组件”作为渠道。

作用于组件外部的交互

Example

Checkbox Component

Language selector
TOP