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

Битрикс24

www.bitrix24.ru

30
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

11
Flowlu

Flowlu

flowlu.ru

10
GIFTD

GIFTD

giftd.tech

9
Aword

Aword

Приложение для изучения английских слов

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Eczo.bike

Eczo.bike

www.eczo.bike

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

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

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