使用 PatternFly 超越 Bootstrap

图片来源：

Opensource.com

设计和用户体验 (UX) 往往是开源项目的附加考虑。但这种情况正在改变。PatternFly 是一个帮助弥合开发人员和设计师之间差距的项目。

PatternFly 是一个开源项目，旨在促进设计通用性和改进的用户体验。它是一个开源开发人员和设计师可以协作、创建和共享用户界面 (UI) 组件和小部件的平台。PatternFly 基于 Bootstrap，Bootstrap 是一个移动优先的前端框架，用于创建网站和应用程序。

我有机会采访了 PatternFly 团队的一些成员，包括 Red Hat 的交互设计师 Leslie Hinson，以及 Red Hat UXD 团队的前端开发人员 Robb Hamilton。我想深入了解 PatternFly 的幕后故事，了解它是如何诞生的，以及为什么开发人员应该了解这个项目。

Interview banner

PatternFly 解决了什么问题？为什么有人不直接使用 Bootstrap？

我们希望人们能够看到我们的一个应用程序并说：“是的，这看起来像 Red Hat 的产品。” Red Hat 面临的一个挑战是，我们的产品从各种上游开源项目演变而来，这导致了各种 UI，当您将它们视为一个整体时，它们缺乏凝聚力。跨产品组合的一致性可以带来更好的可用性，因为用户熟悉这些设计和交互。因此，我们的团队创建了 PatternFly，旨在提供可应用于多个产品、应用程序和项目的企业设计解决方案，以此提供用户可识别的标准 UI。

我们选择 Bootstrap 是因为它开源，并且解决了我们刚才提到的许多问题。它是 GitHub 上最受欢迎的项目之一，并且它使用了移动优先的设计方法。我们合作的许多开发团队已经在使用 Bootstrap，这使得 PatternFly 更容易在内部采用。

正在寻找模式库和参考实现来帮助构建应用程序的设计师和开发人员应该使用 PatternFly 而不是 Bootstrap，因为我们扩展了 Bootstrap 提供的功能。PatternFly 提供了一种现代而简洁的自定义外观和感觉，包括额外的组件，以及关于如何使用所有这些组件的 UX 专业知识。

为什么开源开发人员会使用 PatternFly？

PatternFly 旨在成为设计师和开发人员可以协作的平台，通过定义视觉和行为模式来帮助解决常见的设计问题。这些模式提供了可以自定义以满足应用程序需求的基线设计。PatternFly 通过提供设计示例和布局以及实现这些解决方案的代码，帮助您节省时间和精力，而无需考虑如何布局或如何构建。

PatternFly 如何与其他开源项目一起使用？

PatternFly 是 Bootstrap 加上自定义样式和额外的组件，以将 PatternFly 的功能扩展到 Bootstrap 提供的功能之外。额外的组件包括 Datatables、Font Awesome、自定义图标、Bootstrap Select、Bootstrap Treeview、IE8 实用程序（html5shiv、respond）、图表等。

PatternFly 是如何构建的？

Bootstrap 和 PatternFly 都是使用 Less 构建的，Less 是一种级联样式表 (CSS) 预处理器。Less 扩展了 CSS 语言，添加了允许变量、mixin、函数和许多其他技术的功能，这些技术使您可以开发更可维护、可主题化和可扩展的 CSS。虽然可能，但不建议直接使用编译后的 PatternFly CSS，而是集成 PatternFly 的源 Less 文件并重新编译。这允许开发人员将任何必需的应用程序特定 CSS 直接添加到一个 CSS 文件中，这性能更高，并通过变量覆盖对 Bootstrap 或 PatternFly 进行任何必要的调整。还有一个 AngularJS 项目，它提供了一组特定于 PatternFly 参考实现的常见 AngularJS 指令，以及一个 Sass 驱动的 PatternFly 版本，可以随时直接放入您的 Sass 驱动的应用程序中。

参考实现位可以从 GitHub 存储库通过 Git 克隆获得，也可以从 GitHub 网站下载 zip 文件，作为 RPM，或者通过 Bower，Twitter 的前端包管理器。Bower 提供了一种通过命令行界面查找、安装、更新和管理前端依赖项的简单方法。

为什么开发人员会选择 PatternFly 而不是其他库？

使我们与其他库区分开来的主要因素之一是我们专注于 IT 企业应用程序的设计。我们认识到用户能够从一个产品无缝迁移到另一个产品而无需重新学习 UI 的重要性。行为一致性可以带来更好的可用性，因为用户熟悉这些交互。视觉一致性建立了一种用户可以识别的外观和感觉。它允许您统一不同的项目，使它们看起来很棒，并使它们看起来像是属于同一个产品组合。

另一个不同之处在于我们的方法。对我们来说，以开源方式构建这个项目非常重要。我们拥有一支经验丰富的交互设计师团队，他们致力于 PatternFly 的工作，但我们重视协作和精英管理，并邀请任何人通过贡献设计或代码来参与。