We hebben de Figma-bronnen voor de inlogervaring openbaar gemaakt, inclusief uitgebreide authenticatiestroomontwerpen en veelzijdige stijlen en componenten.
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:
Dit ontwerp omvat twee hoofdcomponenten: de authenticatiestroom (inlogervaring) en de stijlen & componenten. Laten we elk in detail verkennen.
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 |
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). |
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.
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.
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.
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.
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.