Anasayfa » Web Tasarımı » Giriş / Kayıt Formu Fikirler ve Güzel Örnekler

    Giriş / Kayıt Formu Fikirler ve Güzel Örnekler

    Modern web genelinde, kullanıcı girişi için artan miktarda yer görüyoruz. Bu alışveriş sepetlerini, etkileşimli web oyunlarını ve kesinlikle web sitesi kayıt formlarını içerir. Tasarımcılar sadece sayfa tasarımına odaklanmalı, aynı zamanda estetik formları da aynı derecede hayati öneme sahip görünüyor..

    İnternet geçmişiniz boyunca kaç tane form doldurmuş olabileceğinizi düşünün. Bunlara forumlardan, mesaj panolarından, bloglardan ve daha pek çoğundan sayısız örnek var. Bu yazıda, sayfa içi formlarınızı tasarlamak için bazı harika püf noktalarına göz atacağız..

    Buradaki bazı maddeleri objektif bir bakış açısıyla düşünmek akıllıca olacaktır. Birçok giriş ve kayıt formu bir tür site ile iyi çalışsa da, bunun ne olduğuna dair kesin bir kesinti yoktur. “en iyi” çözüm. İstediğiniz formlardaki bit ve parçaları uygulamak için tasarım sezginizi kullanın.

    Birden Çok Girdiyi Düşünün

    İşleri başlatmak için Foundation Six Web Design'dan küçük bir iletişim formu düşünün. Evet, bu bir giriş formu değildir, bu yüzden konuyu biraz yönlendirebilir. Bununla birlikte, sayfa tasarımları çok etkileyicidir ve size küçük bir yaratıcılığın neler başarabileceğini gösterir..

    Giriş alanlarının her biri, kişisel iletişim bilgilerinizi (ad, e-posta, vb.) Yazmanız için yer sunar. Stiller, sıradan çok ötesine geçerek, kullanıcı el yazısı bir hat türünde kullanıcı girişi sunar. Bu tür bir biçimlendirme, kullanıcılarınızı merak içinde tutar ve daha yüksek tasarım standartları hedefine ulaşır.

    Tüm giriş sayfalarınıza benzer stiller uygulamak istersiniz. Kesinlikle aynı giriş tarzı ve seçenek / seçim menüleri ile yapışmasını tavsiye etmem. Beyninizi yaratıcılık için jogging yaparken, her bir öğenin nasıl yerleştirileceğini göz önünde bulundurun: katmanlar arasında bol miktarda boşluk, kolayca okunabilen büyük metin ve hatta doğrudan e-posta satırlarına kenar çubuğu bağlantıları.

    jQuery Giriş Kutuları

    Bu geçmişte sayısız web sitesinde kullanılmış ve kesinlikle yeni çağ tasarımlarında görülecektir. Uzun süredir standart uygulamaların, kullanıcıları oturum açma işleminin her adımı için yeni bir sayfaya getireceği günler. Normalde bu, verilerinizi girmek için bir sayfa ve ayrıca giriş bilgilerini işlemek için yeni bir sayfa anlamına gelir..

    Pixel2Life yeni bir veri girişi alanı hakkında harika bilgiler sunuyor. Ana sayfalarından giriş bağlantısını tıklayabilir ve dinamik bir jQuery destekli giriş kutusu açabilirsiniz. Bu form, giriş bilgilerinizin kimlik bilgilerini kontrol eden ve işlendikten sonra ya erişim izni verir veya reddeder harici bir PHP betiğine bir Ajax çağrısı içerir.

    Başka bir adım daha ileri gitmek, astute doğrudan giriş kutusunun altında bir kayıt bağlantısı görebilir. Bu, web sitesine kaydolmak, ancak kayıt bağlantısını bulamamak isteyenler için daha yumuşak bir kullanıcı deneyimi sunar..

    Bir kullanıcının bir hesabı yoksa ancak bir tane yapmak isterse, bu onları herhangi bir adamcağız sayfa aksaklığı olmadan kayıt sayfasına getirir. Giriş kutusu, kendi hesabınıza erişmek için hala uygun bir seçenek olabilir, ancak seçeneğin daha fazla getiri ve daha yüksek miktarda yeni tescil ettiren için yol açmasını sağlar.

    Basit Bir Sayfalık Kayıtlar

    Gördüğümüz diğer bir kayma paradigması, yeni hesap kayıtları için bu kadar detaylı olmamak. Bu, kullanıcıların verilerin doldurulmasına karşı sabırsız olduklarını varsayarsak, fena bir istatistik değildir. Rakamlar aslında daha kısa kayıt sayfalarına sahip web siteleri olduğunu gösteriyor daha ağır günlük olarak yeni kullanıcıların listeleri.

    Sikbox ziyaretçilere bir web sitesi için kendi arama kutularını oluşturmalarında hafif bir seçenek sunar. Tek gereksinim, arama sonuçları sağlayan kendi özel etki alanınızdır. Giriş alanları büyük, metinlerin okunması çok kolay ve kesinlikle reklam yok kullanıcıları arama formlarını oluşturma görevinden uzaklaştırmak!

    Şimdi bu, bir forum veya blog arşivi için kendi kayıt sayfanızı oluştururken oluşturulacak en iyi form değil. Bunlar, standart tanımı gereği, en azından bir parola ile birlikte bir tür e-posta adresi / kullanıcı adı birleşimi gerektirecektir. Bazı yeni çağda web uygulamaları sadece kayıt işlemini daha hızlı yapmak için kullanıcılar için dinamik şifreler oluşturur.

    Tabii ki, buradaki takas, birçok insanın alışkın olduğu kendi şifresini yaratması için kullanıcının sonundaki kontrolden yoksun.

    Gösterişli Efektler Oluştur

    Şimdiye kadar yaşadığınız en büyük kayıt deneyimlerinden biri ilk Tumblr hesabımı oluşturmaktı. Sitelerinin giriş sayfası, yeni CSS3 vurgulama / solma efektleriyle doğrudan birbirinin altına yerleştirilen bir giriş ve kayıt formu sunar.

    Bu sistematik yaklaşım Pixel2Life'ın jQuery giriş alanına benzer. Ancak, Tumblr’daki fark, ağın blog içermeyenlere (başkalarının hesaplarına göz atmanın dışında) herhangi bir içerik sunamamasıdır. Tumblr'ın asıl yararı, kendi blogunuzu oluşturmak ve diğerlerini takip etmek - bu nedenle ön sayfadaki ana hedefiniz bir hesap oluşturmak veya giriş yapmak..

    Bu sistemle ilgili bazı hatalar var. En önemlisi IE6 / IE7’de bu yeni CSS özelliklerini desteklemiyor olmak. Ayrıca ana sayfada etiket elemanlarını girdi değerlerine eklemek için kullanılan bir sistemdir - temelde “varsayılan” e-posta / şifre kutuları için kullanılan karakterler.

    Bu etiketler, Chrome / Firefox gibi modern tarayıcılarda odakta kayboluyor. Ancak, hayal edebileceğiniz gibi, kendi girişinizi tekrar okumaya can sıkıcı olan, kullanım dışı tarayıcılarda böyle bir şans yok!

    20+ Güzel Form Tasarımından Örnekler

    Aşağıda, bazı harika giriş formu tasarımlarının hızlı bir genel galerisi bulunmaktadır. Bunlar web'den toplanmış ve çok sayıda web uygulaması biçimi içermektedir. Diğer siteler için önerileriniz varsa, bunları aşağıdaki yorum bölümünde paylaşmaktan çekinmeyin!

    Snoggle Haberleri

    Robo.to

    virB

    Grooveshark

    Storenvy

    Dropbox

    Yeşil Küre Fikirleri

    Freshbooks

    ThemeForest

    MailChimp

    BaseCamp

    Test uçuşu

    AwesomeJS

    Kilit açma

    PopScreen

    Gowalla

    Kontain

    MobileMe

    Laterthis

    Launchlist

    Theidealist