20 suurepärast registreerimisvormi näidet, millest õppida
Registreerimisvormid võivad olla erineva kuju ja suurusega. Mõned on üks väli, teised on mitmeastmeline protsess, mis ulatub üle mitme ekraani.
Täna vaatame 20 atraktiivset ja funktsionaalset vormi, et näha, kas leiame kasulikke ideid, mida saaksite järgmisel korral registreerumisvormi loomisel rakendada.
Tutvuge disainiressurssidega
300 pikslit
Mitmed näited, mida täna vaatame, pärinevad beetaversioonide registreerimisvormidelt. Tavaliselt pakuvad need lehed lihtsalt graafilist pilti ja puuduvad peaaegu üldse teavet selle kohta, milline sait tegelikult on.
Mulle väga meeldib 3D-nupu graafika ja see, kuidas see sellel klõpsates animeerib. Seda tehakse piltide ja Javascripti abil, kuid stiil tuletab mulle meelde BonBon Buttons, vabalt allalaaditavat CSS3 katset.
Veel üks lahe asi selle lehe juures on see, et see kasutab suurepäraselt pildi spreid. Algpildi vaatamiseks vaadake allikat.
TestFlight
Selle ühe sujuv ja lihtne stiil on lihtsalt ilus. Mulle meeldib, et igas reas on lisapolster ja kui palju valitud vormi väli teistest silma paistab.
See on tegelikult oluline kasutatavuse aspekt. Vormid võivad kasutajatele valu valmistada ja väikeste puudutuste lisamine, nagu ilmne praeguse välja esiletõstmine, võib tõesti aidata neil protsessist läbi käia.
Usaldusväärne
Mulle meeldib, kuidas see üks selline lihtsalt ookeanis hõljub. Siin on ka palju tõeliselt mõnusat ja peent stiili. Vaadake põldude sisemist varju ja seda, kuidas põllupiirid on vasakus ülanurgas tumedamad kui paremal all. Sellesse vormi on sisse ehitatud ka mõned suurepärased tagasisidefunktsioonid, mille olulisust käsitleme hilisemas näites.
CertTime
Modaalsed aknad on alati jahedad. Selle asemel, et suunata teid teisele lehele, katavad nad praeguse sisu. Millegipärast on see lihtsalt vähem rahutu kui viskimine kuskile uuele, mis tundub katkestajana.
Kodulehe graafika tuhmina ja modaalse märgi registreerimisvormi toomisega saate aru, et protsess on kiire ja valutu ning naasete sirvimisega kiiresti.
Idealistid
See on palju pikem kui eelmised vormid ja sellel on mitu välja täitmiseks. Sisu on aga jagatud kolmeks hallatavaks tükiks, mis aitab tal mitte tunda end ühe suure vorminguna.
Samuti meeldib mulle väga see, kuidas kujundus tundub trükitud kujul, näete ennast vastustes kirjutavat!
Plokk
Mul pole selle teise kohta liiga palju öelda, kui see, et mulle meeldib lehe väljanägemine. Väike sisestuskasti esitatud aadressis on kena puudutus. See väli kontrollib automaatselt ka teie kasutajanime valikut, et näha, kas see on juba tehtud.
ACosmin.com
Mustri ja tekstuuri kasutamine sellel saidil on fantastiline. Ristkülikute loendamine meilivormil on lõbus, seal on väli ise ja põllu äär, mis on ümbritsetud punktimustriga, mida ümbritseb mingi valge polster, siis on sellel veel üks tumedam hall äär ja lõpuks üks suur kast seda kõike kinni hoida.
Seda kirjeldades võiksite arvata, et tulemus on hõivatud ja kole, kuid see tuli meie uhke.
Õitse tervis
Siin meeldis mulle sõbralik sõnumite saatmine vormitekstil: “Hoiame ühendust.” Liiga sageli tulistame sirgjooneliselt midagi lihtsat ja igavat, kui mõni minut kaalumist võib viia meid palju huvitavama lahenduseni.
Avanti
Avanti vorm on seotud selle suure nupuga. Laiendatud suurus ja julge värvivalik tõmbab teie tähelepanu sellele, kus näete kena lihtsat lauset, mis pole just tegevusele kutsumine, vaid ütleb selle asemel, mida nupp kasutaja vaatenurgast "Sign me up" annab. See ei jäta kahtlust, mis juhtub nupu vajutamisel.
Heliloogika
Audio Logic otsustas, et ilge illustreeritud tegelane hoiaks registreerumisvormi. See toob lehele palju iseloomu ja paneb teid nähes naeratama; tehnika, mida tasub uurida omaenda tegelaskujude abil!
Kulinaariakultuur
Armastan visuaalset tugevdust, mida see sait vormiväljade jaoks kasutas. Seda tüüpi lihtsaid ikoone võib leida kõigist sajast veebis leiduvast tasuta ikoonikomplektist ja see lisab vormile tõesti palju, võite selle peaaegu täita, isegi ilma teksti lugemata!
Seda tüüpi ikooni kasutamist näeme navigeerimisel üsna sageli ja on üsna värskendav näha, et keegi tõmbab selle vormile.
Gowalla
Gowalla vormil on huvitav sõnum õpetada: lihtne on hea. Siin on sait, millel on fantastiline, karbist väljas kujundus ja mis reklaamib samamoodi rakendust, kuid nad ei otsustanud registreerumisvormis midagi meelepärast või segavat teha.
Selle asemel on see lihtsalt tavaline valge kast kenade suurte väljadega. Pange tähele, kuidas nad kleepisid kaks esimest välja samal joonel, kuid hoidsid tihedat õigustatud joondust. See on kena ruumisäästlik tehnika, mis ei riku teie paigutust.
Buffalo
Mõnikord võib tohutu vorm uskumatult heidutada. Näete kõiki neid välju täitmiseks ja teie esimene instinkt on lihtsalt brauseriakna sulgemine ja nende eemaldamine.
Nagu allolev sait näitab, võib mõnikord aidata need väljad mitmeks etapiks jagada. Näete korraga ainult väikest tükki, nii et te ei heiduta ja saate ülaosas oleva riivsaia kaudu oma edusammudel silma peal hoida.
Kontain
Siin on see, mida ma vihkan: täites kakskümmend vormi ja vajutades esitamiseks ainult selleks, et teada saada, et tegin kuskil vea. Siis pean lehelt otsima pisikesi tärne, mis näitavad, kuhu ma valesti läksin. See pole ka ainult mina, kõik inimesed vihkavad seda maailmas! Ükskõik, kas teil on kolm või viiskümmend välja, muudate kasutajakogemuse lõpmata paremaks, pakkudes reaalajas aruka tagasisidet väljade kaupa.
Me näeme seda allpool oleval Kontaini vormil. Sisestasin ainult kolme tähe pikkuse parooli ja hüpikaken ilmutas mulle tohutut märki, et tegin midagi valesti. Sama juhtub siis, kui sisestate kehtetu e-kirja. Siinkohal pole oluline ainult tagasiside andmine, vaid selgelt nähtav ja hõlpsasti mõistetav tagasiside, mille kasutaja saab enne edastamise nupule vajutamist parandada.
Zzz
Gowalla on lõbus sait ja igav registreerumisvorm, millel on oma plussid. Siiski pole ühtegi rikkumatut reeglit, et ka vormidega ei saa natuke nalja teha.
Vaadake allolevat vormi, mitte ainult graafika pole hullumeelne, vaid ka vormiväljad ise on veidi paremaks pööratud, et suurendada välimust. See ei oleks kindlasti paljudes professionaalsetes olukordades sobiv, kuid saidil, mis on täidetud lendavate lammastega, reklaamides jooki, mis muudab teid uniseks, töötab see ideaalselt.
Vimeo
Vimeo inimesed otsustasid pühendada suurele lehele väikese vormi. Nad kleepisid selle paremas ülanurgas ja täitsid ülejäänud lehe illustreeritud saare ja mõne animeeritud hõljuva pilvega.
Nagu eelmine näide, pole see kindlasti sobilik kõigis olukordades, kuid töötab siin hästi ja on muidu igava vormi päris lõbus teostus.
Teevoor
See kujutab endast huvitavat natuke kastist välja mõtlemist. Parempoolne nupp „Sign Me Up” on vertikaalselt venitatud, et see vastaks kahe välja kõrgusele.
Me pole harjunud veebis ruudukujulisi nuppe vajutama, nii et peate midagi sellist rakendama ettevaatlik, kuid mulle meeldib see, mida nad siin teinud on.
13 loominguline
Kui teil on selgelt kujundatud saiti järgiv stiilselt kujundatud sait, võib vaikekujundusega vormi viskamine kogu teie teema terviklikkuse lahti keerata.
Selle asemel peate leidma tasakaalu oma vormipiirkonna eristumise ja saidi üldise teemaga vastavusse viimise vahel. Ma arvan, et allolev 13 loominguline vorm on selle tehnika täiuslik näide tegevuses.
Obama
Obama vorm kasutab sama tehnikat nagu ülaltoodud Avanti näide. Pange tähele, kui palju see punane nupp silma paistab muidu väga sinisel lehel. Seekord on nupu tekst selge üleskutse tegevusele “Lisateave”. Sõltumata sellest, kas te armastate või vihkate tema poliitikat, on kindlasti nii, et Obamal on seni olnud ükskõik millise Ameerika presidendi parim visuaalne kaubamärk - see trend on minu arvates seadnud standardi, mida jätkatakse ka tulevastel ametikohtade valdajatel.
Hankige Brewini
Sellel viimasel näitel on nii plusse kui miinuseid. Üldiselt on leht ülimalt atraktiivne. Tsentritesse viimise jaoks tundub see aga palju sisu, mis on üsna nõrk kõige enama kui mõne rea korral.
Siin on õppetund, et mõnikord on kõige raskem kujundada lihtsamaid projekte. Kui sisu on tonni, on teil palju tööd ja saate luua tugevaid, selgeid jooni. Natuke sisuga, mis ei lähe lehe täitmisele nii kaugele, peate sageli enne ideaalse lahenduse juurde jõudmist mõnda aega vaeva nägema.
Näidake meile oma!
Kõik ülaltoodud kahekümne registreerimisvormi näited võivad teile midagi õpetada, kuidas omaenda tõhusalt konstrueerida. Jätke allpool kommentaar koos lingiga mõnele teie loodud vormile. Milliseid tehnikaid kasutasite vormi tugevdamiseks nii visuaalselt kui ka funktsionaalselt?
