Text Input состояния
Данная статья рассказывает о том, какие состояния нужно продумать для компонента text input в дизайн-системе.
Каждый раз, когда я сталкиваюсь с задачей, связанной с разработкой компонентов для UI kit, я открываю поиск и просматриваю возможные состояния для определенных компонентов, потому что при разработке компонента с нуля я могу упустить какие-то состояния.
Даже с учетом того, что в интернете можно найти всё, я не всегда получаю четкие ответы по поводу состояний компонентов.
После моего очередного ресерча по поводу того, какие состояния у каких компонентов должны быть, я приняла решение написать данную статью и разобрать самые сложные на мой взгляд компоненты и их состояния.
Первым на очереди оказался компонент Input.
Виды инпутов:
- Текстовое поле
- Многострочное поле
Будет только плюсом, если вы подумаете о расположении скроллбара в инпуте. Бывает такое, что контент объемный и в тултипе его весь не покажешь, так что потребность в скролле инпута вполне вероятна. Если скроллбар нельзя кастомизировать и вы используете нативные компоненты, посоветуйтесь с командой разработчиков, попросите их прислать вид задизайненного инпута с нативным скроллбаром, подумайте, двигать ли контент на ширину скроллбара или вы заложили достаточно места справа, все компоненты хорошо ложатся и все смотрится однородно.
- Текстовое поле с лейблами
- Многострочное поле с лейблами
- Текстовое поле с выпадающим списком
- Текстовое поле с выпадающим списком с лейблами
- Текстовое поле для работы с одной датой
- Текстовое поле для работы с двумя датами
- Текстовое поле для работы с одной датой с лейблом
- Текстовое поле для работы с двумя датами с лейблом
- Текстовое поле с двумя лейблами
- Многострочное поле с двумя лейблами
Мы выявили 12 видов инпутов. Теперь разберем, какие состояния могут быть у данных компонентов и какие параметры лучше проставить в Figma, чтобы было удобно пользоваться вариантами состояний.
Текстовое поле
Виды компонентов по внутренним составляющим инпута:
- Без иконки
- Одна иконка слева
- Одна иконка справа
- Две иконки справа
- Иконка слева и справа
- Иконка слева и две иконки справа
Я буду проводить разбор на самом сложном элементе- инпуте с тремя иконками.
Виды компонентов по состояниям:
- Default
- Hover
- Focus
- Typing
- Entered
- Disabled
- Error
- Error focus
Технические параметры:
Если говорить о размере шрифта, то он всегда зависит от выбранного типа шрифта. Обычно я использую размер не менее 16 пикселей, даже на мобильных устройствах. Почему это так, я объяснила ранее в своей статье об инклюзивном дизайне. Я использую одинаковый размер как для лейблов, так и для обычного текста.
Что же по параметрам в Figma.
Если вы выставите указанные параметры, то инпут сможет ресайзиться, как на видео:
Даже если у вас будет такое разрешение, в котором придется текст уместить в две строки, а то и в три из-за небольшой длины экрана, при корректно установленных параметрах инпут подстроится под длину фрейма, в котором он находится.
Многострочное поле
У многострочного поля точно такие же состояния как по элементам внутри инпута, так и по состояниям.
Единственное отличие в том, что в поле от двух строк и больше. Сейчас я покажу некоторые хитрости при создании компонента.
Text: длина: Fill container, ширина: Hug, resizing: Truncate text
При таком выборе настройки resizing многоточие будет автоматически ставиться в конце текста, когда фрейм для текста меньше самого текста.
У текстового и многострочного полей с лейблом и двумя лейблами абсолютно такие же характеристики и поведение, отличие только в наличии лейбла над полем ввода.
Также я хотела бы добавить, что существует разница между текстовым инпутром и многострочным текстовым инпутом. Сейчас покажу вам предпочтительный вид данных элементов:
- Если ожидаемая длина строки невелика, 2–3 слова, то мы используем текстовый инпут.
- Если предполагается ввести большой текст, то используйте многострочный инпут и показывайте минимум 2 строки, чтобы пользователь понимал, что он может ввести более 2 слов.
Два лейбла в основном нужны в случае, когда правый лейбл отвечает за какое-то действие, например “Забыли пароль?”.
Об остальных видах инпутов, а именно о “Текстовое поле для работы с датой” и “Текстовое поле с выпадающим списком” я расскажу подробно в следующих статьях.
Надеюсь данная статья помогла вам при создании состояний у текстовых и многострочных полей для UI kit.
Если возникнут вопросы, можете написать в комментарии или в любую из соцсетей, всегда рада и помощи, и критике)
Work smart, not hard!
Чтобы сказать привет, используй
Email: stasyabis7@gmail.com
Telegram, Medium, LinkedIn: @stasyabis
WhatsApp, Viber: +79877503993
Портфолио: Behance
Фотографии: Unsplash
