Русский
  • дизайн
  • открытый код
  • аутентификация
  • авторизация
  • продукт
  • figma

От кода к холсту: Logto делает дизайн процесса входа с открытым исходным кодом

Мы опубликовали ресурсы Figma для процесса входа в общий доступ, включая полные проектировки аутентификационных потоков и универсальные стили и компоненты.

Ran
Ran
Product & Design

В Logto мы верим в силу сотрудничества и прозрачности. Вот почему мы рады сообщить вам, что сделали дизайн процесса входа в Figma с открытым исходным кодом и доступным для каждого. Чтобы получить доступ к ресурсам Figma:

Каталог ресурсов дизайна процесса входа

Этот дизайн включает два основных компонента: аутентификационный поток (процесс входа) и стили и компоненты. Давайте изучим каждый из них более подробно.

Аутентификационный поток

Мы тщательно создали различные комбинации сценариев регистрации, входа и первого социального входа для мобильных и ПК платформ. Каждый сценарий поставляется с соответствующей консольной конфигурацией, предоставляя вам полное представление о процессе аутентификации. Вот небольшой предварительный просмотр некоторых сценариев:

РегистрацияВходПервый социальный вход
Имя пользователяИмя пользователя + ПарольИмя пользователя + ПарольСоциальный вход + Установка имени
Электронная почта (самый популярный)Электронная почта + Код подтверждения + ПарольЭлектронная почта + ПарольСоциальный вход + Привязка электронной почты
Номер телефонаНомер телефона + Код подтвержденияНомер телефона + Код подтвержденияСоциальный вход + Привязка номера телефона
Смешанная почта и телефонЭлектронная почта/Номер телефона + Код подтверждения + ПарольЭлектронная почта/Номер телефона + Код подтверждения/ПарольСоциальный вход + Привязка электронной почты/Номера телефона
Только социальный вход//Только социальный вход
Забыл пароль
Смешанная почта и телефонСбросить пароль путем проверки электронной почты/телефона

Дизайн аутентификационного потока

Стили и компоненты

Наш дизайн также включает набор простых и универсальных стилей и компонентов, которые облегчают настройку общего интерфейса вашего процесса входа. Вот что вы найдете:

Введение
Стили шрифтовМы упростили классификацию шрифтов в такие категории, как тело, метка, заголовок и заголовок. Одни и те же стили шрифтов используются как для мобильных, так и для ПК платформ, обеспечивая последовательность и простоту использования.
Цветовые стилиС помощью палитр и токенов вы можете без труда изменять цвета тем, чтобы соответствовать вашему бренду. Наша цветовая палитра генерируется с использованием Google Material Design и предлагает как светлый, так и темный режимы, что облегчает понимание для ваших дизайнеров.
ИконкиМы включили подобранную коллекцию функциональных иконок, которые охватывают широкий спектр случаев использования, которые могут быть непосредственно использованы или легко заменены. Также мы предоставляем различные иконки социальных сетей, специально предназначенные для кнопок вашего социального входа.
КомпонентыМы организовали компоненты как для мобильных, так и для веб-платформ, включая Брендинг, Кнопку, Флажок, Диалог, Навигацию, Уведомление, Текстовое Поле и Клавиатуру (Мобильная).

Стили и компоненты

Упрощенная конфигурация

Но это еще не все! С Logto вы можете опустить сложные детали, описанные выше, и довериться нам в обеспечении безупречного опыта интеграции. В Logto Console вы можете легко исследовать конфигурации методов и соотнести их с интерфейсом вашего бренда. В считанные минуты у вас будет настроенный опыт входа и регистрации, который идеально подходит для вашего бизнеса.

Консоль Logto Cloud

Почему мы сделали наш дизайн Figma публичным?

Logto всегда стремился предоставлять сервис с открытым исходным кодом, однако вы можете задаться вопросом, почему мы решили расширить эту открытость на наш дизайн.

Понимание и настройка процесса входа

Мы хотим, чтобы Logto был не только удобен для разработчиков, но и лучшим другом для проджект-менеджеров и дизайнеров. Мы верим в содействие лучшему сотрудничеству на протяжении всего процесса разработки, что ведет к высокой эффективности, прозрачности и доверию.

  • Всестороннее понимание аутентификационного потока: Хотя ваш продукт может использовать только определенный метод входа или регистрации, как дизайнер, вы наверняка захотите иметь полное представление. Эти знания позволяют вам определить метод, который наиболее подходит для вашего бизнеса и максимизирует коэффициенты конверсии. Логика аутентификации не должна быть неясной сущностью. Однако соотношение между идентификаторами и методами аутентификации - это не простое N*N отношение; оно включает различные ограничения и продуктовые решения. Наша Figma поможет. Чтобы узнать больше об этом, вы можете обратиться к статье "The design considerations for a seamless sign-in experience".
  • Непосредственно проектируйте свой интерфейс: Дизайнеры привыкли предоставлять полные решения в Figma. Если ваш проект включает дизайнеров, этот дизайн с открытым исходным кодом поможет им быстро сопоставить визуальную идентичность вашего бренда.

Укрепление опыта и услуг Logto

Хотя Logto стремится предоставлять эффективный облачный сервис, он возник в сообществе с открытым исходным кодом и намеревается оставаться публично прозрачным в долгосрочной перспективе.

  • Принятие духа Open-Source: Мы считаем, что преимущества, получаемые от кода с открытым исходным кодом, могут также применяться и к дизайну. Приглашая больше внимания к пользовательскому опыту через открытость, использование и обсуждение внутри сообщества с открытым исходным кодом, мы можем непрерывно улучшать процесс аутентификации.
  • Предоставление информации о долгосрочном производственном дизайне: Хотя большинство наших усилий в настоящее время сосредоточены на разработке возможностей аутентификации и авторизации, предоставляемый нами опыт входа является крайне расширяемым и удовлетворяет большинству ваших потребностей. Через обратную связь с открытым исходным кодом и сотрудничество мы надеемся лучше интегрировать процессы и визуальные конфигурации SIE в наши продукты, в конечном итоге снижая стоимость продуктизации.

Заключительные замечания

По мере того как мы продолжаем совершенствовать продукт Logto, мы будем поддерживать дизайн Figma в актуальном состоянии. Мы надеемся, что вы используете Logto для создания исключительных первых шагов в использовании ваших продуктов и оставляете неизгладимое впечатление о вашем бренде.

Мы ценим ваш опыт и отзывы, поэтому, пожалуйста, держите каналы коммуникации открытыми. Ждем вашего мнения.