От кода к холсту: Logto делает дизайн процесса входа с открытым исходным кодом
Мы опубликовали ресурсы Figma для процесса входа в общий доступ, включая полные проектировки аутентификационных потоков и универсальные стили и компоненты.
Product & Design
В Logto мы верим в силу сотрудничества и прозрачности. Вот почему мы рады сообщить вам, что сделали дизайн процесса входа в Figma с открытым исходным кодом и доступным для каждого. Чтобы получить доступ к ресурсам Figma:
Каталог ресурсов дизайна процесса входа
Этот дизайн включает два основных компонента: аутентификационный поток (процесс входа) и стили и компоненты. Давайте изучим каждый из них более подробно.
Аутентификационный поток
Мы тщательно создали различные комбинации сценариев регистрации, входа и первого социального входа для мобильных и ПК платформ. Каждый сценарий поставляется с соответствующей консольной конфигурацией, предоставляя вам полное представление о процессе аутентификации. Вот небольшой пред варительный просмотр некоторых сценариев:
| Регистрация | Вход | Первый социальный вход | |
|---|---|---|---|
| Имя пользователя | Имя пользователя + Пароль | Имя пользователя + Пароль | Социальный вход + Установка имени |
| Электронная почта (самый популярный) | Электронная почта + Код подтверждения + Пароль | Электронная почта + Пароль | Социальный вход + Привязка электронной почты |
| Номер телефона | Номер телефона + Код подтверждения | Номер телефона + Код подтверждения | Социальный вход + Привязка номера телефона |
| Смешанная почта и телефон | Электронная почта/Номер телефона + Код подтверждения + Пароль | Электронная почта/Номер телефона + Код подтверждения/Пароль | Социальный вход + Привязка электронной почты/Номера телефона |
| Только социальный вход | / | / | Только социальный вход |
| Забыл пароль | |
|---|---|
| Смешанная почта и телефон | Сбросить пароль путем проверки электронной почты/телефона |
Стили и компоненты
Наш дизайн также включает набор простых и универсальных стилей и компонентов, которые облегчают настройку общего интерфейса вашего процесса входа. Вот что вы найдете:
| Введение | |
|---|---|
| Стили шрифтов | Мы упростили классификацию шрифтов в такие категории, как тело, метка, заголовок и заголовок. Одни и те же стили шрифтов используются как для мобильных, так и для ПК платформ, обеспечивая последовательность и простоту использования. |
| Цветовые стили | С помощью палитр и токенов вы можете без труда изменять цвета тем, чтобы соответствовать вашему бренду. Наша цветовая палитра генерируется с использованием Google Material Design и предлагает как светлый, так и темный режимы, что облегчает понимание для ваших дизайнеров. |
| Иконки | Мы включили подобранную коллекцию функциональных иконок, которые охватывают широкий спектр случаев использования, которые могут быть непосредственно использованы или легко заменены. Также мы предоставляем различные иконки социальных сетей, специально предназначенные для кнопок вашего социального входа. |
| Компоненты | Мы организовали компоненты как для мобильных, так и для веб-платформ, включая Брендинг, Кнопку, Флажок, Диалог, Навигацию, Уведомление, Текстовое Поле и Клавиатуру (Мобильная). |
Упрощенная конфигурация
Но это еще не все! С Logto вы можете опустить сложные детали, описанные выше, и довериться нам в обеспечении безупречного опыта интеграции. В Logto Console вы можете легко исследовать конфигурации методов и соотнести их с интерфейсом вашего бренда. В считанные минуты у вас будет настроенный опыт входа и регистрации, который идеально подходит для вашего бизнеса.
Почему мы сделали наш дизайн Figma публичным?
Logto всегда стремился предоставлять сервис с открытым исходным кодом, однако вы можете задаться вопросом, почему мы решили расширить эту открытость на наш дизайн.
Понимание и настройка процесса входа
Мы хотим, чтобы Logto был не только удобен для разработчиков, но и лучшим другом для проджект-менеджеров и дизайнеров. Мы верим в содействие лучшему сотрудничеству на протяжении всего процесса разработки, что ведет к высокой эффективности, прозрачности и доверию.
- Всестороннее понимание аутентификационного потока: Хотя ваш продукт может использовать только определенный метод входа или регистрации, как дизайнер, вы наверняка захотите иметь полное представление. Эти знания позволяют вам определить метод, который наиболее подходит для вашего бизнеса и максимизирует коэффициенты конверсии. Логика аутентификации не должна быть неясной сущностью. Однако соотношение между идентификаторами и методами аутентификации - это не простое N*N отношение; оно включает различные ограничения и продуктовые решения. Наша Figma поможет. Чтобы узнать больше об этом, вы можете обратиться к статье "The design considerations for a seamless sign-in experience".
- Непосредственно проектируйте свой интерфейс: Дизайнеры привыкли предоставлять полные решения в Figma. Если ваш проект включает дизайнеров, этот дизайн с открытым исходным кодом поможет им быстро сопоставить визуальную идентичность вашего бренда.
Укрепление опыта и услуг Logto
Хотя Logto стремится предоставлять эффективный облачный сервис, он возник в сообществе с открытым исходным кодом и намеревается оставаться публично прозрачным в долгосрочной перспективе.
- Принятие духа Open-Source: Мы считаем, что преимущества, получаемые от к ода с открытым исходным кодом, могут также применяться и к дизайну. Приглашая больше внимания к пользовательскому опыту через открытость, использование и обсуждение внутри сообщества с открытым исходным кодом, мы можем непрерывно улучшать процесс аутентификации.
- Предоставление информации о долгосрочном производственном дизайне: Хотя большинство наших усилий в настоящее время сосредоточены на разработке возможностей аутентификации и авторизации, предоставляемый нами опыт входа является крайне расширяемым и удовлетворяет большинству ваших потребностей. Через обратную связь с открытым исходным кодом и сотрудничество мы надеемся лучше интегрировать процессы и визуальные конфигурации SIE в наши продукты, в конечном итоге снижая стоимость продуктизации.
Заключительные замечания
По мере того как мы продолжаем совершенствовать продукт Logto, мы будем поддерживать дизайн Figma в актуальном состоянии. Мы надеемся, что вы используете Logto для создания исключительных первых шагов в использов ании ваших продуктов и оставляете неизгладимое впечатление о вашем бренде.
Мы ценим ваш опыт и отзывы, поэтому, пожалуйста, держите каналы коммуникации открытыми. Ждем вашего мнения.