UI-дизайн мобильного магазина MoAction

maoction-design-thumb1
Mobile interface design for online shop

Описание проекта

Moaction – система управления с визуальным конструктором мобильным online-магазинов

В прошлом посте была описан представлен процесс проектирования товарного каталога демо-магазина, здесь описан графический дизайн, ui-дизайн и верстка страниц на основе детального прототипа.

Задача

  1. Создать визуальное оформление демо-магазина Moaction.
  2. Разработать ui-дизайн компонентов интерфейса, содержащую таблицы стилей для всех компонентов интерфейса магазина.
  3. Спроектировать архитектуру таблиц стилей простой для пользователя, но многокомпонентной внутри, настройкой цветовых схем демо-магазина в конструкторе дизайна.
  4. Сделать адаптивную верстку всех страниц магазина, установить js-модули динамические компоненты интерфейса
  5. Создать эффекты движения, раскрытия, переходов с помощью js/css-анимации
  6. Интегрировать верстку в шаблоны рабочей версии Moaction

Требования к графическому дизайну

  1. Демо-Магазин Moaction – это универсальный шаблон, который должен стать основой для многих пользовательских магазинов, должен иметь масштабируемую визуальную концепцию, которую можно будет дополнить другими отличающимися цветовыми решениями
  2. Это исключительно и только мобильный сайт с адаптивным дизайном, должен быть разработан в ориентацией прежде всего на мобильных пользователей.
  3. Стиль – плоский дизайн с тонкими линейными элементами иконок, кнопок, свободным пространством между функциональными элементами.
  4. Состав страниц и расположение элементов на страницах было утверждено на этапе проектирования и не требовано переработки.

Технические требования

  1. Дизайн должен быть разработан в виде растровых графических макетов, в нескольких вариантах на выбор, после утверждения предложенного стиля на примере главной страницы, разрабатываются еще 10 шаблонов разделов магазина, охватывающих весь функционал магазина.
  2. Дизайн должен хорошо отображаться на абсолютном большинстве мобильных устройств, имеющихся на рынке
  3. Растровая графика должна подгружаться в шаблоны в трех размерах, соответствующих ppt мобильных экранов, от простых c плотностью 1 до 3 и более (retina).
  4. Все графические элементы интерфейса должны быть векторными.
  5. Весь интерфейс должен состоять из модулей, полностью независимых от местоположения в шаблонах.
  6. Интеграция готового дизайна – проведена в twig-шаблоны.

Процесс

Чтобы создать универсальное решение нужно учесть множество технических факторов, о том:

  1. Будет ли оно масштабируемым под другую тематику онлайн-магазинов?
  2. Будет ли одна и та же визуальная концепция выглядеть органично и стильно в другой цветовой гамме
  3. Как предложенное решение будет реализовано технически с точки зрения комфортного отображения на мобильном экране с переменной яркостью и с точки зрения технологии разработки шаблонов, интеграцию в которые требовалось произвести.

Последовательно было разработано три варианта дизайна главной страницы магазина.

На этапе обсуждения предполагалось , что для графического дизайна желательно использовать без изменений, соблюдая гайдлайны, стиль Material Design от Google или дизайн в стиле ios7 мобильных приложений, но в итоге выработался основанный на стиле ios7 собственный вариант плоского дизайна с тонкими линейными иконками.

Дополнительно к выбранному были предложены такие варианты
Дизайн мобильного интернет-магазина

Типичный универсальный online-магазин с большим товарным каталогом предполагает достаточно насыщенный функционал страниц, интерфейс веб-приложения и на мобильных устройствах не должен терять важные настойки и возможности. Товары в каталоге – иметь тот же набор маркеров и опций, что и в онлайн магазине для desktop. Поэтому облегченная разметка, где обычно ширина любого блока равна ширине мобильного экрана, не подходила.

Специально для данного проекта:
  1. Была модифицирована на мобильные диапазоны модульная сетка фреймворка, так что на разных по ширине мобильных экранах, на portrait и landscape ориентациях, блоки на странице перестраивались по разному, благодаря дифференцированной в мобильных размерах экранов grid-системе.
    Модульная сетка для мобильных интернет-магазинов
  2. Разработана механика с использованием swip-жестов для перемещения по разделам горизонтально совместно с вертикальным accordion открытием внутренних пунктов меню.
    Меню в для мобильном интернет-магазине
  3. Видоизменен и оптимизирован обычный дизайн html-компонентов форм, выпадающих списков, модальных окон
  4. Введено визуальное отличие полноэкранных страниц, содержащий интерфейсы поиска, фильтра от всплывающих модальных окон, тоже занимающих всю площадь мобильного экрана, но взаимодействующих по другому.
  5. Типичная механика таб-панелей заменена только визуальное, но не технически, что важно для разработки, на динамику открытия активной таб-панели вверху экрана со скрытием всех блоков сверху страницы, я удобства просмотра только той информации, что во внимании сейчас.
    Таб-панели для мобильного интернет-магазина
  6. На мобильной веб-странице реализован полноценный zoom и карусель для просмотра больших изображений товара.
    Zoom в мобильном интернет-магазине

  7. Для просмотра списков товаров задействованы специфические мобильные тестовые события: swipe вправо и влево, масштабирование двумя пальцами
  8. Фильтр для просмотра списка товаров создан похожим по взаимодействию с пользователем как фильтр настроек в ios. Круглые чекбоксы удобно переключать пальцем.

    Настройки отображения категории в мобильном интернет магазине

Дизайн в соответсвии с прототипами и вся динамика компонентов интерфейса, разработанная в верстке была успешно перенесена при интеграции в twig-шаблоны.