Od kodu do płótna: Logto udostępnia projektowanie doświadczeń logowania jako open-source
Opublikowaliśmy zasoby figmy dotyczące doświadczeń związanych z logowaniem, w tym kompleksowe projekty przepływu uwierzytelniania oraz wszechstronne style i komponenty.
Product & Design
W Logto wierzymy w siłę współpracy i przejrzystości. Dlatego z radością informujemy, że udostępniliśmy nasz projekt doświadczeń związanych z logowaniem w figmie jako open-source, dostępny dla każdego do wykorzystania. Aby uzyskać dostęp do zasobów figmy:
Katalog zasobów projektowych doświadczeń logowania
Ten projekt zawiera dwa główne komponenty: przepływ uwierzytelniania (doświadczenie związane z logowaniem) oraz style i komponenty. Przyjrzyjmy się każdemu z nich szczegółowo.
Przepływ uwierzytelniania
Skrupulatnie opracowaliśmy różne kombinacje scenariuszy rejestracji, logowania i pierwszego logowania z wykorzystaniem sieci społecznościowych dla platform mobilnych i PC. Każdy scenariusz ma odpowiadającą mu konfigurację konsoli, co daje Ci kompleksowy przegląd przepływu uwierzytelniania. Oto podgląd niektórych scenariuszy:
| Rejestracja | Logowanie | Pierwsze logowanie z siecią społecznościową | |
|---|---|---|---|
| Nazwa użytkownika | Nazwa użytkownika + Hasło | Nazwa użytkownika + Hasło | Logowanie społecznościowe + Ustaw nazwę użytkownika |
| E-mail (najpopularniejszy) | E-mail + Kod weryfikacyjny + Hasło | E-mail + Hasło | Logowanie społecznościowe + Połącz e-mail |
| Numer telefonu | Numer telefonu + Kod weryfikacyjny | Numer telefonu + Kod weryfikacyjny | Logowanie społecznościowe + Połącz numer telefonu |
| Mieszany e-mail i telefon | E-mail/Numer telefonu + Kod weryfikacyjny + Hasło | E-mail/Numer telefonu + Kod weryfikacyjny/Hasło | Logowanie społecznościowe + Połącz e-mail/Numer telefonu |
| Tylko logowanie społecznościowe | / | / | Tylko logowanie społecznościowe |
| Zapomniane hasło | |
|---|---|
| Mieszany e-mail i telefon | Zresetuj hasło, weryfikując e-mail/numer telefonu |
Style i komponenty
Nasz projekt zawiera również zestaw prostych i wszechstronnych stylów oraz komponentów, które ułatwiają dopasowanie ogólnego interfejsu użytkownika do Twojego doświadczenia związanego z logowaniem. Oto, co znajdziesz:
| Wprowadzenie | |
|---|---|
| Style czcionek | Uprościliśmy klasyfikację czcionek do kategorii takich jak ciało, etykieta, tytuł i nagłówek. Te same style czcionek są używane zarówno na platformach mobilnych, jak i PC, co zapewnia spójność i łatwość użycia. |
| Style kolorów | Dzięki paletom i tokenom możesz łatwo zmodyfikować kolory motywu zgodnie z Twoją marką. Nasza paleta kolorów jest generowana przy użyciu Google Material Design i oferuje tryb jasny oraz ciemny, co ułatwia jej zrozumienie przez projektantów. |
| Ikony | Dołączyliśmy wyselekcjonowaną kolekcję funkcjonalnych ikon obejmujących szeroki zakres zastosowań, które można bezpośrednio używać lub łatwo zastąpić. Dodatkowo, oferujemy różnorodne ikony mediów społecznościowych zaprojektowane specjalnie dla Twoich przycisków logowania społecznościowego. |
| Komponenty | Zorganizowaliśmy komponenty zarówno dla platform mobilnych, jak i webowych, w tym Branding, Button, Checkbox, Dialog, Navigation, Toast, Text Field i Keyboard (Mobile). |
Uproszczona konfiguracja
To nie wszystko! Dzięki Logto możesz pominąć powyższe szczegółowe informacje i zaufać nam, że dostarczymy bezproblemowe doświadczenie integracji. W Logto Console możesz łatwo eksplorować konfiguracje metod i dopasowywać je do UI Twojej marki. W ciągu kilku minut będziesz mieć spersonalizowane doświadczenie logowania i rejestracji, które idealnie pasuje do Twojej działalności.
Dlaczego uczyniliśmy nasz projekt figmy publicznym?
Logto zawsze angażowało się w świadczenie usługi open-source code, ale możesz się zastanawiać, dlaczego zdecydowaliśmy się rozszerzyć tę otwartość na nasz projekt.
Zrozumienie i konfiguracja doświadczeń logowania
Chcemy, aby Logto było nie tylko przyjazne dla deweloperów, ale także najlepszym przyjacielem PM-ów i Projektantów. Wierzymy w promowanie lepszej współpracy w całym procesie rozwoju, prowadzącej do wysokiej efektywności, przejrzystości i zaufania.
- Kompleksowe zrozumienie przepływu uwierzytelniania: Chociaż Twój produkt może korzystać tylko z konkretnej metody logowania lub rejestracji, jako projektant musisz chcieć mieć holistyczny widok. Ta wiedza pozwala Ci określić podejście najlepiej pasujące do Twojego biznesu i maksymalizujące współczynniki konwersji. Logika uwierzytelniania nie powinna być nieokreślonym podmiotem. Jednak dopasowanie między identyfikatorami a metodami uwierzytelniania nie jest prostym związkiem N*N; obejmuje różne ograniczenia i decyzje produktowe. Nasza figma pomoże. Aby dowiedzieć się więcej o tym, możesz zapoznać się z artykułem „Consideracje projektowe dla bezproblemowego doświadczenia logowania”.
- Bezpośrednio projektuj swoje UI: Projektanci są przyzwyczajeni do dostarczania kompletnych rozwiązań w figmie. Jeśli Twój projekt obejmuje projektantów, ten open-source design pomoże im szybko dopasować wizualną tożsamość Twojej marki.
Wzmocnienie doświadczenia i usług Logto
Podczas gdy Logto angażuje się w świadczenie efektywnej usługi w chmurze, wywodzi się ono ze społeczności open-source i zamierza pozostawać publicznie przejrzystym w dłuższej perspektywie.
- Przyjęcie ducha open-source: Wierzymy, że korzyści płynące z open-sourcing kodu można również zastosować do projektowania. Poprzez zapraszanie większej uwagi na doświadczenie użytkownika poprzez otwartość, użycie i dyskusję w społeczności open-source, możemy ciągle poprawiać doświadczenia uwierzytelniania.
- Dostarczanie wglądu w długoterminowy projekt produkcji: Chociaż większość naszych wysiłków jest obecnie skoncentrowana na rozwijaniu możliwości uwierzytelniania i autoryzacji, doświadczenie logowania, które dostarczamy, jest wysoce rozszerzalne i zaspokaja większość Twoich potrzeb. Dzięki informacjom zwrotnym i współpracy open-source mamy nadzieję lepiej zintegrować procesy SIE i konfiguracje wizualne z naszymi produktami, ostatecznie zmniejszając koszty produkcji.
Notki końcowe
W miarę jak kontynuujemy iterację nad produktem Logto, będziemy na bieżąco aktualizować projekt figmy. Mamy nadzieję, że wykorzystasz Logto, aby stworzyć wyjątkowe doświadczenia pierwszego kroku dla swoich produktów i pozostawić trwałe wrażenie na swojej marce.
Cenimy Twoje doświadczenia i opinie, więc proszę, utrzymuj otwarte kanały komunikacji. Czekamy na Twoje wiadomości.