Van code tot canvas: Logto maakt inlogervaring ontwerpt open-source
We hebben de Figma-bronnen voor de inlogervaring openbaar gemaakt, inclusief uitgebreide authenticatiestroomontwerpen en veelzijdige stijlen en componenten.
Product & Design
Bij Logto geloven we in de kracht van samenwerking en transparantie. Daarom zijn we blij je te laten weten dat we ons inlogervaring-ontwerp in Figma open-source hebben gemaakt en beschikbaar hebben gesteld voor iedereen om te gebruiken. Om toegang te krijgen tot de Figma-bronnen:
Inlogervaring ontwerpbronnen catalogus
Dit ontwerp omvat twee hoofdcomponenten: de authenticatiestroom (inlogervaring) en de stijlen & componenten. Laten we elk in detail verkennen.
Authenticatiestroom
We hebben zorgvuldig verschillende combinaties van aanmeld-, inlog- en eerste sociale inlogscenario's voor zowel mobiele als pc-platformen samengesteld. Elk scenario wordt geleverd met de bijbehorende consoleconfiguratie, waardoor je een uitgebreid overzicht van de authenticatiestroom krijgt. Hier is een voorproefje van enkele van de scenario's:
| Aanmelden | Inloggen | Eerste sociale inloggen | |
|---|---|---|---|
| Gebruikersnaam | Gebruikersnaam + Wachtwoord | Gebruikersnaam + Wachtwoord | Sociale inlog + Stel gebruikersnaam in |
| E-mail (meest populair) | E-mail + Verificatiecode + Wachtwoord | E-mail + Wachtwoord | Sociale inlog + Koppel e-mail |
| Telefoonnummer | Telefoonnummer + Verificatiecode | Telefoonnummer + Verificatiecode | Sociale inlog + Koppel telefoonnummer |
| Gemengde e-mail en telefoon | E-mail/Telefoonnummer + Verificatiecode + Wachtwoord | E-mail/Telefoonnummer + Verificatiecode/Wachtwoord | Sociale inlog + Koppel e-mail/telefoonnummer |
| Alleen sociale inlog | / | / | Alleen sociale inlog |
| Wachtwoord vergeten | |
|---|---|
| Gemengde e-mail en telefoon | Reset wachtwoord door e-mail/telefoonnummer te verifiëren |
Stijlen & componenten
Ons ontwerp omvat ook een set eenvoudige en veelzijdige stijlen en componenten die het gemakkelijk maken om de algehele UI van je inlogervaring aan te passen. Hier is wat je zult vinden:
| Introductie | |
|---|---|
| Lettertype stijlen | We hebben de lettertypeclassificatie vereenvoudigd in categorieën zoals lichaams, label, titel en kop. Dezelfde lettertypestijlen worden gebruikt voor zowel mobiele als pc-platformen, wat zorgt voor consistentie en eenvoud. |
| Kleurstijlen | Met behulp van paletten en tokens kun je moeiteloos de themakleuren aanpassen om aan je merk te voldoen. Ons kleurenpalet is gegenereerd met Google Material Design en biedt zowel licht- als donkermodus, waardoor het gemakkelijk is voor je ontwerpers om te begrijpen. |
| Iconen | We hebben een samengestelde collectie functionele iconen opgenomen die een breed scala aan gebruiksscenario's dekken die direct kunnen worden gebruikt of gemakkelijk kunnen worden vervangen. Daarnaast bieden we verschillende sociale media-iconen die speciaal zijn ontworpen voor je sociale inlogknoppen. |
| Componenten | We hebben componenten georganiseerd voor zowel mobiele als webplatformen, waaronder Branding, Knop, Selectievakje, Dialoog, Navigatie, Toast, Tekstveld en Toetsenbord (Mobiel). |
Vereenvoudigde configuratie
Maar dat is niet alles! Met Logto kun je de gedetailleerde details hierboven overslaan en ons vertrouwen om een naadloze integratie-ervaring te leveren. In Logto Console kun je moeiteloos methodeconfiguraties verkennen en ze afstemmen op de UI van je merk. In een paar minuten heb je een aangepaste login- en registratie-ervaring die perfect aansluit bij je bedrijf.
Waarom hebben we ons Figma-ontwerp openbaar gemaakt?
Logto heeft altijd al de toezegging gehad om een open-source codeservice te bieden, maar je vraagt je misschien af waarom we ervoor hebben gekozen om deze openheid ook naar ons ontwerp uit te breiden.
Het begrijpen en configureren van de inlogervaring
We willen dat Logto niet alleen ontwikkelaarsvriendelijk is, maar ook de beste vriend van PM's en Ontwerpers. We geloven in het bevorderen van betere samenwerking gedurende het hele ontwikkelproces, wat leidt tot hoge efficiëntie, transparantie en vertrouwen.
- Uitgebreid begrip van Auth Flow: Hoewel je product mogelijk slechts een specifieke login- of registratiemethode gebruikt, wil je als ontwerper waarschijnlijk een holistisch beeld hebben. Deze kennis stelt je in staat de aanpak te bepalen die het beste bij je bedrijf past en de conversieratio's maximaliseert. De authenticatielogica mag geen vage entiteit zijn. Maar de matching tussen identificaties en authenticatiemethoden is geen eenvoudige N*N-relatie; het omvat verschillende beperkingen en productbeslissingen. Onze Figma zal hierbij helpen. Om hier meer over te leren, kun je het artikel lezen “De ontwerp overwegingen voor een naadloze inlogervaring”.
- Ontwerp direct je UI: Ontwerpers zijn gewend om volledige oplossingen in Figma te bieden. Als je project ontwerpers omvat, zal dit open-source ontwerp hen helpen snel de visuele identiteit van je merk te matchen.
Het versterken van Logto's ervaringen en diensten
Hoewel Logto zich inzet voor het leveren van een efficiënte Cloud Service, is het afkomstig uit de open-source gemeenschap en is het van plan om op de lange termijn openbaar transparant te blijven.
- Omarm de geest van open-source: We geloven dat de voordelen die voortkomen uit open-sourcing code ook kunnen worden toegepast op ontwerp. Door meer aandacht te vragen voor de gebruikerservaring door middel van openheid, gebruik en discussie binnen de open-source gemeenschap, kunnen we de authenticatie-ervaring continu verbeteren.
- Inzicht verschaffen in het langetermijn productontwerp: Hoewel onze inspanningen momenteel voornamelijk gericht zijn op het ontwikkelen van Authenticatie en Autorisatie mogelijkheden, is de inlogervaring die we bieden zeer uitbreidbaar en voldoet aan de meeste van je behoeften. Door open-source feedback en samenwerking hopen we de processen en visuele configuraties van SIE beter te integreren in onze producten, waardoor uiteindelijk de kosten van producties worden verlaagd.
Afsluitende opmerkingen
Terwijl we doorgaan met het itereren over het Logto-product, zullen we het Figma-ontwerp up-to-date houden. We hopen dat je Logto zult gebruiken om uitzonderlijke eerste stap ervaringen voor je producten te creëren en een blijvende indruk op je merk achter te laten.
We waarderen je ervaring en feedback, dus houd de communicatielijnen open. We kijken ernaar uit om van je te horen.