Идеи за вход / регистрация на формуляра и красиви примери
В цялата модерна мрежа виждаме все по-голям брой места за въвеждане от потребителя. Те включват колички за пазаруване, интерактивни уеб игри и със сигурност формуляри за регистрация на уебсайтове. Изглежда, че не само дизайнерите трябва да се фокусират върху дизайна на страниците, но и естетиката на формата да е също толкова важна роля.
Помислете колко форми може да сте попълнили в хода на вашата интернет история. Има безброй примери от тези форуми, табла за съобщения, блогове и много други. В тази статия ще разгледаме някои големи трикове за проектиране на вашите страници.
Разумно е да разгледаме някои от елементите от обективна гледна точка. Въпреки че много от формулярите за вход и регистрация работят добре с един вид сайт, няма окончателно съдебно решение за това какво е “най-доброто” решение. Използвайте интуицията си за дизайн, за да приложите парченца и части от форми, към които се стремите.
Помислете за множество входове
За да започнете нещата, помислете за малка форма за контакт от Web Design на Six Six. Да, това не е формуляр за влизане, така че може да се насочи малко извън темата. Дизайнът на страниците им обаче е много впечатляващ и ви показва какво може да постигне малко творчество.
Всяко от полетата за въвеждане предлага възможност за въвеждане на лична информация за контакт - име, електронна поща и т.н. Този вид форматиране ще запази вашите потребители в състояние на чудо и ще постигне целта на много по-високи стандарти за дизайн.
Ще искате да приложите стилове, подобни на тези на всички ваши страници за вход. Аз със сигурност не бих препоръчал да се придържате към същия стил на въвеждане на текст и опция / избор на менюта. Когато бягате от мозъка си за креативност, помислете как трябва да излагате всеки елемент: достатъчно пространство между слоевете, голям лесно четим текст и дори връзки към тях с директната им линия за електронна поща.
Кутии за влизане в jQuery
Това е било използвано на безброй уебсайтове в миналото и със сигурност ще бъде наблюдавано в рамките на новата ера. Отминали са дните, в които стандартните практики водят потребителите на нова страница за всяка стъпка от процеса на влизане. Обикновено това означава страница за въвеждане на вашите данни, както и нова страница за обработка на данните за вход.
Pixel2Life предлага фантастична представа за ново поле за въвеждане на данни. От началната си страница можете да кликнете върху връзката за влизане и да извикате динамично поле за вход в jQuery. Този формуляр съдържа повикване от Ajax към външен PHP скрипт, който проверява пълномощията на данните ви за вход и след като бъде обработен, предоставя или отказва достъп.
Продължавайки още една крачка напред, проницателният може да забележи връзка за регистрация непосредствено под полето за вход. Това предлага много по-гладък потребителски опит за тези, които искат да се регистрират за уебсайта, но не могат да намерят връзката за регистрация.
Ако някой потребител няма акаунт, но би искал да го направи, това ще ги отведе на страницата за регистрация, без да има бъгове с грешни страници. Полето за влизане все още ще бъде жизнеспособна опция за достъп до вашата собствена сметка, въпреки че разрешаването на опцията дава възможност за по-голяма възвръщаемост и по-големи обеми от нови регистранти..
Опростени регистрации на една страница
Друга променяща се парадигма, която виждаме, е липсата на такива подробности за новите регистрации на сметки. Това не е задължително да е лоша статистика, ако приемем, че потребителите са все по-нетърпеливи към попълването на данни. Цифрите всъщност предполагат уебсайтове с по-кратки регистрационни страници по-тежък ежедневни списъци с нови потребители.
Sikbox предлага лека възможност за посетителите да създадат собствено поле за търсене на уебсайт. Единственото изискване е вашият собствен домейн, който да предоставя резултати от търсенето за. Полетата за въвеждане са големи, текстът е много лесен за четене и има абсолютно никакви реклами да отклони потребителите от задачата за създаване на формуляр за търсене!
Сега това не е най-добрата форма за изграждане, когато създавате своя собствена страница за регистрация за форум или архив в блог. По стандартна дефиниция те поне ще изискват някакъв вид комбинация от имейл адрес / потребителско име и парола. Някои нови уеб приложения ще генерират динамични пароли за потребителите, само за да направят процеса на регистрация по-бърз.
Разбира се, компромисът тук няма контрол върху края на потребителя, за да генерира собствена парола, към която са свикнали много хора.
Създайте ефектни ефекти
Един от най-големите опит за регистрация, който някога съм имал, е създаването на първата ми сметка в Tumblr. Началната страница на техния сайт предлага формуляр за влизане и регистрация, поставени директно под един друг, с нови ефекти CSS3 за подчертаване / избледняване.
Този систематичен подход е подобен по отношение на jQuery зоната за влизане в Pixel2Life. Разликата с Tumblr обаче е, че мрежата не може да предлага съдържание на тези, които нямат блог (освен да търсят други акаунти). Истинската полза от tumblr е да създадете свой собствен блог и да следвате други - така основната ви цел на първата страница е да създадете акаунт или да влезете.
Има някои грешки в тази система. Най-вече в IE6 / IE7, които не поддържат тези нови CSS свойства. Също така, използвана на началната страница е система за добавяне на елементи на етикета във входни стойности на формата - основно отхвърляне на “по подразбиране” символи, използвани за кутии за имейл / парола.
Тези етикети изчезват при фокусиране в модерни браузъри като Chrome / Firefox. Но няма такъв късмет с отхвърлените браузъри, които, както можете да си представите, са доста досадно, опитвайки се да препрочитате собствения си вход.!
20+ Примери за красив дизайн на формуляри
По-долу е показана галерия за бърз достъп до някои фантастични форми за влизане. Те са избрани от интернет и включват множество форми на уеб приложения. Ако имате предложения за други сайтове, можете да ги споделите в раздела за коментари по-долу!
Snoggle News
Robo.to
Virb
Grooveshark
Storenvy
Dropbox
Идеи за зелен глобус
Freshbooks
Themeforest
MailChimp
Базов лагер
TestFlight
AwesomeJS
Отключване
PopScreen
Gowalla
Kontain
MobileMe
Laterthis
Launchlist
Theidealist