Руководство по возможностям

Цель данного руководства показать заказчикам возможности нашего решения и помочь покупателям эффективно его использовать.



Общие

  • Интерфейс оптимизирован для трех основных типов устройств:
  • Интерфейс поддерживает смену ориентации:
  • Все элементы дизайна выполнены с использованием векторной графики, которая хорошо выглядит на экранах любых размеров и разрешений
  • Структура сайта состоит из главной страницы и страниц продуктов по категориям:
  • Боковое меню со ссылками на доступные действия на странице:

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

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

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

Страница продуктов

На странице продуктов покупатель может просматривать, фильтровать, сортировать, сравнивать продукты.

  • Вид страницы зависит от типа устройства. На десктопе и планшете слева показывается фильтр (см. Фильтр). Для телефона в вертикальной ориентации одновременно показывается или список продуктов или фильтр:
  • Чтобы иметь больше места для списка продуктов можно скрыть фильтр:
  • Различные режимы просмотра для списка продуктов:
  • Сортировка:
  • Используется постраничная навигация для показа списка продуктов.
    Можно задать количество строк на странице. Если задано ”Auto” тогда количество строк будет подобрано в соответствии с высотой страницы.
  • Продукт что просматривался мигнет после возвращения из страницы продукта. Если он был изменен то он блеснет дважды (см.).

Фильтр

Фильтр является важной частью страницы продуктов. Он помогает покупателям скорее найти то, что они ищут.

Основные моменты:

  • Для каждого атрибута продукта создается соответствующая опция фильтра
  • Опции в пользовательском интерфейсе сгруппированы в иерархию с возможностью развернуть / свернуть
  • Переключение между основными / выбраными / всеми опциями
  • Действия очистить выбранную опцию и очистить весь фильтр

Опции фильтра (UI - пользовательский интерфейс):

  • Логический - используется для атрибутов с значениями Да / Нет. UI - флажок. Пример: Сенсорный дисплей
  • Список - используется для атрибутов со значением из списка возможных значений. UI - набор флажков. Пример: Производитель
  • Диапазон - используется для атрибутов с числовым значением. Покупатель может ввести значения для полей От и / или До. Также есть ползунок с 2 стрелками для значений От и До. Пример: Вес
  • Количество - используется для атрибутов со значением количества. UI - сочетание Логического и Диапазона. Пример - количество портов USB. Покупатель может выбрать флажок - чтобы показать продукты, которые имеют хотябы один порт. Или развернуть опцию для фильтрации количества с помощью интерфейса Диапазона
  • Список/Диапазон - используется для атрибутов с числовыми значениями, которые сгруппированы в диапазоны. UI - сочетание Списка и Диапазона. Пример - Цена. Покупатель может выбрать сгруппированый диапазон, используя интерфейс Списка. Или переключиться на использование интерфейса Диапазона

Страница продукта

Страница продукта предоставляет покупателю полную информацию о продукте.

  • Вкладки на странице продукта:
  • Вы можете перемещаться по списку товаров, используя ”предыдущий продукт / следующий продукт” кнопки на верхнем правом углу:

Фотографии продуктов

Фотографии являются одной из наиболее важных характеристик продукта.

  • Для удобства покупателей существует много способов доступа к фотографиям:
  • Покупатель может перелистывать фотографии непосредственно на плитке продукта, используя стрелки налево и направо:
  • Покупатель может открыть ”Галерею фотографий” непосредственно на странице продуктов. Для этого нажмите на значок размещенный в левом верхнем углу плитки продукта:
  • Для быстрой навигации по ”Галерее фотографий” покупатель может использовать галерею иконок, которая размещена или внизу или справа, чтобы максимизировать пространство для большой фотографии:
  • Чтобы уменьшить размер передаваемых данных, фотографии нарезаны в 4-х масштабах: иконка, маленький, средний, большой, шириной 50px, 135px 235px, и 500px соответственно, высота - пропорционально
  • Индекс текущей фотографии сохраняется при переходе на ”Галерею фотографий” или страницу продукта

Сравнение продуктов

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

Основные моменты:

  • неограниченное количество продуктов в списке сравнения
  • изменение порядка продуктов - переместить направо / налево, удалить
  • визуальная подсветка различных значений атрибутов
  • показать все атрибуты или только разные
  • показать основные, выбранные или все атрибуты
  • атрибуты отображаются в иерархическом формате с опциями ”развернуть все” и ”свернуть все”
  • возможность прокрутки в вертикальном и горизонтальном направлениях, с фиксированными зонами для имен атрибутов и названий продуктов