С чего все начиналось: отдельный артборд для каждого типа веток Yammer. Их было много. 
Недавно я начал работать над обновлением дизайна Android-приложения Yammer. Начал с подгонки всех разговоров под 4-пиксельную сетку для улучшения читабельности. Так как даже один неровный пиксель мог нарушить всю сеточную структуру, мы начали с кропотливого переноса всех скриншотов в самый верх исходного макета для сравнения. После большого количества сессий дизайна и кодинга вместе с Виктором Альказаром и Оззи Тебе, двух невероятно терпеливых Android-инженеров Yammer, каждая часть веток Yammer стала выглядеть идеально. 
Тем не менее, при сборке кусков в ветки, сетка все-таки слетела. На стыке каждый идеальный кусок стал далек от идеала. 
Вскоре проблема была найдена: некоторые комбинации нуждались в дополнительных интервалах для подгонки под сетку. Так как ветки Yammer могут быть очень разнообразными - в некоторых приатачены документы и изображения, в некоторых есть множество типов метаданных, нам понадобится задать сотни специальных размеров отступов. И даже если можно было бы каталогизировать все эти частные случаи, работа приложения получилась бы существенно замедленной. Я обратился с этой проблемой к нашему ведущему дизайнеру Мануэлю Муноз-Солере. У него огромный опыт в дизайне модульных UI - это популярный и хорошо документированный подход для CSS-фреймворков, но из-за нескольких лет беглых переделок продукта, неидеально структурированного кода и дизайна, мы так и не внедрили полноценно модульный подход в Yammer. После объединения всех наших фрагментов в один гигантский файл и ряда переделок, мы выработали более простой, более модульный подход в дизайне веток, и именно он решил нашу проблему с интервалами.
Вот что у нас получилось.
- Мы сгруппировали каждый кусок ветки Yammer так же, как наши разработчики группируют их в коде. Каждому такому фрагменту мы назначили определенный цвет для лучшего визуального восприятия. На этом этапе мы также стали ссылаться на фрагменты как на отдельные модули. Мы перестали задавать границы между модулями.
- Вместо этого все интервалы в приложении задавались выравниванием модулей - в частности, выравнивание по верху. Нижнее выравнивание также отлично работало бы; главное, что не оба вместе. Нужно выбрать что-то одно, и это использовать. Теперь все стало намного проще, так как не нужно задавать верхнюю и нижнюю границы для каждого случая отдельно.
- Мы сложили все отдельные модули в один супер-длинный артборд. Смотрелось очень странно, так как это ветка, которой на самом деле не существует в Yammer. Но это ничего. Она нужна лишь для того, чтобы проверить выравнивание по сетке, и для проверки соответствия каждого элемента структуре.
- Когда все было подогнано по вертикали, все еще оставались три отдельные комбинации, выходящие за выбранный стандарт. Три - это уже гораздо проще, чем сотни. Наши инженеры просто прописали отдельные операторы “if…” для каждого частного случая.
В конце, вместо 30 разных артбордов под разные типы разговоров Yammer, у нас получился один большой артборд. Мы можем менять модули местами, пересоединять их для проверок, и все остается ровно по сетке. Это идеально - всего один артборд, и он идеально соответствует коду. Не стоит и говорить, как довольны были наши Android-инженеры.
Очень легко перетаскивать модули в настоящий макет и знать, что все будет идеально подогнано под сетку:
Давно уже меня не посещало прозрение в таких скучных рутинных работах. Возможно, вы уже создаете свои дизайны модульно, и в этом случае мое почтение. Мы - дизайн-команда с многолетним опытом совместной работы, и то, что впервые за все эти годы так структурировали свою работу, заставило меня поделиться этим открытием с вами. Сейчас мы работаем над “символизацией” этих модулей с помощью новых символьных возможностей Sketch, чтобы создать расширенную библиотеку “pixel-perfecr”, масштабируемых элементов UI. Мы поделимся результатами в одном из следующих постов.
Перевод статьи Cameron Lock
Топ коментарі (0)