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

интерфейс

Кафе

Задача
Обновить страницу заказа блюд в кафе

Решение

Это ↑ скорее черновик идеи, в нём ещё много чего нужно проработать.
Ещё покажу эскизы с описанием работы.

Эскизы

Верх страницы занимает полоска навигации, она всегда видна и подсказывает текущее местоположение.

Под полоской располагается область с календарем и меню блюд.
Скролируется только поле с фотографиями.
Для быстрого перехода к нужному разделу есть переключатель по типам, например, суп · салаты · комбо

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

Календарь

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

По умолчанию выбирается текущий день календаря.
Например, представим, что сегодня 27 декабря — вторник

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

Ещё в карточке дня есть общая стоимость заказа, прелоадер-галочка обратной связи, адрес доставки и шкала «сытости», обозначающая сколько ещё можно заказать еды.
Замену блюд в заказе можно сделать двумя способами, удалив ненужное и добавив вместо него новое блюдо, либо просто выбрав новый, например, суп в меню и нажать кнопку «Купить»

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

Адрес доставки проставляется автоматически по профилю пользователя, но его всегда можно изменить, например в случае разъездного характера работы или просто из-за командировки в другой филиал компании.

2017   интерфейс
Untitled Document

Обновленное меню

Обновил интерфейс меню Меркаты. Это облачный сервис, который предназначен для администрирования офлайн магазинов и онлайн касс.

Теперь меню выглядит так

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

Работать над проектом Меркаты увлекательно и очень интересно. Следите за обновлениями статьи и читайте подробный рассказ.

Попробовать новое меню в действии можно, пройдя регистрацию здесь.
Сделано обновление меню 1.2

2017   интерфейс   Мерката
Untitled Document

Каталог

Перед тем как разрабатывать новый дизайн, как и обычно, был проведён анализ текущего интерфейса каталога.




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




Перед непосредственной отрисовкой страниц и детальной проработки разделов на страницах, были проведены поиски общей концепции с увязкой всех страниц по дереву структуры сайта.
Вот некоторые примеры мокапов общей концепции:






Проект разработан совместно с командой «Суперстрой»
(В ревью идей и разработанных макетов принимали участие: Веб-аналитик, директор интернет магазина, технический разработчик и главный редактор сайта)
Благодарю ребят за помощь.

2016   веб-дизайн   интерфейс   суперстрой
Untitled Document
2016   интерфейс
Untitled Document
2012   apple   архитектура   интерфейс   концепция
Untitled Document

Frog + Sharp

Компания Sharp представила новый интерфейс для Android — Feel UX, разработанный дизайн студией Frog, который предустановлен на новой линейке смартфонов «Aquos».

Хорошее начало.
2012   дизайн   интерфейс
Untitled Document