Från kod till duk: Logto gör designen av inloggningsupplevelsen open-source
Vi har publicerat Figma-resurserna för inloggningsupplevelsen till allmänheten, inklusive omfattande autentiseringsflödesdesigner och mångsidiga stilar och komponenter.
Product & Design
På Logto tror vi på kraften i samarbete och transparens. Därför är vi glada att meddela att vi har gjort vår inloggningsupplevelsedesign i Figma open-source och tillgänglig för alla att använda. För att komma åt Figma-resurserna:
Katalog över designresurser för inloggningsupplevelse
Denna design inkluderar två huvudkomponenter: autentiseringsflödet (inloggningsupplevelse) och stilar & komponenter. Låt oss utforska varje komponent i detalj.
Autentiseringsflöde
Vi har noggrant utformat olika kombinationer av registrering, inloggning och första sociala inloggningsscenarier för både mobila och PC-plattformar. Varje scenario kommer med sin motsvarande konsolkonfiguration, vilket ger dig en omfattande översikt över autentiseringsflödet. Här är en förhandsvisning av några av scenarierna:
| Registrering | Inloggning | Första sociala inloggning | |
|---|---|---|---|
| Användarnamn | Användarnamn + Lösenord | Användarnamn + Lösenord | Social inloggning + Ange användarnamn |
| E-post (mest populärt) | E-post + Verifikationskod + Lösenord | E-post + Lösenord | Social inloggning + Länka e-post |
| Telefonnummer | Telefonnummer + Verifikationskod | Telefonnummer + Verifikationskod | Social inloggning + Länka telefonnummer |
| Blandad e-post och telefon | E-post/Telefonnummer + Verifikationskod + Lösenord | E-post/Telefonnummer + Verifikationskod/Lösenord | Social inloggning + Länka e-post/telefonnummer |
| Endast social inloggning | / | / | Endast social inloggning |
| Glömt lösenord | |
|---|---|
| Blandad e-post och telefon | Återställ lösenord genom att verifiera e-post/telefonnummer |
Stilar & komponenter
Vår design innehåller även ett set med enkla och mångsidiga stilar och komponenter som gör det enkelt för dig att anpassa det övergripande UI:et för din inloggningsupplevelse. Här är vad du hittar:
| Introduktion | |
|---|---|
| Typsnittsstilar | Vi har förenklat klassificeringen av typsnitt till kategorier som kroppstext, etikett, titel och rubrik. Samma typsnitt används för både mobila och PC-plattformar, vilket säkerställer konsistens och enkel användning. |
| Färgstilar | Med hjälp av paletter och tokens kan du enkelt ändra temafärgerna för att matcha ditt varumärke. Vår färgpalett genereras med hjälp av Google Material Design och erbjuder både ljusläges- och mörkerlägesalternativ, vilket gör det enkelt för dina designers att förstå. |
| Ikoner | Vi har inkluderat en utvald samling av funktionella ikoner som täcker en rad användningsfall som kan användas direkt eller enkelt bytas ut. Dessutom erbjuder vi olika sociala medieikoner specifikt designade för dina sociala inloggningsknappar. |
| Komponenter | Vi har organiserat komponenter för både mobila och webbplattformar, inklusive Branding, Knapp, Kryssruta, Dialog, Navigering, Toast, Textfält och Tangentbord (Mobilt). |
Förenklad konfiguration
Men det är inte allt! Med Logto kan du hoppa över de små detaljerna ovan och lita på att vi levererar en sömlös integrationsupplevelse. I Logto Console kan du enkelt utforska metodkonfigurationer och matcha dem med ditt varumärkes UI. På några minuter har du en anpassad inloggnings- och registreringsupplevelse som perfekt ligger i linje med ditt företag.
Varför gjorde vi vår Figma-design offentlig?
Logto har alltid varit engagerade i att tillhandahålla en öppen källkodstjänst, men du kanske undrar varför vi beslutade att utöka denna öppenhet till vår design också.
Förstå och konfigurera inloggningsupplevelsen
Vi vill att Logto ska vara inte bara utvecklarvänligt utan även fungera som PMs och Designers bästa vän. Vi tror på att främja bättre samarbete genom hela utvecklingsprocessen, vilket leder till hög effektivitet, transparens och tillit.
- Omfattande förståelse för Autentiseringsflöde: Även om din produkt kanske bara använder en specifik inloggnings- eller registreringsmetod, som designer vill du ha en helhetsöversikt. Denna kunskap gör det möjligt för dig att avgöra vilket tillvägagångssätt som bäst passar ditt företag och maximerar konverteringsfrekvenserna. Autentiseringslogiken bör inte vara en tvetydig entitet. Men matchning mellan identifierare och autentiseringsmetoder är inte en enkel N*N-relation; det involverar olika begränsningar och produktbeslut. Vår Figma kommer att hjälpa dig. För att lära dig mer om detta kan du hänvisa till artikeln ”Designöverväganden för en sömlös inloggningsupplevelse”.
- Designa direkt ditt UI: Designers är vana vid att tillhandahålla kompletta lösningar i Figma. Om ditt projekt involverar designers kommer denna open-source-design att hjälpa dem att snabbt matcha ditt varumärkes visuella identitet.
Stärka Logtos upplevelse och tjänster
Medan Logto är engagerade i att tillhandahålla en effektiv molntjänst, härstammar det från open source-samhället och avser att förbli offentligt transparent på lång sikt.
- Omfamna andan av open source: Vi tror att de fördelar som erhållits från open-sourcing av kod också kan tillämpas på design. Genom att bjuda in mer uppmärksamhet till användarupplevelsen genom öppenhet, användning och diskussion inom open source-gemenskapen kan vi kontinuerligt förbättra autentiseringsupplevelsen.
- Ge insikt i långsiktig produktionsdesign: Även om de flesta av våra ansträngningar för närvarande är inriktade på att utveckla Autentisering och Auktorisering funktioner, är den inloggningsupplevelse vi tillhandahåller mycket utbyggbar och tillgodoser majoriteten av dina behov. Genom feedback och samarbete inom open source hoppas vi bättre kunna integrera SIE:s processer och visuella konfigurationer i våra produkter och i slutändan minska kostnaden för produktutveckling.
Avslutande anmärkningar
Allteftersom vi fortsätter att iterera på Logto-produkten kommer vi att hålla Figma-designen uppdaterad. Vi hoppas att du kommer att använda Logto för att skapa exceptionella första stegs upplevelser för dina produkter och lämna ett bestående intryck på ditt varumärke.
Vi värdesätter din erfarenhet och feedback, så håll gärna öppna kanaler för kommunikation. Vi ser fram emot att höra från dig.