Объекты - Kir Sites

[Pick the date]
[Year] Спецификация
Описание проекта тут…
Для сайта компании …
Created with Axure RP Pro
1/20/16
[Спецификация]
1. Объекты
1.1. Список объектов
1)
2)
3)
4)
5)
6)
7)
8)
9)
10)
11)
12)
13)
14)
15)
16)
17)
18)
19)
20)
21)
22)
23)
Левое меню
Шапка
Подвал
Главная - промо блок
Главная - новые поступления
Главная - акции и шоурум
Главная - бренды
Товар в подгруппе
Заголовок подгруппы каталога
Группы товаров
Новинки в группах
Панель фильтров подгрупп
Карточка товара
Карточка товара - правый блок
Корзина товаров
Оформление заказа
Панель управления
Личный кабинет
Мои заказы
Мои заявки
Мои документы
Поддержка
Новость в каталоге
Page 2
1/20/16
[Спецификация]
1.2. Левое меню
1.2.1. Пример интерфейса
Page 3
1/20/16
[Спецификация]
Menu Object
Menu Object
1.2.2. Объекты сайта
Метка Название
36
Вертикальное
меню
Описание
Дизайн
Вертска
Программирование
Меню категорий
товаров с
вылетающим
подменю
Строгое блочное
оформление
Блок с динамичным
наполнением.
Предполагается
растягивание.
Блок вывод названия категорий
товаров 1-го уровня из БД.
Page 4
1/20/16
[Спецификация]
Метка Название
Описание
Дизайн
Вертска
Программирование
37
Подменю
Всплывающее
Простое блочное
меню подкатегорий оформление
товаров.
Блок формируется
динамически.
показательная верстка с
помощью ява - скрипта.
Меню выводит из каталога
названия групп товаров 2-го
уровня, ведущих при клике на
карточку товара
39
Изображение
Изображение
категории
Тематическая
иконка категории
Источники света
Изображение в формате
gif или png
-
40
Изображение
Изображение
категории
Тематическая
иконка категории
Источники света
Изображение в формате
gif или png
-
41
Изображение
Изображение
категории
Тематическая
иконка категории
Источники света
Изображение в формате
gif или png
-
Page 5
1/20/16
[Спецификация]
1.3. Шапка
1.3.1. Пример интерфейса
1.3.2. Объекты сайта
Метка Номер
объекта
Название
Описание
Дизайн
Вертска
Программирование
1
Карта сайта
Карта сайта
Тематическое
изображение
Оптимизированный GIF
При клике ведет
пользователя на страницу с
картой сайта
2
Главная
Ссылка на
главную
страницу
Тематическое
изображение
Оптимизированный GIF
При нажатии ведет
пользователя на главную
страницу
3
Логотип
компании
Изображение
логотипа в
формате jpeg,
gif, png
Логотип
прилагается к
спецификации
Сверстать в лучшем
качестве
При нажатии ведет
пользователя на главную
страницу
4
Главное меню
Содержит
название
пунктов меню
Перед каждым
пунктом
необходимо
установить bullit.
При наведении на пункт
он сам и bullit перед
ним должны
стилистически
выделятся.
Меню формируется из
системы управления. Ссылки
меню ведут на типовые
текстовые страницы, кроме
раздела "Контакты".
5
Изображение
Изображение
корзины
Тематическая
иконка
Иконка в формате gif
или PNG
-
6
Ссылка
корзины
товаров
Ссылка на
страницу с
корзиной
товаров.
-
Выделять при
наведении
При добавлении первого
товара фраза ПУСТО
меняется на 1 и далее
формируется согласно колва позиций в корзине.
7
Изображение
Изображение
заметок
Тематическая
иконка
Иконка в формате gif
или PNG
-
8
Ссылка
страницы
заметок
Ссылка ведет
на страницу с
заметками о
товарах.
-
Выделять при
наведении
При добавлении первого
товара фраза ПУСТО
меняется на 1 и далее
формируется согласно колва позиций в заметках.
9
Изображение
Изображение
ключа
Тематическая
иконка
Иконка в формате gif
или PNG
10
Ссылка на
личный
кабинет
Ведет на
персональный
раздел
посетителя.
-
Выделять при
наведении
11
Изображение
Изображение
лица
Тематическая
иконка
Иконка в формате gif
или PNG
12
Регистрация
нового
пользователя
Ссылка на
страницу с
формой
регистрации
-
Выделять при
наведении
Page 6
При клике проверяет
наличие авторизации и
переводит посетителя в
персональный разедел,
иначе
-
1/20/16
[Спецификация]
Метка Номер
объекта
Название
Описание
Дизайн
Вертска
Программирование
13
Поле поиска
Текстовое поле
поиска товара
-
Без фокуса в поле
стоит фраза "Поиск..." в
фокусе надпись
стирается для ввода
наименования.
Текстовое поле для общего
поиска по сайту. Вводится
любая информация о
компании и услугах.
14
Кнопка поиска
Кнопка поиска
-
Submit
Выполняет поиск указанного
в поле запроса по всему
сайту. Переносит посетителя
на страницу результата
поиска.
15
Телефоны
Номера
телефонов
Гарнитуры
шрифтов см. в
ТЗ
Статичный блок с
текстом. Города и
номера должны быть
оформелны разным
стилем.
Номера телефонов, таке как
и города необходимо
задавать в системе
управления
1.3.3. Мои заметки
1.3.3.1. заметки
Пример интерфейса
Объекты сайта
Метка Название
Описание
3
Удаление
записи
Удаление записи в
таблице
6
Таблица
закладок
Таблица содержащая
закладки на товары
Дизайн Вертска
-
Динамический
блок
Page 7
Программирование
В таблице формируется список закладок на товары.
Максимально на страницу выводится по 12
позиций.
1/20/16
[Спецификация]
1.4. Подвал
1.4.1. Пример интерфейса
1.4.2. Объекты сайта
Метка Название Описание
1
Подвал
Подвал
сайта
Дизайн
Вертска
Строго оформленный
блок без изображений.
Фиксированный статичный блок с
текстовыми областями. Шрифты в подвале
выполнить отдельным стилем.
Page 8
Программирование
1/20/16
[Спецификация]
1.5. Главная - промо блок
1.5.1. Пример интерфейса
1.5.2. Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
1
Промо
изображение
Промо фото
Фотография
размером 480 на
350
Оптимизированное
фото товара
При клике на фото посетитель
перенаправляется на страницу
товара или выбранную в системе
другую страницу.
2
Полоса
Полупрозначная
полоса
"Полупрозрачка"
-
-
3
Промо наименование
Наименование
товара или
предложения
-
Отдельный класс с
При клике на ссылке посетитель
жирным шрифтом.
перенаправляется на страницу
Текст является ссылкой. товара или выбранную в системе
другую страницу.
4
Промопрокрутка
Промо-прокрутка
вверх
Плавный,
подушечный
Оптимизированный GIF
Листает товары вверх: вместе с
выбранным товаров в данном
направлении листаются и минифотографии.
5
Промопрокрутка
Промо-прокрутка
вниз
-
Оптимизированный GIF
Листает товары вниз: вместе с
выбранным товаров в данном
направлении листаются и минифотографии.
6
Миниатюра
Миниатюрная
фотография товара
или предложения
Фото 40 на 40
Оптимизированная
фотография
Уменьшеное фото от
оригинального размера до 40 на
40. При выборе всплывает в
области основной фотографии
выше.
Page 9
1/20/16
[Спецификация]
1.6. Главная - новые поступления
1.6.1. Пример интерфейса
1.6.2. Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
1
Название
товара
Название товара
-
Ссылка, без
выделения при
наведении.
При клике на ссылку пользователь
перенаправляется на страницу карточки
товара.
2
Купить
Ссылка "Купить"
-
Стандартный класс
ссылок
При клике добавляет выбранный товар в
корзину.
5
Изображение
Фотография
товара
Размер 160 на
100
Оптимизированный
GIF
При клике на фото пользователь
перенаправляется на страницу карточки
товара.
13
Цена
Цена товара
-
Отдельный класс
оформления
Формируется в CMS для каждого товара.
14
Все
поступления
Ссылка на
страницу новинок
-
Ссылка с выделенным Перенаправляет пользователя на
цветом
страницу с выборкой всех новых
поступлений из БД.
15
Проккрутка
Горизонтальная
прокрутка товаров
Миниатюрные
плавные кнопки
Оптимизированный
GIF
Page 10
При нажатии на левый или правый
указатель происходит прокрутка
представленных выше товаров в
соответствующем направлении.
1/20/16
[Спецификация]
1.7. Главная - акции и шоурум
1.7.1. Пример интерфейса
1.7.2. Объекты сайта
Метка Номер
объекта
Название
Описание
Дизайн
Вертска
Программирование
1
Текст акции
Краткое
описание
рекламной
акции с датой
создания.
-
Общий стиль
оформления текста.
Текст является ссылкой.
При клике выполняется
переход на страницу с
описанием акции.
2
Все акции
Архив акций
сайта
-
Выделять при
наведении
Ссылка ведет на страницу
выборкой всех доступных
рекламных акций.
3
Подписка на
рассылку
Подписка на
рассылку
рекламных
акций
-
Выделять при
наведении.
При клике вызывает скрытый
блок с формой подписки на
рассылку акций.
5
Изображение
акции
Изображение
акции
Фото
размером 100
на 70
Оптимизированное
изображение
При клике выполняется
переход на страницу с
описанием акции.
6
Блок акции
Блок с двумя
последними
рекламными
акциями
Разделитель
между двумя
акциями
Динамичный блок
Блок формируется из
последних двух акций с
описанием и изображением.
7
Текст новости Краткое
содержание
новости с датой
создания.
-
Текст новости создается
отдельным классом
ссылок. Блок новостей
формируется
динамически.
При клике на краткое описание
пользователь переносится на
страницу события. На главной
странице выводится по 3
последних события.
8
Все новости
Архив новостей
-
Необходимо выделять
при наведении.
При клике ведет на страницу
архива новостей.
10
Рассылки
Ссылка на
подписку
рассылки
новостей.
-
Необходимо выделять
при наведении.
При клике вызывает скрытый
блок с формой подписки на
новости.
Page 11
1/20/16
[Спецификация]
Метка Номер
объекта
Название
Описание
Дизайн
Вертска
Программирование
12
Изображение
Изображение
для конкретной
новости
Фотография
Оптимизированное
мини-фото
Изображение загружается для
каждой новости и при клике
ведет на страницу с описанием
события.
14
Блок акции
Блок с двумя
последними
рекламными
акциями
Разделитель
между двумя
акциями
Динамичный блок
Блок формируется из
последних двух акций с
описанием и изображением.
1.7.3. Подписка
1.7.3.1. форма подписки
Пример интерфейса
Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
1
Рассылка
новостей
Форма рассылки
новостей
Блок с
плавным
градиентом
Статичный блок
с объектами
формы
Блок содержит форму с объектами
3
Кнопка
Отправить
Отправляет
данные формы
-
Объект submit
При нажатии заносит изменения из поля в БД
рассылок и закрывает блок формы.
4
Поле ввода
e-mail
В поле вводится
адрес почты
подписанта.
-
Объект textfield
Введенный в поле адрес почты проверяется на
достоверность (@), иначе выводится alert ();. Email указанный в поле заносится в БД рассылок.
5
Отписка
Указатель отписки
от рассылки
новостей.
-
-
При выбоче указателя и нажатии на кнопку
"Отправить" происходит удаление e-mail
указанного в поле из БД рассылок.
Описание
Дизайн
Вертска
Программирование
1.7.4. Подписка
1.7.4.1. форма подписки
Пример интерфейса
Объекты сайта
Метка Название
1
Рассылка
новостей
Форма рассылки
новостей
Блок с
плавным
градиентом
Статичный блок
с объектами
формы
Блок содержит форму с объектами
3
Кнопка
Отправить
Отправляет
данные формы
-
Объект submit
При нажатии заносит изменения из поля в БД
рассылок и закрывает блок формы.
Page 12
1/20/16
[Спецификация]
Метка Название
Описание
Дизайн
Вертска
Программирование
4
Поле ввода
e-mail
В поле вводится
адрес почты
подписанта.
-
Объект textfield
Введенный в поле адрес почты проверяется на
достоверность (@), иначе выводится alert ();. Email указанный в поле заносится в БД рассылок.
5
Отписка
Указатель отписки
от рассылки
новостей.
-
-
При выбоче указателя и нажатии на кнопку
"Отправить" происходит удаление e-mail
указанного в поле из БД рассылок.
Page 13
1/20/16
[Спецификация]
1.8. Главная - бренды
1.8.1. Пример интерфейса
1.8.2. Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
1
Область
прокрутки
Активная область
прокрутки
логотипов брендов
влево.
Полупрозрачная
планка
Оптимизированный GIF
При наведении указателя
автоматически листает логотипы
бренжов в заданном
направлении.
2
Полупрозрачная
планка
Активная область
прокрутки
логотипов брендов
вправо.
Полупрозрачная
планка
Оптимизированный GIF
При наведении указателя
автоматически листает логотипы
бренжов в заданном
направлении.
3
Логотип бренда
Изображение
логотипа бренда
Логотип 100 на
90
Оптимизированное
изображение.
Динамичный блок.
При клике пользователь
переходит на страницу
выбранного бренда.
Page 14
1/20/16
[Спецификация]
1.9. Товар в подгруппе
1.9.1. Пример интерфейса
1.9.2. Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
1
Название
товара
Название товара и
категории
-
Ссылка, без выделения
при наведении.
При клике на ссылку пользователь
перенаправляется на страницу карточки
товара.
2
Изображение
Фотография товара
Размер
160 на 100
Оптимизированный GIF
При клике на фото пользователь
перенаправляется на страницу карточки
товара.
3
Краткое
описание
Краткое описание
товара
4
Цена
Цена товара
-
Отдельный класс
оформления
Формируется в CMS для каждого
товара.
5
Купить
Ссылка "Купить"
-
Стандартный класс
ссылок
При клике добавляет выбранный товар
в корзину.
6
Запомнить
Ссылка "Запомнить"
-
Стандартный класс
ссылок
При клике создает новую заметку о
товаре
7
Подробнее о
товаре
Ссылка на раздел о
товаре
-
Выделять при наведении При клике ведет на карточку товара.
8
Есть в наличии
Статус наличия
товара
-
-
Статус устанавлявается в БД для
товаров или групп.
9
Сравнить
Указатель выбора
товаров для
сравнения
-
Checkbox
Запоминает товары для вывода на
отдельную страницу сравнения
Page 15
1/20/16
[Спецификация]
1.10. Заголовок подгруппы каталога
1.10.1. Пример интерфейса
1.10.2. Объекты сайта
Метка Название
Описание
Дизайн Вертска
Вспомогательная
навигация по каталогу
товаров
-
Оформить
отдельным стилем
ссылок
Программирование
1
Хлебная крошка
Ссылки названий ведут на
соответствующие разделы каталога.
2
Горизонтальный
разделитель
3
Листалка
Список доступных
страниц каталога по
данной категории
товаров
-
Оформить
отдельным стилем
ссылок.
Для удобства пользователя выводится по
10 страниц из БД. Ссылка троеточия
выполняет переход на следующие 10
страниц. Ссылка "Последняя" выводит
последнюю страницу с товарами.
4
Счетчик кол-ва
страниц
Счетчик кол-ва
страниц в днной
категории
-
-
Просматриваемая десятка страниц
выделяется жирным жрифтом.
5
Заголовок
каталога
Заголовок каталога
Оптимизированный
GIF
Page 16
1/20/16
[Спецификация]
1.11. Группы товаров
1.11.1. Пример интерфейса
1.11.2. Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
1
Название
товара
Название
товара
-
Ссылка, без выделения
при наведении.
При клике на ссылку пользователь
перенаправляется на страницу карточки
товара.
3
Изображение
Фотография
товара
Размер 160
на 100
Оптимизированный GIF
При клике на фото пользователь
перенаправляется на страницу карточки
товара.
Page 17
1/20/16
[Спецификация]
1.12. Новинки в группах
1.12.1. Пример интерфейса
1.12.2. Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
1
Название товара
Название товара
-
Ссылка, без выделения
при наведении.
При клике на ссылку пользователь
перенаправляется на страницу
карточки товара.
2
Изображение
Фотография
товара
Размер
100 на 75
Оптимизированный GIF
При клике на фото пользователь
перенаправляется на страницу
карточки товара.
3
Цена
Цена товара
-
Отдельный класс
оформления
Формируется в CMS для каждого
товара.
4
Все новинки
Ссылка на
страницу новинок
-
Ссылка с выделенным
цветом
Перенаправляет пользователя на
страницу с выборкой всех новых
поступлений из БД.
7
Горизонтальный
разделитель
Оптимизированный GIF
12
Горизонтальный
разделитель
Оптимизированный GIF
13
Горизонтальный
разделитель
Оптимизированный GIF
Page 18
1/20/16
[Спецификация]
Метка Название
14
Новинки
Описание
Дизайн
Вертска
Программирование
Блок с новыми
поступлениями
-
Динамический блок.
В блоке выводятся 4 последних
новинки.
Page 19
1/20/16
[Спецификация]
1.13. Панель фильтров подгрупп
1.13.1. Пример интерфейса
1.13.2. Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
1
Список
производителей
Список всех
производителей в
группе
-
Общий класс
ссылок. Выделять
при наведении.
При клике на названии происходит
выборка товаров из группы по
данному производителю.
2
Хиты продаж
Ссылка на наиболее
покупаемые товары
Перед ссылкой
размещается
тематическое
изображение
Выделяется при
наведении.
Общий класс
ссылок.
При наведении переносит
пользвателя на страницу с
выборкой всех лучших товаров.
3
Новинки
Ссылка на раздел с
новыми
поступлениями.
Перед ссылкой
размещается
тематическое
изображение
Выделяется при
наведении.
Общий класс
ссылок.
При наведении переносит
пользвателя на страницу с
выборкой всех новых товаров.
4
Сравнить
товары
Ссылка на страницу
сравнения товаров
-
Отдельный класс
ссылок
Ссылка ведет на страницу
сравнения товаров, имеет счетчик
позиций = кол-ву выбранных
товаров в каталоге.
Page 20
1/20/16
[Спецификация]
Метка Название
Описание
Дизайн
Вертска
Программирование
Общий класс
ссылок. Выделять
при наведении.
При клике на названии происходит
выборка производителей по
данной категории товара.
5
Категории
товаров
Ссылки на категории
товаров в данной
группе
-
6
Блок сортировки
Блок сортировки
каталога группы
товаров.
Строгий блок без
заливки с
точечным
обрамлением
7
Блок доп.ссылок
8
Выбор
сортировки
9
Выбор по
наличию
Строгий блок без
заливки с
точечным
обрамлением
Статичный блок с
точечным
обрамлением
Указатель выбора
сортировки по цене по
убыванию
-
-
При выборе указателя происходит
сортировка товаров в каталоге по
цене по убыванию.
Указатель группировки
товаров только в
наличии на данный
момент.
-
-
При выборе указателя происходит
вывод товаров в каталоге только
со статусом "Есть в наличии".
Page 21
1/20/16
[Спецификация]
1.14. Карточка товара
1.14.1. Пример интерфейса
1.14.2. Объекты сайта
Метка Название
1
Хлебная крошка
3
Горизонтальный
разделитель
5
Название товара
Описание
Дизайн
Вертска
Программирование
Вспомогательная
навигация по каталогу
товаров
-
Оформить отдельным
стилем ссылок
Ссылки названий ведут на
соответствующие разделы каталога.
Оптимизированный
GIF
Название товара и
категории
-
Ссылка, без
выделения при
наведении.
Page 22
При клике на ссылку пользователь
перенаправляется на страницу
карточки товара.
1/20/16
[Спецификация]
Метка Название
Описание
Дизайн
Вертска
Программирование
6
Изображение
Фотография товара
Размер
220 на
180
Оптимизированная
фотография
При клике на фото открывается
всплывающее окно с фотосессией.
8
Цена
Цена товара
-
Отдельный класс
оформления
Формируется в CMS для каждого
товара.
9
Горизонтальный
разделитель
10
Скидка
11
Горизонтальный
разделитель
12
Название товара
Название товара
-
Ссылка, без
выделения при
наведении.
При клике на ссылку пользователь
перенаправляется на страницу
карточки товара.
14
Изображение
Фотография товара
Размер
100 на 85
Оптимизированный
GIF
При клике на фото пользователь
перенаправляется на страницу
карточки товара.
15
Цена
Цена товара
-
Отдельный класс
оформления
Формируется в CMS для каждого
товара.
16
Изображение
Фотография товара
Размер
160 на
100
Оптимизированный
GIF
При клике на фото пользователь
перенаправляется на страницу
карточки товара.
17
Изображение
Фотография товара
Размер
160 на
100
Оптимизированный
GIF
При клике на фото пользователь
перенаправляется на страницу
карточки товара.
18
Изображение
Фотография товара
Размер
160 на
100
Оптимизированный
GIF
При клике на фото пользователь
перенаправляется на страницу
карточки товара.
19
Цена
Цена товара
-
Отдельный класс
оформления
Формируется в CMS для каждого
товара.
20
Цена
Цена товара
-
Отдельный класс
оформления
Формируется в CMS для каждого
товара.
21
Цена
Цена товара
-
Отдельный класс
оформления
Формируется в CMS для каждого
товара.
22
Название товара
Название товара
-
Ссылка, без
выделения при
наведении.
При клике на ссылку пользователь
перенаправляется на страницу
карточки товара.
24
Мини-фото
Прочие фотографии
объекта
Размер
40 на 40
Оптимизированное
фото
При клике на фото открывается
всплывающее окно с фотосессией.
28
Доставка
Ссылка на страницу
доставки товара
-
Отдельный класс
шрифта
Ссылка
29
Начичие товара
Показатель наличия
товара на складе
-
Отдельный класс
оформления текста.
30
Код товара
Код товара
-
Минимальный, едва
заметный шрифт.
Код присваевается каждому товару в
CMS
31
Доставка по
городу
Доставка по Москве
-
Отдельный класс
шрифта
Текст привязки возможной доставки
товара.
32
Кнопка "В
корзину"
Добавляет новый
товар в корзину
-
Button
При нажатии добавляет товар в
корзину.
33
Характеристики
товара
Таблица с
техническими
характеристиками
-
Таблица только с
нижней границей
Выводит технические характеристики
товара из БД.
34
Описание товара
Описание товара
-
Стандартный класс
шрифта
Описание товара из БД
35
Аксессуары
Дополнительный блок
с аксессуарами
-
Динамический блок
Блок показывается если есть хотя бы
один аксессуар к данному товару в БД.
Для просмотра выводится по 4
позиции.
Оптимизированный
GIF
Скидка
Отдельный класс
оформления
-
Формируется в CMS для каждого
товара. Определяется после
авторизации для каждого клиента
отдельно.
Оптимизированный
GIF
Page 23
1/20/16
[Спецификация]
Метка Название
Описание
Дизайн
Вертска
Программирование
36
Горизонтальный
разделитель
Оптимизированный
GIF
37
Цена
Цена товара
-
Отдельный класс
оформления
Формируется в CMS для каждого
товара.
38
Доставка по
городу
Доставка по Москве
-
Отдельный класс
шрифта
Текст привязки возможной доставки
товара.
Page 24
1/20/16
[Спецификация]
1.15. Карточка товара - правый блок
1.15.1. Пример интерфейса
1.15.2. Объекты сайта
Метка Номер
Название
объекта
Описание
Дизайн
Вертска
Программирование
Выделять при
наведении
Ссылка ведет на типовую
текстовую страницу
Ссылка ведет на типовую
текстовую страницу
1
Подробнее о
доставке
Ссылка на страницу
о доставке
2
Инсталляция
оборудования
Ссылка на раздел
об услугах по
инсталляции
оборудования
-
Выделять при
наведении
3
Версия для
печати
Ссылка на страницу
с версией для
печати товара
-
Выделять при
наведении
Page 25
1/20/16
[Спецификация]
Метка Номер
Название
объекта
Описание
Дизайн
Вертска
Программирование
12
Горизонтальный
разделитель
Оптимизированный
GIF
13
В интернетмагазине
Ссылка купить в
интернет - магазине
-
Общий класс
ссылок. Выделять
при наведении.
При клике добавляет
данный товар в корзину.
14
В Москве
Ссылка на страницу
контактов
-
Общий класс
ссылок. Выделять
при наведении.
-
20
Блок доп. ссылок Дополнительные
ссылки в карточке
товара
Обрамленны
блок
Статичный блок
-
21
Где купить
Блок доступных
точек продаж
Блок с
обрамлением
-
В блоке выводятся
доступные точки продаж
данного товара
22
Ссылка все
товары
Ссылка на страницу
с выборкой всех
альтернативных
товаров к данному
товару.
-
-
-
23
Альтернативные
товары
Блок с
альтернативными
товарами к данному
товару.
-
Динамический блок
с двумя колонками
Максимально выводить
по 6 альт.товаров из БД.
24
Рекомендации
по товару
Ссылка на блок
рекомендаций
Выделять при
наведении
При клике выводит слева
скрытый блок с
описанием рекомендации
к данному товару из БД.
25
Скачать Media
Pack
Изображение с
ссылкой на архив с
медиа-файлами и
документацией к
данному товару.
Оптимизированный
GIF
Изображение-ссылка на
архив прикрепляемый к
данному товару в CMS.
Выделяющийся
блок (возможно
баннер)
Page 26
1/20/16
[Спецификация]
1.15.3. Рекомендации
1.15.3.1. рекомендации по товару
Пример интерфейса
Page 27
1/20/16
[Спецификация]
1.16. Корзина товаров
1.16.1. Пример интерфейса
1.16.2. Объекты сайта
Метка Номер
объекта
Название
Описание
1
Оформить
заказ (1)
3
Дизайн
Вертска
Программирование
Кнопка
оформления заказа
(1)
Submit
Переход на страницу
оформления заказа
Хлебная
крошка
Вспомогательная
навигация по
каталогу товаров
-
Оформить отдельным
стилем ссылок
Ссылки названий ведут на
соответствующие разделы
каталога.
4
Удаление
записи
Удаление записи в
таблице
5
Удалить все
записи
Значек удаления
всех записей в
таблице
Тематическое
изображение
Оптимизированный PNG
При нажатии выводится
java promt(); для
подтверждения удаления
всех записей.
6
Таблица с
товарами
Таблица с
добавленными
товарами в корзину
Мягкие
границы
Колонка "Скидка"
выделяется отличным от
остальных колонок
заливкой как в заголовке
так и в ячейке.
7
Количество
единиц
Количество единиц
товара в корзине
-
-
Число влияет при
пересчете на итоговую
стоимость и сумму заказа
8
Пересчитать
Кнопка пересчета
суммы заказа
-
Button
Пересчитывает содержание
корзины исходя из поля
количества, скидки и цены
товара.
10
Итоговая
сумма
Итоговая сумма
заказа
-
Сумма оформляется
отдельным классом
шрифта
Суммарная стоимость всех
товаров в корзине.
Page 28
1/20/16
[Спецификация]
1.16.3. Способ доставки
1.16.3.1. доставка
Пример интерфейса
Page 29
1/20/16
[Спецификация]
1.17. Оформление заказа
1.17.1. Пример интерфейса
1.17.2. Объекты сайта
Метка Номер
объекта
Название
Описание
Дизайн Вертска
Программирование
1
Кнопка "Войти"
Кнопка входа в
личный кабинет
-
Submit
При нажатии происходит проверка
связки логина/пароля и выполняется
вход, иначе alert(); с уведомлением
2
Кнопка "Напомнить"
Кнопка напоминания пароля
button
При нажатии происходит проверка
логина и выполняется дублирование
пароля на почту + уведомление ниже,
иначе alert();
3
Еще не
зарегистрированы?
Ссылка на страницу
регистрации
-
Выделять
при
наведении
6
Логин
Поле ввода логина
-
textfield
В поле указывается логин
пользователя
7
Пароль
Поле ввода пароля
-
textfield
В поле указывается пароль
пользователя
8
Запомнить меня
Указатель установки cookies для
пользователя
-
В случае выбора указателя при входе
в кабинет запонимается логин и
пароль пользователя для
последующего обращения
Page 30
1/20/16
[Спецификация]
Метка Номер
объекта
Название
Описание
Дизайн Вертска
Программирование
9
Поле ввода логина
Поле ввода логина
для восстановления
пароля
-
В поле указывается и проверяется
логин пользователя.
1.17.3. уведомление
1.17.3.1. текст
Пример интерфейса
1.17.4. восстановление
1.17.4.1. восстановление пароля
Пример интерфейса
Page 31
textfield
1/20/16
[Спецификация]
1.18. Панель управления
1.18.1. Пример интерфейса
1.18.2. Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
4
Выход
Ссылка на выход из
личного кабинета.
5
Изменить
данные
Ссылка на
редактирование
данных регистрации
-
Выделять при
наведении.
При клике переводит пользователя
на редактирование данных
регистрации.
6
Блок
навигации
Навигация по модулям
кабинета
Строгий
обрамленный
блок.
В блоке возможны
дополнительные
модули.
Блок содержит ссылки на основные
модули личного кабинета.
7
Название
аккаунта
Название компании
для которой создан
аккаунт.
-
Отдельный класс
шрифта.
Данные выводятся из одноименного
поля "Название компании" в личном
кабинете.
Page 32
1/20/16
[Спецификация]
1.19. Личный кабинет
1.19.1. Пример интерфейса
1.19.2. Объекты сайта
Метка Номер
объекта
Название
Описание
Дизайн Вертска
2
Наши рассылки
Блок с доступными
рассылками по
темам
-
Заголовок и
описание рассылки
отдельным
размером шрифта.
Блок выводит все доступные
рассылки из БД.
3
Администратор
кабинета
Данные
пользователя администратора
-
-
Блок данных заполняемых при
регистрации
4
Ссылка на блок
реквизитов
Ссылка на блок
реквизитов
Выделять при
наведении
При клике выводит скрытый блок
с реквизитами компании для
редактирования.
7
Ссылка на блок
реквизитов
Ссылка на блок
реквизитов
Выделять при
наведении
При клике выводит скрытый блок
с реквизитами компании для
редактирования.
Page 33
Программирование
1/20/16
[Спецификация]
1.19.3. реквизиты
1.19.3.1. реквизиты
Пример интерфейса
Page 34
1/20/16
[Спецификация]
1.20. Мои заказы
1.20.1. Пример интерфейса
1.20.2. Объекты сайта
Метка Номер
объекта
Название
Описание
Дизайн Вертска
Программирование
1
Содержание
заказа
Ссылка на
содержание заказа
-
-
При клике открывает всплывающее
окно с содержанием заказа.
3
Открыть
список
Ссылка на блок с
готовыми
документами к
заказу.
-
Выделять при
наведении
Ссылка открывает скрытый блок с
сформированными документами в CMS
к lfyyjve заказу
4
Фильтр
заказов
Фильтр сортировки
заказов
-
-
При выборе пункта списка проиходит
автоматическая сортировка заказов в
таблице по выбранному статусу.
5
Новый заказ
Ссылка на корзину
товаров.
-
Отдельный класс
оформления
ссылок.
Ссылка выводится только при наличии
хотя бы одного товара в корзине.
6
Содержание
заказа
Ссылка на
содержание заказа
-
-
При клике открывает всплывающее
окно с содержанием заказа.
7
Содержание
заказа
Ссылка на
содержание заказа
-
-
При клике открывает всплывающее
окно с содержанием заказа.
9
Открыть
список
Ссылка на блок с
готовыми
документами к
заказу.
-
Выделять при
наведении
Ссылка открывает скрытый блок с
сформированными документами в CMS
к lfyyjve заказу
10
Содержание
заказа
Ссылка на
содержание заказа
-
-
При клике открывает всплывающее
окно с содержанием заказа.
1.20.3. Сопутствующие документы
1.20.3.1. список документов
Пример интерфейса
Page 35
1/20/16
[Спецификация]
1.21. Мои заявки
1.21.1. Пример интерфейса
1.21.2. Объекты сайта
Метка Номер
объекта
Название
Описание
Дизайн
Вертска
Программирование
3
Фильтр
документов
Фильтр
сортировки
документов
-
-
При выборе пункта списка
проиходит автоматическая
сортировка документов в
таблице по выбранному типу.
5
Активное
изображение
"Удалить"
Кнопка
удаления
записи из
таблицы
Тематическое
изображение
удаления записи
Оптимизированный
GIF
Удаление выбранной записи в
таблице. Перед удалением
выводить подтверждение promt();
6
Активное
изображение
"Удалить"
Кнопка
удаления
записи из
таблицы
Тематическое
изображение
удаления записи
Оптимизированный
GIF
Удаляет все записи. Перед
удалением выводить
подтверждение promt();
Page 36
1/20/16
[Спецификация]
1.21.3. Текст проблемы
1.21.3.1. текст
Пример интерфейса
Page 37
1/20/16
[Спецификация]
1.22. Мои документы
1.22.1. Пример интерфейса
1.22.2. Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
4
Фильтр
документов
Фильтр
сортировки
документов
-
-
При выборе пункта списка проиходит
автоматическая сортировка документов
в таблице по выбранному типу.
6
Загрузка файла
Блок загрузки
нового файла
Блок с плавной
градиентной
заливкой
Статичный блок
При нажатии на кнопку "Загрузить"
происходит загрузка и добавление
данных файла в таблицу.
7
Фильтр
документов
Фильтр
сортировки
документов
-
-
При выборе пункта списка проиходит
автоматическая сортировка документов
в таблице по выбранному типу.
8
Активное
изображение
"Удалить"
Кнопка
удаления
записи из
таблицы
Тематическое
изображение
удаления записи
Оптимизированный
GIF
Удаление доступно и выводится только
для исходящих документов. Перед
удалением выводить подтверждение
promt();
9
Активное
изображение
"Удалить"
Кнопка
удаления
записи из
таблицы
Тематическое
изображение
удаления записи
Оптимизированный
GIF
Удаление доступно и выводится только
для исходящих документов. Перед
удалением выводить подтверждение
promt();
10
Фильтр
документов
Фильтр
сортировки
документов
-
-
При выборе пункта списка проиходит
автоматическая сортировка документов
в таблице по выбранному типу.
Page 38
1/20/16
[Спецификация]
1.23. Поддержка
1.23.1. Пример интерфейса
1.23.2. Объекты сайта
Метка Номер
объекта
Название
Описание
Дизайн
Вертска
Программирование
1
Отправить
сообщение
Ссылка на блок
отправки
сообщений
Обрамленная
ссылка
Графический блок с
ссылкой
Переключает на окно с
текущей перепиской
3
История
переписки
Ссылка на блок
Обрамленная
истории переписки ссылка
Графический блок с
ссылкой
Переключает на окно с
историей переписки
4
Фотография
менеджера
Фотография
менеджера
Фото 200 на
150 пикселей
Оптимизированное
фото
5
Блок
переписки
Окно переписки
пользователя с
менеджером
-
Динамический блок
Page 39
В блоке идет переписка с
менеджером компании в
реальном времени.
1/20/16
[Спецификация]
1.23.3. переписка
1.23.3.1. сообщение
Пример интерфейса
1.23.3.2. история
Пример интерфейса
Page 40
1/20/16
[Спецификация]
1.24. Новость в каталоге
1.24.1. Пример интерфейса
1.24.2. Объекты сайта
Метка Название
Описание
Дизайн
Вертска
Программирование
Размер 160
на 100
Оптимизированный
GIF
При клике на фото пользователь
перенаправляется на страницу карточки
товара.
1
Изображение
Фотография
товара
2
Краткое
описание
Краткое
описание товара
Page 41