Онлайновые формы - одна из самых сложных областей разработки веб-сайтов, особенно когда есть много вещей, которые могут пойти не так. Изменяющийся характер доступа людей к онлайн-контенту также повлиял на технологию, которая была разработана за годы до того, как люди ожидали, что смогут использовать с телефоном то, что обычно делают только с компьютером. Это технология, которая очень мало эволюционировала.
Дизайн веб-форм должен быть самостоятельной профессией. Дизайнеры сайтов должны привлекать услуги профессиональных дизайнеров веб-форм, чтобы помочь им в их работе. Но это не считается достаточно экономичным, и поэтому большую часть времени дизайнер сайта также отвечает за дизайн любых форм, используемых на сайте.
Но проектирование форм — это узкоспециализированный навык. Это требует понимания того, как люди взаимодействуют сformatИон и понимание лучших способов сбора и представления вformatион. Там, где общий веб-дизайн в основном сосредоточен на представлении вformatИон и изображения привлекательным, но практичным образом, дизайн формы требует, чтобы мы сосредоточили наше внимание на природеformation, а затем решить, как лучше структурировать его на странице, чтобы он работал так, как задумано. Эстетика в данном случае менее важна, но все же не должнаgotten.
В этой статье мы рассмотрим искусство дизайна веб-форм и посмотрим, сможем ли мы сделать наши веб-формы более умными с точки зрения их внешнего вида и функционирования.
Инструменты построения веб-форм
Стандартные инструменты, которые нам дали разработчики браузеров и W3C для объединения наших веб-форм, не совсем идеальны, и до применения к ним CSS они на самом деле довольно отвратительны. Вот как они выглядят:
Существует также еще один стандартный элемент управления вводом выберите, но вы должны избегать использования этого, если экономия места не является серьезной проблемой. Есть лучшие способы справиться с задачей, выполняемой элементом управления select, о чем мы поговорим позже. По возможности следует также избегать контроля текстовой области, потому что он очень проблемный и антикварный.
В дополнение к этим стандартным элементам ввода для HTML5 также созданы специальные новые. За исключением случаев, когда документ готовится исключительно для внутреннего использования и где среда браузера известна, следует использовать только компоненты, которые работают как в Firefox, так и в Chrome. Хорошо, если компонент также работает в других браузерах, но не должен только работать в других браузерах. Вот компоненты HTML5, как они появляются в Firefox:
И их слегка отличающийся внешний вид в Chrome:
Теперь, очевидно, очень важно знать, что ваши входы HTML5 будут выглядеть и работать по-разному в Chrome и Firefox, но они все равно будут работать. Стандартные элементы управления вводом также выглядят немного лучше в Chrome, чем в Firefox. Обратите внимание, что Chrome устанавливает североамериканский стандарт дат, который пользователи могут не оценить. Кроме того, версия элемента управления датой в Chrome делает его непригодным для отображения и должен использоваться только для ввода. Добавление средства выбора даты является основным улучшением в Chrome, но мы, вероятно, ожидаем увидеть это в будущих версиях Firefox.
Поскольку Firefox является открытым исходным кодом, вы можете на самом деле сделать свою собственную версию Firefox отображать входные данные точно так же, как это делает Chrome, загрузив исходный код браузера Chromium с открытым исходным кодом, на котором основан Chrome, и перенеся соответствующий раздел кода в исходный код Firefox. код (но тогда вам придется делать это каждый раз, когда вы обновляете Firefox до новой версии).
Однако главное состоит в том, что даже с улучшениями в Chrome внешний вид элементов управления вводом по умолчанию невелик и непривлекателен. Существует несколько других доступных элементов управления, но поскольку они не работают как в Chrome, так и в Firefox, их не следует использовать на сайтах, предназначенных для общественности.
Ответ Bootstrap (почти адекватный)
Bootstrap применяет стилизацию к стандартным элементам управления, что в некоторой степени улучшает их внешний вид. Но из-за философии мобильно-ориентированного проектирования Bootstrap это вызывает нежелательные эффекты для форм, которые не предназначены для отображения в виде одного столбца, и делает короткие поля ввода забавными, если они по умолчанию охватывают весь столбец. Мир, возможно, стал мобильным, но формы не были придуманы для мобильных пользователей.
Bootstrap расширяет элементы управления, чтобы заполнить горизонтальную ширину их контейнера, а это означает, что все элементы управления будут иметь одинаковую ширину, нравится вам это или нет (если вы не переопределяете это поведение вручную), и позволяет вам одеть некоторые типы элементов управления с дополнительным bling. Решение Bootstrap элегантно и преодолевает некоторые проблемы элементов управления, которые по-разному выглядят в разных браузерах, но работает только со стандартными элементами управления. Элементы управления HTML5 не реализованы в текущих версиях Bootstrap, поэтому вам придется их стилизовать самостоятельно.
Bootstrap также позволяет комбинировать элементы управления вместе. Иногда это хорошо, а иногда не очень хорошо. Комбинация ввода текста с кнопкой и флажком может выглядеть хорошо, но это может сбить пользователя с толку относительно того, как он должен взаимодействовать с таким незнакомым элементом управления.
Bootstrap предлагает два моих любимых устройства для создания форм: панель и хорошо, Они очень полезны для группировки данных формы, чтобы наглядно показать, какие данные связаны с какими другими данными, а также для разделения данных.
Интеллектуальное Формирование Здания 101
Теперь мы готовы подумать о том, как более разумно создавать формы. Чтобы сделать это, мы должны мыслить далеко за пределами значений по умолчанию. Нам необходимо знать о desktopпривязанные корни элементов управления формой, а также необходимость совместимости с мобильными устройствами. И нам нужно позаботиться о таких вещах, как удобство использования и проверка (если форма будет использоваться для сбора данных).
Это последнее замечание является хорошим, потому что, хотя элементы управления формы используются для сбора ввода, они также используются для отображения сохраненных данных. Средний веб-пользователь больше заинтересован (и должен быть) в том, чтобы попасть вformatИон от вас, чем сдатьсяformatион к вам.
Сбор данных прост. Люди будут заполнять все, что вы перед ними ставите, даже если это беспорядок. Но когда дело доходит до отображения данных, они более привередливы. Следовательно, здесь мы больше сосредоточимся на использовании форм для отображения данных, чем на их сборе, поскольку отображение требует большей осторожности и большей «умности».
1. Нужна ли нам форма?
Прежде чем мы создадим форму, мы должны проверить, что она нам действительно нужна. Если данные могут быть адекватно и беспристрастно представлены в виде таблицы, таблица, как правило, будет более эффективной и практичной.
Форма необходима, если:
- Мы собираем информацию от пользователя
- У нас есть много данных для отображения
- Данные должны быть четко сегментированы
- Пользователь может получить доступ к данным с мобильного устройства.
Если какой-либо из вышеперечисленных пунктов не соответствует действительности, тогда нет необходимости использовать форму, и таблицы будет достаточно. Проблема, с которой мы сталкиваемся с мобильной совместимостью, заключается в том, что ни таблицы, ни формы не подходят для мобильного дисплея. Тот факт, что дизайнеры смартфонов дали своим пользователям возможность использовать браузер в портретной ориентации, и что большинство пользователей предпочитают держать свои телефоны таким образом, вызывает большинство проблем с совместимостью мобильных устройств, с которыми приходится сталкиваться разработчикам сайтов.
Тем не менее, формы лучше адаптируются к мобильному дисплею, чем таблицы. Так что, если вы действительно должны убедиться, что все данные можно легко просмотреть на мобильном дисплее, тогда формы - лучший выбор, чем таблицы… иногда!
2. Спроектируйте desktop макет
Это правда, что в целом вы должны сначала разработать мобильный макет, но когда дело доходит до форм, это не лучший способ, потому что нам нужно знать, как будут группироваться данные, и мы можем сделать это только в том случае, если может видеть все поля одновременно, что нельзя сделать на мобильном устройстве, если вы не отображаете так мало данных, что нам не нужно беспокоиться о разработке формы.
Самый быстрый способ создать макет формы — использовать InkScape. В этом примере мы создадим систему управления кадровыми записями. Вот макет для desktop опытный образец:
Внешний прямоугольник представляет все пространство дисплея с разрешением 1024 x 768 пикселей. На любой desktop браузере, у нас нет доступа к такому количеству пикселей, если пользователь не находится в полноэкранном режиме (что случается редко). Итак, наш
дизайн составляет 900 x 600 пикселей, что должно соответствовать доступной области большинства desktop экраны.
Если доступная область меньше ширины 900px, наши столбцы 2 x 450px будут разбиваться и отображаться как один непрерывный столбец 450px. Это решает проблему мобильной совместимости, по крайней мере до тех пор, пока Google не потребует, чтобы все наши сайты могли умещаться на экране наручных часов.
Вы заметите, что большая часть дисплея состоит из обычных окон ввода, что может показаться скучным, но в действительности это почти всегда лучший способ сделать это. Также обратите внимание на использование шрифта с фиксированной шириной. Это помогает сохранить единообразие в дизайне формы.
Наши столбцы на самом деле будут немного больше, чем 450px, больше похоже на 600px каждый, но если мы хотим, чтобы ширина столбца была около 450px, мы просто уменьшаем размер столбца с 6 до 5. Но столбец 600px должен помещаться на экране мобильного устройства в портретном режиме без переноса, так или иначе.
Мы протестируем наш макет с этим кодом:
И мы видим, что все выглядит хорошо (потому что мы временно добавили границы, чтобы показать нам).
Виджет линейки экрана Linux, очевидно, не является частью веб-страницы, но он показывает, что наши колонки не будут плохо работать на меньшем дисплее. Давайте посмотрим, что происходит при разных значениях ширины экрана:
3. Создание пользовательских размеров ввода и положения метки
Если мы просто оставим все по умолчанию, без добавления какого-либо пользовательского CSS, это то, что произойдет, когда мы добавим наш первый ряд элементов управления вводом:
Это происходит потому, что метка для каждого ввода по умолчанию расположена слева от ввода, и потому что мы не установили пользовательскую ширину для элементов управления вводом. Мы можем исправить обе проблемы с помощью CSS.
Теперь мы просто устанавливаем свойство display элементов метки на «block», устанавливаем поля First и Last на класс «in40w», а поле MI на class «in10w», и все должно выглядеть намного лучше.
Как вы можете видеть, это выглядит лучше, но расположение больше не является правильным. Теперь ящики сложены. Итак, как мы можем это исправить, избавившись от идеи использовать элемент label вообще, потому что нам это не нужно. Мы просто применим наши in40w и in10w классы, плюс сделать новый класс под названием inLeftOf.
Который после применения устраняет проблему, которую мы видели ранее, например:
Но это не оставляет достаточно места для поля SSN. Это связано с тем, что левый столбец больше ожидаемого, поэтому 40% на самом деле занимает больше места, чем нужно для этих полей, поэтому мы можем сократить их до in30wи среднее поле больше, чем нужно, чтобы мы могли сделать это in5w, Вот что происходит:
Так что теперь более чем достаточно места для добавления поля SSN, которое завершает первую строку нашей формы ввода. После сглаживания всех этих деталей, создание остальной части левой колонки должно быть очень простым. Теперь мы можем избавиться от временной границы, а также применить правильный фон к столбцу. Вот верхняя половина панели, прежде чем мы перейдем к специальным областям формы:
Несколько вещей произошло на этом этапе. Первой была простая часть установки цвета фона для столбца (rgb (235,235,246)), и хотя вы не можете видеть его здесь, цвет текста для всех входных данных был установлен на #427DB4, а font-weight был установлен жирным шрифтом, чтобы уменьшить нагрузку на глаза. Текст был настроен на автоматическое преобразование в верхний регистр с помощью свойства CSS text-transform, чтобы ускорить ввод данных и уменьшить количество ошибок.
Более сложный вопрос выравнивания элементов управления и обеспечения их правильного выравнивания на любом типе дисплея потребовал больше размышлений. Вы уже видели технику, использованную для первой строки входов и их меток. Этот метод будет работать, когда нет необходимости в дополнительном интервале между входами, но если нам нужно добавить пробел, то лучше использовать другой метод.
Этот другой метод включает в себя создание вложенного ряда столбцов внутри нашего основного столбца, что поможет сохранить правильное расположение элементов управления. Количество столбцов и их размеры меняются в зависимости от требований каждого набора элементов управления. Помните, что все responsive, поэтому при изменении размера столбца все внутри столбца будет пытаться изменить размер, чтобы соответствовать изменению. Это хорошая новость для слабовидящих пользователей, так как они могут увеличивать масштаб на своем дисплее, и все будет отображаться правильно, как и для любого другого пользователя.
Переходя к более сложной части левой колонки, первоначальная концепция, изложенная в макете, требовала структуры, которую было бы трудно реализовать. К счастью, я понял, что данные на панели прав можно было бы удвоить, если бы использовались стандартные флажки, и это хорошо решило проблему сложности макета:
Более светлые панели вокруг специальных секций — это обычные колодцы Bootstrap. Для ввода данных о религии необходимо выбрать из установленного списка предопределенных официальных религий (включая «другие»). Разработка правых столбцов была еще проще, и использовались те же методы, что и в первом наборе элементов управления в левом столбце, организуя элементы управления в таблице. format, но без использования таблицы.
Чтобы этот проект был успешным, он должен был обеспечить идеальное responsiveness на всех официальных размерах дисплея. Посмотрим, как получился результат. Сначала в версии с полным разрешением:
Это достаточно близко к прототипу, чтобы мы могли им довольствоваться. На самом деле, это даже улучшение. Теперь давайте посмотрим responsive макет в каждом из различных разделов страницы:
Bootstrap и HTML5 сделали разработку форм быстрее и проще, чем раньше, но многие разработчики подрывают этот прогресс, делая формы слишком сложными (используя специальные элементы формы HTML5 только потому, что они должны использоваться, а не потому, что они необходимы для проекта). ), и создавая полностью одномерные формы, которые даже не пытаются использовать преимущества responsive дизайн. С небольшой осторожностью и дополнительной работой любые данные можно сделать более презентабельными на экране любого размера.
Вы можете получить несколько незначительных сбоев на наименьшем размере экрана при портретной компоновке на наименьшем размере экрана (в случае этого проекта поле Middle Initial в первом ряду немного меньше, чем было бы идеально), но пользователи мобильных устройств обычно принять, что это компромисс, который они должны сделать, чтобы не держать свои телефоны должным образом.
Сделайте это правильно, и ваши формы данных могут выглядеть так:
Вместо этого:
изображение заголовка любезно предоставлено
Комментарии Ответы 0