63 lines
4.8 KiB
Markdown
63 lines
4.8 KiB
Markdown
---
|
||
title: Pattern Libraries
|
||
localeTitle: Библиотеки шаблонов
|
||
---
|
||
## Библиотеки шаблонов
|
||
|
||
Библиотека шаблонов представляет собой набор элементов дизайна многоразового пользовательского интерфейса. Поскольку эти элементы ui многократно используются многократно на веб-сайте, веб-приложении или программном приложении, они навязывают структуру посредством согласованности. Это упрощает использование сайта или приложения.
|
||
|
||
Несколько общих элементов ui, найденных в библиотеке шаблонов:
|
||
|
||
* меню
|
||
* Кнопки
|
||
* Макеты страниц
|
||
* Пользовательские анимации
|
||
* формы
|
||
|
||
### Преимущества шаблонных библиотек
|
||
|
||
Пол Боаг из своего блога [Boagworld.com](https://boagworld.com/design/pattern-library/) объясняет основные причины создания библиотеки шаблонов:
|
||
|
||
1. «Библиотека шаблонов обеспечивает согласованный пользовательский интерфейс».
|
||
2. «Библиотека шаблонов облегчает повторное использование».
|
||
3. «Библиотека шаблонов упрощает обслуживание».
|
||
|
||
### Библиотеки шаблонов против систем проектирования и стилей
|
||
|
||
Легко путать библиотеки шаблонов с системами проектирования и руководствами по стилям. В этой [статье Зак Резерфорд для UXPin](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/) разъясняется разница между тремя:
|
||
|
||
> • **Система проектирования** - полный набор стандартов проектирования, документации и принципов вместе с инструментарием (шаблоны пользовательского интерфейса и компоненты кода) для достижения этих стандартов.
|
||
>
|
||
> • **Библиотека шаблонов** - подкласс в системе проектирования, это набор шаблонов проектирования для использования в компании.
|
||
>
|
||
> • **Руководство по стилю.** Еще один подкласс в системе проектирования, эта статическая документация описывает саму систему проектирования: как продукты должны выглядеть и выглядеть, использовать случаи для шаблонов пользовательского интерфейса, правильные типографские шкалы и т. Д.
|
||
|
||
#### Дополнительная информация:
|
||
|
||
##### Примеры библиотеки образцов
|
||
|
||
[Mailchimp](https://ux.mailchimp.com/patterns)
|
||
|
||
[IBM Design Language](https://www.ibm.com/design/language/resources)
|
||
|
||
[Microsoft](https://developer.microsoft.com/en-us/windows/desktop/design)
|
||
|
||
[Материальный дизайн Google](https://material.io/guidelines/)
|
||
|
||
[Шаблоны пользовательского интерфейса](http://ui-patterns.com/patterns)
|
||
|
||
[Мобильные шаблоны](http://www.mobile-patterns.com/)
|
||
|
||
[BBC GEL](http://www.bbc.co.uk/gel/guidelines/category/design-patterns)
|
||
|
||
##### статьи
|
||
|
||
[«Библиотеки шаблонов» Наташи Хоккей для 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/)
|
||
|
||
[«Создание библиотеки шаблонов» Ребекки Соренсен для сумо-логики](https://medium.com/sumo-logic-ux/creating-a-pattern-library-18cce0f901b4)
|
||
|
||
[«Начало работы с библиотеками шаблонов» Анны Дебенхам для A List Apart](http://alistapart.com/blog/post/getting-started-with-pattern-libraries)
|
||
|
||
[«Взятие библиотеки шаблонов на следующий уровень» Виталия Фридмана для журнала Smashing](https://www.smashingmagazine.com/taking-pattern-libraries-next-level/) |