Ідеї для входу / реєстрації форми та красиві приклади

На всьому сучасному веб-сайті ми спостерігаємо зростання кількості місць для введення користувача. До них належать кошики для покупок, інтерактивні веб-ігри, і, безумовно, форми реєстрації на сайті. Схоже, що дизайнери не тільки зосереджуватимуться на дизайні сторінок, але й формувати естетику також не менш важливу роль.

Подумайте, скільки форм ви заповнили протягом своєї історії Інтернету. Існує безліч прикладів з форумів, дошок оголошень, блогів і багато іншого. У цій статті ми розглянемо деякі чудові трюки для розробки своїх форм на сторінці.

Доцільно розглянути деякі пункти з об'єктивної точки зору. Хоча багато форм входу та реєстрації добре працюють з одним типом сайту, остаточного рішення суду немає “найкраще” розчин. Використовуйте інтуїцію дизайну, щоб застосовувати біти і шматки з форм, до яких ви прагнете.

Розгляньте кілька входів

Щоб розпочати, розглянемо невелику контактну форму з веб-дизайну Foundation Six. Так, це не форма для входу, тому вона може трохи відмовитися від теми. Тим не менш, їх дизайн сторінки дуже вражає, і це показує вам, що трохи творчості можна досягти.

Кожне з полів введення дає вам можливість ввести персональну контактну інформацію - ім'я, електронну пошту тощо. Стилі виходять далеко за межі звичайних, пропонуючи користувачеві введення у вигляді рукописної каліграфії. Цей тип форматування буде тримати ваших користувачів у дивовижному стані та досягати мети набагато вищих стандартів дизайну.

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

Ящики для входу в систему jQuery

Це було використано на незліченних веб-сайтах у минулому і, безумовно, буде розглядатися в рамках дизайну нового віку. Давно минули часи, коли стандартні практики привели користувачів до нової сторінки для кожного етапу процесу входу. Як правило, це означатиме сторінку для введення даних, а також нову сторінку для обробки інформації для входу.

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

Переходячи на інший крок далі, хитрий може помітити посилання для реєстрації безпосередньо під полем для входу. Це надає набагато більш плавний досвід користувачів для тих, хто бажає зареєструватися на веб-сайті, але не може знайти посилання для реєстрації.

Якщо користувач не має облікового запису, але хотів би його створити, це приведе їх до сторінки реєстрації без будь-яких помилок на сторінці. Вікно входу в систему буде як і раніше прийнятним варіантом для доступу до вашого власного облікового запису, однак дозволяючи опцію дає місце для більших прибутків і більших обсягів нових зареєстрованих.

Прості реєстрації на одну сторінку

Ще одна змінна парадигма, яку ми бачимо, - це відсутність таких деталей для нових реєстрацій рахунків. Це не обов'язково є поганою статистикою, якщо вважати, що користувачі нетерплять до заповнення даних. Цифри фактично пропонують веб-сайти з більш короткими сторінками реєстрації важче щоденних списків нових користувачів.

Sikbox пропонує легкий варіант для відвідувачів, щоб створити власне вікно пошуку для веб-сайту. Єдина вимога - це ваш власний домен, який може надавати результати пошуку. Поля введення великі, текст дуже простий для читання і є абсолютно немає реклами відволікати користувачів від завдання створення своєї форми пошуку!

Тепер це не найкраща форма для створення власної сторінки реєстрації для форуму або архіву блогу. За стандартною дефініцією вони, принаймні, вимагатимуть певного типу поєднання адреси електронної пошти / імені користувача з паролем. Деякі веб-програми нового віку генеруватимуть динамічні паролі для користувачів, щоб зробити процес реєстрації більш швидким.

Звичайно, компромісу тут бракує контролю над кінцем користувача для створення власного пароля, до якого звикли багато людей.

Створіть ефектні ефекти

Один з найбільших досвіду реєстрації, який я коли-небудь мав, був створення мого першого рахунку Tumblr. На головній сторінці сайту пропонується форма для входу та реєстрації, розміщена безпосередньо під одним з новими ефектами CSS3 для висвітлення / вицвітання.

Цей систематичний підхід подібний до області входу в систему jQuery компанії Pixel2Life. Тим не менш, різниця з Tumblr це мережа не може запропонувати будь-який контент для тих, хто не блог (крім перегляду інших рахунків). Реальна вигода від tumblr - створення власного блогу та наступних інших - таким чином, ваша головна мета на першій сторінці полягає в тому, щоб створити обліковий запис або увійти.

У цій системі є деякі помилки. Особливо в IE6 / IE7 не підтримуються ці нові властивості CSS. Також на домашній сторінці використовується система додавання елементів етикетки до вхідних значень форми - в основному скасування “за замовчуванням” символи, що використовуються для коробок електронної пошти / пароля.

Ці позначки зникають у фокусі в сучасних браузерах, таких як Chrome / Firefox. Але немає такої удачі з застарілими веб-переглядачами, які, як ви можете собі уявити, досить прикро, намагаючись перечитати власний вхід!

20+ Приклади красивого дизайну форм

Нижче наведена гаряча галерея галереї деяких фантастичних проектів форми входу. Вони були вибрані з усього Інтернету і включають численні форми веб-додатків. Якщо у вас є пропозиції для інших сайтів, не забудьте поділитися ними в розділі коментарів нижче!

Новини Snoggle