Абстрагирование процесса разработки Microsoft Outlook

Как Abstract улучшила организацию файлов и сотрудничество в нашей команде разработчиков

Описание изображения: выбор компонентов пользовательского интерфейса из нашей системы проектирования.

Как дизайнер, я использовал различные инструменты для хранения файлов и общения в команде, но ни один из них не был очень надежным. Я могу вспомнить бесчисленное количество раз, когда я терял файл или часами искал чей-то самый современный дизайн - тратя драгоценное время и энергию.

Разработчики уже некоторое время имели системы контроля версий, такие как Git, но подобные механизмы для дизайнеров не были доступны - до сих пор.

Аннотация - это инструмент, созданный, чтобы помочь нашим дизайнерам сотрудничать в проектах. Он предоставляет нашей команде центральный центр для нашей проектной работы, помогая нам управлять и поддерживать компоненты и файлы дизайна. Дизайнеры импортируют файлы Sketch в Abstract один раз, а затем мы просто открываем файлы оттуда.

Несколько лет назад Майлз и Виктор начали использовать Abstract в команде Outlook, и с тех пор он был применен в командах разработчиков в Microsoft. В этом посте я расскажу о том, как мы используем Abstract, и поделюсь с вами нашей структурой файлов, процессом слияния, методами обслуживания файлов и некоторыми областями нашего процесса, которые, по нашему мнению, можно улучшить. Этот процесс работает для большой команды, но мы все еще выясняем его и хотели бы услышать, как мы можем улучшить это.

Разработка файловой структуры проекта

Наши проекты разделены по платформам - Android, iOS, Mac, Web и Universal (Почта и Календарь в Windows 10). Внутри этих проектов наши файлы разделены на различные разделы нашего приложения. Ниже приведен пример нашей файловой структуры iOS внутри Abstract, где мы разделяем наши файлы на такие разделы, как «iOS UI-Kit», «Mail» и «Calendar», чтобы файлы работали быстро.

Во-первых, Start Here - это файл для новых дизайнеров и внешних партнеров. Он содержит информацию о наших принципах проектирования, о том, как использовать Аннотация, об экспорте ресурсов, а также несколько советов и рекомендаций по использованию плагинов Sketch.

Начать здесь файл

Далее, UI-Kit - это библиотека Sketch, которая содержит все наши компоненты, типографику, значки и цвет. Все экраны в файлах дизайна используют связанные символы из этой библиотеки.

UI-Kit разделен на две страницы - одну для символов, а другую для всего стикерного листа компонента дизайна. Последний включает в себя подробную информацию о каждом элементе и интуитивно понятный макет, чтобы мы могли быстро найти то, что мы ищем.

Файл пользовательского интерфейса iOS содержит как наклейку с компонентами, так и сами символы

Остальные файлы представляют разные части приложения - вход, почта, календарь, поиск, настройки и многое другое. Разделение каждой категории помогает нам избежать медленных файлов и задержек во время работы. Это также является преимуществом при объединении дизайнов, потому что при создании новых функций нам часто нужно только касаться определенных частей приложения, что, в свою очередь, означает меньше конфликтов

Шагая через процесс проектирования

Первым шагом является создание ветви, которая берет все файлы Sketch в мастере и создает реплику. Думайте об этом как о дублировании папки. Чтобы идентифицировать ветвь, мы назначаем простой ярлык для части, над которой мы работаем, добавляя соответствующий заголовок после ярлыка. Для описания проекта мы обычно используем такие ярлыки, как «Feature», «Kit» или «Exploration». В Outlook мы пробуем новые идеи и изменяем все, что, по нашему мнению, можно улучшить - вот когда мы используем тег типа «Исследование». Эти ярлыки дают другим членам команды некоторый контекст и помогают им найти и понять, что мы работа над. Создание ветки является огромным преимуществом, потому что это означает, что несколько дизайнеров могут работать над одними и теми же файлами, а затем объединять их обратно в мастер.

Пример маркировки ветки

В новой ветке я создаю новый файл из Abstract. Я называю этот файл чем-то вроде «Working», что помогает другим узнать, где находятся последние итерации. Затем я могу скопировать артборды из других файлов в этот - это помогает визуализировать поток или изменить существующий экран.

Создать «рабочий» файл

Файл Sketch, открытый из Abstract, содержит небольшой плавающий диалог с опцией Preview & Commit. Это экономит работу на сервере и позволяет другим членам команды видеть любые изменения. Фиксация не влияет на мастер, она просто обновляет ветку. В моей команде нам нравится следовать общему правилу работы один раз в день. Перед тем как вносить изменения, я добавляю описательную заметку, в которой изложены сделанные мной изменения. У меня всегда есть доступ к каждому изменению, поэтому при необходимости я могу отменить изменение или просмотреть предыдущие версии файла.

Совершать ежедневно

Как только дизайн завершен, пора привести в порядок слои и объединить дизайн с мастер-файлами. Убедитесь, что имена слоев точны, и порядок соответствует тому, что вы видите на экране (сверху вниз). Это должно быть повторено для каждого экрана. Я могу либо создать еще одну новую ветку с надписью [Kit] и скопировать на новых экранах в соответствующий файл, либо заново создать эти экраны с нуля, используя новейшие компоненты библиотеки. Причина, по которой я запускаю новый файл, состоит в том, чтобы вводить только главные экраны для мастера. Я всегда могу вернуться к старой ветке в абстрактном архиве позже. Это занимает немного времени и отговаривает нас от слияния функций более регулярно. Мы хотели бы услышать от любого, у кого есть предложения по улучшению процесса слияния.

Ниже приведена демонстрация того, как мы можем создать ветку и использовать компоненты пользовательского интерфейса из библиотеки для разработки экранов в нашем приложении. Именно эта комбинация Abstract и нашей библиотеки компонентов позволяет нам работать быстро и эффективно, обеспечивая полную прозрачность и прозрачность для команды. Мы работаем из одних и тех же файлов, и наши новые файлы доступны всем.

Описание изображения: Создание экранов Outlook с использованием наших компонентов пользовательского интерфейса.

Прежде чем выбрать кнопку слияния, я могу запросить отзыв у любого члена команды. Мы ищем связанные слои символов, правильное именование, повторяющиеся символы и изменения в библиотеке. Рецензенты обычно оставляют отзывы в разделе комментариев Аннотация или на конкретных артбордах, сохраняя все в одном месте. Как только обзоры завершены, мы объединяем дизайн и архивируем старую ветку.

Лучшие практики для обслуживания

Моя команда разделяет ответственность за обновление комплекта своими функциями, и я стараюсь поддерживать работоспособность файлов Sketch и постоянно улучшать и обновлять комплект, особенно для учета обновлений операционной системы или капитального ремонта проекта.

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

Проблема Github для отслеживания проблем с UI-комплектом

Наш процесс и UI-kit использовались командами разработчиков из Microsoft, поскольку мы проектируем с более открытым и совместным подходом. По мере развития Fluent Design на мобильных устройствах мы будем видеть общие элементы в продуктах Microsoft.

Мы все еще учимся и постоянно ищем способы улучшить наш процесс. Мы хотели бы услышать, как другие команды используют Abstract в своих процессах проектирования и предложения о том, как мы могли бы улучшить нашу.

Не стесняйтесь делиться своими идеями в комментариях .

Чтобы оставаться в курсе событий Microsoft Design, подпишитесь на нас в Dribbble, Twitter и Facebook или присоединитесь к нашей программе Windows Insider. И если вы заинтересованы в присоединении к нашей команде, зайдите на aka.ms/DesignCareers.

Написано с помощью и с помощью Майлза Фицджеральда и команды Outlook.