Türkçe
  • tasarım
  • açık kaynak
  • kimlik doğrulama
  • kimlik
  • ürün
  • figma

Koddandan tuvale: Logto, giriş yapma deneyimi tasarımını açık kaynak yapıyor

Giriş yapma deneyimi Figma kaynaklarını kamuya açtık; kapsamlı kimlik doğrulama akışı tasarımları ve çok yönlü stiller ve bileşenler dahil olmak üzere.

Ran
Ran
Product & Design

Logto'da, iş birliklerinin ve şeffaflığın gücüne inanıyoruz. Bu yüzden, Figma'daki giriş yapma deneyimi tasarımımızı açık kaynak yaptığımızı ve herkesin kullanımına sunduğumuzu bildirmekten mutluyuz. Figma kaynaklarına erişmek için:

Giriş yapma deneyimi tasarım kaynak kataloğu

Bu tasarım iki ana bileşenden oluşur: kimlik doğrulama akışı (giriş yapma deneyimi) ve stiller & bileşenler. Gelin, her birini ayrıntılı olarak inceleyelim.

Kimlik doğrulama akışı

Mobil ve PC platformları için çeşitli kayıt olma, giriş yapma ve ilk sosyal giriş yapma senaryolarını titizlikle hazırladık. Her senaryo, kimlik doğrulama akışının kapsamlı bir genel görünümünü sağlamak için ilgili konsol yapılandırması ile birlikte gelir. İşte bazı senaryolardan bir ön izleme:

Kayıt olmaGiriş yapmaİlk sosyal giriş yapma
Kullanıcı adıKullanıcı adı + ŞifreKullanıcı adı + ŞifreSosyal giriş yapma + Kullanıcı adı ayarla
Email (en popüler)Email + Doğrulama kodu + ŞifreEmail + ŞifreSosyal giriş yapma + Email bağla
Telefon numarasıTelefon numarası + Doğrulama koduTelefon numarası + Doğrulama koduSosyal giriş yapma + Telefon numarası bağla
Karışık email ve telefonEmail/Telefon numarası + Doğrulama kodu + ŞifreEmail/Telefon numarası + Doğrulama kodu/ŞifreSosyal giriş yapma + Email/Telefon numarası bağla
Sadece sosyal giriş yapma//Sadece sosyal giriş yapma
Şifreyi unut
Karışık email ve telefonEmail/telefon numarasını doğrulatarak şifreyi sıfırla

Kimlik doğrulama akışı tasarımı

Stiller & bileşenler

Tasarımımız ayrıca, giriş yapma deneyiminizin genel kullanıcı arayüzünü kolayca özelleştirmenizi sağlayan basit ve çok yönlü bir stil ve bileşen seti içerir. İşte bulacaklarınız:

Giriş
Font stilleriFont sınıflandırmasını gövde, etiket, başlık ve manşet kategorilerine ayırdık. Hem mobil hem de PC platformları için aynı font stilleri kullanılarak tutarlılık ve kullanım kolaylığı sağlanmıştır.
Renk stilleriPaletler ve belirteçlerden yararlanarak tema renklerini markanıza uygun şekilde kolayca değiştirebilirsiniz. Renk paletimiz, Google Material Design kullanılarak oluşturulmuştur ve hem aydınlık mod hem de karanlık mod sunar; tasarımcılarınızın anlamasını sağlar.
SimgelerDoğrudan kullanılabilecek veya kolayca değiştirilebilecek birçok kullanım durumunu kapsayan işlevsel ikonlardan oluşan bir koleksiyon da ekledik. Ayrıca, sosyal giriş yapma butonlarınız için özel olarak tasarlanmış çeşitli sosyal medya simgeleri sağlıyoruz.
BileşenlerMobil ve web platformları için Markalama, Buton, Onay kutusu, Diyalog, Navigasyon, Bildirim, Metin Alanı ve Klavye (Mobil) dahil olmak üzere bileşenleri düzenledik.

Stiller ve bileşenler

Basitleştirilmiş yapılandırma

Ama hepsi bu kadar değil! Logto ile yukarıdaki ayrıntılara takılmadan sorunsuz bir entegrasyon deneyimi sunmamıza güvenebilirsiniz. Logto Console'da yöntem yapılandırmalarını keşfederek onları markanızın kullanıcı arayüzüne uyumlu hale getirebilirsiniz. Dakikalar içinde, işletmenize mükemmel uyum sağlayan özelleştirilmiş bir giriş ve kayıt deneyimi elde edeceksiniz.

Logto Cloud konsolu

Neden Figma tasarımımızı kamuya açtık?

Logto her zaman açık kaynak kod hizmeti sağlamaya kararlı olmuştur, ancak neden bu açıklığı tasarımımıza da genişletmeye karar verdiğimizi merak ediyor olabilirsiniz.

Giriş yapma deneyimini anlama ve yapılandırma

Logto'nun sadece geliştirici dostu değil, aynı zamanda PM'lerin ve Tasarımcıların en iyi arkadaşı olmasını istiyoruz. Tüm geliştirme süreci boyunca daha iyi iş birliğini teşvik etmeye inanıyoruz, bu da yüksek verimlilik, şeffaflık ve güven sağlar.

  • Kimlik Akışının Kapsamlı Anlaşılması: Ürününüz yalnızca belirli bir giriş veya kayıt yöntemini kullanabilir ama bir tasarımcı olarak bütüncül bir bakış açısına sahip olmayı istemek zorundasınız. Bu bilgi size işinize en uygun yaklaşımı belirlemenizi ve dönüşüm oranlarını en üst düzeye çıkarmanızı sağlar. Kimlik doğrulama mantığı belirsiz bir varlık olmamalıdır. Ancak kimlik belirleyicileri ve kimlik doğrulama yöntemleri arasında eşleme basit bir N*N ilişkisi değildir; çeşitli sınırlamalar ve ürün kararlarını içerir. Figma'mız size yardım edecektir. Bu konuda daha fazla bilgi edinmek için “Sorunsuz bir giriş yapma deneyimi tasarımı için dikkate alınması gerekenler” makalesine başvurabilirsiniz.
  • Arayüzünü Doğrudan Tasarlayın: Tasarımcılar, Figma'da eksiksiz çözümler sunmaya alışıktır. Projeniz tasarımcıları içeriyorsa, bu açık kaynak tasarımı markanızın görsel kimliğine hızlı bir şekilde uyum sağlamak için onlara yardımcı olacaktır.

Logto'nun deneyimlerini ve hizmetlerini güçlendirme

Logto, verimli Bulut Hizmeti sağlamaya kararlı olsa da açık kaynak topluluğundan ortaya çıkmıştır ve uzun vadede kamuya açık ve şeffaf kalmayı amaçlamaktadır.

  • Açık kaynağın ruhunu kucaklama: Açık kaynak kodlama ile elde edilen faydaların tasarıma da uygulanabileceğine inanıyoruz. Açıklık, kullanım ve açık kaynak topluluğu içinde tartışma yoluyla kullanıcı deneyimine daha fazla dikkat çekerek, kimlik doğrulama deneyimini sürekli olarak geliştirebiliriz.
  • Daha uzun vadeli üretim tasarımına dair içgörüler sunma: Her ne kadar çabalarımızın çoğu şu anda Kimlik Doğrulama ve Yetkilendirme yetenekleri geliştirmeye odaklansa da, sunduğumuz giriş yapma deneyimi oldukça genişletilebilir ve ihtiyaçlarınızın çoğuna hitap eder. Açık kaynak geri bildirimi ve iş birliği yoluyla, SIE'nin süreçlerini ve görsel yapılandırmalarını ürünlerimize daha iyi entegre edebilmeyi ve ürünü ticarileştirme maliyetini düşürmeyi umuyoruz.

Kapanış notları

Logto ürününü geliştirmeye devam ettikçe, Figma tasarımını güncel tutacağız. Logto'yu, ürünleriniz için mükemmel ilk adım deneyimleri oluşturmak ve markanız üzerinde kalıcı bir izlenim bırakmak için kullanacağınızı umuyoruz.

Deneyiminize ve geri bildiriminize değer veriyoruz, bu yüzden iletişim kanallarını açık tutun. Sizden haber almayı bekliyoruz.