<aside> 💬 Всем привет. Сегодня мы хотим поделиться с вами о результатах нашей работы над редизайном erp системы
</aside>
<aside> 💬 Сначала немного о том, почему было принято решение делать редизайн, какие технологии (фреймворки) были выбраны и с какими трудностями мы столкнулись работая с ними.
</aside>
<aside> 💬 Покажем, как в результате работы мы собрали основную компонентную базу, переработали лейауты и навигацию, выработали паттерны интерфейсов и в конце осветим планы на будущее
</aside>
<aside> 💬 Итак, предпосылками редизайна стали 2 фактора - это неконсистентность текущего интерфейса и потребность в увеличении темпа развития продукта, релиза новых фичей
</aside>
Проблемы пользователя. Разное поведение внешне схожих элементов увеличивает когнитивную нагрузку на пользователя при работе с продуктом.
Проблемы бизнеса. Развитие и поддержка своей дизайн-системы на 2 платформы времязатратно. Реализации каждой задачи требуется больше времени на дизайн и на имплементацию в коде, что замедляет темп разработки.
<aside> 💬 Разное поведение внешне схожих элементов увеличивает когнитивную нагрузку на пользователя при работе с продуктом. Этот недостаток продемонстрирован на примере элемента, который в некоторых местах системы открывает дроп-даун список, где-то разворачивает список “инлайн”, а гдето является навигационной кнопкой - открывает новый интерфейс.
</aside>
<aside> 💬 Развитие и поддержка своей дизайн-системы на 2 платформы времязатратно. Реализации каждой задачи требуется больше времени на дизайн и на имплементацию в коде, что замедляет темп разработки.
</aside>
Перевести обе части системы (ERP и POS) на готовую единую и популярную дизайн-систему.
Добиться полного соответствия библиотек Angular, Jetpack Compose и Figma.
<aside> 💬 Исходя из этих проблем мы поставили цель - Перевести обе части системы (ERP и POS) на готовую единую и популярную дизайн-систему. А так же, добиться полного соответствия библиотек Angular, Jetpack Compose и Figma.
</aside>
Material Design
<aside> 💬 Выбoр компании пал на Material Design от Google из-за мультиплатформенности и огромного количества успешных кейсов на рынке.
</aside>
Контекст:
| ERP | POS | |
|---|---|---|
| Платформа | Web | Android |
| Технология (фреймворк) | Angular | Jetpack Compose |
| Библиотека компонентов | Material Design 2 (2018) | Material Design 3 (2021) |
| Tokens (переменные стилей) | Material Design 1 (2014) | Material Design 3 (2021) |
| Существующие библиотеки для Figma | Не существует библиотеки с токенами материал 1. Официальная библиотека материал 2 устаревшая относительно технологий фигмы и имеет скромный набор компонентов | Официальная библиотека (не очень грамотно реализованы переменные стилей) |
Что решили:
| ERP | POS | |
|---|---|---|
| Tokens (переменные стилей) | Добавление и использование кастомных переменных для по структуре Material Design 3 | Material Design 3 |
| Библиотека компонентов | Обновление существующих компонентов Material Design 2 → Material Design 3 | Material Design 3 |
| Библиотека Figma | Обновление библиотеки Material Design 2 → Material Design 3 | Доработка официальной библиотеки для удобного использования в работе |
<aside> 💬 В конце прошлого года Google презентовал новую версию своей дизайн системы - Material Design You или 3, но официальная имплементация доступна пока только для мобильных устройств.
</aside>
<aside> 💬 ERP - это web-приложение разработанное на Angular, для которого библиотека Material построена на токенах 2014 года, то есть первой версии
</aside>
<aside> 💬 Исходя из этих технических особенностей, мы проанализировали структуры токенов разных версий материала, стилизовали каждую из них по брендбуку Nomia
</aside>
<aside> 💬 Исходя из этих технических особенностей, мы проанализировали структуры токенов разных версий материала, стилизовали каждую из них по брендбуку Nomia
</aside>
<aside> 💬 Для ERP Нашли максимально полную по набору компонентов библиотеку Material 2 (Для POS используем официальную M3), но столкнулись с проблемой, что в этой библиотеке нет части состояний, так же необходимо было поправить autolayaout и проверить на соответствие гайду.
</aside>
<aside> 💬 Параллельно благодаря совместной работе с командой фронтендеров, нам удалось опытным путем выяснить, что мы имеем возможность завести дополнительные токены и кастомизировать размерность компонентов в библиотеке на ангуляре. Такой подход мы считаем оптимальным в наших условиях, потому что это позволит достичь максимального соответствия библиотек в дизайне, в вебе и на андройде.
</aside>
Сложная неконсистентная структура навигации.
В разных разделах для навигации используются разные элементы.
<aside> 💬 Провели анализ текущего решения - Сложная неконсистентная структура навигации. Например, раздел “Продажа” имел 3 уровня вложенности
</aside>