Техническое задание «Marketplace com»



страница4/25
Дата27.11.2017
Размер1.19 Mb.
ТипТехническое задание
1   2   3   4   5   6   7   8   9   ...   25

6.2 Футер


Прототип: http://6jvf3b.axshare.com/#g=1&p=1_0_0_0_items_card

(футер, внизу страницы)

Футер состоит из:


  1. Разделов “Обслуживание клиентов”, “О нас, “Покупай на Marketplace.com ”, “Продавай на Marketplace.com ”, “Реклама” и их подразделов. Являются ссылками и ведут в соответствующие разделы/подразделы.

  2. Блока “Наши приложения” (ссылка на загрузку приложений);

  3. Блока “Следите за нами”. Иконки соц. сетей, при нажатии - переход на соответствующий сайт (открывается в новой вкладке).

  4. Блока “язык” английский, арабский, китайский, русский (каждый написан на соответствующим языке)

  5. Блока подписки “Подписаться на товары или услуги”:

  • Поле для ввода ключевых слов (в поле по-умолчанию - подсказка «введите категорию, товар или услугу», которая исчезает при вводе символов). При вводе первых букв или символов автокомплитом выпадают категории, товары или группы товаров, на которые можно подписаться;

  • Кнопка “Подписаться”. Если пользователь авторизован, то на ту почту к которой привязан аккаунт приходит сообщение о подписки на рассылку по ключевым словам.

  • Если пользователь не авторизован, то показывается модольное окно с авторизацией и регистрацией




  1. Блок “Нам доверяют”, состоит из логотипов партнеров проекта;

  2. Блок “ Marketplace group”, состоит из ссылок на сторонние проекты;

  3. Копирайт;


6.3 Пагинация


Прототип: http://6eao6f.axshare.com/#g=1&p=10_0_0_0_catalog_3uroven_items

(каталог, внизу страницы)







Слева от пагинации находится переключатель количества отображения карточек товаров или услуг на странице (15 - выбрано по-умолчанию, 30 штук, 60 штук).
В зависимости от выбранного количества, отображается пагинация. На первой странице не активна кнопка “предыдущая страница”, на последней - “следующая страница”. Начиная со страницы 4, неактивная ссылка на текущую страницу всегда находится посередине пагинации, позволяя выбрать 2 страницы вперед и назад. Первая и последняя страницы всегда остаются на месте.


  • Номера страниц;

  • Элементы управления, при нажатии переход на следующею страницу;

  • Инпут “Перейти на страницу” (валидация - только цифры);

  • Кнопка “Перейти” - по клику переход на указанную в инпуте страницу.


6.4 Регистрация/Авторизация
6.4.1 Модальное окно “Авторизация”


Актуальный макет: http://6jvf3b.axshare.com/#g=1&p=4_0_0_0_glavnaya

Имеет общий вид, для всех страниц сайта:




состоит из:

  1. Инпут “E-mail” (при заполнении поля происходит проверка валидности (правильности) введенного e-mail;

  2. Инпут “Пароль” при заполнении поля, символы отображаются как звёздочки; Происходит проверка пары логин и пароль, на наличие в системе. Если таковой нет показывается текстовое сообщение.

  3. Ссылка “Забыли пароль?”, при нажатии закрывается окно “Авторизации” и открывается модальное окно восстановления пароля (6.4.2 Восстановление пароля);

  4. Кнопка “Войти”; Является не активной пока не будут заполнены оба поля (e-mail и пароль)

  5. При 3х кратном неправильном вводе пары логин и пароль появляется каптча:

  6. При правильном вводе пары логин и пароль происходит авторизация в системе и пользователь остается на той странице на которой он открыл этот поп-ап



  1. Блок “Соц. сети” (иконки социальных сетей, при клике на которые происходит вход через “Фейсбук”, “Вконтакте”, “Гугл+”) при нажатии - модальное окно входа через соответствующую соц.сеть с помощью API;

  2. Кнопка “Зарегистрироваться”, при нажатии открывается раздел Регистрации.



6.4.2 Модальное окно “Восстановление пароля”





  1. Текстовое объяснение;

  2. Поле для ввода e-mail (при заполнении поля происходит проверка валидности на содержание собачки, а также содержание такого емала в системе) ;




  1. Кнопка «Восстановить» (становиться активной только после ввода корректного e-mail). После введения e-mail и нажатия кнопки “Восстановить” на указанную почту отправляется ссылка для перехода на форму создания нового пароля.



6.4.3 Страница восстановления пароля


актуальный макет:

http://6eao6f.axshare.com/#g=1&p=19_5_1_2_pass_change_error

http://6eao6f.axshare.com/#g=1&p=19_5_1_0_pass_change_new

http://6eao6f.axshare.com/#g=1&p=19_5_1_1_pass_change_congrad







  1. Инпут “Придумайте пароль”;

  2. Инпут “Подтвердите пароль” (с функцией сравнения корректности ввода пароля в оба поля).

  3. Полоса сложности пароля. Имеет 3 статуса слабый (до 6-ти символов, красный), хороший (до 9-ти символов, желтый) и сильный (от 9-ти и больше символов, зеленый) Если символов меньше 6-ти, то - пароль не подходит, о чем должна гласить соответствующая надпись.

  4. Кнопка “Подтвердить” (активна при корректном заполнении инпутов), если пароли не совпадают то показывается индикатор, того что пароли не совпадают. Если все поля введены верно то кнопка становится активной:



По клику на кнопку “Подтвердить” показывается страница




6.4.4 Страница “Регистрация”


актуальный макет:

http://6eao6f.axshare.com/#g=1&p=19_0_0_0_reg_step_1



Состоит из:



  • хедера


6.4.5 Шаг 1. “Проверка email”


актуальный макет: http://6eao6f.axshare.com/#p=19_0_0_0_reg_step_1&g=1 http://6eao6f.axshare.com/#g=1&p=19_1_0_0_reg_step_1_conf





  1. Инпут “E-mail”, под полем - подсказка “Используется для входа на сайт, пожалуйста вводите существующий емаил”;

  2. Инпут “Пароль”;

  3. Инпут “Подтвердить пароль” (с функцией сравнения корректности ввода пароля в оба поля);

  4. Полоса сложности пароля. Имеет 3 статуса слабый (до 6-ти символов, красный), хороший (до 9-ти символов, желтый) и сильный (от 9ти и больше символов, зеленый) Если символов меньше 6-ти, то пароль не подходит.

  5. Кнопка “Далее” (активна при валидном и корректном заполнении инпутов), При правильном заполнении инптов показывается окно с сообщением о том что на емаил было отправлено письмо. После того как пользователь перейдет по ссылки из письма он сможет продолжить регистрацию и ему показывается следующий шаг “Выбор роли”



    1. ссылка “Письмо не пришло, отправьте еще раз” можно повторно только 3 раза, после этого выскакивает сообщение “Количество высланных писем превысило лимит, начните регистрацию заново, возможно вы неверно ввели email ”




  1. Ссылка “Войти”, при клике - модальное окно “Авторизация”;



6.4.6 Шаг 2. Страница “Выбор роли”


актуальный макет: http://6eao6f.axshare.com/#g=1&p=19_2_0_0_reg_step_2_select_role





  1. Блоки “Покупатель”, “Продавец”, каждый состоит из:

  • Изображение;

  • Название;

  • Текстового описания.

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

    • Покупатель, создается ЛК покупателя

    • Продавец, создается ЛК продавца


6.4.7 Шаг 3. Страница контактов “Покупателя”


актуальный макет: http://6eao6f.axshare.com/#p=19_3_0_0_reg_step_3_buyer&g=1


    1. Селект “Местоположение” (изначально выбирается автоматически (гео локация), можно изменить);

    2. Инпуты “Контактное имя” (Имя, Фамилия); Проверка на отсутствие чисел

    3. Инпут “Название компании”; не обязательное поле

    4. Инпуты “Телефон” (код страны, код оператора, номер телефона); Проверка на отсутствие букв и 11 символов

    5. Кнопка “Завершить регистрацию”; Активна при правильных заполненных формах

    6. Чекбоксы “Соглашение” и “Подписка” (уже отмечены, без возможности убрать галочку).

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

6.4.8 Шаг 3.Страница контактов “Продавец”


актуальный макет: http://6eao6f.axshare.com/#g=1&p=19_3_1_0_reg_step_3_suppliers

Состоит из:



  • Селект “Местоположение” (изначально выбирается автоматически (гео локация), можно изменить);

  • Инпуты “Контактное имя” (Имя, Фамилия); Проверка на отсутствие чисел

  • Инпут “Название компании”; не обязательное поле

  • Инпуты “Телефон” (код страны, код оператора, номер телефона); Проверка на отсутствие букв и 11 символов

  • Селект “Вид деятельности”. Определяются администратором.



  • Селект “Продукты”. Select2 Варианты основываются на каталоге товаров. Определяются администратором

  • Селект “Услуги”. Select2 Варианты основываются на каталоге услуг. Определяются администратором

  • Кнопка “Завершить регистрацию”; Активна при правильных заполненных формах

  • Чекбоксы “Соглашение” и “Подписка” (уже отмечены, без возможности убрать галочку).

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

6.4.9 Финальное окно


актуальный макет: http://6eao6f.axshare.com/#g=1&p=19_4_0_0_reg_congrats


Состоит из:

  • заголовка

  • текстового блока

  • ссылок ведущих на соответствующие разделы сайта


Поделитесь с Вашими друзьями:
1   2   3   4   5   6   7   8   9   ...   25


База данных защищена авторским правом ©vossta.ru 2019
обратиться к администрации

    Главная страница