DIFF Clothes Customize Service
Приложение для создания собственного дизайна одежды и аксессуаров
Tilda Publishing
Fashion & Beauty
Desktop
Stand
Print
Multitouch
Front End
eCommerce
Hardware
Back End
Adobe AIR
Задача
Задача
Клиенту важно, чтобы пользователь получил инструмент с понятным, красивым и удобным интерфейсом, разработанным под сенсорный экран.
Из множества принтов, стикеров, надписей и собственных рисунков пользователь создаёт на мультитач-стенде в киоске изображения, которые наносятся термопечатью на футболки или чехлы для телефонов.
Дизайн
Дизайн
Перед началом создания дизайна пользователь выбирает заготовку футболки подходящего размера или чехла телефона под одну из моделей. В случае женских футболок есть возможность выбрать её тип. По имеющимся лекалам одежды мы отрисовывали модели с минимальным числом деталей, чтобы все внимание на себя забирал непосредственно дизайн, создаваемый пользователем.
Экран создания дизайна
Пользователь может помещать на футболку принты и стикеры, рисовать и писать текст.
Экран создания дизайна
Пользователь может помещать на футболку принты и стикеры, рисовать и писать текст.
Текст
Специально для удобного набора текста на устройстве была разработана клавиатура. Промежуточный вариант можно посмотреть и скачать с нашего Dribbble.
Чтобы упростить выбор шрифта, мы подобрали запоминающиеся эпитеты, набранные этим шрифтом.
Текст
Специально для удобного набора текста на устройстве была разработана клавиатура. Промежуточный вариант можно посмотреть и скачать с нашего Dribbble.
Чтобы упростить выбор шрифта, мы подобрали запоминающиеся эпитеты, набранные этим шрифтом.
Рисование
Интерфейс инструмента рисования сделан похожим на клавиатуру для набора текста. Такое решение помогло сделать дизайн всех панелей управления инструментами стилистически единым.
С инструментом рисования пользователь может выбирать кисти разных форм, цветов и размеров, править рисунок ластиком.
Рисование
Интерфейс инструмента рисования сделан похожим на клавиатуру для набора текста. Такое решение помогло сделать дизайн всех панелей управления инструментами стилистически единым.
С инструментом рисования пользователь может выбирать кисти разных форм, цветов и размеров, править рисунок ластиком.
Группировка кнопок управления
Группировка кнопок управления
После подбора размера кнопок и элементов дизайна требовалось удобно расположить их на экране. На это влияли два условия:
1
часть с заготовкой должна быть максимально большой;
2
пользователь не должен загораживать экран рукой во время создания дизайна.
Задача была решена переносом всех элементов управления вниз. Места на экране стало больше, а пользователю не нужно тянуться к кнопкам в верхней части экрана и заслонять заготовку с дизайном.
Разработка
Разработка
Adobe Integrated Runtime (AIR) — это кроссплатформенная среда от компании Adobe для запуска приложений, позволяющая использовать HTML/CSS, AJAX, Adobe Flash и Apache Flex для переноса веб-приложений (в том числе Rich Internet Application) на ПК и мобильные устройства.
Мы выбрали Adobe AIR, потому что:
1
у него высокая скорость разработки;
2
он обладает готовыми библиотеками работы с системными тач и мультитач-событиями;
3
у нас были наработки в виде инструмента рисования;
4
это удобная среда для работы с графикой и эффектами с помощью классов Bitmap и BitmapData;
5
каждая часть приложения была технически проверена нами в прошлом, поэтому решение было надёжным и экономически выгодным для клиента.
Требования к компьютерам
Требования к компьютерам
Клиент попросил нас составить минимальные технические требования к компьютерам для киоска, на которых DIFF будет работать быстро и правильно.
Изучив вопрос, мы решили, что в компьютер должны входить:
1
процессор с высокой базовой тактовой частотой. Пример: Intel Core i3−3240 с частотой 3400 МГц;
2
карта оперативной памяти, совместимая с процессором по тактовой частоте. Пример: Qumo [QUM3U-4G1600С11] объёмом 4 Гб и частотой 1600 МГц;
3
видеокарта, встроенная в материнскую плату;
4
SSD-диск. Объём зависит от количества контента;
5
блок питания, рассчитанный на длительную работу.
Оптимизация изображений
Оптимизация изображений
Исходный размер картинок близок к 5000х5000 px. Такое качество необходимо для запечатывания большой площади. В реальном времени работать с подобными изображениями невозможно: тяжёлые операции вроде наложения фильтров загружали систему, и она начинала «тормозить».
Для плавного создания дизайна и мгновенного отзыва на нажатие клавиш мы решили работать с копиями больших изображений, уменьшенных до 1200 px по широкой стороне. После загрузки больших исходников на сервер автоматически создавались их копии, которые затем отдавались приложению.
Серверная часть была сделана на фреймворке Rails. Библиотека carrierwave работает с загруженными файлами, а библиотека mini_magick — обрабатывает изображения при помощи пакета imagemagick.
Быстрая загрузка картинок
Быстрая загрузка картинок
В DIFF очень много графического контента: принтов, стикеров, шрифтов. Требовался загрузчик, который быстро синхронизирует контент на жёстком диске с контентом на сервере и подготавливает контент на жёстком диске для мгновенной загрузки.
Уже имеющиеся решения нам не подошли — обычно они загружают контент сразу в оперативную память, размер которой в нашем случае невелик. Поэтому мы написали особый синхронизатор, с которым картинки приходят с сервера, но пользователь этого не замечает.
В нашей ситуации монитор и компьютер отделимы друг от друга. Это позволяет ускорить синхронизацию и общую работу приложения за счёт установки SSD-диска, что и было сделано.
История действий
История действий
Инструмент сохранения истории действий пользователя незаменим, когда в процессе создания дизайна что-то пошло не так. От него требовалось:
1
возвращать действия на бесконечное число шагов назад;
2
работать быстро;
3
учитывать маленький объём оперативной памяти компьютера.
Чтобы это соблюсти, функция сохранения истории сделана методом Actions, когда записываются действия с объектами, а не состояния, как по методу States. Actions помогают приложению работать быстрее, но были проблемы с учётом большого количества исключительных случаев и разницы в алгоритмах прохождения по истории изменений вперёд и назад.
Команда Лайв Тайпинг успешно закончила проект и передала его клиенту.
Аккаунт-менеджер
Денис Визигин
Разработчики
Яков Щерба
Максим Сидоренко
Денис Визигин
Разработчики
Яков Щерба
Максим Сидоренко
Менеджеры
Юрий Кузьменко
Дарья Абрамова
Юрий Кузьменко
Дарья Абрамова
Тестировщик
Иван Савин
Иван Савин
Дизайнеры
Сергей Попович
Елена Гальцина
Сергей Попович
Елена Гальцина