pixso有弹窗有背景模糊
pixso logo
提速神器Pixso！超详细创建组件和样式指南
玩转组件库，助你高效交付
1. 什么是组件和样式
提到组件库，不得不提到原子设计理论。在化学中，原子组合构成分子——分子组合构成有机物——有机物再创造宇宙万物。相似的逻辑放在设计上，所谓原子就是UI界面中最小的单位，如颜色、字体、图标等基础，由两个或多个原子组装而成具有功能性的组件就是分子，分子和原子组成的更大的组装体——组织，以此类推，拼装组合直至形成实际的页面。
原子设计理论
UI组件是向用户传达意义并向用户提供功能的一套用户界面设计元素，使用UI组件有助于快速而有效地创建复杂的界面，设计师和开发人员可以用它来简化工作，并为用户创造一个统一的产品设计。我们可以这样简单的理解：不同的UI组件（原子）构成不同的模块（分子、组织）——不同的模块又构成不同的页面——不同的页面构成了一个完整的设计。
组件库一般由基础样式、控件和组件文档构成，常见的样式有：
颜色样式：填充颜色、描边颜色、背景颜色
文本样式：字体、大小、行高、间距
效果样式：内阴影、外阴影、高斯模糊、背景模糊
布局网格样式：行、列、网格
基础组件库
2. 为什么要创建组件和样式
2.1 组件和样式的作用
加快设计进程
设计师可以依赖组件库中现成的设计元素，而不需要从头开始创建新元素。开发者也将更容易创造新的功能，如果界面是由现成的UI组件组成的，他们就不需要编程新的屏幕，产品开发变得灵活，更加容易扩展。
在设计中实现一致性
UI组件库中的设计元素具有一致性，当组合来自不同库或全新创建的元素时，很难实现这种一致性。UI组件库可以成为设计系统的基础和设计师的单一事实来源，帮助统一颜色、尺寸、字体和元素，避免多样式导致的视觉效果不佳以及给用户带来的认知障碍。
2.2 用Pixso创建组件和样式的优势
使用Pixso中的组件和样式的非常简单：设计师可以将自己经常使用的样式创建为组件，将组件上传至团队资源库与其他成员共享使用。当主组件修改，其他实例组件均可以选择同步更新，无需手动。这既提高了设计效率，也避免了在手动修改过程中出现遗漏和差错。Pixso还设置有组件搜索功能，当使用的UI组件数量增多，设计师可自定义命名每一个UI组件，一键搜索，方便迅速查找需求，快捷使用。
多重随机标签