Masuk / Borang Pendaftaran Idea dan Contoh Cantik

Semua di seluruh web moden, kami melihat jumlah tempat yang semakin meningkat untuk input pengguna. Ini termasuk kereta belanja, permainan web interaktif, dan sebilangan besar bentuk pendaftaran laman web. Nampaknya bukan sahaja pereka harus memberi tumpuan kepada reka bentuk halaman tetapi bentuk estetika juga berperanan penting.

Pertimbangkan berapa banyak bentuk yang mungkin anda isi sepanjang perjalanan sejarah Internet anda. Terdapat banyak contoh dari forum, papan mesej, blog, dan banyak lagi. Dalam artikel ini kita akan melihat beberapa helah hebat untuk mereka bentuk borang dalam halaman anda.

Adalah bijak untuk mempertimbangkan beberapa perkara di sini dari perspektif objektif. Walaupun banyak borang login dan pendaftaran berfungsi dengan baik dengan satu jenis laman web, tidak ada panggilan penghakiman terakhir mengenai apa itu “terbaik” penyelesaian. Gunakan intuisi reka bentuk anda untuk memohon bit dan kepingan dari bentuk yang anda bercita-cita.

Pertimbangkan Input Berbilang

Untuk memulakan perkara, pertimbangkan satu bentuk hubungan kecil dari Foundation Six Web Design. Ya, ini bukan borang login supaya ia boleh mengarahkan sedikit topik. Walau bagaimanapun, reka bentuk halaman mereka sangat mengagumkan dan ia menunjukkan kepada anda apa yang dapat dicapai oleh kreativiti sedikit.

Setiap medan input menawarkan ruang bagi anda untuk menaip maklumat hubungan peribadi - nama, e-mel, dan lain-lain. Gaya jauh melebihi biasa, menawarkan input pengguna dalam jenis kaligrafi tulisan tangan. Pemformatan jenis ini akan memastikan pengguna anda menjadi tertanya-tanya dan mencapai matlamat piawaian reka bentuk yang lebih tinggi.

Anda akan mahu melaksanakan gaya seperti ini sama dengan semua halaman log masuk anda. Saya pasti tidak akan mengesyorkan melekat dengan gaya teks input dan menu pilihan / pilih yang sama. Apabila joging otak anda untuk kreativiti, pertimbangkan bagaimana setiap elemen perlu disediakan: banyak ruang antara lapisan, teks mudah dibaca yang besar, dan juga pautan sidebar ke talian e-mel langsung mereka.

Peti Masuk jQuery

Ini telah digunakan pada laman web yang tidak terkira masa lalu dan pastinya akan kelihatan dalam reka bentuk zaman baru. Lama berlalu adalah hari-hari di mana amalan piawai akan membawa pengguna ke halaman baru untuk setiap langkah proses log masuk. Biasanya ini bermakna halaman untuk memasukkan data anda dan juga halaman baru untuk memproses maklumat login.

Pixel2Life menawarkan beberapa pandangan hebat dalam bidang input data baru. Dari laman web mereka, anda boleh mengklik pautan masuk dan memaparkan kotak masuk jQuery berkuasa dinamik. Borang ini mengandungi panggilan Ajax kepada skrip PHP luaran yang memeriksa kredensial maklumat log masuk anda dan, sekali diproses, sama ada pemberian atau menafikan akses.

Melangkah lagi langkah yang bijak mungkin dapat melihat pautan pendaftaran langsung di bawah kotak masuk. Ini menawarkan pengalaman pengguna yang lebih lancar bagi mereka yang ingin mendaftar untuk laman web tetapi tidak dapat mencari pautan pendaftaran.

Jika pengguna tidak mempunyai akaun tetapi ingin membuatnya, ini membawa mereka ke halaman pendaftaran tanpa sebarang gangguan halaman kereta. Kotak masuk masih boleh menjadi pilihan untuk mengakses akaun anda sendiri, namun membenarkan pilihan memberi laluan untuk pulangan yang lebih besar dan jumlah pendaftar baru yang lebih tinggi.

Pendaftaran Suatu Halaman Mudah

Satu lagi paradigma peralihan yang kita lihat adalah kekurangan terperinci untuk pendaftaran akaun baru. Ini tidak semestinya statistik buruk dengan mengandaikan pengguna semakin tidak sabar-sabar untuk mengisi data. Angka-angka sebenarnya mencadangkan laman web dengan halaman pendaftaran yang lebih singkat lebih berat senarai pengguna baru setiap hari.

Sikbox menawarkan pilihan yang ringan untuk pelawat untuk membuat kotak carian mereka sendiri untuk laman web. Satu-satunya keperluan adalah domain peribadi anda sendiri yang menyediakan hasil carian untuk. Bidang input adalah besar, teks sangat mudah dibaca dan ada sama sekali tidak ada iklan untuk mengganggu pengguna daripada tugas membina borang carian mereka!

Sekarang ini bukan bentuk terbaik untuk membina apabila membuat halaman pendaftaran anda sendiri untuk forum atau arkib blog. Ini akan, mengikut definisi standard, sekurang-kurangnya memerlukan beberapa jenis alamat e-mel / kombinasi nama pengguna bersama dengan kata laluan. Sesetengah aplikasi web umur baru akan menghasilkan kata laluan dinamik untuk pengguna hanya untuk membuat proses pendaftaran lebih cepat.

Sudah tentu, perdagangan di sini tidak mempunyai kawalan ke atas pengguna untuk menghasilkan kata laluan mereka sendiri yang banyak orang biasa.

Bangun Kesan Flashy

Salah satu pengalaman pendaftaran hebat yang pernah saya buat ialah membuat akaun Tumblr pertama saya. Halaman rumah laman web mereka menawarkan kedua-dua bentuk log masuk dan pendaftaran yang diletakkan di bawah satu sama lain dengan kesan sorotan / pudar CSS3 baharu.

Pendekatan sistematik ini sama dengan kawasan login jQuery Pixel2Life. Walau bagaimanapun, perbezaan dengan Tumblr adalah rangkaian tidak boleh menawarkan apa-apa kandungan kepada mereka tanpa blog (selain dari melayari akaun lain). Manfaat yang sesungguhnya dari tumblr adalah membuat blog anda sendiri dan menyusul orang lain - maka tujuan utamanya di halaman depan sama ada untuk membuat akun atau log masuk.

Terdapat beberapa bug dengan sistem ini. Terutama dalam IE6 / IE7 tidak menyokong sifat-sifat CSS baru ini. Juga digunakan di laman utama adalah sistem untuk menambahkan unsur-unsur label ke dalam bentuk input - pada asasnya mengatasi “lalai” aksara yang digunakan untuk peti e-mel / kata laluan.

Label ini memudaratkan fokus pada penyemak imbas moden seperti Chrome / Firefox. Tetapi tidak ada nasib semacam itu dengan pelayar yang tidak lama lagi yang, seperti yang anda bayangkan, agak menjengkelkan cuba membaca semula input anda sendiri!

20+ Contoh Reka Bentuk Cantik

Berikut adalah galeri pusingan cepat beberapa reka bentuk bentuk log masuk yang hebat. Ini telah dipilih dari seluruh web dan termasuk pelbagai jenis aplikasi web. Sekiranya anda mempunyai cadangan untuk laman web lain, sila rujuk bahagian komen di bawah!

Berita Snoggle

Robo.to

Virb

Grooveshark

Storenvy

Dropbox

Idea Green Globe

Buku baru

Terkini

MailChimp

Kem

TestFlight

AwesomeJS

Membuka kunci

PopScreen

Gowalla

Kontain

MobileMe

Laterthis

Pelancaran

Theidealist