Логин / Форма регистрации Идеи и Красивые Примеры

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

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

Целесообразно рассмотреть некоторые из пунктов здесь с объективной точки зрения. Хотя многие формы входа и регистрации хорошо работают с одним типом сайта, окончательного решения по поводу того, что “Лучший” решение. Используйте свою дизайнерскую интуицию, чтобы применять кусочки из форм, к которым вы стремитесь.

Рассмотрим несколько входов

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

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

Вы захотите внедрить подобные стили для всех ваших страниц входа. Я, конечно, не рекомендую придерживаться того же стиля ввода текста и меню выбора / выбора. Разрабатывая свой мозг для творчества, подумайте о том, как должен быть размечен каждый элемент: много места между слоями, большой легко читаемый текст и даже ссылки на боковой панели на прямую линию электронной почты..

Ящики для входа в jQuery

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

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

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

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

Простые одностраничные регистрации

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

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

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

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

Создайте эффект Flashy

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

Этот систематический подход аналогичен в области входа в систему jQuery от Pixel2Life. Однако разница с Tumblr заключается в том, что сеть не может предложить контент тем, у кого нет блога (кроме просмотра других учетных записей). Реальная выгода от Tumblr - это создание собственного блога и следование за другими - таким образом, ваша главная цель на главной странице - создать учетную запись или войти в систему..

В этой системе есть некоторые ошибки. В частности, в IE6 / IE7 не поддерживается эти новые свойства CSS. На домашней странице также используется система для добавления элементов метки в значения ввода формы - в основном это отменяет “дефолт” символы, используемые для ящиков электронной почты / паролей.

Эти метки исчезают в центре внимания в современных браузерах, таких как Chrome / Firefox. Но не повезло с устаревшими браузерами, которые, как вы можете себе представить, довольно раздражают, пытаясь перечитать ваш собственный ввод!

20+ примеров красивого дизайна форм

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

Новости Snoggle