Правила именования: Учимся логичному присвоению имен

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

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

Благодаря материалам, которые будут рассмотрены ниже, у вас получится прояснить большинство непонятных моментов и упростить себе работу в дальнейшем.

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

Вдохновение для нейминга

Если вы в поисках вдохновения для именования классов HTML, свойств CSS или функций JavaScript, сайт Classnames — это замечательный источник, полный идей, которые помогут вам думать нестандартно.

* Classnames предоставляет тематически сгруппированные списки слов. Идеально подходит для нашей цели, можно смело применять в своей работе

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

Соглашения об именах — те самые правила именования

Из чего складывается хорошее название? Хавьер Куэльо обобщил набор лучших практик по именованию, которые помогут вам называть свои слои, группы и компоненты упорядоченным и масштабируемым методом.

* Хавьер Куэльо объясняет как сделать название эффективным

Как отмечает Хавьер, хорошее название имеет логичную структуру, оно короткое, осмысленное, понятное всем, и не привязано к визуальным свойствам. Автор делится своими «за» и «против», иллюстрируя, как добиться хорошего результата. Он подробно рассматривает мелкие детали, которые необходимо учитывать при присвоении имен размерам, цветам, группам, слоям и компонентам.

Руководство по неймингу дизайн-токенов

Как вы называете и управляете своими дизайн-токенами (что такое дизайн-токен — рассказали тут)? Дабы помочь с улучшением этого навыка, Ромина Кавчич создала интерактивный сборник «Playbook». В нем рассказывается обо всем: от различных подходов к структуре наименования до создания баз данных с возможностью поиска и автоматизации.

* Playbook — классный помощник для экспериментов с именованием. Покупка этого гайда обойдется примерно в $60

На сайте есть «игровая зона», где можно испытать разные комбинации токенов. Протестировать очень легко – нужно лишь перетаскивать элементы.

Для получения более наглядных примеров стоит ознакомиться с шаблоном в Figma. Он включает в себя компоненты для всех категорий, что позволяет экспериментировать с разной структурой.

Гибкая таксономия дизайн-токенов

Как создать гибкую таксономию дизайн-токенов, которая будет работать для разных продуктов? С такой задачей столкнулась команда в Intuit (материнская компания, владеющая Mailchimp, Quickbooks, TurboTax и Mint). Ребята разработали гибкую систему, которая выходит за рамки бренда и служит основой для широкого спектра продуктов.

* Нейт Болдуин делится своими взглядами на гибкую таксономию дизайн-токенов в Intuit

Нейт написал целое тематическое исследование, в котором нас ждут ценные инсайты о создании таксономии в этой компании. Он подробно рассматривает проблемы старой системы, критерии, которые были определены для новой, и то, как она была создана. Вам гарантированы множество полезных выводов для создания своей собственной надежной и гибкой токен-системы.

Правила именования цветов

Когда вы создаете цветовую систему, вам нужны названия для всех ее аспектов и применений. Названия, которые понятны всем членам команды. Но как этого добиться? Каким образом привнести логику в такую субъективную тему, как цвет? Джесс Саттелл, штатный дизайнер контента для Spectrum Design System от Adobe, рассказывает о способах справиться с этой задачей.

* Джесс Саттелл объясняет, как язык привносит логику в именование цветов

Джесс показывает, как цветовая номенклатура Spectrum использует комбинацию классификатора цветового семейства (например, синий или серый) и шкалы значений яркости (50–900) для именования цветов так, чтобы это было не только логично для всех участников, но и масштабируемо и гибко по мере развития системы.

Распространенные названия для UI-компонентов

Посмотреть, как другие люди называют похожие вещи — отличный способ начать, если у вас с этим возникают трудности. И какой же источник может быть лучше, чем дизайн-системы от разных авторов и компаний? Чтобы вы не запутались в бесконечных исследованиях, Иэн Бин сделал это за вас и создал Component Gallery.

* Component Gallery являет собой годный набор различных компонентов интерфейса

Этот ресурс — богатая коллекция UI компонентов из реальных дизайн-систем. Она включает множество примеров для более чем 50 элементов — от аккордеона до визуально скрытого. А бонусом идет перечисление других названий, под которыми эти компоненты известны. На самом деле – это просто фантастический ресурс, и не только в отношении именования.

Карта таксономии переменных

Прекрасным примером руководства по именованию для сложной мультибрендовой, многофункциональной дизайн-системы является работа команды Vodafone UK Design System. Их Variables Taxonomy Map разбивает анатомию и категоризацию дизайн-токенов на хорошо организованную систему коллекций.

* Variables Taxonomy Map от Vodafone позволяет реализовать сложную мультибрендовую, мультитематическую систему дизайна

Карта иллюстрирует четыре коллекции, необходимые для поддержки системы, и связи между токенами — от бренда и примитивов, до семантики и страниц. Она опирается на работу Натана Кертиса и  позволяет каждому получить представление о том, где используется тот или иной токен и что он собой представляет, просто исходя из его названия.

Инвентарь имен дизайн-токенов

Ромина Кавчич создала небольшую, но удобную таблицу, которая призвана упростить процесс по присвоению названий. Design Token Names Inventory позволяет легко обеспечить согласованность наименований + синхронизируется непосредственно с фигмой.

* Design Token Names Inventory автоматически синхронизируется с Figma

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

Сама по себе она уже является хорошим подспорьем. Однако её настоящая сила проявляется в комбинации с плагином Google Spreadsheets или Kernel. После установки плагина, внесенные в файл изменения будут мгновенно отражаться в фигме. Настоящий чит-код, не находите?

Правила именования — тема довольно обширная и требует некоторой усидчивости для понимания сути. Но, однажды разобравшись, в итоге вы значительно упростите работу и себе, и коллегам. Это однозначно стоит затраченных усилий, дерзайте!✨️