Как проектировать адаптивные и антростические формы

Sep 11, 2025

Инструкции

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

Вот как проектировать формы для мобильных устройств, включая быстрый взгляд на Как использовать Flexbox Отказ

01. Дизайн для вертикального прокрутки

A single column layout works better — Одноместный макет колонна работает лучше

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

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

02. Поместите этикетки над полями

Place labels above form fields — Поместите этикетки над полями формы

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

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

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

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

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

03. Используйте TAP Targets

Tap Targets должен быть простым в использовании, независимо от того, на каком размере устройств они отображаются. Большие цели (входные поля и кнопки) легче для пользователей с более низкой ловкостью, является ли это постоянное условие или временное, вызванное окружающей средой.

На данный момент крупнейший целевой размер предназначен для сенсорных устройств, поэтому вам нужно проектировать сенсорное сначала. Это гарантирует, что пользователи не придется увеличить, чтобы ввести текст или выбрать опцию. На кликабельные участки должны следовать за правилом толстым пальцем и не посягать в окружающих зонах: средний человек человека составляет 10 х 14 мм, а обычный кончик пальца составляет 8-10 мм, что делает 10 × 10 мм, хороший размер минимального сенсора.

Но не только должен быть должным образом размера цель крана, вы также должны обеспечить достаточно места между множественными целями Tap. На самом деле, если вы получаете ошибку «TAP TARCE SIZE» на Mobile SEO Tools, это часто потому, что ваши цели крана слишком близко друг к другу, а не фактическая цель крана слишком мала.

Может быть трудно читать контент на мобильных устройствах, поэтому изготовление входов на 100% и обеспечение того, чтобы текст установлен как минимум 16PX (1EM), будет иметь большую разницу. Таким образом, щепотка не уменьшается или дополнительный прокрутка не потребуется для чтения необходимой информации.

04. Используйте поля HTML5

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

Включают в себя входные типы номер , электронное письмо , тел , урл и Дата И ввод клавиатуры на ваших мобильных устройствах будет обновляться, чтобы упростить пользователю заполнять форму. Это не требует, чтобы вы добавили дополнительные классы в входы в стиле входы, все, что вам нужно сделать, это использовать действительные типы входных данных HTML5:

<input type="email" id="input-email">

05. Используйте Flexbox.

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

Технологии для решения структурированных макетов пришли и ушли в течение многих лет: разработчики использовали HTML-кадры, таблицы HTML, макеты на основе поплавков и, совсем недавно, различные системы сетки, популяризуются такими как каркасы CSS, такие как Загрузка Отказ

Но с появлением HTML гибкой коробки (или Flexbox. ), HTML наконец-то получил богатый механизм форматирования коробки, который обращается к сложным макетам, включая HTML-формы.

FlexBox дает нам большую гибкость для быстрого строительства красивых форм. Ключевая вещь, которую нужно понять о FlexBox, заключается в том, что это инструмент манипулирования контейнером: он направлен на то, чтобы обеспечить более эффективный способ выкладывать, выровнять и распространять пространство между элементами в контейнере, даже если их размер неизвестен и / или динамичен (отсюда Слово «Flex»).

Что интересно, это то, что Flexbox дает нам большую гибкость для быстрого построения нашей формы без использования медиа-запросов. Кроме того, все текущие браузеры поддерживают его.

Наш Руководство веб-дизайнера к Flexbox Статья рассказывает вам больше, но на данный момент давайте побудим какую-то практику и научиться использовать Flexbox для создания адаптивной формы. Первые вещи сначала давайте определим структуру HTML для нашей формы:

 & lt; Форма & gt;
& lt; ul class = "FLEX" & GT;
& lt; li & gt; & lt; mabels for = "первое имя" и gt; Имя & lt; / labet & gt; & lt; type type = "text" id = "First-name" Placeholder = "Введите имя имени здесь" & gt; / li & gt;
& lt; li & gt; a lt; little for = "last name" & lt; / labet & gt; & lt; type type = "text" id = "last name" Placeholder = "Введите свой фамилию здесь" & gt; / li & gt;
& lt; li & gt; & lt; mabel for = "email" и GT; Email & lt; / mabone & gt; at; intep type = "Email" id = "Email" Plactholder = "Введите адрес электронной почты здесь" & gt;
& lt; li & gt; & lt; little for = "Телефон" и GT; телефон & lt; / mabely & gt; & lt; type type = "tel" id = "Phone" Placeholder = "Введите телефон здесь" & gt;
& lt; li & gt; & lt; metage for = "сообщение" и gt; сообщение & lt; / mabels & gt; li & gt;
& lt; li & gt; & lt; Тип кнопки = "Отправить" и gt; отправить & lt; / li & gt;
& lt; / ul & gt;
& lt; / form & gt;

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

Вы можете применить Flexbox Styling к любому HTML-элементу, что означает, что вы можете легко восстановить и отравлять элементы независимо друг от друга. Имейте в виду, что Flexbox - это просто механизм для стиля, что означает, что вы можете добавить и удалить его по желанию.

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

 .flex li {
Дисплей: flex;
Flex-Wrap: Wrap;
Выравнивание-элементы: центр;
}

Следующим шагом является укажите ширину для элементов Flex. Основные требования:

Этикетки должны быть не менее 100px и не более 200px
Форма элементов, которые приходят после этикеток, должны быть не менее 200px

Что это дает нам? Каждая этикетка и связанная с ними элемент формы будут отображаться в одной горизонтальной строке, когда ширина формы итога составляет не менее 300 пикселей (помните, что мы используем прямоугольные этикетки здесь).

 .flex & gt; li & gt; метка {
Flex: 1 0 100px;
Макс-ширина: 200px;
}
.flex & gt; li & gt; Этикетка + * {
Flex: 1 0 200px;
}

Наконец, для кнопки «Отправить», которая также является элементом Flex, мы определяем несколько основных стилей:

 .flex li кнопка {
Маржа: Авто;
прокладки: 22px 46px;
}

Как видите, с минимальной разметкой и мощностью Flexbox, мы построили адаптивную форму.

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

Эта статья была первоначально опубликована в выпуске 287 Чистый журнал Журнал для профессиональных веб-дизайнеров и разработчиков - предлагая последние новые веб-тренды, технологии и методы. Подписаться на Net здесь.

Статьи по Теме:

Создавать отзывчивые формы и таблицы
Начните с веб-доступности
7 Отличные инструменты для тестирования ваших отзывчивых веб-дизайнов

Как проектировать адаптивные и антростические формы

01. Дизайн для вертикального прокрутки

02. Поместите этикетки над полями

03. Используйте TAP Targets

04. Используйте поля HTML5

05. Используйте Flexbox.

Инструкции - Самые популярные статьи

Как нарисовать голову: полное руководство

Как оживить с библиотекой MO.JS

Введение в CSS пользовательские свойства

Разбросание деревьев с V-Ray

Как сделать вкусные текстуры с карандашами

Возраст фотография в Photoshop CC

Сделать логотип в Illustrator

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

Категории