25 заметок с тегом

Мерката

2017   Гайд   Мерката
Untitled Document Untitled Document

Случилось чудо

В Меркате произошло невероятное — ко мне подошли разработчики, Гриша Луговых и Ирина Григорьева, и говорят: «Мы захотели сделать круто. Только покажи нам, как?». Это очень клёва. Хорошо когда разработчик начинает думать о пользователях и осознаёт, что дизайн это не про картинки, а про то как это работает.
У ребят возникла потребность как-то закрыть временную паузу в загрузке данных с сервера, при этом не блокировать страницу для возможных действий и развлечь пользователя в момент ожидания подгрузки информации.

Вот так выглядит реализация

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

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

В итоге получилось хорошо

Теперь нужно также хорошо переделать анимацию для карточек.

Посмотреть всё это можно зайдя в сервис, но для этого нужно быть клиентом Меркаты.

Отдельное спасибо Насте Полозовой.

2017   Мерката
Untitled Document

Календарь


Описал в отдельной статье стаилгайда как должен работать и выглядеть датапикер. Хочется это показать вам.

2017   Мерката
Untitled Document

Про уведомления

С момента как я стал работать в проекте Меркаты, ребята из разных отделов меня часто спрашивали а как тут и что можно сделать там? Все вопросы были про кривость интерфейсов и кассовой программы. Я принял решение спроектировать макеты по некоторым текущим задачам в двух версиях: «в релиз с небольшими нововведениями» + «а на самом деле лучше сделать так». Второй вариант сработал, хорошо взбодрил всех и дал понять, что можно делать так, чтоб было хорошо.
Понятное дело, речь не шла о переделки всего с нуля. каждый кто был на презентации отмечал важные моменты, плюсы и минус. мы разобрали все замечания в виде рейтинговой таблицы и взяли в разработку ряд предложений с рассчетом что это востребовано бизнесом, сможет потянуть разработка и будет очевидный профит пользователям Меркаты.
Такими задачкам стали товары без штрихкода, касса 2.0, онбординг и экосистема уведомлений.

Дак вот, уведомления

Сообщения разделяются по типу, степени важности и тематике.
Так, предположительно, должны выглядеть уведомления внутри кассы

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

Если во время работы приходит обновление или сообщение от тех.поддержки, пупырь мигает синим цветом. А при каждом запуске лента сообщений не дает пропустить важное.

Конечно, уведомления используют преемственность поведения на вебе, в кассе и мобильных устройствах.

2017   Мерката
Untitled Document

2018

Пасхалочки и новогоднее оформление сервисов Меркаты.
Например, веб

…и касса

А это эскизы

Спасибо Маше Заволокиной за помощь в создании иллюстрации котопса :-)


В некоторых магазинах это выглядит вот так

2017   Мерката
Untitled Document

Гайд

В 2016 году освежил стиль Меркаты и составил подробный юай-кит. Удивительно, но до моего прихода в проект, команда даже не пыталась определиться с чем-то похожим, какой-то минимальный общий набор элементов, его небыло. Ребята просто делали текущие задачи, каждый, исходя из своего понимания как контрол, элемент или весь раздел целиком должен выглядеть, а иногда и работать. Нужно было разобрать бардак, переосмыслить и сделать хорошо. Это обьясняется тем, что не каждый знает, что все люди дизайнеры.

В итоге, после того как я причесал все разделы, исправил в них интерфейсные ошибки и привёл к общему виду сервисы Меркаты и кассовую программу, появилось время заняться написаним гайда Меркаты.
Выглядит он в виде статей, обьединённых общей логикой и структурой.

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

Гайд помог наглядно сформулировать общие принципы дизайна, на этой основе я составить цикл лекций для сотрудников Меркаты, определил структуру хранения скетч-библиотек для дизайнеров, фронтендеров, тестировщиков, аналитиков и технической поддержки.

Так выглядит общий список статей

А это еще несколько примеров про кнопку и инпут


Что ещё:
календарь;
баннер, тогл и бедж;
старницу входа·регистрации;


2017   Гайд   Мерката
Untitled Document

Новости в Меркате

Задача:
Показать как может выглядеть новостная страница Меркаты.

Вот так

Ещё есть шорткаты новостей, которые выглядят так

2017   Мерката
Untitled Document
2017   Мерката
Untitled Document

ЭмВиПи

Пока я где-то отдыхал, ребята в Меркате принялись пилить мобильное приложение.

Задача
За пол дня отдать макеты мобильного приложения в разработку.
Не дать сделать такое

В деплой ушло в таком виде

Кусочек сетки экранов разных состояний и нарисованная ранее иконка

Баннеры из магазина приложений



Фотокарточка часов Леши Сотова от Юры Кушпеля

Чтобы посмотреть вживую, нужно иметь регистрацию в Меркате и установить приложение для Андроид.

2017   Android   APP   Google   Мерката
Untitled Document

Атомарный дизайн и методология БЭМ

Компонентный подход в дизайне интерфейсов я перенял из архитектуры, благодаря программе для архитектурного проектирования АрхиКАД, на которую меня подсадила Тоня Крюгер. В подобных программах проект состоит из мелких деталей которые могут быть как самостоятельной единицей так и входить в состав большого организма здания, в котором каждый специалист, инженер по вентиляции или дизайнер интерьеров взаимодействует с этим элементом в условиях общего целого. Это было в 2005 году. Немного позднее появилась такая штука, как BIM, которая изменила архитектурное проектирование ядерным образом. А не так давно оказалось, что подобный подход проектирования интерфейсов принято называть атомарным дизайном. Это прикольно. Компонентный подход в интерфейсах интернет магазина или вот еще в интерьерах, например. Так получается, что стандартизация, согласованность и взаимозаменяемость — мощный инструмент развития любой системы и дизайна.

Так вот. Ранее я писал, что у меня было нечто, похожее на план по внедрению компонентного подхода в разработку сервисов Меркаты. Предложение внедрять компонентный подход поддержали некоторые разработчики.

И вот, спустя некоторое время, Леша Сотов рассказал ребятам об этом подходе на языке разработчика

Спустя еще некоторе время одна из команд разработчиков принялась пилить компоненты, подглядывая в методологию Яндекса. Для этой задачки я написал небольшой гайд (где, в какой момент и как именно используются элементы) для библиотеки элементов под этот пилотный проект и подготовил стартовый КИТ 1.0.0
Некоторые элементы из него

До поэтапного переезда на Вуи.джи-эс и внедрения компонентов в Меркате переделана значительная часть юзабилити. Скоро я продолжу рассказывать про эти улучшения……

2017   Атомарный дизайн   БЭМ   Мерката
Untitled Document

Умная касса

Нарисовал прототипы интерфейсов для кассовой программы Меркаты версии 2.0, а Ваня Парамонов и Никита Демидов из Форма-4 запилили промышленный дизайн кассы где будут жить все эти новые элементы.

Ребята почти сразу поймали общую форму, но над нижней частью устройства нужно было еще поработать.

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

Несколько зарисовок моих идей

В итоге получилось так

Разъёмы закомпонованы так, что достигается максимальное их количество но при этом если заполнить их все, кабель и вилки не мешают друг другу и не выпирают куда им не следует. Выводы кабеля прижимают пластины, а устройство сохраняет свою устойчивость.

А это эскизы упаковки, про неё расскажу отдельно

Макеты с приложением кассы версии 2.0

А так у меня получилось сделать рендеры интерьеров

А тут Антон Еликов проводит одну из первых презентаций гаджета

2017   POS   Мерката
Untitled Document
Ранее Ctrl + ↓