1. 什么是组件和样式

提到组件库,不得不提到原子设计理论。在化学中,原子组合构成分子——分子组合构成有机物——有机物再创造宇宙万物。相似的逻辑放在设计上,所谓原子就是UI界面中最小的单位,如颜色、字体、图标等基础,由两个或多个原子组装而成具有功能性的组件就是分子,分子和原子组成的更大的组装体——组织,以此类推,拼装组合直至形成实际的页面。

原子设计理论

UI组件是向用户传达意义并向用户提供功能的一套用户界面设计元素,使用UI组件有助于快速而有效地创建复杂的界面,设计师和开发人员可以用它来简化工作,并为用户创造一个统一的产品设计我们可以这样简单的理解:不同的UI组件(原子)构成不同的模块(分子、组织)——不同的模块又构成不同的页面——不同的页面构成了一个完整的设计。

组件库一般由基础样式、控件和组件文档构成,常见的样式有:

  • 颜色样式:填充颜色、描边颜色、背景颜色

  • 文本样式:字体、大小、行高、间距

  • 效果样式:内阴影、外阴影、高斯模糊、背景模糊

  • 布局网格样式:行、列、网格

基础组件库

2. 为什么要创建组件和样式

2.1 组件和样式的作用

  • 加快设计进程

设计师可以依赖组件中现成的设计元素,而不需要从头开始创建新元素。开发者也将更容易创造新的功能,如果界面是由现成的UI组件组成的,他们就不需要编程新的屏幕产品开发变得灵活,更加容易扩展。

  • 在设计中实现一致性

UI组件库中的设计元素具有一致性,当组合来自不同库或全新创建的元素时,很难实现这种一致性。UI组件库可以成为设计系统的基础和设计师的单一事实来源,帮助统一颜色、尺寸、字体和元素,避免多样式导致的视觉效果不佳以及给用户带来的认知障碍。

2.2 用Pixso创建组件和样式的优势

使用Pixso中组件和样式的非常简单:设计师可以将自己经常使用的样式创建为组件,将组件上传至团队资源库与其他成员共享使用当主组件修改,其他实例组件均可以选择同步更新,无需手动这既提高了设计效率,也避免了在手动修改过程中出现遗漏和差错。Pixso还设置有组件搜索功能,当使用的UI组件数量增多,设计师可自定义命名每一个UI组件,一键搜索,方便迅速查找需求,快捷使用。

3. 如何用Pixso创建组件和样式

3.1 颜色样式

首先是颜色样式的创建,颜色是表现页面整体风格的重要基本元素,它通常会包含主题(品牌)色、中性色或者辅助色,帮助建立品牌的识别性,梳理页面的视觉层级关系,突出内容并平衡其他视觉元素。在Pixso中,颜色样式可以应用于填充样式、描边样式和文字,也可以为图像或渐变创建颜色样式具体创建步骤为:

Step1:选择需要创建样式的对象。

Step2:在右侧属性面板中,单击要保存的属性的样式图标。

Step3:点击颜色样式面板中的【+】号,创建新样式。

Step4:为样式命名,然后单击【创建样式】。

颜色样式

3.2 文本样式

文字样式包括:字号、字重、行高和字距等。设计中,经常需要为不同的文本设置不同的属性,使用文本样式将会很大程度提高设计效率。我们可以将文本样式应用于整个文本图层,或仅将其应用于图层中的部分文本。选择一款字体时,需要考虑团队协作中存在不同终端的适配问题,字号通常采用12px-64px,使用常规和粗体两种字重Pixso的默认字体为思源黑体。

在Pixso创建文本样式与创建颜色样式的步骤相似,只需四步

Step1:选择已经设置好样式的文本;

Step2:在右侧属性面板的文本部分中,单击样式图标

Step3:点击文本样式面板中的【+】图标 以创建新样式。

Step4:为样式命名,然后单击创建样式。

注意∶不能通过文本样式设置文本对齐方式,需要单独设置每个文本块的对齐方式。

文本样式

3.3 效果样式

我们可以为内阴影、外阴影、高斯模糊、背景模糊等效果创建样式,以供将来快速使用,具体步骤如下∶

Step1:选择作用对象。

Step2:如果所选对象没有效果样式,则需要为它添加效果样式

Step3:在右侧属性面板的效果部分中,单击图标

Step4:点击效果样式面板中的【+】图标以创建新样式。

Step5:为样式命名,然后单击创建样式。

效果样式

3.4 布局网格样式

为追求美观,等间距排列是排版的基本要求,在Pixso布局网格样式中,我们可以根据设计规范,设置行或列的数量、类型、宽度、边距和间距。具体步骤如下∶

Step1:在画布中创建(或选择)一个画板。

Step2:在右侧属性面板中,将布局网格添加到画板中。

Step3:设置你所需要的布局网格的属性。

Step4:在属性面板的【布局网格】部分中,单击图标。

Step5:点击面板中的【+】图标创建新样式。

Step6:为样式命名,然后单击创建样式。

布局网格样式

3.5 创建UI组件

组件是可以在设计中重复使用的UI元素,使用UI组件能大大降低我们的设计成本,提高工作效率。组件搭建除了需要掌握其构成原理外,还需要了解每个组件的类型、状态、规格等基础信息。

以按钮为例,在ToB侧Web端业务系统中常用到24px、32px、40px三种尺寸规格,常用状态包含Normal、Hover、Focused、Pressed、Disabled等,此外还拥有Primary、Outline、Dashed、Danger等多个不同类型。而一个组件存在多种形态,意味着组件的复杂程度提升,相对应的维护成本也会增加。

在Pixso中,既可以创建单个组件,也可以批量创建组件。

(1)创建单个组件:

可以从任何对象或图层里创建组件。组件可以像形状、按钮或文本一样简单,也可以像卡片和菜单这样复杂的设计。

Step1:选中想要创建为组件的图层。

Step2:我们可以在上方工具栏中创建组件,也可以右键选择【创建组件】,亦或是使用键盘快捷键。

创建单个组件

Step3:Pixso会将图层嵌套在一个特殊的组件画板中,你可以通过紫色图标来识别图层面板中的UI组件。在右侧面板中,可以为协作者添加描述。协作者和开发人员可以在Inspect面板中查看此信息。

为协作者添加描述

(2)批量创建组件:

默认情况下,创建组件是创建单个组件,不过Pixso支持批量创建组件。

Step1:选择要创建组件的图层。

Step2:点击组件按钮旁边下拉按钮。

Step3:从选项中选择【创建多个组件】。

批量创建组件

3.6 建立组件变体

有组件库构建经验的设计师不难发现,当我们在创建组件并构建设计系统时,会发现经常需要具有非常相似,只有细微差别的UI组件。Pixso中的【组件变体】可以很好地帮助简化我们的组件库,在相同的母版下的副件可以单独设置样式,并不会影响与母版之前的关联。我们可以将相似的组件建立【组件变体】统一放置管理,这会简化组件库,并更容易找到所需要的东西。

大家在创建变体时容易感到困惑,尤其是对于拥有多个变体的组件,为此,我们要了解一下相关的概念:

  • 属性:是我们组件的可变方面,例如:按钮组件的属性可以是类型、大小、位置等。

  • 值:是每个属性可用的不同选项,例如:状态属性可以有默认、悬浮、点击和禁用等。

  • 命名:为了方便使用,我们在创建变体时,会使用一致的命名约定,组件名称中的每一个“/”都会创建一个层次,第一个“/”之前的文字将成为组件集的名称。

组件变体命名

如果你已经在Pixso中拥有组件库,你可以将组件组合为变体,如:

Step1:选择要组合为变体的组件。

Step2:在右侧边栏中,单击【创建组件变体】按钮。

Step3:Pixso会将所有组件添加到单个组件集中。

组件添加到单个组件集

3.7 发布更新和使用

可以将创建好的样式和UI组件发布到团队的资源库,可以单独发布一个样式,也可以与任何组件一起发布。当每次有更新发布样式或主组件时,Pixso将自动通知到每一个成员,点击更新即可应用。在组件面板下,可以通过搜索的方式找到需要调用的UI组件,也可以通过展开菜单的方式找到需要的UI组件。需要时,直接选中拖动,便可使用。

(1)发布样式。

Step1:打开左侧面板中的组件面板,然后单击(或使用键盘快捷键)团队资源库图标。

Step2:找到【当前文件】,点击发布按钮。

Step3:这时可以看到所有样式和组件的列表以及他们的更新状态,如果有需要可以添加更改说明。

Step4:单击发布以共享。

发布资源库

(2)更新样式。

如果你对已发布的样式或组件进行更改,这些更改只能应用到当前文件中的实例,但如果你希望这些更新同步到团队里,则需要【发布更新】,发布成功后,左侧的组件面板中的图标上显示一个蓝点作为提示。

Step1:单击左侧边栏顶部的组件面板打开团队资源库。

Step2:查看列表,里面详细列出了添加、修改或删除的任何样式和组件。

Step3:添加相关描述。

Step4:单击发布按钮,Pixso将显示一条通知以确认你的组件更改是否成功发布。

更新样式

4. 小结

组件库是一个强大的提效工具,当设计师创建好后,在其他页面可以直接使用,尤其是在大型项目中,多位设计师协同设计,可能出现边框颜色稍有出入或交互效果略有不同,难以保证设计一致,这种情况下,使用Pixso的UI组件就是精准的解决方法,有利于保持视觉风格的统一,加深用户对产品的视觉认知。工欲善其事必先利其器,我们一定要学会利用好工具,将Pixso的组件库功能发挥到最大,赶快打开工作台来试试吧!