最近我们的Twilio交付团队一直在关注粘贴，这是Twilio为内部使用而设计的新系统。Signal会议提供了粘贴的一个很好的概述我们如何建立一个统一的、包容的设计系统来培养Twilio的用户体验．如果你有“信号通”，我鼓励你点播。
由Twilions Aayush Iyer(设计系统高级经理)和Jade Pennig(设计系统工程经理)领导的讨论给出了关于Paste是如何产生的以及它解决的问题的有趣背景。
需求描述
随着Twilio的发展，整个产品空间对一致UI/UX的需求也随之增长。推动Paste发展的主要因素包括:
- 的为什么Twilio控制台用于管理、配置和支持Twilio的所有服务。从历史上看，控制台的UI设计是不同产品组共同努力的结果。它越来越受到不一致、缺乏可重复和可重用的模式和组件以及维护困难等问题的困扰。Twilio在今年早些时候通过重新设计(部分使用了Paste)来解决这些问题，迈出了一大步。
- 收购(SendGrid、Segment等)带来了自己的设计语言、模式和方法。
- Flex UI在为呼叫中心座席和主管定制方面是一个巨大的飞跃。但是，在如何以及在何种程度上重用和样式化组件方面，它仍然存在局限性和不一致性。
Signal会话提供了这些不一致的例子——其中许多是我个人经历过的。这包括“复制到剪贴板”的不一致的操作和模式，向UI显示警报和消息的方式的变化，以及过滤数据的不同用户界面和方法。这些不一致增加了认知负荷。它们也不能提供一种直观和清晰的方法来学习使用基于既定模式的UI。
随着产品开发的高速发展，很难解决可访问性问题。正如在会议中提到的，“当你在快速发展时，确定可访问性的优先级是非常困难的。”
例子:
- 对比度问题
- 只有键盘用户无法访问的操作
- 有趣的是，我没有意识到:所有的大写标题通常被屏幕读者理解为首字母缩写
我们交付实践中的用例
作为Twilio的合作伙伴，Perficient的工程师经常花时间为Flex开发插件。我们也可以定制面向客户的ui，比如web聊天。最近，我们也看到越来越多的解决方案在Flex之外使用更广泛的Twilio服务套件。使用Twilio视频、可编程语音和可编程消息的应用程序可能需要构建UI元素，无论是面向客户的还是简单地允许管理。
我们的团队中确实有一些经验丰富的前端工程师。但更典型的是，这是开发人员的老问题，而不是前端设计师，试图组合UI。正如我曾对一些人说过的，“我不是前端UI设计师，但我昨晚确实住在假日快捷酒店。”你们5个能听懂这个笑话的人真了不起。
关键是，我很高兴能够帮助我们的工程师快速且一致地构建ui。
粘贴设计系统如何帮助
Paste提供了合理的默认值、出色的框模型、一致的样式化方法以及对React组件的样式化方式。通常在定制Twilio界面时，我们需要一个按钮或其他元素来适应其他Twilio产品使用的设计语言。它通常需要试错，而且似乎从来都不是完全正确的。
由于Flex UI版本1的原始设计。X，我们有点被旧版本的东西束缚住了。例如，如果你想使用MUI (Material UI)，你必须使用Flex 1版本。X正在使用，这是3.x版本。MUI现在的版本是5。许多有趣的工作、改进、新模式和现代组件已经继续进行。
Twilio在去年增加了对React新版本的支持。在此之前，Flex UI被固定在React的旧版本上。这在使用围绕样式库的新选项和方法时产生了一些限制。我们希望，基于我们在Signal期间看到的一些演示，Paste设计系统的各个方面也将开始进入Flex的未来版本。
下一个步骤
现在可以在您自己的前端开发中使用Paste。它采用主题优先的方法。最初的主题基于最近的Twilio控制台重新设计和SendGrid设计语言。Paste的一个关键特性是透明度。所有路线图是公共的，以协作的方式改变是优先考虑的。
即将到来:
- 颜色模式(例如一直流行的暗模式)
- 能够对组件进行广泛的定制，以满足您的独特需求
- WYSIWYG主题设计师
如果你对这些感兴趣，想了解更多，阅读其他文章来自Paste团队。我们认为这个库在明年会得到更多的关注，所以现在是开始熟悉它的好时机。
