---
title: Pattern Libraries
localeTitle: 模式库
---
## 模式库

模式库是可重用用户界面设计元素的集合。由于这些ui元素在网站，Web应用程序或软件应用程序中重复使用多次，因此它们通过一致性强制实施结构。这使网站或应用程序更易于使用。

在模式库中找到的一些常见的ui元素是：

*   菜单
*   纽扣
*   页面布局
*   UI动画
*   形式

### 模式库的好处

Paul Boag在他的博客[Boagworld.com上](https://boagworld.com/design/pattern-library/)解释了创建模式库的主要原因：

1.  “模式库确保了一致的用户界面。”
2.  “模式库有助于重用。”
3.  “模式库使维护更容易。”

### 模式库与设计系统与风格指南

将模式库与设计系统和样式指南混淆是很容易的。 [Zack Rutherford为UXPin撰写的](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/)这篇[文章](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/)阐明了三者之间的区别：

> • **设计系统** - 完整的设计标准，文档和原则以及工具包（UI模式和代码组件），以实现这些标准。
> 
> • **模式库** - 设计系统中的子类，这是在公司中使用的一组设计模式。
> 
> • **样式指南** - 设计系统中的另一个子类，这个静态文档描述了设计系统本身：产品的外观和感觉，UI模式的用例，正确的印刷比例等。

#### 更多信息：

##### 模式库示例

[Mailchimp](https://ux.mailchimp.com/patterns)

[IBM设计语言](https://www.ibm.com/design/language/resources)

[微软](https://developer.microsoft.com/en-us/windows/desktop/design)

[谷歌的材料设计](https://material.io/guidelines/)

[UI模式](http://ui-patterns.com/patterns)

[移动模式](http://www.mobile-patterns.com/)

[BBC GEL](http://www.bbc.co.uk/gel/guidelines/category/design-patterns)

##### 用品

[Natasha Hockey为Prototypr.io设计的“模式库”](https://blog.prototypr.io/pattern-libraries-5d627c5c65b4)

[“模式库：他们是什么，为什么你需要一个”由Meghan Lazier为Designlab提供](http://trydesignlab.com/blog/pattern-libraries-what-they-are-and-why-you-need-o/)

[Rebecca Sorensen为Sumo Logic创建“模式库”](https://medium.com/sumo-logic-ux/creating-a-pattern-library-18cce0f901b4)

[Anna Debenham的“模式库入门”A List Apart](http://alistapart.com/blog/post/getting-started-with-pattern-libraries)

[维塔利弗里德曼为Smashing杂志“将模式库提升到新的水平”](https://www.smashingmagazine.com/taking-pattern-libraries-next-level/)