Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Интерактивные интерфейсы. Цифровые постеры. Для оффлайна.
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
31
Эбиа

Эбиа

www.ebia.ru

16
Enlite

Enlite

enlited.ru

16
Amarket

Amarket

amarket.io

13
likearea

likearea

smm.li

12
RockinRobin

RockinRobin

www.rockinrobin.co

11
Perezvoni.com

Perezvoni.com

perezvoni.com

10
Cookiezz

Cookiezz

cookiezz.com.ua

10
Битрикс24

Битрикс24

www.bitrix24.ru

10
MuWID

MuWID

muwid.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Интерактивное древовидное меню

281 0 В избранное Сохранено
Авторизуйтесь
Вход с паролем
История одного интерфейса. Про то как распутать запутанное.

Как-то поступила заявка от одной крупной потребительской компании сделать программное решение, чтобы помочь их клиентам с выбором продукта. А компания эта делает порошки-шампуни, которых десятки - женщины как-то ещё разбираются, мужикам - всё одно:

b_5527a257e975d.jpg

Линейка продуктов для дома состояла из 33 наименований. Сводная таблица критериев выбора продукта выглядела в виде удручающей таблицы:

b_5527a3302634b.jpg

Суть такая, что выбираем куда применять средство (ванна, кухня или прачечная), затем уточняет основные свойства (отбеливатель, смягчитель, ручная стирка, машинная и тд), под-свойства (убивать бактерии, цветное бельё, создавать аромат) и в конце получаем рецепт.

Предложили первый вариант дизайна: горизонтальное параллакс-меню с графикой в векторном стиле.

b_5527a64bac092.jpg

b_5527a666cae06.jpg

b_5527a6c685252.jpg

Нажимаем на кнопки - добавляется новая колонка и экран смещается слева-направо вместе в фоном и передним планом.

Идея клиенты понравилась, и сразу же её и утвердили. Изменили только дизайн на строгие фотографии:

b_5527a74326bcc.jpg

То, что происходит в интерфейсе - это по сути поведение классического элемента TreeView, только размазанное на плоскости, с картинками и дополнительными полями. Т.е. как-бы пришлось заново создавать свой TreeView (который в последствие назвали TreeNavigator).

b_5527a8c927791.jpg

Далее - программирование.ПО мы пишем на .NET с использование технологии WPF для визуальной части интерфейсов.

Данные по выбору продукта из таблички в Excel переделали в XML своего формата:

b_5527a7bb5b973.jpg

Структура получилась сложная на вид, но в .NET есть класс System.xml, который позволяет с такой кашей справляться.

Немного покодили, порисовали интерфейс, тестировали - и за пару недель интерактивное приложение было готово.

Запускать решение предполагалось с 22-дюймового сенсорного ПК, установленного в торговом центре в рядках с этим всем разнообразием пластиковых бутылочек. Такое устройство купили у китайцев - не дорого и на удивление надёжно.

b_5527a9d3c5dd9.jpg

В режиме простоя там крутится интерактивная реклама продукции со скидкой.

Видео:

Это был пилотный проект. Казалось бы решение полезное - пришёл в супермаркет, подобрал себе моющий продукт с экране по свойствам, а не перечитывая все этикетки на бутылках. Да ещё и реклама скидок крутится. Но пока что такие вещи идут в массы с большим скрипом корпоративных шестерёнок.

Если у кого-то есть вопросы по технической реализации программной или аппаратной части - пишите, отвечу.

+3
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать