提速神器Pixso！超详细创建组件和样式指南
玩转组件库，助你高效交付
1. 什么是组件和样式
提到组件库，不得不提到原子设计理论。在化学中，原子组合构成分子——分子组合构成有机物——有机物再创造宇宙万物。相似的逻辑放在设计上，所谓原子就是UI界面中最小的单位，如颜色、字体、图标等基础，由两个或多个原子组装而成具有功能性的组件就是分子，分子和原子组成的更大的组装体——组织，以此类推，拼装组合直至形成实际的页面。
原子设计理论
UI组件是向用户传达意义并向用户提供功能的一套用户界面设计元素，使用UI组件有助于快速而有效地创建复杂的界面，设计师和开发人员可以用它来简化工作，并为用户创造一个统一的产品设计。我们可以这样简单的理解：不同的UI组件（原子）构成不同的模块（分子、组织）——不同的模块又构成不同的页面——不同的页面构成了一个完整的设计。
组件库一般由基础样式、控件和组件文档构成，常见的样式有：
颜色样式：填充颜色、描边颜色、背景颜色
文本样式：字体、大小、行高、间距
效果样式：内阴影、外阴影、高斯模糊、背景模糊
布局网格样式：行、列、网格
基础组件库
2. 为什么要创建组件和样式
2.1 组件和样式的作用
加快设计进程
设计师可以依赖组件库中现成的设计元素，而不需要从头开始创建新元素。开发者也将更容易创造新的功能，如果界面是由现成的UI组件组成的，他们就不需要编程新的屏幕，产品开发变得灵活，更加容易扩展。
在设计中实现一致性
UI组件库中的设计元素具有一致性，当组合来自不同库或全新创建的元素时，很难实现这种一致性。UI组件库可以成为设计系统的基础和设计师的单一事实来源，帮助统一颜色、尺寸、字体和元素，避免多样式导致的视觉效果不佳以及给用户带来的认知障碍。
2.2 用Pixso创建组件和样式的优势
使用Pixso中的组件和样式的非常简单：设计师可以将自己经常使用的样式创建为组件，将组件上传至团队资源库与其他成员共享使用。当主组件修改，其他实例组件均可以选择同步更新，无需手动。这既提高了设计效率，也避免了在手动修改过程中出现遗漏和差错。Pixso还设置有组件搜索功能，当使用的UI组件数量增多，设计师可自定义命名每一个UI组件，一键搜索，方便迅速查找需求，快捷使用。
这两个软件没有什么关系。
figma是当前一款热门的矢量设计软件，它基于浏览器的支持多人协同的设计工具，专精于UI设计领域。因为运行在云端，所以极其利于多人协作，目前越来越多的设计团队从本地设计软件转向至figma。当前，figma已经成为主流原型设计工具。
2020年，66%的设计师使用Figma进行UI设计，而在2019年这一比例为37%。Figma在海外市场发展呈现迅猛上升态势。
而Pixso，一款与figma类似，但更适合国内中文用户的协同在线UI设计软件。
Pixso的立命之本是UI设计，集合了矢量网格、自动布局、智能选择、布尔运算等诸多U设计必备功能，能完美满足设计师的设计工作需求。
Pixso的核心功能
在线协同，完美契合当下职场人士的需求。基于云端的操作，让用户打开浏览器就能随时开始设计，打破地域与设备的限制；同时，Pixso支持自动储存与历史版本保存，用户不再需要保存大量文件，将文稿储存于云端，不必担心文件丢失等问题，减轻了工作负担。
在使用传统设计软件的过程中，往往需要设计师导出文件，保存过后再通过第三方软件进行发送，接收者也需要登录第三方平台来查看，一旦设计稿出现改动，这些步骤需要从头再来，过程十分繁琐。
而使用Pixso进行设计，只需要设计师在绘图页面点击分享，就能生成链接进行传输，接收者点开链接就能收到最新版的设计稿，一旦内容有修改，都将自动更新，大大缩减了工作步骤提高了效率。
CSS是前端基础技能之一，而CSS最重要的功能就是网站布局。CSS布局方式有很多，从远古时代的table（表格）布局-->float（浮动）布局-->position（定位）布局-->flex（弹性）布局-->grid（网格）布局（还未正式推出），下面咱们简单谈一谈各种布局的用法及其优缺点。
table布局就是将网站当做一个表单来做，这里不做展开，因为现在基本不这么用了。
float：浮动。float刚开始并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题的。
如下图：
这种常见的图文效果，没有float之前是很难达到的。有了float之后只需要加一个float：left，轻松搞定。
‘咦，如果float可以处理图文的问题，那用来布局不也可以吗？’，后来有人用float试着用于网页布局，还真的可以。
网页中最常见的布局如下：
用float做
比table布局要方便不少，不过float随之而来的带来了 “浮动高度塌陷”的问题：
如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0；
引申：网页元素一般分为 普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。
position：定位；顾名思义，就是确定位置。position同样可以用做网页布局。
同样的效果
不过position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以html为父元素的定位。
flex：弹性；弹性布局很好的解决了float和position的问题，非常好用。
使用方法：
在父元素使用 display:flex确定弹性作用的范围。
然后
justify-content：center（space-around，space-between等）；水平方向布局；
align-items:center(flex-start,flex-end等)垂直方向布局；
不过flex不兼容IE8及以下的浏览器。
大部分情况下flex布局已经能满足需要，不过flex只能用作一维布局，也就是说，flex一次只能作用于一条线。如果想要进行二维布局，必须翻转坐标二次弹性，这样会显得不够优雅，这时候grid（网格）布局就发展起来了。
grid布局用法和flex相似，但是作用于二维布局。
先在父元素使用 display:grid确定网格作用范围；
然后
grid-template-columns: 40px 50px auto 50px 40px（行）
grid-template-rows: 25% 100px auto（列）
等等属性，这里只简单介绍，大家了解有这个东西就行。
在现实工作用，以flex为主，position辅助已经足够应对所有问题。
