Одинаковые компоненты — разная специализация

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

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

Одно дело, когда поля значатся везде как «input», другое — когда каждое поле названо соответствующим и понятным образом. У каждого типа полей свой функционал, свое предназначение. Таким образом, мы продумываем и показываем, какой тип нужно использовать в том или ином случае. Важно помнить, что дизайнер — это еще и аналитик, который грамотно предоставляет разработчику необходимые инструменты.

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

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

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

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

Компоненты могут выглядеть визуально одинаково, но иметь разное предназначение.

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

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

Таким образом, если я «достаю из широких штанин» Autocomplete [поле для контекстного поиска], он отображается на макете соответственно. Тогда разработчик, провалившись в определенную форму, сможет понять, какое конкретно поле ввода нужно использовать.

Смотрите и читайте другие мои материалы на youtube и в telegram.

#фигма #дизайн #вебдизайн #ux #ui #uxui #атомарный дизайн#figma