С чего все начиналось: отдельный артборд для каждого типа веток Yammer. Их было много.

Модульный дизайн. Сокращение исходников для передачи с 30 макетов до одного - 1

Недавно я начал работать над обновлением дизайна Android-приложения Yammer. Начал с подгонки всех разговоров под 4-пиксельную сетку для улучшения читабельности. Так как даже один неровный пиксель мог нарушить всю сеточную структуру, мы начали с кропотливого переноса всех скриншотов в самый верх исходного макета для сравнения. После большого количества сессий дизайна и кодинга вместе с Виктором Альказаром и Оззи Тебе, двух невероятно терпеливых Android-инженеров Yammer, каждая часть веток Yammer стала выглядеть идеально.

Yammer

Тем не менее, при сборке кусков в ветки, сетка все-таки слетела. На стыке каждый идеальный кусок стал далек от идеала.

Yammer - 1

Вскоре проблема была найдена: некоторые комбинации нуждались в дополнительных интервалах для подгонки под сетку. Так как ветки Yammer могут быть очень разнообразными — в некоторых приатачены документы и изображения, в некоторых есть множество типов метаданных, нам понадобится задать сотни специальных размеров отступов. И даже если можно было бы каталогизировать все эти частные случаи, работа приложения получилась бы существенно замедленной.

Я обратился с этой проблемой к нашему ведущему дизайнеру Мануэлю Муноз-Солере. У него огромный опыт в дизайне модульных UI — это популярный и хорошо документированный подход для CSS-фреймворков, но из-за нескольких лет беглых переделок продукта, неидеально структурированного кода и дизайна, мы так и не внедрили полноценно модульный подход в Yammer.

После объединения всех наших фрагментов в один гигантский файл и ряда переделок, мы выработали более простой, более модульный подход в дизайне веток, и именно он решил нашу проблему с интервалами.

Вот что у нас получилось.

  1. Мы сгруппировали каждый кусок ветки Yammer так же, как наши разработчики группируют их в коде. Каждому такому фрагменту мы назначили определенный цвет для лучшего визуального восприятия. На этом этапе мы также стали ссылаться на фрагменты как на отдельные модули.
    Мы перестали задавать границы между модулями.
  2. Вместо этого все интервалы в приложении задавались выравниванием модулей — в частности, выравнивание по верху. Нижнее выравнивание также отлично работало бы; главное, что не оба вместе. Нужно выбрать что-то одно, и это использовать. Теперь все стало намного проще, так как не нужно задавать верхнюю и нижнюю границы для каждого случая отдельно.
  3. Мы сложили все отдельные модули в один супер-длинный артборд. Смотрелось очень странно, так как это ветка, которой на самом деле не существует в Yammer. Но это ничего. Она нужна лишь для того, чтобы проверить выравнивание по сетке, и для проверки соответствия каждого элемента структуре.
  4. Когда все было подогнано по вертикали, все еще оставались три отдельные комбинации, выходящие за выбранный стандарт. Три — это уже гораздо проще, чем сотни. Наши инженеры просто прописали отдельные операторы «if…» для каждого частного случая.

Модульный дизайн. Сокращение исходников для передачи с 30 макетов до одного - 3

Grid Yammer

В конце, вместо 30 разных артбордов под разные типы разговоров Yammer, у нас получился один большой артборд. Мы можем менять модули местами, пересоединять их для проверок, и все остается ровно по сетке. Это идеально — всего один артборд, и он идеально соответствует коду. Не стоит и говорить, как довольны были наши Android-инженеры.

Очень легко перетаскивать модули в настоящий макет и знать, что все будет идеально подогнано под сетку:

Yammer модули

Давно уже меня не посещало прозрение в таких скучных рутинных работах. Возможно, вы уже создаете свои дизайны модульно, и в этом случае мое почтение. Мы — дизайн-команда с многолетним опытом совместной работы, и то, что впервые за все эти годы так структурировали свою работу, заставило меня поделиться этим открытием с вами.

Сейчас мы работаем над «символизацией» этих модулей с помощью новых символьных возможностей Sketch, чтобы создать расширенную библиотеку «pixel-perfecr», масштабируемых элементов UI. Мы поделимся результатами в одном из следующих постов.