Dal codice alla tela: Logto rende open-source la progettazione dell'esperienza di accesso
Abbiamo reso pubbliche le risorse Figma dell'esperienza di accesso, inclusi progetti completi del flusso di autenticazione e stili e componenti versatili.
Product & Design
Da Logto, crediamo nel potere della collaborazione e della trasparenza. Ecco perché siamo felici di far sapere che abbiamo reso open-source la progettazione della nostra esperienza di accesso in Figma, disponibile per tutti. Per accedere alle risorse di Figma:
Catalogo delle risorse di progettazione dell'esperienza di accesso
Questo design include due componenti principali: il flusso di autenticazione (esperienza di accesso) e gli stili e i componenti. Esploriamoli in dettaglio.
Flusso di autenticazione
Abbiamo meticolosamente creato varie combinazioni di scenari di registrazione, accesso e primo accesso sociale sia per piattaforme mobili che PC. Ogni scenario viene fornito con la sua configurazione di console corrispondente, offrendoti una panoramica completa del flusso di autenticazione. Ecco un'anteprima di alcuni degli scenari:
| Registrazione | Accesso | Primo accesso sociale | |
|---|---|---|---|
| Nome utente | Nome utente + Password | Nome utente + Password | Accesso sociale + Imposta nome utente |
| Email (più popolare) | Email + Codice di verifica + Password | Email + Password | Accesso sociale + Collega email |
| Numero di telefono | Numero di telefono + Codice di verifica | Numero di telefono + Codice di verifica | Accesso sociale + Collega numero di telefono |
| Email e telefono misti | Email/Numero di telefono + Codice di verifica + Password | Email/Numero di telefono + Codice di verifica/Password | Accesso sociale + Collega email/Numero di telefono |
| Solo accesso sociale | / | / | Solo accesso sociale |
| Password dimenticata | |
|---|---|
| Email e telefono misti | Reimposta password verificando email/numero di telefono |
Stili e componenti
Il nostro design include anche una serie di stili e componenti semplici e versatili che facilitano la personalizzazione della UI complessiva della tua esperienza di accesso. Ecco cosa troverai:
| Introduzione | |
|---|---|
| Stili di carattere | Abbiamo semplificato la classificazione dei caratteri in categorie come corpo, etichetta, titolo e intestazione. Gli stessi stili di carattere sono utilizzati sia per piattaforme mobili che PC, garantendo coerenza e facilità d'uso. |
| Stili di colore | Con l'aiuto di palette e token, puoi modificare facilmente i colori del tema per adattarli al tuo brand. La nostra palette di colori è generata utilizzando Google Material Design e offre sia modalità luce che modalità scura, facilitando la comprensione per i tuoi designer. |
| Icone | Abbiamo incluso una selezione curata di icone funzionali che coprono una vasta gamma di casi d'uso, che possono essere direttamente utilizzate o facilmente sostituite. Inoltre, forniamo una varietà di icone di social media progettate specificamente per i tuoi pulsanti di accesso social. |
| Componenti | Abbiamo organizzato componenti sia per piattaforme mobili che web, inclusi Branding, Pulsante, Checkbox, Dialogo, Navigazione, Toast, Campo di testo e Tastiera (Mobile). |
Configurazione semplificata
Ma non è tutto! Con Logto, puoi saltare i dettagli tecnici sopra e fidarti di noi per offrire un'esperienza di integrazione senza interruzioni. In Logto Console, puoi esplorare facilmente le configurazioni dei metodi e adattarle alla UI del tuo brand. In pochi minuti, avrai un'esperienza di login e registrazione personalizzata che si allinea perfettamente alla tua attività.
Perché abbiamo reso pubblico il nostro design Figma?
Logto è sempre stato impegnato a fornire un servizio di codice open-source, ma potreste chiedervi perché abbiamo deciso di estendere questa apertura anche al nostro design.
Comprendere e configurare l'esperienza di accesso
Vogliamo che Logto sia non solo amico degli sviluppatori, ma anche il miglior amico dei PM e dei designer. Crediamo nel favorire una migliore collaborazione durante l'intero processo di sviluppo, portando ad alta efficienza, trasparenza e fiducia.
- Comprensione completa del flusso di autenticazione: Mentre il tuo prodotto potrebbe utilizzare solo un metodo specifico di login o registrazione, come designer, potresti voler avere una visione olistica. Questa conoscenza ti permette di determinare l'approccio che meglio si adatta al tuo business e massimizza i tassi di conversione. La logica di autenticazione non dovrebbe essere un'entità ambigua. Tuttavia, la corrispondenza tra identificatori e metodi di autenticazione non è una relazione semplice N*N; coinvolge vari vincoli e decisioni di prodotto. La nostra Figma ti aiuterà. Per saperne di più, puoi consultare l'articolo “Le considerazioni progettuali per un'esperienza di accesso fluida”.
- Progetta direttamente la tua UI: I designer sono abituati a fornire soluzioni complete in Figma. Se il tuo progetto coinvolge designer, questo design open-source li aiuterà a far corrispondere rapidamente l'identità visiva del tuo brand.
Potenziamento dell'esperienza e dei servizi di Logto
Mentre Logto è impegnato a fornire un servizio Cloud efficiente, è nato dalla comunità open-source e intende rimanere pubblicamente trasparente a lungo termine.
- Adottare lo spirito dell'open-source: Crediamo che i benefici derivati dal rendere open-source il codice possano essere applicati anche al design. Invitando maggiore attenzione all'esperienza utente attraverso apertura, utilizzo e discussione all'interno della comunità open-source, possiamo migliorare continuamente l'esperienza di autenticazione.
- Fornire insight sulla progettazione della produzione a lungo termine: Sebbene la maggior parte dei nostri sforzi siano attualmente concentrati sullo sviluppo delle capacità di Autenticazione e Autorizzazione, l'esperienza di accesso che forniamo è altamente estensibile e soddisfa la maggior parte delle tue esigenze. Attraverso feedback open-source e collaborazione, speriamo di integrare meglio i processi SIE e le configurazioni visive nei nostri prodotti, riducendo al contempo il costo della produzione.
Note conclusive
Mentre continuiamo a iterare sul prodotto Logto, manterremo aggiornato il design di Figma. Speriamo che utilizzerai Logto per creare esperienze iniziali eccezionali per i tuoi prodotti e lasciare una duratura impressione sul tuo brand.
Valutiamo la tua esperienza e il tuo feedback, quindi ti preghiamo di mantenere aperti i canali di comunicazione. Non vediamo l'ora di sentire da te.