Крупнейшие дизайн-системы мира

Дизайн-система 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%.