Do código para a tela: Logto transforma o design da experiência de início de sessão em open-source
Publicámos os recursos da experiência de início de sessão para Figma ao público, incluindo designs completos de fluxos de autenticação e estilos e componentes versáteis.
Product & Design
Na Logto, acreditamos no poder da colaboração e transparência. É por isso que estamos felizes em informar que tornámos o design da nossa experiência de início de sessão em Figma open-source e disponível para todos usarem. Para aceder aos recursos do Figma:
Catálogo de recursos de design de experiência de início de sessão
Este design inclui dois principais componentes: o fluxo de autenticação (experiência de início de sessão) e os estilos & componentes. Vamos explorar cada um em detalhe.
Fluxo de autenticação
Criámos meticulosamente várias combinações de cenários de registo, início de sessão, e primeiro início de sessão social para plataformas móveis e PC. Cada cenário vem com a sua configuração de consola correspondente, dando-te uma visão geral completa do fluxo de autenticação. Aqui está uma prévia de alguns dos cenários:
| Registo | Início de sessão | Primeiro início de sessão social | |
|---|---|---|---|
| Nome de utilizador | Nome de utilizador + Palavra-passe | Nome de utilizador + Palavra-passe | Início de sessão social + Definir nome de utilizador |
| Email (mais popular) | Email + Código de verificação + Palavra-passe | Email + Palavra-passe | Início de sessão social + Ligar email |
| Número de telefone | Número de telefone + Código de verificação | Número de telefone + Código de verificação | Início de sessão social + Ligar número de telefone |
| Email e telefone misturados | Email/Número de telefone + Código de verificação + Palavra-passe | Email/Número de telefone + Código de verificação/Palavra-passe | Início de sessão social + Ligar email/Número de telefone |
| Apenas início de sessão social | / | / | Apenas início de sessão social |
| Esqueceu-se da palavra-passe | |
|---|---|
| Email e telefone misturados | Repor a palavra-passe verificando o email/número de telefone |
Estilos & componentes
O nosso design também inclui um conjunto de estilos e componentes simples e versáteis que tornam fácil para ti personalizar a UI geral da tua experiência de início de sessão. Aqui está o que encontrarás:
| Introdução | |
|---|---|
| Estilos de fonte | Simplificámos a classificação de fontes em categorias como corpo, etiqueta, título, e manchete. Os mesmos estilos de fonte são usados para plataformas móveis e PC, garantindo consistência e facilidade de uso. |
| Estilos de cores | Com a ajuda de paletas e tokens, podes modificar facilmente as cores do tema para corresponder à tua marca. A nossa paleta de cores é gerada usando o Google Material Design, e oferece tanto o modo claro como o modo escuro, tornando fácil para os teus designers compreenderem. |
| Ícones | Incluímos uma coleção selecionada de ícones funcionais que cobrem uma ampla gama de casos de uso que podem ser usados diretamente ou facilmente substituídos. Além disso, fornecemos uma variedade de ícones de redes sociais especificamente desenhados para os teus botões de início de sessão social. |
| Componentes | Organizámos componentes para plataformas móveis e web, incluindo Branding, Botão, Caixa de seleção, Diálogo, Navegação, Toast, Campo de texto, e Teclado (Móvel). |
Configuração simplificada
Mas isso não é tudo! Com a Logto, podes ignorar os detalhes minuciosos acima e confiar em nós para fornecer uma experiência de integração perfeita. Na Logto Console, podes explorar facilmente configurações de método e combiná-las com a UI da tua marca. Em minutos, terás uma experiência de login e registo personalizada que se alinha perfeitamente com o teu negócio.
Por que tornámos o nosso design Figma público?
A Logto sempre esteve comprometida em proporcionar um serviço de código open-source, mas podes estar a questionar-te por que decidimos estender essa abertura ao nosso design também.
Compreendendo e configurando a experiência de início de sessão
Queremos que a Logto seja não apenas amigável para desenvolvedores, mas também a melhor amiga dos PMs e Designers. Acreditamos em promover uma melhor colaboração ao longo de todo o processo de desenvolvimento, levando a alta eficiência, transparência e confiança.
- Compreensão abrangente do Fluxo de Autenticação: Embora o teu produto possa usar apenas um método específico de login ou registo, como designer, deves querer ter uma visão holística. Este conhecimento permite-te determinar a abordagem que melhor se adapta ao teu negócio e maximiza as taxas de conversão. A lógica de autenticação não deve ser uma entidade ambígua. No entanto, a correspondência entre identificadores e métodos de autenticação não é uma relação simples de N*N; envolve várias restrições e decisões de produto. O nosso Figma vai ajudar. Para saber mais sobre isso, podes consultar o artigo “As considerações de design para uma experiência de início de sessão sem costuras”.
- Desenhar diretamente a tua UI: Designers estão acostumados a fornecer soluções completas no Figma. Se o teu projeto envolver designers, este design open-source vai ajudar a que rapidamente combinem a identidade visual da tua marca.
Potenciar a experiência e serviços da Logto
Enquanto a Logto está comprometida em fornecer um serviço Cloud eficiente, ela originou-se da comunidade open-source e pretende manter-se publicamente transparente no longo prazo.
- Adotando o espírito do open-source: Acreditamos que os benefícios derivados do open-sourcing de código também podem ser aplicados ao design. Ao convidar mais atenção para a experiência do usuário por meio de abertura, uso e discussão na comunidade open-source, podemos continuamente aprimorar a experiência de autenticação.
- Fornecendo uma visão sobre o design de produção a longo prazo: Embora a maioria dos nossos esforços estejam atualmente focados no desenvolvimento de capacidades de Autenticação e Autorização, a experiência de início de sessão que fornecemos é altamente extensível e atende à maioria das tuas necessidades. Através do feedback e colaboração open-source, esperamos integrar melhor os processos e configurações visuais do SIE nos nossos produtos, reduzindo assim o custo de produtização.
Notas finais
Enquanto continuamos a iterar no produto Logto, manteremos o design Figma atualizado. Esperamos que utilizes a Logto para criar experiências excepcionais de primeiro passo para os teus produtos e deixes uma impressão duradoura na tua marca.
Valorizamos a tua experiência e feedback, por isso, por favor, mantenha os canais de comunicação abertos. Esperamos ansiosamente ouvir de ti.