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.
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 olma | Giriş yapma | İlk sosyal giriş yapma | |
|---|---|---|---|
| Kullanıcı adı | Kullanıcı adı + Şifre | Kullanıcı adı + Şifre | Sosyal giriş yapma + Kullanıcı adı ayarla |
| Email (en popüler) | Email + Doğrulama kodu + Şifre | Email + Şifre | Sosyal giriş yapma + Email bağla |
| Telefon numarası | Telefon numarası + Doğrulama kodu | Telefon numarası + Doğrulama kodu | Sosyal giriş yapma + Telefon numarası bağla |
| Karışık email ve telefon | Email/Telefon numarası + Doğrulama kodu + Şifre | Email/Telefon numarası + Doğrulama kodu/Şifre | Sosyal giriş yapma + Email/Telefon numarası bağla |
| Sadece sosyal giriş yapma | / | / | Sadece sosyal giriş yapma |
| Şifreyi unut | |
|---|---|
| Karışık email ve telefon | Email/telefon numarasını doğrulatarak şifreyi sıfırla |
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 stilleri | Font 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 stilleri | Paletler 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. |
| Simgeler | Doğ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şenler | Mobil ve web platformları için Markalama, Buton, Onay kutusu, Diyalog, Navigasyon, Bildirim, Metin Alanı ve Klavye (Mobil) dahil olmak üzere bileşenleri düzenledik. |
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.
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.