10 Ücretsiz CSS ve JavaScript Başlangıç ​​Kullanıcı Arayüzleri

Yerleştirmenin amacı, yeni kullanıcıları bir arayüzle tanıştırmaktır. Bu, birçok farklı stilde gelir ve bunu yapmanın doğru bir yolu yoktur. Ancak sitelerin ve uygulamaların ilk katılım sürecini nasıl gerçekleştirdiğini incelerseniz, kendi işiniz için fikirler edinebilirsiniz.

Ve bu ücretsiz CSS ve JavaScript yerleşik kullanıcı arayüzleriyle, başlamanıza yardımcı olacak hem ilham hem de kod parçacıkları sunan birçok fikre sahip olacaksınız.

1. Döner Kaydıraklar

Döner karusel, ekran alanının sınırlı olduğu mobil cihazlarda oldukça popülerdir. Ancak bu etki, bilgileri hızlı bir şekilde almanız gereken web sitelerinde de işe yarayabilir.

Ne demek istediğimi anlamak için Nick Wanninger tarafından oluşturulan bu atlıkarınca slayt demosuna göz atın.

Flickity ve bazı temel CSS kodları kullanılarak oluşturulmuş tamamen ücretsiz bir işe alım örneğidir. Bu, hem mobil hem de masaüstü için çalışır, bu nedenle duyarlı bir çözüme ihtiyacınız varsa mükemmel bir seçimdir.

2. Günlük Kullanıcı Arayüzü Tepki Ver

Basit bir uygulama tasarımı olarak Jack Oliver, bu React Daily UI kalemini sıfırdan yarattı. Ve gördüğüm en şık işe alım deneyimlerinden biri.

Arayüz, pratik, gerçek dünya kullanımı için tasarlanmadığından sahte metinlere sahiptir, ancak çok temizdir ve sayfaya hemen hemen her şeyi sığdırmak için yeterli alan bırakmalıdır.

Unutulmaması gereken bir şey, bunu mobil cihazlarda kaydırma ile çalıştıramadım ve şu anda yalnızca dokunuşları tanıyor gibi görünüyor. Ancak yalnızca tıklama çözümü için gerçekten güzel.

3. Başlangıç ​​Ekranları

Bu kalem, yalnızca alıştırma için inanılmaz bir arayüze sahip olmakla kalmaz, aynı zamanda önyükleme için özel animasyonlara da sahiptir.

Geliştirici Jeff Ham, bir arayüzde kendi yolunu biliyor ve bu kusursuz işe alım ekranını yarattı. "Sonraki ekran" animasyonlarını ve kullanıcı tıklamaları/dokunmaları için geçiş olaylarını oluşturmak için JavaScript'e dayanır.

Bu arayüze güzel bir ek, alttaki mavi sonraki düğmedir. Bu, kullanıcının düz görünümde büyük bir CTA ile ekran ekran ilerlemesini sağlar. Bahse girerim bu, dönüşüm gerçekleştiren toplam insan sayısını artıracak ve genel olarak deneyimin kalitesini iyileştirecektir.

4. Boardal

Bu Boardal pasajı, sık sık gördüğünüz bir şey olmadığı için oldukça benzersizdir.

Kullanıcıların siteden daha hızlı geçmesine yardımcı olmak için işe alım içeriğine sahip kalıcı bir pencere kullanır. Yalnızca test için oluşturulmuş özel bir tasarımdır ve işe alım sürecini iyileştirmenin en havalı yollarından biridir.

Bunun en iyi şekilde masaüstünde işe yaradığını unutmayın, çünkü mod etkisine dayanır (küçük ekranlar için ideal değildir).

Bu nedenle, tasarımı beğendiyseniz ve sitenizin katılımını iyileştirmenin kolay bir yolunu istiyorsanız, Boardal'a bir şans verin.

5. Rehberli Tur

Tipik olarak, kullanıcıya yeni sayfalar ve özellikler tanıtan adım adım bir süreç olarak kabul edilir. Ama ben şahsen rehberli turları çok daha faydalı buluyorum.

Başlamak için basit bir pasaj istiyorsanız, bu rehberli tur mükemmel. Bootstrap bileşenlerine dayanır ve turu ilerletmek için "ileri" düğmeleriyle küçük araç ipuçlarını kullanır.

Kullanıcı, rahatsız olursa veya artık umursamazsa turu istediği zaman kapatabilir. Bu, onu isteğe bağlı bir tur haline getirir, bu nedenle süreçten daha az insan rahatsız olur.

Genel olarak, bu benim tercih ettiğim işe alım yöntemidir, ancak kurulumu biraz daha fazla çaba gerektirir. Ancak bu demo en azından size başlamanız için bir şablon sunuyor.

6. Malzeme Turu

Alternatif bir tur yöntemi, belirli özellikleri vurgulayan otomatik ilerleyen turdur.

Bulduğum en iyi örnek Gregor Adams tarafından yapılmış bu kalem. Materyal yönergelerine dayanır ve sayfanın bölümlerini sergilemek için vurgulanmış daireler kullanır. Bu teknik, çok sayıda özelliğe sahip çok karmaşık arayüzleriniz varsa mükemmeldir.

Tüm sayfayı karartarak, her seferinde bir alana odaklanmış olursunuz. Bu, kullanıcının dikkatini hemen çeker, bu da tam olarak iyi bir başlangıç ​​için yapmanız gereken şeydir.

Bunun tüm web sitelerine uymayacağını biliyorum, ancak arayüzü beğendiyseniz denemenizi şiddetle tavsiye ederim.

7. Android Uygulamasına Giriş

Mobil uygulamalar genellikle işe alım sürecine web sitelerinden daha fazla ihtiyaç duyar. Mobil UI tasarımcılarının, daha küçük ekrana özellikleri tıkıştırması yaygın bir durumdur ve bu, kullanıcıları rehberli bir giriş olmadan bunaltabilir.

Mat Swainson tarafından hazırlanan bu alıştırma kılavuzu, akıllı telefon uygulamaları için neler yapılabileceğinin küçük ama anlamlı bir örneğidir.

Bir Android modeline dayanmaktadır, ancak kesinlikle kullanabileceğiniz tek stil bu değildir. Mobil web tarayıcılarında bile çalışan yerel kaydırmayı desteklemesini seviyorum.

Ayrıca, üst kısımdaki küçük ilerleme göstergesi hoş bir dokunuş. Kesinlikle basit bir işe alım sayfası, ancak ilham arıyorsanız kaydetmeye değer.

8. İyonik Giriş

Ionic ile yapabileceğiniz çok şey var ve bu kalem harika bir örnek.

Geliştirici Clifford Fajardo, yalnızca JavaScript çerçevesinde çalışan yerleşik bir Ionic giriş oluşturdu. Dokunma, kaydırma gibi tüm mobil etkileşimleri destekler ve hatta bu özelliği istiyorsanız çift dokunma seçeneklerini destekler.

Ionic, öncelikle mobil geliştirme için kullanılır ve mobil web siteleri için de gerçekten iyi çalışır. Bu başlangıç ​​ekranının her web sitesine uyacağını söyleyemem, ancak hedef kitlenizin %50'den fazlası mobil cihazlardan geliyorsa, bu sağlam bir seçimdir.

9. Dikey Form

Hafif bir jöle UI animasyonu ve gerçekten basit bir tasarımla, bu dikey form benzersiz bir zevktir.

Bazı özel JavaScript ve CSS animasyonları ile birlikte CSS esnek özelliklerini tam etki olarak kullanır. Verilmiş, içeriği biraz zayıf buluyorum, bu yüzden ayrıntılı işe alım yolunda pek bir şey sunmuyor.

Ancak, bu arayüzü alıp çok fazla çaba harcamadan gerçekten kendinize ait hale getirebilirsiniz, bu yüzden hayal gücüne çok şey bırakıyor.

10. Rehberli Tur İpucu

İşte bir rehberli tur örneği daha, ancak bu, sayfada sabitlenmiş tam bir araç ipucu kutusu kullanıyor.

Snippet'i kontrol ederseniz, belirli bir arayüzde yerleşik olmadığını görürsünüz. Bunun yerine, kullanıcı için tavsiye ve ilerleme adımları içeren, yalnızca kayan bir araç ipucudur.

Bu kullanıcı arayüzünü bazı sabit araç ipucu konumlandırma komut dosyasıyla birleştirmek, bu şeyi tüm önemli özelliklerinizi gösteren araç ipuçlarıyla arabiriminizde kolayca taşımanıza olanak tanır. Bu şablonun çalışması için bazı gerçek özelleştirmeler gerekecek, ancak basit bir kullanıcı arayüzü için güzel.