如何创建和使用组件

发布时间: 2021年1月20号
Pixso-如何创建和使用组件
当我们的设计工作中有大量重复的内容——例如同一类设计场景时,如果能创建组件进行设计,将起到事半功倍的作用。在Pixso中,您可以从任何对象或图层的集合中创建组件,进行复用,当主组件修改时,将会自动同步至所有组件。组件的使用,是提升工作效率的重要一环。
什么是组件?
[ 组件 ]: 是在设计中可以反复使用的UI元素。
[ 实例组件 ]: 通过组件被复制出的对象,即为实例组件。本质上实例组件是该组件的关联副本,因此,当设计师修改主组件时,他的所有实例组件都会随之改变。例如:当您将一个正方形的组件调整至长方形后,实例组件将同步更新为长方形。
[ 库 ]: 在Pixso中,所创建的组件可进行保存,保存后的组件将会形成资源库。您可以在其他文件中选择更新,从而使用这些实例组件。
组件能为您提供什么?
设计规范,提升产品视觉统一
在不使用组件的情况下,重复设计不仅会消耗设计师大量的时间,同时也容易出现多样式导致的视觉效果不佳,给用户带来认知障碍。
通过“组件”功能可以轻松解决这类问题,当设计师创建好可复用的组件后,在其他页面可以直接使用。尤其是在大型项目中,多位设计师协同设计,可能出现边框颜色稍有出入或交互效果略有不同,难以保证设计一致,这种情况下,Pixso的组件就是精准的解决方法,有利于保持视觉风格的统一,加深用户对产品的视觉认知。
创建组件:
1、点开包含想要创建的组件所在的图层;
2、选中需要创建的组件,鼠标右键单击,出现选项后选择“创建组件”或使用快捷键:Ctrl+Alt+K;
3、在组件面板中,选择“组件”选项,可以对组件进行查看。
使用组件:
在同一个文件中,复制组件即可创建实例;或点击组件面板,将鼠标光标悬浮至需要使用的组件上,单击左键将其拖拽至画板中,实例组件创建则创建成功。
在不同文件中,则需要点开组件面板,选择团队资源库,在资源库中打开组件列表,开启需要的组件开关,将其更新至组件面板中,即可使用。
主组件修改,实例组件自动同步
产品迭代过程中,经常会遇到需要调整某通用模块的时刻,例如整个设计中大范围使用的logo,一旦有某些地方需要改动,通常得手动逐一修改,工程量大不谈,还容易出现遗漏的情况。
而现在,使用“组件”功能就不用再重复以上繁琐步骤,只需要选择主组件进行修改,就可以同步应用到所有组件,实现全局修改。而当需要修改某处单独的实例组件时,也可以通过“分离”、“重置”和“替换”等操作轻松实现。
编辑组件:
在画布中,选择实例组件,右键单击,选择“跳转到主组件”,即可立刻跳转至主组件并对其进行编辑;
在组件面板选择需要编辑的组件,左键单击即可立刻跳转至主组件并对其进行编辑。
当您不希望某个实例组件受到主组件修改的影响,可以先将其从主组件中分离出来,使其保持当前的层和属性。
分离实例组件:
1、右键单击画板中需要分离的实例组件;
2、从菜单中选择“实例分离”,即分离成功,可在其基础上编辑实例。
如何进行实例替换:
1、右键单击画板中需要替换的实例组件;
2、在右侧属性面板中找到实例菜单栏,下拉菜单,出现“实例替换”;
3、左键单击需要替换的组件,即可完成替换。
重置实例组件:
1、右键单击画板中需要重置的实例组件;
2、从菜单栏中选择“实例重置”,即重置成功,该实例组件将恢复组件初始状态。