Адаптировать процесс входа

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

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

  • Выбор основного метода входа (и любых резервных методов)
  • Настройка содержимого экранов входа в систему
  • Настройка визуального стиля

Пример кода представлен в автомобильном приложении Universal Android Music Player (UAMP) . Этот код предназначен для адаптации к экранам различных размеров, поэтому вам не придется решать вопросы портретного и альбомного режима.

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


Выберите способы входа

Ваш первый шаг в адаптации примера кода — решить, какой из трех доступных методов входа вы хотите предложить.

Метод входа Как это работает
А) Вход в Google
(настоятельно рекомендуется)
Введите учетную запись Google и пароль
Б) Вход в систему с помощью телефона
(рекомендуется в качестве резервного варианта или основного варианта, если ваше приложение не поддерживает вход в Google)
Введите PIN-код с экрана автомобиля на телефоне или наоборот.
В) Стандартный вход
(лучше всего как запасной вариант)
Введите имя пользователя (или адрес электронной почты) и пароль для приложения.

Вход в Google должен быть представлен в качестве основного варианта, если ваше приложение его поддерживает, поскольку это проще всего для пользователей. Если ваше приложение не поддерживает вход в Google, вход в систему с помощью телефона — следующий лучший выбор в качестве основного варианта.

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


А) Вход в Google

Если ваше приложение поддерживает вход в Google и вход в Google доступен в системе, лучше всего сделать этот метод основным вариантом в процессе входа. Пользователям это легко, потому что им просто нужно подтвердить существующую учетную запись Google.

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

Здесь вход в Google предлагается в качестве основного метода входа, как рекомендовано, а другие методы предлагаются в качестве резервных вариантов.

Процесс входа в Google

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

Если пользователь выбирает вход в Google на целевой странице (а не один из резервных вариантов, если они предлагаются), Google берет на себя остальную часть процесса входа.

Б) Вход в систему с помощью телефона

Если ваше приложение не поддерживает вход в Google, лучше всего предложить вход с телефона в качестве основного варианта входа в систему. (Вход с помощью телефона также может быть предложен в качестве резервного варианта входа в Google.) При входе с телефона пользователям не нужно запоминать имя пользователя или пароль. Вместо этого они вводят предоставленный им PIN-код.

Вход в систему с помощью телефона можно выполнить одним из двух способов:

  • Пользователи видят ПИН-код на экране автомобиля и вводят его на своих телефонах.
  • Пользователи ищут PIN-код на своих телефонах и вводят его на экране автомобиля.

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

В одной из версий входа в систему с помощью телефона пользователи видят ПИН-код, который нужно ввести на своих телефонах.
В другой версии входа в систему с телефона пользователи могут ввести PIN-код, полученный с их телефонов.

Процесс входа в систему с помощью телефона

При входе с телефона вы можете выбрать одну из двух версий целевой страницы: одну, на которой отображается ПИН-код для входа на телефоне, и другую, которая позволяет пользователям вводить ПИН-код, указанный на телефоне.

Экран целевой страницы — единственный, который вам нужно спроектировать, если только вы не предлагаете стандартный вход в качестве резервного варианта.

Если вход в систему с помощью телефона является основным вариантом, вход в систему завершается, когда пользователи вводят PIN-код, как указано на целевой странице (если только не предложен и не выбран резервный вариант).

В) Стандартный вход

Стандартный вход в приложение требует от пользователя ввести имя пользователя (или адрес электронной почты) на целевой странице, а затем ввести пароль на следующей странице.

Стандартный вход может быть предложен в качестве резервного варианта входа в Google или входа в систему с помощью телефона. Или, если ни один из двух других вариантов не поддерживается, это может быть основной вариант входа. Однако стандартный вход в систему не рекомендуется использовать в качестве основного варианта, поскольку он включает в себя несколько шагов и запоминание имен пользователей и паролей.

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

Шаг 1 стандартного входа включает ввод имени пользователя или адреса электронной почты.
Шаг 2 стандартного входа включает ввод пароля.
Пользователи, которые не помнят свои имена пользователей, перенаправляются на эту страницу.
Пользователи, которые не помнят свои пароли, перенаправляются на эту страницу.

Стандартный процесс входа в систему

Процесс стандартного входа представляет собой последовательность из двух экранов (ввод имени пользователя и пароля) с дополнительными переходами на два других экрана. Вам понадобятся версии всех 4 экранов.

Если пользователи помнят свои имена пользователей и пароли, они заполняют два экрана ввода перед входом в систему; в противном случае они перенаправляются на один или два дополнительных экрана с инструкциями.

Настройка содержимого экранов

Определив, какие методы входа будет поддерживать ваше приложение, вы будете знать, какие экраны будут использоваться в процессе входа. В зависимости от того, что вы решите поддерживать, у вас может быть от 1 до 6 экранов, для которых вам необходимо определить содержимое (и стиль, как описано в разделе «Настройка стиля» ).

Если вы выберете вход в Google или вход с помощью телефона без резервных опций, вам нужно будет создать один экран входа. С другой стороны, если вы выберете вход в Google с обоими другими вариантами в качестве резервных копий, у вас будет 6 экранов (1 для входа в Google, 1 для входа в систему с помощью телефона и 4 для стандартного входа).

Примеры этих экранов показаны в разделах «Вход в Google» , «Вход с телефона » и «Стандартный вход» . Если вы работаете с примером кода, вы можете изменить версии этих экранов, созданные в коде. Если вы не используете пример кода, вам все равно следует использовать эти примеры в качестве модели.

Вам потребуется внести некоторые изменения в содержимое этих экранов, в том числе следующее:

  • Замените логотип вымышленного приложения Aural логотипом вашего приложения.
  • Измените текст и ссылки, чтобы они ссылались на ваше приложение и связанный с ним контент.
  • Настройте логику отображения PIN-кода

Замена логотипа и логика отображения PIN-кода более подробно рассмотрены ниже.

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

ДО: На целевой странице отображается логотип вымышленного музыкального приложения под названием Aural.
ПОСЛЕ: В индивидуальной версии логотип Aural заменяется логотипом конкретного приложения.

Замена логотипа может привести к необходимости других тонких настроек, таких как настройка цветов других элементов страницы или регулировка зазора вокруг логотипа.

Чтобы логотип вашего приложения хорошо сочетался с окружающими элементами страницы, вы можете настроить код входа на использование акцентного цвета вашего приложения. Настройка стиля обсуждается на следующем этапе «Настройка стиля» .

Акцентный цвет вымышленного приложения Aural (синий #57D9F7) используется для настройки элементов страницы, таких как кнопки и ссылки, в примере приложения и в примерах в этом разделе.

Регулировка зазора логотипа

После замены логотипа Aural логотипом вашего приложения, который будет масштабирован до того же размера, что и логотип Aural, проверьте расстояние вокруг логотипа. Если количество свободного пространства не соответствует рекомендациям вашего бренда, вы можете добавить пространство по краям логотипа в файле логотипа.

Чтобы увеличить зазор логотипа, добавьте пространство вокруг логотипа в файле логотипа, сместив размер логотипа в ограничивающей рамке.

Другой подход — отрегулировать расстояние на экране. Однако при таком подходе вам придется регулировать расстояние вокруг логотипа индивидуально для каждого макета. По этой причине добавление места в файле логотипа — самый простой способ увеличить свободное пространство вокруг логотипа.

Настройте логику отображения PIN-кода

Пример процесса входа генерирует PIN-коды случайным образом с помощью простой функции RAND. Чтобы реализовать метод генерации PIN-кода на основе более надежной бизнес-логики, вам необходимо изменить соответствующий код в PinCodeSignInFragment.kt , который является частью автомобильного приложения Universal Android Music Player (UAMP).

Ссылки, показанные в этом примере, и логика создания PIN-кода должны быть настроены для вашего приложения.

Настроить стиль

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

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

  • Стиль поля ввода : заполненный, обведенный или подчеркнутый.
  • Стиль кнопки : закругленный или прямоугольный.
  • Цвета : акцент, заливка и текст кнопки, заливка и обводка формы, ошибка формы.
  • Типографика : шрифт, размер текста.

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

значок выноски
Автомобильное приложение UAMP
Сайт GitHub с кодом примера приложения для входа

Поля ввода и кнопки

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

Цвета

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

Убедитесь, что все указанные вами цвета поддерживают коэффициент контрастности не менее 4,5:1 между соседними элементами страницы. Дополнительные рекомендации по цвету, а также подробную информацию о цветовой палитре, используемой в ОС Android Automotive, см. в разделе «Визуальные основы: цвет» .

Типография

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


Рекомендации по входу в систему

Рекомендации в этом разделе касаются того, как должен работать вход в систему для оптимального удобства использования в Android Automotive OS. Пример процесса входа в приложение Universal Android Music Player (UAMP) по большей части соответствует этим рекомендациям. Он не предоставляет возможности создания учетной записи, поскольку для этого потребуется логика, специфичная для приложения.

Если вы выполнили процесс настройки, описанный в этом разделе, и не меняли каким-либо образом работу кода, ваш процесс входа в систему должен быть в хорошем состоянии с учетом приведенных ниже рекомендаций. Однако обязательно убедитесь, что ваш индивидуальный стиль соответствует общим требованиям, указанным в Руководстве по пользовательским экранам .

Если вы внесли более существенные изменения в экраны или код входа, помимо описанных в этом разделе, проверьте свой процесс входа на предмет соответствия общим рекомендациям для пользовательских экранов, а также конкретным рекомендациям по входу, приведенным ниже.

Уровень требований Методические рекомендации
ДОЛЖЕН Разработчики приложений должны:
  • Предоставить вход в Google в качестве основного варианта, если приложение и система поддерживают его.
  • Отобразить вход в систему с помощью телефона (если поддерживается) в качестве основного варианта, если приложение и система не поддерживают вход в Google.
  • Длина PIN-кода для входа в систему с помощью телефона должна составлять не более 8 цифр.
  • Для стандартного входа раздельный ввод имени пользователя и пароля в два этапа.
  • Поместите метку в поле ввода («Введите пароль») и оставьте ее видимой где-нибудь на экране после того, как пользователь начнет вводить пароль.
  • Предоставьте пользователям возможность показывать пароль (который обычно скрыт) во время его ввода.
  • Предоставьте инструкции по доступу к забытому имени пользователя или паролю.
  • Предоставьте способ создания учетной записи
МОЖЕТ Разработчики приложений могут:
  • Укажите стандартный вход в приложение (имя пользователя и пароль) в качестве основного варианта, если ни вход в Google, ни вход с помощью телефона не поддерживаются.
  • Предоставьте вход в систему с помощью телефона, стандартный вход или оба варианта в качестве резервных вариантов, если вход в Google является основным вариантом.
  • Предоставьте стандартный вход в качестве резервного варианта, если вход в систему с помощью телефона является основным вариантом.

Обоснование:

  • Постоянный опыт работы в СМИ. Экраны входа, разработанные для одного мультимедийного приложения, должны обеспечивать взаимодействие, в целом соответствующее экранам входа в другие мультимедийные приложения.

  • Постоянный внешний вид. Экраны входа в систему должны поддерживать основные принципы дизайна и визуальные основы Android Automotive OS.