b2b, bpm, e-commerce, desktop, from scratch
SMITT
Сервиса продажи контрактов виртуального оператора сотовой связи
Задача
Сделать дизайн сервиса по продаже и управлению контрактами виртуального мобильного оператора
Главный экран
На главном экране выведены полезные метрики и крупно, кнопка создания контракта
Контракты
Список контрактов, 1280x720
Центральное место занимает список контрактов в табличном виде. Таблица с бесконечным скроллом, ограничена шириной 1280, есть быстрый доступ по ховеру (добавление в избранное, превью для быстрого сравнения карточек и меню с действиями удалить/изменить) Добавленные в избранное контракты фиксируются в верхней части, по аналогии с Google Contacts.
Максимальная ширина таблицы 1280px
Доступ к быстрым операциями по ховеру строчки
Превью контракта в модальном окне
Два ключевых статуса (запуск и эксплуатация) в таблице дублируются индикаторами в начале строчки, так они лучше выделяются из массы продажных контрактов, также я использовал разную форму (заполненный и пустой круг) для лучшего контраста.
Аватарки без фотографий, чтобы не отвлекать от статусов, выполняют больше декоративную функцию, но и немного улучшают фокус.
Включенная опция архив показывает закрытые контракты
Работа фильтрации
Функции таблицы сведены к минимому, колонки сортируются по клику. Закрытые контракты автоматически скрываются и доступны по свитчу Архив. Если нужна более сложная фильтрация есть кнопка Фильтры.
Шапка (поиск, помощь, профиль)
Карточка контракта
Карточка выполнение с фиксированной шириной 1160px. Разбита на три функциональных блока. Шапка, контент и парящий блок.
При скролле шапка скрывается, парящий блок фиксируется наверху страницы
Стадии запуска и эксплуатации
Любой контракт создается в статусе Продажа, что равно черновику. Далее можно приложить документ и передвинуть контракт в Запуск и далее в Эксплуатацию.
Редактирование контракта
Редактирование проходит в отельном окне. Вместо шагов я решил сделать все на одной странице, но так как контент расположен в одной колонке, страница получилась высокой, поэтому для удобства навигации добавил парящий блок с оглавлением. Блок с итоговой ценой и действиями прижат к нижнему краю.
При скролле шапка скрывается, блок с оглавлением фиксируется
UI kit
Почти для всех проектов я делаю юай-кит, это помогает видеть и дорабатывать визульную стилистику целиком, также обеспечивает быстрый доступ к компонентам ну и помогает врестальщикам при разработке компонентов. Я стараюсь компоновать юай кит только основными элементами, например инпуты, кнопки могут иметь разную размерность в макетах в зависимости от контекста, также прототип содержит много уникальных форм, например оглавление, футеры с кнопками итп.