63 lines
2.7 KiB
Markdown
63 lines
2.7 KiB
Markdown
---
|
||
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/) |