Categorieën: Alle - дата - заказ - поле - кнопка

door Евгени Дан 1 jaar geleden

536

Яндекс.самокат(Форма заказа)

В интерфейсе заказа самокатов на Яндексе пользователь имеет несколько ключевых функций и полей для заполнения. При нажатии кнопки "Назад" пользователь возвращается на страницу выбора самоката.

Яндекс.самокат(Форма заказа)

Яндекс.самокат(Форма заказа)

Интерфейс формы "сделать заказ"

Всплывающее окно "Заказ оформлен"
Заголовок "Заказ оформлен"

Рамка окна

Черного цвета , вокруг темный оттенок

Кнопка "посмотреть статус"

Расположена внизу в окне справа

Текст белого цвета

края у кнопки скругленные , цвет черный

Текст "Номер заказа3434. Запишите его: пригодится чтобы отслеживать заказ"

Расположен в центре под заголовком

Текст черного цвета и выровнен по центру

Расположен вверху формы над полями

Интерфейс "Про аренду

При фокусе , курсор меняется на "поинтер"

Текст внутри кнопка "Заказать" белого цвета

При наведении курсора, меняются границы и заливка на черный цвет

Границы черные

Снизу под полем с комментарием для курьера с прпавой стороны

Кнопка "Назад"

Форма поля, прямоугольная с закругленными краями

при фокусе, курсор меняется на "Поинтер"

Надпись "Назад" черного цвета

границы черные

Белого цвета

снизу под полем, с комментарием для курьера

Поля "комментарий для курьера

Текст черного цвета

Содержит плейсхолдер "комментарий для курьера"

Синие границы при выборе

красные границы, при некорректном вводе

Надпись "Введите корректный комментарий для курьера" при некорректном вводе

Располагается 4 по списку

поля с плейсхолдером, серые, с закругленными краями

Поля "Цвет самоката

Если не выбрать , текст серого цвета

При выборе цвета, цвет текста меняется на черный

Чек бокс "серая безысходность"

Чек бокс "Черный жумчуг

Располагается 3 , по списку

серая рамка с закругленными краями

При выборе цвета , шрифт меняется с серого цвета на черный и рамка темнеет

Поле ввода "Срок Аренды"

поля на плейсхолдере серые и закругленные

курсор меняется на поинтер, при выборе дня

Есть иконка шифрона

Выпадающий список"Срок аренды" надпись черного цвета

Семеро суток

Шестеро суток

Пятеро суток

Четверо суток

Трое суток

Двое суток

Сутки

содержит плейсхолдер "Срок Аренды"

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

Черные границы , при выборе

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

Черные границы при выборе

Синие границы , при фокусе

Поле ввода "Когда привезти самокат"

Располагается под надписью "Про аренду"

Выпадающий календарь

Числа дней недели, идут по дням и неделям

Выбранный день, становится жирным

Выходные дни, красного цвета

Рабочие дни черного цвета

Дни, недели идут в один ряд, ниже месяца и года "ПН ВТ СР ЧТ ПТ СБ ВС

СБ И ВС, красного цвета

ПН,ВТ,СР,ЧТ,ПТ, Серого цвета

Кнопки в виде <> треугольников для смены месяца и года , располагаются на одном уровне как и месяц с годом но в правом углу

Текст курсивов темного цвета

Месяц и год располагается в лувом углу

Форма квадратная

Внутри спраава, иконка календаря

Границы серого цвета при пустом вводе

Черного цвета

При выборе даты

черного цвета

Формат дд.мм..гг

Про Аренду

Располагается вверху над полями

Надпись черного цвета , большими буквами

Интерфейс "Для кого самокат"
Средний блок "Для кого самокат"

Поле ввода "телефон"

содержит плейсхолдер "Телефон: на него позвонит курьер"

В заполненном поле, текст\номер, черного цвета , рамка черного цвета

если пустой ввод, границы серые

Надпись "Введите корректное имя" при некорректном вводе

красные границы , при некорректном вводе

синие границы, при снятии фокуса

Поле ввода "метро"

В заполненном поле, текст\номер,черного цвета, рамка черного цвета

Выпадающий список со станциями метро

скролл станций

кружок станции, цвета ветки метро

Поле ввода "адрес"

если пустой ввод , границы серые

Красные границы при некорректном вводе

Поле ввода "Фамилия"

Синие границы при наведении фокуса

если пустой ввод. границы серые

Надпись "введите корректное имя" при некорректном вводе

синие границы при фокусе

Поле ввода "Имя"

Располагается под надписью "Для кого самокат"

Черные границы при корректном вводе

синие границы при наведении фокуса

Если пустой ввод, границы серые

Надпись"введите корректное имя" при некорректном вводе

под полем слева

Красного цвета

красные границы при некорректном вводе

Синие границы при фокусе

Для кого самокат

Надпись большим шрифтом, черными буквами

Расположение вверху над полями

Хедер

Логотип Яндекс Самоката учебный тренажер

учебный тренажер изображен серым цветом

Текст самоката обычным шрифтом

Яндекс Черным жирным шрифтом

Кнопка "заказать"

кнопка черного цвета

края кнопки закругленные

Текст белыми буквами

Кнопка "статус заказа"

Расположение в правом верхнем углу, справа от кнопки заказать

Кнопка "Номер заказа"

синие границы поля при фокусе

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

содержит плейсхолдер с надписью "Номер заказа"

Надпись черного цвета

Располагается в верхней правой части экрана после нажатия на кнопку "статус заказа"

Логика

кнопка "Заказать "
если при заполнении была ошибка, то при нажатии на кнопку "Заказать" будет ошибка
Заказ будет оформлен, если валидацию прошли все поля

появляется окно с текстом и кнопкой "посмотреть статус"

Кнопка "посмотреть статус" перекидывает на экран статус заказа

кнопка "Назад"
При переходе между страницами , информация сохраняется
При нажатии , пользователь возвращаются на страницу "Для кого самокат"
Форма "Про аренду
Поле "Комментарий для курьера

Не более 24 символов

можно ввести пробел

можно ввести цифры

Только русские буквы

Поле не обязательно для заполнения

Границы поля меняют цвет, при смене состояний

поле "Цвет самоката"

Чек-бокс внутри поля

есть два варианта

При нажатии он включается

при выборе чекбокса, меняется его цвет

Границы поля меняются при смене состояния

Поле "срок аренды"

вводить значения в поле в ручную нельзя

Выпадающий список выьора количества дней

Выбрать дату, можно только на след день

при повторном нажатии, окно закрывается

При выборе значения оно сразу отображается

Поле "Когда привезти самокат"

Вводить значение в поле в ручную нельзя

Выпадающий календарь при клике на поле ввода выходит

можно закрыть календарь, повторным нажатием

строки календаря меняют месяц

При нажатии на календарь, выбирается дата

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

при открытии, видим текущий месяц

Выбрать дату можно только на след день

Когда пользователь выбирает дату, значение сразу подставляется в поле

плейсхолдер исчезнет при заполнении

Границы поля меняются при смене состояний

Логика "Для кого самокат
Кнопка "Дальше"

Если все правильно заполненоЮ открывается форма "про аренду"

При наведении цвет меняется

Поле "Телефон на него позвонит курьер

При неправильном заполнении , поле подсвечивается красным

При неправельном заполнении, выходит текст ошибки «Введите корректный телефон».

От 10 до 12 символов

можно вводить знак +

Можно вводить цифры

Поле обязательно для заполнения

Плейсхолдер исчезнет после заполнения

поле "Номер заказа"

При вводе корректного номера заказа, открывается страница с надписью "Такого заказа нет"

при вводе корректного номера, открывается страничка "Статус Заказа"

Валидация после нажатия на кнопку Enter

Кнопка "Статус заказа"

при нажатии кнопка "Заказать" исчезнет

Нажатие, переносит в поле "Номер заказа"

Кнопка "Заказать"

нажатие, переходит на страницу "Для кого самокат"

Логотип Яндекс Самокат учебный тренажер

при наведении курсор меняется на поинтер

Лого самокат

нажав переходит на Яндекс Самокат

Лого яндекс

Нажав, переходит на главную старницу Яндекс

поле "станция метро"

станция метро можно выбрать нажатием из выпадающего списка

после снятия фокуса содержимое удаляется

при нажатия появляется выпадающий список станции метро

поле обязательно для заполнения

Поле "Адрес"(куда привезти самокат)

пробелы удаляются при снятии фокуса

можно вводить запятую

Можно вводить точку

Текст ошибки «Введите корректное адрес».

От 5 до 50 символов

можно вводить тире

можно вводить пробел

Поле "Фамилия"

при некорректном вводе выходит текст ошибки «Введите корректную фамилию».

можно вводить проблем

Границы меняются при смене состояния

плейсхолдер исчезает при заполнении

Поле "Имя"

Текст ошибки «Введите корректное имя».

При некорректном вводе подсвечивается красным

От 2 до 15 символов

Можно вводить тире

Можно вводить пробел

Только буквы русского алфавита

Поле обязательное для заполнения

Плейсхолдер исчезает при заполнении