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

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

Предыстория

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

Решение

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

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

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

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

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

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

• Заголовок страницы, это проект или инициатива, над которой вы работаете
• Заголовок страницы может быть использован только для одной страницы

“Create Email” и остальные, это секции

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

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

• Раздел, представляет собой группу сторей или функционала.
• Если на странице используется более одного “эпика”, то новые можете показать справа

“CE: Objectives” является подсекцией

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

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

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

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

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

• Первые буквы взяты из «Раздела» и «Подраздела» как аббревиатура
• Вы можете называть артборды в формате Behavior Driven Development (BDD)

Если вы забыли название раздела, вы всегда можете увидеть название секции в InVision в полном формате или просто увидеть полнные заголовки в Sketch.

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

Invision

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

Abstract

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

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

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

---

Если у вас есть предложения по улучшению, пишите в Spectrum. И большое спасибо EPAM.com и DesignSpot за поддержку ❤️ Вы можете написать мне напрямую через mssg.me/farid или найти меня в Instagram или Facebook