Bejelentkezési / regisztrációs forma Ötletek és szép példák

A modern weben keresztül egyre több helyet látunk a felhasználók számára. Ezek közé tartoznak a bevásárlókocsik, az interaktív webes játékok, és minden bizonnyal a honlap regisztrációs űrlapjai. Úgy tűnik, hogy a tervezőknek nemcsak az oldaltervezésre kell összpontosítaniuk, hanem az esztétikai formák is ugyanolyan fontos szerepet játszanak.

Fontolja meg, hogy hány űrlapot töltött ki az internetes előzmények során. Számtalan példa van a fórumokról, üzenőfalakról, blogokról és még sok másról. Ebben a cikkben néhány nagyszerű trükköt fogunk megnézni az oldalain megjelenő űrlapok megtervezésében.

Bölcs dolog, hogy néhány elemet objektív szemszögből vesszük figyelembe. Bár sok bejelentkezési és regisztrációs űrlap jól működik az egyik típusú webhelyen, nincs végleges ítélet arra, hogy mi az “legjobb” megoldás. Használja a tervezési intuíciót arra, hogy biteket és darabokat alkalmazzon az általa követni kívánt formákból.

Fontolja meg a több bemenetet

A dolgok elkezdéséhez vegye figyelembe az Alapítvány Hat Web Design egy kis kapcsolatfelvételi űrlapját. Igen, ez nem egy bejelentkezési űrlap, így egy kicsit távolabbi témát irányíthat. Az oldalak kialakítása azonban nagyon lenyűgöző, és megmutatja, hogy mit érhet el egy kis kreativitás.

A beviteli mezők mindegyike helyet ad a személyes névjegyek - név, e-mail, stb. - beírásához. A stílusok messze túlmutatnak a szokásosnál, a felhasználói bevitellel pedig egy kézzel írt kalligráfia típusát. Az ilyen formázás a felhasználókat csodálatos állapotban fogja tartani, és sokkal magasabb tervezési szabványokat ér el.

Ezeket a stílusokat az összes bejelentkezési oldalához hasonlóan szeretné végrehajtani. Biztosan nem javasolnám, hogy ugyanolyan beviteli szöveg és opció / kiválasztás menüt használjunk. Amikor az agyát kreatívan kocogja, fontolja meg, hogyan kell elhelyezni az egyes elemeket: rengeteg hely a rétegek között, nagy könnyen olvasható szöveg, sőt az oldalsáv linkjei a közvetlen e-mail vonalhoz.

jQuery bejelentkezési dobozok

Ezt a múltban számtalan weboldalon használták, és az újkori tervekben is nyilvánvaló. Hosszú távúak azok a napok, amikor a szokásos gyakorlatok egy új oldalt hoznának a felhasználókhoz a bejelentkezési folyamat minden egyes lépéséhez. Általában ez azt jelentené, hogy az oldal beírja az adatokat, és egy új oldalt is tartalmaz a bejelentkezési adatok feldolgozásához.

A Pixel2Life fantasztikus betekintést nyújt az új beviteli mezőbe. Honlapjukról kattintson a bejelentkezési linkre, és hozzon létre egy dinamikus jQuery-alapú bejelentkezési fiókot. Ez az űrlap tartalmaz egy Ajax hívást egy külső PHP parancsfájlra, amely ellenőrzi a bejelentkezési információ hitelesítő adatait, és feldolgozás után megadja vagy megtagadja a hozzáférést.

Egy másik lépéssel tovább halad a figyelmes bejelentkezési link közvetlenül a bejelentkezési mező alatt. Ez sokkal simább felhasználói élményt nyújt azok számára, akik szeretnének regisztrálni a webhelyre, de nem tudják megtalálni a regisztrációs linket.

Ha egy felhasználónak nincs fiókja, de azt szeretné, hogy az egyik, akkor ez a regisztrációs oldalra buggyos oldalletöltés nélkül jön el. A bejelentkezési mező továbbra is életképes megoldás a saját fiókjához való hozzáféréshez, azonban az opció engedélyezése nagyobb hozamot és nagyobb mennyiségű új regisztráló számára ad lehetőséget..

Egyszerű egyoldalas regisztráció

Egy másik változó paradigma, amit látunk, az új számla-regisztrációk hiánya. Ez nem feltétlenül rossz statisztika, feltételezve, hogy a felhasználók egyre türelmetlenebbek az adatok kitöltése felé. A számok valójában rövidebb regisztrációs oldallal rendelkeznek nehezebb naponta új felhasználók listáját.

A Sikbox könnyű lehetőséget kínál a látogatók számára, hogy saját keresőmezőt hozzanak létre egy weboldal számára. Az egyetlen követelmény a saját egyéni tartomány, amely a keresési eredményeket biztosítja. A beviteli mezők nagyok, a szöveg nagyon könnyen olvasható és van egyáltalán nincs reklám figyelmen kívül hagyja a felhasználókat a keresési űrlap építésének feladatától!

Most ez nem a legjobb formája annak, hogy a fórum vagy a blog archívum saját regisztrációs oldalát hozza létre. Ezek szabványos definíció szerint legalább egy e-mail cím / felhasználónév kombinációhoz szükségesek, jelszóval együtt. Néhány új korú webalkalmazás dinamikus jelszavakat generál a felhasználók számára, hogy a regisztrációs folyamat gyorsabban történjen.

Természetesen itt a kompromisszum hiányzik a felhasználó vége irányításában, hogy saját jelszavát hozzon létre, amit sokan hozzászoktak.

A Flashy Effects kiépítése

Az egyik legnagyobb bejelentkezési élmény, amit valaha is az első Tumblr-fiókom létrehozása volt. A webhelyük honlapja egyaránt tartalmaz egy bejelentkezési és bejelentkezési űrlapot, amelyet közvetlenül egymás alatt helyeznek el, új CSS3 kiemelési / elhalványítási hatásokkal.

Ez a szisztematikus megközelítés hasonló a Pixel2Life jQuery bejelentkezési területéhez. Azonban a különbség a Tumblr-tel a hálózat nem kínál semmilyen tartalmat azoknak, akik nem rendelkeznek bloggal (mások böngészése mellett). A tumblr valódi előnye a saját blog létrehozása és mások követése - így a fő cél az első oldalon vagy fiók létrehozása, vagy bejelentkezés.

Van néhány hiba ezzel a rendszerrel. Leginkább az IE6 / IE7-en belül, amely nem támogatja ezeket az új CSS-tulajdonságokat. A honlapon is használatos egy címkeelemek hozzáadására szolgáló rendszer, amely lényegében felülírja a “alapértelmezett” az e-mail / jelszó dobozokhoz használt karakterek.

Ezek a címkék elhalványulnak a modern böngészőkben, mint például a Chrome / Firefox. De nincs ilyen szerencsét az elavult böngészőkkel, amelyek - ahogy el tudják képzelni - meglehetősen bosszantó próbálják újra olvasni a saját bemenetét!

20+ példa szép formájú formatervezésre

Az alábbiakban egy gyors körkörös galéria látható néhány fantasztikus bejelentkezési űrlapról. Ezeket a webről választották ki, és számos webes alkalmazást tartalmaz. Ha javaslata van más webhelyekre, ne habozzon megosztani azokat az alábbi megjegyzések részben!

Snoggle News

Robo.to

Virb

Grooveshark

Storenvy

Dropbox

Zöld Globe Ötletek

FreshBooks

Themeforest

MailChimp

Alaptábor

TestFlight

AwesomeJS

feloldó

PopScreen

Gowalla

Kontain

MobileMe

Laterthis

Launchlist

Theidealist