Найти в Дзене
Яньков.дизайн

Новая библиотека Material design — как не надо делать дизайн-системы

Недавно Google сделал очередную рокировочку в библиотеке Material design для Sketch. Был плагин Material, создающий библиотеки на основе ваших брендовых цветов и пары стилистических опций. А теперь он превратился в тыкву модуль Gallery с никому не нужной возможностью загружать свои темы в облако. А что же теперь делать? У Гугла есть ответ! Они добавили на страницу Resources библиотеку для Sketch. Теперь с модной тёмной темой! Ура что ли?

Оказывается, не совсем. Во-первых, Smart layout все еще не добавили. Ну что ж, основной конкурент (Apple) тоже все еще спит, так что и ладно. Я бы удивился если б все новые фичи поддерживались. Хотя этой уже полгода исполнилось.

Но при ближайшем рассмотрении вылезают такие косяки, что просто диву даешься как Google это проморгала!

Неправильные расстояния

  • Я постоянно твержу это своим коллегам: следите за каждым пикселем, иначе при разработке так и перенесут макет непонятно как. Очевидно же, что если на макете случайные расстояния между элементами, то разработчику можно особо не париться над соответствием. Если уж дизайнер не запаривался, то прогеру оно зачем? А тут спецы от гугл такое выдают.
Слева 15, справа 13. А должно быть везде 16px
Слева 15, справа 13. А должно быть везде 16px

Опции Resizing расставлены неверно

  • А это значит, что при изменении размеров компонента (например, если засунуть компонент внутрь карточки), элементы внутри него сдвинутся на неясное расстояние. А вы рискуете это даже не заметить, ведь по умолчанию все расставлено верно. А вот прогеры заметят, а дальше смотри пункт 1.
При изменении размера этого элемента весь текст сдвинется влево. А должен оставаться на месте
При изменении размера этого элемента весь текст сдвинется влево. А должен оставаться на месте

Нет стилей текста с выравниванием по центру и правому краю

  • Правого выравнивания и раньше не было, но оно нечасто нужно. А вот центральное иногда необходимо в самих компонентах от Google. И что в этом случае они делают? Да просто меняют выравнивание поверх стандартного стиля текста. А это чревато тем, что в случае чего (поменяли немного стандартный стиль), все элементы с измененным стилем откатятся обратно к стандартному. И в табах, например, текст съедет влево. И даже если вы это заметите, отловить все изменения будет трудно.
При этом в каких-то компонентах стиля у текста нет, а в каких-то вот так
При этом в каких-то компонентах стиля у текста нет, а в каких-то вот так

Нет встроенных ссылок для прототипирования

  • Опять же, Эппл смогли (правда, тоже криво и не с первого раза), а Гугл до сих пор тупит. Без встроенных ссылок трудно создавать прототип с компонентами, в которых есть несколько встроенных действий. Например, с панелью табов, или верхней панелью. Приходится поверх рисовать области ссылок, что немного неудобно

Общая небрежность исполнения

  • В похожих компонентах бывает по разному названы слои, или отличается их порядок. Компоненты вроде собраны в подгруппы на холсте, но расставлены там в беспорядке. Даже обложки для библиотеки нет. Конечно, всем плевать на это. Но это говорит об общем небрежном отношении дизайнера к работе. Или к отсутствию времени.
Тут вроде должно быть по-центру, но настроено так, что при изменении размера все съедет вправо
Тут вроде должно быть по-центру, но настроено так, что при изменении размера все съедет вправо

В общем, такое чувство, что библиотеку ваяли впопыхах и сдали уже как было. А потом забили, и так сойдет. Я понимаю когда так делает какой-нибудь фрилансер Вася, которому заказчик требует «сдать проект вчера». Но когда так делает Google для самой распространенной дизайн-системы в мире, это сильно!

При изменении текста в кнопке он уедет вправо за границы компонента
При изменении текста в кнопке он уедет вправо за границы компонента

С другой стороны, есть и хорошие изменения!

Использование стилей вместо вложенных символов

  • Я уверен, разработчики плагина Material много икали. Потому что их материли дизайнеры по всему миру. Использовать вложенные компоненты вместо специально придуманных для этого стилей очень муторно. Ну вот теперь все норм. Есть и текстовые, и цветовые стили. УРА!

Смайлики в названиях компонентов.

  • Это так очевидно и просто, и в то же время невероятно удобно! Вместо рядов одинакового текста в параметрах Overrides компонента видеть иконки, помогающие понять где какая настройка — это дико ускоряет работу.
Со смайликами в настройках символа сразу видно где какой таб ты редактируешь
Со смайликами в настройках символа сразу видно где какой таб ты редактируешь

Тёмная тема

  • Куда ж без этого фетиша современных дизайнеров. Темная тема теперь с нами и в Material design, аллилуйя!

Так что Google все же движется в правильном направлении. Но по пути их сильно колбасит, а контроля качества, похоже, вовсе нет.

P.S.: В общем, я потратил пару дней и поправил те косяки, что смог найти. Вот исправленная библиотека. Правда, я там поменял стандартные цвета для своих нужд. Но вам в любом случае для своих проектов придется это делать. Скачать или посмотреть можно здесь.

в

Эта же статья у меня в блоге: ссылка