Крупнейшие дизайн-системы мира
В современном мире дизайн-системы играют ключевую роль в формировании бренда, обеспечивая единый стиль и ускоряя процесс разработки. В этом контексте мы рассмотрим, какие стратегии используют компании для создания собственных дизайн-систем.
Дизайн-система Apple
За долгие годы ее существования в ней накопилось множество кейсов и правил, предоставляя руководства для дизайнеров, редакторов, разработчиков и менеджеров. Важно подчеркнуть, что Apple Human Interface Guidelines (HIG) создается не только для внутреннего использования в компании, все разработчики приложений на платформе Apple также обязаны следовать этим указаниям, в противном случае их приложения не пройдут модерацию для размещения в App Store.
HIG подробно описывает рекомендации по дизайну для различных типов устройств: не только для macOS, iOS и iPadOS, но также для часов (watchOS), очков виртуальной реальности (visionOS), и телевизоров (tvOS). Файлы Apple HIG в Figma регулярно обновляются, представляя собой одни из самых тщательно проработанных среди конкурентов. Вы можете ознакомиться с ними по ссылке:
Дизайн-система Google
Одной из ведущих и широко известных дизайн-систем в мире является Google Material Design. Запущенная менее десяти лет назад, в 2014 году, она тут же завоевала лидерство в области дизайна интерфейсов. В 2021 году была представлена третья версия этой дизайн-системы под названием Material You, или просто Material Design 3. Это обновление в значительной степени связано с выпуском на рынок новых моделей смартфонов от Google Pixel.
Ключевые аспекты Material Design 3 включают в себя:
- Основы взаимодействия: вопросы доступности, дизайна контента, кастомизации, использование дизайн-токенов, обработка состояний, жесты и лейаут.
- Стили: вариации цветов, создание глубины, работа с иконками, анимация, формы, и типографика.
- Компоненты: от кнопок и диалоговых окон до различных вариантов навигации.
Одной из основных черт, выделяющих Material Design среди других дизайн-систем, является детальное обоснование использования конкретных элементов. Например, система предоставляет рекомендации по выбору стилей текста и указывает на правила использования компонентов в карточках.
Дизайн-система Microsoft
Эта система позволяет обмениваться идеями, а также интегрировать продукты без проблем, независимо от платформы — будь то веб, различные смартфоны или приложения Windows.
Основная задача дизайн-системы заключается в поддержании простоты пользовательского опыта и избегании излишних сложностей. Если можно воспользоваться готовым компонентом, протестированным в различных условиях, то так и нужно поступать.
В отличие от других систем, таких как HIG и Material, Fluent избегает подробных описаний правил, всех возможных случаев использования и лишней информации. На странице компонента предоставлены основные характеристики, правила построения и взаимодействия, а также базовые ограничения доступности. Кроме того, представлен код компонента и его спецификации, а также ссылки на CodeSandbox и Fluent UI.
На странице Microsoft в Figma представлены обновленные UI-киты для веба и iOS, иконки, а также эмодзи, специально адаптированные под Fluent 2. В новых файлах использованы переменные вместо цветовых стилей, и добавлена отдельная тёмная тема. Кроме того, проведён рефакторинг, что привело к уменьшению общего размера файлов на 50%.
Больше полезных статей и свежих новостей по дизайну на сайте