Как создать привлекательную и удобную форму?

У меня есть следующая форма (справа), и мое намерение состоит в том, что это:

  1. Привлекательный
  2. Простой в использовании

введите описание изображения здесь

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

ОБНОВЛЯТЬ введите описание изображения здесь

1. Измените текст над раскрывающимся меню в нижней части формы на Выберите нужную позицию . 2. Сделайте заглавной первую букву текста на зеленой кнопке следующим образом: Безопасный ранний доступ .
Рассмотрите возможность использования текста «Заполнитель» внутри полей, а не «Имя*», «Электронная почта*» и т. д. вне полей. Это упростит ваш дизайн.
Спасибо за ваше мнение. Я использую метку вместо заполнителя, но следует ли вместо этого использовать заполнители
Я на самом деле не согласен с перемещением заголовков внутри текстовых полей. Как только пользователь начинает печатать, его призыв к действию исчезает. Это может разочаровать пользователей, если они забудут, в какое поле вводят, или если автозаполнение их браузера перепутает вещи (такое случается). Это было бы визуально чище, да, но потенциально разочаровывает.
Чтобы отвлечься от точки @Vicki. Есть несколько причин не использовать заполнители. Заполнители не поддерживались в IE 10 и более ранних версиях, поддержка заполнителей довольно несовместима со средствами чтения с экрана для слабовидящих, не говоря уже о том, что это противоречит стандартной спецификации HTML.
Ладно, ребята, спасибо за ваш вклад. Посмотрите на результат.

Ответы (2)

Поздно на шоу, но вот что я бы сделал:

Во- первых , запрос полного имени противоречит стандарту, поэтому я бы разделил nameполе на поля firstи lastполя имени.

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

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

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

Я знаю, что упоминаю об этом в комментарии, но я оставлю здесь более подробную информацию о аргументе заполнителя и метки.

Заполнители имеют определенные места, они отлично выглядят и могут быть очень полезными при правильном использовании. Однако важно не использовать только заполнитель. Это связано с тем, что многие браузеры (и люди, не использующие javascript) не смогут увидеть форму или инструкции формы.

Вот мой пример вашей воссозданной формы.

Пример формы

Спасибо! Из любопытства, какие свойства у вашей границы/тени?
@John Джон, я полагаю, что это было (в Illustrator) Mode: умножение ,: Opacity25% ,: X Offset0 ,: Y Offset​​1px ,: Blur3px Color,: #b1afb0. Я пытался сопоставить тот, что на картинке, которую вы предоставили, поэтому, если у вас есть доступ к этому, это всегда другой вариант.
Хорошо спасибо. Взгляните на обновление и дайте мне знать, что вы думаете!
@John, я забыл упомянуть, контур формы имеет размер шрифта .4px, но этого можно добиться в Интернете, преобразовав формат в RGBA, объявление должно выглядеть примерно так: border: 1px solid rgba(177, 175, 176, 0.50);В остальном, мне нравится! :)

Вот несколько предложений для вашего пользовательского интерфейса:

  • Используйте больший размер шрифта для удобства чтения.
  • Превратите второе предложение в безусловную форму.
    «Предоставьте запрошенную ниже информацию для раннего доступа к нашей платформе».
  • Используйте «Приговор».
  • Используйте информацию-заполнитель, чтобы запрашивать желаемые ответы.
Это очень короткий ответ на очень широкий вопрос. Почему он должен вносить эти изменения? Какие ресурсы или исследования подтверждают эти утверждения?
Как создать привлекательную и удобную форму?
СпросиСетьПолитика конфиденциальности1y, 0v