Кейс: Как дизайн-команда Yammer сократила количество макетов для проекта с 30 до одного файла06.03.2017 12:52

Издание Sketchapp подготовило перевод заметки дизайнера корпоративной социальной сети Yammer Кэмерон Лок о том, как при помощи внедрения модульного подхода команде удалось сократить количество макетов одного проекта с 30 до одного.

В избранное

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

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

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

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

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

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

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

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

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

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

©  vc.ru