Версия SketchApp готовый перевод примечания дизайнер корпоративной социальной сети Yammer Кэмерон Локк о том, как за счет реализации модульного подхода команде удалось сократить количество макетов для одного проекта с 30 до одного.
С чего все началось: отдельный артборд для каждого типа потока Yammer. Их было много.
Поскольку даже один неровный пиксель мог нарушить всю структуру сетки, мы начали с кропотливого переноса всех скриншотов в самый верх исходного макета для сравнения.
Однако при сборке кусочков в ветки сетка все равно отваливалась.
На стыке каждая ранее идеальная деталь стала далека от идеала.
Поскольку потоки Yammer могут быть очень разнообразными — некоторые с вложениями документов и изображений, некоторые с несколькими типами метаданных, — нам потребуется определить сотни пользовательских размеров отступов.
И даже если бы можно было каталогизировать все эти частные случаи, приложение значительно бы замедлилось.
Я обратился с этой проблемой к нашему ведущему дизайнеру Мануэлю Муньосу-Солере.
У него большой опыт в модульном проектировании пользовательского интерфейса — популярном и хорошо документированном подходе к CSS-фреймворкам, но из-за нескольких лет быстрых итераций продукта и несовершенного структурирования кода и дизайна мы так и не реализовали модульный подход в Yammer полностью.
Вот что мы получили: Мы сгруппировали каждую часть потока Yammer так же, как наши разработчики группируют их в коде.
Каждому такому фрагменту мы присвоили определенный цвет для лучшего визуального восприятия.
На этом этапе мы также начали называть фрагменты отдельными модулями.
Мы перестали устанавливать границы между ними.
Вместо этого все пространство в приложении определялось выравниванием модулей, в частности выравниванием по верхнему краю.
Выравнивание по низу тоже может отлично подойти — главное, чтобы вы не использовали оба вместе, вам нужно выбрать одно или другое.
Теперь все стало намного проще, так как больше не нужно задавать верхнюю и нижнюю границы для каждого случая отдельно.
Мы поместили все отдельные модули в один очень длинный артборд. Это выглядело очень странно, поскольку в Yammer этой темы на самом деле не существовало.
Нужно лишь проверить выравнивание сетки и убедиться, что каждый элемент соответствует структуре.
Когда все было настроено по вертикали, все равно оставалось три отдельные комбинации, выходящие за рамки выбранного стандарта.
Три – это уже гораздо проще, чем сотни.
Здесь наши инженеры просто написали отдельные операторы «если…» для каждого конкретного случая.
В результате вместо 30 артбордов для разных типов бесед в Yammer мы получили один большой.
Мы можем менять местами модули, соединять их по-разному для проверки, и все будет точно по сетке.
Получилось здорово — всего один артборд, идеально соответствующий коду.
Излишне говорить, что наши Android-инженеры остались довольны.
Очень легко перетащить модули в реальный макет и быть уверенным, что все идеально впишется в сетку.
Давно у меня не было прозрения в такой скучной рутинной работе.
Возможно, вы уже давно создаете свои конструкции по модульному принципу — в этом случае мое почтение.
Мы — команда дизайнеров с многолетним опытом совместной работы, и тот факт, что мы смогли так структурировать нашу работу впервые за многие годы, побудил меня поделиться этим открытием.
-
Вариационное Исчисление
19 Oct, 24 -
Президентские Дебаты На Youtube И Cnn
19 Oct, 24 -
Бренд Motorola Возвращается В Россию
19 Oct, 24 -
Как Узнать Количество Записей В Таблице?
19 Oct, 24 -
Строки В Памяти Кода Avr
19 Oct, 24 -
Рекламный Ролик «Новый Ipod Nano».
19 Oct, 24 -
Лампочка
19 Oct, 24
