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.
RanProduct & Design
Pare de perder semanas com autenticação de utilizadores
Lance aplicações seguras mais rapidamente com o Logto. Integre a autenticação de utilizadores em minutos e concentre-se no seu produto principal.
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.
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
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).
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.
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.
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.
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.
