时间是宝贵的资源。在产品设计时,许多设计师都梦想在更短的时间内完成项目,同时又不牺牲可用性或创造力——UI组件凭借高复用性和一致性,可帮助设计师实现这一目标。

什么是UI组件

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

UI组件可以分为通用型组件和业务型组件两大类,通常采用分层PSD格式,一般包括以下基本内容:

  • 按钮、输入框、列表项等所有界面元素的不同状态

  • 元素正常状态下的调色板样式,以及被按下时的状态、聚焦时的状态,以及不活动元素的颜色

  • 标题、正文、链接、脚注、注释等文本样式

  • 图标集和带有品牌整体风格的插图等。

什么是UI组件

UI组件的来源主要来自平日里有意识、有目的的收集与整理,Pixso资源社区有各类UI组件集,可供设计师参考、收藏和使用。

为什么设计师都爱UI组件

UI 组件可以通过多种不同的方式帮助改进设计工作流程:

加快设计进程

UI组件简化了寻找设计问题解决方案的任务,有了详细的UI Kit,设计师可以依赖组件中现成的设计元素,而不是从头开始创建新元素。开发者也将更容易创造新的功能,如果界面是由现成的组件组成的,他们就不需要重新编程新的屏幕。产品开发变得灵活,产品容易扩展。

在设计中实现一致性

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

检验设计项目

UI 工具包让设计师有机会检查每个组件并学习如何自己构建相同的组件。在Pixso中,我们可以在一个独立于主产品的文件中进行UI组件的创作,并将其作为一个库使用;创建完成后,我们点开组件面板中的“组件”选项,就可以对组件进行查看和检查。

为什么设计师都爱UI组件

图为Pixso资源社区中的 Ant Design 设计规范

Pixso可以从任何对象或图层的集合中创建组件,进行复用。组件的使用,是提升设计工作效率的重要一环。

UI工具包,好用却非万能

UI工具包并不总是完美的解决方案。它们也有缺点:

元素数量有限

并非所有UI工具包都是全面的,有时选择使用的UI工具包可能没有产品所需的某个元素,这时就不得不投入时间和精力来创建新的元素。

UI工具包需要适应现有设计

如果已有现有设计,则需要花时间自定义UI组件中的元素并将它们集成到原始设计中。根据设计的复杂程度,这可能需要数小时到数周。有时,定制套件比从头开始创建设计需要更多时间。

限制设计师的创造力

产品设计是一个崇尚创造力和创新的领域,但是当过度依赖UI工具包时,很难提供真正新颖的设计。UI工具包通常包含完整的“开箱即用”演示,当看到某物的设计方式时,可能有意或无意地尝试采用相同的方法。正因为如此,设计师在开发一个新的或特别创新的产品时,应该更加谨慎地使用 UI 工具包——如尝试将UI工具包用于设计中较小的、不太重要的部分。

如何使用UI工具包

用于快速原型制作

设计师可以根据产品需求选择UI组件,并使用工具包中的元素快速模拟网页或屏幕。通常,我们需要遍历自己所负责产品内已有的业务场景,提取并整理业务场景中所用到的组件,保留高频通用的部分。

用于最终产品设计

设计师可以专门针对项目的需求,创建自己的UI组件,并在产品开发过程中使用该组件。使用Pixso,设计师在不同文件中可以通过选择团队资源库,在资源库中打开组件列表,开启需要的组件开关,将其更新至组件面板中,高效使用。

PixsoUI组件的使用方法也非常简单:设计师可以将自己经常使用的样式创建为组件外,将组件上传至团队资源库与其他成员共享使用,当主组件修改,其他实例组件均可以选择同步更新,无需手动,这既提高了设计效率,也防止在手动修改过程中出现遗漏。

当使用的组件数量增多,Pixso还设置有组件搜索功能,设计师可自定义命名每一个组件,一键搜索,方便迅速查找需求,快捷使用。

如何使用UI工具包

图为Pixso资源社区中的 后台管理系统设计规范

组件库最大的价值在于提升整个团队的产研效率,使设计质量得以保障的同时,提升产品整体的用户体验。但是!组件库是一个需要不断变化和更新的文件。随着产品的发展,设计师需要对组件库进行不断地编辑元素,删除不使用的元素并添加新元素,但在这过程中,需要注意的是尽量减少颜色和样式,组织标准,并维护UI KIT

如何使用UI工具包

工欲善其事,必先利其器,充分了解UI组件所具备的功能和设计用法,能让您的设计效率大大提升,看完这篇文章,如果您想尝试在设计中使用UI组件,那么不妨打开Pixso工作台试试吧!Pixso集成众多大厂优秀的设计体系(华为、腾讯、阿里、字节、京东、饿了么、滴滴等)1000+最前沿的设计组件、30000+精美图标,支持团队组件库,帮助团队形成设计资产沉淀。