Проектируем интерфейс для мобильной версии магазина avtoform-plast.ru

Мы начали переработку уже родного для нас интернет-магазина avtoform-plast.ru. Ранее мы уже писали зачем нужна адаптация интернет-магазина под мобильные устройства.

Сложные моменты

Тюнинг-пласт  – интернет-магазин с хорошей многолетней историей. Но как и любой интерфейс, интерфейс avtoform-plast.ru, к сожалению, со временем устаревает. В чем это выражается? Прежде всего в неадаптированности под мобильные устройства в широком понимании этого значения. То есть спроектированные месяц назад интерфейсы легче сделать адаптивными, чем интерфейсы, разработанные много лет назад. Но это не беда!

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

Важно, чтобы интерфейс (любой, а тем более мобильный) проектировал человек, очень хорошо знакомый с версткой и новыми возможностями в реализации интерфейсов. Тут очень хорошо нужно продумывать все до мельчайшей детали, вплоть до того, как лучше и возможно ли при хорошей семантичной верстке сдвинуть/изменить тот или иной блок.

Как мы с этим справились

В первую очередь мы определили что крайне важно показать в мобильной версии, что должно быть легко доступно. Это основная информация о работе компании в шапке (логотип, телефоны для консультации, проверить статус заказа, навигация). Далее, конечно, очень важно показать каталог товаров и корзину.

Переработка шапки и трансформирование боковой колонки

Как шапка выглядит в мониторах на компьютере:

kmT6fqz

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

Прототип шапки на телефоне. Сразу под шапкой идет каталог (разворачивается при нажатии), а так же ссылка на корзину. Кружочки – это обозначения будущих иконок :)

Из левой колонки оставляем в мобильной версии только самое главное – каталог товаров. При этом мы разрабатываем промежуточную версию для планшетов: тут ширина экрана позволяет показать всю левую колонку с небольшими изменениями в контенте:

v36XpEE

Слева – прототип мобильной версии: каталог трансформировался в линию, боковая колонка скрыта. Справа – версия для планшетов – боковая колонка вся на месте, товары показываются в виде списка, а не сетки.

Вводим адаптивные таблицы

Обычные информационные таблицы должны быть доступны и в мобильных версиях (ведь как правило в таких таблицах важная информация). Например, общая информация о заказываемых товарах в корзине.

oN83u2k

На экранах компьютеров пользователь будет видеть данные о заказываемых товарах в виде таблицы.

На телефонах и планшетах таблицы трансформируются в строки, чтобы сохранить читаемость шрифтов.

Проектируем основные страницы магазина

Самые главные страницы в интерфейсе интернет-магазина – главная, витрина, карточка товара, корзина и оформление заказа. Именно на них мы делаем упор при разработке прототипов адаптивного дизайна. К тому же, там встречаются почти все элементы интерфейса, которые могут пригодиться на других страницах (таблицы, табы, формы и т.д.)

После утверждения прототипов мы приступим к прорисовке иконок и других новых элементов в интерфейсе, далее все отдаем front-end и back-end разработчикам. Welcome :)

Комментарии: