IMG 9479 1160x620 - Лучшие практики наименования Artboard’ов в Sketch

Привет, сообщество дизайнеров! Я думаю, что все сталкивались с проблемой правильного именования артбордов в Sketch. В своей работе я тестировал разные техники и пытался найти лучший способ. И в итоге я его нашел и хотел бы поделиться с вами своей методикой. Если вам понравился этот пост, отправьте его своим коллегам!

Предыстория

Что касается меня, мне всегда нравится когда все организовано и структурировано правильно. Пару лет назад я пробовал использовать нумерацию для артбордов. В течение нескольких недель мои арборды уже выглядели как «2.8.12.1 Добавление истории со стороны администратора». Переименование и сохранение чисел в актуальном формате занимало кучу времени.

Так зачем нам нужно правильно именовать артборды? Мой ответ — правильный порядок и фильтрация экранов. Когда вы случайным образом называете свои артборды, трудно отсортировать экраны между разделами в InVision или найти конкретный в Abstract. Если у вас более 50 экранов, вы можете понять мою боль 🤯

Решение

Используйте аббревиатуры — это значительно облегчает работу с экранами и решает вышеупомянутые проблемы!

Лучшие практики наименования Artboard’ов в Sketch
Структура организации артбордов в Sketch. Вы можете скачать полную библиотеку и шаблон здесь 👉https://github.com/faridsabitov/Sketch-Interactions. При помощи фигурных скобор “{}” я показываю текст, который должен быть отредактирован

Как показано на превью выше, используйте первые буквы из «PageTitle» и «Subsection Title». Для артборда используйте первые буквы из секции и подсекции с названием артборда в конце. Лично мне нравится использовать спецификации Behavior Driven Development (BDD). Для примера возьмем заголовок «Создание рассылки» и подраздел как «Вайфреймы». В результате название артборда будет:

СР: В: Когда пользователь нажимает на “Создать рассылку”, потом мы открываем модальное окно “Создания рассылки”

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

Лучшие практики наименования Artboard’ов в Sketch
“Manage Emails” это название страницы

Page Title (Заголовок страницы)

Название проекта или «Инициативы», над которой вы работаете. Важные моменты:

  • Заголовок страницы, это проект или инициатива, над которой вы работаете
  • Заголовок страницы может быть использован только для одной страницы
Лучшие практики наименования Artboard’ов в Sketch
“Create Email” и остальные, это секции

Section Title (Заголовок раздела)

Обычно используется для «Эпика». Раньше мы делили секции для версиониравания, но после использования Abstract проблема с контролем версии решилась. Важные моменты:

  • Раздел, представляет собой группу сторей или функционала.
  • Если на странице используется более одного “эпика”, то новые можете показать справа
Лучшие практики наименования Artboard’ов в Sketch
“CE: Objectives” является подсекцией

Subsection Title (Заголовок подраздела)

Используется для отдельных фичей или сторей. Важные моменты:

  • Подразделы используются для более детальных задач. Если у вас более одного экрана по одной задаче, вы можете показать его справа
  • Первые буквы взяты как аббревиатура из “Заголовка раздела”

Лучшие практики наименования Artboard’ов в Sketch

Наименование артборда

Ура, вот и финишная прямая! Как показано ниже, все артборды названы в соответствии с разделами и подразделами, в которые они помещены. Если вы правильно назовете и упорядочите артборды, просто взглянув на название, вы можете понять где оно расположено в двухуровневой иерархии. Главное, что нужно запомнить:

  • Первые буквы взяты из «Раздела» и «Подраздела» как аббревиатура
  • Вы можете называть артборды в формате Behavior Driven Development (BDD)
Лучшие практики наименования Artboard’ов в Sketch
Если вы забыли название раздела, вы всегда можете увидеть название секции в InVision в полном формате или просто увидеть полнные заголовки в Sketch.

Почему аббревиатуры работают лучше?

Invision

Лучшие практики наименования Artboard’ов в Sketch

Вы можете c легкостью сортировать экраны в InVision на основе первых букв и перемещать их по разделам. Также вы можете добавить код тикеты из Jira в название раздела InVision. Таким образом, другие смогут открыть таск с этим кодом в Jira и прочитать всю историю изменений

Abstract

Лучшие практики наименования Artboard’ов в Sketch

Вы можете легко найти экраны в Abstract, выполнив поиск по первым буквам. Также вы можете увидеть, что мы добавляем код таски из Jira к названию. Это помогает нам увидеть какой проект или команда работает над этим файлом

Время подарков!

Лучшие практики наименования Artboard’ов в Sketch

Спасибо, что вы дочитали до конца и как я обещал, вот наша библиотека с которой мы работаем. Из интересных символов о которых я расскажу чуть позже, это состояния артбордом или символов! Ссылка для скачивания ниже.

Если у вас есть предложения по библиотеке, пишите мне на Spectrum✌️


Если у вас есть предложения по улучшению, пишите в Spectrum. И большое спасибо EPAM.com и DesignSpot за поддержку ❤️

Вы можете написать мне напрямую через mssg.me/farid или найти меня в Instagram или Facebook

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5