Text Input состояния

Данная статья рассказывает о том, какие состояния нужно продумать для компонента text input в дизайн-системе.

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

Даже с учетом того, что в интернете можно найти всё, я не всегда получаю четкие ответы по поводу состояний компонентов.

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

Первым на очереди оказался компонент Input.

Текстовое поле

Многострочное поле

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

Текстовое поле с лейблами

Многострочное поле с лейблами

Текстовое поле с выпадающим списком

Текстовое поле с выпадающим списком с лейблами

Текстовое поле для работы с одной датой

Текстовое поле для работы с двумя датами

Текстовое поле для работы с одной датой с лейблом

Текстовое поле для работы с двумя датами с лейблом

Текстовое поле с двумя лейблами

Многострочное поле с двумя лейблами

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

Виды компонентов по внутренним составляющим инпута:

Я буду проводить разбор на самом сложном элементе- инпуте с тремя иконками.

Виды компонентов по состояниям:

Если говорить о размере шрифта, то он всегда зависит от выбранного типа шрифта. Обычно я использую размер не менее 16 пикселей, даже на мобильных устройствах. Почему это так, я объяснила ранее в своей статье об инклюзивном дизайне. Я использую одинаковый размер как для лейблов, так и для обычного текста.

Что же по параметрам в Figma.

Если вы выставите указанные параметры, то инпут сможет ресайзиться, как на видео:

Даже если у вас будет такое разрешение, в котором придется текст уместить в две строки, а то и в три из-за небольшой длины экрана, при корректно установленных параметрах инпут подстроится под длину фрейма, в котором он находится.

У многострочного поля точно такие же состояния как по элементам внутри инпута, так и по состояниям.

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

Text: длина: Fill container, ширина: Hug, resizing: Truncate text

При таком выборе настройки resizing многоточие будет автоматически ставиться в конце текста, когда фрейм для текста меньше самого текста.

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

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

Два лейбла в основном нужны в случае, когда правый лейбл отвечает за какое-то действие, например “Забыли пароль?”.

Об остальных видах инпутов, а именно о “Текстовое поле для работы с датой” и “Текстовое поле с выпадающим списком” я расскажу подробно в следующих статьях.

Надеюсь данная статья помогла вам при создании состояний у текстовых и многострочных полей для UI kit.

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

Work smart, not hard!

Чтобы сказать привет, используй

Email: stasyabis7@gmail.com

Telegram, Medium, LinkedIn: @stasyabis

Viber: +79877503993

Портфолио: Behance

Фотографии: Unsplash

Вебсайт: Website