UXPUB

UXPUB - спільнота з 4,056 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Руководство по стилям для дизайнеров. “Дизайн, обмен и контроль”
Редакція
Редакція

Опубліковано • Оновлено

Руководство по стилям для дизайнеров. “Дизайн, обмен и контроль”

Несколько дней назад я прочел статью об управлении руководствами по стилю с помощью Github. И хотя я думаю, что Github не плох для управления живыми руководствами по стилям, это не лучшее решение для обмена артефактами руководства по стилям в дизайн-командах. Живые руководства по стилям: Живые руководства по стилю пишутся в HTML и готовы для использования в продакшне. Артефакты руководства по стилям: Артефакты руководства по стилям используются командами дизайнеров для общего согласования элементов дизайна в руководстве по стилям, и обычно представлены в виде файлов Sketch. В этой статье я опишу рабочий процесс, который я называю Дизайн, обмен и контроль.

Дизайн

В этом шаге дизайнер создает свои файлы с артефактами для обмена внутри своей команды. В этом примере я создал файл Sketch под названием Design.sketch и включил в него артборд под названием Buttons, который содержит несколько стилей кнопок. Наш базовый файл руководства по стилям в Sketch Наш базовый файл руководства по стилям Важно обмениваться файлом с другими членами команды, получать их фидбек о работе и вносить нужные изменения.

Обмен

Используя Dropbox (или Google Drive), мы можем обмениваться и контролировать версии файлов дизайна. В этом примере я создал папку Styleguide через приложение Github и сохранил там свой файл Sketch. Вы можете скачать приложение Dropbox и сохранять копии файлов на компьютере. Dropbox Так вы сможете обмениваться файлом с командой, но как организовать коллаборацию и контроль изменений? Этому я научу вас ниже.

Контроль

Настало время получить фидбек от команды. Для этого в Invision есть отличный набор инструментов, начиная с прототипирования и заканчивая проект-менеджментом. Сначала создайте проект Desktop с тем же названием, что и папка в Dropbox. Создание нового проекта в Invision Создание нового проекта в Invision Затем подключите Invision к аккаунту Dropbox. Кликните розовую кнопочку с плюсом в “Sync With Dropbox”. Sync With Dropbox В диалоговом окне Dropbox выберите файл Sketch с руководством по стилям. В диалоговом окне Dropbox выберите файл Sketch с руководством по стилям Как только Invision завершит синхронизацию, вы увидите все артборды как Screens (в этом примере “Buttons”). Экран кнопок в Invision Экран кнопок в Invision В этом примере кликните на экран “Buttons”, чтобы войти в режим редактирования и используйте режим Comment для комментирования стилей кнопок. режим Comment для комментирования стилей кнопок Чтобы произвести изменения, указанные в комментарии, снова откройте Sketch: Чтобы произвести изменения, указанные в комментарии, снова откройте Sketch На этом этапе изменения должны автоматически подтянуться в Invision.  автоматически подтянуться в Invision Гораздо лучше Перейдите в Invision и решите проблему с кнопками. Invision Я также мог бы отметить этот скрин как “approved”. Так как я решил все проблемы с ним. approved И, наконец, давайте проверим историю всех изменений в дизайне: История всех изминений Ухты, я даже могу следить за всем, что творится! Как видите, этот подход покрывает большую часть задач, с которыми сталкиваются дизайнеры при управлении своими проектами. Надеюсь, вам пригодится подобное решение.

Выводы

  1. Создавайте артефакты дизайна в Sketch
  2. Обменивайтесь с командой и контролируйте версии через Dropbox
  3. Контролируйте, просматривайте, комментируйте и прототипируйте в Invision

Перевод статьи Mariz Melo

Обговорення (0)