Именование слоев? А зачем?
Стоит ли называть слои? Нужно ли тратить на это время? С тех пор, как существуют программы для дизайна, ведутся споры о том, должны ли дизайнеры четко и ясно называть каждый отдельный слой в своих файлах. На мой взгляд, Frame 239573 вызывает то же чувство беспокойства, что и экран телефона, полный красных значков уведомлений. Он просто не позволяет назвать вашу работу законченной и профессиональной.
В то время как именование слоев может быть полезно для организации и навигации, есть кое-что, что упускается из виду, когда дело доходит до передачи дизайна разработчику. Слои могут быть сгруппированы по элементам дизайна, которые связаны друг с другом визуально, но могут не иметь какой-либо логической группировки или отражающего функционал названия. Вопрос не в том, тратим ли мы время на присвоение имен слоям или нет. Дебаты должны быть о том, как мы называем наши слои.
А ответ — семантическое (смысловое) именование.
Что такое семантическое именование?
Семантическое именование слоев и компонентов — это решающий момент в создании согласованной и масштабируемой дизайн-системы. Той, которую смогут легко понять и использовать все члены команды.
Суть семантического именования заключается в присвоении значимых и описательных названий элементам дизайна в зависимости от их функции. Или назначении имен таким образом, чтобы их было легко понять и запомнить. Это соглашение об именах позволяет дизайнерам и разработчикам быстро идентифицировать элементы дизайна и использовать их эффективнее и с меньшим количеством ошибок. Немного выходя за пределы темы слоев, что произойдет, если мы применим ту же логику к чему-то, что не зависит от языка, например к дизайн-токенам?
Что такое дизайн-токен?
Дизайн-токен — это абстрактное значение или именованная ссылка на значение. Он используется для определения дизайна пользовательского интерфейса. Другими словами, дизайн-токен — это единственное значение, на которое можно ссылаться и повторно использовать в системе дизайна, чтобы обеспечить согласованность продукта.
Дизайн-токены могут определять значения таких свойств, как цвет, типографика, интервалы и другие визуальные элементы. С помощью дизайн-токена, к примеру, можно зафиксировать оттенок синего, который используется во всем интерфейсе, или размер шрифта, который применяется ко всему основному тексту.
Использование токенов позволяет вносить изменения только в одно место (в сами дизайн-токены), и они автоматически распространяются на остальную часть проекта.
Как это связано с семантическим именованием?
Существуют разные уровни дизайн-токенов, включая базовые, семантические и токены уровня компонентов.
Базовые токены
Базовые дизайн-токены — это фундаментальные строительные блоки дизайн-системы. Они определяют основные элементы дизайна. То есть такие свойства, как цвета, типографику, интервалы и другие визуальные элементы. Они определяются на глобальном уровне и последовательно используются во всей дизайн-системе, обеспечивая согласованность и связность интерфейса.
Семантические токены
На дополнительном уровне существуют семантические дизайн-токены, более точные по контексту использования. Семантическое именование позволяет создавать более понятные и описательные токены, которые можно использовать в разных компонентах. Оно обеспечивает последовательное и осмысленное именование, упрощая идентификацию и использование дизайн-токенов.
Рассмотрим, к примеру, базовый токен, определяющий основной цвет в дизайн-системе. С помощью семантического именования этот дизайн-токен можно назвать чем-то вроде label-primary, а не просто primary, что дает понять, что этот токен представляет цвет ярлыка и конкретно связан с основным цветом системы.
Токены компонентов
Семантическое именование может передавать функциональность токена на уровне компонентов. Видя описательные и осмысленные имена, дизайнеры и разработчики быстрее понимают назначение токена и способ его использования. Например, токен для фонового цвета компонента карточки может быть назван card-bg-color, чтобы указать его назначение и использование.
Это не про «называть слои или нет», это про «как называть слои»
Для меня постоянно отсутствующий аспект дебатов об именовании слоев заключается не в том, называете ли вы свои слои или нет. А в том, какой способ именования использовать и как он помогает при передаче проекта в разработку.
Семантическое (смысловое) именование и выбранное соглашение об именах гораздо важнее, чем просто именование слоев в организационных целях. Хотя присвоение имен слоям может помочь поддержать порядок в файле, этого недостаточно для качественной передачи дизайна в разработку. Настоящая ценность семантического именования — в его способности последовательно и осмысленно передавать важную информацию об элементах дизайна.
Design Glory
